@weng-lab/visualization 2.6.0-beta.1 → 2.7.0-beta.0

package/dist/visualization.es20.js

@@ -1,18 +1,273 @@
-import { c as u } from "react/compiler-runtime";
-import { useRef as c, useLayoutEffect as m } from "react";
-function a(t) {
-  const e = u(3), n = c(t);
-  let r;
-  e[0] !== t ? (r = () => {
-    n.current = t;
-  }, e[0] = t, e[1] = r) : r = e[1], m(r);
-  let o;
-  return e[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (o = (...f) => {
-    const s = f;
-    return n.current?.(...s);
-  }, e[2] = o) : o = e[2], o;
-}
+import { jsxs as A, jsx as a } from "react/jsx-runtime";
+import { useState as P, useRef as D, useEffect as M, useCallback as Z, useMemo as y } from "react";
+import It from "@mui/material/Tooltip";
+import At from "@mui/icons-material/InfoOutlined";
+import Lt from "./visualization.es87.js";
+import xt from "./visualization.es92.js";
+import wt from "./visualization.es50.js";
+import q from "./visualization.es74.js";
+import Dt from "./visualization.es75.js";
+import Mt from "./visualization.es93.js";
+import { defaultStyles as yt } from "./visualization.es91.js";
+import Gt from "./visualization.es94.js";
+const et = {
+  A: "#05ac05",
+  C: "#1668cb",
+  G: "#ffb700",
+  T: "#fd1414",
+  N: "#555555",
+  M: "#984ea3",
+  "-": "#d4d4d4",
+  "*": "#ffffff"
+}, K = {
+  A: "A",
+  C: "C",
+  G: "G",
+  T: "T",
+  N: "N Unresolved",
+  M: "Ambiguous Alignment",
+  "-": "Gap",
+  "*": "Absent"
+}, V = ["A", "C", "G", "T", "N", "M", "*", "-"], _t = `
+  Each column is a position in the human cCRE, and each row shows the
+  corresponding aligned state in another mammalian genome. A, C, G, and
+  T indicate the nucleotide aligned to that human position. N indicates that
+  the target genome has an unresolved base at that position. Ambiguous
+  alignment indicates that this human cCRE position aligns to more than
+  one location in the target genome, and those aligned locations contain
+  different nucleotides. Because the alignment does not support a single
+  target base, the position is not assigned A, C, G, or T. Absent indicates
+  that the human position could not be aligned to that species. Gap
+  indicates that the alignment covers this region, but this species has a gap
+  relative to the human cCRE.
+`, Ct = Gt({
+  domain: V,
+  range: V.map((s) => et[s])
+}), nt = 24, Rt = 16, ot = 16, st = 3, J = nt + Rt + st * ot, N = 12, x = 12, G = 10, L = x + G + N + G, Ht = 1, Pt = 50, Q = 1.15, O = 5, tt = (s, f, m) => Math.min(0, Math.max(m * (1 - f), s)), qt = ({
+  data: s,
+  width: f,
+  height: m,
+  getLabel: it,
+  getOrderColor: at,
+  getOrder: rt,
+  hovered: _ = [],
+  highlighted: lt = [],
+  onHoverChange: B = () => null,
+  tooltipContents: j
+}) => {
+  const [v, ct] = P(null), [o, z] = P({
+    scaleX: 1,
+    translateX: 0
+  }), [W, C] = P(!1), T = D(o), Y = D(0), k = D(0);
+  M(() => {
+    T.current = o;
+  }, [o]);
+  const X = Z((t) => {
+    t !== v && (ct(t), B(t));
+  }, [v, B]), E = y(() => v ? [v, ..._] : _, [v, _]), {
+    tooltipData: F,
+    tooltipLeft: ht,
+    tooltipTop: dt,
+    showTooltip: U,
+    hideTooltip: R
+  } = Lt(), {
+    TooltipInPortal: pt
+  } = xt({
+    scroll: !0,
+    detectBounds: !0
+  }), w = Object.keys(s).length, c = Object.values(s)[0]?.length ?? 0, i = f - L, d = m - J, H = y(() => {
+    const t = Object.keys(s).map((e) => [e, {
+      id: e,
+      label: it(e),
+      order: rt(e),
+      color: at(e)
+    }]);
+    return new Map(t);
+  }, [s]), b = D(null);
+  M(() => {
+    const t = b.current;
+    if (!t) return;
+    const e = (n) => {
+      n.preventDefault();
+      const h = t.getBoundingClientRect(), g = n.clientX - h.left, {
+        scaleX: r,
+        translateX: p
+      } = T.current, u = n.deltaY < 0 ? Q : 1 / Q, l = Math.max(Ht, Math.min(Pt, r * u)), S = g - (g - p) * (l / r), I = tt(S, l, i);
+      z({
+        scaleX: l,
+        translateX: I
+      });
+    };
+    return t.addEventListener("wheel", e, {
+      passive: !1
+    }), () => t.removeEventListener("wheel", e);
+  }, [i]), M(() => {
+    const t = b.current;
+    if (!t) return;
+    const e = (n) => {
+      n.touches.length === 1 && n.preventDefault();
+    };
+    return t.addEventListener("touchstart", e, {
+      passive: !1
+    }), t.addEventListener("touchmove", e, {
+      passive: !1
+    }), () => {
+      t.removeEventListener("touchstart", e), t.removeEventListener("touchmove", e);
+    };
+  }, []), M(() => {
+    const t = b.current;
+    if (!t) return;
+    const e = t.getContext("2d");
+    if (!e) return;
+    const n = window.devicePixelRatio || 1;
+    t.width = i * n, t.height = d * n, t.style.width = `${i}px`, t.style.height = `${d}px`, e.setTransform(1, 0, 0, 1, 0, 0), e.clearRect(0, 0, t.width, t.height);
+    const h = t.width / c * o.scaleX, g = t.height / w, r = o.translateX * n;
+    e.setTransform(h, 0, 0, g, r, 0), Object.entries(s).forEach(([p, u], l) => {
+      u.forEach((S, I) => {
+        e.fillStyle = et[S], e.globalAlpha = E.length && !E.includes(p) ? 0.3 : 1, e.fillRect(I, l, 1, 1), e.globalAlpha = 1;
+      });
+    });
+  }, [s, i, d, c, w, E, o]);
+  const ut = Z((t) => {
+    const {
+      scaleX: e,
+      translateX: n
+    } = T.current;
+    return Math.floor((t - n) / i * (c / e));
+  }, [i, c]), mt = (t) => {
+    C(!0), Y.current = t.clientX, k.current = T.current.translateX, t.currentTarget.setPointerCapture(t.pointerId);
+  }, gt = (t) => {
+    const e = b.current;
+    if (!e) return;
+    if (W) {
+      const S = t.clientX - Y.current, I = tt(k.current + S, T.current.scaleX, i);
+      z((St) => ({
+        ...St,
+        translateX: I
+      }));
+      return;
+    }
+    const n = e.getBoundingClientRect(), h = t.clientX - n.left, g = t.clientY - n.top, r = ut(h), p = Math.floor(g / n.height * w), u = Object.keys(s)[p], l = s[u]?.[r];
+    r >= 0 && r < c && p >= 0 && p < w ? (X(u), U({
+      tooltipTop: t.clientY,
+      tooltipLeft: t.clientX,
+      tooltipData: {
+        position: r,
+        char: l,
+        charLabel: l != null ? K[l] : void 0,
+        ...H.get(u)
+      }
+    })) : (X(null), R());
+  }, ft = () => {
+    C(!1);
+  }, vt = () => {
+    C(!1), X(null), R();
+  }, Tt = (t, e) => {
+    X(e.id), U({
+      tooltipLeft: t.clientX,
+      tooltipTop: t.clientY,
+      tooltipData: e
+    });
+  }, Xt = (t, e) => {
+    X(null), R();
+  }, Et = y(() => wt({
+    domain: [0, c - 1],
+    range: [o.translateX, i * o.scaleX + o.translateX]
+  }), [c, i, o]), $ = y(() => [...H.values()], [H]), bt = i + O;
+  return f < 10 || m < 10 ? null : /* @__PURE__ */ A("div", { style: {
+    position: "relative",
+    width: f,
+    height: m
+  }, children: [
+    /* @__PURE__ */ A("svg", { width: L, height: m, style: {
+      top: 0,
+      left: 0,
+      position: "absolute"
+    }, children: [
+      $.map((t, e) => {
+        const n = d / $.length;
+        return /* @__PURE__ */ A("g", { onMouseMove: (h) => Tt(h, t), onMouseLeave: (h) => Xt(), opacity: E.length && !E.includes(t.id) ? 0.3 : 1, children: [
+          lt.includes(t.id) && /* @__PURE__ */ a("rect", { width: x, height: n, x: 0, y: n * e, fill: t.color, shapeRendering: "crispEdges" }),
+          /* @__PURE__ */ a("rect", { width: N, height: n, x: x + G, y: n * e, fill: t.color, shapeRendering: "crispEdges" })
+        ] }, e);
+      }),
+      /* @__PURE__ */ a(q, { angle: 270, textAnchor: "end", verticalAnchor: "middle", fontSize: 12, x: 0.5 * x, y: d + 2, children: "Highlight" }),
+      /* @__PURE__ */ a(q, { angle: 270, textAnchor: "end", verticalAnchor: "middle", fontSize: 12, x: x + G + 0.5 * N, y: d + 2, children: "Species" })
+    ] }),
+    /* @__PURE__ */ a("canvas", { ref: b, onPointerDown: mt, onPointerMove: gt, onPointerUp: ft, onPointerLeave: vt, style: {
+      position: "absolute",
+      left: L,
+      cursor: W ? "grabbing" : o.scaleX > 1 ? "grab" : "default"
+    } }),
+    /* @__PURE__ */ a("svg", { width: bt, height: J, style: {
+      position: "absolute",
+      //position it into the other svg by AXIS_LEFT_PADDING to fix axis cutoff of 0 at first load.
+      //can't fix with overflow visible since on zoom the axis needs to be clipped
+      left: L - O,
+      bottom: 0,
+      pointerEvents: "none",
+      overflow: "hidden"
+    }, children: /* @__PURE__ */ a(Dt, { scale: Et, numTicks: Math.min(c, Math.round(10 * o.scaleX)), left: O }) }),
+    /* @__PURE__ */ A("div", { style: {
+      position: "absolute",
+      top: d + nt,
+      left: L,
+      width: i,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: 2,
+      fontSize: 12,
+      pointerEvents: "none"
+    }, children: [
+      /* @__PURE__ */ A("div", { style: {
+        position: "relative",
+        width: "100%",
+        textAlign: "center"
+      }, children: [
+        "Position in cCRE",
+        /* @__PURE__ */ a("span", { style: {
+          position: "absolute",
+          right: 0,
+          top: 0
+        }, children: `${o.scaleX.toFixed(1)}×` })
+      ] }),
+      /* @__PURE__ */ a(
+        Mt,
+        {
+          scale: Ct,
+          direction: "row",
+          shape: "rect",
+          shapeWidth: 11,
+          shapeHeight: 11,
+          itemMargin: "0 10px 0 0",
+          labelMargin: "0 0 0 0px",
+          labelFormat: (t) => K[t],
+          shapeStyle: () => ({
+            border: "1px solid rgba(0,0,0,0.25)"
+          }),
+          style: {
+            display: "flex",
+            flexWrap: "wrap",
+            justifyContent: "center",
+            alignContent: "center",
+            rowGap: 2,
+            minHeight: st * ot
+          }
+        }
+      )
+    ] }),
+    F && j && /* @__PURE__ */ a(pt, { left: ht, top: dt, style: yt, children: j(F) }),
+    /* @__PURE__ */ a(It, { title: _t, placement: "top-end", arrow: !0, children: /* @__PURE__ */ a(At, { fontSize: "small", sx: {
+      position: "absolute",
+      bottom: 4,
+      right: 4,
+      color: "text.secondary",
+      cursor: "help"
+    } }) })
+  ] });
+};
 export {
-  a as useStableCallback
+  qt as SequenceAlignmentPlot
 };
 //# sourceMappingURL=visualization.es20.js.map

package/dist/visualization.es20.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es20.js","sources":["../src/hooks/useStableCallback.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef } from \"react\";\n\n/**\n * Wraps a callback in a stable identity that always forwards to the most recent version.\n *\n * Plots pass consumer callbacks (onClick and friends) down to memoized marks. Consumers of this\n * package will not necessarily have the React Compiler enabled, so those props commonly arrive\n * as a fresh inline arrow on every render - handing one straight to thousands of memoized marks\n * invalidates all of them. Wrapping it here gives the marks a prop that never changes identity\n * while still calling the latest callback.\n *\n * The returned callback must only be invoked from event handlers or effects, never during\n * render: the ref is updated after commit, so during render it still holds the previous value.\n */\nexport function useStableCallback<Args extends unknown[], R>(\n  callback: ((...args: Args) => R) | undefined\n): (...args: Args) => R | undefined {\n  const callbackRef = useRef(callback);\n\n  // Layout effect rather than assigning during render, which is unsafe under concurrent\n  // rendering (a render can be thrown away). This runs before the browser can dispatch the\n  // next event, so the ref is always current by the time the returned callback can fire.\n  useLayoutEffect(() => {\n    callbackRef.current = callback;\n  });\n\n  return useCallback((...args: Args) => callbackRef.current?.(...args), []);\n}\n"],"names":["useStableCallback","callback","$","_c","callbackRef","useRef","t0","current","useLayoutEffect","t1","Symbol","for","t2","args"],"mappings":";;AAcO,SAAAA,EAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAA,CAAA,GAGLC,IAAoBC,EAAOJ,CAAQ;AAAE,MAAAK;AAAA,EAAAJ,SAAAD,KAKrBK,IAAAA,MAAA;AACdF,IAAAA,EAAWG,UAAWN;AAAAA,EAAH,GACpBC,OAAAD,GAAAC,OAAAI,KAAAA,IAAAJ,EAAA,CAAA,GAFDM,EAAgBF,CAEf;AAAC,MAAAG;AAAA,SAAAP,EAAA,CAAA,MAAAQ,uBAAAC,IAAA,2BAAA,KAEiBF,IAAAA,IAAAG,MAAA;AAAC,UAAAC,IAAAD;AAAa,WAAKR,EAAWG,UAAmB,GAALM,CAAI;AAAA,EAAC,GAAAX,OAAAO,KAAAA,IAAAP,EAAA,CAAA,GAA7DO;AAAkE;"}
+{"version":3,"file":"visualization.es20.js","sources":["../src/components/SequenceAlignmentPlot/SequenceAlignmentPlot.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState, useMemo, useCallback, ReactNode } from \"react\";\nimport { AxisBottom } from \"@visx/axis\";\nimport { scaleLinear, scaleOrdinal } from \"@visx/scale\";\nimport { LegendOrdinal } from \"@visx/legend\";\nimport { defaultStyles, useTooltip, useTooltipInPortal } from \"@visx/tooltip\";\nimport { Text } from \"@visx/text\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport InfoOutlinedIcon from \"@mui/icons-material/InfoOutlined\";\n\nexport type AlignmentChar = \"A\" | \"C\" | \"G\" | \"T\" | \"N\" | \"M\" | \"-\" | \"*\";\n\nconst COLORS: Record<AlignmentChar, string> = {\n  A: \"#05ac05\",\n  C: \"#1668cb\",\n  G: \"#ffb700\",\n  T: \"#fd1414\",\n  N: \"#555555\",\n  M: \"#984ea3\",\n  \"-\": \"#d4d4d4\",\n  \"*\": \"#ffffff\",\n};\n\nconst LEGEND_LABELS: Record<AlignmentChar, string> = {\n  A: \"A\",\n  C: \"C\",\n  G: \"G\",\n  T: \"T\",\n  N: \"N Unresolved\",\n  M: \"Ambiguous Alignment\",\n  \"-\": \"Gap\",\n  \"*\": \"Absent\",\n};\n\n// Explicit order so A,C,G,T lead the legend like the old emoji key did.\nconst LEGEND_ORDER: AlignmentChar[] = [\"A\", \"C\", \"G\", \"T\", \"N\", \"M\", \"*\", \"-\"];\n\nconst INFO_TOOLTIP_TEXT = `\n  Each column is a position in the human cCRE, and each row shows the\n  corresponding aligned state in another mammalian genome. A, C, G, and\n  T indicate the nucleotide aligned to that human position. N indicates that\n  the target genome has an unresolved base at that position. Ambiguous\n  alignment indicates that this human cCRE position aligns to more than\n  one location in the target genome, and those aligned locations contain\n  different nucleotides. Because the alignment does not support a single\n  target base, the position is not assigned A, C, G, or T. Absent indicates\n  that the human position could not be aligned to that species. Gap\n  indicates that the alignment covers this region, but this species has a gap\n  relative to the human cCRE.\n`;\n\n// Colors are static, so the ordinal scale can live at module scope.\nconst legendScale = scaleOrdinal<AlignmentChar, string>({\n  domain: LEGEND_ORDER,\n  range: LEGEND_ORDER.map((char) => COLORS[char]),\n});\n\nexport interface SequenceAlignmentPlotProps {\n  data: { [id: string]: AlignmentChar[] };\n  getLabel: (id: string) => string;\n  getOrderColor: (id: string) => string;\n  /**\n   * the evolutionary order, not sort order. Sort in plot by sorting input data\n   */\n  getOrder: (id: string) => string;\n  width: number;\n  height: number;\n  /**\n   * Used to sync plot state with hover on PhyloTree. Plot treats these as if they are internally hovered\n   */\n  hovered?: string[];\n  /**\n   * Fired when internal hover state changes\n   */\n  onHoverChange?: (hovered: string | null) => void;\n  /**\n   * Places indicator next to species\n   */\n  highlighted?: string[];\n  /**\n   * Optionally define tooltip for hover. `char`, `charLabel`, and `position` only present if hovering over a position\n   */\n  tooltipContents?: (tooltipData: TooltipData) => ReactNode;\n}\n\n// Bottom band below the canvas: axis ticks on top, then the axis title + wrapping legend.\nconst AXIS_TICKS_HEIGHT = 24; // AxisBottom ticks + numbers\nconst LEGEND_TITLE_HEIGHT = 16; // \"Position in cCRE\" line\nconst LEGEND_ROW_HEIGHT = 16; // one wrapped row of swatches + labels\nconst LEGEND_MAX_ROWS = 3; // worst-case wrap at the narrowest live width\nconst AXIS_HEIGHT = AXIS_TICKS_HEIGHT + LEGEND_TITLE_HEIGHT + LEGEND_MAX_ROWS * LEGEND_ROW_HEIGHT;\nconst SPECIES_BAR_WIDTH = 12;\nconst HIGHLIGHTED_BAR_WIDTH = 12;\nconst PADDING = 10;\nconst HIGHLIGHTED_AND_SPECIES_SVG_WIDTH = HIGHLIGHTED_BAR_WIDTH + PADDING + SPECIES_BAR_WIDTH + PADDING;\nconst MIN_SCALE = 1;\nconst MAX_SCALE = 50;\nconst ZOOM_FACTOR = 1.15;\nconst AXIS_LEFT_PADDING = 5\n\nexport type SpeciesInfo = { id: string; label: string; order: string; color: string };\n\nexport type TooltipData = SpeciesInfo & {\n  char?: AlignmentChar;\n  charLabel?: string;\n  position?: number;\n};\n\ninterface ZoomTransform {\n  scaleX: number;\n  translateX: number;\n}\n\n/**\n * Clamps translateX so the data never scrolls outside the canvas bounds.\n * Valid range: [canvasWidth * (1 - scaleX), 0]\n */\nconst clampTranslateX = (translateX: number, scaleX: number, canvasWidth: number): number =>\n  Math.min(0, Math.max(canvasWidth * (1 - scaleX), translateX));\n\n/**\n * @todo This component could use some cleanup and maybe manual memoization to handle hover changes to highlight more efficiently\n * Maybe try debouncing the hover changes using requestAnimationFrame like PhyloTree\n */\nexport const SequenceAlignmentPlot: React.FC<SequenceAlignmentPlotProps> = ({\n  data,\n  width: totalWidth,\n  height: totalHeight,\n  getLabel,\n  getOrderColor,\n  getOrder,\n  hovered: externalHovered = [],\n  highlighted = [],\n  onHoverChange = () => null,\n  tooltipContents,\n}) => {\n  const [internalHovered, setInternalHovered] = useState<string | null>(null);\n  const [zoomTransform, setZoomTransform] = useState<ZoomTransform>({ scaleX: 1, translateX: 0 });\n  const [isDragging, setIsDragging] = useState(false);\n\n  // Refs for event handlers that need current values without being in dependency arrays\n  const zoomTransformRef = useRef<ZoomTransform>(zoomTransform);\n  const dragStartX = useRef(0);\n  const dragStartTranslateX = useRef(0);\n\n  // Keep ref in sync so the wheel handler (attached imperatively) always sees current transform\n  useEffect(() => {\n    zoomTransformRef.current = zoomTransform;\n  }, [zoomTransform]);\n\n  const handleSetInternalHover = useCallback(\n    (newHovered: string | null) => {\n      const changed = newHovered !== internalHovered;\n      if (changed) {\n        setInternalHovered(newHovered);\n        onHoverChange(newHovered);\n      }\n    },\n    [internalHovered, onHoverChange]\n  );\n\n  const hovered = useMemo(\n    () => (internalHovered ? [internalHovered, ...externalHovered] : externalHovered),\n    [internalHovered, externalHovered]\n  );\n\n  \n  const { tooltipData, tooltipLeft, tooltipTop, showTooltip, hideTooltip } = useTooltip<TooltipData>();\n  \n  const { TooltipInPortal } = useTooltipInPortal({\n    scroll: true,\n    detectBounds: true,\n  });\n  \n  const numSpecies = Object.keys(data).length;\n  const numPositions = Object.values(data)[0]?.length ?? 0;\n  \n  const canvasWidth = totalWidth - HIGHLIGHTED_AND_SPECIES_SVG_WIDTH;\n  const canvasHeight = totalHeight - AXIS_HEIGHT;\n  \n  const speciesInfo = useMemo(() => {\n    const entries: [string, SpeciesInfo][] = Object.keys(data).map((species) => [\n      species,\n      { id: species, label: getLabel(species), order: getOrder(species), color: getOrderColor(species) },\n    ]);\n    return new Map<string, SpeciesInfo>(entries);\n  }, [data]);\n  \n  const canvasRef = useRef<HTMLCanvasElement>(null);\n\n  // Attach wheel listener imperatively with passive: false so we can call preventDefault.\n  // React 17+ attaches onWheel passively, which prevents scroll cancellation.\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n\n    const handleWheel = (e: WheelEvent) => {\n      e.preventDefault();\n\n      const rect = canvas.getBoundingClientRect();\n      const cursorX = e.clientX - rect.left;\n      const { scaleX, translateX } = zoomTransformRef.current;\n\n      const zoomDir = e.deltaY < 0 ? ZOOM_FACTOR : 1 / ZOOM_FACTOR;\n      const newScaleX = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scaleX * zoomDir));\n\n      // Adjust translateX so the data point under the cursor stays fixed\n      const newTranslateX = cursorX - (cursorX - translateX) * (newScaleX / scaleX);\n      const clampedTranslateX = clampTranslateX(newTranslateX, newScaleX, canvasWidth);\n\n      setZoomTransform({ scaleX: newScaleX, translateX: clampedTranslateX });\n    };\n\n    canvas.addEventListener(\"wheel\", handleWheel, { passive: false });\n    return () => canvas.removeEventListener(\"wheel\", handleWheel);\n  }, [canvasWidth]);\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n\n    const preventTouchScroll = (e: TouchEvent) => {\n      if (e.touches.length === 1) e.preventDefault(); // single finger = pan, not page scroll\n    };\n\n    canvas.addEventListener(\"touchstart\", preventTouchScroll, { passive: false });\n    canvas.addEventListener(\"touchmove\", preventTouchScroll, { passive: false });\n    return () => {\n      canvas.removeEventListener(\"touchstart\", preventTouchScroll);\n      canvas.removeEventListener(\"touchmove\", preventTouchScroll);\n    };\n  }, []);\n\n  // Draw to the cancas\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) return;\n\n    const dpr = window.devicePixelRatio || 1;\n\n    canvas.width = canvasWidth * dpr;\n    canvas.height = canvasHeight * dpr;\n    canvas.style.width = `${canvasWidth}px`;\n    canvas.style.height = `${canvasHeight}px`;\n\n    ctx.setTransform(1, 0, 0, 1, 0, 0);\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n    // Combine the base data→bitmap mapping with the zoom transform.\n    // translateX is in CSS pixels so it must be scaled by dpr for the bitmap.\n    const bitmapScaleX = (canvas.width / numPositions) * zoomTransform.scaleX;\n    const bitmapScaleY = canvas.height / numSpecies;\n    const bitmapTranslateX = zoomTransform.translateX * dpr;\n\n    ctx.setTransform(bitmapScaleX, 0, 0, bitmapScaleY, bitmapTranslateX, 0);\n\n    Object.entries(data).forEach(([species, sequence], y) => {\n      sequence.forEach((nucleobase, x) => {\n        ctx.fillStyle = COLORS[nucleobase];\n        ctx.globalAlpha = hovered.length && !hovered.includes(species) ? 0.3 : 1;\n        ctx.fillRect(x, y, 1, 1);\n        ctx.globalAlpha = 1;\n      });\n    });\n  }, [data, canvasWidth, canvasHeight, numPositions, numSpecies, hovered, zoomTransform]);\n\n  // Converts a CSS pixel x position on the canvas to a data-space nucleotide index,\n  // inverting the zoom transform: dataX = (cssX - translateX) / (cssWidthPerDataUnit * scaleX)\n  const cssXToPosition = useCallback(\n    (cssX: number): number => {\n      const { scaleX, translateX } = zoomTransformRef.current;\n      return Math.floor(((cssX - translateX) / canvasWidth) * (numPositions / scaleX));\n    },\n    [canvasWidth, numPositions]\n  );\n\n  const handleHeatmapPointerDown = (e: React.PointerEvent<HTMLCanvasElement>) => {\n    setIsDragging(true);\n    dragStartX.current = e.clientX;\n    dragStartTranslateX.current = zoomTransformRef.current.translateX;\n    e.currentTarget.setPointerCapture(e.pointerId)\n  };\n\n  const handleHeatmapPointerMove = (e: React.PointerEvent<HTMLCanvasElement>) => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n\n    // While dragging: update pan, suppress hover/tooltip\n    if (isDragging) {\n      const delta = e.clientX - dragStartX.current;\n      const newTranslateX = clampTranslateX(\n        dragStartTranslateX.current + delta,\n        zoomTransformRef.current.scaleX,\n        canvasWidth\n      );\n      setZoomTransform((prev) => ({ ...prev, translateX: newTranslateX }));\n      return;\n    }\n\n    const rect = canvas.getBoundingClientRect();\n    const cssX = e.clientX - rect.left;\n    const cssY = e.clientY - rect.top;\n\n    const position = cssXToPosition(cssX);\n    const speciesIndex = Math.floor((cssY / rect.height) * numSpecies);\n    const speciesId = Object.keys(data)[speciesIndex];\n    const char = data[speciesId]?.[position];\n\n    if (position >= 0 && position < numPositions && speciesIndex >= 0 && speciesIndex < numSpecies) {\n      handleSetInternalHover(speciesId);\n      showTooltip({\n        tooltipTop: e.clientY,\n        tooltipLeft: e.clientX,\n        tooltipData: {\n          position,\n          char,\n          charLabel: char != null ? LEGEND_LABELS[char] : undefined,\n          ...(speciesInfo.get(speciesId) as SpeciesInfo),\n        },\n      });\n    } else {\n      handleSetInternalHover(null);\n      hideTooltip();\n    }\n  };\n\n  const handleHeatmapPointerUp = () => {\n    setIsDragging(false);\n  };\n\n  const handleHeatmapPointerLeave = () => {\n    setIsDragging(false);\n    handleSetInternalHover(null);\n    hideTooltip();\n  };\n\n  const handleSpeciesBarMouseMove = (event: React.MouseEvent<SVGGElement, MouseEvent>, species: SpeciesInfo) => {\n    handleSetInternalHover(species.id);\n    showTooltip({ tooltipLeft: event.clientX, tooltipTop: event.clientY, tooltipData: species });\n  };\n\n  const handleSpeciesBarMouseLeave = (event: React.MouseEvent<SVGGElement, MouseEvent>, species: SpeciesInfo) => {\n    handleSetInternalHover(null);\n    hideTooltip();\n  };\n\n  // Apply the zoom transform to the axis scale so tick positions stay in sync with the canvas.\n  // Domain [0, numPositions-1] maps to zoomed CSS range [translateX, canvasWidth * scaleX + translateX].\n  const zoomedXScale = useMemo(\n    () =>\n      scaleLinear({\n        domain: [0, numPositions - 1],\n        range: [\n          zoomTransform.translateX,\n          canvasWidth * zoomTransform.scaleX + zoomTransform.translateX,\n        ],\n      }),\n    [numPositions, canvasWidth, zoomTransform]\n  );\n\n  const speciesList = useMemo(() => [...speciesInfo.values()], [speciesInfo]);\n\n  const axisWidth = canvasWidth + AXIS_LEFT_PADDING\n\n  return totalWidth < 10 || totalHeight < 10 ? null :(\n    <div\n      style={{\n        position: \"relative\",\n        width: totalWidth,\n        height: totalHeight,\n      }}\n    >\n      <svg\n        width={HIGHLIGHTED_AND_SPECIES_SVG_WIDTH}\n        height={totalHeight}\n        style={{ top: 0, left: 0, position: \"absolute\" }}\n      >\n        {speciesList.map((species, i) => {\n          const rectHeight = canvasHeight / speciesList.length;\n          return (\n            <g\n              key={i}\n              onMouseMove={(event) => handleSpeciesBarMouseMove(event, species)}\n              onMouseLeave={(event) => handleSpeciesBarMouseLeave(event, species)}\n              opacity={hovered.length && !hovered.includes(species.id) ? 0.3 : 1}\n            >\n              {highlighted.includes(species.id) && (\n                <rect\n                  width={HIGHLIGHTED_BAR_WIDTH}\n                  height={rectHeight}\n                  x={0}\n                  y={rectHeight * i}\n                  fill={species.color}\n                  shapeRendering={\"crispEdges\"}\n                />\n              )}\n              <rect\n                width={SPECIES_BAR_WIDTH}\n                height={rectHeight}\n                x={HIGHLIGHTED_BAR_WIDTH + PADDING}\n                y={rectHeight * i}\n                fill={species.color}\n                shapeRendering={\"crispEdges\"}\n              />\n            </g>\n          );\n        })}\n        <Text\n          angle={270}\n          textAnchor=\"end\"\n          verticalAnchor=\"middle\"\n          fontSize={12}\n          x={0.5 * HIGHLIGHTED_BAR_WIDTH}\n          y={canvasHeight + 2}\n        >\n          Highlight\n        </Text>\n        <Text\n          angle={270}\n          textAnchor=\"end\"\n          verticalAnchor=\"middle\"\n          fontSize={12}\n          x={HIGHLIGHTED_BAR_WIDTH + PADDING + 0.5 * SPECIES_BAR_WIDTH}\n          y={canvasHeight + 2}\n        >\n          Species\n        </Text>\n      </svg>\n      <canvas\n        ref={canvasRef}\n        onPointerDown={handleHeatmapPointerDown}\n        onPointerMove={handleHeatmapPointerMove}\n        onPointerUp={handleHeatmapPointerUp}\n        onPointerLeave={handleHeatmapPointerLeave}\n        style={{\n          position: \"absolute\",\n          left: HIGHLIGHTED_AND_SPECIES_SVG_WIDTH,\n          cursor: isDragging ? \"grabbing\" : zoomTransform.scaleX > 1 ? \"grab\" : \"default\",\n        }}\n      />\n      {/* overflow: hidden clips axis ticks that scroll outside the canvas bounds when zoomed */}\n      <svg\n        width={axisWidth}\n        height={AXIS_HEIGHT}\n        style={{\n          position: \"absolute\",\n          //position it into the other svg by AXIS_LEFT_PADDING to fix axis cutoff of 0 at first load.\n          //can't fix with overflow visible since on zoom the axis needs to be clipped\n          left: HIGHLIGHTED_AND_SPECIES_SVG_WIDTH - AXIS_LEFT_PADDING,\n          bottom: 0,\n          pointerEvents: \"none\",\n          overflow: \"hidden\",\n        }}\n      >\n        <AxisBottom\n          scale={zoomedXScale}\n          numTicks={Math.min(numPositions, Math.round(10 * zoomTransform.scaleX))}\n          left={AXIS_LEFT_PADDING}\n        />\n      </svg>\n      {/* Axis title, zoom indicator, and color legend live in HTML below the axis ticks.\n          The legend wraps at narrow widths; AXIS_HEIGHT reserves room for up to LEGEND_MAX_ROWS. */}\n      <div\n        style={{\n          position: \"absolute\",\n          top: canvasHeight + AXIS_TICKS_HEIGHT,\n          left: HIGHLIGHTED_AND_SPECIES_SVG_WIDTH,\n          width: canvasWidth,\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          gap: 2,\n          fontSize: 12,\n          pointerEvents: \"none\",\n        }}\n      >\n        {/* Axis title centered, zoom factor pinned to the right of the same line */}\n        <div style={{ position: \"relative\", width: \"100%\", textAlign: \"center\" }}>\n          Position in cCRE\n          <span style={{ position: \"absolute\", right: 0, top: 0 }}>\n            {`${zoomTransform.scaleX.toFixed(1)}×`}\n          </span>\n        </div>\n        <LegendOrdinal\n          scale={legendScale}\n          direction=\"row\"\n          shape=\"rect\"\n          shapeWidth={11}\n          shapeHeight={11}\n          itemMargin=\"0 10px 0 0\"\n          labelMargin=\"0 0 0 0px\"\n          labelFormat={(char) => LEGEND_LABELS[char]}\n          shapeStyle={() => ({ border: \"1px solid rgba(0,0,0,0.25)\" })}\n          // Legend root only sets flexDirection, so enable wrapping/centering here.\n          // minHeight reserves the full legend band; alignContent centers the row(s)\n          // vertically so a single, non-wrapping row sits centered instead of top-aligned.\n          style={{\n            display: \"flex\",\n            flexWrap: \"wrap\",\n            justifyContent: \"center\",\n            alignContent: \"center\",\n            rowGap: 2,\n            minHeight: LEGEND_MAX_ROWS * LEGEND_ROW_HEIGHT,\n          }}\n        />\n      </div>\n      {tooltipData && tooltipContents && (\n        <TooltipInPortal left={tooltipLeft} top={tooltipTop} style={defaultStyles}>\n          {tooltipContents(tooltipData)}\n        </TooltipInPortal>\n      )}\n      <Tooltip title={INFO_TOOLTIP_TEXT} placement=\"top-end\" arrow>\n        <InfoOutlinedIcon\n          fontSize=\"small\"\n          sx={{\n            position: \"absolute\",\n            bottom: 4,\n            right: 4,\n            color: \"text.secondary\",\n            cursor: \"help\",\n          }}\n        />\n      </Tooltip>\n    </div>\n  );\n};"],"names":["COLORS","A","C","G","T","N","M","LEGEND_LABELS","LEGEND_ORDER","INFO_TOOLTIP_TEXT","legendScale","scaleOrdinal","domain","range","map","char","AXIS_TICKS_HEIGHT","LEGEND_TITLE_HEIGHT","LEGEND_ROW_HEIGHT","LEGEND_MAX_ROWS","AXIS_HEIGHT","SPECIES_BAR_WIDTH","HIGHLIGHTED_BAR_WIDTH","PADDING","HIGHLIGHTED_AND_SPECIES_SVG_WIDTH","MIN_SCALE","MAX_SCALE","ZOOM_FACTOR","AXIS_LEFT_PADDING","clampTranslateX","translateX","scaleX","canvasWidth","Math","min","max","SequenceAlignmentPlot","data","width","totalWidth","height","totalHeight","getLabel","getOrderColor","getOrder","hovered","externalHovered","highlighted","onHoverChange","tooltipContents","internalHovered","setInternalHovered","useState","zoomTransform","setZoomTransform","isDragging","setIsDragging","zoomTransformRef","useRef","dragStartX","dragStartTranslateX","useEffect","current","handleSetInternalHover","useCallback","newHovered","useMemo","tooltipData","tooltipLeft","tooltipTop","showTooltip","hideTooltip","useTooltip","TooltipInPortal","useTooltipInPortal","scroll","detectBounds","numSpecies","Object","keys","length","numPositions","values","canvasHeight","speciesInfo","entries","species","id","label","order","color","Map","canvasRef","canvas","handleWheel","e","preventDefault","rect","getBoundingClientRect","cursorX","clientX","left","zoomDir","deltaY","newScaleX","newTranslateX","clampedTranslateX","addEventListener","passive","removeEventListener","preventTouchScroll","touches","ctx","getContext","dpr","window","devicePixelRatio","style","setTransform","clearRect","bitmapScaleX","bitmapScaleY","bitmapTranslateX","forEach","sequence","y","nucleobase","x","fillStyle","globalAlpha","includes","fillRect","cssXToPosition","cssX","floor","handleHeatmapPointerDown","currentTarget","setPointerCapture","pointerId","handleHeatmapPointerMove","delta","prev","cssY","clientY","top","position","speciesIndex","speciesId","charLabel","undefined","get","handleHeatmapPointerUp","handleHeatmapPointerLeave","handleSpeciesBarMouseMove","event","handleSpeciesBarMouseLeave","zoomedXScale","scaleLinear","speciesList","axisWidth","jsxs","i","rectHeight","jsx","Text","cursor","bottom","pointerEvents","overflow","AxisBottom","round","display","flexDirection","alignItems","gap","fontSize","textAlign","right","toFixed","LegendOrdinal","border","flexWrap","justifyContent","alignContent","rowGap","minHeight","defaultStyles","Tooltip","InfoOutlinedIcon"],"mappings":"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"}

package/dist/visualization.es200.js

@@ -1,10 +1,5 @@
-function n() {
-  var e = [];
-  return this.eachBefore(function(a) {
-    a.children || e.push(a);
-  }), e;
-}
+var o = { exports: {} };
 export {
-  n as default
+  o as __module
 };
 //# sourceMappingURL=visualization.es200.js.map

package/dist/visualization.es200.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es200.js","sources":["../../../node_modules/.pnpm/d3-hierarchy@3.1.2/node_modules/d3-hierarchy/src/hierarchy/leaves.js"],"sourcesContent":["export default function() {\n  var leaves = [];\n  this.eachBefore(function(node) {\n    if (!node.children) {\n      leaves.push(node);\n    }\n  });\n  return leaves;\n}\n"],"names":["node_leaves","leaves","node"],"mappings":"AAAe,SAAAA,IAAW;AACxB,MAAIC,IAAS,CAAA;AACb,cAAK,WAAW,SAASC,GAAM;AAC7B,IAAKA,EAAK,YACRD,EAAO,KAAKC,CAAI;AAAA,EAEpB,CAAC,GACMD;AACT;","x_google_ignoreList":[0]}
+{"version":3,"file":"visualization.es200.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}