@parca/profile 0.19.132 → 0.19.134

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.134](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.133...@parca/profile@0.19.134) (2026-03-11)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.19.133](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.132...@parca/profile@0.19.133) (2026-03-04)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.19.132](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.131...@parca/profile@0.19.132) (2026-03-03)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileExplorerSingle.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/ProfileExplorerSingle.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAMvD,UAAU,0BAA0B;IAClC,WAAW,EAAE,kBAAkB,CAAC;IAChC,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAED,QAAA,MAAM,qBAAqB,GAAI,8BAG5B,0BAA0B,KAAG,GAAG,CAAC,OAmCnC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ProfileExplorerSingle.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/ProfileExplorerSingle.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAMvD,UAAU,0BAA0B;IAClC,WAAW,EAAE,kBAAkB,CAAC;IAChC,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAED,QAAA,MAAM,qBAAqB,GAAI,8BAG5B,0BAA0B,KAAG,GAAG,CAAC,OAwBnC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/ProfileExplorer/ProfileExplorerSingle.js

@@ -11,19 +11,13 @@ 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 { useCallback, useState } from 'react';
+import { useState } from 'react';
 import { ProfileViewWithData } from '..';
 import ProfileSelector from '../ProfileSelector';
 import { useQueryState } from '../hooks/useQueryState';
 const ProfileExplorerSingle = ({ queryClient, navigateTo, }) => {
     const [showMetricsGraph, setShowMetricsGraph] = useState(true);
-    const { profileSource, setDraftTimeRange, commitDraft } = useQueryState({ suffix: '_a' });
-    const handleSwitchToOneMinute = useCallback(() => {
-        const now = Date.now();
-        const from = now - 60000; // 1 minute ago
-        setDraftTimeRange(from, now, 'relative:minute|1');
-        commitDraft({ from, to: now, timeSelection: 'relative:minute|1' });
-    }, [setDraftTimeRange, commitDraft]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "relative", children: _jsx(ProfileSelector, { queryClient: queryClient, closeProfile: () => { }, comparing: false, enforcedProfileName: '', navigateTo: navigateTo, suffix: "_a", showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setShowMetricsGraph }) }), profileSource != null && (_jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: profileSource, onSwitchToOneMinute: handleSwitchToOneMinute }))] }));
+    const { profileSource } = useQueryState({ suffix: '_a' });
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "relative", children: _jsx(ProfileSelector, { queryClient: queryClient, closeProfile: () => { }, comparing: false, enforcedProfileName: '', navigateTo: navigateTo, suffix: "_a", showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setShowMetricsGraph }) }), profileSource != null && (_jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: profileSource }))] }));
 };
 export default ProfileExplorerSingle;

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

