@weng-lab/visualization 2.5.0 → 2.5.1

package/dist/visualization.es118.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es118.js","sources":["../src/components/Graph/Legend.tsx"],"sourcesContent":["import React from 'react';\nimport Checkbox from '@mui/material/Checkbox';\nimport { Node, Edge } from './types';\nimport { Typography } from '@mui/material';\n\ninterface LegendProps {\n  toggles: { [key: string]: boolean };\n  onToggle: (category: string) => void;\n  simpleCategories: string[];\n  edgeType: boolean;\n  colorFunc?: (node: Node | Edge) => string;\n  elements: Node[];\n  edges: Edge[];\n  legendToggle?: (node: Node | Edge) => string;\n  legendNodeLabel?: string;\n  legendEdgeLabel?: string;\n  order?: string[];\n  uniqueCat?: string[];\n}\n\nconst Legend: React.FC<LegendProps> = ({\n  toggles,\n  onToggle,\n  simpleCategories,\n  edgeType,\n  colorFunc,\n  elements,\n  edges,\n  legendToggle,\n  legendNodeLabel,\n  legendEdgeLabel,\n  order,\n  uniqueCat,\n}) => {\n  const edgeTypes = Array.from(\n    new Set(\n      edges.map((e) => {\n        if (legendToggle) return legendToggle(e);\n        else if (e.category) {\n          return e.category;\n        } else {\n          return;\n        }\n      })\n    )\n  );\n\n  const uniqueCategories = order\n    ? order\n    : Array.from(new Set(simpleCategories)); // simple names\n\n  // loop on uniqueCat if there is order, else loop on uniqueCategories\n  return (\n    <div\n      style={{\n        bottom: '10px',\n        zIndex: 1000,\n        backgroundColor: 'white',\n        borderRadius: '5px',\n        width: '225px',\n        padding: '5px',\n      }}\n    >\n      <Typography\n        style={{ fontSize: '18px', margin: '3px', fontFamily: 'Arial' }}\n      >\n        {legendNodeLabel ? legendNodeLabel : 'Node Type'}\n      </Typography>\n      {uniqueCat\n        ? uniqueCat.map((category) => {\n            let color = 'grey';\n            let simpleDisplay = '';\n\n            elements.forEach((node) => {\n              uniqueCategories.forEach((cat) => {\n                if (\n                  colorFunc &&\n                  legendToggle &&\n                  legendToggle(node) === cat &&\n                  node.category === category\n                ) {\n                  color = colorFunc(node);\n                  simpleDisplay = cat; // simple display category name if legend toggle\n                  return;\n                }\n              });\n            });\n            return (\n              <div\n                key={category}\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  marginBottom: '4px',\n                }}\n              >\n                <Checkbox\n                  checked={toggles[category]}\n                  onChange={() => onToggle(category)}\n                  color=\"primary\"\n                  size=\"small\"\n                  style={{ padding: 0 }}\n                />\n                <Typography\n                  variant=\"body2\"\n                  style={{\n                    color: color,\n                    marginLeft: '4px',\n                    cursor: 'pointer',\n                    fontSize: '14px',\n                    fontFamily: 'Arial',\n                  }}\n                  onClick={() => onToggle(category)}\n                >\n                  {simpleDisplay} {legendToggle ? '(' : null}\n                  {legendToggle ? category : null}\n                  {legendToggle ? ')' : null}\n                </Typography>\n              </div>\n            );\n          })\n        : uniqueCategories.map((category) => {\n            let color = 'grey';\n            let nodeCat = '';\n\n            elements.forEach((node) => {\n              if (\n                colorFunc &&\n                legendToggle &&\n                legendToggle(node) === category\n              ) {\n                color = colorFunc(node);\n                nodeCat = node.category; // category of node\n              }\n            });\n\n            return (\n              <div\n                key={category}\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  marginBottom: '4px',\n                }}\n              >\n                <Checkbox\n                  checked={toggles[category]}\n                  onChange={() => onToggle(category)}\n                  color=\"primary\"\n                  size=\"small\"\n                  style={{ padding: 0 }}\n                />\n                <Typography\n                  variant=\"body2\"\n                  style={{\n                    color: color,\n                    marginLeft: '4px',\n                    cursor: 'pointer',\n                    fontSize: '14px',\n                    fontFamily: 'Arial',\n                  }}\n                  onClick={() => onToggle(category)}\n                >\n                  {category} {legendToggle ? '(' : null}\n                  {legendToggle ? nodeCat : null}\n                  {legendToggle ? ')' : null}\n                </Typography>\n              </div>\n            );\n          })}\n\n      {edgeType && edgeTypes !== null ? (\n        <div>\n          <Typography\n            style={{ fontSize: '18px', margin: '3px', fontFamily: 'Arial' }}\n          >\n            {legendEdgeLabel ? legendEdgeLabel : 'Edge Type'}\n          </Typography>\n          {edgeTypes.map((category) => {\n            if (category === undefined) {\n              return null;\n            }\n            let color = 'grey';\n\n            edges.forEach((edge) => {\n              if (\n                colorFunc &&\n                legendToggle &&\n                legendToggle(edge) === category\n              ) {\n                color = colorFunc(edge);\n              } else if (\n                colorFunc &&\n                edge.category &&\n                edge.category === category\n              ) {\n                color = colorFunc(edge);\n              }\n            });\n\n            return (\n              <div\n                key={category}\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                }}\n              >\n                <Checkbox\n                  checked={toggles[category]}\n                  onChange={() => onToggle(category)}\n                  color=\"primary\"\n                  size=\"small\"\n                  style={{ padding: 0 }}\n                />\n                <Typography\n                  variant=\"body2\"\n                  style={{\n                    color: color,\n                    marginLeft: '4px',\n                    cursor: 'pointer',\n                    fontSize: '14px',\n                    fontFamily: 'Arial',\n                  }}\n                  onClick={() => onToggle(category)}\n                >\n                  {category}\n                </Typography>\n              </div>\n            );\n          })}\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Legend;\n"],"names":["Legend","t0","$","_c","toggles","onToggle","simpleCategories","edgeType","colorFunc","elements","edges","legendToggle","legendNodeLabel","legendEdgeLabel","order","uniqueCat","t1","t2","e","category","Array","from","Set","map","edgeTypes","uniqueCategories","t3","Symbol","for","bottom","zIndex","backgroundColor","borderRadius","width","padding","t4","fontSize","margin","fontFamily","t5","t6","jsx","Typography","t7","color","simpleDisplay","forEach","node","cat","jsxs","display","alignItems","marginBottom","Checkbox","marginLeft","cursor","category_0","color_0","nodeCat","node_0","t8","category_1","undefined","color_1","edge","t9"],"mappings":"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"}
+{"version":3,"file":"visualization.es118.js","sources":["../src/components/Heatmap/hooks/useHeatmapCanvasGrid.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { HeatmapCellId } from \"../types\";\nimport type { AnyBin } from \"../HeatmapCells\";\nimport type { PlotTooltipHandle } from \"../../../tooltip\";\nimport { drawHeatmapCells, getVisibleRange, hitTestCell, buildBin, type CanvasCellParams } from \"../HeatmapCanvasCells\";\n\n// Extra rows/columns painted/rendered just beyond the visible viewport in scrollable mode, so a\n// cell or tick label is already there before it scrolls into view rather than popping in late.\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  isScrollable: boolean;\n  onClick?: (bin: AnyBin) => void;\n}\n\nexport function useHeatmapCanvasGrid({\n  canvasCellParams, viewportWidth, viewportHeight, xTickValues, yTickValues, isScrollable, onClick,\n}: UseHeatmapCanvasGridArgs) {\n  // mainPaneRef is the only pane with a real native scrollbar - the cell canvas and the\n  // row/column tick-label panes all track its scroll position by reading it directly here\n  // (rAF-throttled), rather than being natively scrolled themselves: the canvas repaints\n  // imperatively (drawCanvas), and the tick label panes shift via a transform driven by\n  // axisScrollPos state - both cheaper than the pane actually scrolling 15,000px+ of real content.\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\n  useEffect(() => () => {\n    if (drawRafRef.current != null) cancelAnimationFrame(drawRafRef.current);\n  }, []);\n\n  // Imperative canvas paint - deliberately never routed through React state. Driven both by prop\n  // changes (the effect below) and by native scroll events (handleGridScroll), and it's the\n  // scroll case that matters: an earlier attempt at this drove the redraw through a React state\n  // update on every scroll frame, which forced React to reconcile on every frame and made\n  // scrolling *slower* than the plain (if huge) static SVG it replaced. Reading scroll position\n  // directly off the DOM and painting immediately keeps scrolling itself entirely on the\n  // browser's native, free compositor path - React is never involved.\n  const drawCanvas = useCallback(() => {\n    const canvas = canvasRef.current;\n    const main = mainPaneRef.current;\n    if (!canvas || !main) return;\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) return;\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    drawHeatmapCells(ctx, canvasCellParams, range, hoveredCellRef.current);\n  }, [canvasCellParams, viewportWidth, viewportHeight]);\n\n  useEffect(() => {\n    if (isScrollable) drawCanvas();\n  }, [isScrollable, drawCanvas]);\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    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 handleCanvasMouseMove = useCallback((event: React.MouseEvent<HTMLCanvasElement>) => {\n    const main = mainPaneRef.current;\n    if (!main) return;\n    const contentX = event.nativeEvent.offsetX + main.scrollLeft;\n    const contentY = event.nativeEvent.offsetY + main.scrollTop;\n    const cell = hitTestCell(canvasCellParams, contentX, contentY);\n    // Matches the SVG path's heatmapCellStyles (`.visx-heatmap-cell { cursor: pointer }`):\n    // pointer over any real cell - including a null-count one, which still hit-tests true here,\n    // same as it still being a hit target there via `pointer-events: all` - not just where\n    // onClick is wired up, so hover-only tooltips still get the affordance.\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, 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    const main = mainPaneRef.current;\n    if (!main || !onClick) return;\n    const contentX = event.nativeEvent.offsetX + main.scrollLeft;\n    const contentY = event.nativeEvent.offsetY + main.scrollTop;\n    const cell = hitTestCell(canvasCellParams, contentX, contentY);\n    if (!cell) return;\n    const bin = buildBin(canvasCellParams, cell);\n    if (bin) onClick(bin);\n  }, [canvasCellParams, 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","isScrollable","onClick","mainPaneRef","useRef","canvasRef","hoveredCellRef","canvasTooltipRef","drawRafRef","useEffect","current","cancelAnimationFrame","drawCanvas","useCallback","canvas","main","ctx","getContext","dpr","window","devicePixelRatio","setTransform","clearRect","range","getVisibleRange","scrollLeft","scrollTop","translate","drawHeatmapCells","axisScrollPos","setAxisScrollPos","useState","left","top","setMainPaneNode","node","axisVisibleRange","useMemo","visibleXTickValues","slice","colStart","colEnd","visibleYTickValues","rowStart","rowEnd","handleGridScroll","requestAnimationFrame","handleCanvasMouseMove","event","contentX","nativeEvent","offsetX","contentY","offsetY","cell","hitTestCell","currentTarget","style","cursor","prev","row","column","bin","buildBin","show","hide","handleCanvasMouseLeave","handleCanvasClick","canvasHandlers","onMouseMove","onMouseLeave"],"mappings":"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"}

package/dist/visualization.es119.js

@@ -1,150 +1,41 @@
-import { jsxs as a, jsx as t, Fragment as J } from "react/jsx-runtime";
-import { c as K } from "react/compiler-runtime";
-import v from "@mui/material/Typography";
-import N from "@mui/icons-material/Info";
-import O from "@mui/material/Tooltip";
-const Z = (E) => {
-  const e = K(50), {
-    scales: u,
-    width: l,
-    scaleLabel: k
-  } = E;
-  if (u.length === 0)
-    return null;
-  let c, s, i, m, o, f, d, h, n, y, p, x;
-  if (e[0] !== k || e[1] !== u || e[2] !== l) {
-    const r = [...u].sort(P), R = r[0], W = r[r.length - 1], $ = r[Math.floor(r.length / 4)], q = r[Math.floor(r.length * 3 / 4)];
-    let z;
-    if (e[15] !== l) {
-      const G = l.toString();
-      z = G.match(/=>\s*(.*)/)?.[1]?.trim().replace("Math.", "") || G, e[15] = l, e[16] = z;
-    } else
-      z = e[16];
-    let w = z;
-    k && (w = k);
-    let A;
-    e[17] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (A = {
-      top: "20vh",
-      zIndex: 1e3,
-      backgroundColor: "white",
-      padding: "10px",
-      borderRadius: "5px",
-      fontSize: "13px",
-      width: "225px",
-      textAlign: "left"
-    }, e[17] = A) : A = e[17];
-    const H = A;
-    let C;
-    e[18] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (C = {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "left",
-      marginBottom: "5px"
-    }, e[18] = C) : C = e[18];
-    const I = C;
-    m = H;
-    let L;
-    e[19] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (L = {
-      margin: "3px 0",
-      fontSize: "16px",
-      fontFamily: "Arial"
-    }, e[19] = L) : L = e[19];
-    let T;
-    e[20] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (T = {
-      ml: 0.5
-    }, e[20] = T) : T = e[20];
-    let j;
-    e[21] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (j = /* @__PURE__ */ t(N, { fontSize: "small", style: {
-      marginBottom: "-4.5px",
-      marginTop: "-7px"
-    } }), e[21] = j) : j = e[21], e[22] !== w ? (i = /* @__PURE__ */ a(v, { variant: "body2", component: "h4", style: L, children: [
-      "Edge Weight Scale:",
-      /* @__PURE__ */ t(O, { title: w, color: "primary", sx: T, placement: "bottom", children: j })
-    ] }), e[22] = w, e[23] = i) : i = e[23], e[24] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (n = {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "left",
-      marginTop: "10px"
-    }, e[24] = n) : n = e[24];
-    let M;
-    e[25] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (M = {
-      marginLeft: "10px",
-      fontSize: "14px",
-      fontFamily: "Arial"
-    }, e[25] = M) : M = e[25], y = /* @__PURE__ */ a("div", { style: I, children: [
-      /* @__PURE__ */ t("div", { style: {
-        width: l(R),
-        height: "10px",
-        backgroundColor: "black",
-        display: "inline-block"
-      } }),
-      /* @__PURE__ */ t(v, { variant: "body2", style: M, children: R.toFixed(2) })
-    ] });
-    let B;
-    e[26] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (B = {
-      marginLeft: "10px",
-      fontSize: "14px",
-      fontFamily: "Arial"
-    }, e[26] = B) : B = e[26], p = /* @__PURE__ */ a("div", { style: I, children: [
-      /* @__PURE__ */ t("div", { style: {
-        width: l($),
-        height: "10px",
-        backgroundColor: "black",
-        display: "inline-block"
-      } }),
-      /* @__PURE__ */ t(v, { variant: "body2", style: B, children: $.toFixed(2) })
-    ] });
-    let D;
-    e[27] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (D = {
-      marginLeft: "10px",
-      fontSize: "14px",
-      fontFamily: "Arial"
-    }, e[27] = D) : D = e[27], x = /* @__PURE__ */ a("div", { style: I, children: [
-      /* @__PURE__ */ t("div", { style: {
-        width: l(q),
-        height: "10px",
-        backgroundColor: "black",
-        display: "inline-block"
-      } }),
-      /* @__PURE__ */ t(v, { variant: "body2", style: D, children: q.toFixed(2) })
-    ] }), d = I, h = /* @__PURE__ */ t("div", { style: {
-      width: l(W),
-      height: "10px",
-      backgroundColor: "black",
-      display: "inline-block"
-    } }), c = v, s = "body2", e[28] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (o = {
-      marginLeft: "10px",
-      fontSize: "14px",
-      fontFamily: "Arial"
-    }, e[28] = o) : o = e[28], f = W.toFixed(2), e[0] = k, e[1] = u, e[2] = l, e[3] = c, e[4] = s, e[5] = i, e[6] = m, e[7] = o, e[8] = f, e[9] = d, e[10] = h, e[11] = n, e[12] = y, e[13] = p, e[14] = x;
-  } else
-    c = e[3], s = e[4], i = e[5], m = e[6], o = e[7], f = e[8], d = e[9], h = e[10], n = e[11], y = e[12], p = e[13], x = e[14];
-  let g;
-  e[29] !== c || e[30] !== s || e[31] !== o || e[32] !== f ? (g = /* @__PURE__ */ t(c, { variant: s, style: o, children: f }), e[29] = c, e[30] = s, e[31] = o, e[32] = f, e[33] = g) : g = e[33];
-  let b;
-  e[34] !== g || e[35] !== d || e[36] !== h ? (b = /* @__PURE__ */ a("div", { style: d, children: [
-    h,
-    g
-  ] }), e[34] = g, e[35] = d, e[36] = h, e[37] = b) : b = e[37];
-  let S;
-  e[38] !== b || e[39] !== n || e[40] !== y || e[41] !== p || e[42] !== x ? (S = /* @__PURE__ */ a("div", { style: n, children: [
-    y,
-    p,
-    x,
-    b
-  ] }), e[38] = b, e[39] = n, e[40] = y, e[41] = p, e[42] = x, e[43] = S) : S = e[43];
-  let _;
-  e[44] !== i || e[45] !== S ? (_ = /* @__PURE__ */ a(J, { children: [
-    i,
-    S
-  ] }), e[44] = i, e[45] = S, e[46] = _) : _ = e[46];
-  let F;
-  return e[47] !== m || e[48] !== _ ? (F = /* @__PURE__ */ t("div", { style: m, children: _ }), e[47] = m, e[48] = _, e[49] = F) : F = e[49], F;
-};
-function P(E, e) {
-  return E - e;
+import { c as _ } from "react/compiler-runtime";
+import { useRef as v, useEffect as w } from "react";
+import { cellKey as S } from "./visualization.es114.js";
+function I(i, e, l, t) {
+  return t - l > e || l < i ? l : t > i + e ? t - e : i;
+}
+function O(i) {
+  const e = _(14), {
+    mainPaneRef: l,
+    selectedCells: t,
+    scrollToSelection: n,
+    isScrollable: c,
+    binWidth: o,
+    viewportWidth: s
+  } = i;
+  let r;
+  e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (r = /* @__PURE__ */ new Set(), e[0] = r) : r = e[0];
+  const y = v(r);
+  let m;
+  e[1] !== o || e[2] !== c || e[3] !== l || e[4] !== n || e[5] !== t || e[6] !== s ? (m = () => {
+    const g = y.current, C = t ?? [], L = C.filter((f) => !g.has(S(f)));
+    y.current = new Set(C.map(S));
+    const a = l.current;
+    if (!n || !c || !a || L.length === 0)
+      return;
+    let h = 1 / 0, p = -1 / 0;
+    for (const f of L)
+      f.column < h && (h = f.column), f.column > p && (p = f.column);
+    const K = h * o, T = (p + 1) * o, R = I(a.scrollLeft, s, K, T);
+    R !== a.scrollLeft && a.scrollTo({
+      left: R,
+      behavior: "smooth"
+    });
+  }, e[1] = o, e[2] = c, e[3] = l, e[4] = n, e[5] = t, e[6] = s, e[7] = m) : m = e[7];
+  let u;
+  e[8] !== o || e[9] !== c || e[10] !== n || e[11] !== t || e[12] !== s ? (u = [t, n, c, o, s], e[8] = o, e[9] = c, e[10] = n, e[11] = t, e[12] = s, e[13] = u) : u = e[13], w(m, u);
 }
 export {
-  Z as default
+  O as useScrollToSelection
 };
 //# sourceMappingURL=visualization.es119.js.map

package/dist/visualization.es119.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es119.js","sources":["../src/components/Graph/ScaleLegend.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport Typography from '@mui/material/Typography';\nimport InfoIcon from '@mui/icons-material/Info';\nimport Tooltip from '@mui/material/Tooltip';\n\ninterface ScaleProps {\n  scales: number[];\n  width: (n: number) => number;\n  scaleLabel?: string;\n}\n\nconst ScaleLegend: React.FC<ScaleProps> = ({ scales, width, scaleLabel }) => {\n  if (scales.length === 0) return null;\n\n  const sorted = [...scales].sort((a, b) => a - b);\n  const min = sorted[0];\n  const max = sorted[sorted.length - 1];\n  const mid1 = sorted[Math.floor(sorted.length / 4)];\n  const mid2 = sorted[Math.floor((sorted.length * 3) / 4)];\n\n  const scaleFunctionStr = width.toString();\n  let scaleFormula =\n    scaleFunctionStr\n      .match(/=>\\s*(.*)/)?.[1]\n      ?.trim()\n      .replace('Math.', '') || scaleFunctionStr;\n  if (scaleLabel) {\n    scaleFormula = scaleLabel;\n  }\n\n  const divStyle: CSSProperties = {\n    top: '20vh',\n    zIndex: 1000,\n    backgroundColor: 'white',\n    padding: '10px',\n    borderRadius: '5px',\n    fontSize: '13px',\n    width: '225px',\n    textAlign: 'left',\n  };\n\n  const scaleItemStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'left',\n    marginBottom: '5px',\n  };\n\n  return (\n    <div style={divStyle}>\n      <>\n        <Typography\n          variant=\"body2\"\n          component=\"h4\"\n          style={{\n            margin: '3px 0',\n            fontSize: '16px',\n            fontFamily: 'Arial',\n          }}\n        >\n          Edge Weight Scale:\n          <Tooltip\n            title={scaleFormula}\n            color=\"primary\"\n            sx={{ ml: 0.5 }}\n            placement=\"bottom\"\n          >\n            <InfoIcon\n              fontSize=\"small\"\n              style={{ marginBottom: '-4.5px', marginTop: '-7px' }}\n            />\n          </Tooltip>\n        </Typography>\n\n        <div\n          style={{\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'left',\n            marginTop: '10px',\n          }}\n        >\n          <div style={scaleItemStyle}>\n            <div\n              style={{\n                width: width(min),\n                height: '10px',\n                backgroundColor: 'black',\n                display: 'inline-block',\n              }}\n            ></div>\n            <Typography\n              variant=\"body2\"\n              style={{\n                marginLeft: '10px',\n                fontSize: '14px',\n                fontFamily: 'Arial',\n              }}\n            >\n              {min.toFixed(2)}\n            </Typography>\n          </div>\n          <div style={scaleItemStyle}>\n            <div\n              style={{\n                width: width(mid1),\n                height: '10px',\n                backgroundColor: 'black',\n                display: 'inline-block',\n              }}\n            ></div>\n            <Typography\n              variant=\"body2\"\n              style={{\n                marginLeft: '10px',\n                fontSize: '14px',\n                fontFamily: 'Arial',\n              }}\n            >\n              {mid1.toFixed(2)}\n            </Typography>\n          </div>\n          <div style={scaleItemStyle}>\n            <div\n              style={{\n                width: width(mid2),\n                height: '10px',\n                backgroundColor: 'black',\n                display: 'inline-block',\n              }}\n            ></div>\n            <Typography\n              variant=\"body2\"\n              style={{\n                marginLeft: '10px',\n                fontSize: '14px',\n                fontFamily: 'Arial',\n              }}\n            >\n              {mid2.toFixed(2)}\n            </Typography>\n          </div>\n          <div style={scaleItemStyle}>\n            <div\n              style={{\n                width: width(max),\n                height: '10px',\n                backgroundColor: 'black',\n                display: 'inline-block',\n              }}\n            ></div>\n            <Typography\n              variant=\"body2\"\n              style={{\n                marginLeft: '10px',\n                fontSize: '14px',\n                fontFamily: 'Arial',\n              }}\n            >\n              {max.toFixed(2)}\n            </Typography>\n          </div>\n        </div>\n      </>\n    </div>\n  );\n};\n\nexport default ScaleLegend;\n"],"names":["ScaleLegend","t0","$","_c","scales","width","scaleLabel","length","T0","t1","t10","t11","t2","t3","t4","t5","t6","t7","t8","t9","sorted","sort","_temp","min","max","mid1","Math","floor","mid2","t12","scaleFunctionStr","toString","match","trim","replace","scaleFormula","t13","Symbol","for","top","zIndex","backgroundColor","padding","borderRadius","fontSize","textAlign","divStyle","t14","display","alignItems","justifyContent","marginBottom","scaleItemStyle","t15","margin","fontFamily","t16","ml","t17","jsx","InfoIcon","marginTop","Typography","Tooltip","flexDirection","t18","marginLeft","jsxs","height","toFixed","t19","t20","a","b"],"mappings":"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"}
+{"version":3,"file":"visualization.es119.js","sources":["../src/components/Heatmap/hooks/useScrollToSelection.ts"],"sourcesContent":["import { useEffect, useRef, type RefObject } from \"react\";\nimport type { HeatmapCellId } from \"../types\";\nimport { cellKey } from \"../heatmapCellAppearance\";\n\n// Minimal scroll offset (along one axis) that brings [boxStart, boxEnd) fully into\n// [current, current+viewportSize) - unchanged if it's already fully visible, and aligned to\n// boxStart if the box itself is bigger than the viewport (can't fit all of it either way).\n// Mirrors Element.scrollIntoView({ block: \"nearest\" })'s semantics.\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  isScrollable: boolean;\n  binWidth: number;\n  viewportWidth: number;\n}\n\n// Auto-scrolls to reveal newly-selected cells\nexport function useScrollToSelection({\n  mainPaneRef, selectedCells, scrollToSelection, isScrollable, 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 || !isScrollable || !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, isScrollable, binWidth, viewportWidth]);\n}\n"],"names":["nearestScrollOffset","current","viewportSize","boxStart","boxEnd","useScrollToSelection","t0","$","_c","mainPaneRef","selectedCells","scrollToSelection","isScrollable","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":";;;AAQA,SAASA,EAAoBC,GAAiBC,GAAsBC,GAAkBC,GAAwB;AAE5G,SADIA,IAASD,IAAWD,KACpBC,IAAWF,IAAgBE,IAC3BC,IAASH,IAAUC,IAAqBE,IAASF,IAC9CD;AACT;AAYO,SAAAI,EAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAA,EAAA,GAA8B;AAAA,IAAAC,aAAAA;AAAAA,IAAAC,eAAAA;AAAAA,IAAAC,mBAAAA;AAAAA,IAAAC,cAAAA;AAAAA,IAAAC,UAAAA;AAAAA,IAAAC,eAAAA;AAAAA,EAAAA,IAAAR;AAEV,MAAAS;AAAA,EAAAR,EAAA,CAAA,MAAAS,uBAAAC,IAAA,2BAAA,KAC4BF,wBAAIG,IAAAA,GAAKX,OAAAQ,KAAAA,IAAAR,EAAA,CAAA;AAA9D,QAAAY,IAAiCC,EAAoBL,CAAS;AAAE,MAAAM;AAAA,EAAAd,SAAAM,KAAAN,EAAA,CAAA,MAAAK,KAAAL,EAAA,CAAA,MAAAE,KAAAF,EAAA,CAAA,MAAAI,KAAAJ,SAAAG,KAAAH,EAAA,CAAA,MAAAO,KAEtDO,IAAAA,MAAA;AACR,UAAAC,IAAqBH,EAAwBlB,SAC7CsB,IAAcb,KAAA,CAAA,GACdc,IAAiBD,EAAKE,OAAQC,CAAAA,MAAU,CAACJ,EAAYK,IAAKC,EAAQF,CAAI,CAAC,CAAC;AACxEP,IAAAA,EAAwBlB,UAAW,IAAIiB,IAAIK,EAAKM,IAAKD,CAAO,CAAC;AAE7D,UAAAE,IAAarB,EAAWR;AACxB,QAAI,CAACU,KAAD,CAAuBC,KAAvB,CAAwCkB,KAAQN,EAAQO,WAAY;AAAC;AAEzE,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,IAAmBvC,EAAoB8B,EAAIU,YAAa1B,GAAeuB,GAASC,CAAQ;AACxF,IAAIC,MAAeT,EAAIU,cACrBV,EAAIW,SAAU;AAAA,MAAAC,MAAQH;AAAAA,MAAUI,UAAY;AAAA,IAAA,CAAU;AAAA,EACvD,GACFpC,OAAAM,GAAAN,OAAAK,GAAAL,OAAAE,GAAAF,OAAAI,GAAAJ,OAAAG,GAAAH,OAAAO,GAAAP,OAAAc,KAAAA,IAAAd,EAAA,CAAA;AAAA,MAAAqC;AAAA,EAAArC,EAAA,CAAA,MAAAM,KAAAN,EAAA,CAAA,MAAAK,KAAAL,EAAA,EAAA,MAAAI,KAAAJ,EAAA,EAAA,MAAAG,KAAAH,UAAAO,KAAE8B,IAAA,CAAClC,GAAeC,GAAmBC,GAAcC,GAAUC,CAAa,GAACP,OAAAM,GAAAN,OAAAK,GAAAL,QAAAI,GAAAJ,QAAAG,GAAAH,QAAAO,GAAAP,QAAAqC,KAAAA,IAAArC,EAAA,EAAA,GAtB5EsC,EAAUxB,GAsBPuB,CAAyE;AAAC;"}

package/dist/visualization.es120.js

@@ -1,48 +1,63 @@
-import { jsx as i, jsxs as g } from "react/jsx-runtime";
-import { c as S } from "react/compiler-runtime";
-import { measureTextWidth as W } from "./visualization.es21.js";
-import H from "./visualization.es23.js";
-import k from "./visualization.es28.js";
-const l = 14, _ = 6, x = 4, y = 11, A = "sans-serif", T = 5, I = (n) => n % 1 === 0 ? String(n) : n.toFixed(1), L = (n, t) => Array.from({
-  length: T
-}, (e, o) => n + o * (t - n) / (T - 1)), D = 1.15, G = 6, O = (n, t) => {
-  const e = Math.max(...L(n, t).map((o) => W(I(o), y, A)));
-  return l + x + _ + e * D + G;
-}, R = (n) => {
-  const t = S(11), {
-    colors: e,
-    minValue: o,
-    maxValue: c,
-    height: r
-  } = n;
-  let d;
-  if (t[0] !== e || t[1] !== r || t[2] !== c || t[3] !== o) {
-    const u = L(o, c), F = H({
-      domain: [c, o],
-      range: [0, r]
-    });
-    let s;
-    t[5] !== e ? (s = e.map((h, a) => /* @__PURE__ */ i("stop", { offset: `${a / (e.length - 1) * 100}%`, stopColor: e[e.length - 1 - a] }, a)), t[5] = e, t[6] = s) : s = t[6];
-    let m;
-    t[7] !== s ? (m = /* @__PURE__ */ i("defs", { children: /* @__PURE__ */ i("linearGradient", { id: "heatmap-legend-gradient", x1: "0", y1: "0", x2: "0", y2: "1", children: s }) }), t[7] = s, t[8] = m) : m = t[8];
-    let f;
-    t[9] !== r ? (f = /* @__PURE__ */ i("rect", { x: 0, y: 0, width: l, height: r, fill: "url(#heatmap-legend-gradient)", rx: 2 }), t[9] = r, t[10] = f) : f = t[10], d = /* @__PURE__ */ g(k, { children: [
-      m,
-      f,
-      u.map((h, a) => {
-        const p = F(h);
-        return /* @__PURE__ */ g("g", { children: [
-          /* @__PURE__ */ i("line", { x1: l, x2: l + x, y1: p, y2: p, stroke: "#4d4f52", strokeWidth: 1 }),
-          /* @__PURE__ */ i("text", { x: l + x + _, y: p, dominantBaseline: "middle", fontSize: y, fontFamily: A, fill: "#4d4f52", children: I(h) })
-        ] }, a);
-      })
-    ] }), t[0] = e, t[1] = r, t[2] = c, t[3] = o, t[4] = d;
-  } else
-    d = t[4];
-  return d;
-};
+import { jsx as L, jsxs as U, Fragment as W } from "react/jsx-runtime";
+import { c as b } from "react/compiler-runtime";
+import { memo as q, useRef as z } from "react";
+import G from "./visualization.es121.js";
+import { getHeatmapColorScale as I, cellKey as j, DEFAULT_DESELECTED_COLOR as J, resolveCellAppearance as N } from "./visualization.es114.js";
+import { getBins as Q } from "./visualization.es57.js";
+import { useStableCallback as X } from "./visualization.es20.js";
+import Y from "./visualization.es247.js";
+import Z from "./visualization.es248.js";
+import ee from "./visualization.es13.js";
+const fe = q(function(w) {
+  const e = b(32), {
+    data: u,
+    xScale: h,
+    yScale: H,
+    colors: S,
+    minValue: O,
+    maxValue: g,
+    gap: y,
+    isRect: t,
+    binWidth: l,
+    binHeight: m,
+    animationType: x,
+    tooltipBody: r,
+    onClick: A,
+    selectedCells: n,
+    deselectedColor: V
+  } = w, E = O === void 0 ? 0 : O, R = V === void 0 ? J : V;
+  let p;
+  e[0] !== S || e[1] !== g || e[2] !== E ? (p = I(S, [E, g]), e[0] = S, e[1] = g, e[2] = E, e[3] = p) : p = e[3];
+  const k = p, D = Math.min(l, m) / 2;
+  let f;
+  e[4] !== n ? (f = n?.length ? new Set(n.map(j)) : null, e[4] = n, e[5] = f) : f = e[5];
+  const d = f, $ = z(null), T = X(A), v = t ? Y : Z;
+  let o;
+  e[6] !== m || e[7] !== l || e[8] !== t || e[9] !== D ? (o = t ? {
+    binWidth: l,
+    binHeight: m
+  } : {
+    radius: D
+  }, e[6] = m, e[7] = l, e[8] = t, e[9] = D, e[10] = o) : o = e[10];
+  let a;
+  e[11] !== x || e[12] !== l || e[13] !== R || e[14] !== T || e[15] !== t || e[16] !== d ? (a = (B) => B.map((F, K) => F.map((i) => {
+    const _ = !!d && !d.has(j(i)), {
+      fill: M,
+      fillOpacity: P
+    } = N(i.count, i.color, _, R);
+    return /* @__PURE__ */ L(G, { bin: i, isRect: t, binWidth: l, fill: M, fillOpacity: P, colIndex: K, animationType: x, tooltipRef: $, onClick: T }, `heatmap-cell-${i.row}-${i.column}`);
+  })), e[11] = x, e[12] = l, e[13] = R, e[14] = T, e[15] = t, e[16] = d, e[17] = a) : a = e[17];
+  let c;
+  e[18] !== v || e[19] !== k || e[20] !== u || e[21] !== y || e[22] !== o || e[23] !== a || e[24] !== h || e[25] !== H ? (c = /* @__PURE__ */ L(v, { data: u, xScale: h, yScale: H, colorScale: k, bins: Q, gap: y, ...o, children: a }), e[18] = v, e[19] = k, e[20] = u, e[21] = y, e[22] = o, e[23] = a, e[24] = h, e[25] = H, e[26] = c) : c = e[26];
+  let s;
+  e[27] !== r ? (s = r && /* @__PURE__ */ L(ee, { ref: $, children: r }), e[27] = r, e[28] = s) : s = e[28];
+  let C;
+  return e[29] !== c || e[30] !== s ? (C = /* @__PURE__ */ U(W, { children: [
+    c,
+    s
+  ] }), e[29] = c, e[30] = s, e[31] = C) : C = e[31], C;
+});
 export {
-  R as default,
-  O as getHeatmapLegendWidth
+  fe as default
 };
 //# sourceMappingURL=visualization.es120.js.map

package/dist/visualization.es120.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es120.js","sources":["../src/components/Heatmap/HeatmapLegend.tsx"],"sourcesContent":["import { Group } from \"@visx/group\";\nimport { scaleLinear } from \"@visx/scale\";\nimport { measureTextWidth } from \"../../utility\";\n\nconst BAR_WIDTH = 14;\nconst LABEL_GAP = 6;\nconst TICK_WIDTH = 4;\nconst FONT_SIZE = 11;\nconst FONT_FAMILY = \"sans-serif\";\nconst NUM_TICKS = 5;\n\ninterface HeatmapLegendProps {\n    colors: [string, string, ...string[]];\n    minValue: number;\n    maxValue: number;\n    height: number;\n}\n\nconst formatTick = (value: number) =>\n    value % 1 === 0 ? String(value) : value.toFixed(1);\n\nconst getTickValues = (minValue: number, maxValue: number) =>\n    Array.from({ length: NUM_TICKS }, (_, i) =>\n        minValue + (i * (maxValue - minValue)) / (NUM_TICKS - 1)\n    );\n\n// Canvas's measureText and the browser's actual SVG text layout don't agree to the sub-pixel,\n// and the gap widens with string length - pad generously so longer labels (more digits) don't\n// creep past the reserved width and get clipped by the svg's default overflow:hidden.\nconst LABEL_WIDTH_SAFETY_FACTOR = 1.15;\nconst RIGHT_PADDING = 6;\n\n// Full width needed to render the legend (color bar + ticks + tick labels) without\n// clipping, based on the widest formatted tick label for the given value range.\nexport const getHeatmapLegendWidth = (minValue: number, maxValue: number): number => {\n    const maxLabelWidth = Math.max(\n        ...getTickValues(minValue, maxValue).map((value) =>\n            measureTextWidth(formatTick(value), FONT_SIZE, FONT_FAMILY)\n        )\n    );\n    return BAR_WIDTH + TICK_WIDTH + LABEL_GAP + maxLabelWidth * LABEL_WIDTH_SAFETY_FACTOR + RIGHT_PADDING;\n};\n\nconst HeatmapLegend = ({ colors, minValue, maxValue, height }: HeatmapLegendProps) => {\n    const gradientId = \"heatmap-legend-gradient\";\n\n    const tickValues = getTickValues(minValue, maxValue);\n\n    const yScale = scaleLinear<number>({\n        domain: [maxValue, minValue],\n        range: [0, height],\n    });\n\n    return (\n        <Group>\n            <defs>\n                {/* The bar reads top (max) to bottom (min), so the gradient stops run in reverse\n                    color order to match how colors map to values in the heatmap cells. */}\n                <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    {colors.map((_, i) => (\n                        <stop\n                            key={i}\n                            offset={`${(i / (colors.length - 1)) * 100}%`}\n                            stopColor={colors[colors.length - 1 - i]}\n                        />\n                    ))}\n                </linearGradient>\n            </defs>\n            <rect\n                x={0}\n                y={0}\n                width={BAR_WIDTH}\n                height={height}\n                fill={`url(#${gradientId})`}\n                rx={2}\n            />\n            {tickValues.map((value, i) => {\n                const y = yScale(value);\n                return (\n                    <g key={i}>\n                        <line\n                            x1={BAR_WIDTH}\n                            x2={BAR_WIDTH + TICK_WIDTH}\n                            y1={y}\n                            y2={y}\n                            stroke=\"#4d4f52\"\n                            strokeWidth={1}\n                        />\n                        <text\n                            x={BAR_WIDTH + TICK_WIDTH + LABEL_GAP}\n                            y={y}\n                            dominantBaseline=\"middle\"\n                            fontSize={FONT_SIZE}\n                            fontFamily={FONT_FAMILY}\n                            fill=\"#4d4f52\"\n                        >\n                            {formatTick(value)}\n                        </text>\n                    </g>\n                );\n            })}\n        </Group>\n    );\n};\n\nexport default HeatmapLegend;\nexport type { HeatmapLegendProps };\n"],"names":["BAR_WIDTH","LABEL_GAP","TICK_WIDTH","FONT_SIZE","FONT_FAMILY","NUM_TICKS","formatTick","value","String","toFixed","getTickValues","minValue","maxValue","Array","from","length","_","i","LABEL_WIDTH_SAFETY_FACTOR","RIGHT_PADDING","getHeatmapLegendWidth","maxLabelWidth","Math","max","map","measureTextWidth","HeatmapLegend","t0","$","_c","colors","height","t1","tickValues","yScale","scaleLinear","domain","range","t2","jsx","t3","gradientId","t4","Group","i_0","y"],"mappings":"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"}
+{"version":3,"file":"visualization.es120.js","sources":["../src/components/Heatmap/HeatmapCells.tsx"],"sourcesContent":["import { HeatmapRect, HeatmapCircle, RectCell, CircleCell } from \"@visx/heatmap\";\nimport { useMemo, useRef, memo, ReactElement } from \"react\";\nimport type { AnimationType } from \"../../utility\";\nimport type { ColumnDatum, RowDatum, HeatmapCellId } from \"./types\";\nimport HeatmapCell from \"./HeatmapCell\";\nimport { PlotTooltip, type PlotTooltipHandle } from \"../../tooltip\";\nimport { useStableCallback } from \"../../hooks\";\nimport { DEFAULT_DESELECTED_COLOR, cellKey, getHeatmapColorScale, resolveCellAppearance } from \"./heatmapCellAppearance\";\nimport { getBins } from \"./heatmapLayout\";\n\nexport type AnyBin = RectCell<ColumnDatum, RowDatum> | CircleCell<ColumnDatum, RowDatum>;\n\nexport interface HeatmapCellsProps {\n  data: ColumnDatum[];\n  xScale: (d: number) => number;\n  yScale: (d: number) => number;\n  colors: [string, string, ...string[]];\n  /**\n   * Value mapped to the first color. Defaults to 0. Pass a negative value (e.g. paired with a\n   * positive maxValue) for a diverging scale centered away from zero.\n   */\n  minValue?: number;\n  maxValue: number;\n  gap: number;\n  isRect: boolean;\n  binWidth: number;\n  binHeight: number;\n  animationType?: AnimationType;\n  tooltipBody?: (bin: AnyBin) => ReactElement;\n  onClick?: (bin: AnyBin) => void;\n  selectedCells?: HeatmapCellId[];\n  deselectedColor?: string;\n}\n\nconst HeatmapCells = memo(function HeatmapCells({\n  data, xScale, yScale, colors, minValue = 0, maxValue, gap,\n  isRect, binWidth, binHeight, animationType,\n  tooltipBody, onClick, selectedCells, deselectedColor = DEFAULT_DESELECTED_COLOR,\n}: HeatmapCellsProps) {\n  const colorScale = useMemo(\n    () => getHeatmapColorScale(colors, [minValue, maxValue]),\n    [colors, minValue, maxValue]\n  );\n  const radius = Math.min(binWidth, binHeight) / 2;\n\n  const selectedKeys = useMemo(\n    () => (selectedCells?.length ? new Set(selectedCells.map(cellKey)) : null),\n    [selectedCells]\n  );\n\n  // The tooltip is a sibling of the grid and owns its own state, so moving the pointer around\n  // never re-renders a cell. Cells reach it through this ref, which never changes identity.\n  const tooltipRef = useRef<PlotTooltipHandle<AnyBin>>(null);\n\n  // Consumers commonly pass an inline arrow for onClick. Cells are memoized on prop identity,\n  // so forwarding that directly would invalidate every cell on each render of the consumer.\n  const handleClick = useStableCallback(onClick);\n\n  const HeatmapComponent = isRect ? HeatmapRect : HeatmapCircle;\n\n  return (\n    <>\n      <HeatmapComponent\n        data={data}\n        xScale={xScale}\n        yScale={yScale}\n        colorScale={colorScale}\n        bins={getBins}\n        gap={gap}\n        {...(isRect ? { binWidth, binHeight } : { radius })}\n      >\n        {(heatmap) =>\n          heatmap.map((heatmapBins, colIndex) =>\n            heatmapBins.map((bin) => {\n              const isDeselected = !!selectedKeys && !selectedKeys.has(cellKey(bin));\n              const { fill, fillOpacity } = resolveCellAppearance(bin.count, bin.color, isDeselected, deselectedColor);\n              return (\n                <HeatmapCell\n                  key={`heatmap-cell-${bin.row}-${bin.column}`}\n                  bin={bin}\n                  isRect={isRect}\n                  binWidth={binWidth}\n                  fill={fill}\n                  fillOpacity={fillOpacity}\n                  colIndex={colIndex}\n                  animationType={animationType}\n                  tooltipRef={tooltipRef}\n                  onClick={handleClick}\n                />\n              );\n            })\n          )\n        }\n      </HeatmapComponent>\n      {tooltipBody && <PlotTooltip ref={tooltipRef}>{tooltipBody}</PlotTooltip>}\n    </>\n  );\n});\n\nexport default HeatmapCells;\n"],"names":["HeatmapCells","memo","t0","$","_c","data","xScale","yScale","colors","minValue","t1","maxValue","gap","isRect","binWidth","binHeight","animationType","tooltipBody","onClick","selectedCells","deselectedColor","t2","undefined","DEFAULT_DESELECTED_COLOR","t3","getHeatmapColorScale","colorScale","radius","Math","min","t4","length","Set","map","cellKey","selectedKeys","tooltipRef","useRef","handleClick","useStableCallback","HeatmapComponent","HeatmapRect","HeatmapCircle","t5","t6","heatmap","heatmapBins","colIndex","bin","isDeselected","has","fill","fillOpacity","resolveCellAppearance","count","color","HeatmapCell","row","column","t7","getBins","t8","jsx","PlotTooltip","t9"],"mappings":"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"}

