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

package/dist/visualization.es127.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es127.js","sources":["../src/components/Heatmap/HeatmapCanvasCells.ts"],"sourcesContent":["import type { ColumnDatum, HeatmapCellId } from \"./types\";\nimport type { AnyBin } from \"./HeatmapCells\";\nimport { DIMMED_OPACITY, isOutsideRange, resolveCellAppearance } from \"./heatmapCellAppearance\";\nimport { selectedCellsIn, selectionFrame, type SelectionMarks } from \"./heatmapSelection\";\n\n/** What the canvas renderers and hit-testing need to place and color cells as the SVG renderer does. */\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  /** The counts colorScale spans, which the overview samples it across. */\n  minValue: number;\n  maxValue: number;\n  gap: number;\n  isRect: boolean;\n  binWidth: number;\n  binHeight: number;\n  yMax: number;\n  /** The selected cells' keys, which the grid frames; null where nothing is selected. */\n  selectedKeys: Set<string> | null;\n  /** The columns and rows holding the selection, which the minimap marks along its edges. */\n  selectionMarks: SelectionMarks;\n  highlightRange: [number, number] | null;\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 geometry, so canvas cells land on the pixels SVG\n// cells would. A circle's x is centered in its cell, as HeatmapCell.tsx recomputes it.\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 * The columns and rows (inclusive) within the scrolled viewport, plus `overscan` either side. Row 0\n * is at the bottom, so the row under content y is 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), and the selection's frame over them. */\nexport function drawHeatmapCells(\n  ctx: CanvasRenderingContext2D,\n  params: CanvasCellParams,\n  range: CanvasDrawRange,\n  hoveredCell: HeatmapCellId | null\n) {\n  const { data, colorScale, selectedKeys, highlightRange } = params;\n  // Setting fillStyle re-parses the color even when unchanged, so repeats are skipped: an export\n  // runs this for every cell. A path is built only for the hovered cell, to stroke its outline.\n  let lastFill: string | null = null;\n  let lastAlpha = -1;\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 isDimmed = isOutsideRange(count, highlightRange);\n      const { fill, fillOpacity } = resolveCellAppearance(count, color, isDimmed);\n      if (fillOpacity <= 0) continue;\n\n      const geometry = getCellGeometry(params, col, row);\n      if (fillOpacity !== lastAlpha) {\n        ctx.globalAlpha = fillOpacity;\n        lastAlpha = fillOpacity;\n      }\n      if (fill !== lastFill) {\n        ctx.fillStyle = fill;\n        lastFill = fill;\n      }\n\n      const isHovered = hoveredCell !== null && hoveredCell.row === row && hoveredCell.column === col;\n      if (geometry.isRect) {\n        const width = Math.max(geometry.width, 0);\n        const height = Math.max(geometry.height, 0);\n        ctx.fillRect(geometry.x, geometry.y, width, height);\n        if (isHovered) {\n          ctx.beginPath();\n          ctx.rect(geometry.x, geometry.y, width, height);\n        }\n      } else {\n        ctx.beginPath();\n        ctx.arc(geometry.cx, geometry.cy, Math.max(geometry.r, 0), 0, Math.PI * 2);\n        ctx.fill();\n      }\n\n      if (isHovered) {\n        ctx.globalAlpha = 1;\n        lastAlpha = 1;\n        ctx.lineWidth = 2;\n        ctx.strokeStyle = fill;\n        ctx.stroke();\n      }\n    }\n  }\n  ctx.globalAlpha = 1;\n\n  if (selectedKeys) {\n    // Past the range by a cell, so the frame's line for a selected cell just outside it still shows.\n    const around = {\n      colStart: range.colStart - 1,\n      colEnd: range.colEnd + 1,\n      rowStart: range.rowStart - 1,\n      rowEnd: range.rowEnd + 1,\n    };\n    const bounds = { width: data.length * params.binWidth, height: params.yMax };\n    for (const { x, y, width, height, fill } of selectionFrame(selectedKeys, selectedCellsIn(selectedKeys, around), params, bounds)) {\n      ctx.fillStyle = fill;\n      ctx.fillRect(x, y, width, height);\n    }\n  }\n}\n\n// Colors sampled from colorScale for the overview, which looks them up rather than calling it per cell.\nconst OVERVIEW_LEVELS = 256;\n\nlet colorParser: CanvasRenderingContext2D | null = null;\n/** Any CSS color as RGB, read back off a 1px canvas, so a color the browser understands is one this does. */\nfunction parseColor(css: string): [number, number, number] {\n  colorParser ??= document.createElement(\"canvas\").getContext(\"2d\", { willReadFrequently: true });\n  if (!colorParser) return [0, 0, 0];\n  colorParser.clearRect(0, 0, 1, 1);\n  colorParser.fillStyle = \"#000\";\n  colorParser.fillStyle = css;\n  colorParser.fillRect(0, 0, 1, 1);\n  const [r, g, b] = colorParser.getImageData(0, 0, 1, 1).data;\n  return [r, g, b];\n}\n\n// Keyed on identities the layout memoizes, which a highlight sweep leaves alone.\nconst lutCache = new WeakMap<object, Uint8ClampedArray>();\nconst countsCache = new WeakMap<ColumnDatum[], Float64Array>();\n\nfunction colorLut(params: CanvasCellParams): Uint8ClampedArray {\n  const cached = lutCache.get(params.colorScale);\n  if (cached) return cached;\n  const { colorScale, minValue, maxValue } = params;\n  const lut = new Uint8ClampedArray(OVERVIEW_LEVELS * 3);\n  for (let i = 0; i < OVERVIEW_LEVELS; i++) {\n    const [r, g, b] = parseColor(colorScale(minValue + ((maxValue - minValue) * i) / (OVERVIEW_LEVELS - 1)) ?? \"#000\");\n    lut.set([r, g, b], i * 3);\n  }\n  lutCache.set(params.colorScale, lut);\n  return lut;\n}\n\n/** Every count in one column-major array, NaN where there is none: several times faster to scan than the row objects. */\nfunction flatCounts(data: ColumnDatum[], numRows: number): Float64Array {\n  const cached = countsCache.get(data);\n  if (cached && cached.length === data.length * numRows) return cached;\n  const counts = new Float64Array(data.length * numRows).fill(NaN);\n  data.forEach((column, c) =>\n    column.rows.forEach((row, r) => {\n      if (r < numRows && row.count != null) counts[c * numRows + r] = row.count;\n    })\n  );\n  countsCache.set(data, counts);\n  return counts;\n}\n\n/**\n * The whole grid resampled to `width` x `height` pixels for the minimap, written straight into an\n * ImageData: a fillRect per cell took ~400ms on a million-cell grid.\n *\n * Each pixel averages the cells under it. While highlightRange is set, a pixel holding any cell in\n * the range shows those cells alone at full strength, so a lone outlier isn't averaged away. Cells\n * are drawn as solid squares, without gaps, circles or the selection frame - the minimap marks the\n * selection along its edges instead.\n */\nfunction renderHeatmapOverview(params: CanvasCellParams, width: number, height: number): ImageData | null {\n  const { data, numRows, highlightRange, minValue, maxValue } = params;\n  const numColumns = data.length;\n  if (numColumns === 0 || numRows === 0 || width < 1 || height < 1) return null;\n\n  const lut = colorLut(params);\n  const counts = flatCounts(data, numRows);\n  const span = maxValue - minValue;\n  // With no range, every cell is inside it: nothing fades and nothing is singled out.\n  const [low, high] = highlightRange ?? [-Infinity, Infinity];\n  const image = new ImageData(width, height);\n  const pixels = image.data;\n\n  // The run of columns (rows) each pixel column (row) covers: at least one, and between them every one.\n  const spans = (cells: number, size: number) =>\n    Array.from({ length: size }, (_, i) => {\n      const start = Math.min(Math.floor((i * cells) / size), cells - 1);\n      return [start, Math.max(start + 1, Math.floor(((i + 1) * cells) / size))] as const;\n    });\n  const columnSpans = spans(numColumns, width);\n  // From the top down, where row 0 sits at the bottom of the grid (see cellYScale).\n  const rowSpans = spans(numRows, height);\n\n  // Scalars and typed arrays only in here: it runs once per cell per redraw.\n  for (let y = 0; y < height; y++) {\n    const [rowFrom, rowTo] = rowSpans[y];\n    for (let x = 0; x < width; x++) {\n      const [columnFrom, columnTo] = columnSpans[x];\n      // Opacity-weighted sums over every cell, and plain sums over the highlighted ones.\n      let r = 0, g = 0, b = 0, a = 0, cells = 0;\n      let hr = 0, hg = 0, hb = 0, highlighted = 0;\n      for (let column = columnFrom; column < columnTo; column++) {\n        const base = column * numRows;\n        for (let fromTop = rowFrom; fromTop < rowTo; fromTop++) {\n          const index = base + numRows - 1 - fromTop;\n          cells++;\n          const count = counts[index];\n          if (count !== count) continue; // NaN: transparent, as a null cell is drawn nowhere.\n          // Held at the ends, as the color scale itself clamps.\n          const level = span > 0 ? Math.round(Math.min(Math.max((count - minValue) / span, 0), 1) * (OVERVIEW_LEVELS - 1)) * 3 : 0;\n          const cr = lut[level], cg = lut[level + 1], cb = lut[level + 2];\n          // isOutsideRange, inlined.\n          const inRange = count >= low && count <= high;\n          if (inRange && highlightRange) {\n            hr += cr; hg += cg; hb += cb; highlighted++;\n          }\n          const opacity = inRange ? 1 : DIMMED_OPACITY;\n          r += cr * opacity; g += cg * opacity; b += cb * opacity; a += opacity;\n        }\n      }\n      const offset = (y * width + x) * 4;\n      if (highlighted > 0) {\n        pixels[offset] = hr / highlighted;\n        pixels[offset + 1] = hg / highlighted;\n        pixels[offset + 2] = hb / highlighted;\n        pixels[offset + 3] = 255;\n      } else if (a > 0) {\n        pixels[offset] = r / a;\n        pixels[offset + 1] = g / a;\n        pixels[offset + 2] = b / a;\n        pixels[offset + 3] = (a / cells) * 255;\n      }\n    }\n  }\n  return image;\n}\n\nlet overviewScratch: HTMLCanvasElement | null = null;\n\n/**\n * The whole grid, filling the canvas. Rendered at no more than a pixel per cell and stretched\n * nearest-neighbor from there: resampling every pixel of the expanded minimap took over 100ms.\n */\nexport function drawHeatmapOverview(ctx: CanvasRenderingContext2D, params: CanvasCellParams) {\n  const { width, height } = ctx.canvas;\n  ctx.setTransform(1, 0, 0, 1, 0, 0);\n  ctx.clearRect(0, 0, width, height);\n  const overviewWidth = Math.min(width, params.data.length);\n  const overviewHeight = Math.min(height, params.numRows);\n  const overview = renderHeatmapOverview(params, overviewWidth, overviewHeight);\n  if (!overview) return;\n  if (overviewWidth === width && overviewHeight === height) {\n    ctx.putImageData(overview, 0, 0);\n  } else {\n    overviewScratch ??= document.createElement(\"canvas\");\n    overviewScratch.width = overviewWidth;\n    overviewScratch.height = overviewHeight;\n    overviewScratch.getContext(\"2d\")?.putImageData(overview, 0, 0);\n    ctx.imageSmoothingEnabled = false;\n    ctx.drawImage(overviewScratch, 0, 0, width, height);\n  }\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","highlightRange","lastFill","lastAlpha","columnDatum","rowDatum","rows","count","color","undefined","isDimmed","isOutsideRange","fill","fillOpacity","resolveCellAppearance","geometry","globalAlpha","fillStyle","isHovered","column","fillRect","beginPath","rect","arc","PI","lineWidth","strokeStyle","stroke","around","bounds","selectionFrame","selectedCellsIn","OVERVIEW_LEVELS","colorParser","parseColor","css","document","createElement","getContext","willReadFrequently","clearRect","g","b","getImageData","lutCache","WeakMap","countsCache","colorLut","cached","get","minValue","maxValue","lut","Uint8ClampedArray","i","set","flatCounts","counts","Float64Array","NaN","forEach","c","renderHeatmapOverview","numColumns","span","low","high","Infinity","image","ImageData","pixels","spans","cells","size","Array","from","_","start","columnSpans","rowSpans","rowFrom","rowTo","columnFrom","columnTo","a","hr","hg","hb","highlighted","base","fromTop","index","level","round","cr","cg","cb","inRange","opacity","DIMMED_OPACITY","offset","overviewScratch","drawHeatmapOverview","canvas","setTransform","overviewWidth","overviewHeight","overview","putImageData","imageSmoothingEnabled","drawImage","hitTestCell","contentX","contentY","buildBin","cell","shared","bin","datum"],"mappings":"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"}
+{"version":3,"file":"visualization.es127.js","sources":["../src/components/PhyloTree/ControlPanel.tsx"],"sourcesContent":["import { Add, Remove, SettingsBackupRestore, Timeline } from \"@mui/icons-material\";\nimport { Tooltip, IconButton } from \"@mui/material\";\nimport { ProvidedZoom } from \"@visx/zoom\";\n\nexport type ControlPanelProps = {\n  scaleZoom: ProvidedZoom<SVGSVGElement>[\"scale\"]\n  resetZoom: ProvidedZoom<SVGSVGElement>[\"reset\"]\n  toggleBranchLength: () => void\n}\n\nexport const ControlPanel = ({scaleZoom, resetZoom, toggleBranchLength}: ControlPanelProps) => {\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        margin: \"4px\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"flex-start\",\n        background: \"rgba(255, 255, 255, 0.6)\",\n        backdropFilter: \"blur(2px)\",\n        WebkitBackdropFilter: \"blur(2px)\", // Safari support\n        border: \"1px solid rgba(255, 255, 255, 0.3)\",\n        boxShadow: \"0 2px 8px rgba(0, 0, 0, 0.1)\",\n      }}\n    >\n      <Tooltip title=\"Zoom In\" placement=\"right\">\n        <IconButton onClick={() => scaleZoom({ scaleX: 1.2, scaleY: 1.2 })}>\n          <Add fontSize=\"small\" />\n        </IconButton>\n      </Tooltip>\n      <Tooltip title=\"Zoom Out\" placement=\"right\">\n        <IconButton onClick={() => scaleZoom({ scaleX: 1 / 1.2, scaleY: 1 / 1.2 })}>\n          <Remove fontSize=\"small\" />\n        </IconButton>\n      </Tooltip>\n      <Tooltip title=\"Reset Zoom\" placement=\"right\">\n        <IconButton onClick={resetZoom}>\n          <SettingsBackupRestore fontSize=\"small\" />\n        </IconButton>\n      </Tooltip>\n      <Tooltip title=\"Toggle Evolutionary Distance\" placement=\"right\">\n        <IconButton onClick={toggleBranchLength}>\n          <Timeline fontSize=\"small\" />\n        </IconButton>\n      </Tooltip>\n    </div>\n  );\n}"],"names":["ControlPanel","t0","$","_c","scaleZoom","resetZoom","toggleBranchLength","t1","Symbol","for","position","margin","display","flexDirection","alignItems","background","backdropFilter","WebkitBackdropFilter","border","boxShadow","t2","scaleX","scaleY","t3","Add","t4","jsx","Tooltip","IconButton","t5","t6","Remove","t7","t8","SettingsBackupRestore","t9","t10","Timeline","t11","t12","jsxs"],"mappings":"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"}

