@parca/profile 0.19.34 → 0.19.36

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.36](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.35...@parca/profile@0.19.36) (2025-08-15)
+
+**Note:** Version bump only for package @parca/profile
+
+## [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

package/dist/ProfileView/components/ProfileFilters/index.d.ts

@@ -1,5 +1,8 @@
 import { type ProfileFilter } from './useProfileFilters';
 export declare const isFilterComplete: (filter: ProfileFilter) => boolean;
-declare const ProfileFilters: () => JSX.Element;
+export interface ProfileFiltersProps {
+    readOnly?: boolean;
+}
+declare const ProfileFilters: ({ readOnly }?: ProfileFiltersProps) => JSX.Element;
 export default ProfileFilters;
 //# sourceMappingURL=index.d.ts.map

package/dist/ProfileView/components/ProfileFilters/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAoB,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAE1E,eAAO,MAAM,gBAAgB,GAAI,QAAQ,aAAa,KAAG,OASxD,CAAC;AAyIF,QAAA,MAAM,cAAc,QAAO,GAAG,CAAC,OAmL9B,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAoB,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAE1E,eAAO,MAAM,gBAAgB,GAAI,QAAQ,aAAa,KAAG,OASxD,CAAC;AAyIF,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,GAAI,eAAoB,mBAAwB,KAAG,GAAG,CAAC,OAsM1E,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/ProfileView/components/ProfileFilters/index.js

@@ -139,7 +139,7 @@ const numberMatchTypeItems = [
         },
     },
 ];
