@parca/profile 0.16.349 → 0.16.350

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.16.350 (2024-02-28)
+
+# 0.21.0 (2024-02-27)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.349](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.348...@parca/profile@0.16.349) (2024-02-27)
 
 **Note:** Version bump only for package @parca/profile

package/dist/SourceView/index.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // 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.
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { tableFromIPC } from 'apache-arrow';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Item, Menu, useContextMenu } from 'react-contexify';
@@ -28,25 +28,60 @@ export const SourceView = React.memo(function SourceView({ data, loading, total,
         if (data === undefined) {
             return [''];
         }
-        return data.source.split('\n');
+        // To use the array index as line number
+        return ['', ...data.source.split('\n')];
     }, [data]);
     const { show } = useContextMenu({
         id: MENU_ID,
     });
     const { startLine, endLine } = useLineRange();
-    const selectedCode = useMemo(() => {
+    const [cumulative, flat] = useMemo(() => {
+        if (data === undefined) {
+            return [null, null];
+        }
+        const table = tableFromIPC(data.record);
+        const cumulative = table.getChild('cumulative');
+        const flat = table.getChild('flat');
+        return [cumulative, flat];
+    }, [data]);
+    const getProfileDataForLine = useCallback((line, newLine) => {
+        if (cumulative == null && flat == null) {
+            return undefined;
+        }
+        if (cumulative?.get(line - 1) === 0n && flat?.get(line - 1) === 0n) {
+            return undefined;
+        }
+        return {
+            line: newLine,
+            cumulative: Number(cumulative?.get(line - 1) ?? 0),
+            flat: Number(flat?.get(line - 1) ?? 0),
+        };
+    }, [cumulative, flat]);
+    const [selectedCode, profileData] = useMemo(() => {
         if (startLine === -1 && endLine === -1) {
-            return '';
+            return ['', []];
         }
         if (startLine === endLine) {
-            return sourceCode[startLine - 1];
+            const profileData = [];
+            const profileDataForLine = getProfileDataForLine(startLine, 1);
+            if (profileDataForLine != null) {
+                profileData.push(profileDataForLine);
+            }
+            return [sourceCode[startLine - 1], profileData];
         }
         let code = '';
-        for (let i = startLine - 1; i < endLine; i++) {
+        let line = 1;
+        const profileData = [];
+        for (let i = startLine; i <= endLine; i++) {
             code += sourceCode[i] + '\n';
+            const profileDataForLine = getProfileDataForLine(i, line);
+            if (profileDataForLine != null) {
+                profileData.push(profileDataForLine);
+            }
+            line++;
         }
-        return code;
-    }, [startLine, endLine, sourceCode]);
+        return [code, profileData];
+    }, [startLine, endLine, sourceCode, getProfileDataForLine]);
     useEffect(() => {
         setActionButtons?.(_jsx("div", { className: "px-2", children: _jsx(ExpandOnHover, { value: sourceFileName, displayValue: truncateStringReverse(sourceFileName, 50) }) }));
     }, [sourceFileName, setActionButtons]);
@@ -62,9 +97,6 @@ export const SourceView = React.memo(function SourceView({ data, loading, total,
             event,
         });
     };
-    const table = tableFromIPC(data.record);
-    const cumulative = table.getChild('cumulative');
-    const flat = table.getChild('flat');
-    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), 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(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") }));
 });
 export default SourceView;

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from './ProfileView';
 export * from './ProfileViewWithData';
 export * from './utils';
 export * from './ProfileTypeSelector';
+export * from './SourceView';
 export { default as Callgraph } from './Callgraph';
 export type { CallgraphProps };
 export { ProfileExplorer, ProfileTypeSelector };

package/dist/index.js

@@ -19,5 +19,6 @@ export * from './ProfileView';
 export * from './ProfileViewWithData';
 export * from './utils';
 export * from './ProfileTypeSelector';
+export * from './SourceView';
 export { default as Callgraph } from './Callgraph';
 export { ProfileExplorer, ProfileTypeSelector };

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.349",
+  "version": "0.16.350",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.16.105",
-    "@parca/components": "^0.16.257",
-    "@parca/dynamicsize": "^0.16.60",
-    "@parca/hooks": "^0.0.43",
-    "@parca/parser": "^0.16.68",
-    "@parca/store": "^0.16.131",
-    "@parca/utilities": "^0.0.59",
+    "@parca/client": "^0.16.106",
+    "@parca/components": "^0.16.258",
+    "@parca/dynamicsize": "^0.16.61",
+    "@parca/hooks": "^0.0.44",
+    "@parca/parser": "^0.16.69",
+    "@parca/store": "^0.16.132",
+    "@parca/utilities": "^0.0.60",
     "@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": "b672a3fdb3331c6111ebc303d65a286af2074f97"
