@parca/profile 0.19.17 → 0.19.19

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.19.19](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.18...@parca/profile@0.19.19) (2025-07-10)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.19.18](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.17...@parca/profile@0.19.18) (2025-07-10)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.19.17](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.16...@parca/profile@0.19.17) (2025-07-09)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltipArrow/useGraphTooltip/index.js

@@ -11,8 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { divide, valueFormatter } from '@parca/utilities';
-import { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FLAT, FIELD_LOCATION_ADDRESS, } from '../../ProfileIcicleGraph/IcicleGraphArrow';
-import { getTextForCumulative, nodeLabel } from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
+import { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FLAT, FIELD_LOCATION_ADDRESS, } from '../../ProfileFlameGraph/FlameGraphArrow';
+import { getTextForCumulative, nodeLabel } from '../../ProfileFlameGraph/FlameGraphArrow/utils';
 export const useGraphTooltip = ({ table, profileType, unit, compareAbsolute, total, totalUnfiltered, row, }) => {
     if (row === null || profileType === undefined) {
         return null;

package/dist/GraphTooltipArrow/useGraphTooltipMetaInfo/index.js

@@ -12,8 +12,8 @@
 // limitations under the License.
 import { QueryRequest_ReportType } from '@parca/client';
 import { useParcaContext, useURLState } from '@parca/components';
-import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_START_LINE, FIELD_FUNCTION_SYSTEM_NAME, FIELD_INLINED, FIELD_LOCATION_ADDRESS, FIELD_LOCATION_LINE, FIELD_MAPPING_BUILD_ID, FIELD_MAPPING_FILE, FIELD_TIMESTAMP, } from '../../ProfileIcicleGraph/IcicleGraphArrow';
-import { arrowToString } from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
+import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_START_LINE, FIELD_FUNCTION_SYSTEM_NAME, FIELD_INLINED, FIELD_LOCATION_ADDRESS, FIELD_LOCATION_LINE, FIELD_MAPPING_BUILD_ID, FIELD_MAPPING_FILE, FIELD_TIMESTAMP, } from '../../ProfileFlameGraph/FlameGraphArrow';
+import { arrowToString } from '../../ProfileFlameGraph/FlameGraphArrow/utils';
 import { useProfileViewContext } from '../../ProfileView/context/ProfileViewContext';
 import { useQuery } from '../../useQuery';
 export const useGraphTooltipMetaInfo = ({ table, row }) => {

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/ContextMenu.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAOnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAO1C,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,GAAI,kIAalB,gBAAgB,KAAG,GAAG,CAAC,OAmOzB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/ContextMenuWrapper.d.ts

@@ -11,7 +11,7 @@ interface ContextMenuWrapperProps {
     hideMenu: () => void;
     hideBinary: (binaryToRemove: string) => void;
     unit?: string;
-    isSandwich?: boolean;
+    isInSandwichView?: boolean;
 }
 export interface ContextMenuWrapperRef {
     setRow: (row: number, callback?: () => void) => void;

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuWrapper.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/ContextMenuWrapper.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CACtD;AAED,QAAA,MAAM,kBAAkB,2HAkBvB,CAAC;AAIF,eAAe,kBAAkB,CAAC"}

package/dist/{ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.d.ts → ProfileFlameGraph/FlameGraphArrow/FlameGraphNodes.d.ts}

@@ -6,7 +6,7 @@ export declare const RowHeight = 26;
 export interface colorByColors {
     [key: string]: string;
 }
-export interface IcicleNodeProps {
+export interface FlameNodeProps {
     height: number;
     totalWidth: number;
     table: Table<any>;
@@ -20,24 +20,24 @@ export interface IcicleNodeProps {
     colorForSimilarNodes: string;
     selectedRow: number;
     onClick: () => void;
-    isIcicleChart: boolean;
+    isFlameChart: boolean;
     profileSource: ProfileSource;
-    isFlamegraph?: boolean;
-    isSandwich?: boolean;
+    isRenderedAsFlamegraph?: boolean;
+    isInSandwichView?: boolean;
     maxDepth?: number;
     effectiveDepth?: number;
     tooltipId?: string;
     hoveringRow?: number;
     setHoveringRow: (row: number | undefined) => void;
 }
-export declare const icicleRectStyles: {
+export declare const flameRectStyles: {
     cursor: string;
     transition: string;
 };
-export declare const fadedIcicleRectStyles: {
+export declare const fadedFlameRectStyles: {
     cursor: string;
     transition: string;
     opacity: string;
 };
-export declare const IcicleNode: React.NamedExoticComponent<IcicleNodeProps>;
-//# sourceMappingURL=IcicleGraphNodes.d.ts.map
+export declare const FlameNode: React.NamedExoticComponent<FlameNodeProps>;
+//# sourceMappingURL=FlameGraphNodes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlameGraphNodes.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/FlameGraphNodes.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAMnC,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAelD,eAAO,MAAM,SAAS,KAAK,CAAC;AAE5B,MAAM,WAAW,aAAa;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,oBAAoB,EAAE,MAAM,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,aAAa,CAAC;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,eAAe;;;CAG3B,CAAC;AACF,eAAO,MAAM,oBAAoB;;;;CAIhC,CAAC;AAEF,eAAO,MAAM,SAAS,4CA2NpB,CAAC"}

package/dist/{ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.js → ProfileFlameGraph/FlameGraphArrow/FlameGraphNodes.js}

@@ -21,16 +21,16 @@ import { FIELD_CUMULATIVE, FIELD_DEPTH, FIELD_DIFF, FIELD_FUNCTION_FILE_NAME, FI
 import useNodeColor from './useNodeColor';
 import { arrowToString, boundsFromProfileSource, nodeLabel } from './utils';
 export const RowHeight = 26;
-export const icicleRectStyles = {
+export const flameRectStyles = {
     cursor: 'pointer',
     transition: 'opacity .15s linear',
 };
-export const fadedIcicleRectStyles = {
+export const fadedFlameRectStyles = {
     cursor: 'pointer',
     transition: 'opacity .15s linear',
     opacity: '0.5',
 };
-export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, colors, colorBy, height, totalWidth, searchString, darkMode, compareMode, colorForSimilarNodes, selectedRow, onClick, onContextMenu, hoveringRow, setHoveringRow, isIcicleChart, profileSource, isFlamegraph = false, isSandwich = false, maxDepth = 0, effectiveDepth, tooltipId = 'default', }) {
+export const FlameNode = React.memo(function FlameNodeNoMemo({ table, row, colors, colorBy, height, totalWidth, searchString, darkMode, compareMode, colorForSimilarNodes, selectedRow, onClick, onContextMenu, hoveringRow, setHoveringRow, isFlameChart, profileSource, isRenderedAsFlamegraph = false, isInSandwichView = false, maxDepth = 0, effectiveDepth, tooltipId = 'default', }) {
     // get the columns to read from
     const mappingColumn = table.getChild(FIELD_MAPPING_FILE);
     const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
@@ -86,31 +86,31 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, col
         // If the end of the node is before the selection offset or the start of the node is after the selection offset + totalWidth, we don't render it.
         return _jsx(_Fragment, {});
     }
-    if (row === 0 && (isIcicleChart || isSandwich)) {
-        // The root node is not rendered in the icicle chart or sandwich view, so we return null.
+    if (row === 0 && (isFlameChart || isInSandwichView)) {
+        // The root node is not rendered in the flame chart or sandwich view, so we return null.
         return _jsx(_Fragment, {});
     }
     // Cumulative can be larger than total when a selection is made. All parents of the selection are likely larger, but we want to only show them as 100% in the graph.
     const tsBounds = boundsFromProfileSource(profileSource);
     const total = cumulativeColumn?.get(selectedRow);
     const totalRatio = cumulative > total ? 1 : Number(cumulative) / Number(total);
-    const width = isIcicleChart
+    const width = isFlameChart
         ? (Number(cumulative) / (Number(tsBounds[1]) - Number(tsBounds[0]))) * totalWidth
         : totalRatio * totalWidth;
     if (width <= 1) {
         return _jsx(_Fragment, {});
     }
     const selectedDepth = depthColumn?.get(selectedRow);
-    const styles = selectedDepth !== undefined && selectedDepth > depth ? fadedIcicleRectStyles : icicleRectStyles;
+    const styles = selectedDepth !== undefined && selectedDepth > depth ? fadedFlameRectStyles : flameRectStyles;
     const onMouseEnter = () => {
         setHoveringRow(row);
-        window.dispatchEvent(new CustomEvent(`icicle-tooltip-update-${tooltipId}`, {
+        window.dispatchEvent(new CustomEvent(`flame-tooltip-update-${tooltipId}`, {
             detail: { row },
         }));
     };
     const onMouseLeave = () => {
         setHoveringRow(undefined);
-        window.dispatchEvent(new CustomEvent(`icicle-tooltip-update-${tooltipId}`, {
+        window.dispatchEvent(new CustomEvent(`flame-tooltip-update-${tooltipId}`, {
             detail: { row: null },
         }));
     };
@@ -118,21 +118,21 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, col
         onContextMenu(e, row);
     };
     const ts = tsColumn !== null ? Number(tsColumn.get(row)) : 0;
-    const x = isIcicleChart && tsColumn !== null
+    const x = isFlameChart && tsColumn !== null
         ? ((ts - Number(tsBounds[0])) / (Number(tsBounds[1]) - Number(tsBounds[0]))) * totalWidth
         : selectedDepth > depth
             ? 0
             : ((Number(valueOffset) - Number(selectionOffset)) / Number(total)) * totalWidth;
-    const calculateY = (isFlamegraph, isSandwich, isIcicleChart, maxDepth, depth, height) => {
-        if (isFlamegraph) {
+    const calculateY = (isRenderedAsFlamegraph, isInSandwichView, isFlameChart, maxDepth, depth, height) => {
+        if (isRenderedAsFlamegraph) {
             return (maxDepth - depth) * height; // Flamegraph is inverted
         }
-        if (isIcicleChart || isSandwich) {
+        if (isFlameChart || isInSandwichView) {
             return (depth - 1) * height;
         }
         return depth * height;
     };
-    const y = calculateY(isFlamegraph, isSandwich, isIcicleChart, effectiveDepth ?? maxDepth, depth, height);
+    const y = calculateY(isRenderedAsFlamegraph, isInSandwichView, isFlameChart, effectiveDepth ?? maxDepth, depth, height);
     return (_jsx(_Fragment, { children: _jsxs("g", { id: row === 0 ? 'root-span' : undefined, transform: `translate(${x + 1}, ${y + 1})`, style: styles, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick, onContextMenu: handleContextMenu, children: [_jsx("rect", { x: 0, y: 0, width: width, height: height, style: {
                         fill: colorResult,
                     }, className: cx(shouldBeHighlighted

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

@@ -0,0 +1 @@
+{"version":3,"file":"MemoizedTooltip.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/MemoizedTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAOvD,UAAU,oBAAoB;IAC5B,cAAc,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,kDAwE1B,CAAC"}

package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/MemoizedTooltip.js

@@ -25,7 +25,7 @@ export const MemoizedTooltip = memo(function MemoizedTooltip({ contextElement, d
         const handleTooltipUpdate = (event) => {
             setTooltipRow(event.detail.row);
         };
-        const eventName = `icicle-tooltip-update-${tooltipId}`;
+        const eventName = `flame-tooltip-update-${tooltipId}`;
         // Delay to ensure all DOM updates and React renders are complete
         // This fixes the race condition in sandwich view
         const timeoutId = setTimeout(() => {

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextWithEllipsis.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/TextWithEllipsis.tsx"],"names":[],"mappings":"AAiBA,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACf;AA2CD,iBAAS,gBAAgB,CAAC,EAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAC,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAuBjE;AAED,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipContext.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/TooltipContext.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAErF,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,UAAU,YAAY;IACpB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,mBAAmB;IAC3B,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,YAAY,EAAE,YAAY,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;CACnB;AAID,eAAO,MAAM,iBAAiB,QAAO,mBAMpC,CAAC;AAEF,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqC1D,CAAC"}

package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/index.d.ts

@@ -3,7 +3,7 @@ import { FlamegraphArrow } from '@parca/client';
 import { ProfileType } from '@parca/parser';
 import { type ColorConfig } from '@parca/utilities';
 import { ProfileSource } from '../../ProfileSource';
-import { colorByColors } from './IcicleGraphNodes';
+import { colorByColors } from './FlameGraphNodes';
 import { CurrentPathFrame } from './utils';
 export declare const FIELD_LABELS_ONLY = "labels_only";
 export declare const FIELD_MAPPING_FILE = "mapping_file";
@@ -26,7 +26,7 @@ export declare const FIELD_DIFF = "diff";
 export declare const FIELD_PARENT = "parent";
 export declare const FIELD_DEPTH = "depth";
 export declare const FIELD_VALUE_OFFSET = "value_offset";
-interface IcicleGraphArrowProps {
+interface FlameGraphArrowProps {
     arrow: FlamegraphArrow;
     total: bigint;
     filtered: bigint;
@@ -38,15 +38,15 @@ interface IcicleGraphArrowProps {
     isHalfScreen: boolean;
     mappingsListFromMetadata: string[];
     compareAbsolute: boolean;
-    isIcicleChart?: boolean;
-    isFlamegraph?: boolean;
-    isSandwich?: boolean;
+    isFlameChart?: boolean;
+    isRenderedAsFlamegraph?: boolean;
+    isInSandwichView?: boolean;
     tooltipId?: string;
     maxFrameCount?: number;
     isExpanded?: boolean;
 }
 export declare const getMappingColors: (mappingsList: string[], isDarkMode: boolean, currentColorProfile: ColorConfig) => colorByColors;
 export declare const getFilenameColors: (filenamesList: string[], isDarkMode: boolean, currentColorProfile: ColorConfig) => colorByColors;
-export declare const IcicleGraphArrow: React.NamedExoticComponent<IcicleGraphArrowProps>;
-export default IcicleGraphArrow;
+export declare const FlameGraphArrow: React.NamedExoticComponent<FlameGraphArrowProps>;
+export default FlameGraphArrow;
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/index.js

@@ -20,7 +20,7 @@ import { getColorForFeature, selectDarkMode, useAppSelector } from '@parca/store
 import { getLastItem } from '@parca/utilities';
 import { useProfileViewContext } from '../../ProfileView/context/ProfileViewContext';
 import ContextMenuWrapper from './ContextMenuWrapper';
-import { IcicleNode, RowHeight } from './IcicleGraphNodes';
+import { FlameNode, RowHeight } from './FlameGraphNodes';
 import { MemoizedTooltip } from './MemoizedTooltip';
 import { TooltipProvider } from './TooltipContext';
 import { useFilenamesList } from './useMappingList';
@@ -74,7 +74,7 @@ function getMaxDepth(depthColumn) {
     }
     return max;
 }
-export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, profileSource, mappingsListFromMetadata, compareAbsolute, isIcicleChart = false, isFlamegraph = false, isSandwich = false, tooltipId = 'default', maxFrameCount, isExpanded = false, }) {
+export const FlameGraphArrow = memo(function FlameGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, profileSource, mappingsListFromMetadata, compareAbsolute, isFlameChart = false, isRenderedAsFlamegraph = false, isInSandwichView = false, tooltipId = 'default', maxFrameCount, isExpanded = false, }) {
     const [highlightSimilarStacksPreference] = useUserPreference(USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key);
     const [hoveringRow, setHoveringRow] = useState(undefined);
     const [dockedMetainfo] = useUserPreference(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
@@ -94,14 +94,17 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
         if (perf?.markInteraction != null) {
             renderStartTime.current = performance.now();
         }
-    }, [perf]);
+    }, [table, width, curPath, perf]);
     useEffect(() => {
         if (perf?.setMeasurement != null && renderStartTime.current > 0) {
-            const renderTime = performance.now() - renderStartTime.current;
-            perf.setMeasurement('flamegraph.render_time', renderTime);
-            if (renderTime > 500 && perf.captureMessage != null) {
-                perf.captureMessage(`Slow flamegraph render: ${renderTime.toFixed(0)}ms`, 'warning');
-            }
+            const measureRenderTime = () => {
+                const renderTime = performance.now() - renderStartTime.current;
+                if (perf?.setMeasurement != null) {
+                    perf.setMeasurement('flamegraph.render_time', renderTime);
+                }
+                renderStartTime.current = 0;
+            };
+            requestAnimationFrame(measureRenderTime);
         }
     }, [table, width, curPath, perf]);
     useEffect(() => {
@@ -153,7 +156,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
         binary: mappingColors,
     };
     const colorByColors = colorByList[colorByValue];
-    const MENU_ID = 'icicle-graph-context-menu';
+    const MENU_ID = 'flame-graph-context-menu';
     const contextMenuRef = useRef(null);
     const { show, hideAll } = useContextMenu({
         id: MENU_ID,
@@ -200,7 +203,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
     const effectiveDepth = maxFrameCount !== undefined && !isExpanded ? Math.min(maxDepth, maxFrameCount) : maxDepth;
     // Use deferred value to prevent UI blocking when expanding frames
     const deferredEffectiveDepth = useDeferredValue(effectiveDepth);
-    const height = isSandwich
+    const height = isInSandwichView
         ? deferredEffectiveDepth * RowHeight
         : (deferredEffectiveDepth + 1) * RowHeight;
     // To find the selected row, we must walk the current path and look at which
@@ -227,12 +230,12 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
         currentRow = childRows[0];
     }
     const selectedRow = currentRow;
-    return (_jsx(TooltipProvider, { table: table, total: total, totalUnfiltered: total + filtered, profileType: profileType, unit: arrow.unit, compareAbsolute: compareAbsolute, tooltipId: tooltipId, children: _jsxs("div", { className: "relative", children: [_jsx(ContextMenuWrapper, { ref: contextMenuRef, menuId: MENU_ID, table: table, total: total, totalUnfiltered: total + filtered, compareAbsolute: compareAbsolute, resetPath: () => setCurPath([]), hideMenu: hideAll, hideBinary: hideBinary, unit: arrow.unit, profileType: profileType, isSandwich: isSandwich }), _jsx(MemoizedTooltip, { contextElement: svgElement, dockedMetainfo: dockedMetainfo }), _jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, children: Array.from({ length: table.numRows }, (_, row) => (_jsx(IcicleNode, { table: table, row: row, colors: colorByColors, colorBy: colorByValue, totalWidth: width ?? 1, height: RowHeight, searchString: currentSearchString ?? '', darkMode: isDarkMode, compareMode: compareMode, colorForSimilarNodes: colorForSimilarNodes, selectedRow: selectedRow, onClick: () => {
-                            if (isIcicleChart) {
-                                // We don't want to expand in icicle charts.
+    return (_jsx(TooltipProvider, { table: table, total: total, totalUnfiltered: total + filtered, profileType: profileType, unit: arrow.unit, compareAbsolute: compareAbsolute, tooltipId: tooltipId, children: _jsxs("div", { className: "relative", children: [_jsx(ContextMenuWrapper, { ref: contextMenuRef, menuId: MENU_ID, table: table, total: total, totalUnfiltered: total + filtered, compareAbsolute: compareAbsolute, resetPath: () => setCurPath([]), hideMenu: hideAll, hideBinary: hideBinary, unit: arrow.unit, profileType: profileType, isInSandwichView: isInSandwichView }), _jsx(MemoizedTooltip, { contextElement: svgElement, dockedMetainfo: dockedMetainfo }), _jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, children: Array.from({ length: table.numRows }, (_, row) => (_jsx(FlameNode, { table: table, row: row, colors: colorByColors, colorBy: colorByValue, totalWidth: width ?? 1, height: RowHeight, searchString: currentSearchString ?? '', darkMode: isDarkMode, compareMode: compareMode, colorForSimilarNodes: colorForSimilarNodes, selectedRow: selectedRow, onClick: () => {
+                            if (isFlameChart) {
+                                // We don't want to expand in flame charts.
                                 return;
                             }
                             handleRowClick(row);
-                        }, onContextMenu: displayMenu, hoveringRow: highlightSimilarStacksPreference ? hoveringRow : undefined, setHoveringRow: highlightSimilarStacksPreference ? setHoveringRow : noop, isIcicleChart: isIcicleChart, profileSource: profileSource, isFlamegraph: isFlamegraph, isSandwich: isSandwich, maxDepth: maxDepth, effectiveDepth: deferredEffectiveDepth, tooltipId: tooltipId }, row))) })] }) }));
+                        }, onContextMenu: displayMenu, hoveringRow: highlightSimilarStacksPreference ? hoveringRow : undefined, setHoveringRow: highlightSimilarStacksPreference ? setHoveringRow : noop, isFlameChart: isFlameChart, profileSource: profileSource, isRenderedAsFlamegraph: isRenderedAsFlamegraph, isInSandwichView: isInSandwichView, maxDepth: maxDepth, effectiveDepth: deferredEffectiveDepth, tooltipId: tooltipId }, row))) })] }) }));
 });
-export default IcicleGraphArrow;
+export default FlameGraphArrow;

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMappingList.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/useMappingList.ts"],"names":[],"mappings":"AAeA,OAAO,EAAa,KAAK,EAAS,MAAM,cAAc,CAAC;AAOvD,QAAA,MAAM,cAAc,GAAI,UAAU,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,EAsB9D,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,GAAG,IAAI,KAAG,MAAM,EAyB5D,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"useNodeColor.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/useNodeColor.ts"],"names":[],"mappings":"AAgBA,UAAU,MAAM;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED,UAAU,KAAK;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAED,QAAA,MAAM,YAAY,GAAI,2EAOnB,KAAK,KAAG,MAMV,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/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;AAWrD,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,GAAG,MAAM,CAuBzF;AAED,eAAO,MAAM,cAAc,GAAI,SAAS,MAAM,KAAG,aAMhD,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,UAAU,MAAM,KAAG,eAMzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,wBAAwB,MAAM,EAC9B,iBAAiB,MAAM,EACvB,OAAO,MAAM,EACb,MAAM,MAAM,KACX,MAOF,CAAC;AAEF,eAAO,MAAM,6BAA6B,GACxC,wBAAwB,MAAM,EAC9B,MAAM,MAAM,KACX,MAMF,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,QAAQ,GAAG,KAAG,MAAM,GAAG,IAQpD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,gBAAgB,aAAa,KAAG,SAyBvE,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,uBAAuB,GAAI,OAAO,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,MAAM,KAAG,gBAwBxE,CAAC;AAgBF,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EACjB,GAAG,EAAE,MAAM,EACX,CAAC,EAAE,gBAAgB,GAClB,OAAO,CAWT"}

package/dist/{ProfileIcicleGraph → ProfileFlameGraph}/index.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import { FlamegraphArrow } from '@parca/client';
 import { ProfileType } from '@parca/parser';
 import { MergedProfileSource, ProfileSource } from '../ProfileSource';
-import { CurrentPathFrame } from './IcicleGraphArrow/utils';
+import { CurrentPathFrame } from './FlameGraphArrow/utils';
 export type ResizeHandler = (width: number, height: number) => void;
-interface ProfileIcicleGraphProps {
+interface ProfileFlameGraphProps {
     width: number;
     arrow?: FlamegraphArrow;
     total: bigint;
@@ -19,18 +19,18 @@ interface ProfileIcicleGraphProps {
     isHalfScreen: boolean;
     metadataMappingFiles?: string[];
     metadataLoading?: boolean;
-    isIcicleChart?: boolean;
-    isSandwichIcicleGraph?: boolean;
-    isFlamegraph?: boolean;
+    isFlameChart?: boolean;
+    isInSandwichView?: boolean;
+    isRenderedAsFlamegraph?: boolean;
     tooltipId?: string;
     maxFrameCount?: number;
     isExpanded?: boolean;
 }
-export declare const validateIcicleChartQuery: (profileSource: MergedProfileSource) => {
+export declare const validateFlameChartQuery: (profileSource: MergedProfileSource) => {
     isValid: boolean;
     isNonDelta: boolean;
     isDurationTooLong: boolean;
 };
-declare const ProfileIcicleGraph: ({ arrow, total, filtered, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isIcicleChart, profileSource, isSandwichIcicleGraph, isFlamegraph, tooltipId, maxFrameCount, isExpanded, }: ProfileIcicleGraphProps) => JSX.Element;
-export default ProfileIcicleGraph;
+declare const ProfileFlameGraph: ({ arrow, total, filtered, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isFlameChart, profileSource, isInSandwichView, isRenderedAsFlamegraph, tooltipId, maxFrameCount, isExpanded, }: ProfileFlameGraphProps) => JSX.Element;
+export default ProfileFlameGraph;
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/{ProfileIcicleGraph → ProfileFlameGraph}/index.js

@@ -15,40 +15,40 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import cx from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useMeasure } from 'react-use';
-import { FlamegraphSkeleton, IcicleGraphSkeleton, useParcaContext, useURLState, } from '@parca/components';
+import { FlameGraphSkeleton, SandwichFlameGraphSkeleton, useParcaContext, useURLState, } from '@parca/components';
 import { capitalizeOnlyFirstLetter, divide } from '@parca/utilities';
 import DiffLegend from '../ProfileView/components/DiffLegend';
 import { useProfileViewContext } from '../ProfileView/context/ProfileViewContext';
 import { TimelineGuide } from '../TimelineGuide';
-import { IcicleGraphArrow } from './IcicleGraphArrow';
-import useMappingList from './IcicleGraphArrow/useMappingList';
-import { boundsFromProfileSource } from './IcicleGraphArrow/utils';
+import { FlameGraphArrow } from './FlameGraphArrow';
+import useMappingList from './FlameGraphArrow/useMappingList';
+import { boundsFromProfileSource } from './FlameGraphArrow/utils';
 const numberFormatter = new Intl.NumberFormat('en-US');
 const ErrorContent = ({ errorMessage }) => {
     return (_jsx("div", { className: "flex flex-col justify-center p-10 text-center gap-6 text-sm", children: errorMessage }));
 };
-export const validateIcicleChartQuery = (profileSource) => {
+export const validateFlameChartQuery = (profileSource) => {
     const isNonDelta = !profileSource.ProfileType().delta;
     const isDurationTooLong = profileSource.mergeTo - profileSource.mergeFrom > 60000;
     return { isValid: !isNonDelta && !isDurationTooLong, isNonDelta, isDurationTooLong };
 };
-const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ arrow, total, filtered, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isIcicleChart = false, profileSource, isSandwichIcicleGraph = false, isFlamegraph = false, tooltipId, maxFrameCount, isExpanded = false, }) {
-    const { onError, authenticationErrorMessage, isDarkMode, iciclechartHelpText } = useParcaContext();
+const ProfileFlameGraph = function ProfileFlameGraphNonMemo({ arrow, total, filtered, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isFlameChart = false, profileSource, isInSandwichView = false, isRenderedAsFlamegraph = false, tooltipId, maxFrameCount, isExpanded = false, }) {
+    const { onError, authenticationErrorMessage, isDarkMode, flamechartHelpText } = useParcaContext();
     const { compareMode } = useProfileViewContext();
     const [isLoading, setIsLoading] = useState(true);
-    const [icicleChartRef, { height: icicleChartHeight }] = useMeasure();
+    const [flameChartRef, { height: flameChartHeight }] = useMeasure();
     // Create local state for paths when in sandwich view to avoid URL updates
     const [localCurPathArrow, setLocalCurPathArrow] = useState([]);
     const setCurPathArrowWrapper = useCallback((path) => {
-        if (isSandwichIcicleGraph) {
+        if (isInSandwichView) {
             setLocalCurPathArrow(path);
         }
         else {
             setNewCurPathArrow(path);
         }
-    }, [isSandwichIcicleGraph, setNewCurPathArrow]);
-    // Determine which paths to use based on isSandwichIcicleGraph flag
-    const effectiveCurPathArrow = isSandwichIcicleGraph ? localCurPathArrow : curPathArrow;
+    }, [isInSandwichView, setNewCurPathArrow]);
+    // Determine which paths to use based on isInSandwichView flag
+    const effectiveCurPathArrow = isInSandwichView ? localCurPathArrow : curPathArrow;
     const mappingsList = useMappingList(metadataMappingFiles);
     const [colorBy, setColorBy] = useURLState('color_by');
     // By default, we want delta profiles (CPU) to be relatively compared.
@@ -91,24 +91,24 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ arrow, total, fi
             setIsLoading(true);
         }
     }, [loadingState]);
-    const icicleGraph = useMemo(() => {
-        const { isValid: isIcicleChartValid, isNonDelta, isDurationTooLong, } = isIcicleChart
-            ? validateIcicleChartQuery(profileSource)
+    const flameGraph = useMemo(() => {
+        const { isValid: isFlameChartValid, isNonDelta, isDurationTooLong, } = isFlameChart
+            ? validateFlameChartQuery(profileSource)
             : { isValid: true, isNonDelta: false, isDurationTooLong: false };
-        const isInvalidIcicleChartQuery = isIcicleChart && !isIcicleChartValid;
-        if (isLoading && !isInvalidIcicleChartQuery) {
-            return (_jsx("div", { className: "h-auto overflow-clip", children: isFlamegraph ? (_jsx(FlamegraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode })) : (_jsx(IcicleGraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode })) }));
+        const isInvalidFlameChartQuery = isFlameChart && !isFlameChartValid;
+        if (isLoading && !isInvalidFlameChartQuery) {
+            return (_jsx("div", { className: "h-auto overflow-clip", children: isRenderedAsFlamegraph ? (_jsx(SandwichFlameGraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode })) : (_jsx(FlameGraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode })) }));
         }
-        // Do necessary checks to ensure that icicle chart can be rendered for this query.
-        if (isInvalidIcicleChartQuery) {
+        // Do necessary checks to ensure that flame chart can be rendered for this query.
+        if (isInvalidFlameChartQuery) {
             if (isNonDelta) {
-                return (_jsx(ErrorContent, { errorMessage: _jsxs(_Fragment, { children: [_jsx("span", { children: "To use the Icicle chart, please switch to a Delta profile." }), iciclechartHelpText ?? null] }) }));
+                return (_jsx(ErrorContent, { errorMessage: _jsxs(_Fragment, { children: [_jsx("span", { children: "To use the Flame chart, please switch to a Delta profile." }), flamechartHelpText ?? null] }) }));
             }
             else if (isDurationTooLong) {
-                return (_jsx(ErrorContent, { errorMessage: _jsxs(_Fragment, { children: [_jsx("span", { children: "Icicle chart is unavailable for queries longer than one minute. Please select a point in the metrics graph to continue." }), iciclechartHelpText ?? null] }) }));
+                return (_jsx(ErrorContent, { errorMessage: _jsxs(_Fragment, { children: [_jsx("span", { children: "Flame chart is unavailable for queries longer than one minute. Please select a point in the metrics graph to continue." }), flamechartHelpText ?? null] }) }));
             }
             else {
-                return (_jsx(ErrorContent, { errorMessage: _jsxs(_Fragment, { children: [_jsx("span", { children: "The Icicle chart is not available for this query." }), iciclechartHelpText ?? null] }) }));
+                return (_jsx(ErrorContent, { errorMessage: _jsxs(_Fragment, { children: [_jsx("span", { children: "The Flame chart is not available for this query." }), flamechartHelpText ?? null] }) }));
             }
         }
         if (arrow === undefined)
@@ -116,7 +116,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ arrow, total, fi
         if (total === 0n && !loading)
             return _jsx("div", { className: "mx-auto text-center", children: "Profile has no samples" });
         if (arrow !== undefined) {
-            return (_jsxs("div", { className: "relative", children: [isIcicleChart ? (_jsx(TimelineGuide, { bounds: boundsFromProfileSource(profileSource), width: width, height: icicleChartHeight ?? 420, margin: 0, ticks: 12, timeUnit: "nanoseconds" })) : null, _jsx("div", { ref: icicleChartRef, children: _jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: effectiveCurPathArrow, setCurPath: setCurPathArrowWrapper, profileType: profileType, isHalfScreen: isHalfScreen, mappingsListFromMetadata: mappingsList, compareAbsolute: isCompareAbsolute, isIcicleChart: isIcicleChart, profileSource: profileSource, isFlamegraph: isFlamegraph, isSandwich: isSandwichIcicleGraph, tooltipId: tooltipId, maxFrameCount: maxFrameCount, isExpanded: isExpanded }) })] }));
+            return (_jsxs("div", { className: "relative", children: [isFlameChart ? (_jsx(TimelineGuide, { bounds: boundsFromProfileSource(profileSource), width: width, height: flameChartHeight ?? 420, margin: 0, ticks: 12, timeUnit: "nanoseconds" })) : null, _jsx("div", { ref: flameChartRef, children: _jsx(FlameGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: effectiveCurPathArrow, setCurPath: setCurPathArrowWrapper, profileType: profileType, isHalfScreen: isHalfScreen, mappingsListFromMetadata: mappingsList, compareAbsolute: isCompareAbsolute, isFlameChart: isFlameChart, profileSource: profileSource, isRenderedAsFlamegraph: isRenderedAsFlamegraph, isInSandwichView: isInSandwichView, tooltipId: tooltipId, maxFrameCount: maxFrameCount, isExpanded: isExpanded }) })] }));
         }
     }, [
         isLoading,
@@ -130,13 +130,13 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ arrow, total, fi
         isDarkMode,
         mappingsList,
         isCompareAbsolute,
-        isIcicleChart,
+        isFlameChart,
         profileSource,
-        icicleChartHeight,
-        icicleChartRef,
-        iciclechartHelpText,
-        isFlamegraph,
-        isSandwichIcicleGraph,
+        flameChartHeight,
+        flameChartRef,
+        flamechartHelpText,
+        isRenderedAsFlamegraph,
+        isInSandwichView,
         effectiveCurPathArrow,
         setCurPathArrowWrapper,
         tooltipId,
@@ -160,8 +160,8 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ arrow, total, fi
         if (isMergeError || isTimestampError) {
             return (_jsx(ErrorContent, { errorMessage: _jsxs(_Fragment, { children: [_jsx("span", { className: "font-semibold", children: "Unable to display overlapping data" }), _jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "The selected data contains overlapping samples from multiple nodes or threads that cannot be merged." }), _jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "To view this data, please apply more specific filters:" }), _jsxs("ul", { className: "list-disc list-inside text-left max-w-md mx-auto text-gray-600 dark:text-gray-400", children: [_jsx("li", { children: "Select a specific node from the node selector" }), _jsx("li", { children: "Filter by either CPU or thread" })] })] }) }));
         }
-        return (_jsx(ErrorContent, { errorMessage: _jsxs(_Fragment, { children: [_jsx("span", { children: capitalizeOnlyFirstLetter(error.message) }), isIcicleChart ? iciclechartHelpText ?? null : null] }) }));
+        return (_jsx(ErrorContent, { errorMessage: _jsxs(_Fragment, { children: [_jsx("span", { children: capitalizeOnlyFirstLetter(error.message) }), isFlameChart ? flamechartHelpText ?? null : null] }) }));
     }
-    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "relative h-full w-full", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5 }, children: [compareMode ? _jsx(DiffLegend, {}) : null, _jsx("div", { className: cx(!isSandwichIcicleGraph ? 'min-h-48' : ''), id: "h-icicle-graph", children: _jsx(_Fragment, { children: icicleGraph }) }), !isSandwichIcicleGraph && (_jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] }))] }, "icicle-graph-loaded") }));
+    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "relative h-full w-full", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5 }, children: [compareMode ? _jsx(DiffLegend, {}) : null, _jsx("div", { className: cx(!isInSandwichView ? 'min-h-48' : ''), id: "h-flame-graph", children: _jsx(_Fragment, { children: flameGraph }) }), !isInSandwichView && (_jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] }))] }, "flame-graph-loaded") }));
 };
