@parca/profile 0.16.456 → 0.16.458

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.458](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.457...@parca/profile@0.16.458) (2025-01-07)
+
+**Note:** Version bump only for package @parca/profile
+
+## 0.16.457 (2025-01-06)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.456](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.455...@parca/profile@0.16.456) (2024-12-16)
 
 **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-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
+    return (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: "z-20", children: _jsx("div", { className: "flex max-w-lg", 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 pr-3", children: "Per\u00A0Second" }), _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/index.d.ts

@@ -11,6 +11,7 @@ interface Props {
     onSelectedTimeframe: (labels: LabelSet, bounds: NumberDuo | undefined) => void;
     width?: number;
 }
+export declare const labelSetToString: (labelSet?: LabelSet) => string;
 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":"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"}
+{"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;AAED,eAAO,MAAM,gBAAgB,cAAe,QAAQ,KAAG,MAmBtD,CAAC;AAMF,eAAO,MAAM,kBAAkB,mEAM5B,KAAK,KAAG,GAAG,CAAC,OAmEd,CAAC"}

package/dist/MetricsGraphStrips/index.js

@@ -16,7 +16,7 @@ import { Icon } from '@iconify/react';
 import * as d3 from 'd3';
 import { TimelineGuide } from '../TimelineGuide';
 import { AreaGraph } from './AreaGraph';
-const labelSetToString = (labelSet) => {
+export const labelSetToString = (labelSet) => {
     if (labelSet === undefined) {
         return '{}';
     }
@@ -40,7 +40,7 @@ export const MetricsGraphStrips = ({ cpus, data, selectedTimeframe, onSelectedTi
     // @ts-expect-error
     const color = d3.scaleOrdinal(d3.schemeObservable10);
     const bounds = useMemo(() => {
-        const bounds = [Infinity, -Infinity];
+        const bounds = data.length > 0 ? [Infinity, -Infinity] : [0, 1];
         data.forEach(cpuData => {
             cpuData.forEach(dataPoint => {
                 bounds[0] = Math.min(bounds[0], dataPoint.timestamp);
@@ -49,7 +49,7 @@ export const MetricsGraphStrips = ({ cpus, data, selectedTimeframe, onSelectedTi
         });
         return [0, bounds[1] - bounds[0]];
     }, [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) => {
+    return (_jsxs("div", { className: "flex flex-col gap-1 relative my-0 ml-[70px]", style: { width: width ?? '100%' }, children: [_jsx(TimelineGuide, { bounds: [BigInt(bounds[0]), BigInt(bounds[1])], 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", style: {

package/dist/ProfileIcicleGraph/IcicleGraph/index.js

@@ -36,7 +36,7 @@ export const IcicleGraph = memo(function IcicleGraph({ graph, total, filtered, w
     }, [width, coloredGraph]);
     const xScale = useMemo(() => {
         if (width === undefined) {
-            return () => 0;
+            return scaleLinear([0n, total], [0, 1]);
         }
         return scaleLinear([0n, total], [0, width]);
     }, [total, width]);

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ProfileSource } from '../../ProfileSource';
+import { IcicleNodeProps } from './IcicleGraphNodes';
+interface IcicleChartRootNodeSpecificProps {
+    profileSource?: ProfileSource;
+}
+export declare const IcicleChartRootNode: React.NamedExoticComponent<IcicleNodeProps & IcicleChartRootNodeSpecificProps>;
+export {};
+//# sourceMappingURL=IcicleChartRootNode.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IcicleChartRootNode.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/IcicleChartRootNode.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAa,eAAe,EAAY,MAAM,oBAAoB,CAAC;AAG1E,UAAU,gCAAgC;IACxC,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,eAAO,MAAM,mBAAmB,gFA8H9B,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleChartRootNode.js

@@ -0,0 +1,51 @@
+import { Fragment as _Fragment, 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 React from 'react';
+import cx from 'classnames';
+import twColors from 'tailwindcss/colors';
+import { scaleLinear } from '@parca/utilities';
+import { FIELD_CHILDREN, FIELD_CUMULATIVE, FIELD_GROUPBY_METADATA } from '.';
+import { IcicleNode, RowHeight } from './IcicleGraphNodes';
+import { arrowToString, boundsFromProfileSource } from './utils';
+export const IcicleChartRootNode = React.memo(function IcicleChartRootNodeNonMemo({ table, row, colors, colorBy, y, height, setCurPath, curPath, level, path, total, totalWidth, xScale, searchString, setHoveringRow, setHoveringLevel, sortBy, darkMode, compareMode, profileType, isContextMenuOpen, hoveringName, setHoveringName, hoveringRow, colorForSimilarNodes, highlightSimilarStacksPreference, profileSource, }) {
+    // get the columns to read from
+    const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
+    const groupByMetadata = table.getChild(FIELD_GROUPBY_METADATA);
+    const cumulative = cumulativeColumn?.get(row) !== null ? BigInt(cumulativeColumn?.get(row)) : 0n;
+    const childRows = Array.from(table.getChild(FIELD_CHILDREN)?.get(row) ?? []).sort((a, b) => a - b);
+    const tsBounds = boundsFromProfileSource(profileSource);
+    const nextLevel = level + 1;
+    const nextCurPath = curPath.length === 0 ? [] : curPath.slice(1);
+    const tsXScale = scaleLinear([tsBounds[0], tsBounds[1]], [0, totalWidth]);
+    const width = nextCurPath.length > 0 || (nextCurPath.length === 0 && curPath.length === 1)
+        ? totalWidth
+        : xScale(BigInt(cumulative));
+    if (width <= 1) {
+        return _jsx(_Fragment, { children: null });
+    }
+    return (_jsx(_Fragment, { children: childRows.map(row => {
+            const groupByFields = (groupByMetadata?.get(row)).toJSON();
+            const tsStr = arrowToString(groupByFields.timestamp);
+            const tsNanos = BigInt(parseInt(tsStr, 10)) * 1000000n;
+            const durationStr = arrowToString(groupByFields.duration);
+            const duration = parseInt(durationStr, 10);
+            const x = tsXScale(tsNanos);
+            const width = tsXScale(tsNanos + BigInt(Math.round(duration))) - x;
+            const cumulative = cumulativeColumn?.get(row) !== null ? BigInt(cumulativeColumn?.get(row)) : 0n;
+            const newXScale = scaleLinear([0n, BigInt(cumulative)], [0, width]);
+            return (_jsxs(_Fragment, { children: [_jsxs("g", { transform: `translate(${x + 1}, ${y + 1})`, children: [_jsx("rect", { x: 0, y: 0, width: width, height: RowHeight, style: {
+                                    fill: darkMode ? twColors.gray[500] : twColors.gray[200],
+                                }, className: cx(`stroke-white dark:stroke-gray-700 fill-gray-600 dark:fill-gray-100`) }), _jsx("svg", { width: width - 5, height: height, children: _jsx("text", { x: 5, y: 15, style: { fontSize: '12px' }, children: "root" }) })] }), _jsx(IcicleNode, { table: table, row: row, colors: colors, colorBy: colorBy, x: x, y: RowHeight, totalWidth: width ?? 1, height: RowHeight, setCurPath: setCurPath, curPath: curPath, total: total, xScale: newXScale, path: path, level: nextLevel, searchString: searchString ?? '', setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, sortBy: sortBy, darkMode: darkMode, compareMode: compareMode, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }, row)] }));
+        }) }));
+});

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

@@ -36,7 +36,7 @@ export declare const IcicleGraphNodes: React.NamedExoticComponent<IcicleGraphNod
 export interface colorByColors {
     [key: string]: string;
 }
-interface IcicleNodeProps {
+export interface IcicleNodeProps {
     x: number;
     y: number;
     height: number;
@@ -66,6 +66,15 @@ interface IcicleNodeProps {
     colorForSimilarNodes: string;
     highlightSimilarStacksPreference: boolean;
 }
+export declare const icicleRectStyles: {
+    cursor: string;
+    transition: string;
+};
+export declare const fadedIcicleRectStyles: {
+    cursor: string;
+    transition: string;
+    opacity: string;
+};
 export declare const IcicleNode: React.NamedExoticComponent<IcicleNodeProps>;
 export {};
 //# sourceMappingURL=IcicleGraphNodes.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IcicleGraphNodes.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"IcicleGraphNodes.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx"],"names":[],"mappings":"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"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.js

@@ -40,11 +40,11 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({ tab
     });
     return _jsx("g", { transform: `translate(${x}, ${y})`, children: childrenElements });
 });
-const icicleRectStyles = {
+export const icicleRectStyles = {
     cursor: 'pointer',
     transition: 'opacity .15s linear',
 };
-const fadedIcicleRectStyles = {
+export const fadedIcicleRectStyles = {
     cursor: 'pointer',
     transition: 'opacity .15s linear',
     opacity: '0.5',

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { FlamegraphArrow } from '@parca/client';
 import { ProfileType } from '@parca/parser';
 import { type ColorConfig } from '@parca/utilities';
+import { ProfileSource } from '../../ProfileSource';
 import { colorByColors } from './IcicleGraphNodes';
 export declare const FIELD_LABELS_ONLY = "labels_only";
 export declare const FIELD_MAPPING_FILE = "mapping_file";
@@ -10,6 +11,8 @@ 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_DURATION = "duration";
+export declare const FIELD_GROUPBY_METADATA = "groupby_metadata";
 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";
@@ -24,6 +27,7 @@ interface IcicleGraphArrowProps {
     total: bigint;
     filtered: bigint;
     profileType?: ProfileType;
+    profileSource?: ProfileSource;
     width?: number;
     curPath: string[];
     setCurPath: (path: string[]) => void;
@@ -32,6 +36,7 @@ interface IcicleGraphArrowProps {
     isHalfScreen: boolean;
     mappingsListFromMetadata: string[];
     compareAbsolute: boolean;
+    isIcicleChart?: boolean;
 }
 export declare const getMappingColors: (mappingsList: string[], isDarkMode: boolean, currentColorProfile: ColorConfig) => colorByColors;
 export declare const getFilenameColors: (filenamesList: string[], isDarkMode: boolean, currentColorProfile: ColorConfig) => colorByColors;

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,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"}
+{"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;AAK5E,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAIlD,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,cAAc,aAAa,CAAC;AACzC,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AACjE,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,yBAAyB,uBAAuB,CAAC;AAC9D,eAAO,MAAM,cAAc,aAAa,CAAC;AACzC,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAC7C,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,UAAU,SAAS,CAAC;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,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,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;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;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,mDAqU3B,CAAC;AAEH,eAAe,gBAAgB,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -23,6 +23,7 @@ import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
 import { DockedGraphTooltip } from '../../GraphTooltipArrow/DockedGraphTooltip';
 import { useProfileViewContext } from '../../ProfileView/context/ProfileViewContext';
 import ContextMenu from './ContextMenu';
+import { IcicleChartRootNode } from './IcicleChartRootNode';
 import { IcicleNode, RowHeight } from './IcicleGraphNodes';
 import { useFilenamesList } from './useMappingList';
 import { arrowToString, extractFeature, extractFilenameFeature } from './utils';
@@ -33,6 +34,8 @@ 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_DURATION = 'duration';
+export const FIELD_GROUPBY_METADATA = 'groupby_metadata';
 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';
@@ -59,7 +62,7 @@ export const getFilenameColors = (filenamesList, isDarkMode, currentColorProfile
     return colors;
 };
 const noop = () => { };
-export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, sortBy, flamegraphLoading, mappingsListFromMetadata, compareAbsolute, }) {
+export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, profileSource, sortBy, flamegraphLoading, mappingsListFromMetadata, compareAbsolute, isIcicleChart = false, }) {
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
     const dispatch = useAppDispatch();
     const [highlightSimilarStacksPreference] = useUserPreference(USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key);
@@ -168,6 +171,9 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
     }, []);
     // useMemo for the root graph as it otherwise renders the whole graph if the hoveringRow changes.
     const root = useMemo(() => {
+        if (isIcicleChart) {
+            return (_jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, onContextMenu: displayMenu, children: _jsx("g", { ref: ref, children: _jsx("g", { transform: 'translate(0, 0)', children: _jsx(IcicleChartRootNode, { table: table, row: 0, colors: colorByColors, colorBy: colorByValue, x: 0, y: 0, totalWidth: width ?? 1, height: RowHeight, setCurPath: setCurPath, curPath: curPath, total: total, xScale: xScale, path: path, level: 0, isRoot: true, searchString: currentSearchString ?? '', setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: highlightSimilarStacksName, setHoveringName: highlightSimilarStacksSetName, hoveringRow: highlightSimilarStacksRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference, profileSource: profileSource }) }) }) }));
+        }
         return (_jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, onContextMenu: displayMenu, children: _jsx("g", { ref: ref, children: _jsx("g", { transform: 'translate(0, 0)', children: _jsx(IcicleNode, { table: table, row: 0, colors: colorByColors, colorBy: colorByValue, x: 0, y: 0, totalWidth: width ?? 1, height: RowHeight, setCurPath: setCurPath, curPath: curPath, total: total, xScale: xScale, path: path, level: 0, isRoot: true, searchString: currentSearchString ?? '', setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: highlightSimilarStacksName, setHoveringName: highlightSimilarStacksSetName, hoveringRow: highlightSimilarStacksRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }) }) }) }));
     }, [
         width,
@@ -192,6 +198,8 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
         highlightSimilarStacksPreference,
         path,
         highlightSimilarStacksSetName,
+        isIcicleChart,
+        profileSource,
     ]);
     return (_jsx(_Fragment, { children: _jsxs("div", { className: "relative z-[9]", onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [_jsx(ContextMenu, { menuId: MENU_ID, table: table, row: hoveringRow ?? 0, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, profileType: profileType, compareAbsolute: compareAbsolute, trackVisibility: trackVisibility, curPath: curPath, setCurPath: setCurPath, hideMenu: hideAll, hideBinary: hideBinary, unit: arrow.unit }), dockedMetainfo ? (_jsx(DockedGraphTooltip, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, profileType: profileType, unit: arrow.unit, compareAbsolute: compareAbsolute })) : (!isContextMenuOpen && (_jsx(GraphTooltipArrow, { contextElement: svg.current, isContextMenuOpen: isContextMenuOpen, children: _jsx(GraphTooltipArrowContent, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, isFixed: false, total: total, totalUnfiltered: total + filtered, profileType: profileType, unit: arrow.unit, compareAbsolute: compareAbsolute }) }))), root] }) }));
 });

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

@@ -1,9 +1,12 @@
 import { Table } from 'apache-arrow';
 import { type BinaryFeature, type FilenameFeature } from '@parca/store';
+import { ProfileSource } from '../../ProfileSource';
+import { BigIntDuo } from '../../utils';
 export declare function nodeLabel(table: Table<any>, row: number, level: number, showBinaryName: boolean): string;
 export declare const extractFeature: (mapping: string) => BinaryFeature;
 export declare const extractFilenameFeature: (filename: string) => FilenameFeature;
 export declare const getTextForCumulative: (hoveringNodeCumulative: bigint, totalUnfiltered: bigint, total: bigint, unit: string) => string;
 export declare const getTextForCumulativePerSecond: (hoveringNodeCumulative: number, unit: string) => string;
 export declare const arrowToString: (buffer: any) => string | null;
+export declare const boundsFromProfileSource: (profileSource?: ProfileSource) => BigIntDuo;
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAWtB,wBAAgB,SAAS,CACvB,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EACjB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,cAAc,EAAE,OAAO,GACtB,MAAM,CAkCR;AAED,eAAO,MAAM,cAAc,YAAa,MAAM,KAAG,aAMhD,CAAC;AAEF,eAAO,MAAM,sBAAsB,aAAc,MAAM,KAAG,eAMzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,2BACP,MAAM,mBACb,MAAM,SAChB,MAAM,QACP,MAAM,KACX,MAOF,CAAC;AAEF,eAAO,MAAM,6BAA6B,2BAChB,MAAM,QACxB,MAAM,KACX,MAMF,CAAC;AAEF,eAAO,MAAM,aAAa,WAAY,GAAG,KAAG,MAAM,GAAG,IAQpD,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAsB,aAAa,EAAC,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAC,SAAS,EAAgB,MAAM,aAAa,CAAC;AAQrD,wBAAgB,SAAS,CACvB,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EACjB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,cAAc,EAAE,OAAO,GACtB,MAAM,CAkCR;AAED,eAAO,MAAM,cAAc,YAAa,MAAM,KAAG,aAMhD,CAAC;AAEF,eAAO,MAAM,sBAAsB,aAAc,MAAM,KAAG,eAMzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,2BACP,MAAM,mBACb,MAAM,SAChB,MAAM,QACP,MAAM,KACX,MAOF,CAAC;AAEF,eAAO,MAAM,6BAA6B,2BAChB,MAAM,QACxB,MAAM,KACX,MAMF,CAAC;AAEF,eAAO,MAAM,aAAa,WAAY,GAAG,KAAG,MAAM,GAAG,IAQpD,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBAAoB,aAAa,KAAG,SAyBvE,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/utils.js

@@ -12,6 +12,7 @@
 // limitations under the License.
 import { BINARY_FEATURE_TYPES, EVERYTHING_ELSE, FILENAMES_FEATURE_TYPES, } from '@parca/store';
 import { divide, getLastItem, valueFormatter } from '@parca/utilities';
+import { MergedProfileSource } from '../../ProfileSource';
 import { hexifyAddress } from '../../utils';
 import { FIELD_FUNCTION_NAME, FIELD_LABELS_ONLY, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from './index';
 export function nodeLabel(table, row, level, showBinaryName) {
@@ -75,3 +76,20 @@ export const arrowToString = (buffer) => {
     }
     return '';
 };
+export const boundsFromProfileSource = (profileSource) => {
+    if (profileSource === undefined) {
+        return [0n, 1n];
+    }
+    if (!(profileSource instanceof MergedProfileSource)) {
+        return [0n, 1n];
+    }
+    const request = profileSource.QueryRequest();
+    if (request.options.oneofKind !== 'merge' ||
+        request.options.merge.start === undefined ||
+        request.options.merge.end === undefined) {
+        return [0n, 1n];
+    }
+    const start = request.options.merge.start.seconds * 1000000000n + BigInt(request.options.merge.start.nanos);
+    const end = request.options.merge.end.seconds * 1000000000n + BigInt(request.options.merge.end.nanos);
+    return [start, end];
+};

package/dist/ProfileIcicleGraph/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Flamegraph, FlamegraphArrow } from '@parca/client';
 import { ProfileType } from '@parca/parser';
+import { ProfileSource } from '../ProfileSource';
 export type ResizeHandler = (width: number, height: number) => void;
 interface ProfileIcicleGraphProps {
     width: number;
@@ -9,6 +10,7 @@ interface ProfileIcicleGraphProps {
     total: bigint;
     filtered: bigint;
     profileType?: ProfileType;
+    profileSource?: ProfileSource;
     curPath: string[] | [];
     setNewCurPath: (path: string[]) => void;
     loading: boolean;
@@ -17,7 +19,8 @@ interface ProfileIcicleGraphProps {
     isHalfScreen: boolean;
     metadataMappingFiles?: string[];
     metadataLoading?: boolean;
+    isIcicleChart?: boolean;
 }
-declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, }: ProfileIcicleGraphProps) => JSX.Element;
+declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isIcicleChart, profileSource, }: 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;CAC3B;AAMD,QAAA,MAAM,kBAAkB,uIAarB,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;AAG1C,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAW/C,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,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,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,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAMD,QAAA,MAAM,kBAAkB,qKAerB,uBAAuB,KAAG,GAAG,CAAC,OA+LhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/ProfileIcicleGraph/index.js

@@ -21,13 +21,14 @@ import { TimelineGuide } from '../TimelineGuide';
 import { IcicleGraph } from './IcicleGraph';
 import { FIELD_FUNCTION_NAME, IcicleGraphArrow } from './IcicleGraphArrow';
 import useMappingList from './IcicleGraphArrow/useMappingList';
+import { boundsFromProfileSource } from './IcicleGraphArrow/utils';
 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, }) {
+const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isIcicleChart = false, profileSource, }) {
     const { onError, authenticationErrorMessage, isDarkMode } = useParcaContext();
-    const { compareMode, timelineGuide } = useProfileViewContext();
+    const { compareMode } = useProfileViewContext();
     const [isLoading, setIsLoading] = useState(true);
     const mappingsList = useMappingList(metadataMappingFiles);
     const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState('sort_by');
@@ -83,7 +84,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: [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 })] }));
+            return (_jsxs("div", { className: "relative", children: [isIcicleChart ? (_jsx(TimelineGuide, { bounds: boundsFromProfileSource(profileSource), width: width, height: 1000, margin: 0, ticks: 12, timeUnit: "nanoseconds" })) : null, _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, isIcicleChart: isIcicleChart, profileSource: profileSource })] }));
     }, [
         isLoading,
         graph,
@@ -100,7 +101,8 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         isDarkMode,
         mappingsList,
         isCompareAbsolute,
-        timelineGuide,
+        isIcicleChart,
+        profileSource,
     ]);
     if (error != null) {
         onError?.(error);

package/dist/ProfileSelector/QueryControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QueryControls.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/QueryControls.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAClD,OAAe,EAAC,KAAK,cAAc,EAAC,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAC,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,EAAsB,aAAa,EAAsB,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAC,WAAW,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAYjD,UAAU,kBAAkB;IAC1B,uBAAuB,EAAE,OAAO,CAAC;IACjC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,0BAA0B,EAAE,OAAO,CAAC;IACpC,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACnD,iBAAiB,CAAC,EAAE,QAAQ,CAAC;IAC7B,aAAa,CAAC,EAAE;QACd,2BAA2B,CAAC,EAAE,OAAO,CAAC;QACtC,0BAA0B,CAAC,EAAE,OAAO,CAAC;QACrC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;QACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACvC,CAAC;IACF,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,2BAA2B,EAAE,OAAO,CAAC;IACrC,8BAA8B,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,kBAAkB,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,KAAK,EAAE,KAAK,CAAC;IACb,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACjD,kBAAkB,EAAE,aAAa,CAAC;IAClC,qBAAqB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACtD,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,kBAAkB,CAAC;IAChC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC1C,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,aAAa,CAAC,EAC5B,uBAAuB,EACvB,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,2BAA2B,EAC3B,8BAA8B,EAC9B,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,qBAAqB,EACrB,cAAc,EACd,WAAW,EACX,MAAM,EACN,cAAc,EACd,qBAAqB,EACrB,QAAQ,EACR,WAAW,EACX,iBAAiB,EACjB,iBAAiB,GAClB,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA8IlC"}
+{"version":3,"file":"QueryControls.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/QueryControls.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAClD,OAAe,EAAC,KAAK,cAAc,EAAC,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAC,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,EAAS,aAAa,EAAsB,MAAM,mBAAmB,CAAC;AAC7E,OAAO,EAAC,WAAW,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAYjD,UAAU,kBAAkB;IAC1B,uBAAuB,EAAE,OAAO,CAAC;IACjC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,0BAA0B,EAAE,OAAO,CAAC;IACpC,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACnD,iBAAiB,CAAC,EAAE,QAAQ,CAAC;IAC7B,aAAa,CAAC,EAAE;QACd,2BAA2B,CAAC,EAAE,OAAO,CAAC;QACtC,0BAA0B,CAAC,EAAE,OAAO,CAAC;QACrC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;QACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACvC,CAAC;IACF,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,2BAA2B,EAAE,OAAO,CAAC;IACrC,8BAA8B,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,kBAAkB,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,KAAK,EAAE,KAAK,CAAC;IACb,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACjD,kBAAkB,EAAE,aAAa,CAAC;IAClC,qBAAqB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACtD,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,kBAAkB,CAAC;IAChC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC1C,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,aAAa,CAAC,EAC5B,uBAAuB,EACvB,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,2BAA2B,EAC3B,8BAA8B,EAC9B,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,qBAAqB,EACrB,cAAc,EACd,WAAW,EACX,MAAM,EACN,cAAc,EACd,qBAAqB,EACrB,QAAQ,EACR,WAAW,EACX,iBAAiB,EACjB,iBAAiB,GAClB,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA+IlC"}

package/dist/ProfileSelector/QueryControls.js

@@ -13,13 +13,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // limitations under the License.
 import { Switch } from '@headlessui/react';
 import Select from 'react-select';
-import { Button, ButtonGroup, DateTimeRangePicker } from '@parca/components';
+import { Button, DateTimeRangePicker } from '@parca/components';
 import MatchersInput from '../MatchersInput';
 import ProfileTypeSelector from '../ProfileTypeSelector';
 import SimpleMatchers from '../SimpleMatchers';
 import ViewMatchers from '../ViewMatchers';
 export function QueryControls({ showProfileTypeSelector, profileTypesData, profileTypesLoading, selectedProfileName, setProfileName, viewComponent, setQueryBrowserMode, advancedModeForQueryBrowser, setAdvancedModeForQueryBrowser, setMatchersString, setQueryExpression, query, queryBrowserRef, timeRangeSelection, setTimeRangeSelection, searchDisabled, queryClient, labels, sumBySelection, setUserSumBySelection, sumByRef, profileType, showSumBySelector, profileTypesError, }) {
-    return (_jsxs("div", { className: "flex w-full flex-wrap items-end gap-2", children: [showProfileTypeSelector && (_jsxs("div", { children: [_jsx("label", { className: "text-xs", children: "Profile type" }), _jsx(ProfileTypeSelector, { profileTypesData: profileTypesData, loading: profileTypesLoading, selectedKey: selectedProfileName, onSelection: setProfileName, error: profileTypesError, disabled: viewComponent?.disableProfileTypesDropdown })] })), _jsxs("div", { className: "w-full flex-1 flex flex-col gap-1", ref: queryBrowserRef, children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("label", { className: "text-xs", children: "Query" }), viewComponent?.disableExplorativeQuerying !== true && (_jsxs(_Fragment, { children: [_jsxs(Switch, { checked: advancedModeForQueryBrowser, onChange: () => {
+    return (_jsxs("div", { className: "flex w-full flex-wrap items-start gap-2", children: [showProfileTypeSelector && (_jsxs("div", { children: [_jsx("label", { className: "text-xs", children: "Profile type" }), _jsx(ProfileTypeSelector, { profileTypesData: profileTypesData, loading: profileTypesLoading, selectedKey: selectedProfileName, onSelection: setProfileName, error: profileTypesError, disabled: viewComponent?.disableProfileTypesDropdown })] })), _jsxs("div", { className: "w-full flex-1 flex flex-col gap-1", ref: queryBrowserRef, children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("label", { className: "text-xs", children: "Query" }), viewComponent?.disableExplorativeQuerying !== true && (_jsxs(_Fragment, { children: [_jsxs(Switch, { checked: advancedModeForQueryBrowser, onChange: () => {
                                                 setAdvancedModeForQueryBrowser(!advancedModeForQueryBrowser);
                                                 setQueryBrowserMode(advancedModeForQueryBrowser ? 'simple' : 'advanced');
                                             }, className: `${advancedModeForQueryBrowser ? 'bg-indigo-600' : 'bg-gray-400 dark:bg-gray-800'} relative inline-flex h-[20px] w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75`, children: [_jsx("span", { className: "sr-only", children: "Use setting" }), _jsx("span", { "aria-hidden": "true", className: `${advancedModeForQueryBrowser ? 'translate-x-6' : 'translate-x-0'} pointer-events-none inline-block h-[16px] w-[16px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out` })] }), _jsx("label", { className: "text-xs", children: "Advanced Mode" })] }))] }) }), viewComponent?.disableExplorativeQuerying === true &&
@@ -47,8 +47,8 @@ export function QueryControls({ showProfileTypeSelector, profileTypesData, profi
                                 setQueryExpression(true);
                                 currentRef.blur();
                             }
-                        } })] })), _jsx(DateTimeRangePicker, { onRangeSelection: setTimeRangeSelection, range: timeRangeSelection }), _jsx(ButtonGroup, { children: _jsx(Button, { disabled: searchDisabled, onClick: (e) => {
-                        e.preventDefault();
-                        setQueryExpression(true);
-                    }, id: "h-matcher-search-button", children: "Search" }) })] }));
+                        } })] })), _jsx(DateTimeRangePicker, { onRangeSelection: setTimeRangeSelection, range: timeRangeSelection }), _jsxs("div", { children: [_jsx("label", { className: "text-xs", children: "\u00A0" }), _jsx(Button, { disabled: searchDisabled, onClick: (e) => {
+                            e.preventDefault();
+                            setQueryExpression(true);
+                        }, id: "h-matcher-search-button", children: "Search" })] })] }));
 }

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