@@ -3,6 +3,7 @@ import { NumberDuo } from '../../utils';
 import { DataPoint } from './SamplesGraph';
 export type { DataPoint } from './SamplesGraph';
 interface Props {
+    loading?: boolean;
     cpus: LabelSet[];
     data: DataPoint[][];
     selectedTimeframe?: {
@@ -14,6 +15,5 @@ interface Props {
     bounds: NumberDuo;
     stepMs: number;
 }
-export declare const labelSetToString: (labelSet?: LabelSet) => string;
-export declare const SamplesStrip: ({ cpus, data, selectedTimeframe, onSelectedTimeframe, width, bounds, stepMs, }: Props) => JSX.Element;
+export declare const SamplesStrip: ({ loading, cpus, data, selectedTimeframe, onSelectedTimeframe, width, bounds, stepMs, }: Props) => JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameChart/SamplesStrips/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAIvC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,SAAS,EAAe,MAAM,gBAAgB,CAAC;AAEvD,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,UAAU,KAAK;IACb,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,iBAAiB,CAAC,EAAE;QAClB,MAAM,EAAE,QAAQ,CAAC;QACjB,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,mBAAmB,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,gBAAgB,GAAI,WAAW,QAAQ,KAAG,MAoBtD,CAAC;AA8FF,eAAO,MAAM,YAAY,GAAI,gFAQ1B,KAAK,KAAG,GAAG,CAAC,OAiJd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameChart/SamplesStrips/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAIvC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,SAAS,EAAe,MAAM,gBAAgB,CAAC;AAGvD,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,iBAAiB,CAAC,EAAE;QAClB,MAAM,EAAE,QAAQ,CAAC;QACjB,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,mBAAmB,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAmID,eAAO,MAAM,YAAY,GAAI,yFAS1B,KAAK,KAAG,GAAG,CAAC,OAwKd,CAAC"}

package/dist/ProfileFlameChart/SamplesStrips/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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.
@@ -17,35 +17,46 @@ import cx from 'classnames';
 import * as d3 from 'd3';
 import isEqual from 'fast-deep-equal';
 import { useIntersectionObserver } from 'usehooks-ts';
-import { Button } from '@parca/components';
+import { Button, useParcaContext } from '@parca/components';
 import { TimelineGuide } from '../../TimelineGuide';
 import { SamplesGraph } from './SamplesGraph';
-export const labelSetToString = (labelSet) => {
-    if (labelSet === undefined) {
-        return '{}';
-    }
-    let str = '{';
-    let isFirst = true;
-    for (const label of labelSet.labels) {
-        if (!isFirst) {
-            str += ', ';
-        }
-        else {
-            isFirst = false;
-        }
-        str += `${label.name}: ${label.value}`;
-    }
-    str += '}';
-    return str;
-};
+import { createLabelSetComparator, labelSetToString } from './labelSetUtils';
 const STRIP_HEIGHT = 24;
+const LABEL_ROW_HEIGHT = 16; // text-xs label row above each strip
+const GAP = 4; // gap-1 between flex children
 const MAX_VISIBLE_STRIPS = 20;
+const LOADING_STRIP_COUNT = 8;
+const generateMockStripData = (bounds) => {
+    const stepMs = Math.max(Math.floor((bounds[1] - bounds[0]) / 240), 100);
+    const cpus = Array.from({ length: LOADING_STRIP_COUNT }, (_, i) => ({
+        labels: [{ name: 'cpu', value: String(i) }],
+    }));
+    let seed = 42;
+    const data = cpus.map(() => {
+        const points = [];
+        for (let ts = bounds[0]; ts < bounds[1]; ts += stepMs) {
+            seed = (seed * 16807 + 11) % 2147483647;
+            const value = (seed % 80) + 10;
+            seed = (seed * 16807 + 11) % 2147483647;
+            const sampleCount = (seed % 50) + 1;
+            points.push({ timestamp: ts, value, sampleCount });
+        }
+        return points;
+    });
+    return { cpus, data, stepMs };
+};
 const getTimelineGuideHeight = (cpusCount, collapsedCount) => {
-    return (STRIP_HEIGHT + 4) * (cpusCount - collapsedCount) + 20 * collapsedCount + 24 - 6;
+    const expandedCount = cpusCount - collapsedCount;
+    // Each expanded strip: label row + graph height
+    // Each collapsed strip: min-h-5 (20px)
+    // Gaps between strips (gap-1 = 4px)
+    const expandedTotal = expandedCount * (LABEL_ROW_HEIGHT + STRIP_HEIGHT);
+    const collapsedTotal = collapsedCount * 20; // min-h-5
+    const gaps = cpusCount * GAP + 20; // timeline header
+    return expandedTotal + collapsedTotal + gaps;
 };
 const stickyPx = 0;
-const SamplesGraphContainer = ({ isSelected, isCollapsed, cpu, width, onToggleCollapse, data, selectionBounds, setSelectionBounds, color, stepMs, onDragStart, dragState, stripIndex, isAnyDragActive, timeBounds, }) => {
-    const labelStr = labelSetToString(cpu);
+const SamplesGraphContainer = ({ isSelected, isCollapsed, label: labelStr, width, onToggleCollapse, data, selectionBounds, setSelectionBounds, color, stepMs, onDragStart, dragState, stripIndex, isAnyDragActive, timeBounds, loading, }) => {
     const { isIntersecting, ref } = useIntersectionObserver({
         rootMargin: `${stickyPx}px 0px 0px 0px`,
     });
@@ -56,30 +67,38 @@ const SamplesGraphContainer = ({ isSelected, isCollapsed, cpu, width, onToggleCo
             relative: !isSelected,
             'sticky z-30 bg-white dark:bg-black bg-opacity-75': isSelected,
             '!bg-opacity-100': isSticky,
-        }), style: { width: width ?? 1468, top: isSelected ? stickyPx : undefined }, ref: ref, children: [_jsxs("div", { className: "text-xs absolute top-0 left-0 flex gap-[2px] items-center bg-white/50 dark:bg-black/50 px-1 rounded-sm cursor-pointer", style: {
-                    zIndex: 15,
-                }, onClick: onToggleCollapse, children: [_jsx(Icon, { icon: isCollapsed ? 'bxs:right-arrow' : 'bxs:down-arrow' }), labelStr] }), !isCollapsed ? (_jsx(SamplesGraph, { data: data, height: STRIP_HEIGHT, width: width ?? 1468, fill: color(labelStr), selectionBounds: selectionBounds, setSelectionBounds: setSelectionBounds, stepMs: stepMs, onDragStart: (startX) => onDragStart(stripIndex, startX), dragState: dragState?.stripIndex === stripIndex ? dragState : undefined, isAnyDragActive: isAnyDragActive, timeBounds: timeBounds })) : null] }, labelStr));
+        }), style: { width: width ?? 1468, top: isSelected ? stickyPx : undefined }, ref: ref, children: [_jsx("div", { className: "text-xs flex gap-[2px] items-center px-1 cursor-pointer text-gray-600 dark:text-gray-400", onClick: loading === true ? undefined : onToggleCollapse, children: loading === true ? (_jsx("div", { className: "h-3 w-24 rounded bg-gray-200 dark:bg-gray-700 mb-1" })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { icon: isCollapsed ? 'bxs:right-arrow' : 'bxs:down-arrow', className: "shrink-0" }), labelStr] })) }), !isCollapsed ? (_jsx(SamplesGraph, { data: data, height: STRIP_HEIGHT, width: width ?? 1468, fill: color(labelStr), selectionBounds: selectionBounds, setSelectionBounds: setSelectionBounds, stepMs: stepMs, onDragStart: (startX) => onDragStart(stripIndex, startX), dragState: dragState?.stripIndex === stripIndex ? dragState : undefined, isAnyDragActive: isAnyDragActive, timeBounds: timeBounds })) : null] }, labelStr));
 };
