@parca/profile 0.16.361 → 0.16.362

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.362](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.361...@parca/profile@0.16.362) (2024-04-29)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.361](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.360...@parca/profile@0.16.361) (2024-04-26)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/index.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { Callgraph as CallgraphType } from '@parca/client';
+import { ProfileType } from '@parca/parser';
 export interface Props {
     data: CallgraphType;
     svgString: string;
-    sampleUnit: string;
+    profileType: ProfileType | undefined;
     width: number;
 }
-declare const Callgraph: ({ data, svgString, sampleUnit, width }: Props) => JSX.Element;
+declare const Callgraph: ({ data, svgString, profileType, width }: Props) => JSX.Element;
 export default Callgraph;

package/dist/Callgraph/index.js

@@ -20,7 +20,7 @@ import { Button, useKeyDown, useURLState } from '@parca/components';
 import { selectDarkMode, setHoveringNode, useAppDispatch, useAppSelector } from '@parca/store';
 import { getNewSpanColor } from '@parca/utilities';
 import GraphTooltip from '../GraphTooltip';
-const Callgraph = ({ data, svgString, sampleUnit, width }) => {
+const Callgraph = ({ data, svgString, profileType, width }) => {
     const originalView = {
         scale: 1,
         translation: { x: 0, y: 0 },
@@ -98,6 +98,6 @@ const Callgraph = ({ data, svgString, sampleUnit, width }) => {
     const isResetViewButtonEnabled = view.scale !== originalView.scale ||
         view.translation.x !== originalView.translation.x ||
         view.translation.y !== originalView.translation.y;
-    return (_jsxs("div", { className: "relative w-full", children: [_jsxs("div", { ref: containerRef, className: "w-full overflow-hidden", children: [_jsx(MapInteractionCSS, { showControls: true, minScale: 1, maxScale: 5, value: view, onChange: (value) => setView(value), children: _jsx(SVG, { ref: svgWrapper, src: svgString, width: width, height: "auto", title: "Callgraph", innerRef: svgRef }) }), svgRef.current !== null && (_jsx(GraphTooltip, { type: "callgraph", unit: sampleUnit, total: data.cumulative, totalUnfiltered: data.cumulative, contextElement: containerRef.current }))] }), _jsx("div", { className: cx(dashboardItems.length > 1 ? 'left-[25px]' : 'left-0', 'absolute top-[-46px] w-auto'), children: _jsx(Button, { variant: "neutral", onClick: resetView, className: "z-50", disabled: !isResetViewButtonEnabled, children: "Reset View" }) })] }));
+    return (_jsxs("div", { className: "relative w-full", children: [_jsxs("div", { ref: containerRef, className: "w-full overflow-hidden", children: [_jsx(MapInteractionCSS, { showControls: true, minScale: 1, maxScale: 5, value: view, onChange: (value) => setView(value), children: _jsx(SVG, { ref: svgWrapper, src: svgString, width: width, height: "auto", title: "Callgraph", innerRef: svgRef }) }), svgRef.current !== null && (_jsx(GraphTooltip, { type: "callgraph", unit: profileType?.sampleUnit ?? '', total: data.cumulative, totalUnfiltered: data.cumulative, contextElement: containerRef.current }))] }), _jsx("div", { className: cx(dashboardItems.length > 1 ? 'left-[25px]' : 'left-0', 'absolute top-[-46px] w-auto'), children: _jsx(Button, { variant: "neutral", onClick: resetView, className: "z-50", disabled: !isResetViewButtonEnabled, children: "Reset View" }) })] }));
 };
 export default Callgraph;

package/dist/GraphTooltipArrow/Content.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Table } from 'apache-arrow';
+import { ProfileType } from '@parca/parser';
 import { type NavigateFunction } from '@parca/utilities';
 interface GraphTooltipArrowContentProps {
     table: Table<any>;
-    unit: string;
+    profileType?: ProfileType;
     total: bigint;
     totalUnfiltered: bigint;
     row: number | null;
@@ -11,5 +12,5 @@ interface GraphTooltipArrowContentProps {
     isFixed: boolean;
     navigateTo: NavigateFunction;
 }
-declare const GraphTooltipArrowContent: ({ table, unit, total, totalUnfiltered, row, level, isFixed, navigateTo, }: GraphTooltipArrowContentProps) => React.JSX.Element;
+declare const GraphTooltipArrowContent: ({ table, profileType, total, totalUnfiltered, row, level, isFixed, navigateTo, }: GraphTooltipArrowContentProps) => React.JSX.Element;
 export default GraphTooltipArrowContent;

package/dist/GraphTooltipArrow/Content.js

@@ -8,10 +8,10 @@ import { useGraphTooltipMetaInfo } from './useGraphTooltipMetaInfo';
 const NoData = () => {
     return _jsx("span", { className: "rounded bg-gray-200 px-2 dark:bg-gray-800", children: "Not available" });
 };
-const GraphTooltipArrowContent = ({ table, unit, total, totalUnfiltered, row, level, isFixed, navigateTo, }) => {
+const GraphTooltipArrowContent = ({ table, profileType, total, totalUnfiltered, row, level, isFixed, navigateTo, }) => {
     const graphTooltipData = useGraphTooltip({
         table,
-        unit,
+        profileType,
         total,
         totalUnfiltered,
         row,
@@ -21,12 +21,11 @@ const GraphTooltipArrowContent = ({ table, unit, total, totalUnfiltered, row, le
         return _jsx(_Fragment, {});
     }
     const { name, locationAddress, cumulativeText, cumulativePerSecondText, diffText, diff, row: rowNumber, } = graphTooltipData;
-    const delta = unit === 'nanoseconds';
     return (_jsx("div", { className: `flex text-sm ${isFixed ? 'w-full' : ''}`, children: _jsx("div", { className: `m-auto w-full ${isFixed ? 'w-full' : ''}`, children: _jsxs("div", { className: "min-h-52 flex w-[500px] flex-col justify-between rounded-lg border border-gray-300 bg-gray-50 p-3 shadow-lg dark:border-gray-500 dark:bg-gray-900", children: [_jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "mx-2", children: [_jsx("div", { className: "flex h-10 items-start justify-between gap-4 break-all font-semibold", children: row === 0 ? (_jsx("p", { children: "root" })) : (_jsx("p", { children: name !== ''
                                             ? name
                                             : locationAddress !== 0n
                                                 ? hexifyAddress(locationAddress)
-                                                : 'unknown' })) }), _jsx("table", { className: "my-2 w-full table-fixed pr-0 text-gray-700 dark:text-gray-300", children: _jsxs("tbody", { children: [delta ? (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Per Second" }), _jsx("td", { className: "w-3/4", children: _jsx("div", { children: cumulativePerSecondText }) })] })) : (_jsx(_Fragment, {})), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Cumulative" }), _jsx("td", { className: "w-3/4", children: _jsx("div", { children: cumulativeText }) })] }), diff !== 0n && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Diff" }), _jsx("td", { className: "w-3/4", children: _jsx("div", { children: diffText }) })] })), _jsx(TooltipMetaInfo, { table: table, row: rowNumber, navigateTo: navigateTo })] }) })] }) }), _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 show context menu" })] })] }) }) }));
+                                                : 'unknown' })) }), _jsx("table", { className: "my-2 w-full table-fixed pr-0 text-gray-700 dark:text-gray-300", children: _jsxs("tbody", { children: [(profileType?.delta ?? false) ? (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Per Second" }), _jsx("td", { className: "w-3/4", children: _jsx("div", { children: cumulativePerSecondText }) })] })) : (_jsx(_Fragment, {})), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Cumulative" }), _jsx("td", { className: "w-3/4", children: _jsx("div", { children: cumulativeText }) })] }), diff !== 0n && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Diff" }), _jsx("td", { className: "w-3/4", children: _jsx("div", { children: diffText }) })] })), _jsx(TooltipMetaInfo, { table: table, row: rowNumber, navigateTo: navigateTo })] }) })] }) }), _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 show context menu" })] })] }) }) }));
 };
 const TooltipMetaInfo = ({ table, row, navigateTo, }) => {
     const { labelPairs, functionFilename, file, locationAddress, mappingFile, mappingBuildID, inlined, } = useGraphTooltipMetaInfo({ table, row, navigateTo });

package/dist/GraphTooltipArrow/DockedGraphTooltip/index.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import { Table } from 'apache-arrow';
+import { ProfileType } from '@parca/parser';
 interface Props {
     table: Table<any>;
-    unit: string;
     total: bigint;
     totalUnfiltered: bigint;
     row: number | null;
     level: number;
+    profileType?: ProfileType;
 }
-export declare const DockedGraphTooltip: ({ table, unit, total, totalUnfiltered, row, level, }: Props) => JSX.Element;
+export declare const DockedGraphTooltip: ({ table, total, totalUnfiltered, row, level, profileType, }: Props) => JSX.Element;
 export {};

package/dist/GraphTooltipArrow/DockedGraphTooltip/index.js

@@ -25,14 +25,14 @@ const InfoSection = ({ title, value, minWidth = '', }) => {
 const NoData = () => {
     return _jsx("span", { className: "rounded bg-gray-200 px-2 dark:bg-gray-800", children: "Not available" });
 };
-export const DockedGraphTooltip = ({ table, unit, total, totalUnfiltered, row, level, }) => {
+export const DockedGraphTooltip = ({ table, total, totalUnfiltered, row, level, profileType, }) => {
     let { width } = useWindowSize();
     const { profileExplorer, navigateTo } = useParcaContext();
     const { PaddingX } = profileExplorer ?? { PaddingX: 0 };
     width = width - PaddingX - 24;
     const graphTooltipData = useGraphTooltip({
         table,
-        unit,
+        profileType,
         total,
         totalUnfiltered,
         row,

package/dist/GraphTooltipArrow/useGraphTooltip/index.d.ts

@@ -1,7 +1,8 @@
 import { Table } from 'apache-arrow';
+import { ProfileType } from '@parca/parser';
 interface Props {
     table: Table<any>;
-    unit: string;
+    profileType?: ProfileType;
     total: bigint;
     totalUnfiltered: bigint;
     row: number | null;
@@ -16,5 +17,5 @@ interface GraphTooltipData {
     diff: bigint;
     row: number;
 }
-export declare const useGraphTooltip: ({ table, unit, total, totalUnfiltered, row, level, }: Props) => GraphTooltipData | null;
+export declare const useGraphTooltip: ({ table, profileType, total, totalUnfiltered, row, level, }: Props) => GraphTooltipData | null;
 export {};

package/dist/GraphTooltipArrow/useGraphTooltip/index.js

@@ -13,8 +13,8 @@
 import { divide, valueFormatter } from '@parca/utilities';
 import { FIELD_CUMULATIVE, FIELD_CUMULATIVE_PER_SECOND, FIELD_DIFF, FIELD_DIFF_PER_SECOND, FIELD_LOCATION_ADDRESS, } from '../../ProfileIcicleGraph/IcicleGraphArrow';
 import { getTextForCumulative, getTextForCumulativePerSecond, nodeLabel, } from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
-export const useGraphTooltip = ({ table, unit, total, totalUnfiltered, row, level, }) => {
-    if (row === null) {
+export const useGraphTooltip = ({ table, profileType, total, totalUnfiltered, row, level, }) => {
+    if (row === null || profileType === undefined) {
         return null;
     }
     const locationAddress = table.getChild(FIELD_LOCATION_ADDRESS)?.get(row) ?? 0n;
@@ -30,9 +30,8 @@ export const useGraphTooltip = ({ table, unit, total, totalUnfiltered, row, leve
     const diffPerSecond = table.getChild(FIELD_DIFF_PER_SECOND)?.get(row) !== null
         ? table.getChild(FIELD_DIFF_PER_SECOND)?.get(row)
         : 0;
-    const delta = unit === 'nanoseconds';
     let diffText = '';
-    if (delta) {
+    if (profileType?.delta ?? false) {
         const prevValue = cumulativePerSecond - diffPerSecond;
         const diffRatio = diffPerSecond !== 0 ? diffPerSecond / prevValue : 0;
         const diffSign = diffPerSecond > 0 ? '+' : '';
@@ -44,7 +43,7 @@ export const useGraphTooltip = ({ table, unit, total, totalUnfiltered, row, leve
         const prevValue = cumulative - diff;
         const diffRatio = diff !== 0n ? divide(diff, prevValue) : 0;
         const diffSign = diff > 0 ? '+' : '';
-        const diffValueText = diffSign + valueFormatter(diff, unit, 1);
+        const diffValueText = diffSign + valueFormatter(diff, profileType?.sampleUnit ?? '', 1);
         const diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
         diffText = `${diffValueText} (${diffPercentageText})`;
     }
@@ -52,8 +51,8 @@ export const useGraphTooltip = ({ table, unit, total, totalUnfiltered, row, leve
     return {
         name,
         locationAddress,
-        cumulativeText: getTextForCumulative(cumulative, totalUnfiltered, total, unit),
-        cumulativePerSecondText: getTextForCumulativePerSecond(cumulativePerSecond, unit),
+        cumulativeText: getTextForCumulative(cumulative, totalUnfiltered, total, profileType?.periodUnit ?? ''),
+        cumulativePerSecondText: getTextForCumulativePerSecond(cumulativePerSecond, profileType?.periodUnit ?? 'CPU Cores'),
         diffText,
         diff,
         row,

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

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { Flamegraph } from '@parca/client';
+import { ProfileType } from '@parca/parser';
 import { type NavigateFunction } from '@parca/utilities';
 interface IcicleGraphProps {
     graph: Flamegraph;
     total: bigint;
     filtered: bigint;
-    sampleUnit: string;
+    profileType?: ProfileType;
     width?: number;
     curPath: string[];
     setCurPath: (path: string[]) => void;

package/dist/ProfileIcicleGraph/IcicleGraph/index.js

@@ -19,7 +19,7 @@ import { useProfileViewContext } from '../../ProfileView/ProfileViewContext';
 import ColorStackLegend from './ColorStackLegend';
 import { IcicleNode, RowHeight } from './IcicleGraphNodes';
 import useColoredGraph from './useColoredGraph';
-export const IcicleGraph = memo(function IcicleGraph({ graph, total, filtered, width, setCurPath, curPath, sampleUnit, navigateTo, }) {
+export const IcicleGraph = memo(function IcicleGraph({ graph, total, filtered, width, setCurPath, curPath, profileType, navigateTo, }) {
     const dispatch = useAppDispatch();
     const [height, setHeight] = useState(0);
     const svg = useRef(null);
@@ -42,6 +42,6 @@ export const IcicleGraph = memo(function IcicleGraph({ graph, total, filtered, w
     if (coloredGraph.root === undefined || width === undefined) {
         return _jsx(_Fragment, {});
     }
-    return (_jsxs("div", { onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [isColorStackLegendEnabled && (_jsx(ColorStackLegend, { navigateTo: navigateTo, compareMode: compareMode })), _jsx(GraphTooltip, { unit: sampleUnit, total: total, totalUnfiltered: total + filtered, contextElement: svg.current, strings: coloredGraph.stringTable, mappings: coloredGraph.mapping, locations: coloredGraph.locations, functions: coloredGraph.function }), _jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, children: _jsx("g", { ref: ref, children: _jsx("g", { transform: 'translate(0, 0)', children: _jsx(IcicleNode, { x: 0, y: 0, totalWidth: width, height: RowHeight, setCurPath: setCurPath, curPath: curPath, data: coloredGraph.root, strings: coloredGraph.stringTable, mappings: coloredGraph.mapping, locations: coloredGraph.locations, functions: coloredGraph.function, total: total, xScale: xScale, path: [], level: 0, isRoot: true, searchString: currentSearchString, compareMode: compareMode }) }) }) })] }));
+    return (_jsxs("div", { onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [isColorStackLegendEnabled && (_jsx(ColorStackLegend, { navigateTo: navigateTo, compareMode: compareMode })), _jsx(GraphTooltip, { unit: profileType?.sampleUnit ?? '', total: total, totalUnfiltered: total + filtered, contextElement: svg.current, strings: coloredGraph.stringTable, mappings: coloredGraph.mapping, locations: coloredGraph.locations, functions: coloredGraph.function }), _jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, children: _jsx("g", { ref: ref, children: _jsx("g", { transform: 'translate(0, 0)', children: _jsx(IcicleNode, { x: 0, y: 0, totalWidth: width, height: RowHeight, setCurPath: setCurPath, curPath: curPath, data: coloredGraph.root, strings: coloredGraph.stringTable, mappings: coloredGraph.mapping, locations: coloredGraph.locations, functions: coloredGraph.function, total: total, xScale: xScale, path: [], level: 0, isRoot: true, searchString: currentSearchString, compareMode: compareMode }) }) }) })] }));
 });
 export default IcicleGraph;

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

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { Table } from 'apache-arrow';
+import { ProfileType } from '@parca/parser';
 import { type NavigateFunction } from '@parca/utilities';
 interface ContextMenuProps {
     menuId: string;
     table: Table<any>;
-    unit: string;
+    profileType?: ProfileType;
     total: bigint;
     totalUnfiltered: bigint;
     row: number;
@@ -15,5 +16,5 @@ interface ContextMenuProps {
     setCurPath: (path: string[]) => void;
     hideMenu: () => void;
 }
-declare const ContextMenu: ({ menuId, table, unit, total, totalUnfiltered, row, level, navigateTo, trackVisibility, curPath, setCurPath, hideMenu, }: ContextMenuProps) => JSX.Element;
+declare const ContextMenu: ({ menuId, table, total, totalUnfiltered, row, level, navigateTo, trackVisibility, curPath, setCurPath, hideMenu, profileType, }: ContextMenuProps) => JSX.Element;
 export default ContextMenu;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.js

@@ -19,13 +19,13 @@ import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
 import { useGraphTooltip } from '../../GraphTooltipArrow/useGraphTooltip';
 import { useGraphTooltipMetaInfo } from '../../GraphTooltipArrow/useGraphTooltipMetaInfo';
 import { hexifyAddress, truncateString } from '../../utils';
-const ContextMenu = ({ menuId, table, unit, total, totalUnfiltered, row, level, navigateTo, trackVisibility, curPath, setCurPath, hideMenu, }) => {
+const ContextMenu = ({ menuId, table, total, totalUnfiltered, row, level, navigateTo, trackVisibility, curPath, setCurPath, hideMenu, profileType, }) => {
     const { isDarkMode } = useParcaContext();
     const { enableSourcesView } = useParcaContext();
     const [isGraphTooltipDocked, setIsDocked] = useUserPreference(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
     const contextMenuData = useGraphTooltip({
         table,
-        unit,
+        profileType,
         total,
         totalUnfiltered,
         row,

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Table } from 'apache-arrow';
 import 'react-contexify/dist/ReactContexify.css';
+import { ProfileType } from '@parca/parser';
 export declare const RowHeight = 26;
 interface IcicleGraphNodesProps {
     table: Table<any>;
@@ -22,7 +23,7 @@ interface IcicleGraphNodesProps {
     sortBy: string;
     darkMode: boolean;
     compareMode: boolean;
-    delta: boolean;
+    profileType?: ProfileType;
     isContextMenuOpen: boolean;
     hoveringName: string | null;
     setHoveringName: (name: string | null) => void;
@@ -55,7 +56,7 @@ interface IcicleNodeProps {
     sortBy: string;
     darkMode: boolean;
     compareMode: boolean;
-    delta: boolean;
+    profileType?: ProfileType;
     isContextMenuOpen: boolean;
     hoveringName: string | null;
     setHoveringName: (name: string | null) => void;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.js

@@ -20,7 +20,7 @@ import { FIELD_CHILDREN, FIELD_CUMULATIVE, FIELD_CUMULATIVE_PER_SECOND, FIELD_DI
 import useNodeColor from './useNodeColor';
 import { arrowToString, nodeLabel } from './utils';
 export const RowHeight = 26;
-export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({ table, childRows, mappingColors, x, y, xScale, total, totalWidth, level, path, setCurPath, setHoveringRow, setHoveringLevel, curPath, sortBy, searchString, darkMode, compareMode, delta, isContextMenuOpen, hoveringName, setHoveringName, hoveringRow, colorForSimilarNodes, highlightSimilarStacksPreference, }) {
+export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({ table, childRows, mappingColors, x, y, xScale, total, totalWidth, level, path, setCurPath, setHoveringRow, setHoveringLevel, curPath, sortBy, searchString, darkMode, compareMode, profileType, isContextMenuOpen, hoveringName, setHoveringName, hoveringRow, colorForSimilarNodes, highlightSimilarStacksPreference, }) {
     const cumulatives = table.getChild(FIELD_CUMULATIVE);
     if (childRows === undefined || childRows.length === 0) {
         return _jsx(_Fragment, {});
@@ -35,7 +35,7 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({ tab
         const xStart = Math.floor(xScale(BigInt(childrenCumulative)));
         const c = BigInt(cumulatives?.get(child));
         childrenCumulative += c;
-        childrenElements.push(_jsx(IcicleNode, { table: table, row: child, mappingColors: mappingColors, x: xStart, y: 0, totalWidth: totalWidth, height: RowHeight, path: path, setCurPath: setCurPath, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, level: level, curPath: curPath, total: total, xScale: xScale, sortBy: sortBy, searchString: searchString, darkMode: darkMode, compareMode: compareMode, delta: delta, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }, `node-${level}-${i}`));
+        childrenElements.push(_jsx(IcicleNode, { table: table, row: child, mappingColors: mappingColors, x: xStart, y: 0, totalWidth: totalWidth, height: RowHeight, path: path, setCurPath: setCurPath, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, level: level, curPath: curPath, total: total, xScale: xScale, sortBy: sortBy, searchString: searchString, darkMode: darkMode, compareMode: compareMode, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }, `node-${level}-${i}`));
     });
     return _jsx("g", { transform: `translate(${x}, ${y})`, children: childrenElements });
 });
@@ -48,7 +48,7 @@ const fadedIcicleRectStyles = {
     transition: 'opacity .15s linear',
     opacity: '0.5',
 };
-export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, mappingColors, x, y, height, setCurPath, curPath, level, path, total, totalWidth, xScale, isRoot = false, searchString, setHoveringRow, setHoveringLevel, sortBy, darkMode, compareMode, delta, isContextMenuOpen, hoveringName, setHoveringName, hoveringRow, colorForSimilarNodes, highlightSimilarStacksPreference, }) {
+export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, mappingColors, x, y, height, setCurPath, curPath, level, path, total, totalWidth, xScale, isRoot = false, searchString, setHoveringRow, setHoveringLevel, sortBy, darkMode, compareMode, profileType, isContextMenuOpen, hoveringName, setHoveringName, hoveringRow, colorForSimilarNodes, highlightSimilarStacksPreference, }) {
     // get the columns to read from
     const mappingColumn = table.getChild(FIELD_MAPPING_FILE);
     const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
@@ -97,7 +97,7 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, map
             });
             break;
         case FIELD_CUMULATIVE:
-            if (delta) {
+            if (profileType?.delta ?? false) {
                 childRows.sort((a, b) => {
                     const aCumulativePerSecond = cumulativePerSecondColumn?.get(a);
                     const bCumulativePerSecond = cumulativePerSecondColumn?.get(b);
@@ -113,7 +113,7 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, map
             break;
         case FIELD_DIFF:
             childRows.sort((a, b) => {
-                if (delta) {
+                if (profileType?.delta ?? false) {
                     let aRatio = null;
                     let bRatio = null;
                     const aDiff = diffPerSecondColumn?.get(a);
@@ -225,5 +225,5 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, map
                             ? `${colorForSimilarNodes} stroke-[3] [stroke-dasharray:6,4] [stroke-linecap:round] [stroke-linejoin:round] h-6`
                             : 'stroke-white dark:stroke-gray-700', {
                             'opacity-50': isHighlightEnabled && !isHighlighted,
-                        }) }), width > 5 && (_jsx("svg", { width: width - 5, height: height, children: _jsx("text", { x: 5, y: 15, style: { fontSize: '12px' }, children: name }) }))] }), childRows.length > 0 && (_jsx(IcicleGraphNodes, { table: table, row: row, mappingColors: mappingColors, childRows: childRows, x: x, y: RowHeight, xScale: newXScale, total: total, totalWidth: totalWidth, level: nextLevel, path: nextPath, curPath: nextCurPath, setCurPath: setCurPath, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, searchString: searchString, sortBy: sortBy, darkMode: darkMode, delta: delta, compareMode: compareMode, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }))] }));
+                        }) }), width > 5 && (_jsx("svg", { width: width - 5, height: height, children: _jsx("text", { x: 5, y: 15, style: { fontSize: '12px' }, children: name }) }))] }), childRows.length > 0 && (_jsx(IcicleGraphNodes, { table: table, row: row, mappingColors: mappingColors, childRows: childRows, x: x, y: RowHeight, xScale: newXScale, total: total, totalWidth: totalWidth, level: nextLevel, path: nextPath, curPath: nextCurPath, setCurPath: setCurPath, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, searchString: searchString, sortBy: sortBy, darkMode: darkMode, profileType: profileType, compareMode: compareMode, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }))] }));
 });

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FlamegraphArrow } from '@parca/client';
+import { ProfileType } from '@parca/parser';
 import { type NavigateFunction } from '@parca/utilities';
 export declare const FIELD_LABELS_ONLY = "labels_only";
 export declare const FIELD_MAPPING_FILE = "mapping_file";
@@ -21,7 +22,7 @@ interface IcicleGraphArrowProps {
     arrow: FlamegraphArrow;
     total: bigint;
     filtered: bigint;
-    sampleUnit: string;
+    profileType?: ProfileType;
     width?: number;
     curPath: string[];
     setCurPath: (path: string[]) => void;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -41,7 +41,7 @@ export const FIELD_CUMULATIVE = 'cumulative';
 export const FIELD_CUMULATIVE_PER_SECOND = 'cumulative_per_second';
 export const FIELD_DIFF = 'diff';
 export const FIELD_DIFF_PER_SECOND = 'diff_per_second';
-export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, sampleUnit, navigateTo, sortBy, }) {
+export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, navigateTo, sortBy, }) {
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
     const dispatch = useAppDispatch();
     const [highlightSimilarStacksPreference] = useUserPreference(USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key);
@@ -141,14 +141,14 @@ 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(() => {
-        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, mappingColors: mappingColors, x: 0, y: 0, totalWidth: width ?? 1, height: RowHeight, setCurPath: setCurPath, curPath: curPath, total: total, xScale: xScale, path: [], level: 0, isRoot: true, searchString: currentSearchString, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode, delta: sampleUnit === 'nanoseconds', isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }) }) }) }));
+        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, mappingColors: mappingColors, x: 0, y: 0, totalWidth: width ?? 1, height: RowHeight, setCurPath: setCurPath, curPath: curPath, total: total, xScale: xScale, path: [], level: 0, isRoot: true, searchString: currentSearchString, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }) }) }) }));
     }, [
         compareMode,
         curPath,
         currentSearchString,
         height,
         isDarkMode,
-        sampleUnit,
+        profileType,
         mappingColors,
         setCurPath,
         sortBy,
@@ -166,6 +166,6 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
     if (table.numRows === 0 || width === undefined) {
         return _jsx(_Fragment, {});
     }
-    return (_jsx(_Fragment, { children: _jsxs("div", { onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [_jsx(ContextMenu, { menuId: MENU_ID, table: table, row: hoveringRow ?? 0, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, unit: sampleUnit, navigateTo: navigateTo, trackVisibility: trackVisibility, curPath: curPath, setCurPath: setCurPath, hideMenu: hideAll }), isColorStackLegendEnabled && (_jsx(ColorStackLegend, { mappingColors: mappingColors, navigateTo: navigateTo, compareMode: compareMode })), dockedMetainfo ? (_jsx(DockedGraphTooltip, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, unit: sampleUnit })) : (!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, unit: sampleUnit, navigateTo: navigateTo }) }))), root] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { 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, navigateTo: navigateTo, trackVisibility: trackVisibility, curPath: curPath, setCurPath: setCurPath, hideMenu: hideAll }), isColorStackLegendEnabled && (_jsx(ColorStackLegend, { mappingColors: mappingColors, navigateTo: navigateTo, compareMode: compareMode })), dockedMetainfo ? (_jsx(DockedGraphTooltip, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, profileType: profileType })) : (!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, navigateTo: navigateTo }) }))), root] }) }));
 });
 export default IcicleGraphArrow;

