@parca/profile 0.16.184 → 0.16.185

package/dist/useQuery.js

@@ -10,68 +10,24 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 import { useGrpcMetadata } from '@parca/components';
 import useGrpcQuery from './useGrpcQuery';
-export var useQuery = function (client, profileSource, reportType, options) {
-    var _a = (options !== null && options !== void 0 ? options : {}).skip, skip = _a === void 0 ? false : _a;
-    var metadata = useGrpcMetadata();
-    var _b = useGrpcQuery({
-        key: ['query', profileSource, reportType, options === null || options === void 0 ? void 0 : options.nodeTrimThreshold],
-        queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
-            var req, response;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        req = profileSource.QueryRequest();
-                        req.reportType = reportType;
-                        req.nodeTrimThreshold = options === null || options === void 0 ? void 0 : options.nodeTrimThreshold;
-                        return [4 /*yield*/, client.query(req, { meta: metadata })];
-                    case 1:
-                        response = (_a.sent()).response;
-                        return [2 /*return*/, response];
-                }
-            });
-        }); },
+export const useQuery = (client, profileSource, reportType, options) => {
+    const { skip = false } = options ?? {};
+    const metadata = useGrpcMetadata();
+    const { data, isLoading, error } = useGrpcQuery({
+        key: ['query', profileSource, reportType, options?.nodeTrimThreshold],
+        queryFn: async () => {
+            const req = profileSource.QueryRequest();
+            req.reportType = reportType;
+            req.nodeTrimThreshold = options?.nodeTrimThreshold;
+            const { response } = await client.query(req, { meta: metadata });
+            return response;
+        },
         options: {
             enabled: !skip,
             staleTime: 1000 * 60 * 5, // 5 minutes
         },
-    }), data = _b.data, isLoading = _b.isLoading, error = _b.error;
-    return { isLoading: isLoading, error: error, response: data !== null && data !== void 0 ? data : null };
+    });
+    return { isLoading, error: error, response: data ?? null };
 };

package/dist/utils.d.ts

@@ -1,6 +1,6 @@
 import type { RpcMetadata } from '@protobuf-ts/runtime-rpc';
 import { QueryRequest, QueryServiceClient } from '@parca/client';
-export declare const hexifyAddress: (address?: string) => string;
+export declare const hexifyAddress: (address?: bigint) => string;
 export declare const downloadPprof: (request: QueryRequest, queryClient: QueryServiceClient, metadata: RpcMetadata) => Promise<Blob>;
 export declare const truncateString: (str: string, num: number) => string;
 export declare const truncateStringReverse: (str: string, num: number) => string;

package/dist/utils.js

