@parca/profile 0.19.33 → 0.19.35

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.35](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.34...@parca/profile@0.19.35) (2025-08-12)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.19.34](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.33...@parca/profile@0.19.34) (2025-08-06)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.19.33](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.32...@parca/profile@0.19.33) (2025-08-06)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Table/TableContextMenu.d.ts

@@ -1,9 +1,14 @@
 import 'react-contexify/dist/ReactContexify.css';
 import { type Row } from '.';
+import { type ColumnName } from './utils/functions';
 interface TableContextMenuProps {
     menuId: string;
     row: Row | null;
+    unit?: string;
+    total?: bigint;
+    totalUnfiltered?: bigint;
+    columnVisibility?: Record<ColumnName, boolean>;
 }
-declare const TableContextMenu: ({ menuId, row }: TableContextMenuProps) => React.JSX.Element;
+declare const TableContextMenu: ({ menuId, row, unit, total, totalUnfiltered, columnVisibility, }: TableContextMenuProps) => React.JSX.Element;
 export default TableContextMenu;
 //# sourceMappingURL=TableContextMenu.d.ts.map

package/dist/Table/TableContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableContextMenu.d.ts","sourceRoot":"","sources":["../../src/Table/TableContextMenu.tsx"],"names":[],"mappings":"AAiBA,OAAO,yCAAyC,CAAC;AAIjD,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,GAAG,CAAC;AAE3B,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC;CACjB;AAED,QAAA,MAAM,gBAAgB,GAAI,iBAAe,qBAAqB,KAAG,KAAK,CAAC,GAAG,CAAC,OAuC1E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"TableContextMenu.d.ts","sourceRoot":"","sources":["../../src/Table/TableContextMenu.tsx"],"names":[],"mappings":"AAiBA,OAAO,yCAAyC,CAAC;AAKjD,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,GAAG,CAAC;AAG3B,OAAO,EAAC,KAAK,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAElD,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,gBAAgB,GAAI,kEAOvB,qBAAqB,KAAG,KAAK,CAAC,GAAG,CAAC,OA+LpC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/Table/TableContextMenu.js

@@ -13,10 +13,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // limitations under the License.
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
-import { Item, Menu } from 'react-contexify';
+import { Item, Menu, Submenu } from 'react-contexify';
 import 'react-contexify/dist/ReactContexify.css';
 import { useParcaContext, useURLState } from '@parca/components';