-export default ProfileIcicleGraph;
+export default ProfileFlameGraph;

package/dist/ProfileSelector/useAutoQuerySelector.js

@@ -62,7 +62,7 @@ export const useAutoQuerySelector = ({ selectedProfileName, profileTypesData, se
             void navigateTo('/', {
                 ...compareQuery,
                 search_string: '',
-                dashboard_items: ['icicle'],
+                dashboard_items: ['flamegraph'],
             });
         }
     }, [comparing, querySelection, navigateTo, expressionA, dispatch, loading]);

package/dist/ProfileView/components/ActionButtons/GroupByDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupByDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ActionButtons/GroupByDropdown.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAYnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"GroupByDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ActionButtons/GroupByDropdown.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAUnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ProfileView/components/ActionButtons/GroupByDropdown.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import GroupByLabelsDropdown from '../GroupByLabelsDropdown';
 const GroupByControls = ({ groupBy, labels, setGroupByLabels }) => {
-    return (_jsx("div", { className: "inline-flex items-start", children: _jsx("div", { className: "relative flex gap-3 items-start", children: _jsx(GroupByLabelsDropdown, { labels: labels, groupBy: groupBy, setGroupByLabels: setGroupByLabels }) }) }));
+    return (_jsx("div", { className: "relative flex", id: "h-group-by-controls", children: _jsx(GroupByLabelsDropdown, { labels: labels, groupBy: groupBy, setGroupByLabels: setGroupByLabels }) }));
 };
 export default GroupByControls;

