TreeTable React component

.yarnrc.yml

@@ -6,3 +6,10 @@ plugins:
   - path: .yarn/plugins/@husky-install/plugin-install-husky.cjs
 
 yarnPath: .yarn/releases/yarn-3.3.1.cjs
+
+#
+# zip/checksum behaviour is platform-specific (e.g. Windows vs Linux) for github: repos
+# e.g. packages/libs/components import of tidytree
+# see https://github.com/yarnpkg/berry/issues/5795
+#
+checksumBehavior: ignore

packages/libs/components/.storybook/main.js

@@ -11,6 +11,17 @@ module.exports = {
     '@storybook/addon-viewport/register',
     './redmine-addon/register.js',
   ],
+  babel: async (options) => {
+    return {
+      ...options,
+      presets: [...options.presets, '@emotion/babel-preset-css-prop'],
+      // See https://stackoverflow.com/questions/70406632/typescript-parameter-properties-not-working-with-storybook-rollup-in-developm
+      plugins: options.plugins.filter(
+        (x) =>
+          !(typeof x === 'string' && x.includes('plugin-transform-classes'))
+      ),
+    };
+  },
   webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
@@ -30,6 +41,42 @@ module.exports = {
       },
     });
 
+    config.module.rules.push({
+      test: require.resolve('tidytree'),
+      use: [
+        // TidyTree expects window.d3 to be available, so we shim it with this loader
+        {
+          loader: 'imports-loader',
+          options: {
+            imports: [
+              {
+                syntax: 'namespace',
+                moduleName: require.resolve('d3v5'),
+                name: 'd3',
+              },
+              {
+                syntax: 'namespace',
+                moduleName: require.resolve('patristic'),
+                name: 'patristic',
+              },
+            ],
+          },
+        },
+        // TidyTree creates a global variable, so we convert it to a named export with this laoder
+        {
+          loader: 'exports-loader',
+          options: {
+            exports: 'TidyTree',
+          },
+        },
+      ],
+    });
+
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'css-loader', 'sass-loader'],
+    });
+
     // Return the altered config
     return config;
   },

packages/libs/components/.storybook/preview.js

@@ -1,7 +1,19 @@
 import '@storybook/addon-console';
+import React from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
 
 // storybook v6 seems to have default margin so remove it - https://github.com/storybookjs/storybook/issues/12109
 export const parameters = {
   controls: { expanded: true },
   layout: 'fullscreen',
 };
+
+// wrap all stories in react-query (for useQuery hook)
+const queryClient = new QueryClient();
+export const decorators = [
+  (Story) => (
+    <QueryClientProvider client={queryClient}>
+      <Story />
+    </QueryClientProvider>
+  ),
+];

packages/libs/components/package.json

@@ -24,6 +24,7 @@
     "bootstrap": "^4.5.2",
     "color-math": "^1.1.3",
     "d3": "^7.1.1",
+    "d3v5": "npm:d3@5",
     "date-arithmetic": "^4.1.0",
     "debounce-promise": "^3.1.2",
     "dom-to-image": "^2.6.0",
@@ -42,7 +43,8 @@
     "react-plotly.js": "^2.4.0",
     "react-spring": "^9.7.1",
     "react-transition-group": "^4.4.1",
