@parca/profile 0.16.145 → 0.16.146

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.146](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.145...@parca/profile@0.16.146) (2023-03-22)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.145](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.144...@parca/profile@0.16.145) (2023-03-21)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/index.js

@@ -109,6 +109,6 @@ var Callgraph = function (_a) {
     var isResetViewButtonEnabled = view.scale !== originalView.scale ||
         view.translation.x !== originalView.translation.x ||
         view.translation.y !== originalView.translation.y;
-    return (_jsxs("div", __assign({ className: "w-full relative" }, { children: [_jsxs("div", __assign({ ref: containerRef, className: "w-full overflow-hidden" }, { children: [_jsx(MapInteractionCSS, __assign({ showControls: true, minScale: 1, maxScale: 5, value: view, onChange: function (value) { return 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: parseInt(data.cumulative), contextElement: containerRef.current }))] })), _jsx("div", __assign({ className: cx(dashboardItems.length > 1 ? 'left-[25px]' : 'left-0', 'w-auto absolute top-[-46px]') }, { children: _jsx(Button, __assign({ variant: "neutral", onClick: resetView, className: "z-50", disabled: !isResetViewButtonEnabled }, { children: "Reset View" })) }))] })));
+    return (_jsxs("div", __assign({ className: "w-full relative" }, { children: [_jsxs("div", __assign({ ref: containerRef, className: "w-full overflow-hidden" }, { children: [_jsx(MapInteractionCSS, __assign({ showControls: true, minScale: 1, maxScale: 5, value: view, onChange: function (value) { return 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: parseInt(data.cumulative), totalUnfiltered: parseInt(data.cumulative), contextElement: containerRef.current }))] })), _jsx("div", __assign({ className: cx(dashboardItems.length > 1 ? 'left-[25px]' : 'left-0', 'w-auto absolute top-[-46px]') }, { children: _jsx(Button, __assign({ variant: "neutral", onClick: resetView, className: "z-50", disabled: !isResetViewButtonEnabled }, { children: "Reset View" })) }))] })));
 };
 export default Callgraph;

package/dist/GraphTooltip/index.d.ts

@@ -14,6 +14,7 @@ interface GraphTooltipProps {
     y?: number;
     unit: string;
     total: number;
+    totalUnfiltered: number;
     hoveringNode?: HoveringNode;
     contextElement: Element | null;
     isFixed?: boolean;
@@ -24,10 +25,11 @@ interface GraphTooltipProps {
     functions?: ParcaFunction[];
     type?: string;
 }
-export declare const GraphTooltipContent: ({ hoveringNode, unit, total, isFixed, strings, mappings, locations, functions, type, }: {
+export declare const GraphTooltipContent: ({ hoveringNode, unit, total, totalUnfiltered, isFixed, strings, mappings, locations, functions, type, }: {
     hoveringNode: HoveringNode;
     unit: string;
     total: number;
+    totalUnfiltered: number;
     isFixed: boolean;
     strings?: string[] | undefined;
     mappings?: Mapping[] | undefined;
@@ -35,5 +37,5 @@ export declare const GraphTooltipContent: ({ hoveringNode, unit, total, isFixed,
     functions?: ParcaFunction[] | undefined;
     type?: string | undefined;
 }) => JSX.Element;
-declare const GraphTooltip: ({ x, y, unit, total, hoveringNode: hoveringNodeProp, contextElement, isFixed, virtualContextElement, strings, mappings, locations, functions, type, }: GraphTooltipProps) => JSX.Element;
+declare const GraphTooltip: ({ x, y, unit, total, totalUnfiltered, hoveringNode: hoveringNodeProp, contextElement, isFixed, virtualContextElement, strings, mappings, locations, functions, type, }: GraphTooltipProps) => JSX.Element;
 export default GraphTooltip;

package/dist/GraphTooltip/index.js

@@ -129,7 +129,7 @@ var TooltipMetaInfo = function (_a) {
 };
 var timeoutHandle = null;
 export var GraphTooltipContent = function (_a) {
-    var hoveringNode = _a.hoveringNode, unit = _a.unit, total = _a.total, isFixed = _a.isFixed, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions, _b = _a.type, type = _b === void 0 ? 'flamegraph' : _b;
+    var hoveringNode = _a.hoveringNode, unit = _a.unit, total = _a.total, totalUnfiltered = _a.totalUnfiltered, isFixed = _a.isFixed, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions, _b = _a.type, type = _b === void 0 ? 'flamegraph' : _b;
     var _c = useState(false), isCopied = _c[0], setIsCopied = _c[1];
     var onCopy = function () {
         setIsCopied(true);
@@ -147,14 +147,17 @@ export var GraphTooltipContent = function (_a) {
     var diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
     var diffText = "".concat(diffValueText, " (").concat(diffPercentageText, ")");
     var getTextForCumulative = function (hoveringNodeCumulative) {
-        return "".concat(valueFormatter(hoveringNodeCumulative, unit, 2), " (\n      ").concat(((hoveringNodeCumulative * 100) / total).toFixed(2), "%)");
+        var filtered = totalUnfiltered > total
+            ? " / ".concat(((hoveringNodeCumulative * 100) / total).toFixed(2), "% of filtered")
+            : '';
+        return "".concat(valueFormatter(hoveringNodeCumulative, unit, 2), "\n    (").concat(((hoveringNodeCumulative * 100) / totalUnfiltered).toFixed(2), "%").concat(filtered, ")");
     };
     return (_jsx("div", __assign({ className: "text-sm flex ".concat(isFixed ? 'w-full' : '') }, { children: _jsx("div", __assign({ className: "m-auto w-full ".concat(isFixed ? 'w-full' : '') }, { children: _jsxs("div", __assign({ className: "border border-gray-300 dark:border-gray-500 bg-gray-50 dark:bg-gray-900 rounded-lg p-3 shadow-lg min-h-52 w-[500px] flex justify-between flex-col" }, { children: [_jsx("div", __assign({ className: "flex flex-row" }, { children: _jsxs("div", __assign({ className: "mx-2" }, { children: [_jsx("div", __assign({ className: "font-semibold break-all h-10 flex items-center" }, { children: hoveringNode.meta === undefined ? (_jsx("p", { children: "root" })) : (_jsx(_Fragment, { children: hoveringNode.meta.function !== undefined &&
                                             hoveringNode.meta.function.name !== '' ? (_jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hoveringNode.meta.function.name }, { children: _jsx("button", __assign({ className: "cursor-pointer text-left" }, { children: hoveringNode.meta.function.name })) }))) : (_jsx(_Fragment, { children: hoveringNode.meta.location !== undefined &&
                                                 parseInt(hoveringNode.meta.location.address, 10) !== 0 ? (_jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hexifyAddress(hoveringNode.meta.location.address) }, { children: _jsx("button", __assign({ className: "cursor-pointer text-left" }, { children: hexifyAddress(hoveringNode.meta.location.address) })) }))) : (_jsx("p", { children: "unknown" })) })) })) })), _jsx("table", __assign({ className: "table-fixed pr-0 text-gray-700 dark:text-gray-300 my-2 w-full" }, { children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Cumulative" })), _jsx("td", __assign({ className: "w-3/4" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: getTextForCumulative(hoveringNodeCumulative) }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: getTextForCumulative(hoveringNodeCumulative) })) })) }))] }), hoveringNode.diff !== undefined && diff !== 0 && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Diff" })), _jsx("td", __assign({ className: "w-3/4" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: diffText }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: diffText })) })) }))] })), _jsx(TooltipMetaInfo, { onCopy: onCopy, hoveringNode: hoveringNode, strings: strings, mappings: mappings, locations: locations, functions: functions, type: type })] }) }))] })) })), _jsx("span", __assign({ className: "block text-gray-500 text-xs mx-2" }, { children: isCopied ? 'Copied!' : 'Hold shift and click on a value to copy.' }))] })) })) })));
 };
 var GraphTooltip = function (_a) {
-    var x = _a.x, y = _a.y, unit = _a.unit, total = _a.total, hoveringNodeProp = _a.hoveringNode, contextElement = _a.contextElement, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, _c = _a.virtualContextElement, virtualContextElement = _c === void 0 ? true : _c, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions, _d = _a.type, type = _d === void 0 ? 'flamegraph' : _d;
+    var x = _a.x, y = _a.y, unit = _a.unit, total = _a.total, totalUnfiltered = _a.totalUnfiltered, hoveringNodeProp = _a.hoveringNode, contextElement = _a.contextElement, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, _c = _a.virtualContextElement, virtualContextElement = _c === void 0 ? true : _c, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions, _d = _a.type, type = _d === void 0 ? 'flamegraph' : _d;
     var hoveringNodeState = useAppSelector(selectHoveringNode);
     // @ts-expect-error
     var hoveringNode = useMemo(function () {
@@ -211,6 +214,6 @@ var GraphTooltip = function (_a) {
     }, [contextElement, popperProps, isShiftDown, x, y]);
     if (hoveringNode === undefined || hoveringNode == null)
         return _jsx(_Fragment, {});
-    return isFixed ? (_jsx(GraphTooltipContent, { hoveringNode: hoveringNode, unit: unit, total: total, isFixed: isFixed, type: type })) : (_jsx("div", __assign({ ref: setPopperElement, style: styles.popper }, attributes.popper, { children: _jsx(GraphTooltipContent, { hoveringNode: hoveringNode, unit: unit, total: total, isFixed: isFixed, strings: strings, mappings: mappings, locations: locations, functions: functions, type: type }) })));
+    return isFixed ? (_jsx(GraphTooltipContent, { hoveringNode: hoveringNode, unit: unit, total: total, totalUnfiltered: totalUnfiltered, isFixed: isFixed, type: type })) : (_jsx("div", __assign({ ref: setPopperElement, style: styles.popper }, attributes.popper, { children: _jsx(GraphTooltipContent, { hoveringNode: hoveringNode, unit: unit, total: total, totalUnfiltered: totalUnfiltered, isFixed: isFixed, strings: strings, mappings: mappings, locations: locations, functions: functions, type: type }) })));
 };
 export default GraphTooltip;

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

@@ -3,6 +3,8 @@ import { Flamegraph } from '@parca/client';
 import { type NavigateFunction } from '@parca/utilities';
 interface IcicleGraphProps {
     graph: Flamegraph;
+    total: number;
+    filtered: number;
     sampleUnit: string;
     width?: number;
     curPath: string[];

package/dist/ProfileIcicleGraph/IcicleGraph/index.js

@@ -32,7 +32,7 @@ import { IcicleNode, RowHeight } from './IcicleGraphNodes';
 import useColoredGraph from './useColoredGraph';
 export var IcicleGraph = memo(function IcicleGraph(_a) {
     var _b;
-    var graph = _a.graph, width = _a.width, setCurPath = _a.setCurPath, curPath = _a.curPath, sampleUnit = _a.sampleUnit, navigateTo = _a.navigateTo;
+    var graph = _a.graph, total = _a.total, filtered = _a.filtered, width = _a.width, setCurPath = _a.setCurPath, curPath = _a.curPath, sampleUnit = _a.sampleUnit, navigateTo = _a.navigateTo;
     var dispatch = useAppDispatch();
     var _c = useState(0), height = _c[0], setHeight = _c[1];
     var svg = useRef(null);
@@ -45,16 +45,17 @@ export var IcicleGraph = memo(function IcicleGraph(_a) {
             setHeight(ref === null || ref === void 0 ? void 0 : ref.current.getBoundingClientRect().height);
         }
     }, [width, coloredGraph]);
-    var total = useMemo(function () { return parseFloat(coloredGraph.total); }, [coloredGraph.total]);
     var xScale = useMemo(function () {
         if (width === undefined) {
             return function () { return 0; };
         }
-        return scaleLinear().domain([0, total]).range([0, width]);
+        return scaleLinear()
+            .domain([0, Number(total)])
+            .range([0, width]);
     }, [total, width]);
     if (coloredGraph.root === undefined || width === undefined) {
         return _jsx(_Fragment, {});
     }
-    return (_jsxs("div", __assign({ onMouseLeave: function () { return dispatch(setHoveringNode(undefined)); } }, { children: [_jsx(ColorStackLegend, { navigateTo: navigateTo, compareMode: compareMode }), _jsx(GraphTooltip, { unit: sampleUnit, total: total, contextElement: svg.current, strings: coloredGraph.stringTable, mappings: coloredGraph.mapping, locations: coloredGraph.locations, functions: coloredGraph.function }), _jsx("svg", __assign({ className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg }, { children: _jsx("g", __assign({ ref: ref }, { children: _jsx("g", __assign({ 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", __assign({ onMouseLeave: function () { return dispatch(setHoveringNode(undefined)); } }, { children: [_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", __assign({ className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg }, { children: _jsx("g", __assign({ ref: ref }, { children: _jsx("g", __assign({ 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/index.d.ts

@@ -5,8 +5,8 @@ export type ResizeHandler = (width: number, height: number) => void;
 interface ProfileIcicleGraphProps {
     width?: number;
     graph: Flamegraph | undefined;
-    total: bigint;
-    filtered: bigint;
+    total: number;
+    filtered: number;
     sampleUnit: string;
     curPath: string[] | [];
     setNewCurPath: (path: string[]) => void;

package/dist/ProfileIcicleGraph/index.js

@@ -44,20 +44,20 @@ var ProfileIcicleGraph = function (_a) {
         if (graph === undefined) {
             return ['0', '0', false, '0', '0', false, '0', '0'];
         }
-        var trimmed = BigInt(graph.trimmed);
-        var rawTotal = total + filtered + trimmed;
+        var trimmed = parseInt(graph.trimmed);
+        var totalUnfiltered = total + filtered;
         // safeguard against division by zero
-        var rawTotalDivisor = rawTotal > 0 ? rawTotal : BigInt(1);
+        var totalUnfilteredDivisor = totalUnfiltered > 0 ? totalUnfiltered : 1;
         return [
             numberFormatter.format(total),
-            numberFormatter.format(rawTotal),
+            numberFormatter.format(totalUnfiltered),
             trimmed > 0,
             numberFormatter.format(trimmed),
-            numberFormatter.format((trimmed * BigInt(100)) / rawTotalDivisor),
+            numberFormatter.format((trimmed * 100) / totalUnfilteredDivisor),
             filtered > 0,
-            numberFormatter.format((total * BigInt(100)) / rawTotalDivisor),
+            numberFormatter.format((total * 100) / totalUnfilteredDivisor),
         ];
-    }, [filtered, graph, total]), totalFormatted = _c[0], rawFormatted = _c[1], isTrimmed = _c[2], trimmedFormatted = _c[3], trimmedPercentage = _c[4], isFiltered = _c[5], filteredPercentage = _c[6];
+    }, [graph, filtered, total]), totalFormatted = _c[0], totalUnfilteredFormatted = _c[1], isTrimmed = _c[2], trimmedFormatted = _c[3], trimmedPercentage = _c[4], isFiltered = _c[5], filteredPercentage = _c[6];
     useEffect(function () {
         if (setActionButtons === undefined) {
             return;
@@ -66,11 +66,11 @@ var ProfileIcicleGraph = function (_a) {
     }, [setNewCurPath, curPath, setActionButtons]);
     if (graph === undefined)
         return _jsx("div", { children: "no data..." });
-    if (total === BigInt(0) && !loading)
+    if (total === 0 && !loading)
         return _jsx(_Fragment, { children: "Profile has no samples" });
     if (isTrimmed) {
         console.info("Trimmed ".concat(trimmedFormatted, " (").concat(trimmedPercentage, "%) too small values."));
     }
-    return (_jsxs("div", __assign({ className: "relative" }, { children: [compareMode && _jsx(DiffLegend, {}), _jsx("div", __assign({ ref: ref }, { children: _jsx(IcicleGraph, { width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, graph: graph, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo }) })), _jsxs("p", __assign({ className: "my-2 text-xs" }, { children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", rawFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] }))] })));
+    return (_jsxs("div", __assign({ className: "relative" }, { children: [compareMode && _jsx(DiffLegend, {}), _jsx("div", __assign({ ref: ref }, { children: _jsx(IcicleGraph, { width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo }) })), _jsxs("p", __assign({ className: "my-2 text-xs" }, { children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] }))] })));
 };
 export default ProfileIcicleGraph;

package/dist/ProfileView/index.js

@@ -209,7 +209,7 @@ export var ProfileView = function (_a) {
                 return (flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.data) != null ? (_jsx(ConditionalWrapper, __assign({ condition: (perf === null || perf === void 0 ? void 0 : perf.onRender) != null, WrapperComponent: Profiler, wrapperProps: {
                         id: 'icicleGraph',
                         onRender: perf === null || perf === void 0 ? void 0 : perf.onRender,
-                    } }, { children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, total: (_b = flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.total) !== null && _b !== void 0 ? _b : BigInt(0), filtered: (_c = flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.filtered) !== null && _c !== void 0 ? _c : BigInt(0), sampleUnit: sampleUnit, onContainerResize: onFlamegraphContainerResize, navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons }) }))) : (_jsx(_Fragment, { children: " " }));
+                    } }, { children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, total: (_b = Number(flamegraphData.total)) !== null && _b !== void 0 ? _b : 0, filtered: (_c = Number(flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.filtered)) !== null && _c !== void 0 ? _c : 0, sampleUnit: sampleUnit, onContainerResize: onFlamegraphContainerResize, navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons }) }))) : (_jsx(_Fragment, { children: " " }));
             }
             case 'callgraph': {
                 return (callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data) !== undefined &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.145",
+  "version": "0.16.146",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.69",
@@ -47,5 +47,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "472dedb7be9a8b5eaee182d4fe42bf0ab2cb03d0"
+  "gitHead": "2f8627eddd61139ce8af75dc40cf5909397e05f0"
 }

package/src/Callgraph/index.tsx

@@ -149,6 +149,7 @@ const Callgraph = ({data, svgString, sampleUnit, width}: Props): JSX.Element =>
             type="callgraph"
             unit={sampleUnit}
             total={parseInt(data.cumulative)}
+            totalUnfiltered={parseInt(data.cumulative)}
             contextElement={containerRef.current}
           />
         )}

package/src/GraphTooltip/index.tsx

@@ -55,6 +55,7 @@ interface GraphTooltipProps {
   y?: number;
   unit: string;
   total: number;
+  totalUnfiltered: number;
   hoveringNode?: HoveringNode;
   contextElement: Element | null;
   isFixed?: boolean;
@@ -244,6 +245,7 @@ export const GraphTooltipContent = ({
   hoveringNode,
   unit,
   total,
+  totalUnfiltered,
   isFixed,
   strings,
   mappings,
@@ -254,6 +256,7 @@ export const GraphTooltipContent = ({
   hoveringNode: HoveringNode;
   unit: string;
   total: number;
+  totalUnfiltered: number;
   isFixed: boolean;
   strings?: string[];
   mappings?: Mapping[];
@@ -282,8 +285,12 @@ export const GraphTooltipContent = ({
   const diffText = `${diffValueText} (${diffPercentageText})`;
 
   const getTextForCumulative = (hoveringNodeCumulative: number): string => {
-    return `${valueFormatter(hoveringNodeCumulative, unit, 2)} (
-      ${((hoveringNodeCumulative * 100) / total).toFixed(2)}%)`;
+    const filtered =
+      totalUnfiltered > total
+        ? ` / ${((hoveringNodeCumulative * 100) / total).toFixed(2)}% of filtered`
+        : '';
+    return `${valueFormatter(hoveringNodeCumulative, unit, 2)}
+    (${((hoveringNodeCumulative * 100) / totalUnfiltered).toFixed(2)}%${filtered})`;
   };
 
   return (
@@ -377,6 +384,7 @@ const GraphTooltip = ({
   y,
   unit,
   total,
+  totalUnfiltered,
   hoveringNode: hoveringNodeProp,
   contextElement,
   isFixed = false,
@@ -468,6 +476,7 @@ const GraphTooltip = ({
       hoveringNode={hoveringNode}
       unit={unit}
       total={total}
+      totalUnfiltered={totalUnfiltered}
       isFixed={isFixed}
       type={type}
     />
@@ -477,6 +486,7 @@ const GraphTooltip = ({
         hoveringNode={hoveringNode}
         unit={unit}
         total={total}
+        totalUnfiltered={totalUnfiltered}
         isFixed={isFixed}
         strings={strings}
         mappings={mappings}

package/src/ProfileIcicleGraph/IcicleGraph/index.tsx

@@ -26,6 +26,8 @@ import useColoredGraph from './useColoredGraph';
 
 interface IcicleGraphProps {
   graph: Flamegraph;
+  total: number;
+  filtered: number;
   sampleUnit: string;
   width?: number;
   curPath: string[];
@@ -35,6 +37,8 @@ interface IcicleGraphProps {
 
 export const IcicleGraph = memo(function IcicleGraph({
   graph,
+  total,
+  filtered,
   width,
   setCurPath,
   curPath,
@@ -57,12 +61,13 @@ export const IcicleGraph = memo(function IcicleGraph({
     }
   }, [width, coloredGraph]);
 
-  const total = useMemo(() => parseFloat(coloredGraph.total), [coloredGraph.total]);
   const xScale = useMemo(() => {
     if (width === undefined) {
       return () => 0;
     }
-    return scaleLinear().domain([0, total]).range([0, width]);
+    return scaleLinear()
+      .domain([0, Number(total)])
+      .range([0, width]);
   }, [total, width]);
 
   if (coloredGraph.root === undefined || width === undefined) {
@@ -75,6 +80,7 @@ export const IcicleGraph = memo(function IcicleGraph({
       <GraphTooltip
         unit={sampleUnit}
         total={total}
+        totalUnfiltered={total + filtered}
         contextElement={svg.current}
         strings={coloredGraph.stringTable}
         mappings={coloredGraph.mapping}

package/src/ProfileIcicleGraph/index.tsx

@@ -28,8 +28,8 @@ export type ResizeHandler = (width: number, height: number) => void;
 interface ProfileIcicleGraphProps {
   width?: number;
   graph: Flamegraph | undefined;
-  total: bigint;
-  filtered: bigint;
+  total: number;
+  filtered: number;
   sampleUnit: string;
   curPath: string[] | [];
   setNewCurPath: (path: string[]) => void;
@@ -64,7 +64,7 @@ const ProfileIcicleGraph = ({
 
   const [
     totalFormatted,
-    rawFormatted,
+    totalUnfilteredFormatted,
     isTrimmed,
     trimmedFormatted,
     trimmedPercentage,
@@ -75,23 +75,22 @@ const ProfileIcicleGraph = ({
       return ['0', '0', false, '0', '0', false, '0', '0'];
     }
 
-    const trimmed = BigInt(graph.trimmed);
-
-    const rawTotal = total + filtered + trimmed;
+    const trimmed = parseInt(graph.trimmed);
 
+    const totalUnfiltered = total + filtered;
     // safeguard against division by zero
-    const rawTotalDivisor = rawTotal > 0 ? rawTotal : BigInt(1);
+    const totalUnfilteredDivisor = totalUnfiltered > 0 ? totalUnfiltered : 1;
 
     return [
       numberFormatter.format(total),
-      numberFormatter.format(rawTotal),
+      numberFormatter.format(totalUnfiltered),
       trimmed > 0,
       numberFormatter.format(trimmed),
-      numberFormatter.format((trimmed * BigInt(100)) / rawTotalDivisor),
+      numberFormatter.format((trimmed * 100) / totalUnfilteredDivisor),
       filtered > 0,
-      numberFormatter.format((total * BigInt(100)) / rawTotalDivisor),
+      numberFormatter.format((total * 100) / totalUnfilteredDivisor),
     ];
-  }, [filtered, graph, total]);
+  }, [graph, filtered, total]);
 
   useEffect(() => {
     if (setActionButtons === undefined) {
@@ -114,7 +113,7 @@ const ProfileIcicleGraph = ({
 
   if (graph === undefined) return <div>no data...</div>;
 
-  if (total === BigInt(0) && !loading) return <>Profile has no samples</>;
+  if (total === 0 && !loading) return <>Profile has no samples</>;
 
   if (isTrimmed) {
     console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
@@ -127,6 +126,8 @@ const ProfileIcicleGraph = ({
         <IcicleGraph
           width={dimensions?.width}
           graph={graph}
+          total={total}
+          filtered={filtered}
           curPath={curPath}
           setCurPath={setNewCurPath}
           sampleUnit={sampleUnit}
@@ -137,7 +138,7 @@ const ProfileIcicleGraph = ({
         Showing {totalFormatted}{' '}
         {isFiltered ? (
           <span>
-            ({filteredPercentage}%) filtered of {rawFormatted}{' '}
+            ({filteredPercentage}%) filtered of {totalUnfilteredFormatted}{' '}
           </span>
         ) : (
           <></>

package/src/ProfileView/index.tsx

@@ -235,8 +235,8 @@ export const ProfileView = ({
               curPath={curPath}
               setNewCurPath={setNewCurPath}
               graph={flamegraphData.data}
-              total={flamegraphData?.total ?? BigInt(0)}
-              filtered={flamegraphData?.filtered ?? BigInt(0)}
+              total={Number(flamegraphData.total) ?? 0}
+              filtered={Number(flamegraphData?.filtered) ?? 0}
               sampleUnit={sampleUnit}
               onContainerResize={onFlamegraphContainerResize}
               navigateTo={navigateTo}