@parca/profile 0.16.452 → 0.16.453

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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/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,OAgEd,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,6 +51,7 @@ 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);
+                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 z-30", onClick: () => {
                                 const newCollapsedIndices = [...collapsedIndices];
                                 if (collapsedIndices.includes(i)) {
@@ -44,8 +61,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"}

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export * from './ProfileViewWithData';
 export * from './utils';
 export * from './ProfileTypeSelector';
 export * from './SourceView';
+export * from './ProfileMetricsGraph';
 export { default as Callgraph } from './Callgraph';
 export declare const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES: {
     dashboard_items: string;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAC,KAAK,IAAI,cAAc,EAAC,MAAM,aAAa,CAAC;AACzD,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,eAAe,EAAE,EAAC,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AAC1E,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AAEnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,aAAa,CAAC;AAEjD,eAAO,MAAM,qCAAqC;;CAEjD,CAAC;AAEF,YAAY,EAAC,cAAc,EAAC,CAAC;AAE7B,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,YAAY,EAAE,aAAa,EAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAC,KAAK,IAAI,cAAc,EAAC,MAAM,aAAa,CAAC;AACzD,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,eAAe,EAAE,EAAC,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AAC1E,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AAEnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,aAAa,CAAC;AAEjD,eAAO,MAAM,qCAAqC;;CAEjD,CAAC;AAEF,YAAY,EAAC,cAAc,EAAC,CAAC;AAE7B,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,YAAY,EAAE,aAAa,EAAC,CAAC"}

package/dist/index.js

@@ -22,6 +22,7 @@ export * from './ProfileViewWithData';
 export * from './utils';
 export * from './ProfileTypeSelector';
 export * from './SourceView';
+export * from './ProfileMetricsGraph';
 export { default as Callgraph } from './Callgraph';
 export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES = {
     dashboard_items: 'icicle',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.452",
+  "version": "0.16.453",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -74,5 +74,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "b4fffef9d7661cfe6e2cb36a6bc59961e9de6fe9"
+  "gitHead": "2e1089b0b34e67c26a29567db2c1e30e9516d10e"
 }

package/src/MetricsGraphStrips/MetricsGraphStrips.stories.tsx

@@ -46,21 +46,21 @@ 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: number, bounds: NumberDuo): void => {
-      console.log('onSelectedTimeline', index, bounds);
+    selectedTimeframe: {index: 1, bounds: [mockData[0][25].timestamp, mockData[0][100].timestamp]},
+    onSelectedTimeframe: (index: number, bounds: NumberDuo): void => {
+      console.log('onSelectedTimeframe', index, bounds);
     },
   },
   render: function Component(args: any): JSX.Element {
     const [, setArgs] = useArgs();
 
-    const onSelectedTimeline = (index: number, bounds: NumberDuo): void => {
-      args.onSelectedTimeline(index, bounds);
-      setArgs({...args, selectedTimeline: {index, bounds}});
+    const onSelectedTimeframe = (index: number, bounds: NumberDuo): void => {
+      args.onSelectedTimeframe(index, bounds);
+      setArgs({...args, selectedTimeframe: {index, bounds}});
     };
 
-    return <MetricsGraphStrips {...args} onSelectedTimeline={onSelectedTimeline} />;
+    return <MetricsGraphStrips {...args} onSelectedTimeframe={onSelectedTimeframe} />;
   },
 };

package/src/MetricsGraphStrips/index.tsx

@@ -16,30 +16,53 @@ import {useMemo, useState} from 'react';
 import {Icon} from '@iconify/react';
 import * as d3 from 'd3';
 
+import {LabelSet} from '@parca/client';
+
 import {TimelineGuide} from '../TimelineGuide';
 import {NumberDuo} from '../utils';
 import {AreaGraph, 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;
 }
 
-const getTimelineGuideHeight = (cpus: string[], collapsedIndices: number[]): number => {
+const labelSetToString = (labelSet?: LabelSet): string => {
+  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: LabelSet[], collapsedIndices: number[]): number => {
   return 56 * (cpus.length - collapsedIndices.length) + 20 * collapsedIndices.length + 24;
 };
 
 export const MetricsGraphStrips = ({
   cpus,
   data,
-  selectedTimeline,
-  onSelectedTimeline,
+  selectedTimeframe,
+  onSelectedTimeframe,
   width,
 }: Props): JSX.Element => {
   const [collapsedIndices, setCollapsedIndices] = useState<number[]>([]);
@@ -68,8 +91,9 @@ export const MetricsGraphStrips = ({
       />
       {cpus.map((cpu, i) => {
         const isCollapsed = collapsedIndices.includes(i);
+        const labelStr = labelSetToString(cpu);
         return (
-          <div className="relative min-h-5" style={{width: width ?? 1468}} key={cpu}>
+          <div className="relative min-h-5" style={{width: width ?? 1468}} key={labelStr}>
             <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={() => {
@@ -83,19 +107,19 @@ export const MetricsGraphStrips = ({
               }}
             >
               <Icon icon={isCollapsed ? 'bxs:right-arrow' : 'bxs:down-arrow'} />
-              {cpu}
+              {labelStr}
             </div>
             {!isCollapsed ? (
               <AreaGraph
                 data={data[i]}
                 height={56}
                 width={width ?? 1468}
-                fill={color(i.toString()) as string}
+                fill={color(labelStr) as string}
                 selectionBounds={
-                  selectedTimeline?.index === i ? selectedTimeline.bounds : undefined
+                  cpu === selectedTimeframe?.labels ? selectedTimeframe.bounds : undefined
                 }
                 setSelectionBounds={bounds => {
-                  onSelectedTimeline(i, bounds);
+                  onSelectedTimeframe(cpu, bounds);
                 }}
               />
             ) : null}

package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -44,6 +44,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/src/ProfileIcicleGraph/index.tsx

@@ -46,7 +46,6 @@ interface ProfileIcicleGraphProps {
   isHalfScreen: boolean;
   metadataMappingFiles?: string[];
   metadataLoading?: boolean;
-  showTimelineGuide?: boolean;
 }
 
 const ErrorContent = ({errorMessage}: {errorMessage: string}): JSX.Element => {
@@ -66,10 +65,9 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   width,
   isHalfScreen,
   metadataMappingFiles,
-  showTimelineGuide = false,
 }: ProfileIcicleGraphProps): JSX.Element {
   const {onError, authenticationErrorMessage, isDarkMode} = useParcaContext();
-  const {compareMode} = useProfileViewContext();
+  const {compareMode, timelineGuide} = useProfileViewContext();
   const [isLoading, setIsLoading] = useState<boolean>(true);
 
   const mappingsList = useMappingList(metadataMappingFiles);
@@ -169,9 +167,9 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     if (arrow !== undefined)
       return (
         <div className="relative">
-          {showTimelineGuide && (
+          {timelineGuide?.show === true && (
             <TimelineGuide
-              bounds={[0, 60000]}
+              bounds={timelineGuide.props.bounds}
               width={width}
               height={1000}
               margin={0}
@@ -210,7 +208,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     isDarkMode,
     mappingsList,
     isCompareAbsolute,
-    showTimelineGuide,
+    timelineGuide,
   ]);
 
   if (error != null) {

package/src/ProfileView/components/DashboardItems/index.tsx

@@ -47,7 +47,6 @@ interface GetDashboardItemProps {
   perf?: {
     onRender?: ProfilerOnRenderCallback;
   };
-  showTimelineGuide?: boolean;
 }
 
 export const getDashboardItem = ({
@@ -67,7 +66,6 @@ export const getDashboardItem = ({
   setSearchString,
   callgraphSVG,
   perf,
-  showTimelineGuide,
 }: GetDashboardItemProps): JSX.Element => {
   switch (type) {
     case 'icicle':
@@ -100,7 +98,6 @@ export const getDashboardItem = ({
             }
             metadataMappingFiles={flamegraphData.metadataMappingFiles}
             metadataLoading={flamegraphData.metadataLoading}
-            showTimelineGuide={showTimelineGuide}
           />
         </ConditionalWrapper>
       );

package/src/ProfileView/context/ProfileViewContext.tsx

@@ -14,15 +14,27 @@
 import {ReactNode, createContext, useContext} 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 const defaultValue: Props = {
   profileSource: undefined,
   compareMode: false,
+  timelineGuide: {show: false},
 };
 
 const ProfileViewContext = createContext<Props>(defaultValue);

package/src/ProfileView/index.tsx

@@ -42,7 +42,7 @@ export const ProfileView = ({
   pprofDownloading,
   compare,
   showVisualizationSelector,
-  showTimelineGuide,
+  timelineGuide,
 }: ProfileViewProps): JSX.Element => {
   const {
     timezone,
@@ -110,7 +110,6 @@ export const ProfileView = ({
       setSearchString,
       callgraphSVG,
       perf,
-      showTimelineGuide,
     });
   };
 
@@ -131,7 +130,7 @@ export const ProfileView = ({
 
   return (
     <KeyDownProvider>
-      <ProfileViewContextProvider value={{profileSource, compareMode}}>
+      <ProfileViewContextProvider value={{profileSource, compareMode, timelineGuide}}>
         <DashboardProvider>
           <ProfileHeader
             profileSourceString={profileSource?.toString(timezone)}

package/src/ProfileView/types/visualization.ts

@@ -21,6 +21,7 @@ import {
 } from '@parca/client';
 
 import {ProfileSource} from '../../ProfileSource';
+import {TimelineGuideData} from '../context/ProfileViewContext';
 
 export interface FlamegraphData {
   loading: boolean;
@@ -73,4 +74,5 @@ export interface ProfileViewProps {
   pprofDownloading?: boolean;
   showVisualizationSelector?: boolean;
   showTimelineGuide?: boolean;
+  timelineGuide?: TimelineGuideData;
 }

package/src/ProfileViewWithData.tsx

@@ -17,9 +17,10 @@ import {QueryRequest_ReportType, QueryServiceClient} 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 {ProfileSource} from './ProfileSource';
 import {ProfileView} from './ProfileView';
+import {TimelineGuideData} from './ProfileView/context/ProfileViewContext';
 import {useQuery} from './useQuery';
 import {downloadPprof} from './utils';
 
@@ -28,14 +29,16 @@ interface ProfileViewWithDataProps {
   profileSource: ProfileSource;
   compare?: boolean;
   showVisualizationSelector?: boolean;
-  showTimelineGuide?: boolean;
+  isGroupByTimestamp?: boolean;
+  timelineGuide?: TimelineGuideData;
 }
 
 export const ProfileViewWithData = ({
   queryClient,
   profileSource,
   showVisualizationSelector,
-  showTimelineGuide,
+  isGroupByTimestamp,
+  timelineGuide,
 }: ProfileViewWithDataProps): JSX.Element => {
   const metadata = useGrpcMetadata();
   const [dashboardItems] = useURLState<string[]>('dashboard_items', {
@@ -44,7 +47,10 @@ export const ProfileViewWithData = ({
   const [sourceBuildID] = useURLState<string>('source_buildid');
   const [sourceFilename] = useURLState<string>('source_filename');
   const [groupBy] = useURLState<string[]>('group_by', {
-    defaultValue: [FIELD_FUNCTION_NAME],
+    defaultValue: [
+      isGroupByTimestamp === true ? FIELD_TIMESTAMP : (null as unknown as string),
+      FIELD_FUNCTION_NAME,
+    ].filter(Boolean),
     alwaysReturnArray: true,
   });
 
@@ -244,7 +250,7 @@ export const ProfileViewWithData = ({
       onDownloadPProf={() => void downloadPProfClick()}
       pprofDownloading={pprofDownloading}
       showVisualizationSelector={showVisualizationSelector}
-      showTimelineGuide={showTimelineGuide}
+      timelineGuide={timelineGuide}
     />
   );
 };

package/src/TimelineGuide/index.tsx

@@ -88,11 +88,6 @@ export const TimelineGuide = ({bounds, width, height, margin, ticks}: Props): JS
               y1={-height + 20}
               y2={-height + 20}
             />
-            {/* <g transform={`translate(${(width - 2.5 * margin) / 2}, ${margin / 2})`}>
-                <text fill="currentColor" dy=".71em" y={5} className="text-sm">
-                    Time
-                </text>
-            </g> */}
           </g>
         </svg>
       </div>

package/src/index.tsx

@@ -25,6 +25,7 @@ export * from './ProfileViewWithData';
 export * from './utils';
 export * from './ProfileTypeSelector';
 export * from './SourceView';
+export * from './ProfileMetricsGraph';
 export {default as Callgraph} from './Callgraph';
 
 export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES = {