Record page styling update (#1300)

- More consistent font sizes and weights
- More distinguished collapsible UI elements
- Group all collapsible sections to bottom of category
- Larger navigation panel
- Updated "active section" highlighting in navigation panel
- Updated click behavior for navigation panel links
- Remove checkboxes from navigation panel
- Remove enumeration from categories
- Fixes to "scroll anchor" behavior (preventing page jumps as sections load)
- Fix to linking between transcription summary and expression graphs sections

Author: dmfalke

packages/libs/coreui/src/components/Mesa/Ui/DataRow.jsx

@@ -110,6 +110,7 @@ class DataRow extends React.PureComponent {
     return (
       <>
         <tr
+          id={getRowId ? 'row_id_' + getRowId(row) : undefined}
           className={className
             .concat(showChildRow ? ' _childIsExpanded' : '')
             .concat(hasExpansionColumn ? ' _isExpandable' : '')}

packages/libs/coreui/src/components/Mesa/Ui/ExpansionCell.tsx

@@ -11,11 +11,13 @@ type Props = {
   heading: boolean;
 };
 
+const EMPTY_ARRAY: Props['expandedRows'] = [];
+
 export default function ExpansionCell({
   rows,
   row,
   onExpandedRowsChange,
-  expandedRows,
+  expandedRows = EMPTY_ARRAY,
   getRowId,
   inert,
   heading,

packages/libs/eda/src/lib/workspace/EDAWorkspace.scss

@@ -12,11 +12,6 @@
     font-size: 0.9em;
   }
 
-  .wdk-RecordSidebarToggle,
-  .wdk-RecordSidebar {
-    background-color: #eaeaea;
-  }
-
   .wdk-RecordActions,
   .wdk-RecordHeading {
     display: none;

packages/libs/wdk-client/src/Actions/RecordActions.ts

@@ -173,7 +173,7 @@ export type SectionVisibilityAction = {
   type: typeof SECTION_VISIBILITY;
   payload: {
     name: string;
-    isVisible: boolean;
+    isVisible?: boolean;
   };
 };
 

packages/libs/wdk-client/src/Components/CheckboxTree/CategoriesCheckboxTree.tsx

@@ -12,6 +12,7 @@ import { makeSearchHelpText } from '../../Utils/SearchUtils';
 import CheckboxTree, {
   LinksPosition,
   CheckboxTreeStyleSpec,
+  CheckboxTreeProps,
 } from '@veupathdb/coreui/lib/components/inputs/checkboxes/CheckboxTree/CheckboxTree';
 import {
   getFilteredNodeChildren,
@@ -20,7 +21,7 @@ import {
 
 const sharedCheckboxTreeContainerStyleSpec: React.CSSProperties = {
   position: 'relative',
-  maxHeight: '75vh',
+  maxHeight: 'calc(100vh - 2.5em - var(--page-offset-top, 0px))',
   overflow: 'hidden',
   display: 'flex',
   flexDirection: 'column',
@@ -67,6 +68,7 @@ type Props = {
    * If omitted, the container uses the sharedCheckboxTreeContainerStyleSpec default styles
    */
   type?: 'headerMenu' | 'searchPane';
+  additionalFilters?: CheckboxTreeProps<unknown>['additionalFilters'];
 };
 
 let CategoriesCheckboxTree: FunctionComponent<Props> = (props) => {
@@ -98,6 +100,7 @@ let CategoriesCheckboxTree: FunctionComponent<Props> = (props) => {
     containerClassName = '',
     styleOverrides = {},
     type,
+    additionalFilters,
   } = props;
 
   if (tree.children.length == 0) {
@@ -119,6 +122,7 @@ let CategoriesCheckboxTree: FunctionComponent<Props> = (props) => {
       ? {
           ...sharedCheckboxTreeContainerStyleSpec,
           minWidth: '18.75em',
+          maxHeight: 'none',
         }
       : {
           ...sharedCheckboxTreeContainerStyleSpec,
@@ -164,6 +168,7 @@ let CategoriesCheckboxTree: FunctionComponent<Props> = (props) => {
           onExpansionChange={onUiChange}
           onSearchTermChange={onSearchTermChange}
           styleOverrides={styleOverrides}
+          additionalFilters={additionalFilters}
         />
       </div>
     </div>

packages/libs/wdk-client/src/Components/Display/CollapsibleSection.css

@@ -2,7 +2,7 @@
   cursor: pointer;
   position: relative;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
 }
 
 .wdk-CollapsibleSectionHeader:before {

packages/libs/wdk-client/src/Components/Display/CollapsibleSection.tsx

@@ -57,8 +57,6 @@ function CollapsibleSection(props: Props) {
 
   const handleCollapsedChange = useCallback(
     (event: React.MouseEvent<HTMLElement>) => {
-      event.currentTarget.blur();
-      event.stopPropagation();
       onCollapsedChange(!isCollapsed);
     },
     [isCollapsed, onCollapsedChange]

packages/libs/wdk-client/src/Core/routes.tsx

@@ -142,6 +142,7 @@ const routes: RouteEntry[] = [
 
   {
     path: '/record/:recordClass/:primaryKey+',
+    rootClassNameModifier: 'record',
     component: (
       props: RouteComponentProps<{ recordClass: string; primaryKey: string }>
     ) => <RecordController {...props.match.params} />,

packages/libs/wdk-client/src/StoreModules/RecordStoreModule.ts

@@ -160,7 +160,10 @@ export function reduce(state: State = {} as State, action: Action): State {
     case SECTION_VISIBILITY: {
       let collapsedSections = updateList(
         action.payload.name,
-        !action.payload.isVisible,
+        !(
+          action.payload.isVisible ??
+          state.collapsedSections.includes(action.payload.name)
+        ),
         state.collapsedSections
       );
       return { ...state, collapsedSections };

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

@@ -408,6 +408,7 @@ function makeComparator(
   questions: Dict<Question>
 ) {
   return composeComparators(
+    compareByTargetType,
     compareByChildren,
     compareBySortNumber,
     makeCompareBySortName(recordClasses, questions)
@@ -427,6 +428,14 @@ function composeComparators(...comparators: NodeComparator[]): NodeComparator {
   };
 }
 
+function compareByTargetType(nodeA: CategoryTreeNode, nodeB: CategoryTreeNode) {
+  const nodeATargetType = getTargetType(nodeA);
+  const nodeBTargetType = getTargetType(nodeB);
+  if (nodeATargetType === 'attribute' && nodeBTargetType === 'table') return -1;
+  if (nodeATargetType === 'table' && nodeBTargetType === 'attribute') return 1;
+  return 0;
+}
+
 /**
  * Set subsections before leaves (tables,attributes or searches)
  * This makes the current record page section numbering system work