-const ProfileFilters = () => {
+const ProfileFilters = ({ readOnly = false } = {}) => {
     const { profileSource } = useProfileViewContext();
     const currentProfileType = profileSource?.ProfileType()?.toString();
     const filterTypeItems = getFilterTypeItems(currentProfileType);
@@ -158,7 +158,7 @@ const ProfileFilters = () => {
                         const isNumberField = filter.field === 'address' || filter.field === 'line_number';
                         const matchTypeItems = isNumberField ? numberMatchTypeItems : stringMatchTypeItems;
                         const isPresetFilter = filter.type != null && isPresetKey(filter.type);
-                        return (_jsxs("div", { className: "flex items-center gap-0", children: [_jsx(Select, { items: filterTypeItems, selectedKey: filter.type, placeholder: "Select Filter", onSelection: key => {
+                        return (_jsxs("div", { className: "flex items-center gap-0", children: [_jsx(Select, { items: filterTypeItems, selectedKey: filter.type, placeholder: "Select Filter", disabled: readOnly, onSelection: key => {
                                         // Check if this is a preset selection
                                         if (isPresetKey(key)) {
                                             const preset = getPresetByKey(key);
@@ -190,7 +190,7 @@ const ProfileFilters = () => {
                                                 });
                                             }
                                         }
-                                    }, className: cx('rounded-l-md pr-1 gap-0 focus:z-50 focus:relative focus:outline-1', isPresetFilter ? 'rounded-r-none border-r-0' : 'rounded-r-none', filter.type != null ? 'border-r-0 w-auto' : 'w-32') }), filter.type != null && !isPresetFilter && (_jsxs(_Fragment, { children: [_jsx(Select, { items: fieldItems, selectedKey: filter.field ?? '', onSelection: key => {
+                                    }, className: cx('gap-0 focus:z-50 focus:relative focus:outline-1', readOnly ? '' : 'pr-1', readOnly && isPresetFilter ? 'rounded-md' : 'rounded-l-md rounded-r-none', !readOnly && (isPresetFilter ? 'rounded-r-none border-r-0' : 'rounded-r-none'), readOnly ? 'w-auto' : filter.type != null ? 'border-r-0 w-auto' : 'w-32'), hideCaretDropdown: readOnly }), filter.type != null && !isPresetFilter && (_jsxs(_Fragment, { children: [_jsx(Select, { items: fieldItems, selectedKey: filter.field ?? '', disabled: readOnly, onSelection: key => {
                                                 const newField = key;
                                                 const isNewFieldNumber = newField === 'address' || newField === 'line_number';
                                                 const isCurrentFieldNumber = filter.field === 'address' || filter.field === 'line_number';
@@ -203,7 +203,7 @@ const ProfileFilters = () => {
                                                 else {
                                                     updateFilter(filter.id, { field: newField });
                                                 }
-                                            }, className: "rounded-none border-r-0 w-32 pr-1 gap-0 focus:z-50 focus:relative focus:outline-1" }), _jsx(Select, { items: matchTypeItems, selectedKey: filter.matchType ?? '', onSelection: key => updateFilter(filter.id, { matchType: key }), className: "rounded-none border-r-0 pr-1 gap-0 focus:z-50 focus:relative focus:outline-1" }), _jsx(Input, { placeholder: "Value", value: filter.value, onChange: e => updateFilter(filter.id, { value: e.target.value }), onKeyDown: handleKeyDown, className: "rounded-none w-36 text-sm focus:outline-1" })] })), _jsx(Button, { variant: "neutral", onClick: () => {
+                                            }, className: cx('rounded-none border-r-0 w-32 gap-0 focus:z-50 focus:relative focus:outline-1', readOnly ? '' : 'pr-1'), hideCaretDropdown: readOnly }), _jsx(Select, { items: matchTypeItems, selectedKey: filter.matchType ?? '', disabled: readOnly, onSelection: key => updateFilter(filter.id, { matchType: key }), className: cx('rounded-none border-r-0 gap-0 focus:z-50 focus:relative focus:outline-1', readOnly ? '' : 'pr-1'), hideCaretDropdown: readOnly }), _jsx(Input, { placeholder: "Value", value: filter.value, disabled: readOnly, onChange: e => updateFilter(filter.id, { value: e.target.value }), onKeyDown: handleKeyDown, className: "rounded-none w-36 text-sm focus:outline-1" })] })), !readOnly && (_jsx(Button, { variant: "neutral", onClick: () => {
                                         // If we're displaying local filters and this is the last one, reset everything
                                         if (localFilters.length > 0 && localFilters.length === 1) {
                                             resetFilters();
@@ -216,7 +216,9 @@ const ProfileFilters = () => {
                                         else {
                                             removeFilter(filter.id);
                                         }
-                                    }, className: cx('h-[38px] p-3', filter.type != null ? 'rounded-none rounded-r-md' : 'rounded-l-none rounded-r-md'), children: _jsx(Icon, { icon: "mdi:close", className: "h-4 w-4" }) })] }, filter.id));
-                    }), localFilters.length > 0 && (_jsx(Button, { variant: "neutral", onClick: addFilter, className: "p-3 h-[38px]", children: _jsx(Icon, { icon: "mdi:filter-plus-outline", className: "h-4 w-4" }) })), localFilters.length === 0 && (appliedFilters?.length ?? 0) === 0 && (_jsxs(Button, { variant: "neutral", onClick: addFilter, className: "flex items-center gap-2", children: [_jsx(Icon, { icon: "mdi:filter-outline", className: "h-4 w-4" }), _jsx("span", { children: "Filter" })] }))] }), localFilters.length > 0 && (_jsx(Button, { variant: "primary", onClick: onApplyFilters, disabled: !hasUnsavedChanges || !localFilters.some(isFilterComplete), className: cx('flex items-center gap-2 sticky top-0'), children: _jsx("span", { children: "Apply" }) }))] }));
+                                    }, className: cx('h-[38px] p-3', filter.type != null
+                                        ? 'rounded-none rounded-r-md'
+                                        : 'rounded-l-none rounded-r-md'), children: _jsx(Icon, { icon: "mdi:close", className: "h-4 w-4" }) }))] }, filter.id));
+                    }), !readOnly && localFilters.length > 0 && (_jsx(Button, { variant: "neutral", onClick: addFilter, className: "p-3 h-[38px]", children: _jsx(Icon, { icon: "mdi:filter-plus-outline", className: "h-4 w-4" }) })), !readOnly && localFilters.length === 0 && (appliedFilters?.length ?? 0) === 0 && (_jsxs(Button, { variant: "neutral", onClick: addFilter, className: "flex items-center gap-2", children: [_jsx(Icon, { icon: "mdi:filter-outline", className: "h-4 w-4" }), _jsx("span", { children: "Filter" })] }))] }), !readOnly && localFilters.length > 0 && (_jsx(Button, { variant: "primary", onClick: onApplyFilters, disabled: !hasUnsavedChanges || !localFilters.some(isFilterComplete), className: cx('flex items-center gap-2 sticky top-0'), children: _jsx("span", { children: "Apply" }) }))] }));
 };
 export default ProfileFilters;

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/dist/index.d.ts

@@ -11,6 +11,8 @@ export * from './utils';
 export * from './ProfileTypeSelector';
 export * from './SourceView';
 export * from './ProfileMetricsGraph';
