@parca/profile 0.16.452 → 0.16.454

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.16.454](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.453...@parca/profile@0.16.454) (2024-12-10)
+
+**Note:** Version bump only for package @parca/profile
+
+## 0.16.453 (2024-12-05)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.452 (2024-12-02)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MetricsGraph/MetricsTooltip/index.js

@@ -73,7 +73,7 @@ const MetricsTooltip = ({ x, y, highlighted, contextElement, sampleUnit, delta,
     }, [x, y, contextElement, update]);
     const nameLabel = highlighted?.labels.find(e => e.name === '__name__');
     const highlightedNameLabel = nameLabel !== undefined ? nameLabel : { name: '', value: '' };
-    return (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: "z-10", children: _jsx("div", { className: "flex max-w-md", children: _jsx("div", { className: "m-auto", children: _jsx("div", { className: "rounded-lg border-gray-300 bg-gray-50 p-3 opacity-90 shadow-lg dark:border-gray-500 dark:bg-gray-900", style: { borderWidth: 1 }, children: _jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "ml-2 mr-6", children: [_jsx("span", { className: "font-semibold", children: highlightedNameLabel.value }), _jsx("span", { className: "my-2 block text-gray-700 dark:text-gray-300", children: _jsx("table", { className: "table-auto", children: _jsxs("tbody", { children: [delta ? (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Per Second" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.valuePerSecond, sampleUnit === 'nanoseconds' ? 'CPU Cores' : sampleUnit, 5) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Total" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.value, sampleUnit, 2) })] })] })) : (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Value" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.valuePerSecond, sampleUnit, 5) })] })), highlighted.duration > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Duration" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.duration, 'nanoseconds', 2) })] })), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "At" }), _jsx("td", { className: "w-3/4", children: formatDate(highlighted.timestamp, timePattern(timezone), timezone) })] })] }) }) }), _jsx("span", { className: "my-2 block text-gray-500", children: highlighted.labels
+    return (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: "z-20", children: _jsx("div", { className: "flex max-w-md", children: _jsx("div", { className: "m-auto", children: _jsx("div", { className: "rounded-lg border-gray-300 bg-gray-50 p-3 opacity-90 shadow-lg dark:border-gray-500 dark:bg-gray-900", style: { borderWidth: 1 }, children: _jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "ml-2 mr-6", children: [_jsx("span", { className: "font-semibold", children: highlightedNameLabel.value }), _jsx("span", { className: "my-2 block text-gray-700 dark:text-gray-300", children: _jsx("table", { className: "table-auto", children: _jsxs("tbody", { children: [delta ? (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Per Second" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.valuePerSecond, sampleUnit === 'nanoseconds' ? 'CPU Cores' : sampleUnit, 5) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Total" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.value, sampleUnit, 2) })] })] })) : (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Value" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.valuePerSecond, sampleUnit, 5) })] })), highlighted.duration > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Duration" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.duration, 'nanoseconds', 2) })] })), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "At" }), _jsx("td", { className: "w-3/4", children: formatDate(highlighted.timestamp, timePattern(timezone), timezone) })] })] }) }) }), _jsx("span", { className: "my-2 block text-gray-500", children: highlighted.labels
                                         .filter((label) => label.name !== '__name__')
                                         .map((label) => (_jsx("div", { 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: _jsx(TextWithTooltip, { text: `${label.name}="${label.value}"`, maxTextLength: 37, id: `tooltip-${label.name}` }) }, label.name))) }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to add labels to query." })] })] }) }) }) }) }) }));
 };

package/dist/MetricsGraphStrips/AreaGraph/Tooltip.d.ts

@@ -0,0 +1,10 @@
+interface TooltipProps {
+    x: number;
+    y: number;
+    timestamp: Date;
+    value: number;
+    containerWidth: number;
+}
+export declare function Tooltip({ x, y, timestamp, value, containerWidth }: TooltipProps): JSX.Element;
+export {};
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/MetricsGraphStrips/AreaGraph/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraphStrips/AreaGraph/Tooltip.tsx"],"names":[],"mappings":"AAkBA,UAAU,YAAY;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,OAAO,CAAC,EAAC,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,EAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAwD3F"}

package/dist/MetricsGraphStrips/AreaGraph/Tooltip.js

