@parca/profile 0.19.140 → 0.19.142

package/dist/ProfileFlameGraph/FlameGraphArrow/MiniMap.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -11,228 +10,274 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
+
 import React, { useCallback, useEffect, useRef } from 'react';
 import { EVERYTHING_ELSE } from '@parca/store';
 import { getLastItem } from '@parca/utilities';
 import { RowHeight } from './FlameGraphNodes';
-import { FIELD_CUMULATIVE, FIELD_DEPTH, FIELD_FUNCTION_FILE_NAME, FIELD_MAPPING_FILE, FIELD_TIMESTAMP, } from './index';
+import { FIELD_CUMULATIVE, FIELD_DEPTH, FIELD_FUNCTION_FILE_NAME, FIELD_MAPPING_FILE, FIELD_TIMESTAMP } from './index';
 import { arrowToString, boundsFromProfileSource } from './utils';
-const MINIMAP_HEIGHT = 20;
-export const MiniMap = React.memo(function MiniMap({ containerRef, table, width, zoomedWidth, totalHeight, maxDepth, colorByColors: colors, colorBy, profileSource, isDarkMode, scrollLeft: _scrollLeft, scrollLeftRef, onZoomToPosition, onSetZoomWithScroll, }) {
-    const canvasRef = useRef(null);
-    const containerElRef = useRef(null);
-    const isDragging = useRef(false);
-    const dragStartX = useRef(0);
-    const dragStartScrollLeft = useRef(0);
-    // Render minimap canvas
-    useEffect(() => {
-        const canvas = canvasRef.current;
-        if (canvas == null || width <= 0 || zoomedWidth <= 0)
-            return;
-        const dpr = window.devicePixelRatio !== 0 ? window.devicePixelRatio : 1;
-        canvas.width = width * dpr;
-        canvas.height = MINIMAP_HEIGHT * dpr;
-        const ctx = canvas.getContext('2d');
-        if (ctx == null)
-            return;
-        ctx.scale(dpr, dpr);
-        ctx.clearRect(0, 0, width, MINIMAP_HEIGHT);
-        // Background
-        ctx.fillStyle = isDarkMode ? '#374151' : '#f3f4f6';
-        ctx.fillRect(0, 0, width, MINIMAP_HEIGHT);
-        const yScale = MINIMAP_HEIGHT / totalHeight;
-        const tsBounds = boundsFromProfileSource(profileSource);
-        const tsRange = Number(tsBounds[1]) - Number(tsBounds[0]);
-        if (tsRange <= 0)
-            return;
-        const depthCol = table.getChild(FIELD_DEPTH);
-        const cumulativeCol = table.getChild(FIELD_CUMULATIVE);
-        const tsCol = table.getChild(FIELD_TIMESTAMP);
-        const mappingCol = table.getChild(FIELD_MAPPING_FILE);
-        const filenameCol = table.getChild(FIELD_FUNCTION_FILE_NAME);
-        if (depthCol == null || cumulativeCol == null)
-            return;
-        const numRows = table.numRows;
-        for (let row = 0; row < numRows; row++) {
-            const depth = depthCol.get(row) ?? 0;
-            if (depth === 0)
-                continue; // skip root
-            if (depth > maxDepth)
-                continue;
-            const cumulative = Number(cumulativeCol.get(row) ?? 0n);
-            if (cumulative <= 0)
-                continue;
-            const nodeWidth = (cumulative / tsRange) * width;
-            if (nodeWidth < 0.5)
-                continue;
-            const ts = tsCol != null ? Number(tsCol.get(row)) : 0;
-            const x = ((ts - Number(tsBounds[0])) / tsRange) * width;
-            const y = (depth - 1) * RowHeight * yScale;
-            const h = Math.max(1, RowHeight * yScale);
-            // Get color using same logic as useNodeColor
-            const colorAttribute = colorBy === 'filename'
-                ? arrowToString(filenameCol?.get(row))
-                : colorBy === 'binary'
-                    ? arrowToString(mappingCol?.get(row))
-                    : null;
-            const color = colors[getLastItem(colorAttribute ?? '') ?? EVERYTHING_ELSE];
-            ctx.fillStyle = color ?? (isDarkMode ? '#6b7280' : '#9ca3af');
-            ctx.fillRect(x, y, Math.max(0.5, nodeWidth), h);
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var MINIMAP_HEIGHT = 20;
+export var MiniMap = /*#__PURE__*/React.memo(function MiniMap(_ref) {
+  var _scrollLeftRef$curren;
+  var containerRef = _ref.containerRef,
+    table = _ref.table,
+    width = _ref.width,
+    zoomedWidth = _ref.zoomedWidth,
+    totalHeight = _ref.totalHeight,
+    maxDepth = _ref.maxDepth,
+    colors = _ref.colorByColors,
+    colorBy = _ref.colorBy,
+    profileSource = _ref.profileSource,
+    isDarkMode = _ref.isDarkMode,
+    _scrollLeft = _ref.scrollLeft,
+    scrollLeftRef = _ref.scrollLeftRef,
+    onZoomToPosition = _ref.onZoomToPosition,
+    onSetZoomWithScroll = _ref.onSetZoomWithScroll;
+  var canvasRef = useRef(null);
+  var containerElRef = useRef(null);
+  var isDragging = useRef(false);
+  var dragStartX = useRef(0);
+  var dragStartScrollLeft = useRef(0);
+
+  // Render minimap canvas
+  useEffect(function () {
+    var canvas = canvasRef.current;
+    if (canvas == null || width <= 0 || zoomedWidth <= 0) return;
+    var dpr = window.devicePixelRatio !== 0 ? window.devicePixelRatio : 1;
+    canvas.width = width * dpr;
+    canvas.height = MINIMAP_HEIGHT * dpr;
+    var ctx = canvas.getContext('2d');
+    if (ctx == null) return;
+    ctx.scale(dpr, dpr);
+    ctx.clearRect(0, 0, width, MINIMAP_HEIGHT);
+
+    // Background
+    ctx.fillStyle = isDarkMode ? '#374151' : '#f3f4f6';
+    ctx.fillRect(0, 0, width, MINIMAP_HEIGHT);
+    var yScale = MINIMAP_HEIGHT / totalHeight;
+    var tsBounds = boundsFromProfileSource(profileSource);
+    var tsRange = Number(tsBounds[1]) - Number(tsBounds[0]);
+    if (tsRange <= 0) return;
+    var depthCol = table.getChild(FIELD_DEPTH);
+    var cumulativeCol = table.getChild(FIELD_CUMULATIVE);
+    var tsCol = table.getChild(FIELD_TIMESTAMP);
+    var mappingCol = table.getChild(FIELD_MAPPING_FILE);
+    var filenameCol = table.getChild(FIELD_FUNCTION_FILE_NAME);
+    if (depthCol == null || cumulativeCol == null) return;
+    var numRows = table.numRows;
+    for (var row = 0; row < numRows; row++) {
+      var _depthCol$get, _cumulativeCol$get, _getLastItem;
+      var depth = (_depthCol$get = depthCol.get(row)) !== null && _depthCol$get !== void 0 ? _depthCol$get : 0;
+      if (depth === 0) continue; // skip root
+
+      if (depth > maxDepth) continue;
+      var cumulative = Number((_cumulativeCol$get = cumulativeCol.get(row)) !== null && _cumulativeCol$get !== void 0 ? _cumulativeCol$get : 0n);
+      if (cumulative <= 0) continue;
+      var nodeWidth = cumulative / tsRange * width;
+      if (nodeWidth < 0.5) continue;
+      var ts = tsCol != null ? Number(tsCol.get(row)) : 0;
+      var x = (ts - Number(tsBounds[0])) / tsRange * width;
+      var y = (depth - 1) * RowHeight * yScale;
+      var h = Math.max(1, RowHeight * yScale);
+
+      // Get color using same logic as useNodeColor
+      var colorAttribute = colorBy === 'filename' ? arrowToString(filenameCol === null || filenameCol === void 0 ? void 0 : filenameCol.get(row)) : colorBy === 'binary' ? arrowToString(mappingCol === null || mappingCol === void 0 ? void 0 : mappingCol.get(row)) : null;
+      var color = colors[(_getLastItem = getLastItem(colorAttribute !== null && colorAttribute !== void 0 ? colorAttribute : '')) !== null && _getLastItem !== void 0 ? _getLastItem : EVERYTHING_ELSE];
+      ctx.fillStyle = color !== null && color !== void 0 ? color : isDarkMode ? '#6b7280' : '#9ca3af';
+      ctx.fillRect(x, y, Math.max(0.5, nodeWidth), h);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- zoomedWidth intentionally excluded: canvas is zoom-independent
+  }, [table, width, totalHeight, maxDepth, colorBy, colors, isDarkMode, profileSource]);
+  var isZoomed = zoomedWidth > width;
+  var sliderWidth = Math.max(20, width / zoomedWidth * width);
+  // Use scrollLeftRef for positioning — it's pre-set before flushSync during zoom changes,
+  // avoiding the 1-frame lag where viewport.scrollLeft is stale but zoomedWidth is already updated.
+  var currentScrollLeft = (_scrollLeftRef$curren = scrollLeftRef.current) !== null && _scrollLeftRef$curren !== void 0 ? _scrollLeftRef$curren : 0;
+  var sliderLeft = Math.min(currentScrollLeft / zoomedWidth * width, width - sliderWidth);
+  var EDGE_HIT_ZONE = 6;
+  var handleMouseDown = useCallback(function (e) {
+    var _containerElRef$curre;
+    e.preventDefault();
+    var rect = (_containerElRef$curre = containerElRef.current) === null || _containerElRef$curre === void 0 ? void 0 : _containerElRef$curre.getBoundingClientRect();
+    if (rect == null) return;
+    var clickX = e.clientX - rect.left;
+
+    // When not zoomed, clicking the minimap zooms into a +-50px region
+    if (!isZoomed) {
+      var regionPx = 100; // 50px on each side of the click
+      var targetZoom = width / regionPx;
+      onZoomToPosition === null || onZoomToPosition === void 0 || onZoomToPosition(clickX / width, targetZoom);
+      return;
+    }
+    var sliderRight = sliderLeft + sliderWidth;
+    var isNearLeftEdge = Math.abs(clickX - sliderLeft) <= EDGE_HIT_ZONE && clickX <= sliderLeft + EDGE_HIT_ZONE;
+    var isNearRightEdge = Math.abs(clickX - sliderRight) <= EDGE_HIT_ZONE && clickX >= sliderRight - EDGE_HIT_ZONE;
+
+    // Edge drag: resize the zoomed region by dragging one bound
+    if (isNearLeftEdge || isNearRightEdge) {
+      var edge = isNearLeftEdge ? 'left' : 'right';
+      // The opposite edge stays fixed in minimap coordinates
+      var anchorPx = edge === 'left' ? sliderRight : sliderLeft;
+      var MIN_SLIDER_PX = 10;
+      var edgeRafId = null;
+      var pendingEdgeEvent = null;
+      var applyEdgeMove = function applyEdgeMove() {
+        var _containerElRef$curre2;
+        edgeRafId = null;
+        var moveEvent = pendingEdgeEvent;
+        if (moveEvent == null) return;
+        pendingEdgeEvent = null;
+        var moveRect = (_containerElRef$curre2 = containerElRef.current) === null || _containerElRef$curre2 === void 0 ? void 0 : _containerElRef$curre2.getBoundingClientRect();
+        if (moveRect == null) return;
+        var edgePx = moveEvent.clientX - moveRect.left;
+        edgePx = Math.max(0, Math.min(edgePx, width));
+        var newLeft;
+        var newRight;
+        if (edge === 'left') {
+          newLeft = Math.min(edgePx, anchorPx - MIN_SLIDER_PX);
+          newRight = anchorPx;
+        } else {
+          newLeft = anchorPx;
+          newRight = Math.max(edgePx, anchorPx + MIN_SLIDER_PX);
+        }
+        var newSliderWidth = newRight - newLeft;
+        var newZoom = width / newSliderWidth;
+        var newScrollLeft = newLeft * newZoom;
+        onSetZoomWithScroll === null || onSetZoomWithScroll === void 0 || onSetZoomWithScroll(newZoom, newScrollLeft);
+      };
+      var handleEdgeMove = function handleEdgeMove(moveEvent) {
+        pendingEdgeEvent = moveEvent;
+        if (edgeRafId === null) {
+          edgeRafId = requestAnimationFrame(applyEdgeMove);
+        }
+      };
+      var _handleEdgeUp = function handleEdgeUp() {
+        if (edgeRafId !== null) {
+          cancelAnimationFrame(edgeRafId);
+          // Apply final position immediately on mouse up
+          applyEdgeMove();
+        }
+        document.removeEventListener('mousemove', handleEdgeMove);
+        document.removeEventListener('mouseup', _handleEdgeUp);
+      };
+      document.addEventListener('mousemove', handleEdgeMove);
+      document.addEventListener('mouseup', _handleEdgeUp);
+      return;
+    }
+
+    // Check if clicking inside the slider — start pan drag
+    if (clickX >= sliderLeft && clickX <= sliderRight) {
+      isDragging.current = true;
+      dragStartX.current = e.clientX;
+      dragStartScrollLeft.current = currentScrollLeft;
+    } else {
+      var _containerRef$current, _containerRef$current2, _containerRef$current3, _containerRef$current4;
+      // Click-to-jump: center viewport at click position
+      var targetCenter = clickX / width * zoomedWidth;
+      var containerWidth = (_containerRef$current = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.clientWidth) !== null && _containerRef$current !== void 0 ? _containerRef$current : width;
+      var newScrollLeft = targetCenter - containerWidth / 2;
+      if (containerRef.current != null) {
+        containerRef.current.scrollLeft = Math.max(0, Math.min(newScrollLeft, zoomedWidth - containerWidth));
+      }
+      // Also start dragging from new position
+      isDragging.current = true;
+      dragStartX.current = e.clientX;
+      dragStartScrollLeft.current = (_containerRef$current3 = (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.scrollLeft) !== null && _containerRef$current3 !== void 0 ? _containerRef$current3 : 0;
+    }
+    var handleMouseMove = function handleMouseMove(moveEvent) {
+      var _containerRef$current5, _containerRef$current6;
+      if (!isDragging.current) return;
+      var delta = moveEvent.clientX - dragStartX.current;
+      var scrollDelta = delta * (zoomedWidth / width);
+      var containerWidth = (_containerRef$current5 = (_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.clientWidth) !== null && _containerRef$current5 !== void 0 ? _containerRef$current5 : width;
+      if (containerRef.current != null) {
+        containerRef.current.scrollLeft = Math.max(0, Math.min(dragStartScrollLeft.current + scrollDelta, zoomedWidth - containerWidth));
+      }
+    };
+    var _handleMouseUp = function handleMouseUp() {
+      isDragging.current = false;
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', _handleMouseUp);
+    };
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', _handleMouseUp);
+  }, [sliderLeft, sliderWidth, currentScrollLeft, width, zoomedWidth, containerRef, isZoomed, onZoomToPosition, onSetZoomWithScroll]);
+
+  // Forward wheel events to the container so zoom (Ctrl+scroll) works on the minimap
+  useEffect(function () {
+    var el = containerElRef.current;
+    if (el == null) return;
+    var handleWheel = function handleWheel(e) {
+      var _containerRef$current7;
+      if (!e.ctrlKey && !e.metaKey) return;
+      e.preventDefault();
+      (_containerRef$current7 = containerRef.current) === null || _containerRef$current7 === void 0 || _containerRef$current7.dispatchEvent(new WheelEvent('wheel', {
+        deltaY: e.deltaY,
+        deltaX: e.deltaX,
+        ctrlKey: e.ctrlKey,
+        metaKey: e.metaKey,
+        clientX: e.clientX,
+        clientY: e.clientY,
+        bubbles: true
+      }));
+    };
+    el.addEventListener('wheel', handleWheel, {
+      passive: false
+    });
+    return function () {
+      el.removeEventListener('wheel', handleWheel);
+    };
+  }, [containerRef]);
+  if (width <= 0) return null;
+  return /*#__PURE__*/_jsxs("div", {
+    ref: containerElRef,
+    className: "relative select-none cursor-pointer",
+    style: {
+      width: width,
+      height: MINIMAP_HEIGHT
+    },
+    onMouseDown: handleMouseDown,
+    children: [/*#__PURE__*/_jsx("canvas", {
+      ref: canvasRef,
+      style: {
+        width: width,
+        height: MINIMAP_HEIGHT,
+        display: 'block'
+      }
+    }), isZoomed && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "absolute top-0 bottom-0 bg-black/30 dark:bg-black/50",
+        style: {
+          left: 0,
+          width: Math.max(0, sliderLeft)
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- zoomedWidth intentionally excluded: canvas is zoom-independent
-    }, [table, width, totalHeight, maxDepth, colorBy, colors, isDarkMode, profileSource]);
-    const isZoomed = zoomedWidth > width;
-    const sliderWidth = Math.max(20, (width / zoomedWidth) * width);
-    // Use scrollLeftRef for positioning — it's pre-set before flushSync during zoom changes,
-    // avoiding the 1-frame lag where viewport.scrollLeft is stale but zoomedWidth is already updated.
-    const currentScrollLeft = scrollLeftRef.current ?? 0;
-    const sliderLeft = Math.min((currentScrollLeft / zoomedWidth) * width, width - sliderWidth);
-    const EDGE_HIT_ZONE = 6;
-    const handleMouseDown = useCallback((e) => {
-        e.preventDefault();
-        const rect = containerElRef.current?.getBoundingClientRect();
-        if (rect == null)
-            return;
-        const clickX = e.clientX - rect.left;
-        // When not zoomed, clicking the minimap zooms into a +-50px region
-        if (!isZoomed) {
-            const regionPx = 100; // 50px on each side of the click
-            const targetZoom = width / regionPx;
-            onZoomToPosition?.(clickX / width, targetZoom);
-            return;
+      }), /*#__PURE__*/_jsx("div", {
+        className: "absolute top-0 bottom-0 border-x-2 border-gray-500",
+        style: {
+          left: sliderLeft,
+          width: sliderWidth
         }
-        const sliderRight = sliderLeft + sliderWidth;
-        const isNearLeftEdge = Math.abs(clickX - sliderLeft) <= EDGE_HIT_ZONE && clickX <= sliderLeft + EDGE_HIT_ZONE;
-        const isNearRightEdge = Math.abs(clickX - sliderRight) <= EDGE_HIT_ZONE && clickX >= sliderRight - EDGE_HIT_ZONE;
-        // Edge drag: resize the zoomed region by dragging one bound
-        if (isNearLeftEdge || isNearRightEdge) {
-            const edge = isNearLeftEdge ? 'left' : 'right';
-            // The opposite edge stays fixed in minimap coordinates
-            const anchorPx = edge === 'left' ? sliderRight : sliderLeft;
-            const MIN_SLIDER_PX = 10;
-            let edgeRafId = null;
-            let pendingEdgeEvent = null;
-            const applyEdgeMove = () => {
-                edgeRafId = null;
-                const moveEvent = pendingEdgeEvent;
-                if (moveEvent == null)
-                    return;
-                pendingEdgeEvent = null;
-                const moveRect = containerElRef.current?.getBoundingClientRect();
-                if (moveRect == null)
-                    return;
-                let edgePx = moveEvent.clientX - moveRect.left;
-                edgePx = Math.max(0, Math.min(edgePx, width));
-                let newLeft;
-                let newRight;
-                if (edge === 'left') {
-                    newLeft = Math.min(edgePx, anchorPx - MIN_SLIDER_PX);
-                    newRight = anchorPx;
-                }
-                else {
-                    newLeft = anchorPx;
-                    newRight = Math.max(edgePx, anchorPx + MIN_SLIDER_PX);
-                }
-                const newSliderWidth = newRight - newLeft;
-                const newZoom = width / newSliderWidth;
-                const newScrollLeft = newLeft * newZoom;
-                onSetZoomWithScroll?.(newZoom, newScrollLeft);
-            };
-            const handleEdgeMove = (moveEvent) => {
-                pendingEdgeEvent = moveEvent;
-                if (edgeRafId === null) {
-                    edgeRafId = requestAnimationFrame(applyEdgeMove);
-                }
-            };
-            const handleEdgeUp = () => {
-                if (edgeRafId !== null) {
-                    cancelAnimationFrame(edgeRafId);
-                    // Apply final position immediately on mouse up
-                    applyEdgeMove();
-                }
-                document.removeEventListener('mousemove', handleEdgeMove);
-                document.removeEventListener('mouseup', handleEdgeUp);
-            };
-            document.addEventListener('mousemove', handleEdgeMove);
-            document.addEventListener('mouseup', handleEdgeUp);
-            return;
+      }), /*#__PURE__*/_jsx("div", {
+        className: "absolute top-0 bottom-0 cursor-col-resize",
+        style: {
+          left: sliderLeft - EDGE_HIT_ZONE,
+          width: EDGE_HIT_ZONE * 2
         }
-        // Check if clicking inside the slider — start pan drag
-        if (clickX >= sliderLeft && clickX <= sliderRight) {
-            isDragging.current = true;
-            dragStartX.current = e.clientX;
-            dragStartScrollLeft.current = currentScrollLeft;
+      }), /*#__PURE__*/_jsx("div", {
+        className: "absolute top-0 bottom-0 cursor-col-resize",
+        style: {
+          left: sliderLeft + sliderWidth - EDGE_HIT_ZONE,
+          width: EDGE_HIT_ZONE * 2
         }
-        else {
-            // Click-to-jump: center viewport at click position
-            const targetCenter = (clickX / width) * zoomedWidth;
-            const containerWidth = containerRef.current?.clientWidth ?? width;
-            const newScrollLeft = targetCenter - containerWidth / 2;
-            if (containerRef.current != null) {
-                containerRef.current.scrollLeft = Math.max(0, Math.min(newScrollLeft, zoomedWidth - containerWidth));
-            }
-            // Also start dragging from new position
-            isDragging.current = true;
-            dragStartX.current = e.clientX;
-            dragStartScrollLeft.current = containerRef.current?.scrollLeft ?? 0;
+      }), /*#__PURE__*/_jsx("div", {
+        className: "absolute top-0 bottom-0 bg-black/30 dark:bg-black/50",
+        style: {
+          left: sliderLeft + sliderWidth,
+          right: 0
         }
-        const handleMouseMove = (moveEvent) => {
-            if (!isDragging.current)
-                return;
-            const delta = moveEvent.clientX - dragStartX.current;
-            const scrollDelta = delta * (zoomedWidth / width);
-            const containerWidth = containerRef.current?.clientWidth ?? width;
-            if (containerRef.current != null) {
-                containerRef.current.scrollLeft = Math.max(0, Math.min(dragStartScrollLeft.current + scrollDelta, zoomedWidth - containerWidth));
-            }
-        };
-        const handleMouseUp = () => {
-            isDragging.current = false;
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-        };
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-    }, [
-        sliderLeft,
-        sliderWidth,
-        currentScrollLeft,
-        width,
-        zoomedWidth,
-        containerRef,
-        isZoomed,
-        onZoomToPosition,
-        onSetZoomWithScroll,
-    ]);
-    // Forward wheel events to the container so zoom (Ctrl+scroll) works on the minimap
-    useEffect(() => {
-        const el = containerElRef.current;
-        if (el == null)
-            return;
-        const handleWheel = (e) => {
-            if (!e.ctrlKey && !e.metaKey)
-                return;
-            e.preventDefault();
-            containerRef.current?.dispatchEvent(new WheelEvent('wheel', {
-                deltaY: e.deltaY,
-                deltaX: e.deltaX,
-                ctrlKey: e.ctrlKey,
-                metaKey: e.metaKey,
-                clientX: e.clientX,
-                clientY: e.clientY,
-                bubbles: true,
-            }));
-        };
-        el.addEventListener('wheel', handleWheel, { passive: false });
-        return () => {
-            el.removeEventListener('wheel', handleWheel);
-        };
-    }, [containerRef]);
-    if (width <= 0)
-        return null;
-    return (_jsxs("div", { ref: containerElRef, className: "relative select-none cursor-pointer", style: { width, height: MINIMAP_HEIGHT }, onMouseDown: handleMouseDown, children: [_jsx("canvas", { ref: canvasRef, style: {
-                    width,
-                    height: MINIMAP_HEIGHT,
-                    display: 'block',
-                } }), isZoomed && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute top-0 bottom-0 bg-black/30 dark:bg-black/50", style: { left: 0, width: Math.max(0, sliderLeft) } }), _jsx("div", { className: "absolute top-0 bottom-0 border-x-2 border-gray-500", style: { left: sliderLeft, width: sliderWidth } }), _jsx("div", { className: "absolute top-0 bottom-0 cursor-col-resize", style: { left: sliderLeft - EDGE_HIT_ZONE, width: EDGE_HIT_ZONE * 2 } }), _jsx("div", { className: "absolute top-0 bottom-0 cursor-col-resize", style: { left: sliderLeft + sliderWidth - EDGE_HIT_ZONE, width: EDGE_HIT_ZONE * 2 } }), _jsx("div", { className: "absolute top-0 bottom-0 bg-black/30 dark:bg-black/50", style: { left: sliderLeft + sliderWidth, right: 0 } })] }))] }));
-});
+      })]
+    })]
+  });
+});

package/dist/ProfileFlameGraph/FlameGraphArrow/TextWithEllipsis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextWithEllipsis.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/TextWithEllipsis.tsx"],"names":[],"mappings":"AAmBA,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACf;AA2CD,iBAAS,gBAAgB,CAAC,EAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAC,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAuBjE;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"TextWithEllipsis.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/TextWithEllipsis.tsx"],"names":[],"mappings":"AAmBA,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACf;AA2CD,iBAAS,gBAAgB,CAAC,EAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAC,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAwBjE;AAED,eAAe,gBAAgB,CAAC"}

package/dist/ProfileFlameGraph/FlameGraphArrow/TextWithEllipsis.js

@@ -1,4 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -11,54 +16,74 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
+
+/* eslint-disable react-hooks/set-state-in-effect */
+
 import { useEffect, useRef, useState } from 'react';
-import { useQueryState } from 'nuqs';
-import { stringParam } from '../../hooks/urlParsers';
+import { useURLState } from '@parca/components';
+import { jsx as _jsx } from "react/jsx-runtime";
 function calculateTruncatedText(text, textElement, maxWidth) {
-    // Create a temporary element for measurement
-    const tempElement = textElement.cloneNode();
-    tempElement.textContent = text;
-    textElement.parentElement?.appendChild(tempElement);
-    // If the text fits, return it
-    const fullWidth = tempElement.getComputedTextLength();
-    if (fullWidth <= maxWidth) {
-        textElement.parentElement?.removeChild(tempElement);
-        return text;
-    }
-    // Binary search to find the maximum text that fits
-    let start = 0;
-    let end = text.length;
-    let result = text;
-    while (start < end) {
-        const mid = Math.floor((start + end + 1) / 2);
-        const truncated = text.slice(-mid);
-        tempElement.textContent = truncated;
-        const currentWidth = tempElement.getComputedTextLength();
-        if (currentWidth <= maxWidth) {
-            result = truncated;
-            start = mid;
-        }
-        else {
-            end = mid - 1;
-        }
+  var _textElement$parentEl, _textElement$parentEl3;
+  // Create a temporary element for measurement
+  var tempElement = textElement.cloneNode();
+  tempElement.textContent = text;
+  (_textElement$parentEl = textElement.parentElement) === null || _textElement$parentEl === void 0 || _textElement$parentEl.appendChild(tempElement);
+
+  // If the text fits, return it
+  var fullWidth = tempElement.getComputedTextLength();
+  if (fullWidth <= maxWidth) {
+    var _textElement$parentEl2;
+    (_textElement$parentEl2 = textElement.parentElement) === null || _textElement$parentEl2 === void 0 || _textElement$parentEl2.removeChild(tempElement);
+    return text;
+  }
+
+  // Binary search to find the maximum text that fits
+  var start = 0;
+  var end = text.length;
+  var result = text;
+  while (start < end) {
+    var mid = Math.floor((start + end + 1) / 2);
+    var truncated = text.slice(-mid);
+    tempElement.textContent = truncated;
+    var currentWidth = tempElement.getComputedTextLength();
+    if (currentWidth <= maxWidth) {
+      result = truncated;
+      start = mid;
+    } else {
+      end = mid - 1;
     }
-    textElement.parentElement?.removeChild(tempElement);
-    return result;
+  }
+  (_textElement$parentEl3 = textElement.parentElement) === null || _textElement$parentEl3 === void 0 || _textElement$parentEl3.removeChild(tempElement);
+  return result;
 }
-function TextWithEllipsis({ text, x, y, width }) {
-    const textRef = useRef(null);
-    const [displayText, setDisplayText] = useState(text);
-    const [alignFunctionName] = useQueryState('align_function_name', stringParam.withDefault('left'));
-    const showFunctionNameFromLeft = alignFunctionName === 'left';
-    useEffect(() => {
-        const textElement = textRef.current;
-        if (textElement === null)
-            return;
-        const newText = showFunctionNameFromLeft
-            ? text
-            : calculateTruncatedText(text, textElement, width);
-        setDisplayText(newText);
-    }, [text, width, showFunctionNameFromLeft]);
-    return (_jsx("text", { ref: textRef, x: x, y: y, className: "text-xs", children: displayText }));
+function TextWithEllipsis(_ref) {
+  'use no memo';
+
+  var text = _ref.text,
+    x = _ref.x,
+    y = _ref.y,
+    width = _ref.width;
+  var textRef = useRef(null);
+  var _useState = useState(text),
+    _useState2 = _slicedToArray(_useState, 2),
+    displayText = _useState2[0],
+    setDisplayText = _useState2[1];
+  var _useURLState = useURLState('align_function_name'),
+    _useURLState2 = _slicedToArray(_useURLState, 1),
+    alignFunctionName = _useURLState2[0];
+  var showFunctionNameFromLeft = alignFunctionName === 'left' || alignFunctionName === undefined;
+  useEffect(function () {
+    var textElement = textRef.current;
+    if (textElement === null) return;
+    var newText = showFunctionNameFromLeft ? text : calculateTruncatedText(text, textElement, width);
+    setDisplayText(newText);
+  }, [text, width, showFunctionNameFromLeft]);
+  return /*#__PURE__*/_jsx("text", {
+    ref: textRef,
+    x: x,
+    y: y,
+    className: "text-xs",
+    children: displayText
+  });
 }
-export default TextWithEllipsis;
+export default TextWithEllipsis;