@@ -10,84 +10,32 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 import { QueryRequest_ReportType } from '@parca/client';
-export var hexifyAddress = function (address) {
+export const hexifyAddress = (address) => {
     if (address == null) {
         return '';
     }
-    return "0x".concat(BigInt(address).toString(16));
+    return `0x${address.toString(16)}`;
+};
+export const downloadPprof = async (request, queryClient, metadata) => {
+    const req = {
+        ...request,
+        reportType: QueryRequest_ReportType.PPROF,
+    };
+    const { response } = await queryClient.query(req, { meta: metadata });
+    if (response.report.oneofKind !== 'pprof') {
+        throw new Error(`Expected pprof report, got: ${response.report.oneofKind !== undefined ? response.report.oneofKind : 'undefined'}`);
+    }
+    const blob = new Blob([response.report.pprof], { type: 'application/octet-stream' });
+    return blob;
 };
-export var downloadPprof = function (request, queryClient, metadata) { return __awaiter(void 0, void 0, void 0, function () {
-    var req, response, blob;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                req = __assign(__assign({}, request), { reportType: QueryRequest_ReportType.PPROF });
-                return [4 /*yield*/, queryClient.query(req, { meta: metadata })];
-            case 1:
-                response = (_a.sent()).response;
-                if (response.report.oneofKind !== 'pprof') {
-                    throw new Error("Expected pprof report, got: ".concat(response.report.oneofKind !== undefined ? response.report.oneofKind : 'undefined'));
-                }
-                blob = new Blob([response.report.pprof], { type: 'application/octet-stream' });
-                return [2 /*return*/, blob];
-        }
-    });
-}); };
-export var truncateString = function (str, num) {
+export const truncateString = (str, num) => {
     if (str.length <= num) {
         return str;
     }
     return str.slice(0, num) + '...';
 };
-export var truncateStringReverse = function (str, num) {
+export const truncateStringReverse = (str, num) => {
     if (str.length <= num) {
         return str;
     }

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.184",
+  "version": "0.16.185",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.16.73",
-    "@parca/components": "^0.16.145",
+    "@parca/client": "^0.16.74",
+    "@parca/components": "^0.16.146",
     "@parca/dynamicsize": "^0.16.54",
     "@parca/hooks": "^0.0.2",
     "@parca/parser": "^0.16.55",
-    "@parca/store": "^0.16.77",
-    "@parca/utilities": "^0.0.7",
+    "@parca/store": "^0.16.78",
+    "@parca/utilities": "^0.0.8",
     "@tanstack/react-query": "^4.0.5",
     "@types/react-beautiful-dnd": "^13.1.3",
     "d3": "7.8.5",
@@ -46,5 +46,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "850348dc0238c127c875f12ac53b48856ee3c5a2"
+  "gitHead": "e1dc36ad29a6efe06f45460bb721325df9416a6b"
 }

package/src/Callgraph/index.tsx

@@ -64,7 +64,7 @@ const Callgraph = ({data, svgString, sampleUnit, width}: Props): JSX.Element =>
   const maxColor: string = getNewSpanColor(isDarkMode);
   const minColor: string = d3.scaleLinear([isDarkMode ? 'black' : 'white', maxColor])(0.3);
   const colorRange: [string, string] = [minColor, maxColor];
-  const cumulatives = data.edges.map((edge: CallgraphEdge) => parseInt(edge.cumulative));
+  const cumulatives = data.edges.map((edge: CallgraphEdge) => edge.cumulative.toString());
   const cumulativesRange = d3.extent(cumulatives);
   const colorScale = d3
     .scaleSequentialLog(d3.interpolateBlues)
@@ -147,8 +147,8 @@ const Callgraph = ({data, svgString, sampleUnit, width}: Props): JSX.Element =>
           <GraphTooltip
             type="callgraph"
             unit={sampleUnit}
-            total={parseInt(data.cumulative)}
-            totalUnfiltered={parseInt(data.cumulative)}
+            total={data.cumulative}
+            totalUnfiltered={data.cumulative}
             contextElement={containerRef.current}
           />
         )}

package/src/Callgraph/utils.ts