@@ -6,6 +6,7 @@ interface GetDashboardItemProps {
     isHalfScreen: boolean;
     dimensions: DOMRect | undefined;
     flamegraphData: FlamegraphData;
+    flamechartData: FlamegraphData;
     topTableData?: TopTableData;
     callgraphData?: CallgraphData;
     sourceData?: SourceData;
@@ -21,6 +22,6 @@ interface GetDashboardItemProps {
         onRender?: ProfilerOnRenderCallback;
     };
 }
-export declare const getDashboardItem: ({ type, isHalfScreen, dimensions, flamegraphData, topTableData, callgraphData, sourceData, profileSource, total, filtered, curPath, setNewCurPath, currentSearchString, setSearchString, callgraphSVG, perf, }: GetDashboardItemProps) => JSX.Element;
+export declare const getDashboardItem: ({ type, isHalfScreen, dimensions, flamegraphData, flamechartData, 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;CACH;AAED,eAAO,MAAM,gBAAgB,mNAiB1B,qBAAqB,KAAG,GAAG,CAAC,OA+E9B,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,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,mOAkB1B,qBAAqB,KAAG,GAAG,CAAC,OAwG9B,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, }) => {
+export const getDashboardItem = ({ type, isHalfScreen, dimensions, flamegraphData, flamechartData, 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: {
@@ -28,6 +28,12 @@ export const getDashboardItem = ({ type, isHalfScreen, dimensions, flamegraphDat
                             ? (dimensions.width - 54) / 2
                             : dimensions.width - 16
                         : 0, metadataMappingFiles: flamegraphData.metadataMappingFiles, metadataLoading: flamegraphData.metadataLoading }) }));
+        case 'iciclechart':
+            return (_jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, arrow: flamechartData?.arrow, total: total, filtered: filtered, profileType: profileSource?.ProfileType(), loading: flamechartData.loading, error: flamechartData.error, isHalfScreen: isHalfScreen, width: dimensions?.width !== undefined
+                    ? isHalfScreen
+                        ? (dimensions.width - 54) / 2
+                        : dimensions.width - 16
+                    : 0, metadataMappingFiles: flamechartData.metadataMappingFiles, metadataLoading: flamechartData.metadataLoading, profileSource: profileSource, isIcicleChart: true }));
         case 'callgraph':
             return callgraphData?.data !== undefined &&
                 callgraphSVG !== undefined &&

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/index.tsx"],"names":[],"mappings":"AAiBA,QAAA,MAAM,YAAY,QAAO,GAAG,CAAC,OAwF5B,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/index.tsx"],"names":[],"mappings":"AAiBA,QAAA,MAAM,YAAY,QAAO,GAAG,CAAC,OA4F5B,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -17,11 +17,14 @@ const ViewSelector = () => {
     const [dashboardItems = ['icicle'], setDashboardItems] = useURLState('dashboard_items', {
         alwaysReturnArray: true,
     });
-    const { enableSourcesView } = useParcaContext();
+    const { enableSourcesView, enableIciclechartView } = useParcaContext();
     const allItems = [
         { key: 'table', canBeSelected: !dashboardItems.includes('table') },
         { key: 'icicle', canBeSelected: !dashboardItems.includes('icicle') },
     ];
+    if (enableIciclechartView === true) {
+        allItems.push({ key: 'iciclechart', canBeSelected: !dashboardItems.includes('iciclechart') });
+    }
     if (enableSourcesView === true) {
         allItems.push({ key: 'source', canBeSelected: false });
     }

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, timelineGuide, }: ProfileViewProps) => JSX.Element;
+export declare const ProfileView: ({ total, filtered, flamegraphData, flamechartData, topTableData, callgraphData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector, }: 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,oMAcrB,gBAAgB,KAAG,GAAG,CAAC,OAwIzB,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,qMAcrB,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, timelineGuide, }) => {
+export const ProfileView = ({ total, filtered, flamegraphData, flamechartData, topTableData, callgraphData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector, }) => {
     const { timezone, perf, profileViewExternalMainActions, preferencesModal, profileViewExternalSubActions, } = useParcaContext();
     const { ref, dimensions } = useContainerDimensions();
     const isDarkMode = useAppSelector(selectDarkMode);
@@ -52,6 +52,7 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
             isHalfScreen,
             dimensions,
             flamegraphData,
+            flamechartData,
             topTableData,
             callgraphData,
             sourceData,
@@ -71,5 +72,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, 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 }) })] }) }) }));
+    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 }) })] }) }) }));
 };