diff --git a/packages/libs/wdk-client/src/Utils/CategoryUtils.tsx b/packages/libs/wdk-client/src/Utils/CategoryUtils.tsx index e469cd92a1..d3b3ce0244 100644 --- a/packages/libs/wdk-client/src/Utils/CategoryUtils.tsx +++ b/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( + (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 ) { return composeComparators( - compareByTargetType, + // compareByTargetType, compareByChildren, compareBySortNumber, makeCompareBySortName(recordClasses, questions) diff --git a/packages/libs/wdk-client/src/Views/Records/Record.css b/packages/libs/wdk-client/src/Views/Records/Record.css index 1fb19554c4..ca623a9b4a 100644 --- a/packages/libs/wdk-client/src/Views/Records/Record.css +++ b/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 { diff --git a/packages/libs/wdk-client/src/Views/Records/RecordUI.jsx b/packages/libs/wdk-client/src/Views/Records/RecordUI.jsx index 684721c2d6..e2b7ec1a2e 100644 --- a/packages/libs/wdk-client/src/Views/Records/RecordUI.jsx +++ b/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(); diff --git a/packages/libs/web-common/src/styles/AllSites.scss b/packages/libs/web-common/src/styles/AllSites.scss index bf139a1e86..cdf2f295ce 100644 --- a/packages/libs/web-common/src/styles/AllSites.scss +++ b/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); } diff --git a/packages/libs/web-common/src/styles/client.scss b/packages/libs/web-common/src/styles/client.scss index 373b4921f9..69358a8276 100644 --- a/packages/libs/web-common/src/styles/client.scss +++ b/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; diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/GeneRecordClasses.GeneRecordClass.jsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/GeneRecordClasses.GeneRecordClass.jsx index 51fc8b4b27..41c0efcafd 100644 --- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/records/GeneRecordClasses.GeneRecordClass.jsx +++ b/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() {