@parca/profile 0.19.110 → 0.19.112

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.19.112](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.111...@parca/profile@0.19.112) (2026-01-15)
+
+**Note:** Version bump only for package @parca/profile
+
+## 0.19.111 (2026-01-15)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.19.110 (2026-01-13)
 
 **Note:** Version bump only for package @parca/profile

package/dist/SourceView/Highlighter.d.ts

@@ -1,5 +1,4 @@
 import { MouseEventHandler } from 'react';
-import { Vector } from 'apache-arrow';
 import { type createElementProps } from 'react-syntax-highlighter';
 interface RendererProps {
     rows: any[];
@@ -12,7 +11,11 @@ interface HighlighterProps {
     content: string;
     renderer?: Renderer;
 }
-export declare const profileAwareRenderer: (cumulative: Vector | null, flat: Vector | null, total: bigint, filtered: bigint, onContextMenu: MouseEventHandler<HTMLDivElement>) => Renderer;
+export type LineDataLookup = (lineNumber: number) => {
+    cumulative: bigint;
+    flat: bigint;
+} | undefined;
+export declare const profileAwareRenderer: (getLineData: LineDataLookup, total: bigint, filtered: bigint, onContextMenu: MouseEventHandler<HTMLDivElement>) => Renderer;
 export declare const Highlighter: ({ file, content, renderer }: HighlighterProps) => JSX.Element;
 export {};
 //# sourceMappingURL=Highlighter.d.ts.map

package/dist/SourceView/Highlighter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Highlighter.d.ts","sourceRoot":"","sources":["../../src/SourceView/Highlighter.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAGpC,OAAO,EAAC,KAAK,kBAAkB,EAAC,MAAM,0BAA0B,CAAC;AAcjE,UAAU,aAAa;IAErB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC7C,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;CACxD;AAED,KAAK,QAAQ,GAAG,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAC,EAAE,aAAa,KAAK,GAAG,CAAC,OAAO,CAAC;AAEpF,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAuED,eAAO,MAAM,oBAAoB,GAC/B,YAAY,MAAM,GAAG,IAAI,EACzB,MAAM,MAAM,GAAG,IAAI,EACnB,OAAO,MAAM,EACb,UAAU,MAAM,EAChB,eAAe,iBAAiB,CAAC,cAAc,CAAC,KAC/C,QAoEF,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,6BAA2B,gBAAgB,KAAG,GAAG,CAAC,OAyC7E,CAAC"}
+{"version":3,"file":"Highlighter.d.ts","sourceRoot":"","sources":["../../src/SourceView/Highlighter.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAC,KAAK,kBAAkB,EAAC,MAAM,0BAA0B,CAAC;AAcjE,UAAU,aAAa;IAErB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC7C,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;CACxD;AAED,KAAK,QAAQ,GAAG,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAC,EAAE,aAAa,KAAK,GAAG,CAAC,OAAO,CAAC;AAEpF,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAuED,MAAM,MAAM,cAAc,GAAG,CAAC,UAAU,EAAE,MAAM,KAAK;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,GAAG,SAAS,CAAC;AAEpG,eAAO,MAAM,oBAAoB,GAC/B,aAAa,cAAc,EAC3B,OAAO,MAAM,EACb,UAAU,MAAM,EAChB,eAAe,iBAAiB,CAAC,cAAc,CAAC,KAC/C,QAqEF,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,6BAA2B,gBAAgB,KAAG,GAAG,CAAC,OAyC7E,CAAC"}

package/dist/SourceView/Highlighter.js

@@ -51,13 +51,13 @@ const LineProfileMetadata = ({ value, total, filtered, }) => {
     }
     const unfilteredPercent = (Number(value) / Number(total + filtered)) * 100;
     const filteredPercent = (Number(value) / Number(total)) * 100;
-    const valueWithUnit = valueFormatter(value, profileSource?.ProfileType().sampleUnit ?? '', 1, true);
+    const valueWithUnit = valueFormatter(value, profileSource?.ProfileType().periodUnit ?? '', 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) => {
     return charsToWidthMap[chars];
 };
-export const profileAwareRenderer = (cumulative, flat, total, filtered, onContextMenu) => {
+export const profileAwareRenderer = (getLineData, total, filtered, onContextMenu) => {
     return function ProfileAwareRenderer({ rows, stylesheet, useInlineStyles, }) {
         const lineNumberWidth = charsToWidth(rows.length.toString().length);
         const { startLine, endLine, setLineRange } = useLineRange();
@@ -65,6 +65,7 @@ export const profileAwareRenderer = (cumulative, flat, total, filtered, onContex
                 const lineNumber = node.children[0].children[0].value;
                 const isCurrentLine = lineNumber >= startLine && lineNumber <= endLine;
                 node.children = node.children.slice(1);
+                const data = getLineData(lineNumber);
                 return (_jsxs("div", { className: "flex gap-1", children: [_jsx("div", { className: cx('shrink-0 overflow-hidden border-r border-r-gray-200 text-right dark:border-r-gray-700', lineNumberWidth), children: _jsx(LineNo, { value: lineNumber, isCurrent: isCurrentLine, selectLine: (isShiftDown = false) => {
                                     if (!isShiftDown) {
                                         setLineRange(lineNumber, lineNumber);
@@ -77,7 +78,7 @@ export const profileAwareRenderer = (cumulative, flat, total, filtered, onContex
                                             setLineRange(startLine, lineNumber);
                                         }
                                     }
-                                } }) }), _jsx(LineProfileMetadata, { value: cumulative?.get(i) ?? 0n, total: total, filtered: filtered }), _jsx(LineProfileMetadata, { value: flat?.get(i) ?? 0n, total: total, filtered: filtered }), _jsx("div", { className: cx('w-full flex-grow-0 border-l border-gray-200 pl-1 dark:border-gray-700', {
+                                } }) }), _jsx(LineProfileMetadata, { value: data?.cumulative ?? 0n, total: total, filtered: filtered }), _jsx(LineProfileMetadata, { value: data?.flat ?? 0n, total: total, filtered: filtered }), _jsx("div", { className: cx('w-full flex-grow-0 border-l border-gray-200 pl-1 dark:border-gray-700', {
                                 'bg-yellow-200 dark:bg-yellow-700': isCurrentLine,
                             }), onContextMenu: onContextMenu, children: createElement({
                                 key: `source-line-${i}`,

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SourceView/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAM7D,OAAO,EAAC,MAAM,EAAC,MAAM,eAAe,CAAC;AAQrC,UAAU,eAAe;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,eAAO,MAAM,UAAU,6CAsIrB,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SourceView/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAM7D,OAAO,EAAC,MAAM,EAAC,MAAM,eAAe,CAAC;AAQrC,UAAU,eAAe;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,eAAO,MAAM,UAAU,6CAqKrB,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/SourceView/index.js

@@ -35,50 +35,77 @@ export const SourceView = React.memo(function SourceView({ data, loading, total,
         id: MENU_ID,
     });
     const { startLine, endLine } = useLineRange();
-    const [cumulative, flat] = useMemo(() => {
+    const sourceTable = useMemo(() => {
         if (data === undefined) {
-            return [null, null];
+            return null;
         }
         const table = tableFromIPC(data.record);
-        const cumulative = table.getChild('cumulative');
-        const flat = table.getChild('flat');
-        return [cumulative, flat];
+        return {
+            numRows: table.numRows,
+            lineNumbers: table.getChild('line_number'),
+            cumulative: table.getChild('cumulative'),
+            flat: table.getChild('flat'),
+        };
     }, [data]);
-    const getProfileDataForLine = useCallback((line, newLine) => {
-        if (cumulative == null && flat == null) {
+    const getLineData = useCallback((lineNumber) => {
+        if (sourceTable === null || sourceTable.lineNumbers === null) {
+            return undefined;
+        }
+        const { numRows, lineNumbers, cumulative, flat } = sourceTable;
+        let lo = 0;
+        let hi = numRows - 1;
+        while (lo <= hi) {
+            const mid = (lo + hi) >>> 1;
+            const midVal = Number(lineNumbers.get(mid));
+            if (midVal === lineNumber) {
+                return {
+                    cumulative: cumulative?.get(mid) ?? 0n,
+                    flat: flat?.get(mid) ?? 0n,
+                };
+            }
+            if (midVal < lineNumber) {
+                lo = mid + 1;
+            }
+            else {
+                hi = mid - 1;
+            }
+        }
+        return undefined;
+    }, [sourceTable]);
+    const getProfileDataForLine = useCallback((line) => {
+        const data = getLineData(line);
+        if (data === undefined) {
             return undefined;
         }
-        if (cumulative?.get(line - 1) === 0n && flat?.get(line - 1) === 0n) {
+        if (data.cumulative === 0n && data.flat === 0n) {
             return undefined;
         }
         return {
-            line: newLine,
-            cumulative: Number(cumulative?.get(line - 1) ?? 0),
-            flat: Number(flat?.get(line - 1) ?? 0),
+            line,
+            cumulative: Number(data.cumulative),
+            flat: Number(data.flat),
         };
-    }, [cumulative, flat]);
+    }, [getLineData]);
     const [selectedCode, profileData] = useMemo(() => {
         if (startLine === -1 && endLine === -1) {
             return ['', []];
         }
         if (startLine === endLine) {
             const profileData = [];
-            const profileDataForLine = getProfileDataForLine(startLine, 1);
+            const profileDataForLine = getProfileDataForLine(startLine);
             if (profileDataForLine != null) {
                 profileData.push(profileDataForLine);
             }
             return [sourceCode[startLine - 1], profileData];
         }
         let code = '';
-        let line = 1;
         const profileData = [];
         for (let i = startLine; i <= endLine; i++) {
             code += sourceCode[i] + '\n';
-            const profileDataForLine = getProfileDataForLine(i, line);
+            const profileDataForLine = getProfileDataForLine(i);
             if (profileDataForLine != null) {
                 profileData.push(profileDataForLine);
             }
-            line++;
         }
         return [code, profileData];
     }, [startLine, endLine, sourceCode, getProfileDataForLine]);
@@ -97,6 +124,6 @@ export const SourceView = React.memo(function SourceView({ data, loading, total,
             event,
         });
     };
-    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "h-full w-full", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: [_jsx(Highlighter, { file: sourceFileName, content: data.source, renderer: profileAwareRenderer(cumulative, flat, total, filtered, onContextMenu) }), sourceViewContextMenuItems.length > 0 ? (_jsx(Menu, { id: MENU_ID, children: sourceViewContextMenuItems.map(item => (_jsx(Item, { onClick: () => item.action(selectedCode, profileData), children: item.label }, item.id))) })) : null] }, "source-view-loaded") }));
+    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "h-full w-full", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: [_jsx(Highlighter, { file: sourceFileName, content: data.source, renderer: profileAwareRenderer(getLineData, total, filtered, onContextMenu) }), sourceViewContextMenuItems.length > 0 ? (_jsx(Menu, { id: MENU_ID, children: sourceViewContextMenuItems.map(item => (_jsx(Item, { onClick: () => item.action(selectedCode, profileData), children: item.label }, item.id))) })) : null] }, "source-view-loaded") }));
 });
 export default SourceView;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.110",
+  "version": "0.19.112",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
@@ -84,5 +84,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "809ca4e33fbd03c1947e892e5ec3e0b232974f72"
+  "gitHead": "250c30a141481e91a3d81968d644705dae028ad5"
 }

package/src/SourceView/Highlighter.tsx

@@ -13,7 +13,6 @@
 
 import {MouseEventHandler, useId, useMemo} from 'react';
 
-import {Vector} from 'apache-arrow';
 import cx from 'classnames';
 import {scaleLinear} from 'd3-scale';
 import {type createElementProps} from 'react-syntax-highlighter';
@@ -85,7 +84,7 @@ const LineProfileMetadata = ({
 
   const valueWithUnit = valueFormatter(
     value,
-    profileSource?.ProfileType().sampleUnit ?? '',
+    profileSource?.ProfileType().periodUnit ?? '',
     1,
     true
   );
@@ -114,9 +113,10 @@ const charsToWidth = (chars: number): string => {
   return charsToWidthMap[chars];
 };
 
+export type LineDataLookup = (lineNumber: number) => {cumulative: bigint; flat: bigint} | undefined;
+
 export const profileAwareRenderer = (
-  cumulative: Vector | null,
-  flat: Vector | null,
+  getLineData: LineDataLookup,
   total: bigint,
   filtered: bigint,
   onContextMenu: MouseEventHandler<HTMLDivElement>
@@ -135,6 +135,7 @@ export const profileAwareRenderer = (
           const lineNumber: number = node.children[0].children[0].value as number;
           const isCurrentLine = lineNumber >= startLine && lineNumber <= endLine;
           node.children = node.children.slice(1);
+          const data = getLineData(lineNumber);
           return (
             <div className="flex gap-1" key={`${i}`}>
               <div
@@ -161,11 +162,11 @@ export const profileAwareRenderer = (
                 />
               </div>
               <LineProfileMetadata
-                value={cumulative?.get(i) ?? 0n}
+                value={data?.cumulative ?? 0n}
                 total={total}
                 filtered={filtered}
               />
-              <LineProfileMetadata value={flat?.get(i) ?? 0n} total={total} filtered={filtered} />
+              <LineProfileMetadata value={data?.flat ?? 0n} total={total} filtered={filtered} />
               <div
                 className={cx(
                   'w-full flex-grow-0 border-l border-gray-200 pl-1 dark:border-gray-700',

package/src/SourceView/index.tsx

@@ -22,7 +22,7 @@ import {SourceSkeleton, useParcaContext, useURLState, type ProfileData} from '@p
 
 import {ExpandOnHover} from '../GraphTooltipArrow/ExpandOnHoverValue';
 import {truncateStringReverse} from '../utils';
-import {Highlighter, profileAwareRenderer} from './Highlighter';
+import {Highlighter, profileAwareRenderer, type LineDataLookup} from './Highlighter';
 import useLineRange from './useSelectedLineRange';
 
 interface SourceViewProps {
@@ -59,31 +59,64 @@ export const SourceView = React.memo(function SourceView({
 
   const {startLine, endLine} = useLineRange();
 
-  const [cumulative, flat] = useMemo(() => {
+  const sourceTable = useMemo(() => {
     if (data === undefined) {
-      return [null, null];
+      return null;
     }
     const table = tableFromIPC(data.record);
-    const cumulative = table.getChild('cumulative');
-    const flat = table.getChild('flat');
-    return [cumulative, flat];
+    return {
+      numRows: table.numRows,
+      lineNumbers: table.getChild('line_number'),
+      cumulative: table.getChild('cumulative'),
+      flat: table.getChild('flat'),
+    };
   }, [data]);
 
+  const getLineData: LineDataLookup = useCallback(
+    (lineNumber: number) => {
+      if (sourceTable === null || sourceTable.lineNumbers === null) {
+        return undefined;
+      }
+      const {numRows, lineNumbers, cumulative, flat} = sourceTable;
+
+      let lo = 0;
+      let hi = numRows - 1;
+      while (lo <= hi) {
+        const mid = (lo + hi) >>> 1;
+        const midVal = Number(lineNumbers.get(mid));
+        if (midVal === lineNumber) {
+          return {
+            cumulative: (cumulative?.get(mid) as bigint) ?? 0n,
+            flat: (flat?.get(mid) as bigint) ?? 0n,
+          };
+        }
+        if (midVal < lineNumber) {
+          lo = mid + 1;
+        } else {
+          hi = mid - 1;
+        }
+      }
+      return undefined;
+    },
+    [sourceTable]
+  );
+
   const getProfileDataForLine = useCallback(
-    (line: number, newLine: number): ProfileData | undefined => {
-      if (cumulative == null && flat == null) {
+    (line: number): ProfileData | undefined => {
+      const data = getLineData(line);
+      if (data === undefined) {
         return undefined;
       }
-      if (cumulative?.get(line - 1) === 0n && flat?.get(line - 1) === 0n) {
+      if (data.cumulative === 0n && data.flat === 0n) {
         return undefined;
       }
       return {
-        line: newLine,
-        cumulative: Number(cumulative?.get(line - 1) ?? 0),
-        flat: Number(flat?.get(line - 1) ?? 0),
+        line,
+        cumulative: Number(data.cumulative),
+        flat: Number(data.flat),
       };
     },
-    [cumulative, flat]
+    [getLineData]
   );
 
   const [selectedCode, profileData] = useMemo(() => {
@@ -92,7 +125,7 @@ export const SourceView = React.memo(function SourceView({
     }
     if (startLine === endLine) {
       const profileData: ProfileData[] = [];
-      const profileDataForLine = getProfileDataForLine(startLine, 1);
+      const profileDataForLine = getProfileDataForLine(startLine);
       if (profileDataForLine != null) {
         profileData.push(profileDataForLine);
       }
@@ -100,15 +133,13 @@ export const SourceView = React.memo(function SourceView({
       return [sourceCode[startLine - 1], profileData];
     }
     let code = '';
-    let line = 1;
     const profileData: ProfileData[] = [];
     for (let i = startLine; i <= endLine; i++) {
       code += sourceCode[i] + '\n';
-      const profileDataForLine = getProfileDataForLine(i, line);
+      const profileDataForLine = getProfileDataForLine(i);
       if (profileDataForLine != null) {
         profileData.push(profileDataForLine);
       }
-      line++;
     }
     return [code, profileData];
   }, [startLine, endLine, sourceCode, getProfileDataForLine]);
@@ -155,7 +186,7 @@ export const SourceView = React.memo(function SourceView({
         <Highlighter
           file={sourceFileName as string}
           content={data.source}
-          renderer={profileAwareRenderer(cumulative, flat, total, filtered, onContextMenu)}
+          renderer={profileAwareRenderer(getLineData, total, filtered, onContextMenu)}
         />
         {sourceViewContextMenuItems.length > 0 ? (
           <Menu id={MENU_ID}>