-const TableContextMenu = ({ menuId, row }) => {
+import { valueFormatter } from '@parca/utilities';
+import { getTextForCumulative } from '../ProfileFlameGraph/FlameGraphArrow/utils';
+import { truncateString } from '../utils';
+const TableContextMenu = ({ menuId, row, unit, total, totalUnfiltered, columnVisibility, }) => {
     const [_, setSandwichFunctionName] = useURLState('sandwich_function_name');
     const [dashboardItems, setDashboardItems] = useURLState('dashboard_items', {
         alwaysReturnArray: true,
@@ -30,9 +33,125 @@ const TableContextMenu = ({ menuId, row }) => {
             }
         }
     };
+    const handleCopyItem = (text) => {
+        void navigator.clipboard.writeText(text);
+    };
+    const isColumnVisible = (columnName) => {
+        return columnVisibility?.[columnName] ?? true;
+    };
+    const valuesToCopy = row !== null
+        ? [
+            ...(isColumnVisible('flat')
+                ? [
+                    {
+                        id: 'Flat',
+                        value: total !== null &&
+                            total !== undefined &&
+                            totalUnfiltered !== null &&
+                            totalUnfiltered !== undefined
+                            ? getTextForCumulative(row.flat, total, totalUnfiltered, unit ?? '')
+                            : valueFormatter(row.flat, unit ?? '', 1),
+                    },
+                ]
+                : []),
+            ...(isColumnVisible('flatPercentage')
+                ? [
+                    {
+                        id: 'Flat (%)',
+                        value: total !== null &&
+                            total !== undefined &&
+                            totalUnfiltered !== null &&
+                            totalUnfiltered !== undefined
+                            ? getTextForCumulative(row.flat, total, totalUnfiltered, unit ?? '')
+                            : valueFormatter(row.flat, unit ?? '', 1),
+                    },
+                ]
+                : []),
+            ...(isColumnVisible('flatDiff')
+                ? [
+                    {
+                        id: 'Flat Diff',
+                        value: row.flatDiff !== 0n ? valueFormatter(row.flatDiff, unit ?? '', 1) : '',
+                    },
+                ]
+                : []),
+            ...(isColumnVisible('flatDiffPercentage')
+                ? [
+                    {
+                        id: 'Flat Diff (%)',
+                        value: row.flatDiff !== 0n ? valueFormatter(row.flatDiff, unit ?? '', 1) : '',
+                    },
+                ]
+                : []),
+            ...(isColumnVisible('cumulative')
+                ? [
+                    {
+                        id: 'Cumulative',
+                        value: total !== null &&
+                            total !== undefined &&
+                            totalUnfiltered !== null &&
+                            totalUnfiltered !== undefined
+                            ? getTextForCumulative(row.cumulative, total, totalUnfiltered, unit ?? '')
+                            : valueFormatter(row.cumulative, unit ?? '', 1),
+                    },
+                ]
+                : []),
+            ...(isColumnVisible('cumulativePercentage')
+                ? [
+                    {
+                        id: 'Cumulative (%)',
+                        value: total !== null &&
+                            total !== undefined &&
+                            totalUnfiltered !== null &&
+                            totalUnfiltered !== undefined
+                            ? getTextForCumulative(row.cumulative, total, totalUnfiltered, unit ?? '')
+                            : valueFormatter(row.cumulative, unit ?? '', 1),
+                    },
+                ]
+                : []),
+            ...(isColumnVisible('cumulativeDiff')
+                ? [
+                    {
+                        id: 'Cumulative Diff',
+                        value: row.cumulativeDiff !== 0n
+                            ? valueFormatter(row.cumulativeDiff, unit ?? '', 1)
+                            : '',
+                    },
+                ]
+                : []),
+            ...(isColumnVisible('cumulativeDiffPercentage')
+                ? [
+                    {
+                        id: 'Cumulative Diff (%)',
+                        value: row.cumulativeDiff !== 0n
+                            ? valueFormatter(row.cumulativeDiff, unit ?? '', 1)
+                            : '',
+                    },
+                ]
+                : []),
+            ...(isColumnVisible('name')
+                ? [
+                    {
+                        id: 'Name',
+                        value: row.name ?? '',
+                    },
+                ]
+                : []),
+            ...(isColumnVisible('functionSystemName')
+                ? [{ id: 'Function System Name', value: row.functionSystemName ?? '' }]
+                : []),
+            ...(isColumnVisible('functionFileName')
+                ? [{ id: 'Function File Name', value: row.functionFileName ?? '' }]
+                : []),
+            ...(isColumnVisible('mappingFile')
+                ? [{ id: 'Mapping File', value: row.mappingFile ?? '' }]
+                : []),
+        ].flat()
+        : [];
+    const nonEmptyValuesToCopy = valuesToCopy.filter(({ value }) => value !== '');
     const isMenuDisabled = row === null || enableSandwichView !== true;
-    return (_jsx(Menu, { id: menuId, theme: isDarkMode ? 'dark' : '', className: cx(dashboardItems.includes('sandwich') ? 'min-w-[350px] w-[350px]' : 'min-w-[260px] w-[260px]'), children: _jsx(Item, { id: "sandwich-view", onClick: onSandwichViewSelect, disabled: isMenuDisabled, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "tdesign:sandwich-filled" }), _jsxs("div", { className: "relative", children: [dashboardItems.includes('sandwich')
-                                ? 'Focus sandwich on this frame.'
-                                : 'Show in sandwich', _jsx("span", { className: "absolute top-[-2px] text-xs lowercase text-red-500", children: "\u00A0alpha" })] })] }) }) }));
+    return (_jsxs(Menu, { id: menuId, theme: isDarkMode ? 'dark' : '', className: cx(dashboardItems.includes('sandwich') ? 'min-w-[350px] w-[350px]' : 'min-w-[260px] w-[260px]'), children: [_jsx(Item, { id: "sandwich-view", onClick: onSandwichViewSelect, disabled: isMenuDisabled, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "tdesign:sandwich-filled" }), _jsxs("div", { className: "relative", children: [dashboardItems.includes('sandwich')
+                                    ? 'Focus sandwich on this frame.'
+                                    : 'Show in sandwich', _jsx("span", { className: "absolute top-[-2px] text-xs lowercase text-red-500", children: "\u00A0alpha" })] })] }) }), _jsx(Submenu, { label: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "ph:copy" }), _jsx("div", { children: "Copy" })] }), disabled: row === null, children: _jsx("div", { className: "max-h-[300px] overflow-scroll", children: nonEmptyValuesToCopy.map(({ id, value }) => (_jsx(Item, { id: id, onClick: () => handleCopyItem(value), className: "dark:bg-gray-800", children: _jsxs("div", { className: "flex flex-col dark:text-gray-300 hover:dark:text-gray-100", children: [_jsx("div", { className: "text-sm", children: id }), _jsx("div", { className: "text-xs", children: truncateString(value, 30) })] }) }, id))) }) })] }));
 };
 export default TableContextMenu;