package/dist/ProfileIcicleGraph/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Flamegraph, FlamegraphArrow } from '@parca/client';
+import { ProfileType } from '@parca/parser';
 import { type NavigateFunction } from '@parca/utilities';
 export type ResizeHandler = (width: number, height: number) => void;
 interface ProfileIcicleGraphProps {
@@ -8,7 +9,7 @@ interface ProfileIcicleGraphProps {
     arrow?: FlamegraphArrow;
     total: bigint;
     filtered: bigint;
-    sampleUnit: string;
+    profileType?: ProfileType;
     curPath: string[] | [];
     setNewCurPath: (path: string[]) => void;
     navigateTo?: NavigateFunction;
@@ -17,5 +18,5 @@ interface ProfileIcicleGraphProps {
     error?: any;
     isHalfScreen: boolean;
 }
-declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, error, width, isHalfScreen, }: ProfileIcicleGraphProps) => JSX.Element;
+declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, navigateTo, loading, setActionButtons, error, width, isHalfScreen, }: ProfileIcicleGraphProps) => JSX.Element;
 export default ProfileIcicleGraph;

package/dist/ProfileIcicleGraph/index.js

@@ -82,7 +82,7 @@ const GroupAndSortActionButtons = ({ navigateTo }) => {
     });
     return (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy }), _jsx(SortBySelect, { compareMode: compareMode, sortBy: storeSortBy, setSortBy: setStoreSortBy }), _jsx(RuntimeFilterDropdown, { showRuntimeRuby: showRuntimeRubyStr === 'true', toggleShowRuntimeRuby: () => setShowRuntimeRuby(showRuntimeRubyStr === 'true' ? 'false' : 'true'), showRuntimePython: showRuntimePythonStr === 'true', toggleShowRuntimePython: () => setShowRuntimePython(showRuntimePythonStr === 'true' ? 'false' : 'true'), showInterpretedOnly: showInterpretedOnlyStr === 'true', toggleShowInterpretedOnly: () => setShowInterpretedOnly(showInterpretedOnlyStr === 'true' ? 'false' : 'true') })] }));
 };