@@ -0,0 +1,44 @@
+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.
+// 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 { useEffect, useRef, useState } from 'react';
+import { useParcaContext } from '@parca/components';
+import { formatDateTimeDownToMS, valueFormatter } from '@parca/utilities';
+export function Tooltip({ x, y, timestamp, value, containerWidth }) {
+    const { timezone } = useParcaContext();
+    const tooltipRef = useRef(null);
+    const [tooltipPosition, setTooltipPosition] = useState({ x, y });
+    const baseOffset = {
+        x: 16,
+        y: -8,
+    };
+    useEffect(() => {
+        if (tooltipRef.current != null) {
+            const tooltipWidth = tooltipRef.current.offsetWidth;
+            let newX = x + baseOffset.x;
+            let newY = y + baseOffset.y;
+            if (newX + tooltipWidth > containerWidth) {
+                newX = x - tooltipWidth - baseOffset.x;
+            }
+            if (newY < 0) {
+                newY = y + Math.abs(baseOffset.y);
+            }
+            setTooltipPosition({ x: newX, y: newY });
+        }
+    }, [x, y, containerWidth, baseOffset.x, baseOffset.y]);
+    return (_jsx("div", { ref: tooltipRef, className: "absolute bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 p-2 text-sm z-20", style: {
+            left: `${tooltipPosition.x}px`,
+            top: `${tooltipPosition.y}px`,
+            pointerEvents: 'none',
+        }, children: _jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex gap-1 items-center", children: [_jsx("div", { children: "Timestamp:" }), _jsx("div", { className: "text-gray-600 dark:text-gray-300", children: formatDateTimeDownToMS(timestamp, timezone) })] }), _jsxs("div", { className: "flex gap-1 items-center", children: [_jsx("div", { children: "Value:" }), _jsx("div", { className: "text-gray-600 dark:text-gray-300", children: valueFormatter(value, 'nanoseconds', 2) })] })] }) }));
+}

package/dist/MetricsGraphStrips/AreaGraph/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraphStrips/AreaGraph/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAEtC,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,eAAe,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACxC,kBAAkB,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;CAChE;AA8JD,eAAO,MAAM,SAAS,0HAWnB,KAAK,KAAG,GAAG,CAAC,OAkHd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraphStrips/AreaGraph/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAGtC,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,eAAe,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACxC,kBAAkB,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;CAChE;AA8JD,eAAO,MAAM,SAAS,0HAWnB,KAAK,KAAG,GAAG,CAAC,OA8Jd,CAAC"}

package/dist/MetricsGraphStrips/AreaGraph/index.js

@@ -15,6 +15,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
 import * as d3 from 'd3';
+import { Tooltip } from './Tooltip';
 const DraggingWindow = ({ dragStart, currentX, }) => {
     const start = useMemo(() => Math.min(dragStart ?? 0, currentX ?? 0), [dragStart, currentX]);
     const width = useMemo(() => Math.abs((dragStart ?? 0) - (currentX ?? 0)), [dragStart, currentX]);
@@ -79,7 +80,7 @@ const ZoomWindow = ({ zoomWindow, width, onZoomWindowChange, setIsHoveringDragHa
             }
             onZoomWindowChange(zoomWindowState);
             setZoomWindowState(undefined);
-        }, children: [_jsx("div", { style: { height: '100%', width: beforeWidth, left: beforeStart }, className: cx('bg-gray-500/50 absolute top-0 border-r-2 border-gray-900 dark:border-gray-100 z-20'), children: _jsx("div", { className: "w-3 h-4 absolute top-0 right-[-7px] rounded-b bg-gray-200  cursor-ew-resize flex justify-center", onMouseDown: e => {
+        }, children: [_jsx("div", { style: { height: '100%', width: beforeWidth, left: beforeStart }, className: cx('bg-gray-500/50 absolute top-0 border-r-2 border-gray-900 dark:border-gray-100 z-10'), children: _jsx("div", { className: "w-3 h-4 absolute top-0 right-[-7px] rounded-b bg-gray-200  cursor-ew-resize flex justify-center", onMouseDown: e => {
                         setDraggingStart(true);
                         e.stopPropagation();
                         e.preventDefault();
@@ -101,6 +102,8 @@ export const AreaGraph = ({ data, height, width, marginLeft = 0, marginRight = 0
     const [mousePosition, setMousePosition] = useState(undefined);
     const [dragStart, setDragStart] = useState(undefined);
     const [isHoveringDragHandle, setIsHoveringDragHandle] = useState(false);
+    const [hoverData, setHoverData] = useState(null);
+    const [isMouseOverGraph, setIsMouseOverGraph] = useState(false);
     const isDragging = dragStart !== undefined;
     // Declare the x (horizontal position) scale.
     const x = d3.scaleUtc(d3.extent(data, d => d.timestamp), [
@@ -126,11 +129,34 @@ export const AreaGraph = ({ data, height, width, marginLeft = 0, marginRight = 0
         setSelectionBounds([x.invert(startPx).getTime(), x.invert(endPx).getTime()]);
     };
     return (_jsxs("div", { style: { height, width }, onMouseMove: e => {
-            const [x, y] = d3.pointer(e);
-            setMousePosition([x, y]);
+            const [xPos, yPos] = d3.pointer(e);
+            if (xPos >= marginLeft &&
+                xPos <= width - marginRight &&
+                yPos >= marginTop &&
+                yPos <= height - marginBottom) {
+                setMousePosition([xPos, yPos]);
+                // Find the closest data point
+                if (!isHoveringDragHandle && !isDragging) {
+                    const xDate = x.invert(xPos);
+                    const bisect = d3.bisector((d) => d.timestamp).left;
+                    const index = bisect(data, xDate.getTime());
+                    const dataPoint = data[index];
+                    if (dataPoint !== undefined) {
+                        setHoverData(dataPoint);
+                    }
+                }
+            }
+            else {
+                setMousePosition(undefined);
+                setHoverData(null);
+            }
+        }, onMouseEnter: () => {
+            setIsMouseOverGraph(true);
         }, onMouseLeave: () => {
+            setIsMouseOverGraph(false);
             setMousePosition(undefined);
             setDragStart(undefined);
+            setHoverData(null);
         }, onMouseDown: e => {
             // only left mouse button
             if (e.button !== 0) {
@@ -162,5 +188,9 @@ export const AreaGraph = ({ data, height, width, marginLeft = 0, marginRight = 0
                     hidden: mousePosition === undefined || isDragging || isHoveringDragHandle,
                 }) }), _jsx(DraggingWindow, { dragStart: dragStart, currentX: mousePosition?.[0] }), _jsx(ZoomWindow, { zoomWindow: zoomWindow, width: width, onZoomWindowChange: setSelectionBoundsWithScaling, setIsHoveringDragHandle: setIsHoveringDragHandle }), _jsx("div", { className: cx('absolute top-0 left-0 w-full h-full bg-gray-900/50 dark:bg-gray-200/50', {
                     hidden: isDragging || selectionBounds !== undefined,
-                }) }), _jsx("svg", { style: { width: '100%', height: '100%' }, children: _jsx("path", { fill: fill, d: area(data), className: "opacity-80" }) })] }));
+                }) }), mousePosition !== undefined &&
+                hoverData !== null &&
+                !isDragging &&
+                !isHoveringDragHandle &&
+                isMouseOverGraph && (_jsx(Tooltip, { x: mousePosition[0], y: mousePosition[1], timestamp: new Date(hoverData.timestamp), value: hoverData.value, containerWidth: width })), _jsx("svg", { style: { width: '100%', height: '100%' }, children: _jsx("path", { fill: fill, d: area(data), className: "opacity-80" }) })] }));
 };

package/dist/MetricsGraphStrips/MetricsGraphStrips.stories.d.ts

@@ -5,13 +5,18 @@ declare const meta: Meta;
 export default meta;
 export declare const ThreeCPUStrips: {
     args: {
-        cpus: string[];
+        cpus: {
+            labels: {
+                name: string;
+                value: number;
+            }[];
+        }[];
         data: DataPoint[][];
-        selectedTimeline: {
+        selectedTimeframe: {
             index: number;
             bounds: number[];
         };
-        onSelectedTimeline: (index: number, bounds: NumberDuo) => void;
+        onSelectedTimeframe: (index: number, bounds: NumberDuo) => void;
     };
     render: (args: any) => JSX.Element;
 };

package/dist/MetricsGraphStrips/MetricsGraphStrips.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricsGraphStrips.stories.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/MetricsGraphStrips.stories.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAqBtC,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,cAAc;;;;;;;;oCAKK,MAAM,UAAU,SAAS,KAAG,IAAI;;mBAI7B,GAAG,KAAG,GAAG,CAAC,OAAO;CAUnD,CAAC"}
+{"version":3,"file":"MetricsGraphStrips.stories.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/MetricsGraphStrips.stories.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAqBtC,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,cAAc;;;;;;;;;;;;;qCAKM,MAAM,UAAU,SAAS,KAAG,IAAI;;mBAI9B,GAAG,KAAG,GAAG,CAAC,OAAO;CAUnD,CAAC"}

package/dist/MetricsGraphStrips/MetricsGraphStrips.stories.js

@@ -37,19 +37,19 @@ const meta = {
 export default meta;
 export const ThreeCPUStrips = {
     args: {
-        cpus: Array.from(mockData, (_, i) => `CPU ${i + 1}`),
+        cpus: Array.from(mockData, (_, i) => ({ labels: [{ name: 'cpuid', value: i + 1 }] })),
         data: mockData,
-        selectedTimeline: { index: 1, bounds: [mockData[0][25].timestamp, mockData[0][100].timestamp] },
-        onSelectedTimeline: (index, bounds) => {
-            console.log('onSelectedTimeline', index, bounds);
+        selectedTimeframe: { index: 1, bounds: [mockData[0][25].timestamp, mockData[0][100].timestamp] },
+        onSelectedTimeframe: (index, bounds) => {
+            console.log('onSelectedTimeframe', index, bounds);
         },
     },
     render: function Component(args) {
         const [, setArgs] = useArgs();
-        const onSelectedTimeline = (index, bounds) => {
-            args.onSelectedTimeline(index, bounds);
-            setArgs({ ...args, selectedTimeline: { index, bounds } });
+        const onSelectedTimeframe = (index, bounds) => {
+            args.onSelectedTimeframe(index, bounds);
+            setArgs({ ...args, selectedTimeframe: { index, bounds } });
         };
-        return _jsx(MetricsGraphStrips, { ...args, onSelectedTimeline: onSelectedTimeline });
+        return _jsx(MetricsGraphStrips, { ...args, onSelectedTimeframe: onSelectedTimeframe });
     },
 };

package/dist/MetricsGraphStrips/index.d.ts

@@ -1,15 +1,16 @@
+import { LabelSet } from '@parca/client';
 import { NumberDuo } from '../utils';
 import { DataPoint } from './AreaGraph';
 interface Props {
-    cpus: string[];
+    cpus: LabelSet[];
     data: DataPoint[][];
-    selectedTimeline?: {
-        index: number;
+    selectedTimeframe?: {
+        labels: LabelSet;
         bounds: NumberDuo;
     };
-    onSelectedTimeline: (index: number, bounds: NumberDuo | undefined) => void;
+    onSelectedTimeframe: (labels: LabelSet, bounds: NumberDuo | undefined) => void;
     width?: number;
 }
-export declare const MetricsGraphStrips: ({ cpus, data, selectedTimeline, onSelectedTimeline, width, }: Props) => JSX.Element;
+export declare const MetricsGraphStrips: ({ cpus, data, selectedTimeframe, onSelectedTimeframe, width, }: Props) => JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAY,SAAS,EAAC,MAAM,aAAa,CAAC;AAEjD,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD,eAAO,MAAM,kBAAkB,iEAM5B,KAAK,KAAG,GAAG,CAAC,OA+Dd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAGvC,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAY,SAAS,EAAC,MAAM,aAAa,CAAC;AAEjD,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;CAChB;AA2BD,eAAO,MAAM,kBAAkB,mEAM5B,KAAK,KAAG,GAAG,CAAC,OAmEd,CAAC"}

package/dist/MetricsGraphStrips/index.js

@@ -16,10 +16,26 @@ import { Icon } from '@iconify/react';
 import * as d3 from 'd3';
 import { TimelineGuide } from '../TimelineGuide';
 import { AreaGraph } from './AreaGraph';
+const labelSetToString = (labelSet) => {
+    if (labelSet === undefined) {
+        return '{}';
+    }
+    let str = '{';
+    let isFirst = true;
+    for (const label of labelSet.labels) {
+        if (!isFirst) {
+            str += ', ';
+            isFirst = false;
+        }
+        str += `${label.name}: ${label.value}`;
+    }
+    str += '}';
+    return str;
+};
 const getTimelineGuideHeight = (cpus, collapsedIndices) => {
     return 56 * (cpus.length - collapsedIndices.length) + 20 * collapsedIndices.length + 24;
 };
-export const MetricsGraphStrips = ({ cpus, data, selectedTimeline, onSelectedTimeline, width, }) => {
+export const MetricsGraphStrips = ({ cpus, data, selectedTimeframe, onSelectedTimeframe, width, }) => {
     const [collapsedIndices, setCollapsedIndices] = useState([]);
     // @ts-expect-error
     const color = d3.scaleOrdinal(d3.schemeObservable10);
@@ -35,7 +51,10 @@ export const MetricsGraphStrips = ({ cpus, data, selectedTimeline, onSelectedTim
     }, [data]);
     return (_jsxs("div", { className: "flex flex-col gap-1 relative my-0 ml-[70px]", style: { width: width ?? '100%' }, children: [_jsx(TimelineGuide, { bounds: bounds, width: width ?? 1468, height: getTimelineGuideHeight(cpus, collapsedIndices), margin: 1 }), cpus.map((cpu, i) => {
                 const isCollapsed = collapsedIndices.includes(i);
-                return (_jsxs("div", { className: "relative min-h-5", style: { width: width ?? 1468 }, children: [_jsxs("div", { className: "text-xs absolute top-0 left-0 flex gap-[2px] items-center bg-white/50 px-1 rounded-sm cursor-pointer z-30", onClick: () => {
+                const labelStr = labelSetToString(cpu);
+                return (_jsxs("div", { className: "relative min-h-5", style: { width: width ?? 1468 }, children: [_jsxs("div", { className: "text-xs absolute top-0 left-0 flex gap-[2px] items-center bg-white/50 px-1 rounded-sm cursor-pointer", style: {
+                                zIndex: 15,
+                            }, onClick: () => {
                                 const newCollapsedIndices = [...collapsedIndices];
                                 if (collapsedIndices.includes(i)) {
                                     newCollapsedIndices.splice(newCollapsedIndices.indexOf(i), 1);
@@ -44,8 +63,8 @@ export const MetricsGraphStrips = ({ cpus, data, selectedTimeline, onSelectedTim
                                     newCollapsedIndices.push(i);
                                 }
                                 setCollapsedIndices(newCollapsedIndices);
-                            }, children: [_jsx(Icon, { icon: isCollapsed ? 'bxs:right-arrow' : 'bxs:down-arrow' }), cpu] }), !isCollapsed ? (_jsx(AreaGraph, { data: data[i], height: 56, width: width ?? 1468, fill: color(i.toString()), selectionBounds: selectedTimeline?.index === i ? selectedTimeline.bounds : undefined, setSelectionBounds: bounds => {
-                                onSelectedTimeline(i, bounds);
-                            } })) : null] }, cpu));
+                            }, children: [_jsx(Icon, { icon: isCollapsed ? 'bxs:right-arrow' : 'bxs:down-arrow' }), labelStr] }), !isCollapsed ? (_jsx(AreaGraph, { data: data[i], height: 56, width: width ?? 1468, fill: color(labelStr), selectionBounds: cpu === selectedTimeframe?.labels ? selectedTimeframe.bounds : undefined, setSelectionBounds: bounds => {
+                                onSelectedTimeframe(cpu, bounds);
+                            } })) : null] }, labelStr));
             })] }));
 };

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.d.ts

@@ -9,6 +9,7 @@ export declare const FIELD_MAPPING_BUILD_ID = "mapping_build_id";
 export declare const FIELD_LOCATION_ADDRESS = "location_address";
 export declare const FIELD_LOCATION_LINE = "location_line";
 export declare const FIELD_INLINED = "inlined";
+export declare const FIELD_TIMESTAMP = "timestamp";
 export declare const FIELD_FUNCTION_NAME = "function_name";
 export declare const FIELD_FUNCTION_SYSTEM_NAME = "function_system_name";
 export declare const FIELD_FUNCTION_FILE_NAME = "function_file_name";

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAKrF,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAG9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAQ1C,OAAO,EAA2B,KAAK,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAO5E,OAAO,EAAwB,aAAa,EAAC,MAAM,oBAAoB,CAAC;AAIxE,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,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;AAEjC,UAAU,qBAAqB;IAC7B,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,iBACb,MAAM,EAAE,cACV,OAAO,uBACE,WAAW,KAC/B,aAQF,CAAC;AAEF,eAAO,MAAM,iBAAiB,kBACb,MAAM,EAAE,cACX,OAAO,uBACE,WAAW,KAC/B,aAQF,CAAC;AAIF,eAAO,MAAM,gBAAgB,mDAiR3B,CAAC;AAEH,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAKrF,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAG9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAQ1C,OAAO,EAA2B,KAAK,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAO5E,OAAO,EAAwB,aAAa,EAAC,MAAM,oBAAoB,CAAC;AAIxE,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,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;AAEjC,UAAU,qBAAqB;IAC7B,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,iBACb,MAAM,EAAE,cACV,OAAO,uBACE,WAAW,KAC/B,aAQF,CAAC;AAEF,eAAO,MAAM,iBAAiB,kBACb,MAAM,EAAE,cACX,OAAO,uBACE,WAAW,KAC/B,aAQF,CAAC;AAIF,eAAO,MAAM,gBAAgB,mDAiR3B,CAAC;AAEH,eAAe,gBAAgB,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -32,6 +32,7 @@ export const FIELD_MAPPING_BUILD_ID = 'mapping_build_id';
 export const FIELD_LOCATION_ADDRESS = 'location_address';
 export const FIELD_LOCATION_LINE = 'location_line';
 export const FIELD_INLINED = 'inlined';
+export const FIELD_TIMESTAMP = 'timestamp';
 export const FIELD_FUNCTION_NAME = 'function_name';
 export const FIELD_FUNCTION_SYSTEM_NAME = 'function_system_name';
 export const FIELD_FUNCTION_FILE_NAME = 'function_file_name';

package/dist/ProfileIcicleGraph/index.d.ts

@@ -17,8 +17,7 @@ interface ProfileIcicleGraphProps {
     isHalfScreen: boolean;
     metadataMappingFiles?: string[];
     metadataLoading?: boolean;
-    showTimelineGuide?: boolean;
 }
-declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, showTimelineGuide, }: ProfileIcicleGraphProps) => JSX.Element;
+declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, }: ProfileIcicleGraphProps) => JSX.Element;
 export default ProfileIcicleGraph;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAY1C,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,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,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAMD,QAAA,MAAM,kBAAkB,0JAcrB,uBAAuB,KAAG,GAAG,CAAC,OA2LhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAY1C,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,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;CAC3B;AAMD,QAAA,MAAM,kBAAkB,uIAarB,uBAAuB,KAAG,GAAG,CAAC,OA2LhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/ProfileIcicleGraph/index.js

@@ -25,9 +25,9 @@ const numberFormatter = new Intl.NumberFormat('en-US');
 const ErrorContent = ({ errorMessage }) => {
     return _jsx("div", { className: "flex justify-center p-10", children: errorMessage });
 };
-const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, showTimelineGuide = false, }) {
+const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, }) {
     const { onError, authenticationErrorMessage, isDarkMode } = useParcaContext();
-    const { compareMode } = useProfileViewContext();
+    const { compareMode, timelineGuide } = useProfileViewContext();
     const [isLoading, setIsLoading] = useState(true);
     const mappingsList = useMappingList(metadataMappingFiles);
     const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState('sort_by');
@@ -83,7 +83,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         if (graph !== undefined)
             return (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType }));
         if (arrow !== undefined)
-            return (_jsxs("div", { className: "relative", children: [showTimelineGuide && (_jsx(TimelineGuide, { bounds: [0, 60000], width: width, height: 1000, margin: 0, ticks: 60000 / 10000 })), _jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType, sortBy: storeSortBy, flamegraphLoading: isLoading, isHalfScreen: isHalfScreen, mappingsListFromMetadata: mappingsList, compareAbsolute: isCompareAbsolute })] }));
+            return (_jsxs("div", { className: "relative", children: [timelineGuide?.show === true && (_jsx(TimelineGuide, { bounds: timelineGuide.props.bounds, width: width, height: 1000, margin: 0, ticks: 60000 / 10000 })), _jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType, sortBy: storeSortBy, flamegraphLoading: isLoading, isHalfScreen: isHalfScreen, mappingsListFromMetadata: mappingsList, compareAbsolute: isCompareAbsolute })] }));
     }, [
         isLoading,
         graph,
@@ -100,7 +100,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         isDarkMode,
         mappingsList,
         isCompareAbsolute,
-        showTimelineGuide,
+        timelineGuide,
     ]);
     if (error != null) {
         onError?.(error);

package/dist/ProfileView/components/DashboardItems/index.d.ts

@@ -20,8 +20,7 @@ interface GetDashboardItemProps {
     perf?: {
         onRender?: ProfilerOnRenderCallback;
     };
-    showTimelineGuide?: boolean;
 }
-export declare const getDashboardItem: ({ type, isHalfScreen, dimensions, flamegraphData, topTableData, callgraphData, sourceData, profileSource, total, filtered, curPath, setNewCurPath, currentSearchString, setSearchString, callgraphSVG, perf, showTimelineGuide, }: GetDashboardItemProps) => JSX.Element;
+export declare const getDashboardItem: ({ type, isHalfScreen, dimensions, flamegraphData, topTableData, callgraphData, sourceData, profileSource, total, filtered, curPath, setNewCurPath, currentSearchString, setSearchString, callgraphSVG, perf, }: GetDashboardItemProps) => JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/ProfileView/components/DashboardItems/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/DashboardItems/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAW,wBAAwB,EAAC,MAAM,OAAO,CAAC;AAMzD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrD,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,UAAU,EACV,YAAY,EACZ,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AAEnC,UAAU,qBAAqB;IAC7B,IAAI,EAAE,iBAAiB,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,wBAAwB,CAAC;KACrC,CAAC;IACF,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,sOAkB1B,qBAAqB,KAAG,GAAG,CAAC,OAgF9B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/DashboardItems/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAW,wBAAwB,EAAC,MAAM,OAAO,CAAC;AAMzD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrD,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,UAAU,EACV,YAAY,EACZ,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AAEnC,UAAU,qBAAqB;IAC7B,IAAI,EAAE,iBAAiB,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,wBAAwB,CAAC;KACrC,CAAC;CACH;AAED,eAAO,MAAM,gBAAgB,mNAiB1B,qBAAqB,KAAG,GAAG,CAAC,OA+E9B,CAAC"}

package/dist/ProfileView/components/DashboardItems/index.js

@@ -17,7 +17,7 @@ import Callgraph from '../../../Callgraph';
 import ProfileIcicleGraph from '../../../ProfileIcicleGraph';
 import { SourceView } from '../../../SourceView';
 import { Table } from '../../../Table';
-export const getDashboardItem = ({ type, isHalfScreen, dimensions, flamegraphData, topTableData, callgraphData, sourceData, profileSource, total, filtered, curPath, setNewCurPath, currentSearchString, setSearchString, callgraphSVG, perf, showTimelineGuide, }) => {
+export const getDashboardItem = ({ type, isHalfScreen, dimensions, flamegraphData, topTableData, callgraphData, sourceData, profileSource, total, filtered, curPath, setNewCurPath, currentSearchString, setSearchString, callgraphSVG, perf, }) => {
     switch (type) {
         case 'icicle':
             return (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
@@ -27,7 +27,7 @@ export const getDashboardItem = ({ type, isHalfScreen, dimensions, flamegraphDat
                         ? isHalfScreen
                             ? (dimensions.width - 54) / 2
                             : dimensions.width - 16
-                        : 0, metadataMappingFiles: flamegraphData.metadataMappingFiles, metadataLoading: flamegraphData.metadataLoading, showTimelineGuide: showTimelineGuide }) }));
+                        : 0, metadataMappingFiles: flamegraphData.metadataMappingFiles, metadataLoading: flamegraphData.metadataLoading }) }));
         case 'callgraph':
             return callgraphData?.data !== undefined &&
                 callgraphSVG !== undefined &&

package/dist/ProfileView/context/ProfileViewContext.d.ts

@@ -1,8 +1,18 @@
 import { ReactNode } from 'react';
 import { ProfileSource } from '../../ProfileSource';
+import { NumberDuo } from '../../utils';
+export type TimelineGuideData = {
+    show: false;
+} | {
+    show: true;
+    props: {
+        bounds: NumberDuo;
+    };
+};
 interface Props {
     profileSource?: ProfileSource;
     compareMode: boolean;
+    timelineGuide?: TimelineGuideData;
 }
 export declare const defaultValue: Props;
 declare const ProfileViewContext: import("react").Context<Props>;

package/dist/ProfileView/context/ProfileViewContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileViewContext.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/context/ProfileViewContext.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,SAAS,EAA4B,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAElD,UAAU,KAAK;IACb,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,EAAE,KAG1B,CAAC;AAEF,QAAA,MAAM,kBAAkB,gCAAqC,CAAC;AAE9D,eAAO,MAAM,0BAA0B,yBAGpC;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,KAAG,GAAG,CAAC,OAMP,CAAC;AAEF,eAAO,MAAM,qBAAqB,QAAO,KAMxC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ProfileViewContext.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/context/ProfileViewContext.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,SAAS,EAA4B,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAEtC,MAAM,MAAM,iBAAiB,GACzB;IAAC,IAAI,EAAE,KAAK,CAAA;CAAC,GACb;IACE,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE;QACL,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;CACH,CAAC;AAEN,UAAU,KAAK;IACb,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,iBAAiB,CAAC;CACnC;AAED,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC;AAEF,QAAA,MAAM,kBAAkB,gCAAqC,CAAC;AAE9D,eAAO,MAAM,0BAA0B,yBAGpC;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,KAAG,GAAG,CAAC,OAMP,CAAC;AAEF,eAAO,MAAM,qBAAqB,QAAO,KAMxC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/ProfileView/context/ProfileViewContext.js

@@ -15,6 +15,7 @@ import { createContext, useContext } from 'react';
 export const defaultValue = {
     profileSource: undefined,
     compareMode: false,
+    timelineGuide: { show: false },
 };
 const ProfileViewContext = createContext(defaultValue);
 export const ProfileViewContextProvider = ({ children, value, }) => {

package/dist/ProfileView/index.d.ts

@@ -1,3 +1,3 @@
 import type { ProfileViewProps } from './types/visualization';
-export declare const ProfileView: ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector, showTimelineGuide, }: ProfileViewProps) => JSX.Element;
+export declare const ProfileView: ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector, timelineGuide, }: ProfileViewProps) => JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileView/index.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,gBAAgB,EAAoB,MAAM,uBAAuB,CAAC;AAG/E,eAAO,MAAM,WAAW,wMAcrB,gBAAgB,KAAG,GAAG,CAAC,OAyIzB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileView/index.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,gBAAgB,EAAoB,MAAM,uBAAuB,CAAC;AAG/E,eAAO,MAAM,WAAW,oMAcrB,gBAAgB,KAAG,GAAG,CAAC,OAwIzB,CAAC"}