package/dist/visualization.es128.js

@@ -1,21 +1,35 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as u } from "react/jsx-runtime";
 import { c as p } from "react/compiler-runtime";
-import { SELECTION_COLOR as f } from "./visualization.es126.js";
-const m = 6, n = 4, u = ($) => {
-  const t = p(6), {
-    axis: r,
-    marked: s,
-    scale: l
-  } = $;
-  let e;
-  t[0] !== s ? (e = [...s], t[0] = s, t[1] = e) : e = t[1];
-  let o;
-  return t[2] !== r || t[3] !== l || t[4] !== e ? (o = /* @__PURE__ */ i("g", { fill: f, pointerEvents: "none", children: e.map((c) => {
-    const a = l(c + 0.5);
-    return /* @__PURE__ */ i("path", { d: r === "column" ? `M${a},1 l${n},${m} h${-2 * n} z` : `M-1,${a} l${-m},${-n} v${2 * n} z` }, c);
-  }) }), t[2] = r, t[3] = l, t[4] = e, t[5] = o) : o = t[5], o;
-};
+import { memo as g } from "react";
+import M from "./visualization.es37.js";
+const D = g((a) => {
+  const o = p(11), {
+    dragStart: r,
+    dragMove: s,
+    dragEnd: e,
+    scale: c,
+    isDragging: l
+  } = a;
+  let t;
+  o[0] !== e || o[1] !== l ? (t = () => {
+    l && e();
+  }, o[0] = e, o[1] = l, o[2] = t) : t = o[2];
+  let n;
+  o[3] !== c ? (n = (m) => {
+    const f = M(m) || {
+      x: 0,
+      y: 0
+    };
+    c({
+      scaleX: 1.5,
+      scaleY: 1.5,
+      point: f
+    });
+  }, o[3] = c, o[4] = n) : n = o[4];
+  let i;
+  return o[5] !== e || o[6] !== s || o[7] !== r || o[8] !== t || o[9] !== n ? (i = /* @__PURE__ */ u("rect", { width: "100%", height: "100%", fill: "transparent", onTouchStart: r, onTouchMove: s, onTouchEnd: e, onMouseDown: r, onMouseMove: s, onMouseUp: e, onMouseLeave: t, onDoubleClick: n }), o[5] = e, o[6] = s, o[7] = r, o[8] = t, o[9] = n, o[10] = i) : i = o[10], i;
+});
 export {
-  u as default
+  D as ZoomSurface
 };
 //# sourceMappingURL=visualization.es128.js.map