package/dist/Table/TableContextMenuWrapper.d.ts

@@ -1,6 +1,11 @@
 import { type Row } from '.';
+import { type ColumnName } from './utils/functions';
 interface TableContextMenuWrapperProps {
     menuId: string;
+    unit?: string;
+    total?: bigint;
+    totalUnfiltered?: bigint;
+    columnVisibility?: Record<ColumnName, boolean>;
 }
 export interface TableContextMenuWrapperRef {
     setRow: (row: Row | null, callback?: () => void) => void;

package/dist/Table/TableContextMenuWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableContextMenuWrapper.d.ts","sourceRoot":"","sources":["../../src/Table/TableContextMenuWrapper.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,GAAG,CAAC;AAG3B,UAAU,4BAA4B;IACpC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,EAAE,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC1D;AAED,QAAA,MAAM,uBAAuB,qIAiB3B,CAAC;AAIH,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"TableContextMenuWrapper.d.ts","sourceRoot":"","sources":["../../src/Table/TableContextMenuWrapper.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,GAAG,CAAC;AAE3B,OAAO,EAAC,KAAK,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAElD,UAAU,4BAA4B;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;CAChD;AAED,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,EAAE,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC1D;AAED,QAAA,MAAM,uBAAuB,qIA0B3B,CAAC;AAIH,eAAe,uBAAuB,CAAC"}

package/dist/Table/TableContextMenuWrapper.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // limitations under the License.
 import { forwardRef, useImperativeHandle, useState } from 'react';
 import TableContextMenu from './TableContextMenu';
-const TableContextMenuWrapper = forwardRef(({ menuId }, ref) => {
+const TableContextMenuWrapper = forwardRef(({ menuId, unit, total, totalUnfiltered, columnVisibility }, ref) => {
     const [row, setRow] = useState(null);
     useImperativeHandle(ref, () => ({
         setRow: (newRow, callback) => {
@@ -24,7 +24,7 @@ const TableContextMenuWrapper = forwardRef(({ menuId }, ref) => {
             }
         },
     }));
-    return _jsx(TableContextMenu, { menuId: menuId, row: row });
+    return (_jsx(TableContextMenu, { menuId: menuId, row: row, unit: unit, total: total, totalUnfiltered: totalUnfiltered, columnVisibility: columnVisibility }));
 });
 TableContextMenuWrapper.displayName = 'TableContextMenuWrapper';
 export default TableContextMenuWrapper;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAarE,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAS1C,OAAO,EAAC,OAAO,EAAmC,MAAM,mBAAmB,CAAC;AAE5E,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AACjD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AACjE,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAC7C,eAAO,MAAM,qBAAqB,oBAAoB,CAAC;AACvD,eAAO,MAAM,aAAa,YAAY,CAAC;AACvC,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,MAAM,MAAM,GAAG,GAAG,OAAO,CAAC;AAE1B,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED,eAAO,MAAM,KAAK,wCAoPhB,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAarE,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAS1C,OAAO,EAAC,OAAO,EAAmC,MAAM,mBAAmB,CAAC;AAE5E,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AACjD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AACjE,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAC7C,eAAO,MAAM,qBAAqB,oBAAoB,CAAC;AACvD,eAAO,MAAM,aAAa,YAAY,CAAC;AACvC,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,MAAM,MAAM,GAAG,GAAG,OAAO,CAAC;AAE1B,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED,eAAO,MAAM,KAAK,wCAsMhB,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/dist/Table/index.js

@@ -91,6 +91,14 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
         }
         selectSpan(row.name);
     }, [selectSpan, dashboardItems.length]);
+    const onRowContextMenu = useCallback((e, row) => {
+        e.preventDefault();
+        contextMenuRef.current?.setRow(row, () => {
+            show({
+                event: e,
+            });
+        });
+    }, [show]);
     const rows = useMemo(() => {
         if (table == null || table.numRows === 0) {
             return [];
@@ -131,59 +139,12 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
         const rows = Array.from({ length: table.numRows }, (_, i) => getRow(i));
         return rows;
     }, [table, colorByColors, colorBy]);
-    const handleTableContextMenu = useCallback((e) => {
-        e.preventDefault();
-        // Find the closest table row element
-        const target = e.target;
-        const rowElement = target.closest('tr');
-        if (rowElement !== null) {
-            // Look for a data attribute that might contain the actual row ID
-            const rowId = rowElement.getAttribute('data-row-id') ?? rowElement.getAttribute('data-id');
-            if (rowId != null && rowId.length > 0) {
-                // Find the row by ID
-                const actualRowIndex = parseInt(rowId, 10);
-                if (actualRowIndex >= 0 && actualRowIndex < rows.length) {
-                    const row = rows[actualRowIndex];
-                    contextMenuRef.current?.setRow(row, () => {
-                        show({
-                            event: e,
-                        });
-                    });
-                    return;
-                }
-            }
-            // Fallback: try to find row by matching text content
-            const nameCell = rowElement.querySelector('td:last-child'); // Name is usually the last column
-            if (nameCell !== null) {
-                const cellText = nameCell.textContent?.trim();
-                if (cellText != null && cellText.length > 0) {
-                    // First try exact match
-                    let matchingRow = rows.find(row => row.name === cellText);
-                    // If no exact match, try partial match (in case of truncation)
-                    if (matchingRow == null) {
-                        matchingRow = rows.find(row => row.name.includes(cellText) || cellText.includes(row.name));
-                    }
-                    // If still no match, try matching the end of the name (for cases like package.function)
-                    if (matchingRow == null) {
-                        matchingRow = rows.find(row => row.name.endsWith(cellText) || cellText.endsWith(row.name.split('.').pop() ?? ''));
-                    }
-                    if (matchingRow != null) {
-                        contextMenuRef.current?.setRow(matchingRow, () => {
-                            show({
-                                event: e,
-                            });
-                        });
-                    }
-                }
-            }
-        }
-    }, [rows, show]);
     if (loading) {
         return (_jsx("div", { className: "overflow-clip h-[700px] min-h-[700px]", children: _jsx(TableSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode }) }));
     }
     if (rows.length === 0) {
         return _jsx("div", { className: "mx-auto text-center", children: "Profile has no samples" });
     }
-    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: _jsxs("div", { className: "relative", children: [_jsx(TableContextMenuWrapper, { ref: contextMenuRef, menuId: MENU_ID }), _jsx("div", { className: "font-robotoMono h-[80vh] w-full", onContextMenu: handleTableContextMenu, children: _jsx(TableComponent, { data: rows, columns: columns, initialSorting: initialSorting, columnVisibility: columnVisibility, onRowClick: onRowClick, usePointerCursor: dashboardItems.length > 1, estimatedRowHeight: ROW_HEIGHT }) })] }) }, "table-loaded") }));
+    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: _jsxs("div", { className: "relative", children: [_jsx(TableContextMenuWrapper, { ref: contextMenuRef, menuId: MENU_ID, unit: unit, total: total, totalUnfiltered: total, columnVisibility: columnVisibility }), _jsx("div", { className: "font-robotoMono h-[80vh] w-full", children: _jsx(TableComponent, { data: rows, columns: columns, initialSorting: initialSorting, columnVisibility: columnVisibility, onRowClick: onRowClick, onRowContextMenu: onRowContextMenu, usePointerCursor: dashboardItems.length > 1, estimatedRowHeight: ROW_HEIGHT }) })] }) }, "table-loaded") }));
 });
 export default Table;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.33",
