weng-lab · jpfisher72 · Mar 5, 2026 · Jan 30, 2026 · Feb 2, 2026 · Feb 3, 2026
diff --git a/global.d.ts b/global.d.ts
@@ -0,0 +1,6 @@
+//This allows us to ?raw import text data as a string without TS complaining
+
+declare module '*?raw' {
+  const src: string;
+  export default src;
+}
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <title>Testing Page</title>
     <!-- uncomment this to endable react-scan which helps visulziee component changes/renders-->
-     <!-- <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script> -->
+     <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "@visx/curve": "^3.12.0",
     "@visx/drag": "^3.12.0",
     "@visx/event": "^3.12.0",
+    "@visx/gradient": "^3.12.0",
     "@visx/group": "^3.12.0",
     "@visx/heatmap": "^3.12.0",
     "@visx/hierarchy": "^3.12.0",
@@ -45,9 +46,10 @@
     "@visx/tooltip": "^3.12.0",
     "@visx/vendor": "^3.12.0",
     "@visx/zoom": "^3.12.0",
-    "@vitejs/plugin-react": "^4.6.0",
+    "@vitejs/plugin-react": "^5",
     "@vitest/browser": "^3.2.3",
     "@vitest/coverage-v8": "^3.2.3",
+    "babel-plugin-react-compiler": "^1.0.0",
     "playwright": "^1.53.0",
     "prop-types": "^15.8.1",
     "react": "^19.1.0",