package/dist/visualization.es128.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es128.js","sources":["../src/components/Heatmap/HeatmapSelectionPointers.tsx"],"sourcesContent":["import { SELECTION_COLOR } from \"./heatmapSelection\";\n\n/** How far a pointer reaches from the grid, and half its width. */\nconst POINTER_LENGTH = 6;\nconst POINTER_HALF_WIDTH = 4;\n\ninterface HeatmapSelectionPointersProps {\n  axis: \"column\" | \"row\";\n  /** The columns or rows holding the selection - see selectionMarks. */\n  marked: Set<number>;\n  /** The axis's scale, from a column or row index to its place along the grid. */\n  scale: (value: number) => number;\n}\n\n/**\n * A pointer at the tick of each column or row holding the selection, pointing up at a column from\n * below the grid and right at a row from its left. Drawn in the axis's coordinates, so it scrolls\n * and exports with the axis.\n */\nconst HeatmapSelectionPointers = ({ axis, marked, scale }: HeatmapSelectionPointersProps) => (\n  <g fill={SELECTION_COLOR} pointerEvents=\"none\">\n    {[...marked].map((index) => {\n      const at = scale(index + 0.5);\n      return (\n        <path\n          key={index}\n          d={\n            axis === \"column\"\n              ? `M${at},1 l${POINTER_HALF_WIDTH},${POINTER_LENGTH} h${-2 * POINTER_HALF_WIDTH} z`\n              : `M-1,${at} l${-POINTER_LENGTH},${-POINTER_HALF_WIDTH} v${2 * POINTER_HALF_WIDTH} z`\n          }\n        />\n      );\n    })}\n  </g>\n);\n\nexport default HeatmapSelectionPointers;\n"],"names":["POINTER_LENGTH","POINTER_HALF_WIDTH","HeatmapSelectionPointers","t0","$","_c","axis","marked","scale","t1","t2","SELECTION_COLOR","map","index","at","jsx"],"mappings":";;;AAGA,MAAMA,IAAiB,GACjBC,IAAqB,GAerBC,IAA2BC,CAAAA,MAAA;AAAA,QAAAC,IAAAC,EAAA,CAAA,GAAC;AAAA,IAAAC,MAAAA;AAAAA,IAAAC,QAAAA;AAAAA,IAAAC,OAAAA;AAAAA,EAAAA,IAAAL;AAAsD,MAAAM;AAAA,EAAAL,SAAAG,KAEnFE,IAAA,CAAA,GAAIF,CAAM,GAACH,OAAAG,GAAAH,OAAAK,KAAAA,IAAAL,EAAA,CAAA;AAAA,MAAAM;AAAA,SAAAN,EAAA,CAAA,MAAAE,KAAAF,SAAAI,KAAAJ,EAAA,CAAA,MAAAK,KADdC,6BAASC,MAAAA,GAA+B,eAAA,QACrCF,UAAAA,EAAWG,IAAKC,CAAAA,MAAA;AACf,UAAAC,IAAWN,EAAMK,IAAQ,GAAG;AAAE,WAE5B,gBAAAE,YAGI,GAAAT,MAAS,WAAT,IACQQ,CAAE,OAAOb,CAAkB,IAAID,CAAc,KAAK,KAAKC,CAAkB,OADjF,OAEWa,CAAE,KAAK,CAACd,CAAc,IAAI,CAACC,CAAkB,KAAK,IAAIA,CAAkB,KAAA,GAJhFY,CAIoF;AAAA,EAEzF,CAEL,EAAA,CACH,GAAIT,OAAAE,GAAAF,OAAAI,GAAAJ,OAAAK,GAAAL,OAAAM,KAAAA,IAAAN,EAAA,CAAA,GAdJM;AAcI;"}
+{"version":3,"file":"visualization.es128.js","sources":["../src/components/PhyloTree/ZoomSurface.tsx"],"sourcesContent":["import { localPoint } from \"@visx/event\";\nimport { memo } from \"react\";\n\ntype ZoomSurfaceProps = {\n  dragStart: (event: React.TouchEvent | React.MouseEvent) => void;\n  dragMove: (event: React.TouchEvent | React.MouseEvent) => void;\n  dragEnd: () => void;\n  scale: (args: { scaleX: number; scaleY: number; point?: { x: number; y: number } }) => void;\n  isDragging: boolean;\n};\n\n\n/**\n * rect which catches and handles zoom events\n */\n\nexport const ZoomSurface = memo(\n  ({ dragStart, dragMove, dragEnd, scale, isDragging }: ZoomSurfaceProps) => {\n    return (\n      <rect\n        width=\"100%\"\n        height=\"100%\"\n        fill=\"transparent\"\n        onTouchStart={dragStart}\n        onTouchMove={dragMove}\n        onTouchEnd={dragEnd}\n        onMouseDown={dragStart}\n        onMouseMove={dragMove}\n        onMouseUp={dragEnd}\n        onMouseLeave={() => {\n          if (isDragging) dragEnd();\n        }}\n        onDoubleClick={(event) => {\n          const point = localPoint(event) || { x: 0, y: 0 };\n          scale({ scaleX: 1.5, scaleY: 1.5, point });\n        }}\n      />\n    );\n  }\n);"],"names":["ZoomSurface","memo","t0","$","_c","dragStart","dragMove","dragEnd","scale","isDragging","t1","t2","event","point","localPoint","x","y","scaleX","scaleY","t3","jsx"],"mappings":";;;;AAgBO,MAAMA,IAAcC,EACzBC,CAAAA,MAAA;AAAA,QAAAC,IAAAC,EAAA,EAAA,GAAC;AAAA,IAAAC,WAAAA;AAAAA,IAAAC,UAAAA;AAAAA,IAAAC,SAAAA;AAAAA,IAAAC,OAAAA;AAAAA,IAAAC,YAAAA;AAAAA,EAAAA,IAAAP;AAAqE,MAAAQ;AAAA,EAAAP,EAAA,CAAA,MAAAI,KAAAJ,SAAAM,KAYlDC,IAAAA,MAAA;AACZ,IAAID,KAAYF,EAAAA;AAAAA,EAAU,GAC3BJ,OAAAI,GAAAJ,OAAAM,GAAAN,OAAAO,KAAAA,IAAAP,EAAA,CAAA;AAAA,MAAAQ;AAAA,EAAAR,SAAAK,KACcG,IAAAC,CAAAA,MAAA;AACb,UAAAC,IAAcC,EAAWF,CAAuB,KAAlC;AAAA,MAAAG,GAA0B;AAAA,MAACC,GAAK;AAAA,IAAA;AAC9CR,IAAAA,EAAM;AAAA,MAAAS,QAAU;AAAA,MAAGC,QAAU;AAAA,MAAGL,OAAAA;AAAAA,IAAAA,CAAS;AAAA,EAAC,GAC3CV,OAAAK,GAAAL,OAAAQ,KAAAA,IAAAR,EAAA,CAAA;AAAA,MAAAgB;AAAA,SAAAhB,EAAA,CAAA,MAAAI,KAAAJ,EAAA,CAAA,MAAAG,KAAAH,EAAA,CAAA,MAAAE,KAAAF,EAAA,CAAA,MAAAO,KAAAP,SAAAQ,KAhBHQ,IAAA,gBAAAC,EAAA,UACQ,OAAA,QACC,QAAA,QACF,MAAA,eACSf,cAAAA,GACDC,aAAAA,GACDC,YAAAA,GACCF,aAAAA,GACAC,aAAAA,GACFC,WAAAA,GACG,cAAAG,GAGC,eAAAC,EAAAA,CAGd,GACDR,OAAAI,GAAAJ,OAAAG,GAAAH,OAAAE,GAAAF,OAAAO,GAAAP,OAAAQ,GAAAR,QAAAgB,KAAAA,IAAAhB,EAAA,EAAA,GAjBFgB;AAiBE,CAGR;"}