-    "shape2geohash": "^1.2.5"
+    "shape2geohash": "^1.2.5",
+    "tidytree": "github:d-callan/TidyTree"
   },
   "files": [
     "lib",
@@ -107,11 +109,14 @@
     "babel-loader": "^8.3.0",
     "eslint": "^8.29.0",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "exports-loader": "^1.1.1",
+    "imports-loader": "^1.1.1",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
     "npm-run-all": "^4.1.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-query": "^3.39.3",
     "stats-lite": "^2.2.0",
     "storybook": "^6.5.14",
     "typescript": "4.3.4"

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

@@ -0,0 +1,126 @@
+import { useEffect, useLayoutEffect, useRef } from 'react';
+import { TidyTree as TidyTreeJS } from 'tidytree';
+
+export interface HorizontalDendrogramProps {
+  /// The first set of props are expected to be fairly constant         ///
+  /// and when changed, a whole new TidyTreeJS instance will be created ///
+  /**
+   * tree data in Newick format
+   */
+  data: string | undefined;
+  /**
+   * TO DO: add width prop and nail down most of the options to
+   * horizontal dendrograms
+   */
+  options: {
+    ruler?: boolean;
+    /**
+     * supposedly [ top, right, bottom, left ] but in practice not at all
+       for now just default to all zero margins (left-most edges 
+     */
+    margin?: [number, number, number, number];
+  };
+
+  /// The remaining props are handled with a redraw: ///
+  /**
+   * how many leaf nodes are in the data string
+   * (maybe we can calculate this from the Newick string in future?)
+   */
+  leafCount: number;
+  /**
+   * width of tree in pixels
+   */
+  width: number;
+  /**
+   * number of pixels height taken per leaf
+   */
+  rowHeight: number;
+  /**
+   * which leaf nodes to highlight
+   */
+  highlightedNodeIds?: string[];
+  /**
+   * highlight whole subtrees ('monophyletic') or just leaves ('none')
+   */
+  highlightMode?: 'monophyletic' | 'none';
+}
+
+/**
+ * This is hardwired to produce a horizontal, equally spaced, square cornered dendrogram.
+ * A more general purpose wrapping of TidyTreeJS will have to come later. It's not trivial
+ * due to horizontal/vertical orientation affecting heights and widths. Given that users expect
+ * to scroll up/down in a large tree rather than left/right, and because we will be aligning
+ * it with a table that also works in up/down space, this seems reasonable.
+ */
+export function HorizontalDendrogram({
+  data,
+  leafCount,
+  rowHeight,
+  width,
+  options: { ruler = false, margin = [0, 0, 0, 0] },
+  highlightedNodeIds,
+  highlightMode,
+}: HorizontalDendrogramProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const tidyTreeRef = useRef<TidyTreeJS>();
+
+  useEffect(() => {
+    if (containerRef.current == null || data == null) {
+      // If props.data is nullish and containerRef.current exists, clear its content
+      if (containerRef.current) {
+        containerRef.current.innerHTML = ''; // Clear the container for blank rendering
+      }
+      return;
+    }
+    const instance = new TidyTreeJS(data, {
+      parent: containerRef.current,
+      layout: 'horizontal',
+      type: 'dendrogram',
+      mode: 'square',
+      equidistantLeaves: true,
+      ruler,
+      margin,
+      animation: 0, // it's naff and it reveals edge lengths/weights momentarily
+    });
+    tidyTreeRef.current = instance;
+    return function cleanup() {
+      instance.destroy();
+    };
+  }, [data, ruler, margin]);
+
+  // redraw when the container size changes
+  // useLayoutEffect ensures that the redraw is not called for brand new TidyTreeJS objects
+  // look out for potential performance issues (the effect is run synchronously)
+  useLayoutEffect(() => {
+    if (tidyTreeRef.current) {
+      tidyTreeRef.current.redraw();
+    }
+  }, [leafCount, width, rowHeight, tidyTreeRef]);
+
+  // now handle changes to props that act via tidytree methods
+  // which also usually trigger a redraw
+
+  // highlightedNodeIds
+  useEffect(() => {
+    if (tidyTreeRef.current && highlightedNodeIds) {
+      tidyTreeRef.current.setColorOptions({
+        nodeColorMode: 'predicate',
+        branchColorMode: highlightMode ?? 'none',
+        leavesOnly: true,
+        predicate: (node) => highlightedNodeIds.includes(node.__data__.data.id),
+      });
+      // no redraw needed, setColorOptions does it
+    }
+  }, [highlightedNodeIds, highlightMode, tidyTreeRef]);
+
+  const containerHeight = leafCount * rowHeight;
+  return (
+    <div
+      style={{
+        width: width + 'px',
+        height: containerHeight + 'px',
+      }}
+      ref={containerRef}
+    />
+  );
+}

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

@@ -0,0 +1,27 @@
+// this is just the subset of props we are dealing with
+interface Node {
+  __data__: {
+    data: {
+      id: string; // the display label provided in the Newick file
+      length: number;
+    };
+  };
+}
+
+interface ColorOptions {
+  predicate: (node: Node) => boolean;
+  leavesOnly: boolean;
+  nodeColorMode: 'predicate' | 'none';
+  branchColorMode: 'monophyletic' | 'none';
+  highlightColor?: string;
+  defaultNodeColor?: string;
+}
+
+declare module 'tidytree' {
+  export declare class TidyTree {
+    constructor(data: any, options: any);
+    destroy(): void;
+    redraw(): void;
+    setColorOptions(newColorOptions: ColorOptions): void;
+  }
+}