OrthoMCL - Custom tree-table for OrthoGroup page

.github/workflows/npm-publish-sites.yml

@@ -3,9 +3,9 @@
 
 name: NPM Publish Sites
 on:
-  release:
-    types:
-      - published
+  push:
+    tags:
+      - v*
 
 jobs:
   # Gather the names of the sites directories and store it as an output variable
@@ -51,15 +51,11 @@ jobs:
           elif [[ "$git_tag" =~ ^[0-9]+\.[0-9]+\.[0-9]+-([a-zA-Z0-9]+)(\.[0-9]+)*$ ]]; then
             npm_tag="${BASH_REMATCH[1]}"
             echo "npm_tag=$npm_tag" >> $GITHUB_ENV
-          # if prerelease is checked, use "prerelease" for the npm tag
-          elif ${{ github.event.release.prerelease }}; then
-            echo "npm_tag=prerelease" >> $GITHUB_ENV
           # or fall back to 'latest' just in case
           else
             echo "npm_tag=latest" >> $GITHUB_ENV
           fi
       - uses: JS-DevTools/npm-publish@v2
-        if: ${{ startsWith(github.event.release.tag_name, 'v') }}
         with:
           token: ${{ secrets.NPM_TOKEN }}
           access: public

.gitignore

@@ -73,8 +73,11 @@ typings/
 
 # dotenv environment variables file
 .env
+.env~
 .env.test
+.env.test~
 .env.local
+.env.local~
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache

packages/libs/components/package.json

@@ -46,7 +46,7 @@
     "react-spring": "^9.7.1",
     "react-transition-group": "^4.4.1",
     "shape2geohash": "^1.2.5",