package/dist/visualization.es129.js

@@ -1,106 +1,21 @@
-import { jsxs as z, jsx as p } from "react/jsx-runtime";
-import { useRef as M, useEffect as J, useCallback as m } from "react";
-import { drawHeatmapOverview as Q } from "./visualization.es127.js";
-import { SELECTION_COLOR as V } from "./visualization.es126.js";
-const f = (u, e, c) => Math.min(Math.max(u, e), c), L = 5, Z = 2, v = ({
-  canvasCellParams: u,
-  xMax: e,
-  yMax: c,
-  viewportWidth: l,
-  viewportHeight: d,
-  scrollLeft: P,
-  scrollTop: g,
-  width: i,
-  height: a,
-  onNavigate: b,
-  onCanvasClick: x,
-  onReady: h,
-  paused: C = !1
-}) => {
-  const D = M(null), r = e > 0 ? i / e : 0, o = c > 0 ? a / c : 0, I = M(h);
-  I.current = h, J(() => {
-    const t = D.current;
-    if (!t || C || r <= 0 || o <= 0) return;
-    const n = requestAnimationFrame(() => {
-      const s = t.getContext("2d");
-      s && (Q(s, u), I.current?.());
-    });
-    return () => cancelAnimationFrame(n);
-  }, [u, e, c, r, o, C]);
-  const T = m((t, n) => {
-    b(f(t - l / 2, 0, Math.max(0, e - l)), f(n - d / 2, 0, Math.max(0, c - d)));
-  }, [b, l, d, e, c]), j = m((t) => {
-    if (x) {
-      x();
-      return;
-    }
-    if (r <= 0 || o <= 0) return;
-    const n = t.currentTarget.getBoundingClientRect();
-    T((t.clientX - n.left) / r, (t.clientY - n.top) / o);
-  }, [x, T, r, o]), R = M(null), F = m((t) => {
-    t.stopPropagation(), t.currentTarget.setPointerCapture(t.pointerId), R.current = {
-      x: t.clientX,
-      y: t.clientY,
-      left: P,
-      top: g
-    };
-  }, [P, g]), K = m((t) => {
-    const n = R.current;
-    !n || r <= 0 || o <= 0 || !t.currentTarget.hasPointerCapture(t.pointerId) || b(f(n.left + (t.clientX - n.x) / r, 0, Math.max(0, e - l)), f(n.top + (t.clientY - n.y) / o, 0, Math.max(0, c - d)));
-  }, [r, o, e, c, l, d, b]), U = m((t) => {
-    t.currentTarget.releasePointerCapture(t.pointerId), R.current = null;
-  }, []), $ = m(() => {
-    R.current = null;
-  }, []), {
-    columns: E,
-    rows: A
-  } = u.selectionMarks, q = u.data.length, {
-    numRows: O
-  } = u, S = (t, n, s) => {
-    const H = t * s / n, k = s / n, y = Math.max(0, Z - k) / 2;
-    return [H - y, k + 2 * y];
-  }, X = f(P * r, 0, i), Y = f(g * o, 0, a), B = Math.max(0, Math.min(l * r, i - X)), G = Math.max(0, Math.min(d * o, a - Y));
-  return /* @__PURE__ */ z("div", { style: {
-    position: "relative",
-    width: i,
-    height: a
-  }, children: [
-    /* @__PURE__ */ p("canvas", { ref: D, width: i * (window.devicePixelRatio || 1), height: a * (window.devicePixelRatio || 1), style: {
-      width: i,
-      height: a,
-      display: "block",
-      cursor: "pointer",
-      border: "1px solid #d5d5d5",
-      boxSizing: "border-box"
-    }, onPointerDown: j }),
-    /* @__PURE__ */ p("div", { onPointerDown: F, onPointerMove: K, onPointerUp: U, onLostPointerCapture: $, style: {
-      position: "absolute",
-      left: X,
-      top: Y,
-      width: B,
-      height: G,
-      border: "2px solid #0d0f98",
-      backgroundColor: "rgba(13, 15, 152, 0.15)",
-      cursor: "grab",
-      boxSizing: "border-box"
-    } }),
-    (E.size > 0 || A.size > 0) && /* @__PURE__ */ p("svg", { width: i, height: a, style: {
-      position: "absolute",
-      inset: 0,
-      pointerEvents: "none"
-    }, "aria-hidden": !0, children: /* @__PURE__ */ z("g", { fill: V, children: [
-      [...E].map((t) => {
-        const [n, s] = S(t, q, i);
-        return /* @__PURE__ */ p("rect", { x: n, y: 0, width: s, height: L }, `c${t}`);
-      }),
-      [...A].map((t) => {
-        const [n, s] = S(O - 1 - t, O, a);
-        return /* @__PURE__ */ p("rect", { x: 0, y: n, width: L, height: s }, `r${t}`);
-      })
-    ] }) })
-  ] });
-};
+import { jsx as e } from "react/jsx-runtime";
+import { useBranchLengthTransition as m } from "./visualization.es7.js";
+import { memo as a } from "react";
+import { motion as s } from "./visualization.es31.js";
+const c = a(function({
+  scaledLinkPath: o,
+  baseLinkPath: n,
+  color: r,
+  strokeWidth: i,
+  useBranchLengths: t
+}) {
+  return /* @__PURE__ */ e(s.path, { stroke: r, strokeWidth: i, fill: "none", initial: !1, strokeLinecap: "round", strokeLinejoin: "round", animate: {
+    d: t ? o : n
+  }, transition: {
+    d: m
+  } });
+});
 export {
-  v as default
+  c as TreeLink
 };
 //# sourceMappingURL=visualization.es129.js.map