-const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, error, width, isHalfScreen, }) {
+const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, navigateTo, loading, setActionButtons, error, width, isHalfScreen, }) {
     const { onError, authenticationErrorMessage, isDarkMode } = useParcaContext();
     const { compareMode } = useProfileViewContext();
     const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState({
@@ -134,6 +134,6 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
     if (isTrimmed) {
         console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
     }
-    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, _jsxs("div", { className: "min-h-48", id: "h-icicle-graph", children: [graph !== undefined && (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo })), arrow !== undefined && (_jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo, sortBy: storeSortBy }))] }), _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, _jsxs("div", { className: "min-h-48", id: "h-icicle-graph", children: [graph !== undefined && (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType, navigateTo: navigateTo })), arrow !== undefined && (_jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType, navigateTo: navigateTo, sortBy: storeSortBy }))] }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }, "icicle-graph-loaded") }));
 };
 export default ProfileIcicleGraph;

package/dist/ProfileView/ProfileViewContext.d.ts

@@ -2,7 +2,6 @@ import { ReactNode } from 'react';
 import { ProfileSource } from '../ProfileSource';
 interface Props {
     profileSource?: ProfileSource;
-    sampleUnit: string;
     compareMode: boolean;
 }
 export declare const defaultValue: Props;

package/dist/ProfileView/ProfileViewContext.js

