@weng-lab/visualization 2.4.0-beta.6 → 2.4.0-beta.7

package/dist/visualization.es67.js

@@ -1,48 +1,50 @@
-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.es29.js";
-import H from "./visualization.es22.js";
-import k from "./visualization.es31.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 $ } from "react/jsx-runtime";
+import { c as A } from "react/compiler-runtime";
+import { memo as H } from "react";
+import { getAnimationProps as I } from "./visualization.es29.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 {
-  R as default,
-  O as getHeatmapLegendWidth
+  S as CELL_CLASS,
+  d as CELL_SHAPE_CLASS,
+  B as default,
+  z as heatmapCellStyles
 };
 //# sourceMappingURL=visualization.es67.js.map

package/dist/visualization.es67.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es67.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.es67.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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"}

package/dist/visualization.es68.js

@@ -1,24 +1,48 @@
-import o from "./visualization.es22.js";
-const L = "#d1d5db", r = 0.5, E = "none", i = (n) => `${n.row}-${n.column}`;
-function u(n, a) {
-  return o({
-    range: n,
-    domain: n.map((e, t) => t * a / (n.length - 1))
-  });
-}
-function p(n, a, e, t) {
-  const l = n == null;
-  return {
-    fill: l ? E : e ? t : a ?? t,
-    fillOpacity: l ? 0 : e ? r : 1
-  };
-}
+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.es29.js";
+import H from "./visualization.es31.js";
+import k from "./visualization.es33.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;
+};
 export {
-  L as DEFAULT_DESELECTED_COLOR,
-  r as DESELECTED_OPACITY,
-  E as NULL_VALUE_COLOR,
-  i as cellKey,
-  u as getHeatmapColorScale,
-  p as resolveCellAppearance
+  R as default,
+  O as getHeatmapLegendWidth
 };
 //# sourceMappingURL=visualization.es68.js.map