package/dist/visualization.es121.js

@@ -1,25 +1,50 @@
-import r from "./visualization.es23.js";
-const i = "#d1d5db", c = 0.5, u = "none", L = (n) => `${n.row}-${n.column}`;
-function m(n, e) {
-  const [a, t] = e;
-  return r({
-    range: n,
-    domain: n.map((l, o) => a + o * (t - a) / (n.length - 1))
-  });
-}
-function p(n, e, a, t) {
-  const l = n == null;
-  return {
-    fill: l ? u : a ? t : e ?? t,
-    fillOpacity: l ? 0 : a ? c : 1
-  };
-}
+import { jsx as $ } from "react/jsx-runtime";
+import { c as A } from "react/compiler-runtime";
+import { memo as H } from "react";
+import { getAnimationProps as I } from "./visualization.es31.js";
+import { motion as M } from "./visualization.es34.js";
+const S = "visx-heatmap-cell", d = "visx-heatmap-cell-shape", z = `
+.${S} { cursor: pointer; }
+.${d} { transition: stroke-width 0.2s; pointer-events: all; }
+.${S}:hover .${d} { stroke-width: 2; }
+`, N = (o, t) => o.row !== t.row || o.column !== t.column || o.count !== t.count || o.gap !== t.gap || o.color !== t.color || o.opacity !== t.opacity || o.bin !== t.bin || o.datum !== t.datum ? !1 : "x" in o ? "x" in t && o.x === t.x && o.y === t.y && o.width === t.width && o.height === t.height : "cy" in t && o.cy === t.cy && o.r === t.r && o.radius === t.radius, O = (o, t) => o.fill === t.fill && o.fillOpacity === t.fillOpacity && o.isRect === t.isRect && o.binWidth === t.binWidth && o.colIndex === t.colIndex && o.animationType === t.animationType && o.tooltipRef === t.tooltipRef && o.onClick === t.onClick && N(o.bin, t.bin), B = H(function(t) {
+  const i = A(27), {
+    bin: e,
+    isRect: E,
+    binWidth: a,
+    fill: m,
+    fillOpacity: y,
+    colIndex: C,
+    animationType: P,
+    tooltipRef: l,
+    onClick: g
+  } = t, w = E && "width" in e && "height" in e && "x" in e && "y" in e, x = !E && "cy" in e && "r" in e;
+  let h;
+  i[0] !== m || i[1] !== y ? (h = {
+    fill: m,
+    fillOpacity: y,
+    stroke: m,
+    strokeWidth: 0
+  }, i[0] = m, i[1] = y, i[2] = h) : h = i[2];
+  const p = h, k = P ? M.g : "g", L = P;
+  let f;
+  i[3] !== C || i[4] !== L ? (f = I(L, C), i[3] = C, i[4] = L, i[5] = f) : f = i[5];
+  const R = f;
+  let c;
+  i[6] !== e || i[7] !== l ? (c = (W) => l.current?.show(e, W), i[6] = e, i[7] = l, i[8] = c) : c = i[8];
+  let n;
+  i[9] !== l ? (n = () => l.current?.hide(), i[9] = l, i[10] = n) : n = i[10];
+  let s;
+  i[11] !== e || i[12] !== g ? (s = () => g?.(e), i[11] = e, i[12] = g, i[13] = s) : s = i[13];
+  let r;
+  i[14] !== e || i[15] !== a || i[16] !== x || i[17] !== w || i[18] !== p ? (r = w ? /* @__PURE__ */ $("rect", { className: `visx-heatmap-rect ${d}`, width: e.width, height: e.height, x: e.x, y: e.y, ...p }) : x ? /* @__PURE__ */ $("circle", { className: `visx-heatmap-circle ${d}`, cx: e.column * a + a / 2, cy: e.cy, r: e.r, ...p }) : null, i[14] = e, i[15] = a, i[16] = x, i[17] = w, i[18] = p, i[19] = r) : r = i[19];
+  let u;
+  return i[20] !== k || i[21] !== R || i[22] !== c || i[23] !== n || i[24] !== s || i[25] !== r ? (u = /* @__PURE__ */ $(k, { ...R, className: S, onMouseMove: c, onMouseLeave: n, onClick: s, children: r }), i[20] = k, i[21] = R, i[22] = c, i[23] = n, i[24] = s, i[25] = r, i[26] = u) : u = i[26], u;
+}, O);
 export {
-  i as DEFAULT_DESELECTED_COLOR,
-  c as DESELECTED_OPACITY,
-  u as NULL_VALUE_COLOR,
-  L as cellKey,
-  m as getHeatmapColorScale,
-  p as resolveCellAppearance
+  S as CELL_CLASS,
+  d as CELL_SHAPE_CLASS,
+  B as default,
+  z as heatmapCellStyles
 };
 //# sourceMappingURL=visualization.es121.js.map