@@ -14,7 +14,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
 export const defaultValue = {
     profileSource: undefined,
-    sampleUnit: 'bytes',
     compareMode: false,
 };
 const ProfileViewContext = createContext(defaultValue);

package/dist/ProfileView/index.d.ts

@@ -39,7 +39,6 @@ export interface ProfileViewProps {
     topTableData?: TopTableData;
     callgraphData?: CallgraphData;
     sourceData?: SourceData;
-    sampleUnit: string;
     profileSource?: ProfileSource;
     queryClient?: QueryServiceClient;
     navigateTo?: NavigateFunction;
@@ -47,5 +46,5 @@ export interface ProfileViewProps {
     onDownloadPProf: () => void;
     pprofDownloading?: boolean;
 }
-export declare const ProfileView: ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, compare, }: ProfileViewProps) => JSX.Element;
+export declare const ProfileView: ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, compare, }: ProfileViewProps) => JSX.Element;
 export {};

package/dist/ProfileView/index.js

@@ -38,7 +38,7 @@ function arrayEquals(a, b) {
         a.length === b.length &&
         a.every((val, index) => val === b[index]));
 }
-export const ProfileView = ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, compare, }) => {
+export const ProfileView = ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, compare, }) => {
     const { timezone } = useParcaContext();
     const { ref, dimensions } = useContainerDimensions();
     const [curPath, setCurPath] = useState([]);
@@ -107,7 +107,7 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                 return (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
                         id: 'icicleGraph',
                         onRender: perf?.onRender,
-                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, arrow: flamegraphData?.arrow, graph: flamegraphData?.data, total: total, filtered: filtered, sampleUnit: sampleUnit, navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons, error: flamegraphData.error, isHalfScreen: isHalfScreen, width: dimensions?.width !== undefined
+                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, arrow: flamegraphData?.arrow, graph: flamegraphData?.data, total: total, filtered: filtered, profileType: profileSource?.ProfileType(), navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons, error: flamegraphData.error, isHalfScreen: isHalfScreen, width: dimensions?.width !== undefined
                             ? isHalfScreen
                                 ? (dimensions.width - 40) / 2
                                 : dimensions.width - 16
@@ -116,10 +116,10 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
             case 'callgraph': {
                 return callgraphData?.data !== undefined &&
                     callgraphSVG !== undefined &&
-                    dimensions?.width !== undefined ? (_jsx(Callgraph, { data: callgraphData.data, svgString: callgraphSVG, sampleUnit: sampleUnit, width: isHalfScreen ? dimensions?.width / 2 : dimensions?.width })) : (_jsx(_Fragment, {}));
+                    dimensions?.width !== undefined ? (_jsx(Callgraph, { data: callgraphData.data, svgString: callgraphSVG, profileType: profileSource?.ProfileType(), width: isHalfScreen ? dimensions?.width / 2 : dimensions?.width })) : (_jsx(_Fragment, {}));
             }
             case 'table': {
-                return topTableData != null ? (_jsx(Table, { total: total, filtered: filtered, loading: topTableData.loading, data: topTableData.arrow?.record, sampleUnit: sampleUnit, navigateTo: navigateTo, setActionButtons: setActionButtons, currentSearchString: currentSearchString, isHalfScreen: isHalfScreen })) : (_jsx(_Fragment, {}));
+                return topTableData != null ? (_jsx(Table, { total: total, filtered: filtered, loading: topTableData.loading, data: topTableData.arrow?.record, profileType: profileSource?.ProfileType(), navigateTo: navigateTo, setActionButtons: setActionButtons, currentSearchString: currentSearchString, isHalfScreen: isHalfScreen })) : (_jsx(_Fragment, {}));
             }
             case 'source': {
                 return sourceData != null ? (_jsx(SourceView, { loading: sourceData.loading, data: sourceData.data, total: total, filtered: filtered, setActionButtons: setActionButtons })) : (_jsx(_Fragment, {}));
@@ -150,7 +150,7 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
     const headerParts = profileSourceString?.split('"') ?? [];
     const compareMode = compare === true ||
         (selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true');
-    return (_jsx(KeyDownProvider, { children: _jsxs(ProfileViewContextProvider, { value: { profileSource, sampleUnit, compareMode }, children: [_jsxs("div", { className: cx('mb-4 flex w-full', hasProfileSource || profileViewExternalMainActions != null
+    return (_jsx(KeyDownProvider, { children: _jsxs(ProfileViewContextProvider, { value: { profileSource, compareMode }, children: [_jsxs("div", { className: cx('mb-4 flex w-full', hasProfileSource || profileViewExternalMainActions != null
                         ? 'justify-between'
                         : 'justify-end', {
                         'items-end': !hasProfileSource && profileViewExternalMainActions != null,

package/dist/ProfileViewWithData.js

@@ -87,18 +87,6 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
         sourceResponse,
         perf,
     ]);
-    // Default to the unit of the selected profile type. This is a heuristic, and
-    // only a fallback, the unit should be returned by the backend.
-    let sampleUnit = profileSource.ProfileType().sampleUnit;
-    if (flamegraphResponse?.report.oneofKind === 'flamegraphArrow') {
-        sampleUnit = flamegraphResponse.report.flamegraphArrow.unit;
-    }
-    if (tableResponse?.report.oneofKind === 'tableArrow') {
-        sampleUnit = tableResponse.report.tableArrow.unit;
-    }
-    if (sourceResponse?.report.oneofKind === 'source') {
-        sampleUnit = sourceResponse.report.source.unit;
-    }
     const downloadPProfClick = async () => {
         if (profileSource == null || queryClient == null) {
             return;
@@ -163,6 +151,6 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
                 ? sourceResponse?.report?.source
                 : undefined,
             error: sourceError,
-        }, sampleUnit: sampleUnit, profileSource: profileSource, queryClient: queryClient, navigateTo: navigateTo, onDownloadPProf: () => void downloadPProfClick(), pprofDownloading: pprofDownloading }));
+        }, profileSource: profileSource, queryClient: queryClient, navigateTo: navigateTo, onDownloadPProf: () => void downloadPProfClick(), pprofDownloading: pprofDownloading }));
 };
 export default ProfileViewWithData;

package/dist/SourceView/Highlighter.js

@@ -45,13 +45,13 @@ const intensityScale = scaleLinear().domain([0, 99]).range([0.05, 0.75]);
 const LineProfileMetadata = ({ value, total, filtered, }) => {
     const commonClasses = 'w-[52px] shrink-0';
     const id = useId();
-    const { sampleUnit } = useProfileViewContext();
+    const { profileSource } = useProfileViewContext();
     if (value === 0n) {
         return _jsx("div", { className: cx(commonClasses) });
     }
     const unfilteredPercent = (Number(value) / Number(total + filtered)) * 100;
     const filteredPercent = (Number(value) / Number(total)) * 100;
-    const valueWithUnit = valueFormatter(value, sampleUnit, 1, true);
+    const valueWithUnit = valueFormatter(value, profileSource?.ProfileType().sampleUnit ?? '', 1, true);
     return (_jsxs(_Fragment, { children: [_jsx("p", { className: cx('w- flex justify-end overflow-hidden text-ellipsis whitespace-nowrap', commonClasses), style: { backgroundColor: `rgba(236, 151, 6, ${intensityScale(unfilteredPercent)})` }, "data-tooltip-id": id, "data-tooltip-content": `${valueWithUnit} (${unfilteredPercent.toFixed(2)}%${filtered > 0n ? ` / ${filteredPercent.toFixed(2)}%` : ''})`, children: valueWithUnit }), _jsx(Tooltip, { id: id })] }));
 };
 const charsToWidth = (chars) => {

package/dist/Table/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Vector } from 'apache-arrow';
+import { ProfileType } from '@parca/parser';
 import { type NavigateFunction } from '@parca/utilities';
 export interface ColumnDef {
     id: string;
@@ -17,7 +18,7 @@ interface TableProps {
     data?: Uint8Array;
     total: bigint;
     filtered: bigint;
-    sampleUnit: string;
+    profileType?: ProfileType;
     navigateTo?: NavigateFunction;
     loading: boolean;
     currentSearchString?: string;