diff --git a/packages/ui-components/.DS_Store b/packages/ui-components/.DS_Store
diff --git a/packages/visualization/package.json b/packages/visualization/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@weng-lab/visualization",
-  "version": "1.2.12",
+  "version": "1.3.0",
   "description": "Visualization components for the Weng/Moore Labs suite of genomics web resources",
   "scripts": {
     "clean": "rimraf dist",
@@ -22,9 +22,13 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@types/d3-hierarchy": "^3.1.7",
+    "@types/d3-shape": "^3.1.8",
     "cytoscape": "^3.32.0",
     "cytoscape-cose-bilkent": "^4.1.0",
     "cytoscape-popper": "^4.0.1",
+    "d3-hierarchy": "^3.1.2",
+    "d3-shape": "^3.2.0",
     "dom-to-image": "^2.6.0",
     "downloadjs": "^1.4.7",
     "framer-motion": "^12.23.24",

diff --git a/packages/visualization/src/components/.DS_Store b/packages/visualization/src/components/.DS_Store
diff --git a/packages/visualization/src/components/PhyloTree/ControlPanel.tsx b/packages/visualization/src/components/PhyloTree/ControlPanel.tsx
@@ -0,0 +1,49 @@
+import { Add, Remove, SettingsBackupRestore, Timeline } from "@mui/icons-material";
+import { Tooltip, IconButton } from "@mui/material";
+import { ProvidedZoom,  } from "@visx/zoom/lib/types";
+
+export type ControlPanelProps = {
+  scaleZoom: ProvidedZoom<SVGSVGElement>["scale"]
+  resetZoom: ProvidedZoom<SVGSVGElement>["reset"]
+  toggleBranchLength: () => void
+}
+
+export const ControlPanel = ({scaleZoom, resetZoom, toggleBranchLength}: ControlPanelProps) => {
+  return (
+    <div
+      style={{
+        position: "absolute",
+        margin: "4px",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        background: "rgba(255, 255, 255, 0.6)",
+        backdropFilter: "blur(2px)",
+        WebkitBackdropFilter: "blur(2px)", // Safari support
+        border: "1px solid rgba(255, 255, 255, 0.3)",
+        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
+      }}
+    >
+      <Tooltip title="Zoom In" placement="right">
+        <IconButton onClick={() => scaleZoom({ scaleX: 1.2, scaleY: 1.2 })}>
+          <Add fontSize="small" />
+        </IconButton>
+      </Tooltip>
+      <Tooltip title="Zoom Out" placement="right">
+        <IconButton onClick={() => scaleZoom({ scaleX: 1 / 1.2, scaleY: 1 / 1.2 })}>
+          <Remove fontSize="small" />
+        </IconButton>
+      </Tooltip>
+      <Tooltip title="Reset Zoom" placement="right">
+        <IconButton onClick={resetZoom}>
+          <SettingsBackupRestore fontSize="small" />
+        </IconButton>
+      </Tooltip>
+      <Tooltip title="Toggle Evolutionary Distance" placement="right">
+        <IconButton onClick={toggleBranchLength}>
+          <Timeline fontSize="small" />
+        </IconButton>
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/packages/visualization/src/components/PhyloTree/LeafLinkExtension.tsx b/packages/visualization/src/components/PhyloTree/LeafLinkExtension.tsx
@@ -0,0 +1,32 @@
+import { motion } from "framer-motion";
+import { useBranchLengthTransition } from "./PhyloTree";
+import { memo } from "react";
+import { TreeNode } from "./types";
+
+
+export type LeafLinkExtensionProps = {
+  baseLeafLinkExtension: TreeNode["baseLeafLinkExtension"]
+  scaledLeafLinkExtension: TreeNode["scaledLeafLinkExtension"]
+  color: TreeNode["color"];
+  strokeWidth: TreeNode["linkStrokeWidth"]
+  useBranchLengths: boolean
+};
+
+export const LeafLinkExtension = memo(function LinkExtension({
+  useBranchLengths,
+  color,
+  baseLeafLinkExtension,
+  scaledLeafLinkExtension,
+  strokeWidth
+}: LeafLinkExtensionProps) {
+
+  return (
+    <motion.line
+      strokeWidth={strokeWidth}
+      initial={false}
+      animate={useBranchLengths ? scaledLeafLinkExtension : baseLeafLinkExtension}
+      stroke={color}
+      transition={useBranchLengthTransition}
+    />
+  );
+});
diff --git a/packages/visualization/src/components/PhyloTree/LeafNodeLabel.tsx b/packages/visualization/src/components/PhyloTree/LeafNodeLabel.tsx
@@ -0,0 +1,58 @@
+import { PhyloTreeProps, TreeNode } from "./types";
+import { Group } from "@visx/group";
+import { memo } from "react";
+
+
+export type LeafNodeLabelProps = {
+  // node.x is the angle the node is at in radial layout while base/scaled are true x/y position in svg
+  nodeX: number;
+  baseNodeX: TreeNode["baseNodeX"];
+  baseNodeY: TreeNode["baseNodeY"];
+  label: TreeNode["label"];
+  color: TreeNode["color"];
+  fontSize: PhyloTreeProps["leafFontSize"];
+  fontFamily: PhyloTreeProps["leafFontFamily"];
+  strokeWidth: TreeNode["labelStrokeWidth"]
+};
+
+export const LeafNodeLabel = memo(function LeafNodeLabel({
+  nodeX,
+  color,
+  baseNodeX,
+  baseNodeY,
+  label,
+  fontSize,
+  fontFamily,
+  strokeWidth
+}: LeafNodeLabelProps) {
+  const angleDeg = (nodeX * 180) / Math.PI - 90;
+  const flip = angleDeg > 90 || angleDeg < -90;
+  const rotation = flip ? angleDeg + 180 : angleDeg;
+  const textAnchor: "start" | "end" = flip ? "end" : "start";
+  const xOffset = flip ? -6 : 6;
+
+  return (
+    <Group
+      top={baseNodeY}
+      left={baseNodeX}
+    >
+      <text
+        fontSize={fontSize}
+        fontFamily={fontFamily}
+        fill={color}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        paintOrder="stroke"
+        transform={`rotate(${rotation}) translate(0, ${(fontSize ?? 2.4) / 3})`}
+        textAnchor={textAnchor}
+        x={xOffset}
+      >
+        {label === "Human" ? `${label} \u2605\u2605\u2605` : label}
+      </text>
+      <circle
+        r={1.5}
+        fill={color}
+      />
+    </Group>
+  );
+});