package/dist/ProfileView/index.js

@@ -26,7 +26,7 @@ import { useGraphviz } from './hooks/useGraphviz';
 import { useProfileMetadata } from './hooks/useProfileMetadata';
 import { useVisualizationState } from './hooks/useVisualizationState';
 import { getColorRange } from './utils/colorUtils';
-export const ProfileView = ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector, showTimelineGuide, }) => {
+export const ProfileView = ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector, timelineGuide, }) => {
     const { timezone, perf, profileViewExternalMainActions, preferencesModal, profileViewExternalSubActions, } = useParcaContext();
     const { ref, dimensions } = useContainerDimensions();
     const isDarkMode = useAppSelector(selectDarkMode);
@@ -64,7 +64,6 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
             setSearchString,
             callgraphSVG,
             perf,
-            showTimelineGuide,
         });
     };
     const actionButtons = {
@@ -72,5 +71,5 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
         table: (_jsx(TableToolbar, { profileType: profileSource?.ProfileType(), total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })),
     };
     const hasProfileSource = profileSource !== undefined && profileSource.toString(timezone) !== '';
-    return (_jsx(KeyDownProvider, { children: _jsx(ProfileViewContextProvider, { value: { profileSource, compareMode }, children: _jsxs(DashboardProvider, { children: [_jsx(ProfileHeader, { profileSourceString: profileSource?.toString(timezone), hasProfileSource: hasProfileSource, externalMainActions: profileViewExternalMainActions }), _jsx(VisualisationToolbar, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, hasProfileSource: hasProfileSource, pprofdownloading: pprofDownloading, profileSource: profileSource, queryClient: queryClient, onDownloadPProf: onDownloadPProf, curPath: curPath, setNewCurPath: setCurPath, profileType: profileSource?.ProfileType(), total: total, filtered: filtered, currentSearchString: currentSearchString, setSearchString: setSearchString, groupByLabels: flamegraphData.metadataLabels ?? [], preferencesModal: preferencesModal, profileViewExternalSubActions: profileViewExternalSubActions, clearSelection: clearSelection, setGroupByLabels: setGroupByLabels, showVisualizationSelector: showVisualizationSelector }), isColorStackLegendEnabled && (_jsx(ColorStackLegend, { compareMode: compareMode, mappings: colorMappings, loading: flamegraphData.metadataLoading })), _jsx("div", { className: "w-full", ref: ref, children: _jsx(DashboardLayout, { getDashboardItemByType: getDashboardItemByType, actionButtons: actionButtons }) })] }) }) }));
+    return (_jsx(KeyDownProvider, { children: _jsx(ProfileViewContextProvider, { value: { profileSource, compareMode, timelineGuide }, children: _jsxs(DashboardProvider, { children: [_jsx(ProfileHeader, { profileSourceString: profileSource?.toString(timezone), hasProfileSource: hasProfileSource, externalMainActions: profileViewExternalMainActions }), _jsx(VisualisationToolbar, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, hasProfileSource: hasProfileSource, pprofdownloading: pprofDownloading, profileSource: profileSource, queryClient: queryClient, onDownloadPProf: onDownloadPProf, curPath: curPath, setNewCurPath: setCurPath, profileType: profileSource?.ProfileType(), total: total, filtered: filtered, currentSearchString: currentSearchString, setSearchString: setSearchString, groupByLabels: flamegraphData.metadataLabels ?? [], preferencesModal: preferencesModal, profileViewExternalSubActions: profileViewExternalSubActions, clearSelection: clearSelection, setGroupByLabels: setGroupByLabels, showVisualizationSelector: showVisualizationSelector }), isColorStackLegendEnabled && (_jsx(ColorStackLegend, { compareMode: compareMode, mappings: colorMappings, loading: flamegraphData.metadataLoading })), _jsx("div", { className: "w-full", ref: ref, children: _jsx(DashboardLayout, { getDashboardItemByType: getDashboardItemByType, actionButtons: actionButtons }) })] }) }) }));
 };

