OrthoMCL - Custom tree-table for OrthoGroup page

packages/libs/components/package.json

@@ -45,7 +45,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/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
    */
@@ -57,9 +69,11 @@ 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,
+  hStretch = 1.0,
+  containerStyles,
 }: HorizontalDendrogramProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const tidyTreeRef = useRef<TidyTreeJS>();
@@ -80,7 +94,9 @@ 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() {
@@ -119,6 +135,7 @@ export function HorizontalDendrogram({
       style={{
         width: width + 'px',
         height: containerHeight + 'px',
+        ...containerStyles,
       }}
       ref={containerRef}
     />

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

@@ -12,8 +12,13 @@ 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
    */
@@ -42,16 +47,25 @@ 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 { rowHeight, maxColumnWidth = 200 } = props;
   const { rows } = props.tableProps;
 
   const rowStyleClassName = useMemo(
     () =>
       cx(
-        classNameStyle({
-          height: rowHeight + 'px',
-          background: 'yellow',
-        })
+        // minimum height for table rows
+        classNameStyle`
+          height: ${rowHeight}px;
+
+          & td {
+
+            &:hover {
+              cursor: pointer;
+              position: relative;
+            }
+
+          }
+	`
       ),
     [rowHeight]
   );
@@ -63,6 +77,9 @@ export default function TreeTable<RowType>(props: TreeTableProps<RowType>) {
     options: {
       ...props.tableProps.options,
       deriveRowClassName: (_) => rowStyleClassName,
+      inline: true,
+      inlineMaxHeight: `${rowHeight}px`,
+      inlineMaxWidth: `${maxColumnWidth}px`,
     },
   };
 
@@ -74,18 +91,24 @@ export default function TreeTable<RowType>(props: TreeTableProps<RowType>) {
         {...props.treeProps}
         rowHeight={rowHeight}
         leafCount={rows.length}
-        options={{ margin: [0, 10, 0, 10] }}
+        options={{ margin: [0, 10, 0, 10], interactive: false }}
       />
-      <>
+      <div
+        style={{
+          flexGrow: 1,
+          width: 1 /* arbitrary non-zero width seems necessary for flex */,
+        }}
+      >
         <Global
           styles={globalStyle`
 	  .DataTable {
 	    margin-bottom: 0px !important;
+            width: 80%;
 	  }
 	`}
         />
         <Mesa state={tableState} />
-      </>
+      </div>
     </div>
   );
 }

packages/sites/ortho-site/package.json

@@ -89,5 +89,8 @@
   "files": [
     "dist",
     "webapp"
-  ]
+  ],
+  "dependencies": {
+    "patristic": "^0.6.0"
+  }
 }

packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/Sequences.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import TreeTable from '@veupathdb/components/lib/components/tidytree/TreeTable';
+import { RecordTableProps, WrappedComponentProps } from './Types';
+import { useOrthoService } from 'ortho-client/hooks/orthoService';
+import { Loading } from '@veupathdb/wdk-client/lib/Components';
+import { parseNewick } from 'patristic';
+import { AttributeValue } from '@veupathdb/wdk-client/lib/Utils/WdkModel';
+
+type RowType = Record<string, AttributeValue>;
+
+export function RecordTable_Sequences(
+  props: WrappedComponentProps<RecordTableProps>
+) {
+  const groupName = props.record.id.find(
+    ({ name }) => name === 'group_name'
+  )?.value;
+
+  if (!groupName) {
+    throw new Error('groupName is required but was not found in the record.');
+  }
+
+  const treeResponse = useOrthoService(
+    (orthoService) => orthoService.getGroupTree(groupName),
+    [groupName]
+  );
+
+  const [highlightedNodes, setHighlightedNodes] = useState<string[]>([]);
+
+  if (treeResponse == null) return <Loading />;
+
+  const mesaColumns = props.table.attributes
+    .map(({ name, displayName }) => ({
+      key: name,
+      name: displayName,
+    }))
+    // and remove a raw HTML checkbox field - we'll use Mesa's built-in checkboxes for this
+    // and an object-laden 'sequence_link' field - the ID seems to be replicated in the full_id field
+    .filter(({ key }) => key !== 'clustalInput' && key !== 'sequence_link');
+
+  const mesaRows = props.value;
+
+  // do some validation on the tree w.r.t. the table
+
+  // should this be async? it's potentially expensive
+  const tree = parseNewick(treeResponse.newick);
+  const leaves = tree.getLeaves();
+
+  // sort the table in the same order as the tree's leaves
+  const sortedRows = leaves
+    .map(({ id }) => mesaRows.find(({ full_id }) => full_id === id))
+    .filter((row): row is RowType => row != null);
+
+  if (leaves.length !== sortedRows.length)
+    return (
+      <div>Tree and protein list mismatch, please contact the helpdesk</div>
+    );
+
+  const mesaState = {
+    options: {
+      isRowSelected: (row: RowType) =>
+        highlightedNodes.includes(row.full_id as string),
+    },
+    rows: sortedRows,
+    columns: mesaColumns,
+    eventHandlers: {
+      onRowSelect: (row: RowType) =>
+        setHighlightedNodes((prev) => [...prev, row.full_id as string]),
+      onRowDeselect: (row: RowType) =>
+        setHighlightedNodes((prev) => prev.filter((id) => id !== row.full_id)),
+    },
+  };
+
+  const treeProps = {
+    data: treeResponse.newick,
+    width: 200,
+    highlightMode: 'monophyletic' as const,
+    highlightedNodeIds: highlightedNodes,
+  };
+
+  const rowHeight = 45;
+
+  return (
+    <>
+      <div>Ignore the help text above for now!</div>
+      <TreeTable
+        rowHeight={rowHeight}
+        treeProps={treeProps}
+        tableProps={mesaState}
+      />
+    </>
+  );
+}

