Record page style updates (#1316)

* Remove ordering by targetType

* Expand nav panel category when shortcut of child is clicked

* Expand active nav panel section on page load

* Make some whitespace adjustments

* Fix issue with PopoverButton causing page jumps

packages/libs/wdk-client/src/Utils/CategoryUtils.tsx

@@ -13,7 +13,7 @@ import {
 } from '../Utils/OntologyUtils';
 import { areTermsInString } from '../Utils/SearchUtils';
 import { Seq } from '../Utils/IterableUtils';
-import { preorderSeq, getBranches } from '../Utils/TreeUtils';
+import { preorderSeq, getBranches, foldStructure } from '../Utils/TreeUtils';
 import { Question, RecordClass } from '../Utils/WdkModel';
 // import {Tooltip} from '@veupathdb/components/lib/components/widgets/Tooltip';
 
@@ -136,6 +136,30 @@ export function getChildren(node: CategoryTreeNode) {
   return node.children;
 }
 
+export function getAncestors(
+  tree: CategoryTreeNode,
+  descendantId: string
+): CategoryTreeNode[] {
+  return foldStructure<CategoryTreeNode, CategoryTreeNode[]>(
+    (acc, node) => {
+      const directDescendantId = acc[0] && getId(acc[0]);
+      if (
+        node.children.some((childNode) => {
+          const childNodeId = getId(childNode);
+          return (
+            childNodeId === directDescendantId || childNodeId === descendantId
+          );
+        })
+      ) {
+        return [node, ...acc];
+      }
+      return acc;
+    },
+    [],
+    tree
+  ).slice(0, -1);
+}
+
 // TODO Make this more genericL createCategoryNode and createWdkEntityNode (or, createLeafNode??)
 /**
  * Returns a JSON object representing a simplified category tree node that will be properly interpreted
@@ -408,7 +432,7 @@ function makeComparator(
   questions: Dict<Question>
 ) {
   return composeComparators(
-    compareByTargetType,
+    // compareByTargetType,
     compareByChildren,
     compareBySortNumber,
     makeCompareBySortName(recordClasses, questions)

packages/libs/wdk-client/src/Views/Records/Record.css

@@ -11,7 +11,6 @@
 .wdk-RecordActions {
   padding: 0;
   margin: 0;
-  padding-top: 1em;
 }
 
 .wdk-RecordHeading {
@@ -50,6 +49,7 @@
   /* make prevent contents panel from being clipped. */
   min-height: 65vh;
   margin-left: 2em;
+  width: 100%;
 }
 
 .wdk-RecordSidebar {

packages/libs/wdk-client/src/Views/Records/RecordUI.jsx

@@ -2,7 +2,7 @@ import classnames from 'classnames';
 import { debounce, get, isEqual, memoize } from 'lodash';
 import React, { Component } from 'react';
 import { findDOMNode } from 'react-dom';
-import { getId } from '../../Utils/CategoryUtils';
+import { getAncestors, getId } from '../../Utils/CategoryUtils';
 import { wrappable } from '../../Utils/ComponentUtils';
 import { findAncestorNode } from '../../Utils/DomUtils';
 import { postorderSeq, preorderSeq } from '../../Utils/TreeUtils';
@@ -121,6 +121,12 @@ class RecordUI extends Component {
       if (isFirstLoadForRecordId) {
         // open the target section
         this.props.updateSectionVisibility(sectionNode.id, true);
+        const ancestorCategoryNodes = getAncestors(
+          this.props.categoryTree,
+          sectionNode.id
+        ).slice(1);
+        const ancestorNodeId = ancestorCategoryNodes.map(getId);
+        this.props.updateNavigationCategoryExpansion(ancestorNodeId);
       }
 
       const rect = targetNode.getBoundingClientRect();

packages/libs/web-common/src/styles/AllSites.scss

@@ -44,7 +44,10 @@ html {
   --page-offset-top: 100px;
 }
 html {
-  overflow: auto;
+  // The following rule causes the page to jump around when using the mui
+  // Popover component. I'm leaving this commented-out rule in place for
+  // future reference.
+  // overflow: auto;
   scroll-padding-top: var(--page-offset-top);
 }
 

packages/libs/web-common/src/styles/client.scss

@@ -119,6 +119,7 @@ td.wdk-DataTableCell__thumbnail {
 }
 
 .eupathdb-RecordOverview {
+  padding-top: 1rem;
   padding-bottom: 2rem;
   border-bottom: 1px solid #aaa;
 }
@@ -183,8 +184,8 @@ td.wdk-DataTableCell__thumbnail {
 .eupathdb-RecordOverview {
   dl {
     font-size: 1.4em;
-    row-gap: 0.2em;
     margin: 0;
+    line-height: 1.3em;
   }
   dt {
     justify-self: start;

packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/GeneRecordClasses.GeneRecordClass.jsx

@@ -46,12 +46,16 @@ import betaImage from '@veupathdb/wdk-client/lib/Core/Style/images/beta2-30.png'
 import { LinksPosition } from '@veupathdb/coreui/lib/components/inputs/checkboxes/CheckboxTree/CheckboxTree';
 import { AlphaFoldRecordSection } from './AlphaFoldAttributeSection';
 import { DEFAULT_TABLE_STATE } from '@veupathdb/wdk-client/lib/StoreModules/RecordStoreModule';
+import { findAncestorFields } from '@veupathdb/wdk-client/lib/Components/AttributeFilter/AttributeFilterUtils';
 
 /**
  * Render thumbnails at eupathdb-GeneThumbnailsContainer
  */
 export const RecordHeading = connect(
-  (state) => ({ categoryTree: state.record.categoryTree }),
+  (state) => ({
+    categoryTree: state.record.categoryTree,
+    navigationCategoriesExpanded: state.record.navigationCategoriesExpanded,
+  }),
   RecordActions
 )(
   class GeneRecordHeading extends Component {
@@ -78,7 +82,19 @@ export const RecordHeading = connect(
     }
 
     handleThumbnailClick({ anchor }) {
+      const parentCategories = Category.getAncestors(
+        this.props.categoryTree,
+        anchor
+      ).slice(1);
+      const parentCategoryIds = parentCategories.map(Category.getId);
+      const nextExpandedNavCats = Array.from(
+        new Set([
+          ...this.props.navigationCategoriesExpanded,
+          ...parentCategoryIds,
+        ])
+      );
       this.props.updateSectionVisibility(anchor, true);
+      this.props.updateNavigationCategoryExpansion(nextExpandedNavCats);
     }
 
     componentDidUpdate() {