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

package/dist/visualization.es116.js

@@ -1,35 +1,178 @@
-import { jsx as u } from "react/jsx-runtime";
-import { c as p } from "react/compiler-runtime";
-import { memo as g } from "react";
-import M from "./visualization.es78.js";
-const D = g((a) => {
-  const o = p(11), {
-    dragStart: r,
-    dragMove: s,
-    dragEnd: e,
-    scale: c,
-    isDragging: l
-  } = a;
-  let t;
-  o[0] !== e || o[1] !== l ? (t = () => {
-    l && e();
-  }, o[0] = e, o[1] = l, o[2] = t) : t = o[2];
-  let n;
-  o[3] !== c ? (n = (m) => {
-    const f = M(m) || {
-      x: 0,
-      y: 0
+import { jsx as s, jsxs as g } from "react/jsx-runtime";
+import { c as q } from "react/compiler-runtime";
+import { useRef as B, useState as L, useEffect as F } from "react";
+import { createPortal as J } from "react-dom";
+import Q from "./visualization.es115.js";
+const Y = 94, ee = 90, O = 16, te = 2147483647, T = 440, W = 40, ne = 12, ae = (z) => {
+  const e = q(40);
+  let o, r, a, t;
+  e[0] !== z ? ({
+    onClose: t,
+    containerRef: o,
+    legend: r,
+    ...a
+  } = z, e[0] = z, e[1] = o, e[2] = r, e[3] = a, e[4] = t) : (o = e[1], r = e[2], a = e[3], t = e[4]);
+  const G = B(null), [n, U] = L(null);
+  let _, x;
+  e[5] !== n || e[6] !== o || e[7] !== t ? (_ = () => {
+    const u = (b) => {
+      const l = b.target;
+      o.current?.contains(l) || G.current?.contains(l) || n && l !== n && n.contains(l) || t();
+    }, y = (b) => {
+      b.key === "Escape" && t();
     };
-    c({
-      scaleX: 1.5,
-      scaleY: 1.5,
-      point: f
+    return document.addEventListener("pointerdown", u), document.addEventListener("keydown", y), () => {
+      document.removeEventListener("pointerdown", u), document.removeEventListener("keydown", y);
+    };
+  }, x = [o, t, n], e[5] = n, e[6] = o, e[7] = t, e[8] = _, e[9] = x) : (_ = e[8], x = e[9]), F(_, x);
+  const [i, j] = L(null), [A, $] = L(!1);
+  let v;
+  e[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (v = () => $(!0), e[10] = v) : v = e[10];
+  const V = v, C = B(null);
+  let w;
+  e[11] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (w = (u) => {
+    if (C.current?.disconnect(), C.current = null, !u) {
+      j(null);
+      return;
+    }
+    const y = new ResizeObserver((b) => {
+      const [l] = b;
+      if (!l)
+        return;
+      const {
+        width: X,
+        height: Z
+      } = l.contentRect;
+      j({
+        width: Math.floor(X),
+        height: Math.floor(Z)
+      });
     });
-  }, o[3] = c, o[4] = n) : n = o[4];
-  let i;
-  return o[5] !== e || o[6] !== s || o[7] !== r || o[8] !== t || o[9] !== n ? (i = /* @__PURE__ */ u("rect", { width: "100%", height: "100%", fill: "transparent", onTouchStart: r, onTouchMove: s, onTouchEnd: e, onMouseDown: r, onMouseMove: s, onMouseUp: e, onMouseLeave: t, onDoubleClick: n }), o[5] = e, o[6] = s, o[7] = r, o[8] = t, o[9] = n, o[10] = i) : i = o[10], i;
-});
+    y.observe(u), C.current = y;
+  }, e[11] = w) : w = e[11];
+  const K = w, P = Math.min(T, i?.width ?? T);
+  let I, M;
+  e[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (I = {
+    position: "fixed",
+    inset: 0,
+    zIndex: te,
+    background: "rgba(0,0,0,0.45)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, M = /* @__PURE__ */ s("style", { children: "@keyframes heatmapMiniMapSpinnerRotate { to { transform: rotate(360deg); } }" }), e[12] = I, e[13] = M) : (I = e[12], M = e[13]);
+  let S, E, R;
+  e[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (S = {
+    position: "relative",
+    width: `${Y}vw`,
+    height: `${ee}vh`,
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    background: "#fff",
+    border: "1px solid #d5d5d5",
+    borderRadius: 8,
+    boxShadow: "0 8px 32px rgba(0,0,0,0.25)",
+    overflow: "hidden"
+  }, E = {
+    flexShrink: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: `10px ${O}px`,
+    background: "#f7f7f8",
+    borderBottom: "1px solid #e5e5e5"
+  }, R = /* @__PURE__ */ s("span", { style: {
+    fontSize: 14,
+    fontWeight: 600,
+    color: "#333"
+  }, children: "Minimap" }), e[14] = S, e[15] = E, e[16] = R) : (S = e[14], E = e[15], R = e[16]);
+  let D;
+  e[17] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (D = {
+    width: 26,
+    height: 26,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 0,
+    border: "none",
+    borderRadius: "50%",
+    background: "#fff",
+    color: "#555",
+    fontSize: 16,
+    lineHeight: 1,
+    cursor: "pointer"
+  }, e[17] = D) : D = e[17];
+  let d;
+  e[18] !== t ? (d = /* @__PURE__ */ g("div", { style: E, children: [
+    R,
+    /* @__PURE__ */ s("button", { type: "button", "aria-label": "Close expanded minimap", onClick: t, style: D, children: "×" })
+  ] }), e[18] = t, e[19] = d) : d = e[19];
+  let k;
+  e[20] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (k = {
+    flex: 1,
+    minHeight: 0,
+    display: "flex",
+    flexDirection: "column",
+    gap: ne,
+    padding: O
+  }, e[20] = k) : k = e[20];
+  let c;
+  e[21] !== n || e[22] !== r || e[23] !== P ? (c = r && /* @__PURE__ */ s("svg", { width: P, height: W, style: {
+    flexShrink: 0,
+    display: "block",
+    overflow: "visible"
+  }, children: r({
+    width: P,
+    height: W,
+    orientation: "horizontal",
+    overlayContainer: n ?? void 0
+  }) }), e[21] = n, e[22] = r, e[23] = P, e[24] = c) : c = e[24];
+  let H;
+  e[25] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (H = {
+    flex: 1,
+    minHeight: 0,
+    position: "relative"
+  }, e[25] = H) : H = e[25];
+  let f;
+  e[26] !== A ? (f = !A && /* @__PURE__ */ s("div", { "aria-label": "Loading minimap", style: {
+    position: "absolute",
+    inset: 0,
+    zIndex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    pointerEvents: "none"
+  }, children: /* @__PURE__ */ s("div", { style: {
+    width: 40,
+    height: 40,
+    borderRadius: "50%",
+    border: "4px solid #e5e5e5",
+    borderTopColor: "#0d0f98",
+    animation: "heatmapMiniMapSpinnerRotate 0.8s linear infinite"
+  } }) }), e[26] = A, e[27] = f) : f = e[27];
+  let h;
+  e[28] !== a || e[29] !== i ? (h = i && i.width > 0 && i.height > 0 && /* @__PURE__ */ s(Q, { ...a, width: i.width, height: i.height, onReady: V }), e[28] = a, e[29] = i, e[30] = h) : h = e[30];
+  let m;
+  e[31] !== f || e[32] !== h ? (m = /* @__PURE__ */ g("div", { ref: K, style: H, children: [
+    f,
+    h
+  ] }), e[31] = f, e[32] = h, e[33] = m) : m = e[33];
+  let p;
+  e[34] !== c || e[35] !== m ? (p = /* @__PURE__ */ g("div", { style: k, children: [
+    c,
+    m
+  ] }), e[34] = c, e[35] = m, e[36] = p) : p = e[36];
+  let N;
+  return e[37] !== d || e[38] !== p ? (N = J(/* @__PURE__ */ g("div", { ref: U, style: I, children: [
+    M,
+    /* @__PURE__ */ g("div", { ref: G, style: S, children: [
+      d,
+      p
+    ] })
+  ] }), document.body), e[37] = d, e[38] = p, e[39] = N) : N = e[39], N;
+};
 export {
-  D as ZoomSurface
+  ae as default
 };
 //# sourceMappingURL=visualization.es116.js.map

package/dist/visualization.es116.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es116.js","sources":["../src/components/PhyloTree/ZoomSurface.tsx"],"sourcesContent":["import { localPoint } from \"@visx/event\";\nimport { memo } from \"react\";\n\ntype ZoomSurfaceProps = {\n  dragStart: (event: React.TouchEvent | React.MouseEvent) => void;\n  dragMove: (event: React.TouchEvent | React.MouseEvent) => void;\n  dragEnd: () => void;\n  scale: (args: { scaleX: number; scaleY: number; point?: { x: number; y: number } }) => void;\n  isDragging: boolean;\n};\n\n\n/**\n * rect which catches and handles zoom events\n */\n\nexport const ZoomSurface = memo(\n  ({ dragStart, dragMove, dragEnd, scale, isDragging }: ZoomSurfaceProps) => {\n    return (\n      <rect\n        width=\"100%\"\n        height=\"100%\"\n        fill=\"transparent\"\n        onTouchStart={dragStart}\n        onTouchMove={dragMove}\n        onTouchEnd={dragEnd}\n        onMouseDown={dragStart}\n        onMouseMove={dragMove}\n        onMouseUp={dragEnd}\n        onMouseLeave={() => {\n          if (isDragging) dragEnd();\n        }}\n        onDoubleClick={(event) => {\n          const point = localPoint(event) || { x: 0, y: 0 };\n          scale({ scaleX: 1.5, scaleY: 1.5, point });\n        }}\n      />\n    );\n  }\n);"],"names":["ZoomSurface","memo","t0","$","_c","dragStart","dragMove","dragEnd","scale","isDragging","t1","t2","event","point","localPoint","x","y","scaleX","scaleY","t3","jsx"],"mappings":";;;;AAgBO,MAAMA,IAAcC,EACzBC,CAAAA,MAAA;AAAA,QAAAC,IAAAC,EAAA,EAAA,GAAC;AAAA,IAAAC,WAAAA;AAAAA,IAAAC,UAAAA;AAAAA,IAAAC,SAAAA;AAAAA,IAAAC,OAAAA;AAAAA,IAAAC,YAAAA;AAAAA,EAAAA,IAAAP;AAAqE,MAAAQ;AAAA,EAAAP,EAAA,CAAA,MAAAI,KAAAJ,SAAAM,KAYlDC,IAAAA,MAAA;AACZ,IAAID,KAAYF,EAAAA;AAAAA,EAAU,GAC3BJ,OAAAI,GAAAJ,OAAAM,GAAAN,OAAAO,KAAAA,IAAAP,EAAA,CAAA;AAAA,MAAAQ;AAAA,EAAAR,SAAAK,KACcG,IAAAC,CAAAA,MAAA;AACb,UAAAC,IAAcC,EAAWF,CAAuB,KAAlC;AAAA,MAAAG,GAA0B;AAAA,MAACC,GAAK;AAAA,IAAA;AAC9CR,IAAAA,EAAM;AAAA,MAAAS,QAAU;AAAA,MAAGC,QAAU;AAAA,MAAGL,OAAAA;AAAAA,IAAAA,CAAS;AAAA,EAAC,GAC3CV,OAAAK,GAAAL,OAAAQ,KAAAA,IAAAR,EAAA,CAAA;AAAA,MAAAgB;AAAA,SAAAhB,EAAA,CAAA,MAAAI,KAAAJ,EAAA,CAAA,MAAAG,KAAAH,EAAA,CAAA,MAAAE,KAAAF,EAAA,CAAA,MAAAO,KAAAP,SAAAQ,KAhBHQ,IAAA,gBAAAC,EAAA,UACQ,OAAA,QACC,QAAA,QACF,MAAA,eACSf,cAAAA,GACDC,aAAAA,GACDC,YAAAA,GACCF,aAAAA,GACAC,aAAAA,GACFC,WAAAA,GACG,cAAAG,GAGC,eAAAC,EAAAA,CAGd,GACDR,OAAAI,GAAAJ,OAAAG,GAAAH,OAAAE,GAAAF,OAAAO,GAAAP,OAAAQ,GAAAR,QAAAgB,KAAAA,IAAAhB,EAAA,EAAA,GAjBFgB;AAiBE,CAGR;"}
+{"version":3,"file":"visualization.es116.js","sources":["../src/components/Heatmap/HeatmapMiniMapPopup.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type ReactNode, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { HeatmapLegendFrame } from \"./types\";\nimport HeatmapMiniMap, { type HeatmapMiniMapProps } from \"./HeatmapMiniMap\";\n\n// Nearly the whole screen, with enough backdrop showing that it reads as a popup.\nconst MINI_MAP_POPUP_WIDTH_VW = 94;\nconst MINI_MAP_POPUP_HEIGHT_VH = 90;\nconst MINI_MAP_POPUP_PADDING = 16;\n// Portaled to <body>, since a transformed ancestor would trap `position: fixed`, and stacked\n// above anything else the host page puts on top.\nconst MINI_MAP_POPUP_Z_INDEX = 2147483647;\n// The legend's band across the top: long enough to sweep with some precision.\nconst LEGEND_BAND_WIDTH = 440;\nconst LEGEND_BAND_HEIGHT = 40;\nconst LEGEND_BAND_GAP = 12;\n\ntype MiniMapPassThroughProps = Omit<HeatmapMiniMapProps, \"width\" | \"height\" | \"onCanvasClick\">;\n\nexport interface HeatmapMiniMapPopupProps extends MiniMapPassThroughProps {\n  onClose: () => void;\n  /** The inline minimap's container, where a click doesn't count as outside the popup. */\n  containerRef: RefObject<HTMLDivElement | null>;\n  /** Draws the plot's legend in a band across the top. Omitted where the plot shows no legend. */\n  legend?: (frame: HeatmapLegendFrame) => ReactNode;\n}\n\nconst HeatmapMiniMapPopup = ({ onClose, containerRef, legend, ...miniMapProps }: HeatmapMiniMapPopupProps) => {\n  const popupRef = useRef<HTMLDivElement | null>(null);\n  // The legend's tooltips portal into the backdrop to show above the popup. State rather than a\n  // ref, so the legend re-renders once it exists.\n  const [backdrop, setBackdrop] = useState<HTMLDivElement | null>(null);\n  useEffect(() => {\n    const handlePointerDown = (event: PointerEvent) => {\n      const target = event.target as Node;\n      if (containerRef.current?.contains(target) || popupRef.current?.contains(target)) return;\n      // An overlay the legend opened is part of the popup too; the backdrop itself is outside it.\n      if (backdrop && target !== backdrop && backdrop.contains(target)) return;\n      onClose();\n    };\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") onClose();\n    };\n    document.addEventListener(\"pointerdown\", handlePointerDown);\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      document.removeEventListener(\"pointerdown\", handlePointerDown);\n      document.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [containerRef, onClose, backdrop]);\n\n  // The canvas needs pixel dimensions; the popup is sized in vw/vh, so the area is measured as it resizes.\n  const [size, setSize] = useState<{ width: number; height: number } | null>(null);\n  // A spinner covers the first draw, which can take a moment on a large grid.\n  const [isReady, setIsReady] = useState(false);\n  const handleReady = useCallback(() => setIsReady(true), []);\n  const observerRef = useRef<ResizeObserver | null>(null);\n  const areaRef = useCallback((node: HTMLDivElement | null) => {\n    observerRef.current?.disconnect();\n    observerRef.current = null;\n    if (!node) {\n      setSize(null);\n      return;\n    }\n    const observer = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      const { width, height } = entry.contentRect;\n      setSize({ width: Math.floor(width), height: Math.floor(height) });\n    });\n    observer.observe(node);\n    observerRef.current = observer;\n  }, []);\n\n  // Narrower only where the popup itself is: on a phone.\n  const legendBandWidth = Math.min(LEGEND_BAND_WIDTH, size?.width ?? LEGEND_BAND_WIDTH);\n\n  return createPortal(\n    <div\n      ref={setBackdrop}\n      style={{ position: \"fixed\", inset: 0, zIndex: MINI_MAP_POPUP_Z_INDEX, background: \"rgba(0,0,0,0.45)\", display: \"flex\", alignItems: \"center\", justifyContent: \"center\" }}\n    >\n      <style>{\"@keyframes heatmapMiniMapSpinnerRotate { to { transform: rotate(360deg); } }\"}</style>\n      <div\n        ref={popupRef}\n        style={{\n          position: \"relative\",\n          width: `${MINI_MAP_POPUP_WIDTH_VW}vw`,\n          height: `${MINI_MAP_POPUP_HEIGHT_VH}vh`,\n          boxSizing: \"border-box\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          background: \"#fff\",\n          border: \"1px solid #d5d5d5\",\n          borderRadius: 8,\n          boxShadow: \"0 8px 32px rgba(0,0,0,0.25)\",\n          overflow: \"hidden\",\n        }}\n      >\n        <div\n          style={{\n            flexShrink: 0,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            padding: `10px ${MINI_MAP_POPUP_PADDING}px`,\n            background: \"#f7f7f8\",\n            borderBottom: \"1px solid #e5e5e5\",\n          }}\n        >\n          <span style={{ fontSize: 14, fontWeight: 600, color: \"#333\" }}>Minimap</span>\n          <button\n            type=\"button\"\n            aria-label=\"Close expanded minimap\"\n            onClick={onClose}\n            style={{\n              width: 26,\n              height: 26,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              padding: 0,\n              border: \"none\",\n              borderRadius: \"50%\",\n              background: \"#fff\",\n              color: \"#555\",\n              fontSize: 16,\n              lineHeight: 1,\n              cursor: \"pointer\",\n            }}\n          >\n            ×\n          </button>\n        </div>\n        <div style={{ flex: 1, minHeight: 0, display: \"flex\", flexDirection: \"column\", gap: LEGEND_BAND_GAP, padding: MINI_MAP_POPUP_PADDING }}>\n          {legend && (\n            // Above the map rather than beside it: the popup is wide, so a band costs the map less.\n            <svg\n              width={legendBandWidth}\n              height={LEGEND_BAND_HEIGHT}\n              style={{ flexShrink: 0, display: \"block\", overflow: \"visible\" }}\n            >\n              {legend({\n                width: legendBandWidth,\n                height: LEGEND_BAND_HEIGHT,\n                orientation: \"horizontal\",\n                overlayContainer: backdrop ?? undefined,\n              })}\n            </svg>\n          )}\n          <div ref={areaRef} style={{ flex: 1, minHeight: 0, position: \"relative\" }}>\n            {/* Not gated on `size`, so it shows on the first paint rather than after the measurement. */}\n            {!isReady && (\n              <div\n                aria-label=\"Loading minimap\"\n                style={{\n                  position: \"absolute\",\n                  inset: 0,\n                  zIndex: 1,\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"center\",\n                  pointerEvents: \"none\",\n                }}\n              >\n                <div\n                  style={{\n                    width: 40,\n                    height: 40,\n                    borderRadius: \"50%\",\n                    border: \"4px solid #e5e5e5\",\n                    // The minimap's viewport-rectangle color.\n                    borderTopColor: \"#0d0f98\",\n                    animation: \"heatmapMiniMapSpinnerRotate 0.8s linear infinite\",\n                  }}\n                />\n              </div>\n            )}\n            {size && size.width > 0 && size.height > 0 && (\n              <HeatmapMiniMap {...miniMapProps} width={size.width} height={size.height} onReady={handleReady} />\n            )}\n          </div>\n        </div>\n      </div>\n    </div>,\n    document.body\n  );\n};\n\nexport default HeatmapMiniMapPopup;\n"],"names":["MINI_MAP_POPUP_WIDTH_VW","MINI_MAP_POPUP_HEIGHT_VH","MINI_MAP_POPUP_PADDING","MINI_MAP_POPUP_Z_INDEX","LEGEND_BAND_WIDTH","LEGEND_BAND_HEIGHT","LEGEND_BAND_GAP","HeatmapMiniMapPopup","t0","$","_c","containerRef","legend","miniMapProps","onClose","popupRef","useRef","backdrop","setBackdrop","useState","t1","t2","handlePointerDown","event","target","current","contains","handleKeyDown","event_0","key","document","addEventListener","removeEventListener","useEffect","size","setSize","isReady","setIsReady","t3","Symbol","for","handleReady","observerRef","t4","node","disconnect","observer","ResizeObserver","t5","entry","width","height","contentRect","Math","floor","observe","areaRef","legendBandWidth","min","t6","position","inset","zIndex","background","display","alignItems","justifyContent","jsx","t7","t8","t9","boxSizing","flexDirection","border","borderRadius","boxShadow","overflow","flexShrink","padding","borderBottom","fontSize","fontWeight","color","t10","lineHeight","cursor","t11","t12","flex","minHeight","gap","t13","orientation","overlayContainer","undefined","t14","t15","pointerEvents","borderTopColor","animation","t16","HeatmapMiniMap","t17","jsxs","t18","t19","createPortal","body"],"mappings":"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"}

package/dist/visualization.es117.js

@@ -1,21 +1,106 @@
-import { jsx as e } from "react/jsx-runtime";
-import { useBranchLengthTransition as m } from "./visualization.es7.js";
-import { memo as a } from "react";
-import { motion as s } from "./visualization.es29.js";
-const c = a(function({
-  scaledLinkPath: o,
-  baseLinkPath: n,
-  color: r,
-  strokeWidth: i,
-  useBranchLengths: t
+import { useRef as u, useEffect as M, useCallback as l, useState as I, useMemo as w } from "react";
+import { getVisibleRange as y, drawHeatmapCells as O, hitTestCell as j, buildBin as C } from "./visualization.es113.js";
+import { useStableCallback as v } from "./visualization.es20.js";
+const G = 4;
+function Q({
+  canvasCellParams: r,
+  viewportWidth: f,
+  viewportHeight: i,
+  xTickValues: T,
+  yTickValues: x,
+  onClick: A,
+  animationType: L
 }) {
-  return /* @__PURE__ */ e(s.path, { stroke: r, strokeWidth: i, fill: "none", initial: !1, strokeLinecap: "round", strokeLinejoin: "round", animate: {
-    d: t ? o : n
-  }, transition: {
-    d: m
-  } });
-});
+  const s = u(null), _ = u(null), a = u(null), b = u(null), d = u(null), p = u(null);
+  M(() => () => {
+    d.current != null && cancelAnimationFrame(d.current);
+  }, []);
+  const o = l(() => {
+    const t = _.current, e = s.current;
+    if (!t || !e) return !1;
+    const n = t.getContext("2d");
+    if (!n) return !1;
+    const R = window.devicePixelRatio || 1;
+    n.setTransform(R, 0, 0, R, 0, 0), n.clearRect(0, 0, f, i);
+    const D = y(r, e.scrollLeft, e.scrollTop, f, i, G);
+    n.translate(-e.scrollLeft, -e.scrollTop);
+    const E = p.current, h = O(n, r, D, a.current, E && {
+      type: E.type,
+      elapsed: (performance.now() - E.startedAt) / 1e3,
+      firstColumn: Math.floor(E.scrollLeft / r.binWidth)
+    });
+    return h || (p.current = null), h;
+  }, [r, f, i]);
+  M(() => {
+    o();
+  }, [o]);
+  const g = v(o);
+  M(() => {
+    const t = s.current;
+    if (!t || !L && !p.current) return;
+    p.current = L ? {
+      type: L,
+      startedAt: performance.now(),
+      scrollLeft: t.scrollLeft
+    } : null;
+    let e = 0;
+    const n = () => {
+      g() && (e = requestAnimationFrame(n));
+    };
+    return n(), () => cancelAnimationFrame(e);
+  }, [L, g]);
+  const [m, F] = I({
+    left: 0,
+    top: 0
+  }), V = l((t) => {
+    s.current = t, t && F({
+      left: t.scrollLeft,
+      top: t.scrollTop
+    });
+  }, []), c = w(() => y(r, m.left, m.top, f, i, G), [r, m.left, m.top, f, i]), k = w(() => T.slice(c.colStart, c.colEnd + 1), [T, c.colStart, c.colEnd]), q = w(() => x.slice(c.rowStart, c.rowEnd + 1), [x, c.rowStart, c.rowEnd]), N = l(() => {
+    const t = s.current;
+    t && (p.current = null, d.current == null && (d.current = requestAnimationFrame(() => {
+      d.current = null, o(), F({
+        left: t.scrollLeft,
+        top: t.scrollTop
+      });
+    })));
+  }, [o]), S = l((t) => {
+    const e = s.current;
+    return e ? j(r, t.nativeEvent.offsetX + e.scrollLeft, t.nativeEvent.offsetY + e.scrollTop) : null;
+  }, [r]), X = l((t) => {
+    const e = S(t);
+    t.currentTarget.style.cursor = e ? "pointer" : "default";
+    const n = a.current;
+    if ((n?.row !== e?.row || n?.column !== e?.column) && (a.current = e, o()), e) {
+      const R = C(r, e);
+      R && b.current?.show(R, t);
+    } else
+      b.current?.hide();
+  }, [r, S, o]), Y = l((t) => {
+    t.currentTarget.style.cursor = "default", a.current && (a.current = null, o()), b.current?.hide();
+  }, [o]), B = l((t) => {
+    if (!A) return;
+    const e = S(t), n = e && C(r, e);
+    n && A(n);
+  }, [r, S, A]);
+  return {
+    canvasRef: _,
+    mainPaneRef: s,
+    canvasTooltipRef: b,
+    setMainPaneNode: V,
+    handleGridScroll: N,
+    axisScrollPos: m,
+    visibleXTickValues: k,
+    visibleYTickValues: q,
+    canvasHandlers: {
+      onMouseMove: X,
+      onMouseLeave: Y,
+      onClick: B
+    }
+  };
+}
 export {
-  c as TreeLink
+  Q as useHeatmapCanvasGrid
 };
 //# sourceMappingURL=visualization.es117.js.map

package/dist/visualization.es117.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es117.js","sources":["../src/components/PhyloTree/TreeLink.tsx"],"sourcesContent":["import { TreeNode } from \"./types\";\nimport { motion } from \"framer-motion\";\nimport { useBranchLengthTransition } from \"./PhyloTree\";\nimport { memo } from \"react\";\n\nexport type TreeLinkProps = {\n  scaledLinkPath: TreeNode[\"scaledLinkPath\"]\n  baseLinkPath: TreeNode[\"baseLinkPath\"]\n  color: TreeNode[\"color\"]\n  strokeWidth: TreeNode[\"linkStrokeWidth\"]\n  useBranchLengths: boolean;\n};\n\n/**\n * Link from node to its parent\n */\nexport const TreeLink = memo(function TreeLink({\n  scaledLinkPath,\n  baseLinkPath,\n  color,\n  strokeWidth,\n  useBranchLengths,\n}: TreeLinkProps) {\n  return (\n    <motion.path\n      stroke={color}\n      strokeWidth={strokeWidth}\n      fill=\"none\"\n      initial={false}\n      strokeLinecap={\"round\"}\n      strokeLinejoin={\"round\"}\n      animate={{\n        d: useBranchLengths ? scaledLinkPath : baseLinkPath,\n      }}\n      transition={{\n        d: useBranchLengthTransition,\n      }}\n    />\n  );\n})\n"],"names":["TreeLink","memo","scaledLinkPath","baseLinkPath","color","strokeWidth","useBranchLengths","jsx","motion","d","useBranchLengthTransition"],"mappings":";;;;AAgBO,MAAMA,IAAWC,EAAK,SAAkB;AAAA,EAC7CC,gBAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,kBAAAA;AACa,GAAG;AAChB,SACE,gBAAAC,EAACC,EAAO,MAAP,EACC,QAAQJ,GACR,aAAAC,GACA,MAAK,QACL,SAAS,IACT,eAAe,SACf,gBAAgB,SAChB,SAAS;AAAA,IACPI,GAAGH,IAAmBJ,IAAiBC;AAAAA,EAAAA,GAEzC,YAAY;AAAA,IACVM,GAAGC;AAAAA,EAAAA,GACH;AAGR,CAAC;"}
+{"version":3,"file":"visualization.es117.js","sources":["../src/components/Heatmap/hooks/useHeatmapCanvasGrid.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { HeatmapCellId } from \"../types\";\nimport type { PlotTooltipHandle } from \"../../../tooltip\";\nimport type { AnimationType } from \"../../../utility\";\nimport { useStableCallback } from \"../../../hooks\";\nimport { drawHeatmapCells, getVisibleRange, hitTestCell, buildBin, type AnyBin, type CanvasCellParams } from \"../HeatmapCanvasCells\";\n\n// Rows and columns drawn past the viewport, so cells and tick labels don't pop in as they scroll into view.\nconst GRID_OVERSCAN_CELLS = 4;\n\nexport interface UseHeatmapCanvasGridArgs {\n  canvasCellParams: CanvasCellParams;\n  viewportWidth: number;\n  viewportHeight: number;\n  xTickValues: number[];\n  yTickValues: number[];\n  onClick?: (bin: AnyBin) => void;\n  animationType?: AnimationType;\n}\n\nexport function useHeatmapCanvasGrid({\n  canvasCellParams, viewportWidth, viewportHeight, xTickValues, yTickValues, onClick, animationType,\n}: UseHeatmapCanvasGridArgs) {\n  // Only mainPaneRef scrolls natively. The canvas repaints from its scroll position, and the tick\n  // label panes follow it through a transform (axisScrollPos), both once per frame.\n  const mainPaneRef = useRef<HTMLDivElement | null>(null);\n  const canvasRef = useRef<HTMLCanvasElement | null>(null);\n  const hoveredCellRef = useRef<HeatmapCellId | null>(null);\n  const canvasTooltipRef = useRef<PlotTooltipHandle<AnyBin>>(null);\n  const drawRafRef = useRef<number | null>(null);\n  // The entry animation in progress, cleared once the cells in view have come to rest.\n  const entryRef = useRef<{ type: AnimationType; startedAt: number; scrollLeft: number } | null>(null);\n\n  useEffect(() => () => {\n    if (drawRafRef.current != null) cancelAnimationFrame(drawRafRef.current);\n  }, []);\n\n  // Painted imperatively rather than through state, so scrolling never waits on a React render.\n  // Returns whether cells are still animating in.\n  const drawCanvas = useCallback((): boolean => {\n    const canvas = canvasRef.current;\n    const main = mainPaneRef.current;\n    if (!canvas || !main) return false;\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) return false;\n    const dpr = window.devicePixelRatio || 1;\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n    ctx.clearRect(0, 0, viewportWidth, viewportHeight);\n    const range = getVisibleRange(canvasCellParams, main.scrollLeft, main.scrollTop, viewportWidth, viewportHeight, GRID_OVERSCAN_CELLS);\n    ctx.translate(-main.scrollLeft, -main.scrollTop);\n    const entry = entryRef.current;\n    const isEntering = drawHeatmapCells(\n      ctx,\n      canvasCellParams,\n      range,\n      hoveredCellRef.current,\n      entry && {\n        type: entry.type,\n        elapsed: (performance.now() - entry.startedAt) / 1000,\n        firstColumn: Math.floor(entry.scrollLeft / canvasCellParams.binWidth),\n      }\n    );\n    if (!isEntering) entryRef.current = null;\n    return isEntering;\n  }, [canvasCellParams, viewportWidth, viewportHeight]);\n\n  useEffect(() => {\n    drawCanvas();\n  }, [drawCanvas]);\n\n  // So the animation carries on through redraws for other reasons (a highlight sweep, a new\n  // selection) rather than starting over.\n  const drawLatest = useStableCallback(drawCanvas);\n\n  // Plays on mount and whenever animationType changes.\n  useEffect(() => {\n    const main = mainPaneRef.current;\n    // Nothing to start or cut short.\n    if (!main || (!animationType && !entryRef.current)) return;\n    entryRef.current = animationType ? { type: animationType, startedAt: performance.now(), scrollLeft: main.scrollLeft } : null;\n    let frame = 0;\n    const step = () => {\n      if (drawLatest()) frame = requestAnimationFrame(step);\n    };\n    step();\n    return () => cancelAnimationFrame(frame);\n  }, [animationType, drawLatest]);\n\n  const [axisScrollPos, setAxisScrollPos] = useState({ left: 0, top: 0 });\n  const setMainPaneNode = useCallback((node: HTMLDivElement | null) => {\n    mainPaneRef.current = node;\n    if (node) setAxisScrollPos({ left: node.scrollLeft, top: node.scrollTop });\n  }, []);\n\n  const axisVisibleRange = useMemo(\n    () => getVisibleRange(canvasCellParams, axisScrollPos.left, axisScrollPos.top, viewportWidth, viewportHeight, GRID_OVERSCAN_CELLS),\n    [canvasCellParams, axisScrollPos.left, axisScrollPos.top, viewportWidth, viewportHeight]\n  );\n  const visibleXTickValues = useMemo(\n    () => xTickValues.slice(axisVisibleRange.colStart, axisVisibleRange.colEnd + 1),\n    [xTickValues, axisVisibleRange.colStart, axisVisibleRange.colEnd]\n  );\n  const visibleYTickValues = useMemo(\n    () => yTickValues.slice(axisVisibleRange.rowStart, axisVisibleRange.rowEnd + 1),\n    [yTickValues, axisVisibleRange.rowStart, axisVisibleRange.rowEnd]\n  );\n\n  const handleGridScroll = useCallback(() => {\n    const main = mainPaneRef.current;\n    if (!main) return;\n    // Scrolling ends the animation: cells scrolled to would otherwise sit blank until the sweep reached them.\n    entryRef.current = null;\n    if (drawRafRef.current != null) return;\n    drawRafRef.current = requestAnimationFrame(() => {\n      drawRafRef.current = null;\n      drawCanvas();\n      setAxisScrollPos({ left: main.scrollLeft, top: main.scrollTop });\n    });\n  }, [drawCanvas]);\n\n  const cellAt = useCallback((event: React.MouseEvent<HTMLCanvasElement>) => {\n    const main = mainPaneRef.current;\n    if (!main) return null;\n    return hitTestCell(canvasCellParams, event.nativeEvent.offsetX + main.scrollLeft, event.nativeEvent.offsetY + main.scrollTop);\n  }, [canvasCellParams]);\n\n  const handleCanvasMouseMove = useCallback((event: React.MouseEvent<HTMLCanvasElement>) => {\n    const cell = cellAt(event);\n    // A pointer over any cell, null ones included: they have a tooltip too.\n    event.currentTarget.style.cursor = cell ? \"pointer\" : \"default\";\n    const prev = hoveredCellRef.current;\n    if (prev?.row !== cell?.row || prev?.column !== cell?.column) {\n      hoveredCellRef.current = cell;\n      drawCanvas();\n    }\n    if (cell) {\n      const bin = buildBin(canvasCellParams, cell);\n      if (bin) canvasTooltipRef.current?.show(bin, event);\n    } else {\n      canvasTooltipRef.current?.hide();\n    }\n  }, [canvasCellParams, cellAt, drawCanvas]);\n\n  const handleCanvasMouseLeave = useCallback((event: React.MouseEvent<HTMLCanvasElement>) => {\n    event.currentTarget.style.cursor = \"default\";\n    if (hoveredCellRef.current) {\n      hoveredCellRef.current = null;\n      drawCanvas();\n    }\n    canvasTooltipRef.current?.hide();\n  }, [drawCanvas]);\n\n  const handleCanvasClick = useCallback((event: React.MouseEvent<HTMLCanvasElement>) => {\n    if (!onClick) return;\n    const cell = cellAt(event);\n    const bin = cell && buildBin(canvasCellParams, cell);\n    if (bin) onClick(bin);\n  }, [canvasCellParams, cellAt, onClick]);\n\n  return {\n    canvasRef, mainPaneRef, canvasTooltipRef, setMainPaneNode, handleGridScroll, axisScrollPos,\n    visibleXTickValues, visibleYTickValues,\n    canvasHandlers: {\n      onMouseMove: handleCanvasMouseMove,\n      onMouseLeave: handleCanvasMouseLeave,\n      onClick: handleCanvasClick,\n    },\n  };\n}\n"],"names":["GRID_OVERSCAN_CELLS","useHeatmapCanvasGrid","canvasCellParams","viewportWidth","viewportHeight","xTickValues","yTickValues","onClick","animationType","mainPaneRef","useRef","canvasRef","hoveredCellRef","canvasTooltipRef","drawRafRef","entryRef","useEffect","current","cancelAnimationFrame","drawCanvas","useCallback","canvas","main","ctx","getContext","dpr","window","devicePixelRatio","setTransform","clearRect","range","getVisibleRange","scrollLeft","scrollTop","translate","entry","isEntering","drawHeatmapCells","type","elapsed","performance","now","startedAt","firstColumn","Math","floor","binWidth","drawLatest","useStableCallback","frame","step","requestAnimationFrame","axisScrollPos","setAxisScrollPos","useState","left","top","setMainPaneNode","node","axisVisibleRange","useMemo","visibleXTickValues","slice","colStart","colEnd","visibleYTickValues","rowStart","rowEnd","handleGridScroll","cellAt","event","hitTestCell","nativeEvent","offsetX","offsetY","handleCanvasMouseMove","cell","currentTarget","style","cursor","prev","row","column","bin","buildBin","show","hide","handleCanvasMouseLeave","handleCanvasClick","canvasHandlers","onMouseMove","onMouseLeave"],"mappings":"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"}

package/dist/visualization.es118.js

@@ -1,17 +1,40 @@
-import { jsx as e } from "react/jsx-runtime";
-import { useBranchLengthTransition as m } from "./visualization.es7.js";
-import { memo as s } from "react";
-import { motion as a } from "./visualization.es29.js";
-const k = s(function({
-  useBranchLengths: n,
-  color: i,
-  baseLeafLinkExtension: o,
-  scaledLeafLinkExtension: t,
-  strokeWidth: r
-}) {
-  return /* @__PURE__ */ e(a.line, { strokeWidth: r, initial: !1, animate: n ? t : o, stroke: i, transition: m });
-});
+import { c as T } from "react/compiler-runtime";
+import { useRef as _, useEffect as v } from "react";
+import { cellKey as R } from "./visualization.es112.js";
+function w(f, e, l, t) {
+  return t - l > e || l < f ? l : t > f + e ? t - e : f;
+}
+function O(f) {
+  const e = T(12), {
+    mainPaneRef: l,
+    selectedCells: t,
+    scrollToSelection: n,
+    binWidth: o,
+    viewportWidth: c
+  } = f;
+  let i;
+  e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (i = /* @__PURE__ */ new Set(), e[0] = i) : i = e[0];
+  const p = _(i);
+  let r;
+  e[1] !== o || e[2] !== l || e[3] !== n || e[4] !== t || e[5] !== c ? (r = () => {
+    const g = p.current, y = t ?? [], C = y.filter((s) => !g.has(R(s)));
+    p.current = new Set(y.map(R));
+    const u = l.current;
+    if (!n || !u || C.length === 0)
+      return;
+    let a = 1 / 0, h = -1 / 0;
+    for (const s of C)
+      s.column < a && (a = s.column), s.column > h && (h = s.column);
+    const K = a * o, S = (h + 1) * o, L = w(u.scrollLeft, c, K, S);
+    L !== u.scrollLeft && u.scrollTo({
+      left: L,
+      behavior: "smooth"
+    });
+  }, e[1] = o, e[2] = l, e[3] = n, e[4] = t, e[5] = c, e[6] = r) : r = e[6];
+  let m;
+  e[7] !== o || e[8] !== n || e[9] !== t || e[10] !== c ? (m = [t, n, o, c], e[7] = o, e[8] = n, e[9] = t, e[10] = c, e[11] = m) : m = e[11], v(r, m);
+}
 export {
-  k as LeafLinkExtension
+  O as useScrollToSelection
 };
 //# sourceMappingURL=visualization.es118.js.map

package/dist/visualization.es118.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es118.js","sources":["../src/components/PhyloTree/LeafLinkExtension.tsx"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { useBranchLengthTransition } from \"./PhyloTree\";\nimport { memo } from \"react\";\nimport { TreeNode } from \"./types\";\n\n\nexport type LeafLinkExtensionProps = {\n  baseLeafLinkExtension: TreeNode[\"baseLeafLinkExtension\"]\n  scaledLeafLinkExtension: TreeNode[\"scaledLeafLinkExtension\"]\n  color: TreeNode[\"color\"];\n  strokeWidth: TreeNode[\"linkStrokeWidth\"]\n  useBranchLengths: boolean\n};\n\nexport const LeafLinkExtension = memo(function LinkExtension({\n  useBranchLengths,\n  color,\n  baseLeafLinkExtension,\n  scaledLeafLinkExtension,\n  strokeWidth\n}: LeafLinkExtensionProps) {\n\n  return (\n    <motion.line\n      strokeWidth={strokeWidth}\n      initial={false}\n      animate={useBranchLengths ? scaledLeafLinkExtension : baseLeafLinkExtension}\n      stroke={color}\n      transition={useBranchLengthTransition}\n    />\n  );\n});\n"],"names":["LeafLinkExtension","memo","useBranchLengths","color","baseLeafLinkExtension","scaledLeafLinkExtension","strokeWidth","jsx","motion","useBranchLengthTransition"],"mappings":";;;;AAcO,MAAMA,IAAoBC,EAAK,SAAuB;AAAA,EAC3DC,kBAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,uBAAAA;AAAAA,EACAC,yBAAAA;AAAAA,EACAC,aAAAA;AACsB,GAAG;AAEzB,SACE,gBAAAC,EAACC,EAAO,MAAP,EACC,aAAAF,GACA,SAAS,IACT,SAASJ,IAAmBG,IAA0BD,GACtD,QAAQD,GACR,YAAYM,GAA0B;AAG5C,CAAC;"}
+{"version":3,"file":"visualization.es118.js","sources":["../src/components/Heatmap/hooks/useScrollToSelection.ts"],"sourcesContent":["import { useEffect, useRef, type RefObject } from \"react\";\nimport type { HeatmapCellId } from \"../types\";\nimport { cellKey } from \"../heatmapSelection\";\n\n// The smallest scroll that brings [boxStart, boxEnd) into view, as scrollIntoView({ block: \"nearest\" })\n// would: unchanged if it's already visible, aligned to boxStart if it can't fit.\nfunction nearestScrollOffset(current: number, viewportSize: number, boxStart: number, boxEnd: number): number {\n  if (boxEnd - boxStart > viewportSize) return boxStart;\n  if (boxStart < current) return boxStart;\n  if (boxEnd > current + viewportSize) return boxEnd - viewportSize;\n  return current;\n}\n\nexport interface UseScrollToSelectionArgs {\n  mainPaneRef: RefObject<HTMLDivElement | null>;\n  selectedCells?: HeatmapCellId[];\n  scrollToSelection?: boolean;\n  binWidth: number;\n  viewportWidth: number;\n}\n\n// Scrolls newly selected cells into view, horizontally.\nexport function useScrollToSelection({\n  mainPaneRef, selectedCells, scrollToSelection, binWidth, viewportWidth,\n}: UseScrollToSelectionArgs) {\n  const previousSelectionKeysRef = useRef<Set<string>>(new Set());\n\n  useEffect(() => {\n    const previousKeys = previousSelectionKeysRef.current;\n    const cells = selectedCells ?? [];\n    const newCells = cells.filter((cell) => !previousKeys.has(cellKey(cell)));\n    previousSelectionKeysRef.current = new Set(cells.map(cellKey));\n\n    const main = mainPaneRef.current;\n    if (!scrollToSelection || !main || newCells.length === 0) return;\n\n    let minCol = Infinity, maxCol = -Infinity;\n    for (const cell of newCells) {\n      if (cell.column < minCol) minCol = cell.column;\n      if (cell.column > maxCol) maxCol = cell.column;\n    }\n\n    const boxLeft = minCol * binWidth;\n    const boxRight = (maxCol + 1) * binWidth;\n\n    const targetLeft = nearestScrollOffset(main.scrollLeft, viewportWidth, boxLeft, boxRight);\n    if (targetLeft !== main.scrollLeft) {\n      main.scrollTo({ left: targetLeft, behavior: \"smooth\" });\n    }\n  }, [selectedCells, scrollToSelection, binWidth, viewportWidth]);\n}\n"],"names":["nearestScrollOffset","current","viewportSize","boxStart","boxEnd","useScrollToSelection","t0","$","_c","mainPaneRef","selectedCells","scrollToSelection","binWidth","viewportWidth","t1","Symbol","for","Set","previousSelectionKeysRef","useRef","t2","previousKeys","cells","newCells","filter","cell","has","cellKey","map","main","length","minCol","Infinity","maxCol","cell_0","column","boxLeft","boxRight","targetLeft","scrollLeft","scrollTo","left","behavior","t3","useEffect"],"mappings":";;;AAMA,SAASA,EAAoBC,GAAiBC,GAAsBC,GAAkBC,GAAwB;AAE5G,SADIA,IAASD,IAAWD,KACpBC,IAAWF,IAAgBE,IAC3BC,IAASH,IAAUC,IAAqBE,IAASF,IAC9CD;AACT;AAWO,SAAAI,EAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAA,EAAA,GAA8B;AAAA,IAAAC,aAAAA;AAAAA,IAAAC,eAAAA;AAAAA,IAAAC,mBAAAA;AAAAA,IAAAC,UAAAA;AAAAA,IAAAC,eAAAA;AAAAA,EAAAA,IAAAP;AAEV,MAAAQ;AAAA,EAAAP,EAAA,CAAA,MAAAQ,uBAAAC,IAAA,2BAAA,KAC4BF,wBAAIG,IAAAA,GAAKV,OAAAO,KAAAA,IAAAP,EAAA,CAAA;AAA9D,QAAAW,IAAiCC,EAAoBL,CAAS;AAAE,MAAAM;AAAA,EAAAb,EAAA,CAAA,MAAAK,KAAAL,EAAA,CAAA,MAAAE,KAAAF,EAAA,CAAA,MAAAI,KAAAJ,EAAA,CAAA,MAAAG,KAAAH,SAAAM,KAEtDO,IAAAA,MAAA;AACR,UAAAC,IAAqBH,EAAwBjB,SAC7CqB,IAAcZ,KAAA,CAAA,GACda,IAAiBD,EAAKE,OAAQC,CAAAA,MAAU,CAACJ,EAAYK,IAAKC,EAAQF,CAAI,CAAC,CAAC;AACxEP,IAAAA,EAAwBjB,UAAW,IAAIgB,IAAIK,EAAKM,IAAKD,CAAO,CAAC;AAE7D,UAAAE,IAAapB,EAAWR;AACxB,QAAI,CAACU,KAAD,CAAuBkB,KAAQN,EAAQO,WAAY;AAAC;AAExD,QAAAC,IAAaC,OAAbC,IAAgC;AAChC,eAAKC,KAAcX;AACjB,MAAIE,EAAIU,SAAUJ,MAAQA,IAASN,EAAIU,SACnCV,EAAIU,SAAUF,MAAQA,IAASR,EAAIU;AAGzC,UAAAC,IAAgBL,IAASnB,GACzByB,KAAkBJ,IAAS,KAAKrB,GAEhC0B,IAAmBtC,EAAoB6B,EAAIU,YAAa1B,GAAeuB,GAASC,CAAQ;AACxF,IAAIC,MAAeT,EAAIU,cACrBV,EAAIW,SAAU;AAAA,MAAAC,MAAQH;AAAAA,MAAUI,UAAY;AAAA,IAAA,CAAU;AAAA,EACvD,GACFnC,OAAAK,GAAAL,OAAAE,GAAAF,OAAAI,GAAAJ,OAAAG,GAAAH,OAAAM,GAAAN,OAAAa,KAAAA,IAAAb,EAAA,CAAA;AAAA,MAAAoC;AAAA,EAAApC,EAAA,CAAA,MAAAK,KAAAL,EAAA,CAAA,MAAAI,KAAAJ,EAAA,CAAA,MAAAG,KAAAH,UAAAM,KAAE8B,IAAA,CAACjC,GAAeC,GAAmBC,GAAUC,CAAa,GAACN,OAAAK,GAAAL,OAAAI,GAAAJ,OAAAG,GAAAH,QAAAM,GAAAN,QAAAoC,KAAAA,IAAApC,EAAA,EAAA,GAtB9DqC,EAAUxB,GAsBPuB,CAA2D;AAAC;"}

package/dist/visualization.es119.js

@@ -1,29 +1,29 @@
-import { jsx as u, jsxs as k } from "react/jsx-runtime";
-import { c as g } from "react/compiler-runtime";
-import { memo as j } from "react";
-import O from "./visualization.es28.js";
-const F = j(function(L) {
-  const t = g(16), {
-    nodeX: N,
-    color: e,
-    baseNodeX: f,
-    baseNodeY: i,
-    label: a,
-    fontSize: n,
-    fontFamily: c,
-    strokeWidth: m
-  } = L, s = N * 180 / Math.PI - 90, d = s > 90 || s < -90, $ = d ? s + 180 : s, p = d ? "end" : "start", x = d ? -6 : 6, b = `rotate(${$}) translate(0, ${(n ?? 2.4) / 3})`, h = a === "Human" ? `${a} ★★★` : a;
+import { jsx as h, jsxs as g, Fragment as p } from "react/jsx-runtime";
+import { c as v } from "react/compiler-runtime";
+import { measureTextWidth as y } from "./visualization.es120.js";
+const A = (m) => {
+  const t = v(12), {
+    cx: u,
+    cy: x,
+    value: W,
+    color: r,
+    align: a
+  } = m, s = `${W}`, i = y(s, 12, "sans-serif") + 12;
+  let e = u;
+  a === "start" && (e = e + i / 2), a === "end" && (e = e - i / 2);
+  const c = e - i / 2, d = x - 10.8;
   let o;
-  t[0] !== e || t[1] !== c || t[2] !== n || t[3] !== m || t[4] !== b || t[5] !== h || t[6] !== p || t[7] !== x ? (o = /* @__PURE__ */ u("text", { fontSize: n, fontFamily: c, fill: e, stroke: e, strokeWidth: m, paintOrder: "stroke", transform: b, textAnchor: p, x, children: h }), t[0] = e, t[1] = c, t[2] = n, t[3] = m, t[4] = b, t[5] = h, t[6] = p, t[7] = x, t[8] = o) : o = t[8];
-  let r;
-  t[9] !== e ? (r = /* @__PURE__ */ u("circle", { r: 1.5, fill: e }), t[9] = e, t[10] = r) : r = t[10];
+  t[0] !== r || t[1] !== i || t[2] !== c || t[3] !== d ? (o = /* @__PURE__ */ h("rect", { x: c, y: d, width: i, height: 21.6, rx: 10.8, fill: r }), t[0] = r, t[1] = i, t[2] = c, t[3] = d, t[4] = o) : o = t[4];
+  const f = x + 1;
   let l;
-  return t[11] !== f || t[12] !== i || t[13] !== o || t[14] !== r ? (l = /* @__PURE__ */ k(O, { top: i, left: f, children: [
+  t[5] !== f || t[6] !== s || t[7] !== e ? (l = /* @__PURE__ */ h("text", { x: e, y: f, textAnchor: "middle", dominantBaseline: "middle", fill: "white", fontSize: 12, fontWeight: 500, children: s }), t[5] = f, t[6] = s, t[7] = e, t[8] = l) : l = t[8];
+  let n;
+  return t[9] !== o || t[10] !== l ? (n = /* @__PURE__ */ g(p, { children: [
     o,
-    r
-  ] }), t[11] = f, t[12] = i, t[13] = o, t[14] = r, t[15] = l) : l = t[15], l;
-});
+    l
+  ] }), t[9] = o, t[10] = l, t[11] = n) : n = t[11], n;
+};
 export {
-  F as LeafNodeLabel
+  A as default
 };
 //# sourceMappingURL=visualization.es119.js.map

package/dist/visualization.es119.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es119.js","sources":["../src/components/PhyloTree/LeafNodeLabel.tsx"],"sourcesContent":["import { PhyloTreeProps, TreeNode } from \"./types\";\nimport { Group } from \"@visx/group\";\nimport { memo } from \"react\";\n\n\nexport type LeafNodeLabelProps = {\n  // node.x is the angle the node is at in radial layout while base/scaled are true x/y position in svg\n  nodeX: number;\n  baseNodeX: TreeNode[\"baseNodeX\"];\n  baseNodeY: TreeNode[\"baseNodeY\"];\n  label: TreeNode[\"label\"];\n  color: TreeNode[\"color\"];\n  fontSize: PhyloTreeProps[\"leafFontSize\"];\n  fontFamily: PhyloTreeProps[\"leafFontFamily\"];\n  strokeWidth: TreeNode[\"labelStrokeWidth\"]\n};\n\nexport const LeafNodeLabel = memo(function LeafNodeLabel({\n  nodeX,\n  color,\n  baseNodeX,\n  baseNodeY,\n  label,\n  fontSize,\n  fontFamily,\n  strokeWidth\n}: LeafNodeLabelProps) {\n  const angleDeg = (nodeX * 180) / Math.PI - 90;\n  const flip = angleDeg > 90 || angleDeg < -90;\n  const rotation = flip ? angleDeg + 180 : angleDeg;\n  const textAnchor: \"start\" | \"end\" = flip ? \"end\" : \"start\";\n  const xOffset = flip ? -6 : 6;\n\n  return (\n    <Group\n      top={baseNodeY}\n      left={baseNodeX}\n    >\n      <text\n        fontSize={fontSize}\n        fontFamily={fontFamily}\n        fill={color}\n        stroke={color}\n        strokeWidth={strokeWidth}\n        paintOrder=\"stroke\"\n        transform={`rotate(${rotation}) translate(0, ${(fontSize ?? 2.4) / 3})`}\n        textAnchor={textAnchor}\n        x={xOffset}\n      >\n        {label === \"Human\" ? `${label} \\u2605\\u2605\\u2605` : label}\n      </text>\n      <circle\n        r={1.5}\n        fill={color}\n      />\n    </Group>\n  );\n});\n"],"names":["LeafNodeLabel","memo","t0","$","_c","nodeX","color","baseNodeX","baseNodeY","label","fontSize","fontFamily","strokeWidth","angleDeg","Math","PI","flip","rotation","textAnchor","xOffset","t1","t2","t3","t4","jsx","t5","jsxs","Group"],"mappings":";;;;AAiBO,MAAMA,IAAgBC,EAAK,SAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAA,EAAA,GAAuB;AAAA,IAAAC,OAAAA;AAAAA,IAAAC,OAAAA;AAAAA,IAAAC,WAAAA;AAAAA,IAAAC,WAAAA;AAAAA,IAAAC,OAAAA;AAAAA,IAAAC,UAAAA;AAAAA,IAAAC,YAAAA;AAAAA,IAAAC,aAAAA;AAAAA,EAAAA,IAAAV,GAUvDW,IAAkBR,IAAQ,MAAOS,KAAIC,KAAM,IAC3CC,IAAaH,IAAW,MAAMA,IAAW,KACzCI,IAAiBD,IAAOH,IAAW,MAAlBA,GACjBK,IAAoCF,IAAA,QAAA,SACpCG,IAAgBH,IAAA,KAAA,GAcCI,IAAA,UAAUH,CAAQ,mBAAmBP,KAAA,OAAmB,CAAC,KAInEW,IAAAZ,MAAU,UAAV,GAAuBA,CAAK,SAA5BA;AAAyD,MAAAa;AAAA,EAAAnB,EAAA,CAAA,MAAAG,KAAAH,EAAA,CAAA,MAAAQ,KAAAR,EAAA,CAAA,MAAAO,KAAAP,EAAA,CAAA,MAAAS,KAAAT,EAAA,CAAA,MAAAiB,KAAAjB,EAAA,CAAA,MAAAkB,KAAAlB,EAAA,CAAA,MAAAe,KAAAf,SAAAgB,KAX5DG,sBAAA,QAAA,EACYZ,UAAAA,GACEC,YAAAA,GACNL,MAAAA,GACEA,QAAAA,GACKM,aAAAA,GACF,YAAA,UACA,WAAAQ,GACCF,YAAAA,GACTC,GAEFE,UAAAA,GACH,GAAOlB,OAAAG,GAAAH,OAAAQ,GAAAR,OAAAO,GAAAP,OAAAS,GAAAT,OAAAiB,GAAAjB,OAAAkB,GAAAlB,OAAAe,GAAAf,OAAAgB,GAAAhB,OAAAmB,KAAAA,IAAAnB,EAAA,CAAA;AAAA,MAAAoB;AAAA,EAAApB,SAAAG,KACPiB,IAAA,gBAAAC,EAAA,UAAA,EACK,GAAA,KACGlB,MAAAA,GAAK,GACXH,OAAAG,GAAAH,QAAAoB,KAAAA,IAAApB,EAAA,EAAA;AAAA,MAAAsB;AAAA,SAAAtB,EAAA,EAAA,MAAAI,KAAAJ,EAAA,EAAA,MAAAK,KAAAL,EAAA,EAAA,MAAAmB,KAAAnB,UAAAoB,KApBJE,IAAA,gBAAAC,EAACC,GAAA,EACMnB,KAAAA,GACCD,SAENe,UAAAA;AAAAA,IAAAA;AAAAA,IAaAC;AAAAA,EAAAA,GAIF,GAAQpB,QAAAI,GAAAJ,QAAAK,GAAAL,QAAAmB,GAAAnB,QAAAoB,GAAApB,QAAAsB,KAAAA,IAAAtB,EAAA,EAAA,GArBRsB;AAqBQ,CAEX;"}
+{"version":3,"file":"visualization.es119.js","sources":["../src/components/TreeMap/ValueOval.tsx"],"sourcesContent":["import { ValueOvalProps } from \"./types\";\nimport { measureTextWidth } from \"./helpers\";\n\nconst ValueOval: React.FC<ValueOvalProps> = ({ cx, cy, value, color, align }) => {\n    const fontSize = 12;\n    const text = `${value}`;\n    const textWidth = measureTextWidth(text, fontSize, \"sans-serif\");\n    const padding = 6;\n    const ovalWidth = textWidth + padding * 2;\n    const ovalHeight = fontSize * 1.8;\n\n    let xPos = cx;\n    if (align === \"start\") xPos += ovalWidth / 2;\n    if (align === \"end\") xPos -= ovalWidth / 2;\n\n    return (\n        <>\n            <rect\n                x={xPos - ovalWidth / 2}\n                y={cy - ovalHeight / 2}\n                width={ovalWidth}\n                height={ovalHeight}\n                rx={ovalHeight / 2}\n                fill={color}\n            />\n            <text\n                x={xPos}\n                y={cy + 1}\n                textAnchor=\"middle\"\n                dominantBaseline=\"middle\"\n                fill=\"white\"\n                fontSize={fontSize}\n                fontWeight={500}\n            >\n                {text}\n            </text>\n        </>\n    );\n};\n\nexport default ValueOval;"],"names":["ValueOval","t0","$","_c","cx","cy","value","color","align","text","ovalWidth","measureTextWidth","xPos","t1","t2","t3","jsx","ovalHeight","t4","t5","fontSize","t6"],"mappings":";;;AAGA,MAAMA,IAAsCC,CAAAA,MAAA;AAAA,QAAAC,IAAAC,EAAA,EAAA,GAAC;AAAA,IAAAC,IAAAA;AAAAA,IAAAC,IAAAA;AAAAA,IAAAC,OAAAA;AAAAA,IAAAC,OAAAA;AAAAA,IAAAC,OAAAA;AAAAA,EAAAA,IAAAP,GAEzCQ,IAAa,GAAGH,CAAK,IAGrBI,IAFkBC,EAAiBF,GAFlB,IAEkC,YAAY,IAEjC;AAG9B,MAAAG,IAAWR;AACX,EAAII,MAAU,YAASI,IAAAA,IAAQF,IAAY,IACvCF,MAAU,UAAOI,IAAAA,IAAQF,IAAY;AAK1B,QAAAG,IAAAD,IAAOF,IAAY,GACnBI,IAAAT,IAAK;AAAc,MAAAU;AAAA,EAAAb,EAAA,CAAA,MAAAK,KAAAL,EAAA,CAAA,MAAAQ,KAAAR,EAAA,CAAA,MAAAW,KAAAX,SAAAY,KAF1BC,IAAA,gBAAAC,EAAA,QAAA,EACO,GAAAH,GACA,GAAAC,GACIJ,OAAAA,GACCO,QAZDA,MAaH,IAAA,MACEV,MAAAA,GAAK,GACbL,OAAAK,GAAAL,OAAAQ,GAAAR,OAAAW,GAAAX,OAAAY,GAAAZ,OAAAa,KAAAA,IAAAb,EAAA,CAAA;AAGK,QAAAgB,IAAAb,IAAK;AAAC,MAAAc;AAAA,EAAAjB,EAAA,CAAA,MAAAgB,KAAAhB,SAAAO,KAAAP,EAAA,CAAA,MAAAU,KAFbO,gCACOP,GAAAA,GACA,GAAAM,GACQ,YAAA,UACM,kBAAA,UACZ,MAAA,SACKE,UA3BLA,IA4BO,YAAA,KAEXX,UAAAA,GACL,GAAOP,OAAAgB,GAAAhB,OAAAO,GAAAP,OAAAU,GAAAV,OAAAiB,KAAAA,IAAAjB,EAAA,CAAA;AAAA,MAAAmB;AAAA,SAAAnB,EAAA,CAAA,MAAAa,KAAAb,UAAAiB,KAnBXE,2BACIN,UAAAA;AAAAA,IAAAA;AAAAA,IAQAI;AAAAA,EAAAA,GAUO,GACRjB,OAAAa,GAAAb,QAAAiB,GAAAjB,QAAAmB,KAAAA,IAAAnB,EAAA,EAAA,GApBHmB;AAoBG;"}