@parca/profile 0.16.360 → 0.16.362

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;

package/dist/Table/index.js

@@ -28,7 +28,7 @@ const FIELD_FLAT = 'flat';
 const FIELD_FLAT_DIFF = 'flat_diff';
 const FIELD_CUMULATIVE = 'cumulative';
 const FIELD_CUMULATIVE_DIFF = 'cumulative_diff';
-export const Table = React.memo(function Table({ data, total, filtered, sampleUnit: unit, navigateTo, loading, currentSearchString, setActionButtons, isHalfScreen, }) {
+export const Table = React.memo(function Table({ data, total, filtered, profileType, navigateTo, loading, currentSearchString, setActionButtons, isHalfScreen, }) {
     const router = parseParams(window?.location.search);
     const [rawDashboardItems] = useURLState({ param: 'dashboard_items' });
     const [filterByFunctionInput] = useURLState({ param: 'filter_by_function' });
@@ -59,7 +59,7 @@ export const Table = React.memo(function Table({ data, total, filtered, sampleUn
                 id: 'flat',
                 accessorKey: 'flat',
                 header: 'Flat',
-                cell: info => valueFormatter(info.getValue(), unit, 2),
+                cell: info => valueFormatter(info.getValue(), profileType?.sampleUnit ?? '', 2),
                 size: 80,
                 meta: {
                     align: 'right',
@@ -81,7 +81,7 @@ export const Table = React.memo(function Table({ data, total, filtered, sampleUn
                 id: 'flatDiff',
                 accessorKey: 'flatDiff',
                 header: 'Flat Diff',
-                cell: info => addPlusSign(valueFormatter(info.getValue(), unit, 2)),
+                cell: info => addPlusSign(valueFormatter(info.getValue(), profileType?.sampleUnit ?? '', 2)),
                 size: 120,
                 meta: {
                     align: 'right',
@@ -103,7 +103,7 @@ export const Table = React.memo(function Table({ data, total, filtered, sampleUn
                 id: 'cumulative',
                 accessorKey: 'cumulative',
                 header: 'Cumulative',
-                cell: info => valueFormatter(info.getValue(), unit, 2),
+                cell: info => valueFormatter(info.getValue(), profileType?.sampleUnit ?? '', 2),
                 size: 150,
                 meta: {
                     align: 'right',
@@ -125,7 +125,7 @@ export const Table = React.memo(function Table({ data, total, filtered, sampleUn
                 id: 'cumulativeDiff',
                 accessorKey: 'cumulativeDiff',
                 header: 'Cumulative Diff',
-                cell: info => addPlusSign(valueFormatter(info.getValue(), unit, 2)),
+                cell: info => addPlusSign(valueFormatter(info.getValue(), profileType?.sampleUnit ?? '', 2)),
                 size: 170,
                 meta: {
                     align: 'right',
@@ -166,7 +166,7 @@ export const Table = React.memo(function Table({ data, total, filtered, sampleUn
             },
         ];
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [unit]);
+    }, [profileType]);
     const [columnVisibility, setColumnVisibility] = useState(() => {
         return {
             flat: true,

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.360",
+  "version": "0.16.362",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.107",
-    "@parca/components": "^0.16.266",
+    "@parca/components": "^0.16.267",
     "@parca/dynamicsize": "^0.16.61",
-    "@parca/hooks": "^0.0.47",
+    "@parca/hooks": "^0.0.48",
     "@parca/parser": "^0.16.69",
-    "@parca/store": "^0.16.136",
-    "@parca/utilities": "^0.0.64",
+    "@parca/store": "^0.16.137",
+    "@parca/utilities": "^0.0.65",
     "@tanstack/react-query": "^4.0.5",
     "@types/react-beautiful-dnd": "^13.1.8",
     "apache-arrow": "^12.0.0",
@@ -50,5 +50,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "6430a8027b0edb84336feea5c774e409595f40a6"
+  "gitHead": "b9faf0a1236107753bda612b90d67c7d82e9583c"
 }

package/src/Callgraph/index.tsx

@@ -20,6 +20,7 @@ import {MapInteractionCSS} from 'react-map-interaction';
 
 import {CallgraphEdge, Callgraph as CallgraphType} from '@parca/client';
 import {Button, useKeyDown, useURLState} from '@parca/components';
+import {ProfileType} from '@parca/parser';
 import {selectDarkMode, setHoveringNode, useAppDispatch, useAppSelector} from '@parca/store';
 import {getNewSpanColor} from '@parca/utilities';
 
@@ -28,7 +29,7 @@ import GraphTooltip from '../GraphTooltip';
 export interface Props {
   data: CallgraphType;
   svgString: string;
-  sampleUnit: string;
+  profileType: ProfileType | undefined;
   width: number;
 }
 
@@ -37,7 +38,7 @@ interface View {
   translation: {x: number; y: number};
 }
 
-const Callgraph = ({data, svgString, sampleUnit, width}: Props): JSX.Element => {
+const Callgraph = ({data, svgString, profileType, width}: Props): JSX.Element => {
   const originalView = {
     scale: 1,
     translation: {x: 0, y: 0},
@@ -147,7 +148,7 @@ const Callgraph = ({data, svgString, sampleUnit, width}: Props): JSX.Element =>
         {svgRef.current !== null && (
           <GraphTooltip
             type="callgraph"
-            unit={sampleUnit}
+            unit={profileType?.sampleUnit ?? ''}
             total={data.cumulative}
             totalUnfiltered={data.cumulative}
             contextElement={containerRef.current}

package/src/GraphTooltipArrow/Content.tsx

@@ -16,6 +16,7 @@ import React from 'react';
 import {Icon} from '@iconify/react';
 import {Table} from 'apache-arrow';
 
+import {ProfileType} from '@parca/parser';
 import {getLastItem, type NavigateFunction} from '@parca/utilities';
 
 import {hexifyAddress, truncateString, truncateStringReverse} from '../utils';
@@ -25,7 +26,7 @@ import {useGraphTooltipMetaInfo} from './useGraphTooltipMetaInfo';
 
 interface GraphTooltipArrowContentProps {
   table: Table<any>;
-  unit: string;
+  profileType?: ProfileType;
   total: bigint;
   totalUnfiltered: bigint;
   row: number | null;
@@ -40,7 +41,7 @@ const NoData = (): React.JSX.Element => {
 
 const GraphTooltipArrowContent = ({
   table,
-  unit,
+  profileType,
   total,
   totalUnfiltered,
   row,
@@ -50,7 +51,7 @@ const GraphTooltipArrowContent = ({
 }: GraphTooltipArrowContentProps): React.JSX.Element => {
   const graphTooltipData = useGraphTooltip({
     table,
-    unit,
+    profileType,
     total,
     totalUnfiltered,
     row,
@@ -61,7 +62,15 @@ const GraphTooltipArrowContent = ({
     return <></>;
   }
 
-  const {name, locationAddress, cumulativeText, diffText, diff, row: rowNumber} = graphTooltipData;
+  const {
+    name,
+    locationAddress,
+    cumulativeText,
+    cumulativePerSecondText,
+    diffText,
+    diff,
+    row: rowNumber,
+  } = graphTooltipData;
 
   return (
     <div className={`flex text-sm ${isFixed ? 'w-full' : ''}`}>
@@ -84,6 +93,16 @@ const GraphTooltipArrowContent = ({
               </div>
               <table className="my-2 w-full table-fixed pr-0 text-gray-700 dark:text-gray-300">
                 <tbody>
+                  {profileType?.delta ?? false ? (
+                    <tr>
+                      <td className="w-1/4">Per Second</td>
+                      <td className="w-3/4">
+                        <div>{cumulativePerSecondText}</div>
+                      </td>
+                    </tr>
+                  ) : (
+                    <></>
+                  )}
                   <tr>
                     <td className="w-1/4">Cumulative</td>
 

package/src/GraphTooltipArrow/DockedGraphTooltip/index.tsx

@@ -17,6 +17,7 @@ import cx from 'classnames';
 import {useWindowSize} from 'react-use';
 
 import {useParcaContext} from '@parca/components';
+import {ProfileType} from '@parca/parser';
 import {getLastItem} from '@parca/utilities';
 
 import {hexifyAddress, truncateString, truncateStringReverse} from '../../utils';
@@ -25,11 +26,11 @@ import {useGraphTooltipMetaInfo} from '../useGraphTooltipMetaInfo';
 
 interface Props {
   table: Table<any>;
-  unit: string;
   total: bigint;
   totalUnfiltered: bigint;
   row: number | null;
   level: number;
+  profileType?: ProfileType;
 }
 
 const InfoSection = ({
@@ -55,11 +56,11 @@ const NoData = (): React.JSX.Element => {
 
 export const DockedGraphTooltip = ({
   table,
-  unit,
   total,
   totalUnfiltered,
   row,
   level,
+  profileType,
 }: Props): JSX.Element => {
   let {width} = useWindowSize();
   const {profileExplorer, navigateTo} = useParcaContext();
@@ -68,7 +69,7 @@ export const DockedGraphTooltip = ({
 
   const graphTooltipData = useGraphTooltip({
     table,
-    unit,
+    profileType,
     total,
     totalUnfiltered,
     row,

package/src/GraphTooltipArrow/useGraphTooltip/index.ts

@@ -13,18 +13,25 @@
 
 import {Table} from 'apache-arrow';
 
+import {ProfileType} from '@parca/parser';
 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, nodeLabel} from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
+import {
+  getTextForCumulative,
+  getTextForCumulativePerSecond,
+  nodeLabel,
+} from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
 
 interface Props {
   table: Table<any>;
-  unit: string;
+  profileType?: ProfileType;
   total: bigint;
   totalUnfiltered: bigint;
   row: number | null;
@@ -35,6 +42,7 @@ interface GraphTooltipData {
   name: string;
   locationAddress: bigint;
   cumulativeText: string;
+  cumulativePerSecondText: string;
   diffText: string;
   diff: bigint;
   row: number;
@@ -42,13 +50,13 @@ interface GraphTooltipData {
 
 export const useGraphTooltip = ({
   table,
-  unit,
+  profileType,
   total,
   totalUnfiltered,
   row,
   level,
 }: Props): GraphTooltipData | null => {
-  if (row === null) {
+  if (row === null || profileType === undefined) {
     return null;
   }
 
@@ -58,24 +66,51 @@ export const useGraphTooltip = ({
     table.getChild(FIELD_CUMULATIVE)?.get(row) !== null
       ? BigInt(table.getChild(FIELD_CUMULATIVE)?.get(row))
       : 0n;
+  const cumulativePerSecond: number =
+    table.getChild(FIELD_CUMULATIVE_PER_SECOND)?.get(row) !== null
+      ? table.getChild(FIELD_CUMULATIVE_PER_SECOND)?.get(row)
+      : 0;
   const diff: bigint =
     table.getChild(FIELD_DIFF)?.get(row) !== null
       ? BigInt(table.getChild(FIELD_DIFF)?.get(row))
       : 0n;
+  const diffPerSecond: number =
+    table.getChild(FIELD_DIFF_PER_SECOND)?.get(row) !== null
+      ? table.getChild(FIELD_DIFF_PER_SECOND)?.get(row)
+      : 0;
 
-  const prevValue = cumulative - diff;
-  const diffRatio = diff !== 0n ? divide(diff, prevValue) : 0;
-  const diffSign = diff > 0 ? '+' : '';
-  const diffValueText = diffSign + valueFormatter(diff, unit, 1);
-  const diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
-  const diffText = `${diffValueText} (${diffPercentageText})`;
+  let diffText = '';
+  if (profileType?.delta ?? false) {
+    const prevValue = cumulativePerSecond - diffPerSecond;
+    const diffRatio = diffPerSecond !== 0 ? diffPerSecond / prevValue : 0;
+    const diffSign = diffPerSecond > 0 ? '+' : '';
+    const diffValueText = diffSign + valueFormatter(diffPerSecond, 'CPU Cores', 5);
+    const diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
+    diffText = `${diffValueText} (${diffPercentageText})`;
+  } else {
+    const prevValue = cumulative - diff;
+    const diffRatio = diff !== 0n ? divide(diff, prevValue) : 0;
+    const diffSign = diff > 0 ? '+' : '';
+    const diffValueText = diffSign + valueFormatter(diff, profileType?.sampleUnit ?? '', 1);
+    const diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
+    diffText = `${diffValueText} (${diffPercentageText})`;
+  }
 
   const name = nodeLabel(table, row, level, false);
 
   return {
     name,
     locationAddress,
-    cumulativeText: getTextForCumulative(cumulative, totalUnfiltered, total, unit),
+    cumulativeText: getTextForCumulative(
+      cumulative,
+      totalUnfiltered,
+      total,
+      profileType?.periodUnit ?? ''
+    ),
+    cumulativePerSecondText: getTextForCumulativePerSecond(
+      cumulativePerSecond,
+      profileType?.periodUnit ?? 'CPU Cores'
+    ),
     diffText,
     diff,
     row,

package/src/ProfileIcicleGraph/IcicleGraph/index.tsx

@@ -14,6 +14,7 @@
 import {memo, useEffect, useMemo, useRef, useState} from 'react';
 
 import {Flamegraph} from '@parca/client';
+import {ProfileType} from '@parca/parser';
 import {setHoveringNode, useAppDispatch} from '@parca/store';
 import {scaleLinear, selectQueryParam, type NavigateFunction} from '@parca/utilities';
 
@@ -27,7 +28,7 @@ interface IcicleGraphProps {
   graph: Flamegraph;
   total: bigint;
   filtered: bigint;
-  sampleUnit: string;
+  profileType?: ProfileType;
   width?: number;
   curPath: string[];
   setCurPath: (path: string[]) => void;
@@ -41,7 +42,7 @@ export const IcicleGraph = memo(function IcicleGraph({
   width,
   setCurPath,
   curPath,
-  sampleUnit,
+  profileType,
   navigateTo,
 }: IcicleGraphProps): JSX.Element {
   const dispatch = useAppDispatch();
@@ -77,7 +78,7 @@ export const IcicleGraph = memo(function IcicleGraph({
         <ColorStackLegend navigateTo={navigateTo} compareMode={compareMode} />
       )}
       <GraphTooltip
-        unit={sampleUnit}
+        unit={profileType?.sampleUnit ?? ''}
         total={total}
         totalUnfiltered={total + filtered}
         contextElement={svg.current}

package/src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.tsx

@@ -18,6 +18,7 @@ import {Tooltip} from 'react-tooltip';
 
 import {useParcaContext} from '@parca/components';
 import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
+import {ProfileType} from '@parca/parser';
 import {type NavigateFunction} from '@parca/utilities';
 
 import {useGraphTooltip} from '../../GraphTooltipArrow/useGraphTooltip';
@@ -27,7 +28,7 @@ import {hexifyAddress, truncateString} from '../../utils';
 interface ContextMenuProps {
   menuId: string;
   table: Table<any>;
-  unit: string;
+  profileType?: ProfileType;
   total: bigint;
   totalUnfiltered: bigint;
   row: number;
@@ -42,7 +43,6 @@ interface ContextMenuProps {
 const ContextMenu = ({
   menuId,
   table,
-  unit,
   total,
   totalUnfiltered,
   row,
@@ -52,6 +52,7 @@ const ContextMenu = ({
   curPath,
   setCurPath,
   hideMenu,
+  profileType,
 }: ContextMenuProps): JSX.Element => {
   const {isDarkMode} = useParcaContext();
   const {enableSourcesView} = useParcaContext();
@@ -60,7 +61,7 @@ const ContextMenu = ({
   );
   const contextMenuData = useGraphTooltip({
     table,
-    unit,
+    profileType,
     total,
     totalUnfiltered,
     row,