@parca/profile 0.19.121 → 0.19.123

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.19.123](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.122...@parca/profile@0.19.123) (2026-02-16)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.19.122](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.121...@parca/profile@0.19.122) (2026-02-13)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.19.121](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.120...@parca/profile@0.19.121) (2026-02-12)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltipArrow/Content.js

@@ -35,6 +35,6 @@ const TooltipMetaInfo = ({ table, row }) => {
     const labels = labelPairs.map((l) => (_jsx("span", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: `${l[0]}="${l[1]}"` }, l[0])));
     const isMappingBuildIDAvailable = mappingBuildID !== null && mappingBuildID !== '';
     const inlinedText = inlined === null ? 'merged' : inlined ? 'yes' : 'no';
-    return (_jsxs(_Fragment, { children: [timestamp != null && timestamp !== 0n && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4 pt-2", children: "Timestamp" }), _jsx("td", { className: "w-3/4 pt-2 break-all", children: formatDateTimeDownToMS(new Date(Number(timestamp / 1000000n)), timezone) })] })), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "File" }), _jsx("td", { className: "w-3/4 break-all", children: functionFilename === '' ? (_jsx(NoData, {})) : (_jsx("div", { className: "flex gap-4", children: _jsx("div", { className: "whitespace-nowrap text-left", children: _jsx(ExpandOnHover, { value: file, displayValue: truncateStringReverse(file, 30) }) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Address" }), _jsx("td", { className: "w-3/4 break-all", children: locationAddress === 0n ? _jsx(NoData, {}) : _jsx("div", { children: hexifyAddress(locationAddress) }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Inlined" }), _jsx("td", { className: "w-3/4 break-all", children: inlinedText })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Binary" }), _jsx("td", { className: "w-3/4 break-all", children: (mappingFile != null ? getLastItem(mappingFile) : null) ?? _jsx(NoData, {}) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Build Id" }), _jsx("td", { className: "w-3/4 break-all", children: isMappingBuildIDAvailable ? _jsx("div", { children: truncateString(mappingBuildID, 28) }) : _jsx(NoData, {}) })] }), labelPairs.length > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Labels" }), _jsx("td", { className: "w-3/4 break-all", children: labels })] }))] }));
+    return (_jsxs(_Fragment, { children: [timestamp != null && timestamp !== 0n && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4 pt-2", children: "Timestamp" }), _jsx("td", { className: "w-3/4 pt-2 break-all", children: formatDateTimeDownToMS(new Date(Number(timestamp / 1000000n)), timezone) })] })), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "File" }), _jsx("td", { className: "w-3/4 break-all", children: functionFilename === '' ? (_jsx(NoData, {})) : (_jsx("div", { className: "flex gap-4", children: _jsx("div", { className: "whitespace-nowrap text-left", children: _jsx(ExpandOnHover, { value: file, displayValue: truncateStringReverse(file, 50) }) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Address" }), _jsx("td", { className: "w-3/4 break-all", children: locationAddress === 0n ? _jsx(NoData, {}) : _jsx("div", { children: hexifyAddress(locationAddress) }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Inlined" }), _jsx("td", { className: "w-3/4 break-all", children: inlinedText })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Binary" }), _jsx("td", { className: "w-3/4 break-all", children: (mappingFile != null ? getLastItem(mappingFile) : null) ?? _jsx(NoData, {}) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Build Id" }), _jsx("td", { className: "w-3/4 break-all", children: isMappingBuildIDAvailable ? _jsx("div", { children: truncateString(mappingBuildID, 28) }) : _jsx(NoData, {}) })] }), labelPairs.length > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Labels" }), _jsx("td", { className: "w-3/4 break-all", children: labels })] }))] }));
 };
 export default GraphTooltipArrowContent;

package/dist/MetricsGraph/useMetricsGraphDimensions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMetricsGraphDimensions.d.ts","sourceRoot":"","sources":["../../src/MetricsGraph/useMetricsGraphDimensions.ts"],"names":[],"mappings":"AAiBA,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CAChB;AAMD,eAAO,MAAM,yBAAyB,GACpC,WAAW,OAAO,EAClB,gBAAc,KACb,sBA4BF,CAAC"}
+{"version":3,"file":"useMetricsGraphDimensions.d.ts","sourceRoot":"","sources":["../../src/MetricsGraph/useMetricsGraphDimensions.ts"],"names":[],"mappings":"AAiBA,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CAChB;AAMD,eAAO,MAAM,yBAAyB,GACpC,WAAW,OAAO,EAClB,gBAAc,KACb,sBA8BF,CAAC"}

package/dist/MetricsGraph/useMetricsGraphDimensions.js