package/dist/ProfileView/types/visualization.d.ts

@@ -1,5 +1,6 @@
 import { Callgraph as CallgraphType, Flamegraph, FlamegraphArrow, QueryServiceClient, Source, TableArrow } from '@parca/client';
 import { ProfileSource } from '../../ProfileSource';
+import { TimelineGuideData } from '../context/ProfileViewContext';
 export interface FlamegraphData {
     loading: boolean;
     data?: Flamegraph;
@@ -46,5 +47,6 @@ export interface ProfileViewProps {
     pprofDownloading?: boolean;
     showVisualizationSelector?: boolean;
     showTimelineGuide?: boolean;
+    timelineGuide?: TimelineGuideData;
 }
 //# sourceMappingURL=visualization.d.ts.map

package/dist/ProfileView/types/visualization.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/types/visualization.ts"],"names":[],"mappings":"AAaA,OAAO,EACL,SAAS,IAAI,aAAa,EAC1B,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,MAAM,EACN,UAAU,EACX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5E,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B"}
+{"version":3,"file":"visualization.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/types/visualization.ts"],"names":[],"mappings":"AAaA,OAAO,EACL,SAAS,IAAI,aAAa,EAC1B,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,MAAM,EACN,UAAU,EACX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAC,iBAAiB,EAAC,MAAM,+BAA+B,CAAC;AAEhE,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5E,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,iBAAiB,CAAC;CACnC"}