package/dist/ProfileView/components/ActionButtons/SortByDropdown.js

@@ -12,7 +12,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Select, useURLState } from '@parca/components';
-import { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_NAME, } from '../../../ProfileIcicleGraph/IcicleGraphArrow';
+import { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_NAME, } from '../../../ProfileFlameGraph/FlameGraphArrow';
 import { useProfileViewContext } from '../../context/ProfileViewContext';
 const SortByDropdown = () => {
     const [storeSortBy, setStoreSortBy] = useURLState('sort_by', {

package/dist/ProfileView/components/ColorStackLegend.js

@@ -17,8 +17,8 @@ import cx from 'classnames';
 import { useURLState } from '@parca/components';
 import { USER_PREFERENCES, useCurrentColorProfile, useUserPreference } from '@parca/hooks';
 import { EVERYTHING_ELSE, selectDarkMode, useAppSelector } from '@parca/store';
-import { getMappingColors } from '../../ProfileIcicleGraph/IcicleGraphArrow';
-import useMappingList from '../../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
+import { getMappingColors } from '../../ProfileFlameGraph/FlameGraphArrow';
+import useMappingList from '../../ProfileFlameGraph/FlameGraphArrow/useMappingList';
 const ColorStackLegend = ({ mappings, compareMode = false, loading }) => {
     const isDarkMode = useAppSelector(selectDarkMode);
     const currentColorProfile = useCurrentColorProfile();

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

@@ -1,6 +1,6 @@
 import { ProfilerOnRenderCallback } from 'react';
 import { QueryServiceClient } from '@parca/client';
-import { CurrentPathFrame } from '../../../ProfileIcicleGraph/IcicleGraphArrow/utils';
+import { CurrentPathFrame } from '../../../ProfileFlameGraph/FlameGraphArrow/utils';
 import { ProfileSource } from '../../../ProfileSource';
 import type { FlamegraphData, SourceData, TopTableData, VisualizationType } from '../../types/visualization';
 interface GetDashboardItemProps {