+export { default as ProfileFilters } from './ProfileView/components/ProfileFilters';
+export { useProfileFiltersUrlState } from './ProfileView/components/ProfileFilters/useProfileFiltersUrlState';
 export declare const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES: {
     dashboard_items: string;
 };

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,eAAe,EAAE,EAAC,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AAC1E,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AAEnD,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAC,qBAAqB,EAAC,MAAM,2DAA2D,CAAC;AAChG,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AAEtC,eAAO,MAAM,qCAAqC;;CAEjD,CAAC;AAEF,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,YAAY,EAAE,aAAa,EAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,eAAe,EAAE,EAAC,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AAC1E,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AAEnD,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAC,qBAAqB,EAAC,MAAM,2DAA2D,CAAC;AAChG,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAC,yBAAyB,EAAC,MAAM,mEAAmE,CAAC;AAE5G,eAAO,MAAM,qCAAqC;;CAEjD,CAAC;AAEF,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,YAAY,EAAE,aAAa,EAAC,CAAC"}

package/dist/index.js

@@ -23,6 +23,8 @@ export * from './utils';
 export * from './ProfileTypeSelector';
 export * from './SourceView';
 export * from './ProfileMetricsGraph';
+export { default as ProfileFilters } from './ProfileView/components/ProfileFilters';
+export { useProfileFiltersUrlState } from './ProfileView/components/ProfileFilters/useProfileFiltersUrlState';
 export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES = {
     dashboard_items: 'flamegraph',
 };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.34",
+  "version": "0.19.36",
   "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.355",
+    "@parca/components": "0.16.357",
     "@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": "c7c7d4c70deecaf9f4fdf6cd4d40dbd52d88bd9e"
+  "gitHead": "27c6a55306acdd0bedc8d2dbd224793d2df46ec8"
 }

package/src/ProfileView/components/ProfileFilters/index.tsx

@@ -168,7 +168,11 @@ const numberMatchTypeItems: SelectItem[] = [
   },
 ];
 