+  "version": "0.19.35",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
     "@parca/client": "0.17.3",
-    "@parca/components": "0.16.354",
+    "@parca/components": "0.16.356",
     "@parca/dynamicsize": "0.16.65",
     "@parca/hooks": "0.0.99",
     "@parca/icons": "0.16.72",
@@ -78,5 +78,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "856f4482ef94445b2e7a05c5618652fd0079fc6e"
+  "gitHead": "c0da0b21aecf50944c7502483b8216ea11634ef2"
 }

package/src/Table/TableContextMenu.tsx

@@ -13,20 +13,35 @@
 
 import {Icon} from '@iconify/react';
 import cx from 'classnames';
-import {Item, Menu} from 'react-contexify';
+import {Item, Menu, Submenu} from 'react-contexify';
 
 import 'react-contexify/dist/ReactContexify.css';
 
 import {useParcaContext, useURLState} from '@parca/components';
+import {valueFormatter} from '@parca/utilities';
 
 import {type Row} from '.';
+import {getTextForCumulative} from '../ProfileFlameGraph/FlameGraphArrow/utils';
+import {truncateString} from '../utils';
+import {type ColumnName} from './utils/functions';
 
 interface TableContextMenuProps {
   menuId: string;
   row: Row | null;
+  unit?: string;
+  total?: bigint;
+  totalUnfiltered?: bigint;
+  columnVisibility?: Record<ColumnName, boolean>;
 }
 
