@parca/profile 0.16.347 → 0.16.348

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.348](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.347...@parca/profile@0.16.348) (2024-02-27)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.347](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.346...@parca/profile@0.16.347) (2024-02-22)
 
 **Note:** Version bump only for package @parca/profile

package/dist/SourceView/Highlighter.d.ts

@@ -1,3 +1,4 @@
+import { MouseEventHandler } from 'react';
 import { Vector } from 'apache-arrow';
 import { type createElementProps } from 'react-syntax-highlighter';
 interface RendererProps {
@@ -11,6 +12,6 @@ interface HighlighterProps {
     content: string;
     renderer?: Renderer;
 }
-export declare const profileAwareRenderer: (cumulative: Vector | null, flat: Vector | null, total: bigint, filtered: bigint) => Renderer;
+export declare const profileAwareRenderer: (cumulative: Vector | null, flat: Vector | null, total: bigint, filtered: bigint, onContextMenu: MouseEventHandler<HTMLDivElement>) => Renderer;
 export declare const Highlighter: ({ file, content, renderer }: HighlighterProps) => JSX.Element;
 export {};

package/dist/SourceView/Highlighter.js

@@ -17,10 +17,11 @@ import { scaleLinear } from 'd3-scale';
 import SyntaxHighlighter, { createElement } from 'react-syntax-highlighter';
 import { atomOneDark, atomOneLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { Tooltip } from 'react-tooltip';
-import { useParcaContext, useURLState } from '@parca/components';
+import { useParcaContext } from '@parca/components';
 import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
 import { LineNo } from './LineNo';
 import { langaugeFromFile } from './lang-detector';
+import useLineRange from './useSelectedLineRange';
 // cannot make this a function on the number as we need the classes to be static for tailwind
 const charsToWidthMap = {
     1: 'w-3',
@@ -55,17 +56,29 @@ const LineProfileMetadata = ({ value, total, filtered, }) => {
 const charsToWidth = (chars) => {
     return charsToWidthMap[chars];
 };
-export const profileAwareRenderer = (cumulative, flat, total, filtered) => {
+export const profileAwareRenderer = (cumulative, flat, total, filtered, onContextMenu) => {
     return function ProfileAwareRenderer({ rows, stylesheet, useInlineStyles, }) {
         const lineNumberWidth = charsToWidth(rows.length.toString().length);
-        const [sourceLine, setSourceLine] = useURLState({ param: 'source_line', navigateTo: () => { } });
+        const { startLine, endLine, setLineRange } = useLineRange();
         return (_jsx(_Fragment, { children: rows.map((node, i) => {
                 const lineNumber = node.children[0].children[0].value;
-                const isCurrentLine = sourceLine === lineNumber.toString();
+                const isCurrentLine = lineNumber >= startLine && lineNumber <= endLine;
                 node.children = node.children.slice(1);
-                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, setCurrentLine: () => setSourceLine(lineNumber.toString()) }) }), _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', {
+                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);
+                                    }
+                                    if (isShiftDown && startLine != null) {
+                                        if (startLine > lineNumber) {
+                                            setLineRange(lineNumber, startLine);
+                                        }
+                                        else {
+                                            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', {
                                 'bg-yellow-200 dark:bg-yellow-700': isCurrentLine,
-                            }), children: createElement({
+                            }), onContextMenu: onContextMenu, children: createElement({
                                 key: `source-line-${i}`,
                                 node,
                                 stylesheet,

package/dist/SourceView/LineNo.d.ts

@@ -1,7 +1,7 @@
 interface Props {
     value: number;
     isCurrent?: boolean;
-    setCurrentLine?: () => void;
+    selectLine?: (isShiftDown?: boolean) => void;
 }
-export declare const LineNo: ({ value, isCurrent, setCurrentLine }: Props) => JSX.Element;
+export declare const LineNo: ({ value, isCurrent, selectLine }: Props) => JSX.Element;
 export {};

package/dist/SourceView/LineNo.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // limitations under the License.
 import { useEffect, useRef } from 'react';
 import cx from 'classnames';
-export const LineNo = ({ value, isCurrent = false, setCurrentLine }) => {
+export const LineNo = ({ value, isCurrent = false, selectLine }) => {
     const ref = useRef(null);
     useEffect(() => {
         if (isCurrent && ref.current !== null) {
@@ -26,7 +26,7 @@ export const LineNo = ({ value, isCurrent = false, setCurrentLine }) => {
             ref.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
         }
     }, [isCurrent]);
-    return (_jsx("code", { ref: ref, onClick: setCurrentLine, className: cx('cursor-pointer px-1', {
+    return (_jsx("code", { ref: ref, onClick: e => typeof selectLine === 'function' && selectLine(e.shiftKey), className: cx('cursor-pointer px-1 select-none', {
             'border-l border-l-amber-900 bg-yellow-200 dark:bg-yellow-700': isCurrent,
         }), children: value.toString() + '\n' }));
 };

package/dist/SourceView/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -11,16 +11,42 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // 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 } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { tableFromIPC } from 'apache-arrow';
 import { AnimatePresence, motion } from 'framer-motion';
+import { Item, Menu, useContextMenu } from 'react-contexify';
 import { SourceSkeleton, useParcaContext, useURLState } from '@parca/components';
 import { ExpandOnHover } from '../GraphTooltipArrow/ExpandOnHoverValue';
 import { truncateStringReverse } from '../utils';
 import { Highlighter, profileAwareRenderer } from './Highlighter';
+import useLineRange from './useSelectedLineRange';
+const MENU_ID = 'source-view-context-menu';
 export const SourceView = React.memo(function SourceView({ data, loading, total, filtered, setActionButtons, }) {
     const [sourceFileName] = useURLState({ param: 'source_filename', navigateTo: () => { } });
-    const { isDarkMode } = useParcaContext();
+    const { isDarkMode, sourceViewContextMenuItems = [] } = useParcaContext();
+    const sourceCode = useMemo(() => {
+        if (data === undefined) {
+            return [''];
+        }
+        return data.source.split('\n');
+    }, [data]);
+    const { show } = useContextMenu({
+        id: MENU_ID,
+    });
+    const { startLine, endLine } = useLineRange();
+    const selectedCode = useMemo(() => {
+        if (startLine === -1 && endLine === -1) {
+            return '';
+        }
+        if (startLine === endLine) {
+            return sourceCode[startLine - 1];
+        }
+        let code = '';
+        for (let i = startLine - 1; i < endLine; i++) {
+            code += sourceCode[i] + '\n';
+        }
+        return code;
+    }, [startLine, endLine, sourceCode]);
     useEffect(() => {
         setActionButtons?.(_jsx("div", { className: "px-2", children: _jsx(ExpandOnHover, { value: sourceFileName, displayValue: truncateStringReverse(sourceFileName, 50) }) }));
     }, [sourceFileName, setActionButtons]);
@@ -30,9 +56,15 @@ export const SourceView = React.memo(function SourceView({ data, loading, total,
     if (data === undefined) {
         return _jsx(_Fragment, { children: "Source code not uploaded for this build." });
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const onContextMenu = (event) => {
+        show({
+            event,
+        });
+    };
     const table = tableFromIPC(data.record);
     const cumulative = table.getChild('cumulative');
     const flat = table.getChild('flat');
-    return (_jsx(AnimatePresence, { children: _jsx(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) }) }, "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) }), _jsx(Menu, { id: MENU_ID, children: sourceViewContextMenuItems.map(item => (_jsx(Item, { onClick: () => item.action(selectedCode), children: item.label }, item.id))) })] }, "source-view-loaded") }));
 });
 export default SourceView;

package/dist/SourceView/useSelectedLineRange.d.ts

@@ -0,0 +1,7 @@
+interface LineRange {
+    startLine: number;
+    endLine: number;
+    setLineRange: (start: number, end: number) => void;
+}
+declare const useLineRange: () => LineRange;
+export default useLineRange;

package/dist/SourceView/useSelectedLineRange.js

@@ -0,0 +1,29 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { useMemo } from 'react';
+import { useURLState } from '@parca/components';
+const useLineRange = () => {
+    const [sourceLine, setSourceLine] = useURLState({ param: 'source_line', navigateTo: () => { } });
+    const [startLine, endLine] = useMemo(() => {
+        if (sourceLine == null) {
+            return [-1, -1];
+        }
+        const [start, end] = sourceLine.split('-');
+        return [parseInt(start, 10), parseInt(end, 10)];
+    }, [sourceLine]);
+    const setLineRange = (start, end) => {
+        setSourceLine(`${start}-${end}`);
+    };
+    return { startLine, endLine, setLineRange };
+};
+export default useLineRange;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.347",
+  "version": "0.16.348",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.105",
-    "@parca/components": "^0.16.256",
+    "@parca/components": "^0.16.257",
     "@parca/dynamicsize": "^0.16.60",
     "@parca/hooks": "^0.0.43",
     "@parca/parser": "^0.16.68",
@@ -50,5 +50,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "441def38d4a760355493c72ad65470ba37955b9a"
+  "gitHead": "c6fee2eafe92d9e2b9733ddfed32f93964338f6f"
 }

package/src/SourceView/Highlighter.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useId, useMemo} from 'react';
+import {MouseEventHandler, useId, useMemo} from 'react';
 
 import {Vector} from 'apache-arrow';
 import cx from 'classnames';
@@ -20,11 +20,12 @@ import SyntaxHighlighter, {createElement, type createElementProps} from 'react-s
 import {atomOneDark, atomOneLight} from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import {Tooltip} from 'react-tooltip';
 
-import {useParcaContext, useURLState} from '@parca/components';
+import {useParcaContext} from '@parca/components';
 
 import {useProfileViewContext} from '../ProfileView/ProfileViewContext';
 import {LineNo} from './LineNo';
 import {langaugeFromFile} from './lang-detector';
+import useLineRange from './useSelectedLineRange';
 
 interface RendererProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -110,7 +111,8 @@ export const profileAwareRenderer = (
   cumulative: Vector | null,
   flat: Vector | null,
   total: bigint,
-  filtered: bigint
+  filtered: bigint,
+  onContextMenu: MouseEventHandler<HTMLDivElement>
 ): Renderer => {
   return function ProfileAwareRenderer({
     rows,
@@ -118,12 +120,13 @@ export const profileAwareRenderer = (
     useInlineStyles,
   }: RendererProps): JSX.Element {
     const lineNumberWidth = charsToWidth(rows.length.toString().length);
-    const [sourceLine, setSourceLine] = useURLState({param: 'source_line', navigateTo: () => {}});
+    const {startLine, endLine, setLineRange} = useLineRange();
+
     return (
       <>
         {rows.map((node, i) => {
           const lineNumber: number = node.children[0].children[0].value as number;
-          const isCurrentLine = sourceLine === lineNumber.toString();
+          const isCurrentLine = lineNumber >= startLine && lineNumber <= endLine;
           node.children = node.children.slice(1);
           return (
             <div className="flex gap-1" key={`${i}`}>
@@ -136,7 +139,18 @@ export const profileAwareRenderer = (
                 <LineNo
                   value={lineNumber}
                   isCurrent={isCurrentLine}
-                  setCurrentLine={() => setSourceLine(lineNumber.toString())}
+                  selectLine={(isShiftDown = false) => {
+                    if (!isShiftDown) {
+                      setLineRange(lineNumber, lineNumber);
+                    }
+                    if (isShiftDown && startLine != null) {
+                      if (startLine > lineNumber) {
+                        setLineRange(lineNumber, startLine);
+                      } else {
+                        setLineRange(startLine, lineNumber);
+                      }
+                    }
+                  }}
                 />
               </div>
               <LineProfileMetadata
@@ -152,6 +166,7 @@ export const profileAwareRenderer = (
                     'bg-yellow-200 dark:bg-yellow-700': isCurrentLine,
                   }
                 )}
+                onContextMenu={onContextMenu}
               >
                 {createElement({
                   key: `source-line-${i}`,

package/src/SourceView/LineNo.tsx

@@ -18,10 +18,10 @@ import cx from 'classnames';
 interface Props {
   value: number;
   isCurrent?: boolean;
-  setCurrentLine?: () => void;
+  selectLine?: (isShiftDown?: boolean) => void;
 }
 
-export const LineNo = ({value, isCurrent = false, setCurrentLine}: Props): JSX.Element => {
+export const LineNo = ({value, isCurrent = false, selectLine}: Props): JSX.Element => {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -41,8 +41,8 @@ export const LineNo = ({value, isCurrent = false, setCurrentLine}: Props): JSX.E
   return (
     <code
       ref={ref}
-      onClick={setCurrentLine}
-      className={cx('cursor-pointer px-1', {
+      onClick={e => typeof selectLine === 'function' && selectLine(e.shiftKey)}
+      className={cx('cursor-pointer px-1 select-none', {
         'border-l border-l-amber-900 bg-yellow-200 dark:bg-yellow-700': isCurrent,
       })}
     >

package/src/SourceView/index.tsx

@@ -11,10 +11,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useEffect} from 'react';
+import React, {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';
@@ -22,6 +23,7 @@ import {SourceSkeleton, useParcaContext, useURLState} from '@parca/components';
 import {ExpandOnHover} from '../GraphTooltipArrow/ExpandOnHoverValue';
 import {truncateStringReverse} from '../utils';
 import {Highlighter, profileAwareRenderer} from './Highlighter';
+import useLineRange from './useSelectedLineRange';
 
 interface SourceViewProps {
   loading: boolean;
@@ -31,6 +33,8 @@ interface SourceViewProps {
   setActionButtons?: (buttons: JSX.Element) => void;
 }
 
+const MENU_ID = 'source-view-context-menu';
+
 export const SourceView = React.memo(function SourceView({
   data,
   loading,
@@ -39,7 +43,34 @@ export const SourceView = React.memo(function SourceView({
   setActionButtons,
 }: SourceViewProps): JSX.Element {
   const [sourceFileName] = useURLState({param: 'source_filename', navigateTo: () => {}});
-  const {isDarkMode} = useParcaContext();
+  const {isDarkMode, sourceViewContextMenuItems = []} = useParcaContext();
+
+  const sourceCode = useMemo(() => {
+    if (data === undefined) {
+      return [''];
+    }
+    return data.source.split('\n');
+  }, [data]);
+
+  const {show} = useContextMenu({
+    id: MENU_ID,
+  });
+
+  const {startLine, endLine} = useLineRange();
+
+  const selectedCode = useMemo(() => {
+    if (startLine === -1 && endLine === -1) {
+      return '';
+    }
+    if (startLine === endLine) {
+      return sourceCode[startLine - 1];
+    }
+    let code = '';
+    for (let i = startLine - 1; i < endLine; i++) {
+      code += sourceCode[i] + '\n';
+    }
+    return code;
+  }, [startLine, endLine, sourceCode]);
 
   useEffect(() => {
     setActionButtons?.(
@@ -64,6 +95,13 @@ export const SourceView = React.memo(function SourceView({
     return <>Source code not uploaded for this build.</>;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const onContextMenu = (event: any): void => {
+    show({
+      event,
+    });
+  };
+
   const table = tableFromIPC(data.record);
   const cumulative = table.getChild('cumulative');
   const flat = table.getChild('flat');
@@ -80,8 +118,15 @@ export const SourceView = React.memo(function SourceView({
         <Highlighter
           file={sourceFileName as string}
           content={data.source}
-          renderer={profileAwareRenderer(cumulative, flat, total, filtered)}
+          renderer={profileAwareRenderer(cumulative, flat, total, filtered, onContextMenu)}
         />
+        <Menu id={MENU_ID}>
+          {sourceViewContextMenuItems.map(item => (
+            <Item key={item.id} onClick={() => item.action(selectedCode)}>
+              {item.label}
+            </Item>
+          ))}
+        </Menu>
       </motion.div>
     </AnimatePresence>
   );

package/src/SourceView/useSelectedLineRange.ts

@@ -0,0 +1,41 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 {useMemo} from 'react';
+
+import {useURLState} from '@parca/components';
+
+interface LineRange {
+  startLine: number;
+  endLine: number;
+  setLineRange: (start: number, end: number) => void;
+}
+
+const useLineRange = (): LineRange => {
+  const [sourceLine, setSourceLine] = useURLState({param: 'source_line', navigateTo: () => {}});
+  const [startLine, endLine] = useMemo(() => {
+    if (sourceLine == null) {
+      return [-1, -1];
+    }
+    const [start, end] = (sourceLine as string).split('-');
+    return [parseInt(start, 10), parseInt(end, 10)];
+  }, [sourceLine]);
+
+  const setLineRange = (start: number, end: number): void => {
+    setSourceLine(`${start}-${end}`);
+  };
+
+  return {startLine, endLine, setLineRange};
+};
+
+export default useLineRange;