package/dist/visualization.es129.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es129.js","sources":["../src/components/Heatmap/scrollable/HeatmapMiniMap.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\nimport { drawHeatmapOverview, type CanvasCellParams } from \"../HeatmapCanvasCells\";\nimport { SELECTION_COLOR } from \"../heatmapSelection\";\n\nexport interface HeatmapMiniMapProps {\n  canvasCellParams: CanvasCellParams;\n  xMax: number;\n  yMax: number;\n  viewportWidth: number;\n  viewportHeight: number;\n  scrollLeft: number;\n  scrollTop: number;\n  width: number;\n  height: number;\n  onNavigate: (left: number, top: number) => void;\n  onCanvasClick?: () => void;\n  /** Fires after each draw, so the expanded popup can hide its spinner. */\n  onReady?: () => void;\n  /**\n   * Skips redrawing while out of sight - the inline minimap under the expanded one - so a sweep\n   * doesn't draw the whole grid twice. Redraws once lifted.\n   */\n  paused?: boolean;\n}\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\n/** How far a selection mark reaches in from the edge, and its narrowest width. */\nconst MARK_DEPTH = 5;\nconst MARK_MIN_WIDTH = 2;\n\nconst HeatmapMiniMap = ({\n  canvasCellParams,\n  xMax,\n  yMax,\n  viewportWidth,\n  viewportHeight,\n  scrollLeft,\n  scrollTop,\n  width,\n  height,\n  onNavigate,\n  onCanvasClick,\n  onReady,\n  paused = false,\n}: HeatmapMiniMapProps) => {\n  const canvasRef = useRef<HTMLCanvasElement | null>(null);\n  const scaleX = xMax > 0 ? width / xMax : 0;\n  const scaleY = yMax > 0 ? height / yMax : 0;\n\n  // A ref, so an inline onReady doesn't re-run the draw on every parent render.\n  const onReadyRef = useRef(onReady);\n  onReadyRef.current = onReady;\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas || paused || scaleX <= 0 || scaleY <= 0) return;\n    // A frame later, so the expanded popup paints before the whole-grid draw.\n    const raf = requestAnimationFrame(() => {\n      const ctx = canvas.getContext(\"2d\");\n      if (!ctx) return;\n      drawHeatmapOverview(ctx, canvasCellParams);\n      onReadyRef.current?.();\n    });\n    return () => cancelAnimationFrame(raf);\n  }, [canvasCellParams, xMax, yMax, scaleX, scaleY, paused]);\n\n  const navigateCentered = useCallback(\n    (contentX: number, contentY: number) => {\n      onNavigate(\n        clamp(contentX - viewportWidth / 2, 0, Math.max(0, xMax - viewportWidth)),\n        clamp(contentY - viewportHeight / 2, 0, Math.max(0, yMax - viewportHeight))\n      );\n    },\n    [onNavigate, viewportWidth, viewportHeight, xMax, yMax]\n  );\n\n  const handleCanvasPointerDown = useCallback(\n    (event: React.PointerEvent<HTMLCanvasElement>) => {\n      if (onCanvasClick) {\n        onCanvasClick();\n        return;\n      }\n      if (scaleX <= 0 || scaleY <= 0) return;\n      const rect = event.currentTarget.getBoundingClientRect();\n      navigateCentered((event.clientX - rect.left) / scaleX, (event.clientY - rect.top) / scaleY);\n    },\n    [onCanvasClick, navigateCentered, scaleX, scaleY]\n  );\n\n  /**\n   * Where the window was grabbed: the pointer, and the scroll position then. Each move places the\n   * window by the pointer's distance from here, so it stays under the pointer. Adding each move's\n   * movementX to scrollLeft instead drifted: scrollLeft trails the grid's scroll by a frame, and\n   * each step's rounding was kept, so the window ran ahead or fell behind further the longer the drag.\n   */\n  const grabRef = useRef<{ x: number; y: number; left: number; top: number } | null>(null);\n\n  const handleRectPointerDown = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.stopPropagation();\n      event.currentTarget.setPointerCapture(event.pointerId);\n      grabRef.current = { x: event.clientX, y: event.clientY, left: scrollLeft, top: scrollTop };\n    },\n    [scrollLeft, scrollTop]\n  );\n\n  const handleRectPointerMove = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      const grab = grabRef.current;\n      if (!grab || scaleX <= 0 || scaleY <= 0 || !event.currentTarget.hasPointerCapture(event.pointerId)) return;\n      onNavigate(\n        clamp(grab.left + (event.clientX - grab.x) / scaleX, 0, Math.max(0, xMax - viewportWidth)),\n        clamp(grab.top + (event.clientY - grab.y) / scaleY, 0, Math.max(0, yMax - viewportHeight))\n      );\n    },\n    [scaleX, scaleY, xMax, yMax, viewportWidth, viewportHeight, onNavigate]\n  );\n\n  const handleRectPointerUp = useCallback((event: React.PointerEvent<HTMLDivElement>) => {\n    event.currentTarget.releasePointerCapture(event.pointerId);\n    grabRef.current = null;\n  }, []);\n\n  // A capture can also end without a pointerup, e.g. when the browser cancels the gesture.\n  const handleRectLostCapture = useCallback(() => {\n    grabRef.current = null;\n  }, []);\n\n  const { columns, rows } = canvasCellParams.selectionMarks;\n  const numColumns = canvasCellParams.data.length;\n  const { numRows } = canvasCellParams;\n  // Cell i's span along an edge `size` pixels long, widened to at least MARK_MIN_WIDTH.\n  const markSpan = (i: number, cells: number, size: number) => {\n    const from = (i * size) / cells;\n    const run = size / cells;\n    const extra = Math.max(0, MARK_MIN_WIDTH - run) / 2;\n    return [from - extra, run + 2 * extra] as const;\n  };\n\n  const rectLeft = clamp(scrollLeft * scaleX, 0, width);\n  const rectTop = clamp(scrollTop * scaleY, 0, height);\n  const rectWidth = Math.max(0, Math.min(viewportWidth * scaleX, width - rectLeft));\n  const rectHeight = Math.max(0, Math.min(viewportHeight * scaleY, height - rectTop));\n\n  return (\n    <div style={{ position: \"relative\", width, height }}>\n      <canvas\n        ref={canvasRef}\n        width={width * (window.devicePixelRatio || 1)}\n        height={height * (window.devicePixelRatio || 1)}\n        style={{ width, height, display: \"block\", cursor: \"pointer\", border: \"1px solid #d5d5d5\", boxSizing: \"border-box\" }}\n        onPointerDown={handleCanvasPointerDown}\n      />\n      <div\n        onPointerDown={handleRectPointerDown}\n        onPointerMove={handleRectPointerMove}\n        onPointerUp={handleRectPointerUp}\n        onLostPointerCapture={handleRectLostCapture}\n        style={{\n          position: \"absolute\",\n          left: rectLeft,\n          top: rectTop,\n          width: rectWidth,\n          height: rectHeight,\n          border: \"2px solid #0d0f98\",\n          backgroundColor: \"rgba(13, 15, 152, 0.15)\",\n          cursor: \"grab\",\n          boxSizing: \"border-box\",\n        }}\n      />\n      {/*\n        The selection's columns and rows, marked along the top and left edges since a column here\n        can be under a pixel wide. Above the viewport rectangle so its border can't cover them.\n      */}\n      {(columns.size > 0 || rows.size > 0) && (\n        <svg\n          width={width}\n          height={height}\n          style={{ position: \"absolute\", inset: 0, pointerEvents: \"none\" }}\n          aria-hidden\n        >\n          <g fill={SELECTION_COLOR}>\n            {[...columns].map((column) => {\n              const [x, w] = markSpan(column, numColumns, width);\n              return <rect key={`c${column}`} x={x} y={0} width={w} height={MARK_DEPTH} />;\n            })}\n            {/* Row 0 is at the bottom. */}\n            {[...rows].map((row) => {\n              const [y, h] = markSpan(numRows - 1 - row, numRows, height);\n              return <rect key={`r${row}`} x={0} y={y} width={MARK_DEPTH} height={h} />;\n            })}\n          </g>\n        </svg>\n      )}\n    </div>\n  );\n};\n\nexport default HeatmapMiniMap;\n"],"names":["clamp","value","min","max","Math","MARK_DEPTH","MARK_MIN_WIDTH","HeatmapMiniMap","canvasCellParams","xMax","yMax","viewportWidth","viewportHeight","scrollLeft","scrollTop","width","height","onNavigate","onCanvasClick","onReady","paused","canvasRef","useRef","scaleX","scaleY","onReadyRef","current","useEffect","canvas","raf","requestAnimationFrame","ctx","getContext","drawHeatmapOverview","cancelAnimationFrame","navigateCentered","useCallback","contentX","contentY","handleCanvasPointerDown","event","rect","currentTarget","getBoundingClientRect","clientX","left","clientY","top","grabRef","handleRectPointerDown","stopPropagation","setPointerCapture","pointerId","x","y","handleRectPointerMove","grab","hasPointerCapture","handleRectPointerUp","releasePointerCapture","handleRectLostCapture","columns","rows","selectionMarks","numColumns","data","length","numRows","markSpan","i","cells","size","from","run","extra","rectLeft","rectTop","rectWidth","rectHeight","jsxs","position","jsx","window","devicePixelRatio","display","cursor","border","boxSizing","backgroundColor","inset","pointerEvents","SELECTION_COLOR","map","column","w","row","h"],"mappings":";;;;AAyBA,MAAMA,IAAQA,CAACC,GAAeC,GAAaC,MAAgBC,KAAKF,IAAIE,KAAKD,IAAIF,GAAOC,CAAG,GAAGC,CAAG,GAGvFE,IAAa,GACbC,IAAiB,GAEjBC,IAAiBA,CAAC;AAAA,EACtBC,kBAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,QAAAA,IAAS;AACU,MAAM;AACzB,QAAMC,IAAYC,EAAiC,IAAI,GACjDC,IAASd,IAAO,IAAIM,IAAQN,IAAO,GACnCe,IAASd,IAAO,IAAIM,IAASN,IAAO,GAGpCe,IAAaH,EAAOH,CAAO;AACjCM,EAAAA,EAAWC,UAAUP,GAErBQ,EAAU,MAAM;AACd,UAAMC,IAASP,EAAUK;AACzB,QAAI,CAACE,KAAUR,KAAUG,KAAU,KAAKC,KAAU,EAAG;AAErD,UAAMK,IAAMC,sBAAsB,MAAM;AACtC,YAAMC,IAAMH,EAAOI,WAAW,IAAI;AAClC,MAAKD,MACLE,EAAoBF,GAAKvB,CAAgB,GACzCiB,EAAWC,UAAAA;AAAAA,IACb,CAAC;AACD,WAAO,MAAMQ,qBAAqBL,CAAG;AAAA,EACvC,GAAG,CAACrB,GAAkBC,GAAMC,GAAMa,GAAQC,GAAQJ,CAAM,CAAC;AAEzD,QAAMe,IAAmBC,EACvB,CAACC,GAAkBC,MAAqB;AACtCrB,IAAAA,EACEjB,EAAMqC,IAAW1B,IAAgB,GAAG,GAAGP,KAAKD,IAAI,GAAGM,IAAOE,CAAa,CAAC,GACxEX,EAAMsC,IAAW1B,IAAiB,GAAG,GAAGR,KAAKD,IAAI,GAAGO,IAAOE,CAAc,CAAC,CAC5E;AAAA,EACF,GACA,CAACK,GAAYN,GAAeC,GAAgBH,GAAMC,CAAI,CACxD,GAEM6B,IAA0BH,EAC9B,CAACI,MAAiD;AAChD,QAAItB,GAAe;AACjBA,MAAAA,EAAAA;AACA;AAAA,IACF;AACA,QAAIK,KAAU,KAAKC,KAAU,EAAG;AAChC,UAAMiB,IAAOD,EAAME,cAAcC,sBAAAA;AACjCR,IAAAA,GAAkBK,EAAMI,UAAUH,EAAKI,QAAQtB,IAASiB,EAAMM,UAAUL,EAAKM,OAAOvB,CAAM;AAAA,EAC5F,GACA,CAACN,GAAeiB,GAAkBZ,GAAQC,CAAM,CAClD,GAQMwB,IAAU1B,EAAmE,IAAI,GAEjF2B,IAAwBb,EAC5B,CAACI,MAA8C;AAC7CA,IAAAA,EAAMU,gBAAAA,GACNV,EAAME,cAAcS,kBAAkBX,EAAMY,SAAS,GACrDJ,EAAQtB,UAAU;AAAA,MAAE2B,GAAGb,EAAMI;AAAAA,MAASU,GAAGd,EAAMM;AAAAA,MAASD,MAAMhC;AAAAA,MAAYkC,KAAKjC;AAAAA,IAAAA;AAAAA,EACjF,GACA,CAACD,GAAYC,CAAS,CACxB,GAEMyC,IAAwBnB,EAC5B,CAACI,MAA8C;AAC7C,UAAMgB,IAAOR,EAAQtB;AACrB,IAAI,CAAC8B,KAAQjC,KAAU,KAAKC,KAAU,KAAK,CAACgB,EAAME,cAAce,kBAAkBjB,EAAMY,SAAS,KACjGnC,EACEjB,EAAMwD,EAAKX,QAAQL,EAAMI,UAAUY,EAAKH,KAAK9B,GAAQ,GAAGnB,KAAKD,IAAI,GAAGM,IAAOE,CAAa,CAAC,GACzFX,EAAMwD,EAAKT,OAAOP,EAAMM,UAAUU,EAAKF,KAAK9B,GAAQ,GAAGpB,KAAKD,IAAI,GAAGO,IAAOE,CAAc,CAAC,CAC3F;AAAA,EACF,GACA,CAACW,GAAQC,GAAQf,GAAMC,GAAMC,GAAeC,GAAgBK,CAAU,CACxE,GAEMyC,IAAsBtB,EAAY,CAACI,MAA8C;AACrFA,IAAAA,EAAME,cAAciB,sBAAsBnB,EAAMY,SAAS,GACzDJ,EAAQtB,UAAU;AAAA,EACpB,GAAG,CAAA,CAAE,GAGCkC,IAAwBxB,EAAY,MAAM;AAC9CY,IAAAA,EAAQtB,UAAU;AAAA,EACpB,GAAG,CAAA,CAAE,GAEC;AAAA,IAAEmC,SAAAA;AAAAA,IAASC,MAAAA;AAAAA,EAAAA,IAAStD,EAAiBuD,gBACrCC,IAAaxD,EAAiByD,KAAKC,QACnC;AAAA,IAAEC,SAAAA;AAAAA,EAAAA,IAAY3D,GAEd4D,IAAWA,CAACC,GAAWC,GAAeC,MAAiB;AAC3D,UAAMC,IAAQH,IAAIE,IAAQD,GACpBG,IAAMF,IAAOD,GACbI,IAAQtE,KAAKD,IAAI,GAAGG,IAAiBmE,CAAG,IAAI;AAClD,WAAO,CAACD,IAAOE,GAAOD,IAAM,IAAIC,CAAK;AAAA,EACvC,GAEMC,IAAW3E,EAAMa,IAAaU,GAAQ,GAAGR,CAAK,GAC9C6D,IAAU5E,EAAMc,IAAYU,GAAQ,GAAGR,CAAM,GAC7C6D,IAAYzE,KAAKD,IAAI,GAAGC,KAAKF,IAAIS,IAAgBY,GAAQR,IAAQ4D,CAAQ,CAAC,GAC1EG,IAAa1E,KAAKD,IAAI,GAAGC,KAAKF,IAAIU,IAAiBY,GAAQR,IAAS4D,CAAO,CAAC;AAElF,SACE,gBAAAG,EAAC,SAAI,OAAO;AAAA,IAAEC,UAAU;AAAA,IAAYjE,OAAAA;AAAAA,IAAOC,QAAAA;AAAAA,EAAAA,GACzC,UAAA;AAAA,IAAA,gBAAAiE,EAAC,UAAA,EACC,KAAK5D,GACL,OAAON,KAASmE,OAAOC,oBAAoB,IAC3C,QAAQnE,KAAUkE,OAAOC,oBAAoB,IAC7C,OAAO;AAAA,MAAEpE,OAAAA;AAAAA,MAAOC,QAAAA;AAAAA,MAAQoE,SAAS;AAAA,MAASC,QAAQ;AAAA,MAAWC,QAAQ;AAAA,MAAqBC,WAAW;AAAA,IAAA,GACrG,eAAehD,GAAwB;AAAA,IAEzC,gBAAA0C,EAAC,OAAA,EACC,eAAehC,GACf,eAAeM,GACf,aAAaG,GACb,sBAAsBE,GACtB,OAAO;AAAA,MACLoB,UAAU;AAAA,MACVnC,MAAM8B;AAAAA,MACN5B,KAAK6B;AAAAA,MACL7D,OAAO8D;AAAAA,MACP7D,QAAQ8D;AAAAA,MACRQ,QAAQ;AAAA,MACRE,iBAAiB;AAAA,MACjBH,QAAQ;AAAA,MACRE,WAAW;AAAA,IAAA,GACX;AAAA,KAMF1B,EAAQU,OAAO,KAAKT,EAAKS,OAAO,MAChC,gBAAAU,EAAC,OAAA,EACC,OAAAlE,GACA,QAAAC,GACA,OAAO;AAAA,MAAEgE,UAAU;AAAA,MAAYS,OAAO;AAAA,MAAGC,eAAe;AAAA,IAAA,GACxD,eAAW,IAEX,UAAA,gBAAAX,EAAC,KAAA,EAAE,MAAMY,GACN,UAAA;AAAA,MAAA,CAAC,GAAG9B,CAAO,EAAE+B,IAAKC,CAAAA,MAAW;AAC5B,cAAM,CAACxC,GAAGyC,CAAC,IAAI1B,EAASyB,GAAQ7B,GAAYjD,CAAK;AACjD,eAAO,gBAAAkE,EAAC,QAAA,EAAwB,GAAA5B,GAAM,GAAG,GAAG,OAAOyC,GAAG,QAAQzF,EAAAA,GAA5C,IAAIwF,CAAM,EAA6C;AAAA,MAC3E,CAAC;AAAA,MAEA,CAAC,GAAG/B,CAAI,EAAE8B,IAAKG,CAAAA,MAAQ;AACtB,cAAM,CAACzC,GAAG0C,CAAC,IAAI5B,EAASD,IAAU,IAAI4B,GAAK5B,GAASnD,CAAM;AAC1D,eAAO,gBAAAiE,EAAC,QAAA,EAAqB,GAAG,GAAG,GAAA3B,GAAM,OAAOjD,GAAY,QAAQ2F,EAAAA,GAAlD,IAAID,CAAG,EAA6C;AAAA,MACxE,CAAC;AAAA,IAAA,EAAA,CACH,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"visualization.es129.js","sources":["../src/components/PhyloTree/TreeLink.tsx"],"sourcesContent":["import { TreeNode } from \"./types\";\nimport { motion } from \"framer-motion\";\nimport { useBranchLengthTransition } from \"./PhyloTree\";\nimport { memo } from \"react\";\n\nexport type TreeLinkProps = {\n  scaledLinkPath: TreeNode[\"scaledLinkPath\"]\n  baseLinkPath: TreeNode[\"baseLinkPath\"]\n  color: TreeNode[\"color\"]\n  strokeWidth: TreeNode[\"linkStrokeWidth\"]\n  useBranchLengths: boolean;\n};\n\n/**\n * Link from node to its parent\n */\nexport const TreeLink = memo(function TreeLink({\n  scaledLinkPath,\n  baseLinkPath,\n  color,\n  strokeWidth,\n  useBranchLengths,\n}: TreeLinkProps) {\n  return (\n    <motion.path\n      stroke={color}\n      strokeWidth={strokeWidth}\n      fill=\"none\"\n      initial={false}\n      strokeLinecap={\"round\"}\n      strokeLinejoin={\"round\"}\n      animate={{\n        d: useBranchLengths ? scaledLinkPath : baseLinkPath,\n      }}\n      transition={{\n        d: useBranchLengthTransition,\n      }}\n    />\n  );\n})\n"],"names":["TreeLink","memo","scaledLinkPath","baseLinkPath","color","strokeWidth","useBranchLengths","jsx","motion","d","useBranchLengthTransition"],"mappings":";;;;AAgBO,MAAMA,IAAWC,EAAK,SAAkB;AAAA,EAC7CC,gBAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,kBAAAA;AACa,GAAG;AAChB,SACE,gBAAAC,EAACC,EAAO,MAAP,EACC,QAAQJ,GACR,aAAAC,GACA,MAAK,QACL,SAAS,IACT,eAAe,SACf,gBAAgB,SAChB,SAAS;AAAA,IACPI,GAAGH,IAAmBJ,IAAiBC;AAAAA,EAAAA,GAEzC,YAAY;AAAA,IACVM,GAAGC;AAAAA,EAAAA,GACH;AAGR,CAAC;"}