package/dist/visualization.es68.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es68.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[]], maxValue: number) {\n  return scaleLinear<string>({\n    range: colors,\n    domain: colors.map((_, i) => (i * maxValue) / (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","maxValue","scaleLinear","range","domain","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,GAAkB;AAC5F,SAAOC,EAAoB;AAAA,IACzBC,OAAOH;AAAAA,IACPI,QAAQJ,EAAOK,IAAI,CAACC,GAAGC,MAAOA,IAAIN,KAAaD,EAAOQ,SAAS,EAAE;AAAA,EAAA,CAClE;AACH;AAOO,SAASC,EACdC,GACAC,GACAC,GACAC,GACuC;AACvC,QAAMC,IAAcJ,KAAS;AAC7B,SAAO;AAAA,IACLK,MAAMD,IAAcpB,IAAmBkB,IAAeC,IAAkBF,KAASE;AAAAA,IACjFG,aAAaF,IAAc,IAAIF,IAAenB,IAAqB;AAAA,EAAA;AAEvE;"}
+{"version":3,"file":"visualization.es68.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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"}

package/dist/visualization.es69.js

@@ -1,119 +1,24 @@
-import { cellKey as x, resolveCellAppearance as S } from "./visualization.es68.js";
-const m = (t, o, n) => Math.min(Math.max(t, o), n);
-function y(t, o, n) {
-  const {
-    xScale: a,
-    cellYScale: u,
-    gap: e,
-    isRect: l,
-    binWidth: c,
-    binHeight: i
-  } = t;
-  if (l)
-    return {
-      isRect: !0,
-      x: a(o),
-      y: u(n) + e,
-      width: c - e,
-      height: i - e
-    };
-  const r = Math.min(c, i) / 2;
-  return {
-    isRect: !1,
-    cx: o * c + c / 2,
-    cy: u(n) + e + r,
-    r: r - e,
-    radius: r
-  };
+import o from "./visualization.es31.js";
+const L = "#d1d5db", r = 0.5, E = "none", i = (n) => `${n.row}-${n.column}`;
+function u(n, a) {
+  return o({
+    range: n,
+    domain: n.map((e, t) => t * a / (n.length - 1))
+  });
 }
-function R(t, o, n, a, u, e) {
-  const {
-    data: l,
-    numRows: c,
-    binWidth: i,
-    binHeight: r,
-    yMax: h
-  } = t;
+function p(n, a, e, t) {
+  const l = n == null;
   return {
-    colStart: m(Math.floor(o / i) - e, 0, Math.max(0, l.length - 1)),
-    colEnd: m(Math.ceil((o + a) / i) + e, 0, Math.max(0, l.length - 1)),
-    rowStart: m(Math.floor((h - (n + u)) / r) - e, 0, Math.max(0, c - 1)),
-    rowEnd: m(Math.floor((h - n) / r) + e, 0, Math.max(0, c - 1))
-  };
-}
-function D(t, o, n, a) {
-  const {
-    data: u,
-    colorScale: e,
-    selectedKeys: l,
-    deselectedColor: c
-  } = o;
-  for (let i = n.colStart; i <= n.colEnd; i++) {
-    const r = u[i];
-    if (r)
-      for (let h = n.rowStart; h <= n.rowEnd; h++) {
-        const f = r.rows[h];
-        if (!f) continue;
-        const d = f.count, M = d == null ? void 0 : e(d), b = !!l && !l.has(x({
-          row: h,
-          column: i
-        })), {
-          fill: w,
-          fillOpacity: g
-        } = S(d, M, b, c);
-        if (g <= 0) continue;
-        const s = y(o, i, h);
-        t.globalAlpha = g, t.fillStyle = w, t.beginPath(), s.isRect ? t.rect(s.x, s.y, Math.max(s.width, 0), Math.max(s.height, 0)) : t.arc(s.cx, s.cy, Math.max(s.r, 0), 0, Math.PI * 2), t.fill(), a && a.row === h && a.column === i && (t.globalAlpha = 1, t.lineWidth = 2, t.strokeStyle = w, t.stroke());
-      }
-  }
-  t.globalAlpha = 1;
-}
-function A(t, o, n) {
-  const {
-    data: a,
-    numRows: u,
-    binWidth: e,
-    binHeight: l,
-    yMax: c
-  } = t;
-  if (o < 0 || n < 0) return null;
-  const i = Math.floor(o / e), r = Math.floor((c - n) / l);
-  return i < 0 || i >= a.length || r < 0 || r >= u || !a[i]?.rows[r] ? null : {
-    row: r,
-    column: i
-  };
-}
-function E(t, o) {
-  const n = t.data[o.column], a = n?.rows[o.row];
-  if (!n || !a) return null;
-  const u = a.count, e = u == null ? void 0 : t.colorScale(u), l = y(t, o.column, o.row), c = {
-    bin: a,
-    row: o.row,
-    column: o.column,
-    datum: n,
-    gap: t.gap,
-    count: u,
-    color: e,
-    opacity: u == null ? void 0 : 1
-  };
-  return l.isRect ? {
-    ...c,
-    x: l.x,
-    y: l.y,
-    width: l.width,
-    height: l.height
-  } : {
-    ...c,
-    cx: l.cx,
-    cy: l.cy,
-    r: l.r,
-    radius: l.radius
+    fill: l ? E : e ? t : a ?? t,
+    fillOpacity: l ? 0 : e ? r : 1
   };
 }
 export {
-  E as buildBin,
-  D as drawHeatmapCells,
-  R as getVisibleRange,
-  A as hitTestCell
+  L as DEFAULT_DESELECTED_COLOR,
+  r as DESELECTED_OPACITY,
+  E as NULL_VALUE_COLOR,
+  i as cellKey,
+  u as getHeatmapColorScale,
+  p as resolveCellAppearance
 };
 //# sourceMappingURL=visualization.es69.js.map

package/dist/visualization.es69.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es69.js","sources":["../src/components/Heatmap/HeatmapCanvasCells.ts"],"sourcesContent":["import type { ColumnDatum, HeatmapCellId } from \"./types\";\nimport type { AnyBin } from \"./HeatmapCells\";\nimport { cellKey, resolveCellAppearance } from \"./heatmapCellAppearance\";\n\n/**\n * Everything the canvas draw loop and hit-testing need to place a cell exactly where the SVG\n * path (HeatmapCells.tsx, via @visx/heatmap's HeatmapRect/HeatmapCircle) would. xScale/cellYScale\n * are the same functions Heatmap.tsx already builds and passes to HeatmapCells.\n */\nexport interface CanvasCellParams {\n  data: ColumnDatum[];\n  numRows: number;\n  xScale: (column: number) => number;\n  cellYScale: (row: number) => number;\n  colorScale: (count: number) => string | undefined;\n  gap: number;\n  isRect: boolean;\n  binWidth: number;\n  binHeight: number;\n  yMax: number;\n  selectedKeys: Set<string> | null;\n  deselectedColor: string;\n}\n\nexport interface CanvasDrawRange {\n  colStart: number;\n  colEnd: number;\n  rowStart: number;\n  rowEnd: number;\n}\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\n// Mirrors @visx/heatmap's HeatmapRect/HeatmapCircle bin geometry exactly (see their source:\n// node_modules/@visx/heatmap/lib/heatmaps/{HeatmapRect,HeatmapCircle}.js) so canvas-drawn cells\n// land on the same pixels the SVG path (export, non-scrollable mode) would draw them at. The\n// circle center's x mirrors HeatmapCell.tsx's own recomputation (col*binWidth + binWidth/2)\n// rather than @visx/heatmap's raw cx, for the same reason that file does it: keeps circles\n// centered in their cell regardless of the configured radius.\ntype CellGeometry =\n  | { isRect: true; x: number; y: number; width: number; height: number }\n  | { isRect: false; cx: number; cy: number; r: number; radius: number };\n\nfunction getCellGeometry(params: CanvasCellParams, col: number, row: number): CellGeometry {\n  const { xScale, cellYScale, gap, isRect, binWidth, binHeight } = params;\n  if (isRect) {\n    return { isRect: true, x: xScale(col), y: cellYScale(row) + gap, width: binWidth - gap, height: binHeight - gap };\n  }\n  const radius = Math.min(binWidth, binHeight) / 2;\n  return { isRect: false, cx: col * binWidth + binWidth / 2, cy: cellYScale(row) + gap + radius, r: radius - gap, radius };\n}\n\n/**\n * Column/row index bounds (inclusive) that intersect the given scroll viewport, plus a small\n * overscan so a cell is already drawn just before it scrolls into view rather than popping in a\n * frame late. Row bounds are derived from cellYScale's own convention (row 0 at the bottom of\n * the grid, row numRows-1 at the top): a cell at row r occupies content-y band\n * [yMax-(r+1)*binHeight, yMax-r*binHeight), so the row under a given y is\n * floor((yMax-y)/binHeight).\n */\nexport function getVisibleRange(\n  params: CanvasCellParams,\n  scrollLeft: number,\n  scrollTop: number,\n  viewportWidth: number,\n  viewportHeight: number,\n  overscan: number\n): CanvasDrawRange {\n  const { data, numRows, binWidth, binHeight, yMax } = params;\n  return {\n    colStart: clamp(Math.floor(scrollLeft / binWidth) - overscan, 0, Math.max(0, data.length - 1)),\n    colEnd: clamp(Math.ceil((scrollLeft + viewportWidth) / binWidth) + overscan, 0, Math.max(0, data.length - 1)),\n    rowStart: clamp(Math.floor((yMax - (scrollTop + viewportHeight)) / binHeight) - overscan, 0, Math.max(0, numRows - 1)),\n    rowEnd: clamp(Math.floor((yMax - scrollTop) / binHeight) + overscan, 0, Math.max(0, numRows - 1)),\n  };\n}\n\n/** Paints the cells in `range` onto `ctx`, whose origin is already at content-space (0,0). */\nexport function drawHeatmapCells(\n  ctx: CanvasRenderingContext2D,\n  params: CanvasCellParams,\n  range: CanvasDrawRange,\n  hoveredCell: HeatmapCellId | null\n) {\n  const { data, colorScale, selectedKeys, deselectedColor } = params;\n  for (let col = range.colStart; col <= range.colEnd; col++) {\n    const columnDatum = data[col];\n    if (!columnDatum) continue;\n    for (let row = range.rowStart; row <= range.rowEnd; row++) {\n      const rowDatum = columnDatum.rows[row];\n      if (!rowDatum) continue;\n      const count = rowDatum.count;\n      const color = count == null ? undefined : colorScale(count);\n      const isDeselected = !!selectedKeys && !selectedKeys.has(cellKey({ row, column: col }));\n      const { fill, fillOpacity } = resolveCellAppearance(count, color, isDeselected, deselectedColor);\n      if (fillOpacity <= 0) continue;\n\n      const geometry = getCellGeometry(params, col, row);\n      ctx.globalAlpha = fillOpacity;\n      ctx.fillStyle = fill;\n      ctx.beginPath();\n      if (geometry.isRect) {\n        ctx.rect(geometry.x, geometry.y, Math.max(geometry.width, 0), Math.max(geometry.height, 0));\n      } else {\n        ctx.arc(geometry.cx, geometry.cy, Math.max(geometry.r, 0), 0, Math.PI * 2);\n      }\n      ctx.fill();\n\n      if (hoveredCell && hoveredCell.row === row && hoveredCell.column === col) {\n        ctx.globalAlpha = 1;\n        ctx.lineWidth = 2;\n        ctx.strokeStyle = fill;\n        ctx.stroke();\n      }\n    }\n  }\n  ctx.globalAlpha = 1;\n}\n\n/** Content-space (post-scroll-offset) coordinates -> the cell under them, or null if none. */\nexport function hitTestCell(params: CanvasCellParams, contentX: number, contentY: number): HeatmapCellId | null {\n  const { data, numRows, binWidth, binHeight, yMax } = params;\n  if (contentX < 0 || contentY < 0) return null;\n  const column = Math.floor(contentX / binWidth);\n  const row = Math.floor((yMax - contentY) / binHeight);\n  if (column < 0 || column >= data.length || row < 0 || row >= numRows) return null;\n  if (!data[column]?.rows[row]) return null;\n  return { row, column };\n}\n\n/** Builds the same bin shape @visx/heatmap's RectCell/CircleCell provide, for onClick/tooltipBody. */\nexport function buildBin(params: CanvasCellParams, cell: HeatmapCellId): AnyBin | null {\n  const columnDatum = params.data[cell.column];\n  const rowDatum = columnDatum?.rows[cell.row];\n  if (!columnDatum || !rowDatum) return null;\n\n  const count = rowDatum.count;\n  const color = count == null ? undefined : params.colorScale(count);\n  const geometry = getCellGeometry(params, cell.column, cell.row);\n  const shared = { bin: rowDatum, row: cell.row, column: cell.column, datum: columnDatum, gap: params.gap, count, color, opacity: count == null ? undefined : 1 };\n\n  return geometry.isRect\n    ? ({ ...shared, x: geometry.x, y: geometry.y, width: geometry.width, height: geometry.height } as AnyBin)\n    : ({ ...shared, cx: geometry.cx, cy: geometry.cy, r: geometry.r, radius: geometry.radius } as AnyBin);\n}\n"],"names":["clamp","value","min","max","Math","getCellGeometry","params","col","row","xScale","cellYScale","gap","isRect","binWidth","binHeight","x","y","width","height","radius","cx","cy","r","getVisibleRange","scrollLeft","scrollTop","viewportWidth","viewportHeight","overscan","data","numRows","yMax","colStart","floor","length","colEnd","ceil","rowStart","rowEnd","drawHeatmapCells","ctx","range","hoveredCell","colorScale","selectedKeys","deselectedColor","columnDatum","rowDatum","rows","count","color","undefined","isDeselected","has","cellKey","column","fill","fillOpacity","resolveCellAppearance","geometry","globalAlpha","fillStyle","beginPath","rect","arc","PI","lineWidth","strokeStyle","stroke","hitTestCell","contentX","contentY","buildBin","cell","shared","bin","datum","opacity"],"mappings":"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"}
+{"version":3,"file":"visualization.es69.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[]], maxValue: number) {\n  return scaleLinear<string>({\n    range: colors,\n    domain: colors.map((_, i) => (i * maxValue) / (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","maxValue","scaleLinear","range","domain","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,GAAkB;AAC5F,SAAOC,EAAoB;AAAA,IACzBC,OAAOH;AAAAA,IACPI,QAAQJ,EAAOK,IAAI,CAACC,GAAGC,MAAOA,IAAIN,KAAaD,EAAOQ,SAAS,EAAE;AAAA,EAAA,CAClE;AACH;AAOO,SAASC,EACdC,GACAC,GACAC,GACAC,GACuC;AACvC,QAAMC,IAAcJ,KAAS;AAC7B,SAAO;AAAA,IACLK,MAAMD,IAAcpB,IAAmBkB,IAAeC,IAAkBF,KAASE;AAAAA,IACjFG,aAAaF,IAAc,IAAIF,IAAenB,IAAqB;AAAA,EAAA;AAEvE;"}

package/dist/visualization.es7.js

@@ -1,16 +1,16 @@
 import { jsx as N, jsxs as oe } from "react/jsx-runtime";
 import { useState as G, useMemo as f, useRef as U, useCallback as R } from "react";
-import { ZoomFrame as ce } from "./visualization.es80.js";
-import { RenderTree as re } from "./visualization.es81.js";
-import ie from "./visualization.es21.js";
-import le from "./visualization.es20.js";
-import de from "./visualization.es82.js";
-import ue from "./visualization.es83.js";
-import he from "./visualization.es84.js";
-import S from "./visualization.es85.js";
-import pe from "./visualization.es31.js";
-import me from "./visualization.es86.js";
-import { pathRadialStep as J } from "./visualization.es87.js";
+import { ZoomFrame as ce } from "./visualization.es52.js";
+import { RenderTree as re } from "./visualization.es53.js";
+import ie from "./visualization.es46.js";
+import le from "./visualization.es47.js";
+import de from "./visualization.es54.js";
+import ue from "./visualization.es55.js";
+import he from "./visualization.es56.js";
+import S from "./visualization.es57.js";
+import pe from "./visualization.es33.js";
+import me from "./visualization.es58.js";
+import { pathRadialStep as J } from "./visualization.es59.js";
 const we = {
   duration: 0.3,
   ease: "easeInOut"