-    "tidytree": "github:d-callan/TidyTree"
+    "tidytree": "https://github.com/d-callan/TidyTree.git#commit=9063e2df3d93c72743702a6d8f43169a1461e5b0"
   },
   "files": [
     "lib",

packages/libs/components/src/components/plotControls/SelectedRangeControl.tsx

@@ -22,6 +22,8 @@ export interface SelectedRangeControlProps
   enforceBounds?: boolean;
   /** show a clear button, optional, default is true */
   showClearButton?: boolean;
+  /** display 'inclusive' after the from/to inputs */
+  inclusive?: boolean;
 }
 
 export default function SelectedRangeControl({
@@ -33,6 +35,7 @@ export default function SelectedRangeControl({
   enforceBounds = false,
   showClearButton = true,
   containerStyles,
+  inclusive = false,
 }: SelectedRangeControlProps) {
   const validator = enforceBounds
     ? undefined
@@ -67,6 +70,7 @@ export default function SelectedRangeControl({
           showClearButton={showClearButton}
           containerStyles={containerStyles}
           validator={validator}
+          inclusive={inclusive}
         />
       ) : (
         <NumberRangeInput
@@ -77,6 +81,7 @@ export default function SelectedRangeControl({
           showClearButton={showClearButton}
           containerStyles={containerStyles}
           validator={validator}
+          inclusive={inclusive}
         />
       )}
     </LabelledGroup>

packages/libs/components/src/components/tidytree/HorizontalDendrogram.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useRef } from 'react';
+import { CSSProperties, useEffect, useLayoutEffect, useRef } from 'react';
 import { TidyTree as TidyTreeJS } from 'tidytree';
 
 export interface HorizontalDendrogramProps {
@@ -19,6 +19,7 @@ export interface HorizontalDendrogramProps {
        for now just default to all zero margins (left-most edges 
      */
     margin?: [number, number, number, number];
+    interactive?: boolean;
   };
 
   /// The remaining props are handled with a redraw: ///
@@ -31,10 +32,21 @@ export interface HorizontalDendrogramProps {
    * width of tree in pixels
    */
   width: number;
+  /**
+   * hopefully temporary prop that we can get rid of when we understand the
+   * horizontal layout behaviour of the tree (with respect to number of nodes)
+   * which will come with testing with more examples. Defaults to 1.0
+   * update: possibly wasn't needed in the end!
+   */
+  hStretch?: number;
   /**
    * number of pixels height taken per leaf
    */
   rowHeight: number;
+  /**
+   * CSS styles for the container div
+   */
+  containerStyles?: CSSProperties;
   /**
    * which leaf nodes to highlight
    */
@@ -43,6 +55,10 @@ export interface HorizontalDendrogramProps {
    * highlight whole subtrees ('monophyletic') or just leaves ('none')
    */
   highlightMode?: 'monophyletic' | 'none';
+  /**
+   * highlight color (optional - default is tidytree's yellow/orange)
+   */
+  highlightColor?: string;
 }
 
 /**
@@ -57,9 +73,12 @@ export function HorizontalDendrogram({
   leafCount,
   rowHeight,
   width,
-  options: { ruler = false, margin = [0, 0, 0, 0] },
+  options: { ruler = false, margin = [0, 0, 0, 0], interactive = true },
   highlightedNodeIds,
   highlightMode,
+  highlightColor,
+  hStretch = 1.0,
+  containerStyles,
 }: HorizontalDendrogramProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const tidyTreeRef = useRef<TidyTreeJS>();
@@ -80,13 +99,15 @@ export function HorizontalDendrogram({
       equidistantLeaves: true,
       ruler,
       margin,
+      hStretch,
       animation: 0, // it's naff and it reveals edge lengths/weights momentarily
+      interactive,
     });
     tidyTreeRef.current = instance;
     return function cleanup() {
       instance.destroy();
     };
-  }, [data, ruler, margin]);
+  }, [data, ruler, margin, hStretch, interactive, containerRef]);
 
   // redraw when the container size changes
   // useLayoutEffect ensures that the redraw is not called for brand new TidyTreeJS objects
@@ -106,19 +127,23 @@ export function HorizontalDendrogram({
       tidyTreeRef.current.setColorOptions({
         nodeColorMode: 'predicate',
         branchColorMode: highlightMode ?? 'none',
+        highlightColor: highlightColor,
         leavesOnly: true,
         predicate: (node) => highlightedNodeIds.includes(node.__data__.data.id),
+        defaultBranchColor: '#333',
       });
       // no redraw needed, setColorOptions does it
     }
-  }, [highlightedNodeIds, highlightMode, tidyTreeRef]);
+  }, [highlightedNodeIds, highlightMode, tidyTreeRef, data]);
+  // `data` not used in effect but needed to trigger recoloring
 
   const containerHeight = leafCount * rowHeight;
   return (
     <div
       style={{
         width: width + 'px',
         height: containerHeight + 'px',
+        ...containerStyles,
       }}
       ref={containerRef}
     />

packages/libs/components/src/components/tidytree/TreeTable.scss

@@ -0,0 +1,6 @@
+.TreeTable {
+  --tree-table-row-height: 1em;
+  tr {
+    height: var(--tree-table-row-height);
+  }
+}

packages/libs/components/src/components/tidytree/TreeTable.tsx

@@ -5,15 +5,20 @@ import {
 } from '../../components/tidytree/HorizontalDendrogram';
 import Mesa from '@veupathdb/coreui/lib/components/Mesa';
 import { MesaStateProps } from '../../../../coreui/lib/components/Mesa/types';
-import { css as classNameStyle, cx } from '@emotion/css';
-import { css as globalStyle, Global } from '@emotion/react';
+
+import './TreeTable.scss';
 
 export interface TreeTableProps<RowType> {
   /**
    * number of pixels vertical space for each row of the table and tree
    * (for the table this is a minimum height, so make sure table content doesn't wrap)
+   * required; no default; minimum seems to be 42; suggested value: 45
    */
   rowHeight: number;
+  /**
+   * number of pixels max width for table columns; defaults to 200
+   */
+  maxColumnWidth?: number;
   /**
    * data and options for the tree
    */
@@ -25,8 +30,18 @@ export interface TreeTableProps<RowType> {
    * data and options for the table
    */
   tableProps: MesaStateProps<RowType>;
+  /**
+   * hide the tree (but keep its horizontal space); default = false
+   */
+  hideTree?: boolean;
+  /**
+   * Passed as children to the `Mesa` component
+   */
+  children?: React.ReactNode;
 }
 
+const margin: [number, number, number, number] = [0, 10, 0, 10];
+
 /**
  * main props are
  *   data: string;    // Newick format tree
@@ -42,50 +57,52 @@ export interface TreeTableProps<RowType> {
  * - allow additional Mesa props and options to be passed
  */
 export default function TreeTable<RowType>(props: TreeTableProps<RowType>) {
-  const { rowHeight } = props;
-  const { rows } = props.tableProps;
-
-  const rowStyleClassName = useMemo(
-    () =>
-      cx(
-        classNameStyle({
-          height: rowHeight + 'px',
-          background: 'yellow',
-        })
-      ),
-    [rowHeight]
-  );
+  const { rowHeight, maxColumnWidth = 200, hideTree = false, children } = props;
+  const { rows, filteredRows } = props.tableProps;
 
   // tableState is just the tableProps with an extra CSS class
   // to make sure the height is consistent with the tree
-  const tableState: MesaStateProps<RowType> = {
-    ...props.tableProps,
-    options: {
-      ...props.tableProps.options,
-      deriveRowClassName: (_) => rowStyleClassName,
-    },
-  };
-
-  return (
-    <div
-      style={{ display: 'flex', alignItems: 'flex-end', flexDirection: 'row' }}
-    >
+  const tableState: MesaStateProps<RowType> = useMemo(() => {
+    const tree = hideTree ? null : (
       <HorizontalDendrogram
         {...props.treeProps}
         rowHeight={rowHeight}
-        leafCount={rows.length}
-        options={{ margin: [0, 10, 0, 10] }}
+        leafCount={filteredRows?.length ?? rows.length}
+        options={{ margin, interactive: false }}
       />
-      <>
-        <Global
-          styles={globalStyle`
-	  .DataTable {
-	    margin-bottom: 0px !important;
-	  }
-	`}
-        />
-        <Mesa state={tableState} />
-      </>
-    </div>
-  );
+    );
+
+    return {
+      ...props.tableProps,
+      options: {
+        ...props.tableProps.options,
+        className: 'TreeTable',
+        style: {
+          '--tree-table-row-height': rowHeight + 'px',
+        } as React.CSSProperties,
+        inline: true,
+        // TO DO: explore event delegation to avoid each tooltip having handlers
+        //        replace inline mode's inline styling with emotion classes
+        inlineUseTooltips: true,
+        inlineMaxHeight: `${rowHeight}px`,
+        inlineMaxWidth: `${maxColumnWidth}px`,
+        marginContent: tree,
+      },
+    };
+  }, [
+    filteredRows?.length,
+    hideTree,
+    maxColumnWidth,
+    props.tableProps,
+    props.treeProps,
+    rowHeight,
+    rows.length,
+  ]);
+
+  // if `hideTree` is used more dynamically than at present
+  // (for example if the user sorts the table)
+  // then the table container styling will need
+  // { marginLeft: hideTree ? props.treeProps.width : 0 }
+  // to stop the table jumping around horizontally
+  return <Mesa state={tableState} children={children} />;
 }

packages/libs/components/src/components/tidytree/tidytree.d.ts

@@ -15,6 +15,7 @@ interface ColorOptions {
   branchColorMode: 'monophyletic' | 'none';
   highlightColor?: string;
   defaultNodeColor?: string;
+  defaultBranchColor?: string;
 }
 
 declare module 'tidytree' {

packages/libs/components/src/components/widgets/NumberAndDateRangeInputs.tsx

@@ -45,6 +45,8 @@ export type BaseProps<M extends NumberOrDateRange> = {
   disabled?: boolean;
   /** specify the height of the input element */
   inputHeight?: number;
+  /** add 'inclusive' text after the second range box */
+  inclusive?: boolean;
 };
 
 export type NumberRangeInputProps = BaseProps<NumberRange> & { step?: number };
@@ -89,6 +91,7 @@ function BaseInput({
   // add disabled prop to disable input fields
   disabled = false,
   inputHeight,
+  inclusive = false,
   ...props
 }: BaseInputProps) {
   if (validator && required)
@@ -268,6 +271,23 @@ function BaseInput({
             inputHeight={inputHeight}
           />
         )}
+        {inclusive && (
+          <div style={{ display: 'flex', flexDirection: 'row' }}>
+            {/* change margin */}
+            <div
+              style={{
+                margin: 'auto 10px',
+              }}
+            >
+              <Typography
+                variant="button"
+                style={{ color: disabled ? MEDIUM_GRAY : DARKEST_GRAY }}
+              >
+                inclusive
+              </Typography>
+            </div>
+          </div>
+        )}
         {showClearButton && (
           <Button
             type={'outlined'}