-const TableContextMenu = ({menuId, row}: TableContextMenuProps): React.JSX.Element => {
+const TableContextMenu = ({
+  menuId,
+  row,
+  unit,
+  total,
+  totalUnfiltered,
+  columnVisibility,
+}: TableContextMenuProps): React.JSX.Element => {
   const [_, setSandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
   const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
     alwaysReturnArray: true,
@@ -42,6 +57,133 @@ const TableContextMenu = ({menuId, row}: TableContextMenuProps): React.JSX.Eleme
     }
   };
 
+  const handleCopyItem = (text: string): void => {
+    void navigator.clipboard.writeText(text);
+  };
+
+  const isColumnVisible = (columnName: ColumnName): boolean => {
+    return columnVisibility?.[columnName] ?? true;
+  };
+
+  const valuesToCopy =
+    row !== null
+      ? [
+          ...(isColumnVisible('flat')
+            ? [
+                {
+                  id: 'Flat',
+                  value:
+                    total !== null &&
+                    total !== undefined &&
+                    totalUnfiltered !== null &&
+                    totalUnfiltered !== undefined
+                      ? getTextForCumulative(row.flat, total, totalUnfiltered, unit ?? '')
+                      : valueFormatter(row.flat, unit ?? '', 1),
+                },
+              ]
+            : []),
+          ...(isColumnVisible('flatPercentage')
+            ? [
+                {
+                  id: 'Flat (%)',
+                  value:
+                    total !== null &&
+                    total !== undefined &&
+                    totalUnfiltered !== null &&
+                    totalUnfiltered !== undefined
+                      ? getTextForCumulative(row.flat, total, totalUnfiltered, unit ?? '')
+                      : valueFormatter(row.flat, unit ?? '', 1),
+                },
+              ]
+            : []),
+          ...(isColumnVisible('flatDiff')
+            ? [
+                {
+                  id: 'Flat Diff',
+                  value: row.flatDiff !== 0n ? valueFormatter(row.flatDiff, unit ?? '', 1) : '',
+                },
+              ]
+            : []),
+          ...(isColumnVisible('flatDiffPercentage')
+            ? [
+                {
+                  id: 'Flat Diff (%)',
+                  value: row.flatDiff !== 0n ? valueFormatter(row.flatDiff, unit ?? '', 1) : '',
+                },
+              ]
+            : []),
+          ...(isColumnVisible('cumulative')
+            ? [
+                {
+                  id: 'Cumulative',
+                  value:
+                    total !== null &&
+                    total !== undefined &&
+                    totalUnfiltered !== null &&
+                    totalUnfiltered !== undefined
+                      ? getTextForCumulative(row.cumulative, total, totalUnfiltered, unit ?? '')
+                      : valueFormatter(row.cumulative, unit ?? '', 1),
+                },
+              ]
+            : []),
+          ...(isColumnVisible('cumulativePercentage')
+            ? [
+                {
+                  id: 'Cumulative (%)',
+                  value:
+                    total !== null &&
+                    total !== undefined &&
+                    totalUnfiltered !== null &&
+                    totalUnfiltered !== undefined
+                      ? getTextForCumulative(row.cumulative, total, totalUnfiltered, unit ?? '')
+                      : valueFormatter(row.cumulative, unit ?? '', 1),
+                },
+              ]
+            : []),
+          ...(isColumnVisible('cumulativeDiff')
+            ? [
+                {
+                  id: 'Cumulative Diff',
+                  value:
+                    row.cumulativeDiff !== 0n
+                      ? valueFormatter(row.cumulativeDiff, unit ?? '', 1)
+                      : '',
+                },
+              ]
+            : []),
+          ...(isColumnVisible('cumulativeDiffPercentage')
+            ? [
+                {
+                  id: 'Cumulative Diff (%)',
+                  value:
+                    row.cumulativeDiff !== 0n
+                      ? valueFormatter(row.cumulativeDiff, unit ?? '', 1)
+                      : '',
+                },
+              ]
+            : []),
+          ...(isColumnVisible('name')
+            ? [
+                {
+                  id: 'Name',
+                  value: row.name ?? '',
+                },
+              ]
+            : []),
+          ...(isColumnVisible('functionSystemName')
+            ? [{id: 'Function System Name', value: row.functionSystemName ?? ''}]
+            : []),
+          ...(isColumnVisible('functionFileName')
+            ? [{id: 'Function File Name', value: row.functionFileName ?? ''}]
+            : []),
+          ...(isColumnVisible('mappingFile')
+            ? [{id: 'Mapping File', value: row.mappingFile ?? ''}]
+            : []),
+        ].flat()
+      : [];
+
+  const nonEmptyValuesToCopy = valuesToCopy.filter(({value}) => value !== '');
+
   const isMenuDisabled = row === null || enableSandwichView !== true;
 
   return (
@@ -63,6 +205,31 @@ const TableContextMenu = ({menuId, row}: TableContextMenuProps): React.JSX.Eleme
           </div>
         </div>
       </Item>
+      <Submenu
+        label={
+          <div className="flex w-full items-center gap-2">
+            <Icon icon="ph:copy" />
+            <div>Copy</div>
+          </div>
+        }
+        disabled={row === null}
+      >
+        <div className="max-h-[300px] overflow-scroll">
+          {nonEmptyValuesToCopy.map(({id, value}: {id: string; value: string}) => (
+            <Item
+              key={id}
+              id={id}
+              onClick={() => handleCopyItem(value)}
+              className="dark:bg-gray-800"
+            >
+              <div className="flex flex-col dark:text-gray-300 hover:dark:text-gray-100">
+                <div className="text-sm">{id}</div>
+                <div className="text-xs">{truncateString(value, 30)}</div>
+              </div>
+            </Item>
+          ))}
+        </div>
+      </Submenu>
     </Menu>
   );
 };