package/dist/ProfileViewWithData.d.ts

@@ -1,12 +1,14 @@
 import { QueryServiceClient } from '@parca/client';
 import { ProfileSource } from './ProfileSource';
+import { TimelineGuideData } from './ProfileView/context/ProfileViewContext';
 interface ProfileViewWithDataProps {
     queryClient: QueryServiceClient;
     profileSource: ProfileSource;
     compare?: boolean;
     showVisualizationSelector?: boolean;
-    showTimelineGuide?: boolean;
+    isGroupByTimestamp?: boolean;
+    timelineGuide?: TimelineGuideData;
 }
-export declare const ProfileViewWithData: ({ queryClient, profileSource, showVisualizationSelector, showTimelineGuide, }: ProfileViewWithDataProps) => JSX.Element;
+export declare const ProfileViewWithData: ({ queryClient, profileSource, showVisualizationSelector, isGroupByTimestamp, timelineGuide, }: ProfileViewWithDataProps) => JSX.Element;
 export default ProfileViewWithData;
 //# sourceMappingURL=ProfileViewWithData.d.ts.map

package/dist/ProfileViewWithData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileViewWithData.d.ts","sourceRoot":"","sources":["../src/ProfileViewWithData.tsx"],"names":[],"mappings":"AAeA,OAAO,EAA0B,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAK1E,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAK9C,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,mBAAmB,kFAK7B,wBAAwB,KAAG,GAAG,CAAC,OAmNjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ProfileViewWithData.d.ts","sourceRoot":"","sources":["../src/ProfileViewWithData.tsx"],"names":[],"mappings":"AAeA,OAAO,EAA0B,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAK1E,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAC,iBAAiB,EAAC,MAAM,0CAA0C,CAAC;AAI3E,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,iBAAiB,CAAC;CACnC;AAED,eAAO,MAAM,mBAAmB,kGAM7B,wBAAwB,KAAG,GAAG,CAAC,OAsNjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/ProfileViewWithData.js