-const ProfileFilters = (): JSX.Element => {
+export interface ProfileFiltersProps {
+  readOnly?: boolean;
+}
+
+const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Element => {
   const {profileSource} = useProfileViewContext();
   const currentProfileType = profileSource?.ProfileType()?.toString();
   const filterTypeItems = getFilterTypeItems(currentProfileType);
@@ -213,6 +217,7 @@ const ProfileFilters = (): JSX.Element => {
                 items={filterTypeItems}
                 selectedKey={filter.type}
                 placeholder="Select Filter"
+                disabled={readOnly}
                 onSelection={key => {
                   // Check if this is a preset selection
                   if (isPresetKey(key)) {
@@ -246,10 +251,13 @@ const ProfileFilters = (): JSX.Element => {
                   }
                 }}
                 className={cx(
-                  'rounded-l-md pr-1 gap-0 focus:z-50 focus:relative focus:outline-1',
-                  isPresetFilter ? 'rounded-r-none border-r-0' : 'rounded-r-none',
-                  filter.type != null ? 'border-r-0 w-auto' : 'w-32'
+                  'gap-0 focus:z-50 focus:relative focus:outline-1',
+                  readOnly ? '' : 'pr-1',
+                  readOnly && isPresetFilter ? 'rounded-md' : 'rounded-l-md rounded-r-none',
+                  !readOnly && (isPresetFilter ? 'rounded-r-none border-r-0' : 'rounded-r-none'),
+                  readOnly ? 'w-auto' : filter.type != null ? 'border-r-0 w-auto' : 'w-32'
                 )}
+                hideCaretDropdown={readOnly}
               />
 
               {filter.type != null && !isPresetFilter && (
@@ -257,6 +265,7 @@ const ProfileFilters = (): JSX.Element => {
                   <Select
                     items={fieldItems}
                     selectedKey={filter.field ?? ''}
+                    disabled={readOnly}
                     onSelection={key => {
                       const newField = key as ProfileFilter['field'];
                       const isNewFieldNumber = newField === 'address' || newField === 'line_number';
@@ -272,21 +281,31 @@ const ProfileFilters = (): JSX.Element => {
                         updateFilter(filter.id, {field: newField});
                       }
                     }}
-                    className="rounded-none border-r-0 w-32 pr-1 gap-0 focus:z-50 focus:relative focus:outline-1"
+                    className={cx(
+                      'rounded-none border-r-0 w-32 gap-0 focus:z-50 focus:relative focus:outline-1',
+                      readOnly ? '' : 'pr-1'
+                    )}
+                    hideCaretDropdown={readOnly}
                   />
 
                   <Select
                     items={matchTypeItems}
                     selectedKey={filter.matchType ?? ''}
+                    disabled={readOnly}
                     onSelection={key =>
                       updateFilter(filter.id, {matchType: key as ProfileFilter['matchType']})
                     }
-                    className="rounded-none border-r-0 pr-1 gap-0 focus:z-50 focus:relative focus:outline-1"
+                    className={cx(
+                      'rounded-none border-r-0 gap-0 focus:z-50 focus:relative focus:outline-1',
+                      readOnly ? '' : 'pr-1'
+                    )}
+                    hideCaretDropdown={readOnly}
                   />
 
                   <Input
                     placeholder="Value"
                     value={filter.value}
+                    disabled={readOnly}
                     onChange={e => updateFilter(filter.id, {value: e.target.value})}
                     onKeyDown={handleKeyDown}
                     className="rounded-none w-36 text-sm focus:outline-1"
@@ -294,40 +313,44 @@ const ProfileFilters = (): JSX.Element => {
                 </>
               )}
 
-              <Button
-                variant="neutral"
-                onClick={() => {
-                  // If we're displaying local filters and this is the last one, reset everything
-                  if (localFilters.length > 0 && localFilters.length === 1) {
-                    resetFilters();
-                  }
-                  // If we're displaying applied filters and this is the last one, reset everything
-                  else if (localFilters.length === 0 && filtersToRender.length === 1) {
-                    resetFilters();
-                  }
-                  // Otherwise, just remove this specific filter
-                  else {
-                    removeFilter(filter.id);
-                  }
-                }}
-                className={cx(
-                  'h-[38px] p-3',
-                  filter.type != null ? 'rounded-none rounded-r-md' : 'rounded-l-none rounded-r-md'
-                )}
-              >
-                <Icon icon="mdi:close" className="h-4 w-4" />
-              </Button>
+              {!readOnly && (
+                <Button
+                  variant="neutral"
+                  onClick={() => {
+                    // If we're displaying local filters and this is the last one, reset everything
+                    if (localFilters.length > 0 && localFilters.length === 1) {
+                      resetFilters();
+                    }
+                    // If we're displaying applied filters and this is the last one, reset everything
+                    else if (localFilters.length === 0 && filtersToRender.length === 1) {
+                      resetFilters();
+                    }
+                    // Otherwise, just remove this specific filter
+                    else {
+                      removeFilter(filter.id);
+                    }
+                  }}
+                  className={cx(
+                    'h-[38px] p-3',
+                    filter.type != null
+                      ? 'rounded-none rounded-r-md'
+                      : 'rounded-l-none rounded-r-md'
+                  )}
+                >
+                  <Icon icon="mdi:close" className="h-4 w-4" />
+                </Button>
+              )}
             </div>
           );
         })}
 
-        {localFilters.length > 0 && (
+        {!readOnly && localFilters.length > 0 && (
           <Button variant="neutral" onClick={addFilter} className="p-3 h-[38px]">
             <Icon icon="mdi:filter-plus-outline" className="h-4 w-4" />
           </Button>
         )}
 
-        {localFilters.length === 0 && (appliedFilters?.length ?? 0) === 0 && (
+        {!readOnly && localFilters.length === 0 && (appliedFilters?.length ?? 0) === 0 && (
           <Button variant="neutral" onClick={addFilter} className="flex items-center gap-2">
             <Icon icon="mdi:filter-outline" className="h-4 w-4" />
             <span>Filter</span>
@@ -335,7 +358,7 @@ const ProfileFilters = (): JSX.Element => {
         )}
       </div>
 
-      {localFilters.length > 0 && (
+      {!readOnly && localFilters.length > 0 && (
         <Button
           variant="primary"
           onClick={onApplyFilters}

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}
             />

package/src/index.tsx

@@ -26,6 +26,9 @@ export * from './ProfileTypeSelector';
 export * from './SourceView';
 export * from './ProfileMetricsGraph';
 
+export {default as ProfileFilters} from './ProfileView/components/ProfileFilters';
+export {useProfileFiltersUrlState} from './ProfileView/components/ProfileFilters/useProfileFiltersUrlState';
+
 export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES = {
   dashboard_items: 'flamegraph',
 };