@@ -117,7 +117,7 @@ export const jsonToDot = ({
 
   const edgesAsStrings = edges.map((edge: CallgraphEdge) => {
     const dataAttributes = {
-      cumulative: edge.cumulative,
+      cumulative: Number(edge.cumulative),
       color: withAlphaHex(colorRange[1], colorOpacityScale(Number(edge.cumulative))),
       className: 'edge',
       // boxHeight: DEFAULT_NODE_HEIGHT,

package/src/GraphTooltip/index.tsx

@@ -31,7 +31,7 @@ import {
 } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 import {useKeyDown} from '@parca/components';
 import {selectHoveringNode, useAppSelector} from '@parca/store';
-import {getLastItem, valueFormatter} from '@parca/utilities';
+import {divide, getLastItem, valueFormatter} from '@parca/utilities';
 
 import {hexifyAddress, truncateString, truncateStringReverse} from '../';
 import {ExpandOnHover} from './ExpandOnHoverValue';
@@ -46,7 +46,7 @@ interface ExtendedCallgraphNodeMeta extends CallgraphNodeMeta {
 }
 
 interface HoveringNode extends FlamegraphRootNode, FlamegraphNode, CallgraphNode {
-  diff: string;
+  diff: bigint;
   meta?: FlamegraphNodeMeta | ExtendedCallgraphNodeMeta;
 }
 
@@ -54,8 +54,8 @@ interface GraphTooltipProps {
   x?: number;
   y?: number;
   unit: string;
-  total: number;
-  totalUnfiltered: number;
+  total: bigint;
+  totalUnfiltered: bigint;
   hoveringNode?: HoveringNode;
   contextElement: Element | null;
   isFixed?: boolean;
@@ -158,11 +158,11 @@ const TooltipMetaInfo = ({
     if (hoveringNode.meta?.function == null) return '<unknown>';
 
     return `${hoveringNode.meta.function.filename} ${
-      hoveringNode.meta.line?.line !== undefined && hoveringNode.meta.line?.line !== '0'
+      hoveringNode.meta.line?.line !== undefined && hoveringNode.meta.line?.line !== 0n
         ? ` +${hoveringNode.meta.line.line.toString()}`
         : `${
             hoveringNode.meta.function?.startLine !== undefined &&
-            hoveringNode.meta.function?.startLine !== '0'
+            hoveringNode.meta.function?.startLine !== 0n
               ? ` +${hoveringNode.meta.function.startLine}`
               : ''
           }`
@@ -192,7 +192,7 @@ const TooltipMetaInfo = ({
         <td className="w-1/4">Address</td>
         <td className="w-3/4 break-all">
           {hoveringNode.meta?.location?.address == null ||
-          hoveringNode.meta?.location.address === '0' ? (
+          hoveringNode.meta?.location.address === 0n ? (
             <NoData />
           ) : (
             <CopyToClipboard
@@ -255,8 +255,8 @@ export const GraphTooltipContent = ({
 }: {
   hoveringNode: HoveringNode;
   unit: string;
-  total: number;
-  totalUnfiltered: number;
+  total: bigint;
+  totalUnfiltered: bigint;
   isFixed: boolean;
   strings?: string[];
   mappings?: Mapping[];
@@ -275,22 +275,22 @@ export const GraphTooltipContent = ({
     timeoutHandle = setTimeout(() => setIsCopied(false), 3000);
   };
 
-  const hoveringNodeCumulative = parseFloat(hoveringNode.cumulative);
-  const diff = hoveringNode.diff === undefined ? 0 : parseFloat(hoveringNode.diff);
+  const hoveringNodeCumulative = hoveringNode.cumulative;
+  const diff = hoveringNode.diff;
   const prevValue = hoveringNodeCumulative - diff;
-  const diffRatio = Math.abs(diff) > 0 ? diff / prevValue : 0;
+  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})`;
 
-  const getTextForCumulative = (hoveringNodeCumulative: number): string => {
+  const getTextForCumulative = (hoveringNodeCumulative: bigint): string => {
     const filtered =
       totalUnfiltered > total
-        ? ` / ${((hoveringNodeCumulative * 100) / total).toFixed(2)}% of filtered`
+        ? ` / ${divide(hoveringNodeCumulative * 100n, total).toFixed(2)}% of filtered`
         : '';
     return `${valueFormatter(hoveringNodeCumulative, unit, 2)}
-    (${((hoveringNodeCumulative * 100) / totalUnfiltered).toFixed(2)}%${filtered})`;
+    (${divide(hoveringNodeCumulative * 100n, totalUnfiltered).toFixed(2)}%${filtered})`;
   };
 
   return (
@@ -314,7 +314,7 @@ export const GraphTooltipContent = ({
                     ) : (
                       <>
                         {hoveringNode.meta.location !== undefined &&
-                        parseInt(hoveringNode.meta.location.address, 10) !== 0 ? (
+                        hoveringNode.meta.location.address !== 0n ? (
                           <CopyToClipboard
                             onCopy={onCopy}
                             text={hexifyAddress(hoveringNode.meta.location.address)}
@@ -347,7 +347,7 @@ export const GraphTooltipContent = ({
                       </CopyToClipboard>
                     </td>
                   </tr>
-                  {hoveringNode.diff !== undefined && diff !== 0 && (
+                  {hoveringNode.diff !== undefined && diff !== 0n && (
                     <tr>
                       <td className="w-1/4">Diff</td>
                       <td className="w-3/4">

package/src/MetricsGraph/index.tsx

@@ -139,8 +139,8 @@ export const RawMetricsGraph = ({
         metric,
         values: s.samples.reduce<number[][]>(function (agg: number[][], d: MetricsSample) {
           if (d.timestamp !== undefined && d.valuePerSecond !== undefined) {
-            const t = (+d.timestamp.seconds * 1e9 + d.timestamp.nanos) / 1e6; // https://github.com/microsoft/TypeScript/issues/5710#issuecomment-157886246
-            agg.push([t, d.valuePerSecond, parseFloat(d.value), parseFloat(d.duration)]);
+            const t = (Number(d.timestamp.seconds) * 1e9 + d.timestamp.nanos) / 1e6; // https://github.com/microsoft/TypeScript/issues/5710#issuecomment-157886246
+            agg.push([t, d.valuePerSecond, Number(d.value), Number(d.duration)]);
           }
           return agg;
         }, []),
@@ -474,7 +474,7 @@ export const RawMetricsGraph = ({
                 >
                   <line stroke="currentColor" x2={-6} />
                   <text fill="currentColor" x={-9} dy={'0.32em'}>
-                    {valueFormatter(d, sampleUnit, 1)}
+                    {valueFormatter(1000, sampleUnit, 1)}
                   </text>
                 </g>
               ))}

package/src/ProfileIcicleGraph/IcicleGraph/IcicleGraphNodes.tsx

@@ -14,7 +14,6 @@
 import React, {useMemo} from 'react';
 
 import cx from 'classnames';
-import {scaleLinear} from 'd3-scale';
 
 import {FlamegraphNode} from '@parca/client';
 import {
@@ -24,7 +23,7 @@ import {
 } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 import {useKeyDown} from '@parca/components';
 import {selectBinaries, setHoveringNode, useAppDispatch, useAppSelector} from '@parca/store';
-import {isSearchMatch} from '@parca/utilities';
+import {isSearchMatch, scaleLinear} from '@parca/utilities';
 
 import useNodeColor from './useNodeColor';
 import {nodeLabel} from './utils';
@@ -39,13 +38,13 @@ interface IcicleGraphNodesProps {
   functions: ParcaFunction[];
   x: number;
   y: number;
-  total: number;
+  total: bigint;
   totalWidth: number;
   level: number;
   curPath: string[];
   setCurPath: (path: string[]) => void;
   path: string[];
-  xScale: (value: number) => number;
+  xScale: (value: bigint) => number;
   searchString?: string;
   compareMode: boolean;
 }
@@ -82,7 +81,7 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({
   return (
     <g transform={`translate(${x}, ${y})`}>
       {nodes.map(function nodeMapper(d, i) {
-        const start = nodes.slice(0, i).reduce((sum, d) => sum + parseFloat(d.cumulative), 0);
+        const start = nodes.slice(0, i).reduce((sum, d) => sum + d.cumulative, 0n);
         const xStart = xScale(start);
 
         return (
@@ -125,9 +124,9 @@ interface IcicleNodeProps {
   locations: Location[];
   functions: ParcaFunction[];
   path: string[];
-  total: number;
+  total: bigint;
   setCurPath: (path: string[]) => void;
-  xScale: (value: number) => number;
+  xScale: (value: bigint) => number;
   isRoot?: boolean;
   searchString?: string;
   compareMode: boolean;
@@ -176,11 +175,11 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   const isFaded = curPath.length > 0 && name !== curPath[curPath.length - 1];
   const styles = isFaded ? fadedIcicleRectStyles : icicleRectStyles;
   const nextLevel = level + 1;
-  const cumulative = parseFloat(data.cumulative);
+  const cumulative = data.cumulative;
   const nextCurPath = curPath.length === 0 ? [] : curPath.slice(1);
   const newXScale =
     nextCurPath.length === 0 && curPath.length === 1
-      ? scaleLinear().domain([0, cumulative]).range([0, totalWidth])
+      ? scaleLinear([0n, cumulative], [0, totalWidth])
       : xScale;
 
   const width =
@@ -203,7 +202,7 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
     if (isShiftDown) return;
 
     // need to add id and flat for tooltip purposes
-    dispatch(setHoveringNode({...data, id: '', flat: ''}));
+    dispatch(setHoveringNode({...data, id: '', flat: 0n}));
   };
   const onMouseLeave = (): void => {
     if (isShiftDown) return;

package/src/ProfileIcicleGraph/IcicleGraph/index.tsx

@@ -13,11 +13,9 @@
 
 import {memo, useEffect, useMemo, useRef, useState} from 'react';
 
-import {scaleLinear} from 'd3-scale';
-
 import {Flamegraph} from '@parca/client';
 import {setHoveringNode, useAppDispatch} from '@parca/store';
-import {selectQueryParam, type NavigateFunction} from '@parca/utilities';
+import {scaleLinear, selectQueryParam, type NavigateFunction} from '@parca/utilities';
 
 import GraphTooltip from '../../GraphTooltip';
 import ColorStackLegend from './ColorStackLegend';
@@ -26,8 +24,8 @@ import useColoredGraph from './useColoredGraph';
 
 interface IcicleGraphProps {
   graph: Flamegraph;
-  total: number;
-  filtered: number;
+  total: bigint;
+  filtered: bigint;
   sampleUnit: string;
   width?: number;
   curPath: string[];
@@ -65,9 +63,7 @@ export const IcicleGraph = memo(function IcicleGraph({
     if (width === undefined) {
       return () => 0;
     }
-    return scaleLinear()
-      .domain([0, Number(total)])
-      .range([0, width]);
+    return scaleLinear([0n, total], [0, width]);
   }, [total, width]);
 
   if (coloredGraph.root === undefined || width === undefined) {

package/src/ProfileIcicleGraph/IcicleGraph/useNodeColor.ts

@@ -29,8 +29,8 @@ const useNodeColor = ({data, compareMode}: Props): string => {
 
   const color: string = useMemo(() => {
     if (compareMode) {
-      const diff = parseFloat(data.diff);
-      const cumulative = parseFloat(data.cumulative);
+      const diff = data.diff;
+      const cumulative = data.cumulative;
       return diffColor(diff, cumulative, isDarkMode);
     }
 

package/src/ProfileIcicleGraph/index.tsx

@@ -16,7 +16,7 @@ import {useEffect, useMemo} from 'react';
 import {Flamegraph} from '@parca/client';
 import {Button} from '@parca/components';
 import {useContainerDimensions} from '@parca/hooks';
-import {selectQueryParam, type NavigateFunction} from '@parca/utilities';
+import {divide, selectQueryParam, type NavigateFunction} from '@parca/utilities';
 
 import DiffLegend from '../components/DiffLegend';
 import {IcicleGraph} from './IcicleGraph';
@@ -28,8 +28,8 @@ export type ResizeHandler = (width: number, height: number) => void;
 interface ProfileIcicleGraphProps {
   width?: number;
   graph: Flamegraph | undefined;
-  total: number;
-  filtered: number;
+  total: bigint;
+  filtered: bigint;
   sampleUnit: string;
   curPath: string[] | [];
   setNewCurPath: (path: string[]) => void;
@@ -75,20 +75,20 @@ const ProfileIcicleGraph = ({
       return ['0', '0', false, '0', '0', false, '0', '0'];
     }
 
-    const trimmed = parseInt(graph.trimmed);
+    const trimmed = graph.trimmed;
 
     const totalUnfiltered = total + filtered;
     // safeguard against division by zero
-    const totalUnfilteredDivisor = totalUnfiltered > 0 ? totalUnfiltered : 1;
+    const totalUnfilteredDivisor = totalUnfiltered > 0 ? totalUnfiltered : 1n;
 
     return [
       numberFormatter.format(total),
       numberFormatter.format(totalUnfiltered),
       trimmed > 0,
       numberFormatter.format(trimmed),
-      numberFormatter.format((trimmed * 100) / totalUnfilteredDivisor),
+      numberFormatter.format(divide(trimmed * 100n, totalUnfilteredDivisor)),
       filtered > 0,
-      numberFormatter.format((total * 100) / totalUnfilteredDivisor),
+      numberFormatter.format(divide(total * 100n, totalUnfilteredDivisor)),
     ];
   }, [graph, filtered, total]);
 
@@ -112,7 +112,7 @@ const ProfileIcicleGraph = ({
 
   if (graph === undefined) return <div>no data...</div>;
 
-  if (total === 0 && !loading) return <>Profile has no samples</>;
+  if (total === 0n && !loading) return <>Profile has no samples</>;
 
   if (isTrimmed) {
     console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);

package/src/ProfileView/index.tsx

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

package/src/TopTable/index.tsx

@@ -100,7 +100,7 @@ export const TopTable = React.memo(function TopTable({
       }),
       columnHelper.accessor('flat', {
         header: () => 'Flat',
-        cell: info => valueFormatter(Number(info.getValue()), unit, 2),
+        cell: info => valueFormatter(info.getValue(), unit, 2),
         size: 150,
         meta: {
           align: 'right',
@@ -109,7 +109,7 @@ export const TopTable = React.memo(function TopTable({
       }),
       columnHelper.accessor('cumulative', {
         header: () => 'Cumulative',
-        cell: info => valueFormatter(Number(info.getValue()), unit, 2),
+        cell: info => valueFormatter(info.getValue(), unit, 2),
         size: 150,
         meta: {
           align: 'right',
@@ -121,7 +121,7 @@ export const TopTable = React.memo(function TopTable({
       cols.push(
         columnHelper.accessor('diff', {
           header: () => 'Diff',
-          cell: info => addPlusSign(valueFormatter(Number(info.getValue()), unit, 2)),
+          cell: info => addPlusSign(valueFormatter(info.getValue(), unit, 2)),
           size: 150,
           meta: {
             align: 'right',

package/src/utils.ts

@@ -15,11 +15,11 @@ import type {RpcMetadata} from '@protobuf-ts/runtime-rpc';
 
 import {QueryRequest, QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
 
-export const hexifyAddress = (address?: string): string => {
+export const hexifyAddress = (address?: bigint): string => {
   if (address == null) {
     return '';
   }
-  return `0x${BigInt(address).toString(16)}`;
+  return `0x${address.toString(16)}`;
 };
 
 export const downloadPprof = async (