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

package/dist/visualization.es102.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es102.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  const handleRectPointerDown = useCallback((event: React.PointerEvent<HTMLDivElement>) => {\n    event.stopPropagation();\n    event.currentTarget.setPointerCapture(event.pointerId);\n  }, []);\n\n  const handleRectPointerMove = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      if (scaleX <= 0 || scaleY <= 0 || !event.currentTarget.hasPointerCapture(event.pointerId)) return;\n      onNavigate(\n        clamp(scrollLeft + event.movementX / scaleX, 0, Math.max(0, xMax - viewportWidth)),\n        clamp(scrollTop + event.movementY / scaleY, 0, Math.max(0, yMax - viewportHeight))\n      );\n    },\n    [scrollLeft, scrollTop, scaleX, scaleY, xMax, yMax, viewportWidth, viewportHeight, onNavigate]\n  );\n\n  const handleRectPointerUp = useCallback((event: React.PointerEvent<HTMLDivElement>) => {\n    event.currentTarget.releasePointerCapture(event.pointerId);\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        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","handleRectPointerDown","stopPropagation","setPointerCapture","pointerId","handleRectPointerMove","hasPointerCapture","movementX","movementY","handleRectPointerUp","releasePointerCapture","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","x","w","row","y","h"],"mappings":"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"}
+{"version":3,"file":"visualization.es102.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}