@@ -32,9 +32,11 @@ export const useMetricsGraphDimensions = (comparing, isMini = false) => {
         width = width / 2 - 32;
     }
     const height = isMini ? MINI_VARIANT_HEIGHT : Math.min(width / 2.5, maxHeight);
-    const heightStyle = `min(${maxHeight + margin}px, ${comparing
-        ? profileExplorer.metricsGraph.maxHeightStyle.compareMode
-        : profileExplorer.metricsGraph.maxHeightStyle.default})`;
+    const heightStyle = isMini
+        ? `${MINI_VARIANT_HEIGHT + margin}px`
+        : `min(${maxHeight + margin}px, ${comparing
+            ? profileExplorer.metricsGraph.maxHeightStyle.compareMode
+            : profileExplorer.metricsGraph.maxHeightStyle.default})`;
     return {
         width,
         height,

package/dist/ProfileFlameChart/SamplesStrips/SamplesGraph/index.js

@@ -81,7 +81,7 @@ const ZoomWindow = ({ zoomWindow, onZoomWindowChange, setIsHoveringDragHandle, }
                 height: '100%',
                 width: zoomWindowState[1] - zoomWindowState[0],
                 left: zoomWindowState[0],
-            }, className: cx('bg-gray-500/50 dark:bg-gray-100/90 absolute top-0 border-x-2 border-gray-900 dark:border-gray-100 z-20'), children: [_jsx("div", { className: "w-3 h-4 absolute top-0 left-[-7px] rounded-b bg-gray-200 dark:bg-gray-600  cursor-ew-resize flex justify-center z-30", onMouseDown: e => {
+            }, className: cx('bg-gray-500/50 dark:bg-gray-400/90 absolute top-0 border-x-2 border-gray-900 dark:border-gray-100 z-20'), children: [_jsx("div", { className: "w-3 h-4 absolute top-0 left-[-7px] rounded-b bg-gray-200 dark:bg-gray-600  cursor-ew-resize flex justify-center z-30", onMouseDown: e => {
                         setDraggingStart(true);
                         e.stopPropagation();
                         e.preventDefault();

package/dist/ProfileFlameChart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileFlameChart/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAoC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAQpF,OAAO,EAAwB,WAAW,EAAQ,MAAM,eAAe,CAAC;AAIxE,OAAO,EAAsB,aAAa,EAAC,MAAM,kBAAkB,CAAC;AACpE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,oCAAoC,CAAC;AA4CpE,UAAU,sBAAsB;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AA+BD,eAAO,MAAM,iBAAiB,GAAI,6JAY/B,sBAAsB,KAAG,GAAG,CAAC,OA+K/B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileFlameChart/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAoC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAQpF,OAAO,EAAwB,WAAW,EAAQ,MAAM,eAAe,CAAC;AAKxE,OAAO,EAAsB,aAAa,EAAC,MAAM,kBAAkB,CAAC;AACpE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,oCAAoC,CAAC;AA4CpE,UAAU,sBAAsB;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AA+BD,eAAO,MAAM,iBAAiB,GAAI,6JAY/B,sBAAsB,KAAG,GAAG,CAAC,OAqM/B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/ProfileFlameChart/index.js

@@ -15,6 +15,7 @@ import { useEffect, useMemo, useRef } from 'react';
 import { QueryRequest_ReportType } from '@parca/client';
 import { Button, useParcaContext, useURLState, useURLStateCustom, } from '@parca/components';
 import { Matcher, MatcherTypes, Query } from '@parca/parser';
+import { TimeUnits, formatDateTimeDownToMS, formatDuration } from '@parca/utilities';
 import ProfileFlameGraph, { validateFlameChartQuery } from '../ProfileFlameGraph';
 import { boundsFromProfileSource } from '../ProfileFlameGraph/FlameGraphArrow/utils';
 import { MergedProfileSource } from '../ProfileSource';
@@ -71,6 +72,7 @@ const createFilteredProfileSource = (profileSource, selectedTimeframe) => {
 };
 export const ProfileFlameChart = ({ samplesData, queryClient, profileSource, width, total, filtered, profileType, isHalfScreen, metadataMappingFiles, metadataLoading, onSwitchToOneMinute, }) => {
     const { loader } = useParcaContext();
+    const zoomControlsRef = useRef(null);
     const [selectedTimeframe, setSelectedTimeframe] = useURLStateCustom('flamechart_timeframe', TimeframeStateSerializer);
     // Read flamechart dimension from URL state to detect changes
     const [flamechartDimension] = useURLState('flamechart_dimension', {
@@ -150,6 +152,14 @@ export const ProfileFlameChart = ({ samplesData, queryClient, profileSource, wid
     if (samplesData?.loading === true) {
         return _jsx(_Fragment, { children: loader });
     }
-    return (_jsxs("div", { children: [stripsData.cpus.length > 0 && stripsData.data.length > 0 && (_jsx("div", { className: "mb-2", children: _jsx(SamplesStrip, { cpus: stripsData.cpus, data: stripsData.data, selectedTimeframe: selectedTimeframe, onSelectedTimeframe: handleSelectedTimeframe, width: width, bounds: [Number(timeBounds[0] / 1000000n), Number(timeBounds[1] / 1000000n)], stepMs: stripsData.stepMs }) })), selectedTimeframe != null && filteredProfileSource != null ? (_jsx(ProfileFlameGraph, { arrow: flamechartArrow, loading: flamechartLoading, error: flamechartError, profileSource: filteredProfileSource, width: width, total: flamechartTotal, filtered: flamechartFiltered, profileType: profileType, isHalfScreen: isHalfScreen, metadataMappingFiles: metadataMappingFiles, metadataLoading: metadataLoading, isFlameChart: true, curPathArrow: [], setNewCurPathArrow: () => { } })) : (_jsx("div", { className: "flex justify-center items-center py-10 text-gray-500 dark:text-gray-400 text-sm", children: "Select a time range in the samples strips above to view the flamechart." }))] }));
+    return (_jsxs("div", { children: [stripsData.cpus.length > 0 && stripsData.data.length > 0 && (_jsx("div", { className: "mb-2", children: _jsx(SamplesStrip, { cpus: stripsData.cpus, data: stripsData.data, selectedTimeframe: selectedTimeframe, onSelectedTimeframe: handleSelectedTimeframe, width: width, bounds: [Number(timeBounds[0] / 1000000n), Number(timeBounds[1] / 1000000n)], stepMs: stripsData.stepMs }) })), selectedTimeframe != null &&
+                (() => {
+                    const labels = selectedTimeframe.labels.labels
+                        .map(l => `${l.name} = ${l.value}`)
+                        .join(', ');
+                    const durationMs = selectedTimeframe.bounds[1] - selectedTimeframe.bounds[0];
+                    const duration = formatDuration({ [TimeUnits.Milliseconds]: durationMs });
+                    return (_jsxs("div", { className: "flex items-center justify-between px-2 py-1", children: [_jsxs("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: ["Samples matching ", labels, " over ", duration, " from", ' ', formatDateTimeDownToMS(selectedTimeframe.bounds[0]), " to", ' ', formatDateTimeDownToMS(selectedTimeframe.bounds[1])] }), _jsx("div", { ref: zoomControlsRef })] }));
+                })(), selectedTimeframe != null && filteredProfileSource != null ? (_jsx(ProfileFlameGraph, { arrow: flamechartArrow, loading: flamechartLoading, error: flamechartError, profileSource: filteredProfileSource, width: width, total: flamechartTotal, filtered: flamechartFiltered, profileType: profileType, isHalfScreen: isHalfScreen, metadataMappingFiles: metadataMappingFiles, metadataLoading: metadataLoading, isFlameChart: true, curPathArrow: [], setNewCurPathArrow: () => { }, zoomControlsRef: zoomControlsRef })) : (_jsx("div", { className: "flex justify-center items-center py-10 text-gray-500 dark:text-gray-400 text-sm", children: "Select a time range in the samples strips above to view the flamechart." }))] }));
 };
 export default ProfileFlameChart;

package/dist/ProfileFlameGraph/FlameGraphArrow/MiniMap.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Table } from '@uwdata/flechette';
+import { ProfileSource } from '../../ProfileSource';
+import { type colorByColors } from './FlameGraphNodes';
+interface MiniMapProps {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    table: Table;
+    width: number;
+    zoomedWidth: number;
+    totalHeight: number;
+    maxDepth: number;
+    colorByColors: colorByColors;
+    colorBy: string;
+    profileSource: ProfileSource;
+    isDarkMode: boolean;
+    scrollLeft: number;
+}
+export declare const MiniMap: React.NamedExoticComponent<MiniMapProps>;
+export {};
+//# sourceMappingURL=MiniMap.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MiniMap.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/MiniMap.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAKxC,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAY,KAAK,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAYhE,UAAU,YAAY;IACpB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,aAAa,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,0CA8NlB,CAAC"}

package/dist/ProfileFlameGraph/FlameGraphArrow/MiniMap.js

@@ -0,0 +1,173 @@
+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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { 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, }) {
+    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 xScale = width / zoomedWidth;
+        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) * zoomedWidth * xScale;
+            if (nodeWidth < 0.5)
+                continue;
+            const ts = tsCol != null ? Number(tsCol.get(row)) : 0;
+            const x = ((ts - Number(tsBounds[0])) / tsRange) * zoomedWidth * xScale;
+            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);
+        }
+    }, [
+        table,
+        width,
+        zoomedWidth,
+        totalHeight,
+        maxDepth,
+        colorBy,
+        colors,
+        isDarkMode,
+        profileSource,
+    ]);
+    const isZoomed = zoomedWidth > width;
+    const sliderWidth = Math.max(20, (width / zoomedWidth) * width);
+    const sliderLeft = Math.min((scrollLeft / zoomedWidth) * width, width - sliderWidth);
+    const handleMouseDown = useCallback((e) => {
+        e.preventDefault();
+        const rect = containerElRef.current?.getBoundingClientRect();
+        if (rect == null)
+            return;
+        const clickX = e.clientX - rect.left;
+        // Check if clicking inside the slider
+        if (clickX >= sliderLeft && clickX <= sliderLeft + sliderWidth) {
+            // Start dragging
+            isDragging.current = true;
+            dragStartX.current = e.clientX;
+            dragStartScrollLeft.current = scrollLeft;
+        }
+        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;
+        }
+        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, scrollLeft, width, zoomedWidth, containerRef]);
+    // 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", style: { width, height: MINIMAP_HEIGHT, cursor: isZoomed ? 'pointer' : 'default' }, onMouseDown: isZoomed ? handleMouseDown : undefined, children: [_jsx("canvas", { ref: canvasRef, style: {
+                    width,
+                    height: MINIMAP_HEIGHT,
+                    display: 'block',
+                    visibility: isZoomed ? 'visible' : 'hidden',
+                } }), 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 bg-black/30 dark:bg-black/50", style: { left: sliderLeft + sliderWidth, right: 0 } })] }))] }));
+});

package/dist/ProfileFlameGraph/FlameGraphArrow/ZoomControls.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface ZoomControlsProps {
+    zoomLevel: number;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoom: () => void;
+    portalRef?: React.RefObject<HTMLDivElement | null>;
+}
+export declare const ZoomControls: ({ zoomLevel, zoomIn, zoomOut, resetZoom, portalRef, }: ZoomControlsProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=ZoomControls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ZoomControls.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/ZoomControls.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,iBAAiB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACpD;AAED,eAAO,MAAM,YAAY,GAAI,uDAM1B,iBAAiB,KAAG,KAAK,CAAC,GAAG,CAAC,OAkChC,CAAC"}

package/dist/ProfileFlameGraph/FlameGraphArrow/ZoomControls.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { createPortal } from 'react-dom';
+export const ZoomControls = ({ zoomLevel, zoomIn, zoomOut, resetZoom, portalRef, }) => {
+    const controls = (_jsxs("div", { className: "flex items-center gap-1 rounded-md border border-gray-200 bg-white/90 px-1 py-0.5 shadow-sm backdrop-blur-sm dark:border-gray-600 dark:bg-gray-800/90", children: [_jsx("button", { onClick: zoomOut, disabled: zoomLevel <= 1, className: "rounded p-1 text-gray-600 hover:bg-gray-100 disabled:opacity-30 dark:text-gray-300 dark:hover:bg-gray-700", title: "Zoom out", children: _jsx(Icon, { icon: "mdi:minus", width: 16, height: 16 }) }), _jsxs("button", { onClick: resetZoom, className: "min-w-[3rem] px-1 text-center text-xs text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 rounded", title: "Reset zoom", children: [Math.round(zoomLevel * 100), "%"] }), _jsx("button", { onClick: zoomIn, disabled: zoomLevel >= 20, className: "rounded p-1 text-gray-600 hover:bg-gray-100 disabled:opacity-30 dark:text-gray-300 dark:hover:bg-gray-700", title: "Zoom in", children: _jsx(Icon, { icon: "mdi:plus", width: 16, height: 16 }) })] }));
+    if (portalRef?.current != null) {
+        return createPortal(controls, portalRef.current);
+    }
+    return controls;
+};

package/dist/ProfileFlameGraph/FlameGraphArrow/index.d.ts

@@ -46,6 +46,7 @@ interface FlameGraphArrowProps {
     tooltipId?: string;
     maxFrameCount?: number;
     isExpanded?: boolean;
+    zoomControlsRef?: React.RefObject<HTMLDivElement | null>;
 }
 export declare const getMappingColors: (mappingsList: string[], isDarkMode: boolean, currentColorProfile: ColorConfig) => colorByColors;
 export declare const getFilenameColors: (filenamesList: string[], isDarkMode: boolean, currentColorProfile: ColorConfig) => colorByColors;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAQN,MAAM,OAAO,CAAC;AAKf,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAG9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAKlD,OAAO,EAAuB,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAMtE,OAAO,EACL,gBAAgB,EAMjB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,iBAAiB,gBAAgB,CAAC;AAC/C,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AACjD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,aAAa,YAAY,CAAC;AACvC,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,cAAc,aAAa,CAAC;AACzC,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AACjE,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,yBAAyB,uBAAuB,CAAC;AAC9D,eAAO,MAAM,cAAc,aAAa,CAAC;AACzC,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAC7C,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,WAAW,UAAU,CAAC;AACnC,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAEjD,UAAU,oBAAoB;IAC5B,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,UAAU,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC/C,YAAY,EAAE,OAAO,CAAC;IACtB,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,yBAAyB,EAAE,MAAM,EAAE,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,GAC3B,cAAc,MAAM,EAAE,EACtB,YAAY,OAAO,EACnB,qBAAqB,WAAW,KAC/B,aAQF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,eAAe,MAAM,EAAE,EACvB,YAAY,OAAO,EACnB,qBAAqB,WAAW,KAC/B,aAQF,CAAC;AAIF,eAAO,MAAM,eAAe,kDAkR1B,CAAC;AAEH,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAQN,MAAM,OAAO,CAAC;AAKf,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAG9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAMlD,OAAO,EAAuB,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAStE,OAAO,EACL,gBAAgB,EAOjB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,iBAAiB,gBAAgB,CAAC;AAC/C,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AACjD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,aAAa,YAAY,CAAC;AACvC,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,cAAc,aAAa,CAAC;AACzC,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AACjE,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,yBAAyB,uBAAuB,CAAC;AAC9D,eAAO,MAAM,cAAc,aAAa,CAAC;AACzC,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAC7C,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,WAAW,UAAU,CAAC;AACnC,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAEjD,UAAU,oBAAoB;IAC5B,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,UAAU,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC/C,YAAY,EAAE,OAAO,CAAC;IACtB,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,yBAAyB,EAAE,MAAM,EAAE,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CAC1D;AAED,eAAO,MAAM,gBAAgB,GAC3B,cAAc,MAAM,EAAE,EACtB,YAAY,OAAO,EACnB,qBAAqB,WAAW,KAC/B,aAQF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,eAAe,MAAM,EAAE,EACvB,YAAY,OAAO,EACnB,qBAAqB,WAAW,KAC/B,aAQF,CAAC;AAIF,eAAO,MAAM,eAAe,kDAuU1B,CAAC;AAEH,eAAe,eAAe,CAAC"}

package/dist/ProfileFlameGraph/FlameGraphArrow/index.js

@@ -16,18 +16,22 @@ import { tableFromIPC } from '@uwdata/flechette';
 import { useContextMenu } from 'react-contexify';
 import { FlameGraphSkeleton, SandwichFlameGraphSkeleton, useParcaContext } from '@parca/components';
 import { USER_PREFERENCES, useCurrentColorProfile, useUserPreference } from '@parca/hooks';
-import { getColorForFeature, selectDarkMode, useAppSelector } from '@parca/store';
+import { getColorForFeature } from '@parca/store';
 import { useProfileFilters } from '../../ProfileView/components/ProfileFilters/useProfileFilters';
 import { useProfileViewContext } from '../../ProfileView/context/ProfileViewContext';
+import { TimelineGuide } from '../../TimelineGuide';
 import { alignedUint8Array } from '../../utils';
 import ContextMenuWrapper from './ContextMenuWrapper';
 import { FlameNode, RowHeight } from './FlameGraphNodes';
 import { MemoizedTooltip } from './MemoizedTooltip';
+import { MiniMap } from './MiniMap';
 import { TooltipProvider } from './TooltipContext';
+import { ZoomControls } from './ZoomControls';
 import { useBatchedRendering } from './useBatchedRendering';
 import { useScrollViewport } from './useScrollViewport';
 import { useVisibleNodes } from './useVisibleNodes';
-import { extractFeature, extractFilenameFeature, getCurrentPathFrameData, getMaxDepth, isCurrentPathFrameMatch, } from './utils';
+import { useZoom } from './useZoom';
+import { boundsFromProfileSource, extractFeature, extractFilenameFeature, getCurrentPathFrameData, getMaxDepth, isCurrentPathFrameMatch, } from './utils';
 export const FIELD_LABELS_ONLY = 'labels_only';
 export const FIELD_MAPPING_FILE = 'mapping_file';
 export const FIELD_MAPPING_BUILD_ID = 'mapping_build_id';
@@ -66,12 +70,11 @@ export const getFilenameColors = (filenamesList, isDarkMode, currentColorProfile
     return colors;
 };
 const noop = () => { };
-export const FlameGraphArrow = memo(function FlameGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, profileSource, compareAbsolute, isFlameChart = false, isRenderedAsFlamegraph = false, isInSandwichView = false, isHalfScreen, tooltipId = 'default', maxFrameCount, isExpanded = false, mappingsListFromMetadata, filenamesListFromMetadata, colorBy, }) {
+export const FlameGraphArrow = memo(function FlameGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, profileSource, compareAbsolute, isFlameChart = false, isRenderedAsFlamegraph = false, isInSandwichView = false, isHalfScreen, tooltipId = 'default', maxFrameCount, isExpanded = false, mappingsListFromMetadata, filenamesListFromMetadata, colorBy, zoomControlsRef, }) {
     const [highlightSimilarStacksPreference] = useUserPreference(USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key);
     const [hoveringRow, setHoveringRow] = useState(undefined);
     const [dockedMetainfo] = useUserPreference(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
-    const isDarkMode = useAppSelector(selectDarkMode);
-    const { perf } = useParcaContext();
+    const { perf, isDarkMode } = useParcaContext();
     const table = useMemo(() => {
         const result = tableFromIPC(alignedUint8Array(arrow.record), { useBigInt: true });
         if (perf?.setMeasurement != null) {
@@ -150,6 +153,13 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({ arrow, total, fil
         : (deferredEffectiveDepth + 1) * RowHeight;
     // Get the viewport of the container, this is used to determine which rows are visible.
     const viewport = useScrollViewport(containerRef);
+    const isZoomEnabled = isFlameChart;
+    const { zoomLevel, zoomIn, zoomOut, resetZoom } = useZoom(isZoomEnabled ? containerRef : { current: null });
+    const zoomedWidth = isZoomEnabled ? Math.round((width ?? 1) * zoomLevel) : width ?? 0;
+    // Reset zoom when the data changes (e.g. new query, different time range)
+    useEffect(() => {
+        resetZoom();
+    }, [table, resetZoom]);
     // To find the selected row, we must walk the current path and look at which
     // children of the current frame matches the path element exactly. Until the
     // end, the row we find at the end is our selected row.
@@ -178,7 +188,7 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({ arrow, total, fil
         table,
         viewport,
         total,
-        width: width ?? 1,
+        width: zoomedWidth,
         selectedRow,
         effectiveDepth: deferredEffectiveDepth,
     });
@@ -199,10 +209,11 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({ arrow, total, fil
     useEffect(() => {
         setSvgElement(svg.current);
     }, [tooltipId]);
-    return (_jsx(TooltipProvider, { table: table, total: total, totalUnfiltered: total + filtered, profileType: profileType, unit: arrow.unit, compareAbsolute: compareAbsolute, tooltipId: tooltipId, children: _jsxs("div", { className: "relative", children: [_jsx(ContextMenuWrapper, { ref: contextMenuRef, menuId: MENU_ID, table: table, total: total, totalUnfiltered: total + filtered, compareAbsolute: compareAbsolute, resetPath: () => setCurPath([]), hideMenu: hideAll, hideBinary: hideBinary, unit: arrow.unit, profileType: profileType, isInSandwichView: isInSandwichView }), _jsx(MemoizedTooltip, { contextElement: svgElement, dockedMetainfo: dockedMetainfo }), showSkeleton && (_jsx("div", { className: "absolute inset-0 z-10", children: isRenderedAsFlamegraph ? (_jsx(SandwichFlameGraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode })) : (_jsx(FlameGraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode })) })), _jsx("div", { ref: containerRef, className: "overflow-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-800 will-change-transform scroll-smooth webkit-overflow-scrolling-touch contain", style: {
+    return (_jsx(TooltipProvider, { table: table, total: total, totalUnfiltered: total + filtered, profileType: profileType, unit: arrow.unit, compareAbsolute: compareAbsolute, tooltipId: tooltipId, children: _jsxs("div", { className: "relative", children: [isZoomEnabled && (_jsx(ZoomControls, { zoomLevel: zoomLevel, zoomIn: zoomIn, zoomOut: zoomOut, resetZoom: resetZoom, portalRef: zoomControlsRef })), _jsx(ContextMenuWrapper, { ref: contextMenuRef, menuId: MENU_ID, table: table, total: total, totalUnfiltered: total + filtered, compareAbsolute: compareAbsolute, resetPath: () => setCurPath([]), hideMenu: hideAll, hideBinary: hideBinary, unit: arrow.unit, profileType: profileType, isInSandwichView: isInSandwichView }), _jsx(MemoizedTooltip, { contextElement: svgElement, dockedMetainfo: dockedMetainfo }), showSkeleton && (_jsx("div", { className: "absolute inset-0 z-10", children: isRenderedAsFlamegraph ? (_jsx(SandwichFlameGraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode })) : (_jsx(FlameGraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode })) })), isZoomEnabled && (_jsx(MiniMap, { containerRef: containerRef, table: table, width: width ?? 0, zoomedWidth: zoomedWidth, totalHeight: totalHeight, maxDepth: deferredEffectiveDepth, colorByColors: colorByColors, colorBy: colorByValue, profileSource: profileSource, isDarkMode: isDarkMode, scrollLeft: viewport.scrollLeft })), _jsx("div", { ref: containerRef, className: `${isZoomEnabled ? '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden' : ''} will-change-transform webkit-overflow-scrolling-touch contain ${!isZoomEnabled ? 'overflow-auto' : ''}`, style: {
                         width: width ?? '100%',
+                        ...(isZoomEnabled ? { overflowX: 'scroll', overflowY: 'auto' } : {}),
                         contain: 'layout style paint',
                         visibility: !showSkeleton ? 'visible' : 'hidden',
-                    }, children: _jsx("svg", { className: "font-robotoMono", width: width ?? 0, height: totalHeight, preserveAspectRatio: "xMinYMid", ref: svg, children: batchedNodes.map(row => (_jsx(FlameNode, { table: table, row: row, colors: colorByColors, colorBy: colorByValue, totalWidth: width ?? 1, height: RowHeight, darkMode: isDarkMode, compareMode: compareMode, colorForSimilarNodes: colorForSimilarNodes, selectedRow: selectedRow, onClick: () => handleRowClick(row), onContextMenu: displayMenu, hoveringRow: highlightSimilarStacksPreference ? hoveringRow : undefined, setHoveringRow: highlightSimilarStacksPreference ? setHoveringRow : noop, isFlameChart: isFlameChart, profileSource: profileSource, isRenderedAsFlamegraph: isRenderedAsFlamegraph, isInSandwichView: isInSandwichView, maxDepth: maxDepth, effectiveDepth: deferredEffectiveDepth, tooltipId: tooltipId }, row))) }) })] }) }));
+                    }, children: _jsxs("div", { children: [isFlameChart && (_jsx(TimelineGuide, { bounds: boundsFromProfileSource(profileSource), width: zoomedWidth, height: totalHeight, margin: 0, ticks: 12, timeUnit: "nanoseconds" })), _jsx("svg", { className: "relative font-robotoMono", width: zoomedWidth, height: totalHeight, preserveAspectRatio: "xMinYMid", ref: svg, children: batchedNodes.map(row => (_jsx(FlameNode, { table: table, row: row, colors: colorByColors, colorBy: colorByValue, totalWidth: zoomedWidth, height: RowHeight, darkMode: isDarkMode, compareMode: compareMode, colorForSimilarNodes: colorForSimilarNodes, selectedRow: selectedRow, onClick: () => handleRowClick(row), onContextMenu: displayMenu, hoveringRow: highlightSimilarStacksPreference ? hoveringRow : undefined, setHoveringRow: highlightSimilarStacksPreference ? setHoveringRow : noop, isFlameChart: isFlameChart, profileSource: profileSource, isRenderedAsFlamegraph: isRenderedAsFlamegraph, isInSandwichView: isInSandwichView, maxDepth: maxDepth, effectiveDepth: deferredEffectiveDepth, tooltipId: tooltipId }, row))) })] }) })] }) }));
 });
 export default FlameGraphArrow;

package/dist/ProfileFlameGraph/FlameGraphArrow/useZoom.d.ts

@@ -0,0 +1,9 @@
+interface UseZoomResult {
+    zoomLevel: number;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoom: () => void;
+}
+export declare const useZoom: (containerRef: React.RefObject<HTMLDivElement | null>) => UseZoomResult;
+export {};
+//# sourceMappingURL=useZoom.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useZoom.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/useZoom.ts"],"names":[],"mappings":"AAuBA,UAAU,aAAa;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAMD,eAAO,MAAM,OAAO,GAAI,cAAc,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,KAAG,aAiF9E,CAAC"}

package/dist/ProfileFlameGraph/FlameGraphArrow/useZoom.js

@@ -0,0 +1,88 @@
+// 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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { useCallback, useEffect, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
+const MIN_ZOOM = 1.0;
+const MAX_ZOOM = 20.0;
+const BUTTON_ZOOM_STEP = 1.5;
+// Sensitivity for trackpad/wheel zoom - smaller = smoother
+const WHEEL_ZOOM_SENSITIVITY = 0.01;
+const clampZoom = (zoom) => {
+    return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom));
+};
+export const useZoom = (containerRef) => {
+    const [zoomLevel, setZoomLevel] = useState(MIN_ZOOM);
+    const zoomLevelRef = useRef(MIN_ZOOM);
+    // Adjust scrollLeft so the content under focalX stays fixed after zoom change.
+    const adjustScroll = useCallback((oldZoom, newZoom, focalX) => {
+        const container = containerRef.current;
+        if (container === null)
+            return;
+        const contentX = container.scrollLeft + focalX;
+        const ratio = contentX / oldZoom;
+        container.scrollLeft = ratio * newZoom - focalX;
+    }, [containerRef]);
+    // Apply a new zoom level around a focal point
+    const applyZoom = useCallback((newZoom, focalX) => {
+        const oldZoom = zoomLevelRef.current;
+        if (newZoom === oldZoom)
+            return;
+        zoomLevelRef.current = newZoom;
+        // flushSync ensures the DOM updates with the new content width before adjustScroll reads it
+        flushSync(() => setZoomLevel(newZoom));
+        adjustScroll(oldZoom, newZoom, focalX);
+    }, [adjustScroll]);
+    const zoomIn = useCallback(() => {
+        const newZoom = clampZoom(zoomLevelRef.current * BUTTON_ZOOM_STEP);
+        const container = containerRef.current;
+        applyZoom(newZoom, container !== null ? container.clientWidth / 2 : 0);
+    }, [containerRef, applyZoom]);
+    const zoomOut = useCallback(() => {
+        const newZoom = clampZoom(zoomLevelRef.current / BUTTON_ZOOM_STEP);
+        const container = containerRef.current;
+        applyZoom(newZoom, container !== null ? container.clientWidth / 2 : 0);
+    }, [containerRef, applyZoom]);
+    const resetZoom = useCallback(() => {
+        zoomLevelRef.current = MIN_ZOOM;
+        setZoomLevel(MIN_ZOOM);
+        const container = containerRef.current;
+        if (container !== null) {
+            container.scrollLeft = 0;
+        }
+    }, [containerRef]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (container === null)
+            return;
+        const handleWheel = (e) => {
+            if (!e.ctrlKey && !e.metaKey)
+                return;
+            e.preventDefault();
+            let delta = e.deltaY;
+            if (e.deltaMode === 1) {
+                delta *= 20;
+            }
+            // Limiting the max zoom step per event to 15%, so to fix the huge jumps in Linux OS.
+            const MAX_FACTOR = 0.15;
+            const rawFactor = -delta * WHEEL_ZOOM_SENSITIVITY;
+            const zoomFactor = 1 + Math.max(-MAX_FACTOR, Math.min(MAX_FACTOR, rawFactor));
+            const newZoom = clampZoom(zoomLevelRef.current * zoomFactor);
+            applyZoom(newZoom, e.clientX - container.getBoundingClientRect().left);
+        };
+        container.addEventListener('wheel', handleWheel, { passive: false });
+        return () => {
+            container.removeEventListener('wheel', handleWheel);
+        };
+    }, [containerRef, applyZoom]);
+    return { zoomLevel, zoomIn, zoomOut, resetZoom };
+};

package/dist/ProfileFlameGraph/index.d.ts

@@ -25,12 +25,13 @@ interface ProfileFlameGraphProps {
     tooltipId?: string;
     maxFrameCount?: number;
     isExpanded?: boolean;
+    zoomControlsRef?: React.RefObject<HTMLDivElement | null>;
 }
 export declare const validateFlameChartQuery: (profileSource: MergedProfileSource) => {
     isValid: boolean;
     isNonDelta: boolean;
     isDurationTooLong: boolean;
 };
-declare const ProfileFlameGraph: ({ arrow, total, filtered, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isFlameChart, profileSource, isInSandwichView, isRenderedAsFlamegraph, tooltipId, maxFrameCount, isExpanded, metadataLoading, }: ProfileFlameGraphProps) => JSX.Element;
+declare const ProfileFlameGraph: ({ arrow, total, filtered, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isFlameChart, profileSource, isInSandwichView, isRenderedAsFlamegraph, tooltipId, maxFrameCount, isExpanded, metadataLoading, zoomControlsRef, }: ProfileFlameGraphProps) => JSX.Element;
 export default ProfileFlameGraph;
 //# sourceMappingURL=index.d.ts.map

package/dist/ProfileFlameGraph/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileFlameGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAO9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,OAAO,EAAC,mBAAmB,EAAE,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAOpE,OAAO,EAAC,gBAAgB,EAA0B,MAAM,yBAAyB,CAAC;AAIlF,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAUD,eAAO,MAAM,uBAAuB,GAClC,eAAe,mBAAmB,KACjC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAKpE,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAqC,qQAoBzD,sBAAsB,KAAG,GAAG,CAAC,OA0T/B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileFlameGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAO9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,OAAO,EAAC,mBAAmB,EAAE,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAMpE,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAC;AAIzD,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CAC1D;AAUD,eAAO,MAAM,uBAAuB,GAClC,eAAe,mBAAmB,KACjC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAKpE,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAqC,sRAqBzD,sBAAsB,KAAG,GAAG,CAAC,OAiT/B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}