packages/sites/ortho-site/webapp/wdkCustomization/js/client/services.tsx

@@ -9,11 +9,13 @@ import {
   groupLayoutResponseDecoder,
 } from 'ortho-client/utils/groupLayout';
 import { TaxonEntries, taxonEntriesDecoder } from 'ortho-client/utils/taxons';
+import { TreeResponse, treeResponseDecoder } from 'ortho-client/utils/tree';
 
 export function wrapWdkService(wdkService: WdkService): OrthoService {
   return {
     ...wdkService,
     getGroupLayout: orthoServiceWrappers.getGroupLayout(wdkService),
+    getGroupTree: orthoServiceWrappers.getGroupTree(wdkService),
     getProteomeSummary: orthoServiceWrappers.getProteomeSummary(wdkService),
     getTaxons: orthoServiceWrappers.getTaxons(wdkService),
   };
@@ -26,6 +28,12 @@ const orthoServiceWrappers = {
       method: 'get',
       path: `/group/${groupName}/layout`,
     }),
+  getGroupTree: (wdkService: WdkService) => (groupName: string) =>
+    wdkService.sendRequest(treeResponseDecoder, {
+      useCache: true,
+      method: 'get',
+      path: `/newick-protein-tree/${groupName}`,
+    }),
   getProteomeSummary: (wdkService: WdkService) => () =>
     wdkService.sendRequest(proteomeSummaryRowsDecoder, {
       useCache: true,
@@ -42,6 +50,7 @@ const orthoServiceWrappers = {
 
 export interface OrthoService extends WdkService {
   getGroupLayout: (groupName: string) => Promise<GroupLayoutResponse>;
+  getGroupTree: (groupName: string) => Promise<TreeResponse>;
   getProteomeSummary: () => Promise<ProteomeSummaryRows>;
   getTaxons: () => Promise<TaxonEntries>;
 }

packages/sites/ortho-site/webapp/wdkCustomization/js/client/types/patristic.d.ts

@@ -0,0 +1,20 @@
+declare module 'patristic' {
+  export class Branch {
+    id: string;
+    parent?: Branch | null;
+    length?: number;
+    children?: Branch[];
+    value?: number;
+    depth?: number;
+    height?: number;
+
+    constructor(data: Branch, children?: (data: any) => Branch[]);
+    addChild(data: Branch): Branch;
+    addParent(data: Branch, siblings?: Branch[]): Branch;
+    ancestors(): Branch[];
+    clone(): Branch;
+    getLeaves(): Branch[];
+  }
+
+  export function parseNewick(newickStr: string): Branch;
+}

packages/sites/ortho-site/webapp/wdkCustomization/js/client/utils/tree.ts

@@ -0,0 +1,9 @@
+import { Decoder, record, string } from '@veupathdb/wdk-client/lib/Utils/Json';
+
+export interface TreeResponse {
+  newick: string;
+}
+
+export const treeResponseDecoder: Decoder<TreeResponse> = record({
+  newick: string,
+});