package/src/Table/TableContextMenuWrapper.tsx

@@ -15,9 +15,14 @@ import {forwardRef, useImperativeHandle, useState} from 'react';
 
 import {type Row} from '.';
 import TableContextMenu from './TableContextMenu';
+import {type ColumnName} from './utils/functions';
 
 interface TableContextMenuWrapperProps {
   menuId: string;
+  unit?: string;
+  total?: bigint;
+  totalUnfiltered?: bigint;
+  columnVisibility?: Record<ColumnName, boolean>;
 }
 
 export interface TableContextMenuWrapperRef {
@@ -27,7 +32,7 @@ export interface TableContextMenuWrapperRef {
 const TableContextMenuWrapper = forwardRef<
   TableContextMenuWrapperRef,
   TableContextMenuWrapperProps
->(({menuId}, ref) => {
+>(({menuId, unit, total, totalUnfiltered, columnVisibility}, ref) => {
   const [row, setRow] = useState<Row | null>(null);
 
   useImperativeHandle(ref, () => ({
@@ -40,7 +45,16 @@ const TableContextMenuWrapper = forwardRef<
     },
   }));
 
-  return <TableContextMenu menuId={menuId} row={row} />;
+  return (
+    <TableContextMenu
+      menuId={menuId}
+      row={row}
+      unit={unit}
+      total={total}
+      totalUnfiltered={totalUnfiltered}
+      columnVisibility={columnVisibility}
+    />
+  );
 });
 
 TableContextMenuWrapper.displayName = 'TableContextMenuWrapper';

package/src/Table/index.tsx

@@ -149,6 +149,18 @@ export const Table = React.memo(function Table({
     [selectSpan, dashboardItems.length]
   );
 
+  const onRowContextMenu = useCallback(
+    (e: React.MouseEvent, row: Row) => {
+      e.preventDefault();
+      contextMenuRef.current?.setRow(row, () => {
+        show({
+          event: e,
+        });
+      });
+    },
+    [show]
+  );
+
   const rows: DataRow[] = useMemo(() => {
     if (table == null || table.numRows === 0) {
       return [];
@@ -201,72 +213,6 @@ export const Table = React.memo(function Table({
     return rows;
   }, [table, colorByColors, colorBy]);
 
-  const handleTableContextMenu = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-
-      // Find the closest table row element
-      const target = e.target as Element;
-      const rowElement = target.closest('tr');
-
-      if (rowElement !== null) {
-        // Look for a data attribute that might contain the actual row ID
-        const rowId = rowElement.getAttribute('data-row-id') ?? rowElement.getAttribute('data-id');
-
-        if (rowId != null && rowId.length > 0) {
-          // Find the row by ID
-          const actualRowIndex = parseInt(rowId, 10);
-
-          if (actualRowIndex >= 0 && actualRowIndex < rows.length) {
-            const row = rows[actualRowIndex];
-
-            contextMenuRef.current?.setRow(row, () => {
-              show({
-                event: e,
-              });
-            });
-            return;
-          }
-        }
-
-        // Fallback: try to find row by matching text content
-        const nameCell = rowElement.querySelector('td:last-child'); // Name is usually the last column
-        if (nameCell !== null) {
-          const cellText = nameCell.textContent?.trim();
-
-          if (cellText != null && cellText.length > 0) {
-            // First try exact match
-            let matchingRow = rows.find(row => row.name === cellText);
-
-            // If no exact match, try partial match (in case of truncation)
-            if (matchingRow == null) {
-              matchingRow = rows.find(
-                row => row.name.includes(cellText) || cellText.includes(row.name)
-              );
-            }
-
-            // If still no match, try matching the end of the name (for cases like package.function)
-            if (matchingRow == null) {
-              matchingRow = rows.find(
-                row =>
-                  row.name.endsWith(cellText) || cellText.endsWith(row.name.split('.').pop() ?? '')
-              );
-            }
-
-            if (matchingRow != null) {
-              contextMenuRef.current?.setRow(matchingRow, () => {
-                show({
-                  event: e,
-                });
-              });
-            }
-          }
-        }
-      }
-    },
-    [rows, show]
-  );
-
   if (loading) {
     return (
       <div className="overflow-clip h-[700px] min-h-[700px]">
@@ -289,14 +235,22 @@ export const Table = React.memo(function Table({
         transition={{duration: 0.5}}
       >
         <div className="relative">
-          <TableContextMenuWrapper ref={contextMenuRef} menuId={MENU_ID} />
-          <div className="font-robotoMono h-[80vh] w-full" onContextMenu={handleTableContextMenu}>
+          <TableContextMenuWrapper
+            ref={contextMenuRef}
+            menuId={MENU_ID}
+            unit={unit}
+            total={total}
+            totalUnfiltered={total}
+            columnVisibility={columnVisibility}
+          />
+          <div className="font-robotoMono h-[80vh] w-full">
             <TableComponent
               data={rows}
               columns={columns}
               initialSorting={initialSorting}
               columnVisibility={columnVisibility}
               onRowClick={onRowClick}
+              onRowContextMenu={onRowContextMenu}
               usePointerCursor={dashboardItems.length > 1}
               estimatedRowHeight={ROW_HEIGHT}
             />