@@ -15,11 +15,11 @@ import { useEffect, useMemo, useState } from 'react';
 import { QueryRequest_ReportType } from '@parca/client';
 import { useGrpcMetadata, useParcaContext, useURLState } from '@parca/components';
 import { saveAsBlob } from '@parca/utilities';
-import { FIELD_FUNCTION_NAME } from './ProfileIcicleGraph/IcicleGraphArrow';
+import { FIELD_FUNCTION_NAME, FIELD_TIMESTAMP } from './ProfileIcicleGraph/IcicleGraphArrow';
 import { ProfileView } from './ProfileView';
 import { useQuery } from './useQuery';
 import { downloadPprof } from './utils';
-export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizationSelector, showTimelineGuide, }) => {
+export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizationSelector, isGroupByTimestamp, timelineGuide, }) => {
     const metadata = useGrpcMetadata();
     const [dashboardItems] = useURLState('dashboard_items', {
         alwaysReturnArray: true,
@@ -27,7 +27,10 @@ export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizat
     const [sourceBuildID] = useURLState('source_buildid');
     const [sourceFilename] = useURLState('source_filename');
     const [groupBy] = useURLState('group_by', {
-        defaultValue: [FIELD_FUNCTION_NAME],
+        defaultValue: [
+            isGroupByTimestamp === true ? FIELD_TIMESTAMP : null,
+            FIELD_FUNCTION_NAME,
+        ].filter(Boolean),
         alwaysReturnArray: true,
     });
     const [invertStack] = useURLState('invert_call_stack');
@@ -168,6 +171,6 @@ export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizat
                 ? sourceResponse?.report?.source
                 : undefined,
             error: sourceError,
-        }, profileSource: profileSource, queryClient: queryClient, onDownloadPProf: () => void downloadPProfClick(), pprofDownloading: pprofDownloading, showVisualizationSelector: showVisualizationSelector, showTimelineGuide: showTimelineGuide }));
+        }, profileSource: profileSource, queryClient: queryClient, onDownloadPProf: () => void downloadPProfClick(), pprofDownloading: pprofDownloading, showVisualizationSelector: showVisualizationSelector, timelineGuide: timelineGuide }));
 };
 export default ProfileViewWithData;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimelineGuide/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AAEnC,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAaD,eAAO,MAAM,aAAa,6CAA4C,KAAK,KAAG,GAAG,CAAC,OA8DjF,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimelineGuide/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AAEnC,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAaD,eAAO,MAAM,aAAa,6CAA4C,KAAK,KAAG,GAAG,CAAC,OAyDjF,CAAC"}