package/dist/visualization.es13.js

@@ -1,8 +1,8 @@
 import { jsx as T } from "react/jsx-runtime";
 import { c as x } from "react/compiler-runtime";
 import { memo as P, useState as y, useImperativeHandle as z, useRef as M } from "react";
-import O, { defaultStyles as A } from "./visualization.es52.js";
-import E from "./visualization.es50.js";
+import O, { defaultStyles as A } from "./visualization.es21.js";
+import E from "./visualization.es22.js";
 const R = 10, w = 8, v = (o, e, a) => {
   const s = o + R, n = o - R - e, t = s + e > a - w && n >= w ? n : s;
   return Math.max(w, Math.min(t, a - e - w));

package/dist/visualization.es130.js

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

package/dist/visualization.es130.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es130.js","sources":["../src/components/Heatmap/scrollable/HeatmapMiniMapPopup.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type ReactNode, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { HeatmapLegendFrame } from \"../types\";\nimport HeatmapMiniMap, { type HeatmapMiniMapProps } from \"./HeatmapMiniMap\";\n\n// Nearly the whole screen, with enough backdrop showing that it reads as a popup.\nconst MINI_MAP_POPUP_WIDTH_VW = 94;\nconst MINI_MAP_POPUP_HEIGHT_VH = 90;\nconst MINI_MAP_POPUP_PADDING = 16;\n// Portaled to <body>, since a transformed ancestor would trap `position: fixed`, and stacked\n// above anything else the host page puts on top.\nconst MINI_MAP_POPUP_Z_INDEX = 2147483647;\n// The legend's band across the top: long enough to sweep with some precision.\nconst LEGEND_BAND_WIDTH = 440;\nconst LEGEND_BAND_HEIGHT = 40;\nconst LEGEND_BAND_GAP = 12;\n\ntype MiniMapPassThroughProps = Omit<HeatmapMiniMapProps, \"width\" | \"height\" | \"onCanvasClick\">;\n\nexport interface HeatmapMiniMapPopupProps extends MiniMapPassThroughProps {\n  onClose: () => void;\n  /** The inline minimap's container, where a click doesn't count as outside the popup. */\n  containerRef: RefObject<HTMLDivElement | null>;\n  /** Draws the plot's legend in a band across the top. Omitted where the plot shows no legend. */\n  legend?: (frame: HeatmapLegendFrame) => ReactNode;\n}\n\nconst HeatmapMiniMapPopup = ({ onClose, containerRef, legend, ...miniMapProps }: HeatmapMiniMapPopupProps) => {\n  const popupRef = useRef<HTMLDivElement | null>(null);\n  // The legend's tooltips portal into the backdrop to show above the popup. State rather than a\n  // ref, so the legend re-renders once it exists.\n  const [backdrop, setBackdrop] = useState<HTMLDivElement | null>(null);\n  useEffect(() => {\n    const handlePointerDown = (event: PointerEvent) => {\n      const target = event.target as Node;\n      if (containerRef.current?.contains(target) || popupRef.current?.contains(target)) return;\n      // An overlay the legend opened is part of the popup too; the backdrop itself is outside it.\n      if (backdrop && target !== backdrop && backdrop.contains(target)) return;\n      onClose();\n    };\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") onClose();\n    };\n    document.addEventListener(\"pointerdown\", handlePointerDown);\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      document.removeEventListener(\"pointerdown\", handlePointerDown);\n      document.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [containerRef, onClose, backdrop]);\n\n  // The canvas needs pixel dimensions; the popup is sized in vw/vh, so the area is measured as it resizes.\n  const [size, setSize] = useState<{ width: number; height: number } | null>(null);\n  // A spinner covers the first draw, which can take a moment on a large grid.\n  const [isReady, setIsReady] = useState(false);\n  const handleReady = useCallback(() => setIsReady(true), []);\n  const observerRef = useRef<ResizeObserver | null>(null);\n  const areaRef = useCallback((node: HTMLDivElement | null) => {\n    observerRef.current?.disconnect();\n    observerRef.current = null;\n    if (!node) {\n      setSize(null);\n      return;\n    }\n    const observer = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      const { width, height } = entry.contentRect;\n      setSize({ width: Math.floor(width), height: Math.floor(height) });\n    });\n    observer.observe(node);\n    observerRef.current = observer;\n  }, []);\n\n  // Narrower only where the popup itself is: on a phone.\n  const legendBandWidth = Math.min(LEGEND_BAND_WIDTH, size?.width ?? LEGEND_BAND_WIDTH);\n\n  return createPortal(\n    <div\n      ref={setBackdrop}\n      style={{ position: \"fixed\", inset: 0, zIndex: MINI_MAP_POPUP_Z_INDEX, background: \"rgba(0,0,0,0.45)\", display: \"flex\", alignItems: \"center\", justifyContent: \"center\" }}\n    >\n      <style>{\"@keyframes heatmapMiniMapSpinnerRotate { to { transform: rotate(360deg); } }\"}</style>\n      <div\n        ref={popupRef}\n        style={{\n          position: \"relative\",\n          width: `${MINI_MAP_POPUP_WIDTH_VW}vw`,\n          height: `${MINI_MAP_POPUP_HEIGHT_VH}vh`,\n          boxSizing: \"border-box\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          background: \"#fff\",\n          border: \"1px solid #d5d5d5\",\n          borderRadius: 8,\n          boxShadow: \"0 8px 32px rgba(0,0,0,0.25)\",\n          overflow: \"hidden\",\n        }}\n      >\n        <div\n          style={{\n            flexShrink: 0,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            padding: `10px ${MINI_MAP_POPUP_PADDING}px`,\n            background: \"#f7f7f8\",\n            borderBottom: \"1px solid #e5e5e5\",\n          }}\n        >\n          <span style={{ fontSize: 14, fontWeight: 600, color: \"#333\" }}>Minimap</span>\n          <button\n            type=\"button\"\n            aria-label=\"Close expanded minimap\"\n            onClick={onClose}\n            style={{\n              width: 26,\n              height: 26,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              padding: 0,\n              border: \"none\",\n              borderRadius: \"50%\",\n              background: \"#fff\",\n              color: \"#555\",\n              fontSize: 16,\n              lineHeight: 1,\n              cursor: \"pointer\",\n            }}\n          >\n            ×\n          </button>\n        </div>\n        <div style={{ flex: 1, minHeight: 0, display: \"flex\", flexDirection: \"column\", gap: LEGEND_BAND_GAP, padding: MINI_MAP_POPUP_PADDING }}>\n          {legend && (\n            // Above the map rather than beside it: the popup is wide, so a band costs the map less.\n            <svg\n              width={legendBandWidth}\n              height={LEGEND_BAND_HEIGHT}\n              style={{ flexShrink: 0, display: \"block\", overflow: \"visible\" }}\n            >\n              {legend({\n                width: legendBandWidth,\n                height: LEGEND_BAND_HEIGHT,\n                orientation: \"horizontal\",\n                overlayContainer: backdrop ?? undefined,\n              })}\n            </svg>\n          )}\n          <div ref={areaRef} style={{ flex: 1, minHeight: 0, position: \"relative\" }}>\n            {/* Not gated on `size`, so it shows on the first paint rather than after the measurement. */}\n            {!isReady && (\n              <div\n                aria-label=\"Loading minimap\"\n                style={{\n                  position: \"absolute\",\n                  inset: 0,\n                  zIndex: 1,\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"center\",\n                  pointerEvents: \"none\",\n                }}\n              >\n                <div\n                  style={{\n                    width: 40,\n                    height: 40,\n                    borderRadius: \"50%\",\n                    border: \"4px solid #e5e5e5\",\n                    // The minimap's viewport-rectangle color.\n                    borderTopColor: \"#0d0f98\",\n                    animation: \"heatmapMiniMapSpinnerRotate 0.8s linear infinite\",\n                  }}\n                />\n              </div>\n            )}\n            {size && size.width > 0 && size.height > 0 && (\n              <HeatmapMiniMap {...miniMapProps} width={size.width} height={size.height} onReady={handleReady} />\n            )}\n          </div>\n        </div>\n      </div>\n    </div>,\n    document.body\n  );\n};\n\nexport default HeatmapMiniMapPopup;\n"],"names":["MINI_MAP_POPUP_WIDTH_VW","MINI_MAP_POPUP_HEIGHT_VH","MINI_MAP_POPUP_PADDING","MINI_MAP_POPUP_Z_INDEX","LEGEND_BAND_WIDTH","LEGEND_BAND_HEIGHT","LEGEND_BAND_GAP","HeatmapMiniMapPopup","t0","$","_c","containerRef","legend","miniMapProps","onClose","popupRef","useRef","backdrop","setBackdrop","useState","t1","t2","handlePointerDown","event","target","current","contains","handleKeyDown","event_0","key","document","addEventListener","removeEventListener","useEffect","size","setSize","isReady","setIsReady","t3","Symbol","for","handleReady","observerRef","t4","node","disconnect","observer","ResizeObserver","t5","entry","width","height","contentRect","Math","floor","observe","areaRef","legendBandWidth","min","t6","position","inset","zIndex","background","display","alignItems","justifyContent","jsx","t7","t8","t9","boxSizing","flexDirection","border","borderRadius","boxShadow","overflow","flexShrink","padding","borderBottom","fontSize","fontWeight","color","t10","lineHeight","cursor","t11","t12","flex","minHeight","gap","t13","orientation","overlayContainer","undefined","t14","t15","pointerEvents","borderTopColor","animation","t16","HeatmapMiniMap","t17","jsxs","t18","t19","createPortal","body"],"mappings":"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"}
+{"version":3,"file":"visualization.es130.js","sources":["../src/components/PhyloTree/LeafLinkExtension.tsx"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { useBranchLengthTransition } from \"./PhyloTree\";\nimport { memo } from \"react\";\nimport { TreeNode } from \"./types\";\n\n\nexport type LeafLinkExtensionProps = {\n  baseLeafLinkExtension: TreeNode[\"baseLeafLinkExtension\"]\n  scaledLeafLinkExtension: TreeNode[\"scaledLeafLinkExtension\"]\n  color: TreeNode[\"color\"];\n  strokeWidth: TreeNode[\"linkStrokeWidth\"]\n  useBranchLengths: boolean\n};\n\nexport const LeafLinkExtension = memo(function LinkExtension({\n  useBranchLengths,\n  color,\n  baseLeafLinkExtension,\n  scaledLeafLinkExtension,\n  strokeWidth\n}: LeafLinkExtensionProps) {\n\n  return (\n    <motion.line\n      strokeWidth={strokeWidth}\n      initial={false}\n      animate={useBranchLengths ? scaledLeafLinkExtension : baseLeafLinkExtension}\n      stroke={color}\n      transition={useBranchLengthTransition}\n    />\n  );\n});\n"],"names":["LeafLinkExtension","memo","useBranchLengths","color","baseLeafLinkExtension","scaledLeafLinkExtension","strokeWidth","jsx","motion","useBranchLengthTransition"],"mappings":";;;;AAcO,MAAMA,IAAoBC,EAAK,SAAuB;AAAA,EAC3DC,kBAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,uBAAAA;AAAAA,EACAC,yBAAAA;AAAAA,EACAC,aAAAA;AACsB,GAAG;AAEzB,SACE,gBAAAC,EAACC,EAAO,MAAP,EACC,aAAAF,GACA,SAAS,IACT,SAASJ,IAAmBG,IAA0BD,GACtD,QAAQD,GACR,YAAYM,GAA0B;AAG5C,CAAC;"}