-export const SamplesStrip = ({ cpus, data, selectedTimeframe, onSelectedTimeframe, width, bounds, stepMs, }) => {
+export const SamplesStrip = ({ loading, cpus, data, selectedTimeframe, onSelectedTimeframe, width, bounds, stepMs, }) => {
+    const { isDarkMode } = useParcaContext();
+    const effectiveLoading = loading === true;
+    // When loading, use mock data to render a pixel-perfect skeleton
+    const mockData = useMemo(() => (effectiveLoading && bounds[0] !== bounds[1] ? generateMockStripData(bounds) : null), [effectiveLoading, bounds]);
+    const effectiveCpus = mockData?.cpus ?? cpus;
+    const effectiveData = mockData?.data ?? data;
+    const effectiveStepMs = mockData?.stepMs ?? stepMs;
     const [collapsedLabels, setCollapsedLabels] = useState(new Set());
     const [showAll, setShowAll] = useState(false);
     const [dragState, setDragState] = useState(undefined);
     const containerRef = useRef(null);
     const isDragging = dragState !== undefined;
-    // Sort cpus and data by label string for consistent ordering across reloads
+    const { compare, keyOrder } = useMemo(() => createLabelSetComparator(effectiveCpus), [effectiveCpus]);
     const sortedItems = useMemo(() => {
-        const items = cpus.map((cpu, i) => ({
+        const items = effectiveCpus.map((cpu, i) => ({
             cpu,
-            data: data[i],
-            label: labelSetToString(cpu),
+            data: effectiveData[i],
+            label: labelSetToString(cpu, keyOrder),
         }));
-        return items.sort((a, b) => a.label.localeCompare(b.label));
-    }, [cpus, data]);
+        return items.sort((a, b) => compare(a.cpu, b.cpu));
+    }, [effectiveCpus, effectiveData, compare, keyOrder]);
     const hasMore = useMemo(() => sortedItems.length > MAX_VISIBLE_STRIPS, [sortedItems]);
     const visibleItems = useMemo(() => (showAll || !hasMore ? sortedItems : sortedItems.slice(0, MAX_VISIBLE_STRIPS)), [sortedItems, showAll, hasMore]);
     // Deterministic color: hash the label string so the same label always gets the same color
-    // regardless of render order.
+    // regardless of render order. When loading, use muted gray.
     const color = useMemo(() => {
+        if (effectiveLoading) {
+            return (_label) => (isDarkMode ? '#374151' : '#d1d5db');
+        }
         const palette = d3.schemeObservable10;
         const hashStr = (s) => {
             let h = 0;
@@ -89,7 +108,7 @@ export const SamplesStrip = ({ cpus, data, selectedTimeframe, onSelectedTimefram
             return Math.abs(h);
         };
         return (label) => palette[hashStr(label) % palette.length];
-    }, []);
+    }, [effectiveLoading, isDarkMode]);
     const handleDragStart = (stripIndex, startX) => {
         setDragState({ stripIndex, startX, currentX: startX });
     };
@@ -123,13 +142,16 @@ export const SamplesStrip = ({ cpus, data, selectedTimeframe, onSelectedTimefram
     const handleMouseLeave = () => {
         setDragState(undefined);
     };
-    if (data.length === 0) {
+    if (!effectiveLoading && effectiveData.length === 0) {
         return (_jsx("span", { className: "flex justify-center my-10", children: "There is no data matching your filter criteria, please try changing the filter." }));
     }
-    return (_jsxs("div", { ref: containerRef, className: cx('flex flex-col gap-1 relative my-0', { 'cursor-ew-resize': isDragging }), style: { width: width ?? '100%' }, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave, children: [_jsx(TimelineGuide, { bounds: [BigInt(0), BigInt(bounds[1] - bounds[0])], width: width ?? 1468, height: getTimelineGuideHeight(visibleItems.length, [...collapsedLabels].filter(l => visibleItems.some(item => item.label === l)).length), margin: 1 }), visibleItems.map((item, i) => {
+    return (_jsxs("div", { ref: containerRef, className: cx('flex flex-col gap-1 relative my-0', {
+            'cursor-ew-resize': isDragging,
+            'animate-pulse pointer-events-none': effectiveLoading,
+        }), style: { width: width ?? '100%' }, onMouseMove: effectiveLoading ? undefined : handleMouseMove, onMouseUp: effectiveLoading ? undefined : handleMouseUp, onMouseLeave: effectiveLoading ? undefined : handleMouseLeave, children: [_jsx(TimelineGuide, { bounds: [BigInt(0), BigInt(bounds[1] - bounds[0])], width: width ?? 1468, height: getTimelineGuideHeight(visibleItems.length, [...collapsedLabels].filter(l => visibleItems.some(item => item.label === l)).length), margin: 1 }), visibleItems.map((item, i) => {
                 const isCollapsed = collapsedLabels.has(item.label);
                 const isSelected = isEqual(item.cpu, selectedTimeframe?.labels);
-                return (_jsx(SamplesGraphContainer, { isSelected: isSelected, isCollapsed: isCollapsed, cpu: item.cpu, width: width, data: item.data, onToggleCollapse: () => {
+                return (_jsx(SamplesGraphContainer, { isSelected: isSelected, isCollapsed: isCollapsed, label: item.label, width: width, data: item.data, onToggleCollapse: () => {
                         const newCollapsedLabels = new Set(collapsedLabels);
                         if (collapsedLabels.has(item.label)) {
                             newCollapsedLabels.delete(item.label);
@@ -140,6 +162,6 @@ export const SamplesStrip = ({ cpus, data, selectedTimeframe, onSelectedTimefram
                         setCollapsedLabels(newCollapsedLabels);
                     }, selectionBounds: isSelected ? selectedTimeframe?.bounds : undefined, setSelectionBounds: newBounds => {
                         onSelectedTimeframe(item.cpu, newBounds);
-                    }, color: color, stepMs: stepMs, onDragStart: handleDragStart, dragState: dragState, stripIndex: i, isAnyDragActive: isDragging, timeBounds: bounds }, item.label));
+                    }, color: color, stepMs: effectiveStepMs, onDragStart: handleDragStart, dragState: dragState, stripIndex: i, isAnyDragActive: isDragging, timeBounds: bounds, loading: effectiveLoading }, item.label));
             }), hasMore && !showAll && (_jsxs(Button, { variant: "secondary", onClick: () => setShowAll(true), className: "w-fit mx-auto mt-2", children: ["Show all ", sortedItems.length, " rows"] }))] }));
 };

package/dist/ProfileFlameChart/SamplesStrips/labelSetUtils.d.ts

@@ -0,0 +1,7 @@
+import { LabelSet } from '@parca/client';
+export declare const labelSetToString: (labelSet: LabelSet | undefined, keyOrder?: string[]) => string;
+export declare const createLabelSetComparator: (labelSets: LabelSet[]) => {
+    compare: (a: LabelSet, b: LabelSet) => number;
+    keyOrder: string[];
+};
+//# sourceMappingURL=labelSetUtils.d.ts.map

package/dist/ProfileFlameChart/SamplesStrips/labelSetUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"labelSetUtils.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameChart/SamplesStrips/labelSetUtils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AA+BvC,eAAO,MAAM,gBAAgB,GAAI,UAAU,QAAQ,GAAG,SAAS,EAAE,WAAW,MAAM,EAAE,KAAG,MAatF,CAAC;AAIF,eAAO,MAAM,wBAAwB,GACnC,WAAW,QAAQ,EAAE,KACpB;IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,KAAK,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,EAAE,CAAA;CAsBpE,CAAC"}

package/dist/ProfileFlameChart/SamplesStrips/labelSetUtils.js

@@ -0,0 +1,79 @@
+// 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.
+// Determine which label keys have all-numeric values across every label set.
+const getNumericKeys = (labelSets) => {
+    const numericKeys = new Set();
+    if (labelSets.length === 0)
+        return numericKeys;
+    const keyCandidates = new Set(labelSets[0].labels.map(l => l.name));
+    for (const key of keyCandidates) {
+        const allNumeric = labelSets.every(ls => {
+            const label = ls.labels.find(l => l.name === key);
+            return label != null && label.value !== '' && !isNaN(Number(label.value));
+        });
+        if (allNumeric)
+            numericKeys.add(key);
+    }
+    return numericKeys;
+};
+// Get key order: text keys first (sorted), then numeric keys (sorted).
+const getSortedKeys = (labelSets, numericKeys) => {
+    const allKeys = new Set();
+    for (const ls of labelSets) {
+        for (const l of ls.labels)
+            allKeys.add(l.name);
+    }
+    return [...allKeys]
+        .filter(k => !numericKeys.has(k))
+        .sort()
+        .concat([...numericKeys].sort());
+};
+// Format a LabelSet as a string with keys ordered: text first, then numeric.
+export const labelSetToString = (labelSet, keyOrder) => {
+    if (labelSet === undefined)
+        return '{}';
+    const labels = keyOrder != null
+        ? keyOrder
+            .map(key => labelSet.labels.find(l => l.name === key))
+            .filter((l) => l != null)
+        : labelSet.labels;
+    if (labels.length === 0)
+        return '{}';
+    return '{' + labels.map(l => `${l.name}: ${l.value}`).join(', ') + '}';
+};
+// Build a comparator for LabelSets: text keys first (for grouping), then numeric keys.
+// Also returns the key order so labelSetToString can use the same ordering.
+export const createLabelSetComparator = (labelSets) => {
+    const numericKeys = getNumericKeys(labelSets);
+    const keyOrder = getSortedKeys(labelSets, numericKeys);
+    const compare = (a, b) => {
+        const aMap = new Map(a.labels.map(l => [l.name, l.value]));
+        const bMap = new Map(b.labels.map(l => [l.name, l.value]));
+        for (const key of keyOrder) {
+            const aVal = aMap.get(key) ?? '';
+            const bVal = bMap.get(key) ?? '';
+            if (numericKeys.has(key)) {
+                const diff = Number(aVal) - Number(bVal);
+                if (diff !== 0)
+                    return diff;
+            }
+            else {
+                const cmp = aVal.localeCompare(bVal);
+                if (cmp !== 0)
+                    return cmp;
+            }
+        }
+        return 0;
+    };
+    return { compare, keyOrder };
+};

package/dist/ProfileFlameChart/index.d.ts

@@ -13,8 +13,7 @@ interface ProfileFlameChartProps {
     isHalfScreen: boolean;
     metadataMappingFiles?: string[];
     metadataLoading?: boolean;
-    onSwitchToOneMinute?: () => void;
 }
-export declare const ProfileFlameChart: ({ samplesData, queryClient, profileSource, width, total, filtered, profileType, isHalfScreen, metadataMappingFiles, metadataLoading, onSwitchToOneMinute, }: ProfileFlameChartProps) => JSX.Element;
+export declare const ProfileFlameChart: ({ samplesData, queryClient, profileSource, width, total, filtered, profileType, isHalfScreen, metadataMappingFiles, metadataLoading, }: ProfileFlameChartProps) => JSX.Element;
 export default ProfileFlameChart;
 //# sourceMappingURL=index.d.ts.map

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;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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileFlameChart/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAoC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEpF,OAAO,EAAwB,WAAW,EAAQ,MAAM,eAAe,CAAC;AAKxE,OAAO,EAAsB,aAAa,EAAa,MAAM,kBAAkB,CAAC;AAChF,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;CAC3B;AA+BD,eAAO,MAAM,iBAAiB,GAAI,wIAW/B,sBAAsB,KAAG,GAAG,CAAC,OAgL/B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/ProfileFlameChart/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, 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.
@@ -13,12 +13,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // limitations under the License.
 import { useEffect, useMemo, useRef } from 'react';
 import { QueryRequest_ReportType } from '@parca/client';
-import { Button, useParcaContext, useURLState, useURLStateCustom, } from '@parca/components';
+import { useURLState, useURLStateCustom } from '@parca/components';
 import { Matcher, MatcherTypes, Query } from '@parca/parser';
-import { TimeUnits, formatDateTimeDownToMS, formatDuration } from '@parca/utilities';
+import { TimeUnits, formatDate, formatDuration } from '@parca/utilities';
 import ProfileFlameGraph, { validateFlameChartQuery } from '../ProfileFlameGraph';
 import { boundsFromProfileSource } from '../ProfileFlameGraph/FlameGraphArrow/utils';
-import { MergedProfileSource } from '../ProfileSource';
+import { MergedProfileSource, timeFormat } from '../ProfileSource';
 import { useQuery } from '../useQuery';
 import { SamplesStrip } from './SamplesStrips';
 const TimeframeStateSerializer = {
@@ -70,8 +70,7 @@ const createFilteredProfileSource = (profileSource, selectedTimeframe) => {
     const query = new Query(profileSource.query.profType, [...profileSource.query.matchers, ...dimensionMatchers], '');
     return new MergedProfileSource(mergeFrom, mergeTo, query);
 };
-export const ProfileFlameChart = ({ samplesData, queryClient, profileSource, width, total, filtered, profileType, isHalfScreen, metadataMappingFiles, metadataLoading, onSwitchToOneMinute, }) => {
-    const { loader } = useParcaContext();
+export const ProfileFlameChart = ({ samplesData, queryClient, profileSource, width, total, filtered, profileType, isHalfScreen, metadataMappingFiles, metadataLoading, }) => {
     const zoomControlsRef = useRef(null);
     const [selectedTimeframe, setSelectedTimeframe] = useURLStateCustom('flamechart_timeframe', TimeframeStateSerializer);
     // Read flamechart dimension from URL state to detect changes
@@ -131,35 +130,29 @@ export const ProfileFlameChart = ({ samplesData, queryClient, profileSource, wid
         const stepMs = samplesData.stepMs ?? 0;
         return { cpus, data, stepMs };
     }, [samplesData?.series, samplesData?.stepMs]);
-    const { isValid, isNonDelta, isDurationTooLong } = validateFlameChartQuery(profileSource);
+    const { isValid, isNonDelta } = validateFlameChartQuery(profileSource);
     if (!isValid) {
-        if (isDurationTooLong) {
-            return (_jsxs("div", { className: "flex flex-col justify-center items-center p-10 text-center gap-4 text-sm", children: [_jsx("span", { children: "Flame chart is unavailable for queries longer than one minute. Try reducing the time range to one minute or selecting a point in the metrics graph." }), onSwitchToOneMinute != null && (_jsx(Button, { variant: "primary", onClick: onSwitchToOneMinute, children: "Switch to last 1 minute" }))] }));
-        }
         const message = isNonDelta
             ? 'To use the Flame chart, please switch to a Delta profile.'
             : 'Flame chart is unavailable for this query.';
         return (_jsx("div", { className: "flex flex-col justify-center p-10 text-center gap-6 text-sm", children: message }));
     }
     const hasDimension = (flamechartDimension ?? []).length > 0;
-    // Show loader while metadata labels are loading (needed for dimension auto-selection)
-    if (metadataLoading === true) {
-        return _jsx(_Fragment, { children: loader });
-    }
-    if (!hasDimension) {
+    const isStripsLoading = metadataLoading === true || !hasDimension || samplesData?.loading === true;
+    if (!hasDimension && metadataLoading !== true) {
         return (_jsx("div", { className: "flex justify-center items-center py-10 text-gray-500 dark:text-gray-400 text-sm", children: "Select a label in the \"Samples group by\" dropdown above to view the samples strips." }));
     }
-    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 &&
+    return (_jsxs("div", { children: [(isStripsLoading || (stripsData.cpus.length > 0 && stripsData.data.length > 0)) && (_jsx("div", { className: "mb-2", children: _jsx(SamplesStrip, { loading: isStripsLoading, 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 })] }));
+                    const duration = durationMs < 5000
+                        ? `${(durationMs / 1000).toFixed(1)}s`
+                        : formatDuration({ [TimeUnits.Milliseconds]: durationMs });
+                    const fmt = durationMs < 5000 ? "yyyy-MM-dd HH:mm:ss.SSS '(UTC)'" : timeFormat();
+                    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", ' ', formatDate(new Date(selectedTimeframe.bounds[0]), fmt), " to", ' ', formatDate(new Date(selectedTimeframe.bounds[1]), fmt)] }), _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

@@ -14,6 +14,9 @@ interface MiniMapProps {
     profileSource: ProfileSource;
     isDarkMode: boolean;
     scrollLeft: number;
+    scrollLeftRef: React.RefObject<number>;
+    onZoomToPosition?: (normalizedX: number, targetZoom: number) => void;
+    onSetZoomWithScroll?: (zoom: number, scrollLeft: number) => void;
 }
 export declare const MiniMap: React.NamedExoticComponent<MiniMapProps>;
 export {};

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

@@ -1 +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"}
+{"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;IACnB,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACvC,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAClE;AAED,eAAO,MAAM,OAAO,0CAyTlB,CAAC"}

package/dist/ProfileFlameGraph/FlameGraphArrow/MiniMap.js

@@ -18,7 +18,7 @@ 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, }) {
+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);
@@ -40,7 +40,6 @@ export const MiniMap = React.memo(function MiniMap({ containerRef, table, width,
         // 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]);
@@ -63,11 +62,11 @@ export const MiniMap = React.memo(function MiniMap({ containerRef, table, width,
             const cumulative = Number(cumulativeCol.get(row) ?? 0n);
             if (cumulative <= 0)
                 continue;
-            const nodeWidth = (cumulative / tsRange) * zoomedWidth * xScale;
+            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) * zoomedWidth * xScale;
+            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
@@ -80,32 +79,89 @@ export const MiniMap = React.memo(function MiniMap({ containerRef, table, width,
             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,
-    ]);
+        // 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);
-    const sliderLeft = Math.min((scrollLeft / zoomedWidth) * width, width - sliderWidth);
+    // 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;
-        // Check if clicking inside the slider
-        if (clickX >= sliderLeft && clickX <= sliderLeft + sliderWidth) {
-            // Start dragging
+        // 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;
+        }
+        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;
+        }
+        // Check if clicking inside the slider — start pan drag
+        if (clickX >= sliderLeft && clickX <= sliderRight) {
             isDragging.current = true;
             dragStartX.current = e.clientX;
-            dragStartScrollLeft.current = scrollLeft;
+            dragStartScrollLeft.current = currentScrollLeft;
         }
         else {
             // Click-to-jump: center viewport at click position
@@ -137,7 +193,17 @@ export const MiniMap = React.memo(function MiniMap({ containerRef, table, width,
         };
         document.addEventListener('mousemove', handleMouseMove);
         document.addEventListener('mouseup', handleMouseUp);
-    }, [sliderLeft, sliderWidth, scrollLeft, width, zoomedWidth, containerRef]);
+    }, [
+        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;
@@ -164,10 +230,9 @@ export const MiniMap = React.memo(function MiniMap({ containerRef, table, width,
     }, [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: {
+    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',
-                    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 } })] }))] }));
+                } }), 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/ZoomControls.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"ZoomControls.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/ZoomControls.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,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"}