package/dist/visualization.es121.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es121.js","sources":["../src/components/Heatmap/heatmapCellAppearance.ts"],"sourcesContent":["import { scaleLinear } from \"@visx/scale\";\nimport type { HeatmapCellId } from \"./types\";\n\nexport const DEFAULT_DESELECTED_COLOR = \"#d1d5db\";\nexport const DESELECTED_OPACITY = 0.5;\nexport const NULL_VALUE_COLOR = \"none\";\n\nexport const cellKey = (cell: HeatmapCellId) => `${cell.row}-${cell.column}`;\n\nexport function getHeatmapColorScale(colors: [string, string, ...string[]], domain: [number, number]) {\n  const [minValue, maxValue] = domain;\n  return scaleLinear<string>({\n    range: colors,\n    domain: colors.map((_, i) => minValue + (i * (maxValue - minValue)) / (colors.length - 1)),\n  });\n}\n\n/**\n * Shared by the SVG cell renderer (HeatmapCells.tsx, used for non-scrollable mode and export)\n * and the canvas cell renderer (HeatmapCanvasCells.ts, used on-screen in scrollable mode) so the\n * two can never drift apart on what a cell actually looks like.\n */\nexport function resolveCellAppearance(\n  count: number | null | undefined,\n  color: string | undefined,\n  isDeselected: boolean,\n  deselectedColor: string\n): { fill: string; fillOpacity: number } {\n  const isNullValue = count == null;\n  return {\n    fill: isNullValue ? NULL_VALUE_COLOR : isDeselected ? deselectedColor : color ?? deselectedColor,\n    fillOpacity: isNullValue ? 0 : isDeselected ? DESELECTED_OPACITY : 1,\n  };\n}\n"],"names":["DEFAULT_DESELECTED_COLOR","DESELECTED_OPACITY","NULL_VALUE_COLOR","cellKey","cell","row","column","getHeatmapColorScale","colors","domain","minValue","maxValue","scaleLinear","range","map","_","i","length","resolveCellAppearance","count","color","isDeselected","deselectedColor","isNullValue","fill","fillOpacity"],"mappings":";AAGO,MAAMA,IAA2B,WAC3BC,IAAqB,KACrBC,IAAmB,QAEnBC,IAAUA,CAACC,MAAwB,GAAGA,EAAKC,GAAG,IAAID,EAAKE,MAAM;AAEnE,SAASC,EAAqBC,GAAuCC,GAA0B;AACpG,QAAM,CAACC,GAAUC,CAAQ,IAAIF;AAC7B,SAAOG,EAAoB;AAAA,IACzBC,OAAOL;AAAAA,IACPC,QAAQD,EAAOM,IAAI,CAACC,GAAGC,MAAMN,IAAYM,KAAKL,IAAWD,MAAcF,EAAOS,SAAS,EAAE;AAAA,EAAA,CAC1F;AACH;AAOO,SAASC,EACdC,GACAC,GACAC,GACAC,GACuC;AACvC,QAAMC,IAAcJ,KAAS;AAC7B,SAAO;AAAA,IACLK,MAAMD,IAAcrB,IAAmBmB,IAAeC,IAAkBF,KAASE;AAAAA,IACjFG,aAAaF,IAAc,IAAIF,IAAepB,IAAqB;AAAA,EAAA;AAEvE;"}
+{"version":3,"file":"visualization.es121.js","sources":["../src/components/Heatmap/HeatmapCell.tsx"],"sourcesContent":["import { memo, MouseEvent } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { getAnimationProps } from \"../../utility\";\nimport type { AnimationType } from \"../../utility\";\nimport type { AnyBin } from \"./HeatmapCells\";\nimport type { PlotTooltipRef } from \"../../tooltip\";\n\n/** Class on the <g> wrapping each cell. The hover rule keys off this. */\nexport const CELL_CLASS = \"visx-heatmap-cell\";\n/** Class on the <rect>/<circle> inside each cell. */\nexport const CELL_SHAPE_CLASS = \"visx-heatmap-cell-shape\";\n\n/**\n * Hover styling is plain CSS rather than React state: `:hover` costs no render at all, while\n * tracking hover in state re-renders on every cell the pointer crosses. Rendered once per chart\n * by Heatmap, inside the <svg> so it survives the SVG/PNG download serialization.\n *\n * The stroke is always painted in the cell's own fill color, so hovering only has to give it a\n * width. `strokeWidth={0}` below is a presentation attribute, which loses to any CSS rule - so\n * the hover rule wins without needing !important.\n *\n * `pointer-events: all` because cells with a null count render with fill=\"none\", and SVG's\n * default (visiblePainted) only treats painted area as a hit target - without this the pointer\n * falls through such a cell to the <svg> and it can never show its \"no data\" tooltip.\n */\nexport const heatmapCellStyles = `\n.${CELL_CLASS} { cursor: pointer; }\n.${CELL_SHAPE_CLASS} { transition: stroke-width 0.2s; pointer-events: all; }\n.${CELL_CLASS}:hover .${CELL_SHAPE_CLASS} { stroke-width: 2; }\n`;\n\nexport interface HeatmapCellProps {\n  bin: AnyBin;\n  isRect: boolean;\n  binWidth: number;\n  fill: string;\n  fillOpacity: number;\n  colIndex: number;\n  animationType?: AnimationType;\n  /** Stable for the life of the plot, so it never invalidates this cell's memoization. */\n  tooltipRef: PlotTooltipRef<AnyBin>;\n  onClick?: (bin: AnyBin) => void;\n}\n\n/**\n * visx rebuilds every bin object inside its own render, so `bin` always arrives with a fresh\n * identity and memo's default shallow compare can never bail out. Comparing the bin's fields\n * instead lets untouched cells skip re-rendering, which is what makes selection changes cheap:\n * only the cells whose appearance actually changed re-render, rather than the whole grid.\n *\n * `bin.bin` and `bin.datum` are the caller's own row/column data, which do keep identity, so a\n * reference check on those covers data and metadata changes.\n */\nconst binsEqual = (a: AnyBin, b: AnyBin): boolean => {\n  if (\n    a.row !== b.row ||\n    a.column !== b.column ||\n    a.count !== b.count ||\n    a.gap !== b.gap ||\n    a.color !== b.color ||\n    a.opacity !== b.opacity ||\n    a.bin !== b.bin ||\n    a.datum !== b.datum\n  ) {\n    return false;\n  }\n  // Rect and circle cells carry different geometry fields\n  if (\"x\" in a) {\n    return \"x\" in b && a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;\n  }\n  return \"cy\" in b && a.cy === b.cy && a.r === b.r && a.radius === b.radius;\n};\n\n/**\n * Must compare every prop in HeatmapCellProps - one left out here would silently stop updating.\n */\nconst cellPropsEqual = (prev: HeatmapCellProps, next: HeatmapCellProps): boolean =>\n  prev.fill === next.fill &&\n  prev.fillOpacity === next.fillOpacity &&\n  prev.isRect === next.isRect &&\n  prev.binWidth === next.binWidth &&\n  prev.colIndex === next.colIndex &&\n  prev.animationType === next.animationType &&\n  prev.tooltipRef === next.tooltipRef &&\n  prev.onClick === next.onClick &&\n  binsEqual(prev.bin, next.bin);\n\nconst HeatmapCell = memo(function HeatmapCell({\n  bin, isRect, binWidth, fill, fillOpacity, colIndex,\n  animationType, tooltipRef, onClick,\n}: HeatmapCellProps) {\n  const isRectCell = isRect && \"width\" in bin && \"height\" in bin && \"x\" in bin && \"y\" in bin;\n  const isCircleCell = !isRect && \"cy\" in bin && \"r\" in bin;\n\n  const sharedProps = { fill, fillOpacity, stroke: fill, strokeWidth: 0 };\n\n  const Wrapper = animationType ? motion.g : \"g\";\n  const animProps = getAnimationProps(animationType as AnimationType, colIndex);\n\n  return (\n    <Wrapper\n      {...animProps}\n      className={CELL_CLASS}\n      onMouseMove={(event: MouseEvent<SVGElement>) => tooltipRef.current?.show(bin, event)}\n      onMouseLeave={() => tooltipRef.current?.hide()}\n      onClick={() => onClick?.(bin)}\n    >\n      {isRectCell ? (\n        <rect\n          className={`visx-heatmap-rect ${CELL_SHAPE_CLASS}`}\n          width={bin.width}\n          height={bin.height}\n          x={bin.x}\n          y={bin.y}\n          {...sharedProps}\n        />\n      ) : isCircleCell ? (\n        <circle\n          className={`visx-heatmap-circle ${CELL_SHAPE_CLASS}`}\n          cx={bin.column * binWidth + binWidth / 2}\n          cy={bin.cy}\n          r={bin.r}\n          {...sharedProps}\n        />\n      ) : null}\n    </Wrapper>\n  );\n}, cellPropsEqual);\n\nexport default HeatmapCell;\n"],"names":["CELL_CLASS","CELL_SHAPE_CLASS","heatmapCellStyles","binsEqual","a","b","row","column","count","gap","color","opacity","bin","datum","x","y","width","height","cy","r","radius","cellPropsEqual","prev","next","fill","fillOpacity","isRect","binWidth","colIndex","animationType","tooltipRef","onClick","HeatmapCell","memo","t0","$","_c","isRectCell","isCircleCell","t1","stroke","strokeWidth","sharedProps","Wrapper","motion","g","t2","t3","getAnimationProps","animProps","t4","event","current","show","t5","hide","t6","t7","jsx","t8"],"mappings":"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"}