+  "gitHead": "4ca1395ad920b41cf74465ab5679796f98a6f930"
 }

package/src/SourceView/index.tsx

@@ -11,14 +11,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useEffect, useMemo} from 'react';
+import React, {useCallback, useEffect, useMemo} from 'react';
 
 import {tableFromIPC} from 'apache-arrow';
 import {AnimatePresence, motion} from 'framer-motion';
 import {Item, Menu, useContextMenu} from 'react-contexify';
 
 import {Source} from '@parca/client';
-import {SourceSkeleton, useParcaContext, useURLState} from '@parca/components';
+import {SourceSkeleton, useParcaContext, useURLState, type ProfileData} from '@parca/components';
 
 import {ExpandOnHover} from '../GraphTooltipArrow/ExpandOnHoverValue';
 import {truncateStringReverse} from '../utils';
@@ -49,7 +49,8 @@ export const SourceView = React.memo(function SourceView({
     if (data === undefined) {
       return [''];
     }
-    return data.source.split('\n');
+    // To use the array index as line number
+    return ['', ...data.source.split('\n')];
   }, [data]);
 
   const {show} = useContextMenu({
@@ -58,19 +59,59 @@ export const SourceView = React.memo(function SourceView({
 
   const {startLine, endLine} = useLineRange();
 
-  const selectedCode = useMemo(() => {
+  const [cumulative, flat] = useMemo(() => {
+    if (data === undefined) {
+      return [null, null];
+    }
+    const table = tableFromIPC(data.record);
+    const cumulative = table.getChild('cumulative');
+    const flat = table.getChild('flat');
+    return [cumulative, flat];
+  }, [data]);
+
+  const getProfileDataForLine = useCallback(
+    (line: number, newLine: number): ProfileData | undefined => {
+      if (cumulative == null && flat == null) {
+        return undefined;
+      }
+      if (cumulative?.get(line - 1) === 0n && flat?.get(line - 1) === 0n) {
+        return undefined;
+      }
+      return {
+        line: newLine,
+        cumulative: Number(cumulative?.get(line - 1) ?? 0),
+        flat: Number(flat?.get(line - 1) ?? 0),
+      };
+    },
+    [cumulative, flat]
+  );
+
+  const [selectedCode, profileData] = useMemo(() => {
     if (startLine === -1 && endLine === -1) {
-      return '';
+      return ['', []];
     }
     if (startLine === endLine) {
-      return sourceCode[startLine - 1];
+      const profileData: ProfileData[] = [];
+      const profileDataForLine = getProfileDataForLine(startLine, 1);
+      if (profileDataForLine != null) {
+        profileData.push(profileDataForLine);
+      }
+
+      return [sourceCode[startLine - 1], profileData];
     }
     let code = '';
-    for (let i = startLine - 1; i < endLine; i++) {
+    let line = 1;
+    const profileData: ProfileData[] = [];
+    for (let i = startLine; i <= endLine; i++) {
       code += sourceCode[i] + '\n';
+      const profileDataForLine = getProfileDataForLine(i, line);
+      if (profileDataForLine != null) {
+        profileData.push(profileDataForLine);
+      }
+      line++;
     }
-    return code;
-  }, [startLine, endLine, sourceCode]);
+    return [code, profileData];
+  }, [startLine, endLine, sourceCode, getProfileDataForLine]);
 
   useEffect(() => {
     setActionButtons?.(
@@ -102,10 +143,6 @@ export const SourceView = React.memo(function SourceView({
     });
   };
 
-  const table = tableFromIPC(data.record);
-  const cumulative = table.getChild('cumulative');
-  const flat = table.getChild('flat');
-
   return (
     <AnimatePresence>
       <motion.div
@@ -123,7 +160,7 @@ export const SourceView = React.memo(function SourceView({
         {sourceViewContextMenuItems.length > 0 ? (
           <Menu id={MENU_ID}>
             {sourceViewContextMenuItems.map(item => (
-              <Item key={item.id} onClick={() => item.action(selectedCode)}>
+              <Item key={item.id} onClick={() => item.action(selectedCode, profileData)}>
                 {item.label}
               </Item>
             ))}

package/src/index.tsx

@@ -25,6 +25,7 @@ export * from './ProfileView';
 export * from './ProfileViewWithData';
 export * from './utils';
 export * from './ProfileTypeSelector';
+export * from './SourceView';
 export {default as Callgraph} from './Callgraph';
 
 export type {CallgraphProps};