Testing tidytree integration into our app

packages/sites/ortho-site/package.json

@@ -56,10 +56,14 @@
     "cytoscape-cise": "^1.0.0",
     "cytoscape-cola": "^2.5.1",
     "cytoscape-fcose": "^2.1.0",
+    "d3": "5",
+    "exports-loader": "^4.0.0",
+    "expose-loader": "^4.1.0",
     "file-loader": "^3.0.1",
     "html-webpack-plugin": "^4.5.2",
     "ify-loader": "^1.1.0",
     "immer": "^7.0.5",
+    "imports-loader": "^4.0.1",
     "jquery": "1.9.1",
     "mini-css-extract-plugin": "^2.7.6",
     "notistack": "^1.0.10",
@@ -78,6 +82,7 @@
     "sass-loader": "^7.3.1",
     "script-loader": "^0.7.2",
     "source-map-loader": "^1.1.3",
+    "tidytree": "github:d-callan/TidyTree",
     "ts-loader": "^9.4.3",
     "typescript": "~4.3.5",
     "url-loader": "^1.1.2",

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

@@ -0,0 +1,32 @@
+import React, { useEffect, useRef } from 'react';
+import { TidyTree } from 'tidytree';
+
+export default function TidyTreeController() {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (ref.current == null) return;
+    import('../newick-example').then((module) => {
+      if (ref.current == null) return; // In case this component was unmounted before the Promise resolves
+      new TidyTree(module.newick, { parent: ref.current });
+    });
+  }, []);
+  return (
+    <div
+      style={{
+        height: '70vh',
+        width: '80vh',
+        margin: 'auto',
+        overflow: 'auto',
+      }}
+    >
+      <div
+        style={{
+          width: '1800px',
+          height: '8000px',
+          overflow: 'hidden',
+        }}
+        ref={ref}
+      />
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 
 import { RouteComponentProps } from 'react-router';
 
@@ -10,6 +10,10 @@ import { OrthoMCLHomePageController } from 'ortho-client/controllers/OrthoMCLHom
 import { ProteomeSummaryController } from 'ortho-client/controllers/ProteomeSummaryController';
 import { GroupClusterGraphController } from 'ortho-client/controllers/GroupClusterGraphController';
 
+const TidyTreeController = React.lazy(
+  () => import('./controllers/TidyTreeController')
+);
+
 export function wrapRoutes(ebrcRoutes: RouteEntry[]): RouteEntry[] {
   return [
     {
@@ -33,6 +37,14 @@ export function wrapRoutes(ebrcRoutes: RouteEntry[]): RouteEntry[] {
       path: '/search',
       component: () => <SiteSearchController offerOrganismFilter={false} />,
     },
+    {
+      path: '/tidytree',
+      component: () => (
+        <Suspense fallback="Loading...">
+          <TidyTreeController />
+        </Suspense>
+      ),
+    },
     ...ebrcRoutes,
   ];
 }

packages/sites/ortho-site/webpack.config.js

@@ -2,7 +2,7 @@ var configure = require('@veupathdb/site-webpack-config');
 
 var additionalConfig = {
   entry: {
-    'site-client': __dirname + '/webapp/wdkCustomization/js/client/main.js'
+    'site-client': __dirname + '/webapp/wdkCustomization/js/client/main.js',
   },
   module: {
     rules: [
@@ -12,17 +12,41 @@ var additionalConfig = {
         test: /\.jsx?$/,
         include: /node_modules\/@?react-leaflet/,
         use: [
-          { loader: 'babel-loader', options: { configFile: './.babelrc' } }
-        ]
+          { loader: 'babel-loader', options: { configFile: './.babelrc' } },
+        ],
+      },
+      // Loaders needed for TidyTree
+      {
+        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('d3'),
+                name: 'd3',
+              },
+            },
+          },
+          // TidyTree creates a global variable, so we convert it to a named export with this laoder
+          {
+            loader: 'exports-loader',
+            options: {
+              exports: 'TidyTree',
+            },
+          },
+        ],
       },
     ],
   },
   resolve: {
     alias: {
       'ortho-client': __dirname + '/webapp/wdkCustomization/js/client',
-      'ortho-images': __dirname + '/webapp/wdkCustomization/images'
-    }
-  }
+      'ortho-images': __dirname + '/webapp/wdkCustomization/images',
+    },
+  },
 };
 
 module.exports = configure(additionalConfig);