@parca/profile 0.16.269 → 0.16.274

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.274](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.273...@parca/profile@0.16.274) (2023-10-10)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.273](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.272...@parca/profile@0.16.273) (2023-10-10)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.272](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.271...@parca/profile@0.16.272) (2023-10-10)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.271](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.270...@parca/profile@0.16.271) (2023-10-10)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.270](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.269...@parca/profile@0.16.270) (2023-10-10)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.269](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.268...@parca/profile@0.16.269) (2023-10-04)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltipArrow/Content.js

@@ -1,33 +1,14 @@
 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.
-// 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 { useState } from 'react';
-import cx from 'classnames';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { Tooltip } from 'react-tooltip';
-import { Button, IconButton, useParcaContext } from '@parca/components';
-import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
+import { Icon } from '@iconify/react';
 import { getLastItem } from '@parca/utilities';
 import { hexifyAddress, truncateString, truncateStringReverse } from '../utils';
 import { ExpandOnHover } from './ExpandOnHoverValue';
 import { useGraphTooltip } from './useGraphTooltip';
 import { useGraphTooltipMetaInfo } from './useGraphTooltipMetaInfo';
-let timeoutHandle = null;
 const NoData = () => {
     return _jsx("span", { className: "rounded bg-gray-200 px-2 dark:bg-gray-800", children: "Not available" });
 };
 const GraphTooltipArrowContent = ({ table, unit, total, totalUnfiltered, row, level, isFixed, navigateTo, }) => {
-    const [isCopied, setIsCopied] = useState(false);
     const graphTooltipData = useGraphTooltip({
         table,
         unit,
@@ -36,29 +17,21 @@ const GraphTooltipArrowContent = ({ table, unit, total, totalUnfiltered, row, le
         row,
         level,
     });
-    const [_, setIsDocked] = useUserPreference(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
     if (graphTooltipData === null) {
         return _jsx(_Fragment, {});
     }
-    const onCopy = () => {
-        setIsCopied(true);
-        if (timeoutHandle !== null) {
-            clearTimeout(timeoutHandle);
-        }
-        timeoutHandle = setTimeout(() => setIsCopied(false), 3000);
-    };
     const { name, locationAddress, cumulativeText, diffText, diff, row: rowNumber } = graphTooltipData;
-    return (_jsx("div", { className: `flex text-sm ${isFixed ? 'w-full' : ''}`, children: _jsx("div", { className: `m-auto w-full ${isFixed ? 'w-full' : ''}`, children: _jsxs("div", { className: "min-h-52 flex w-[500px] flex-col justify-between rounded-lg border border-gray-300 bg-gray-50 p-3 shadow-lg dark:border-gray-500 dark:bg-gray-900", children: [_jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "mx-2", children: [_jsxs("div", { className: "flex h-10 items-start justify-between gap-4 break-all font-semibold", children: [row === 0 ? (_jsx("p", { children: "root" })) : (_jsx(_Fragment, { children: name !== '' ? (_jsx(CopyToClipboard, { onCopy: onCopy, text: name, children: _jsx("button", { className: "cursor-pointer text-left", children: name }) })) : (_jsx(_Fragment, { children: locationAddress !== 0n ? (_jsx(CopyToClipboard, { onCopy: onCopy, text: hexifyAddress(locationAddress), children: _jsx("button", { className: "cursor-pointer text-left", children: hexifyAddress(locationAddress) }) })) : (_jsx("p", { children: "unknown" })) })) })), _jsx(IconButton, { onClick: () => setIsDocked(true), icon: "mdi:dock-bottom", title: "Dock MetaInfo Panel" })] }), _jsx("table", { className: "my-2 w-full table-fixed pr-0 text-gray-700 dark:text-gray-300", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Cumulative" }), _jsx("td", { className: "w-3/4", children: _jsx(CopyToClipboard, { onCopy: onCopy, text: cumulativeText, children: _jsx("button", { className: "cursor-pointer", children: cumulativeText }) }) })] }), diff !== 0n && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Diff" }), _jsx("td", { className: "w-3/4", children: _jsx(CopyToClipboard, { onCopy: onCopy, text: diffText, children: _jsx("button", { className: "cursor-pointer", children: diffText }) }) })] })), _jsx(TooltipMetaInfo, { table: table, row: rowNumber, onCopy: onCopy, navigateTo: navigateTo })] }) })] }) }), _jsx("span", { className: "mx-2 block text-xs text-gray-500", children: isCopied ? 'Copied!' : 'Hold shift and click on a value to copy.' })] }) }) }));
+    return (_jsx("div", { className: `flex text-sm ${isFixed ? 'w-full' : ''}`, children: _jsx("div", { className: `m-auto w-full ${isFixed ? 'w-full' : ''}`, children: _jsxs("div", { className: "min-h-52 flex w-[500px] flex-col justify-between rounded-lg border border-gray-300 bg-gray-50 p-3 shadow-lg dark:border-gray-500 dark:bg-gray-900", children: [_jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "mx-2", children: [_jsx("div", { className: "flex h-10 items-start justify-between gap-4 break-all font-semibold", children: row === 0 ? (_jsx("p", { children: "root" })) : (_jsx("p", { children: name !== ''
+                                            ? name
+                                            : locationAddress !== 0n
+                                                ? hexifyAddress(locationAddress)
+                                                : 'unknown' })) }), _jsx("table", { className: "my-2 w-full table-fixed pr-0 text-gray-700 dark:text-gray-300", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Cumulative" }), _jsx("td", { className: "w-3/4", children: _jsx("div", { children: cumulativeText }) })] }), diff !== 0n && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Diff" }), _jsx("td", { className: "w-3/4", children: _jsx("div", { children: diffText }) })] })), _jsx(TooltipMetaInfo, { table: table, row: rowNumber, navigateTo: navigateTo })] }) })] }) }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to show context menu" })] })] }) }) }));
 };
-const TooltipMetaInfo = ({ table, 
-// total,
-// totalUnfiltered,
-onCopy, row, navigateTo, }) => {
-    const { labelPairs, functionFilename, file, openFile, isSourceAvailable, locationAddress, mappingFile, mappingBuildID, inlined, } = useGraphTooltipMetaInfo({ table, row, navigateTo });
-    const { enableSourcesView } = useParcaContext();
+const TooltipMetaInfo = ({ table, row, navigateTo, }) => {
+    const { labelPairs, functionFilename, file, locationAddress, mappingFile, mappingBuildID, inlined, } = useGraphTooltipMetaInfo({ table, row, navigateTo });
     const labels = labelPairs.map((l) => (_jsx("span", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: `${l[0]}="${l[1]}"` }, l[0])));
     const isMappingBuildIDAvailable = mappingBuildID !== null && mappingBuildID !== '';
     const inlinedText = inlined === null ? 'merged' : inlined ? 'yes' : 'no';
-    return (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "File" }), _jsx("td", { className: "w-3/4 break-all", children: functionFilename === '' ? (_jsx(NoData, {})) : (_jsxs("div", { className: "flex gap-4", children: [_jsx(CopyToClipboard, { onCopy: onCopy, text: file, children: _jsx("button", { className: "cursor-pointer whitespace-nowrap text-left", children: _jsx(ExpandOnHover, { value: file, displayValue: truncateStringReverse(file, 30) }) }) }), _jsxs("div", { className: cx('flex gap-2', { hidden: enableSourcesView === false }), children: [_jsx("div", { "data-tooltip-id": "open-source-button-help", "data-tooltip-content": "There is no source code uploaded for this build", children: _jsx(Button, { variant: 'neutral', onClick: () => openFile(), className: "shrink-0", disabled: !isSourceAvailable, children: "open" }) }), !isSourceAvailable ? _jsx(Tooltip, { id: "open-source-button-help" }) : null] })] })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Address" }), _jsx("td", { className: "w-3/4 break-all", children: locationAddress === 0n ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: hexifyAddress(locationAddress), children: _jsx("button", { className: "cursor-pointer", children: hexifyAddress(locationAddress) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Inlined" }), _jsx("td", { className: "w-3/4 break-all", children: _jsx(CopyToClipboard, { onCopy: onCopy, text: inlinedText, children: _jsx("button", { className: "cursor-pointer", children: inlinedText }) }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Binary" }), _jsx("td", { className: "w-3/4 break-all", children: mappingFile === null ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: mappingFile, children: _jsx("button", { className: "cursor-pointer", children: getLastItem(mappingFile) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Build Id" }), _jsx("td", { className: "w-3/4 break-all", children: !isMappingBuildIDAvailable ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: mappingBuildID, children: _jsx("button", { className: "cursor-pointer", children: truncateString(getLastItem(mappingBuildID), 28) }) })) })] }), labelPairs.length > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Labels" }), _jsx("td", { className: "w-3/4 break-all", children: labels })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "File" }), _jsx("td", { className: "w-3/4 break-all", children: functionFilename === '' ? (_jsx(NoData, {})) : (_jsx("div", { className: "flex gap-4", children: _jsx("div", { className: "whitespace-nowrap text-left", children: _jsx(ExpandOnHover, { value: file, displayValue: truncateStringReverse(file, 30) }) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Address" }), _jsx("td", { className: "w-3/4 break-all", children: locationAddress === 0n ? _jsx(NoData, {}) : _jsx("div", { children: hexifyAddress(locationAddress) }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Inlined" }), _jsx("td", { className: "w-3/4 break-all", children: inlinedText })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Binary" }), _jsx("td", { className: "w-3/4 break-all", children: (mappingFile != null ? getLastItem(mappingFile) : null) ?? _jsx(NoData, {}) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Build Id" }), _jsx("td", { className: "w-3/4 break-all", children: isMappingBuildIDAvailable ? (_jsx("div", { children: truncateString(getLastItem(mappingBuildID), 28) })) : (_jsx(NoData, {})) })] }), labelPairs.length > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Labels" }), _jsx("td", { className: "w-3/4 break-all", children: labels })] }))] }));
 };
 export default GraphTooltipArrowContent;

package/dist/GraphTooltipArrow/DockedGraphTooltip/index.js

@@ -11,35 +11,25 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { useState } from 'react';
+import { Icon } from '@iconify/react';
 import cx from 'classnames';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { Tooltip } from 'react-tooltip';
 import { useWindowSize } from 'react-use';
-import { Button, IconButton, useParcaContext } from '@parca/components';
-import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
+import { useParcaContext } from '@parca/components';
 import { getLastItem } from '@parca/utilities';
 import { hexifyAddress, truncateString, truncateStringReverse } from '../../utils';
-import { ExpandOnHover } from '../ExpandOnHoverValue';
 import { useGraphTooltip } from '../useGraphTooltip';
 import { useGraphTooltipMetaInfo } from '../useGraphTooltipMetaInfo';
-let timeoutHandle = null;
-const InfoSection = ({ title, value, onCopy, copyText, minWidth = '', }) => {
-    return (_jsxs("div", { className: cx('flex shrink-0 flex-col gap-1 p-2', { [minWidth]: minWidth != null }), children: [_jsx("p", { className: "text-sm font-medium leading-5 text-gray-500 dark:text-gray-400", children: title }), _jsx("div", { className: "text-lg font-normal text-gray-900 dark:text-gray-50", children: _jsx(CopyToClipboard, { onCopy: onCopy, text: copyText, children: _jsx("button", { children: value }) }) })] }));
+const InfoSection = ({ title, value, minWidth = '', }) => {
+    return (_jsxs("div", { className: cx('flex shrink-0 flex-col gap-1 p-2', { [minWidth]: minWidth != null }), children: [_jsx("p", { className: "text-sm font-medium leading-5 text-gray-500 dark:text-gray-400", children: title }), _jsx("div", { className: "text-lg font-normal text-gray-900 dark:text-gray-50", children: value })] }));
+};
+const NoData = () => {
+    return _jsx("span", { className: "rounded bg-gray-200 px-2 dark:bg-gray-800", children: "Not available" });
 };
 export const DockedGraphTooltip = ({ table, unit, total, totalUnfiltered, row, level, }) => {
     let { width } = useWindowSize();
-    const { profileExplorer, navigateTo, enableSourcesView } = useParcaContext();
+    const { profileExplorer, navigateTo } = useParcaContext();
     const { PaddingX } = profileExplorer ?? { PaddingX: 0 };
     width = width - PaddingX - 24;
-    const [isCopied, setIsCopied] = useState(false);
-    const onCopy = () => {
-        setIsCopied(true);
-        if (timeoutHandle !== null) {
-            clearTimeout(timeoutHandle);
-        }
-        timeoutHandle = setTimeout(() => setIsCopied(false), 3000);
-    };
     const graphTooltipData = useGraphTooltip({
         table,
         unit,
@@ -48,17 +38,18 @@ export const DockedGraphTooltip = ({ table, unit, total, totalUnfiltered, row, l
         row,
         level,
     });
-    const { labelPairs, functionFilename, file, openFile, isSourceAvailable, locationAddress, mappingFile, mappingBuildID, inlined, } = useGraphTooltipMetaInfo({ table, row: row ?? 0, navigateTo });
-    const [_, setIsDocked] = useUserPreference(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
+    const { labelPairs, functionFilename, file, locationAddress, mappingFile, mappingBuildID, inlined, } = useGraphTooltipMetaInfo({ table, row: row ?? 0, navigateTo });
     if (graphTooltipData === null) {
         return _jsx(_Fragment, {});
     }
     const { name, cumulativeText, diffText, diff } = graphTooltipData;
     const labels = labelPairs.map((l) => (_jsx("span", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: `${l[0]}="${l[1]}"` }, l[0])));
+    const isMappingBuildIDAvailable = mappingBuildID !== null && mappingBuildID !== '';
     const inlinedText = inlined === null ? 'merged' : inlined ? 'yes' : 'no';
-    const addressText = locationAddress !== 0n ? hexifyAddress(locationAddress) : 'unknown';
-    const fileText = functionFilename !== '' ? file : 'Not available';
-    return (_jsx("div", { className: "fixed bottom-0 z-20 overflow-hidden rounded-t-lg border-l border-r border-t border-gray-400 bg-white bg-opacity-90 px-8 py-3 dark:border-gray-600 dark:bg-black dark:bg-opacity-80", style: { width }, children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex justify-between gap-4", children: [row === 0 ? (_jsx("p", { children: "root" })) : (_jsx(_Fragment, { children: name !== '' ? (_jsx(CopyToClipboard, { onCopy: onCopy, text: name, children: _jsx("button", { className: "cursor-pointer text-left", children: name }) })) : (_jsx(_Fragment, { children: locationAddress !== 0n ? (_jsx(CopyToClipboard, { onCopy: onCopy, text: hexifyAddress(locationAddress), children: _jsx("button", { className: "cursor-pointer text-left", children: hexifyAddress(locationAddress) }) })) : (_jsx("p", { children: "unknown" })) })) })), _jsx(IconButton, { onClick: () => setIsDocked(false), icon: "mdi:dock-window", title: "Undock MetaInfo Panel" })] }), _jsxs("div", { className: "flex justify-between gap-3", children: [_jsx(InfoSection, { title: "Cumulative", value: cumulativeText, onCopy: onCopy, copyText: cumulativeText, minWidth: "w-44" }), diff !== 0n ? (_jsx(InfoSection, { title: "Diff", value: diffText, onCopy: onCopy, copyText: diffText, minWidth: "w-44" })) : null, _jsx(InfoSection, { title: "File", value: _jsxs("div", { className: "flex gap-2", children: [_jsx(ExpandOnHover, { value: fileText, displayValue: truncateStringReverse(fileText, 45) }), _jsxs("div", { className: cx('flex items-center gap-2', {
-                                            hidden: enableSourcesView === false || functionFilename === '',
-                                        }), children: [_jsx("div", { "data-tooltip-id": "open-source-button-help", "data-tooltip-content": "There is no source code uploaded for this build", children: _jsx(Button, { variant: 'neutral', onClick: () => openFile(), className: "shrink-0", disabled: !isSourceAvailable, children: "open" }) }), !isSourceAvailable ? _jsx(Tooltip, { id: "open-source-button-help" }) : null] })] }), onCopy: onCopy, copyText: file, minWidth: 'w-[460px]' }), _jsx(InfoSection, { title: "Address", value: addressText, onCopy: onCopy, copyText: addressText, minWidth: "w-44" }), _jsx(InfoSection, { title: "Inlined", value: inlinedText, onCopy: onCopy, copyText: inlinedText, minWidth: "w-44" }), _jsx(InfoSection, { title: "Binary", value: (mappingFile != null ? getLastItem(mappingFile) : null) ?? 'Not available', onCopy: onCopy, copyText: mappingFile ?? 'Not available', minWidth: "w-44" }), _jsx(InfoSection, { title: "Build ID", value: truncateString(getLastItem(mappingBuildID) ?? 'Not available', 28), onCopy: onCopy, copyText: mappingBuildID ?? 'Not available' })] }), _jsx("div", { children: _jsx("div", { className: "flex h-5 gap-1", children: labels }) }), _jsx("span", { className: "mx-2 block text-xs text-gray-500", children: isCopied ? 'Copied!' : 'Hold shift and click on a value to copy.' })] }) }));
+    const addressText = locationAddress !== 0n ? hexifyAddress(locationAddress) : _jsx(NoData, {});
+    return (_jsxs("div", { className: "fixed bottom-0 z-20 overflow-hidden rounded-t-lg border-l border-r border-t border-gray-400 bg-white bg-opacity-90 px-8 py-3 dark:border-gray-600 dark:bg-black dark:bg-opacity-80", style: { width }, children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "flex justify-between gap-4", children: row === 0 ? (_jsx("p", { children: "root" })) : (_jsx("p", { children: name !== ''
+                                ? name
+                                : locationAddress !== 0n
+                                    ? hexifyAddress(locationAddress)
+                                    : 'unknown' })) }), _jsxs("div", { className: "flex justify-between gap-3", children: [_jsx(InfoSection, { title: "Cumulative", value: cumulativeText, minWidth: "w-44" }), diff !== 0n ? _jsx(InfoSection, { title: "Diff", value: diffText, minWidth: "w-44" }) : null, _jsx(InfoSection, { title: "File", value: functionFilename !== '' ? truncateStringReverse(file, 45) : _jsx(NoData, {}), minWidth: 'w-[460px]' }), _jsx(InfoSection, { title: "Address", value: addressText, minWidth: "w-44" }), _jsx(InfoSection, { title: "Inlined", value: inlinedText, minWidth: "w-44" }), _jsx(InfoSection, { title: "Binary", value: (mappingFile != null ? getLastItem(mappingFile) : null) ?? _jsx(NoData, {}), minWidth: "w-44" }), _jsx(InfoSection, { title: "Build ID", value: isMappingBuildIDAvailable ? (_jsx("div", { children: truncateString(getLastItem(mappingBuildID), 28) })) : (_jsx(NoData, {})) })] }), _jsx("div", { children: _jsx("div", { className: "flex h-5 gap-1", children: labels }) })] }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to show context menu" })] })] }));
 };

package/dist/GraphTooltipArrow/index.d.ts

@@ -6,6 +6,7 @@ interface GraphTooltipProps {
     contextElement: Element | null;
     isFixed?: boolean;
     virtualContextElement?: boolean;
+    isContextMenuOpen?: boolean;
 }
-declare const GraphTooltip: ({ children, x, y, contextElement, isFixed, virtualContextElement, }: GraphTooltipProps) => React.JSX.Element;
+declare const GraphTooltip: ({ children, x, y, contextElement, isFixed, virtualContextElement, isContextMenuOpen, }: GraphTooltipProps) => React.JSX.Element;
 export default GraphTooltip;

package/dist/GraphTooltipArrow/index.js

@@ -14,7 +14,6 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { pointer } from 'd3-selection';
 import { usePopper } from 'react-popper';
-import { useKeyDown } from '@parca/components';
 const virtualElement = {
     getBoundingClientRect: () => 
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -40,7 +39,7 @@ function generateGetBoundingClientRect(contextElement, x = 0, y = 0) {
         bottom: domRect.y + y,
     });
 }
-const GraphTooltip = ({ children, x, y, contextElement, isFixed = false, virtualContextElement = true, }) => {
+const GraphTooltip = ({ children, x, y, contextElement, isFixed = false, virtualContextElement = true, isContextMenuOpen = false, }) => {
     const [popperElement, setPopperElement] = useState(null);
     const { styles, attributes, ...popperProps } = usePopper(virtualContextElement ? virtualElement : contextElement, popperElement, {
         placement: 'bottom-start',
@@ -61,12 +60,11 @@ const GraphTooltip = ({ children, x, y, contextElement, isFixed = false, virtual
             },
         ],
     });
-    const { isShiftDown } = useKeyDown();
     useEffect(() => {
         if (contextElement === null)
             return;
         const onMouseMove = (e) => {
-            if (isShiftDown) {
+            if (isContextMenuOpen) {
                 return;
             }
             let tooltipX = x;
@@ -83,7 +81,7 @@ const GraphTooltip = ({ children, x, y, contextElement, isFixed = false, virtual
         return () => {
             contextElement.removeEventListener('mousemove', onMouseMove);
         };
-    }, [contextElement, popperProps, isShiftDown, x, y]);
+    }, [contextElement, popperProps, x, y, isContextMenuOpen]);
     return isFixed ? (_jsx(_Fragment, { children: children })) : (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: "z-10", children: children }));
 };
 export default GraphTooltip;

package/dist/MetricsGraph/MetricsContextMenu/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { HighlightedSeries } from '../';
+interface MetricsContextMenuProps {
+    menuId: string;
+    onAddLabelMatcher: (labels: {
+        key: string;
+        value: string;
+    } | Array<{
+        key: string;
+        value: string;
+    }>) => void;
+    highlighted: HighlightedSeries | null;
+    trackVisibility: (isVisible: boolean) => void;
+}
+declare const MetricsContextMenu: ({ menuId, onAddLabelMatcher, highlighted, trackVisibility, }: MetricsContextMenuProps) => JSX.Element;
+export default MetricsContextMenu;

package/dist/MetricsGraph/MetricsContextMenu/index.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, 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.
+// 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 { Icon } from '@iconify/react';
+import { Item, Menu, Submenu } from 'react-contexify';
+const MetricsContextMenu = ({ menuId, onAddLabelMatcher, highlighted, trackVisibility, }) => {
+    const labels = highlighted?.labels.filter((label) => label.name !== '__name__');
+    const handleFocusOnSingleSeries = () => {
+        const labelsToAdd = labels?.map((label) => ({
+            key: label.name,
+            value: label.value,
+        }));
+        labelsToAdd !== undefined && onAddLabelMatcher(labelsToAdd);
+    };
+    return (_jsxs(Menu, { id: menuId, onVisibilityChange: trackVisibility, children: [_jsx(Item, { id: "focus-on-single-series", onClick: handleFocusOnSingleSeries, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "ph:star" }), _jsx("div", { children: "Focus only on this series" })] }) }), _jsx(Submenu, { label: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "material-symbols:add" }), _jsx("div", { children: "Add to query" })] }), style: { maxHeight: '300px', overflow: 'scroll' }, children: labels?.map((label) => (_jsx(Item, { id: label.name, onClick: () => onAddLabelMatcher({ key: label.name, value: label.value }), style: { maxWidth: '400px', overflow: 'hidden' }, children: _jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: `${label.name}="${label.value}"` }) }, label.name))) })] }));
+};
+export default MetricsContextMenu;

package/dist/MetricsGraph/MetricsTooltip/index.d.ts

@@ -4,10 +4,9 @@ interface Props {
     x: number;
     y: number;
     highlighted: HighlightedSeries;
-    onLabelClick: (labelName: string, labelValue: string) => void;
     contextElement: Element | null;
     sampleUnit: string;
     delta: boolean;
 }
-declare const MetricsTooltip: ({ x, y, highlighted, onLabelClick, contextElement, sampleUnit, delta, }: Props) => JSX.Element;
+declare const MetricsTooltip: ({ x, y, highlighted, contextElement, sampleUnit, delta, }: Props) => JSX.Element;
 export default MetricsTooltip;

package/dist/MetricsGraph/MetricsTooltip/index.js

@@ -12,6 +12,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useEffect, useState } from 'react';
+import { Icon } from '@iconify/react';
 import { usePopper } from 'react-popper';
 import { TextWithTooltip } from '@parca/components';
 import { formatDate, valueFormatter } from '@parca/utilities';
@@ -42,7 +43,7 @@ function generateGetBoundingClientRect(contextElement, x = 0, y = 0) {
         bottom: domRect.y + y,
     });
 }
-const MetricsTooltip = ({ x, y, highlighted, onLabelClick, contextElement, sampleUnit, delta, }) => {
+const MetricsTooltip = ({ x, y, highlighted, contextElement, sampleUnit, delta, }) => {
     const [popperElement, setPopperElement] = useState(null);
     const { styles, attributes, ...popperProps } = usePopper(virtualElement, popperElement, {
         placement: 'auto-start',
@@ -74,8 +75,6 @@ const MetricsTooltip = ({ x, y, highlighted, onLabelClick, contextElement, sampl
     const highlightedNameLabel = nameLabel !== undefined ? nameLabel : { name: '', value: '' };
     return (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: "z-10", children: _jsx("div", { className: "flex max-w-md", children: _jsx("div", { className: "m-auto", children: _jsx("div", { className: "rounded-lg border-gray-300 bg-gray-50 p-3 opacity-90 shadow-lg dark:border-gray-500 dark:bg-gray-900", style: { borderWidth: 1 }, children: _jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "ml-2 mr-6", children: [_jsx("span", { className: "font-semibold", children: highlightedNameLabel.value }), _jsx("span", { className: "my-2 block text-gray-700 dark:text-gray-300", children: _jsx("table", { className: "table-auto", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Value" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.valuePerSecond, sampleUnit, 5) })] }), delta && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Total" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.value, sampleUnit, 2) })] })), highlighted.duration > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Duration" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.duration, 'nanoseconds', 2) })] })), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "At" }), _jsx("td", { className: "w-3/4", children: formatDate(highlighted.timestamp, timeFormat) })] })] }) }) }), _jsx("span", { className: "my-2 block text-gray-500", children: highlighted.labels
                                         .filter((label) => label.name !== '__name__')
-                                        .map(function (label) {
-                                        return (_jsx("button", { type: "button", className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", onClick: () => onLabelClick(label.name, label.value), children: _jsx(TextWithTooltip, { text: `${label.name}="${label.value}"`, maxTextLength: 37, id: `tooltip-${label.name}-${label.value}` }) }, label.name));
-                                    }) }), _jsx("span", { className: "block text-xs text-gray-500", children: "Hold shift and click label to add to query." })] }) }) }) }) }) }));
+                                        .map((label) => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: _jsx(TextWithTooltip, { text: `${label.name}="${label.value}"`, maxTextLength: 37, id: `tooltip-${label.name}-${label.value}` }) }, label.name))) }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to add labels to query." })] })] }) }) }) }) }) }));
 };
 export default MetricsTooltip;

package/dist/MetricsGraph/index.d.ts

@@ -8,7 +8,13 @@ interface Props {
     to: number;
     profile: MergedProfileSelection | null;
     onSampleClick: (timestamp: number, value: number, labels: Label[]) => void;
-    onLabelClick: (labelName: string, labelValue: string) => void;
+    addLabelMatcher: (labels: {
+        key: string;
+        value: string;
+    } | Array<{
+        key: string;
+        value: string;
+    }>) => void;
     setTimeRange: (range: DateTimeRange) => void;
     sampleUnit: string;
     width?: number;
@@ -25,7 +31,7 @@ export interface HighlightedSeries {
     x: number;
     y: number;
 }
-declare const MetricsGraph: ({ data, from, to, profile, onSampleClick, onLabelClick, setTimeRange, sampleUnit, width, height, margin, }: Props) => JSX.Element;
+declare const MetricsGraph: ({ data, from, to, profile, onSampleClick, addLabelMatcher, setTimeRange, sampleUnit, width, height, margin, }: Props) => JSX.Element;
 export default MetricsGraph;
 export declare const parseValue: (value: string) => number | null;
-export declare const RawMetricsGraph: ({ data, from, to, profile, onSampleClick, onLabelClick, setTimeRange, width, height, margin, sampleUnit, }: Props) => JSX.Element;
+export declare const RawMetricsGraph: ({ data, from, to, profile, onSampleClick, addLabelMatcher, setTimeRange, width, height, margin, sampleUnit, }: Props) => JSX.Element;

package/dist/MetricsGraph/index.js

@@ -11,17 +11,19 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Fragment, useRef, useState } from 'react';
+import { Fragment, useCallback, useRef, useState } from 'react';
 import * as d3 from 'd3';
 import { pointer } from 'd3-selection';
 import throttle from 'lodash.throttle';
-import { DateTimeRange, useKeyDown } from '@parca/components';
+import { useContextMenu } from 'react-contexify';
+import { DateTimeRange } from '@parca/components';
 import { formatDate, formatForTimespan, sanitizeHighlightedValues, valueFormatter, } from '@parca/utilities';
 import MetricsCircle from '../MetricsCircle';
 import MetricsSeries from '../MetricsSeries';
+import MetricsContextMenu from './MetricsContextMenu';
 import MetricsTooltip from './MetricsTooltip';
-const MetricsGraph = ({ data, from, to, profile, onSampleClick, onLabelClick, setTimeRange, sampleUnit, width = 0, height = 0, margin = 0, }) => {
-    return (_jsx(RawMetricsGraph, { data: data, from: from, to: to, profile: profile, onSampleClick: onSampleClick, onLabelClick: onLabelClick, setTimeRange: setTimeRange, sampleUnit: sampleUnit, width: width, height: height, margin: margin }));
+const MetricsGraph = ({ data, from, to, profile, onSampleClick, addLabelMatcher, setTimeRange, sampleUnit, width = 0, height = 0, margin = 0, }) => {
+    return (_jsx(RawMetricsGraph, { data: data, from: from, to: to, profile: profile, onSampleClick: onSampleClick, addLabelMatcher: addLabelMatcher, setTimeRange: setTimeRange, sampleUnit: sampleUnit, width: width, height: height, margin: margin }));
 };
 export default MetricsGraph;
 export const parseValue = (value) => {
@@ -32,14 +34,14 @@ export const parseValue = (value) => {
 };
 const lineStroke = '1px';
 const lineStrokeHover = '2px';
-export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, onLabelClick, setTimeRange, width, height = 50, margin = 0, sampleUnit, }) => {
+export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLabelMatcher, setTimeRange, width, height = 50, margin = 0, sampleUnit, }) => {
     const graph = useRef(null);
     const [dragging, setDragging] = useState(false);
     const [hovering, setHovering] = useState(false);
     const [relPos, setRelPos] = useState(-1);
     const [pos, setPos] = useState([0, 0]);
+    const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
     const metricPointRef = useRef(null);
-    const { isShiftDown } = useKeyDown();
     // the time of the selected point is the start of the merge window
     const time = parseFloat(profile?.HistoryParams().merge_from);
     if (width === undefined || width == null) {
@@ -118,10 +120,6 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, onLabe
     };
     const highlighted = getClosest();
     const onMouseDown = (e) => {
-        // if shift is down, disable mouse behavior
-        if (isShiftDown) {
-            return;
-        }
         // only left mouse button
         if (e.button !== 0) {
             return;
@@ -144,9 +142,6 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, onLabe
         }
     };
     const onMouseUp = (e) => {
-        if (isShiftDown) {
-            return;
-        }
         setDragging(false);
         if (relPos === -1) {
             // MouseDown happened outside of this element.
@@ -173,8 +168,7 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, onLabe
     };
     const throttledSetPos = throttle(setPos, 20);
     const onMouseMove = (e) => {
-        // do not update position if shift is down because this means the user is locking the tooltip
-        if (isShiftDown) {
+        if (isContextMenuOpen) {
             return;
         }
         // X/Y coordinate array relative to svg
@@ -228,9 +222,21 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, onLabe
         };
     };
     const selected = findSelectedProfile();
-    return (_jsxs(_Fragment, { children: [highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (_jsx("div", { onMouseMove: onMouseMove, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), children: _jsx(MetricsTooltip, { x: pos[0] + margin, y: pos[1] + margin, highlighted: highlighted, onLabelClick: onLabelClick, contextElement: graph.current, sampleUnit: sampleUnit, delta: profile !== null ? profile?.query.profType.delta : false }) })), _jsx("div", { ref: graph, onMouseEnter: function () {
+    const MENU_ID = 'metrics-context-menu';
+    const { show } = useContextMenu({
+        id: MENU_ID,
+    });
+    const displayMenu = useCallback((e) => {
+        show({
+            event: e,
+        });
+    }, [show]);
+    const trackVisibility = (isVisible) => {
+        setIsContextMenuOpen(isVisible);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(MetricsContextMenu, { onAddLabelMatcher: addLabelMatcher, menuId: MENU_ID, highlighted: highlighted, trackVisibility: trackVisibility }), highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (_jsx("div", { onMouseMove: onMouseMove, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), children: !isContextMenuOpen && (_jsx(MetricsTooltip, { x: pos[0] + margin, y: pos[1] + margin, highlighted: highlighted, contextElement: graph.current, sampleUnit: sampleUnit, delta: profile !== null ? profile?.query.profType.delta : false })) })), _jsx("div", { ref: graph, onMouseEnter: function () {
                     setHovering(true);
-                }, onMouseLeave: () => setHovering(false), children: _jsxs("svg", { width: `${width}px`, height: `${height + margin}px`, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseMove: onMouseMove, children: [_jsx("g", { transform: `translate(${margin}, 0)`, children: dragging && (_jsx("g", { className: "zoom-time-rect", children: _jsx("rect", { className: "bar", x: pos[0] - relPos < 0 ? pos[0] : relPos, y: 0, height: height, width: Math.abs(pos[0] - relPos), fill: 'rgba(0, 0, 0, 0.125)' }) })) }), _jsxs("g", { transform: `translate(${margin}, ${margin})`, children: [_jsxs("g", { className: "y axis", textAnchor: "end", fontSize: "10", fill: "none", children: [yScale.ticks(5).map((d, i) => (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", 
+                }, onMouseLeave: () => setHovering(false), onContextMenu: displayMenu, children: _jsxs("svg", { width: `${width}px`, height: `${height + margin}px`, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseMove: onMouseMove, children: [_jsx("g", { transform: `translate(${margin}, 0)`, children: dragging && (_jsx("g", { className: "zoom-time-rect", children: _jsx("rect", { className: "bar", x: pos[0] - relPos < 0 ? pos[0] : relPos, y: 0, height: height, width: Math.abs(pos[0] - relPos), fill: 'rgba(0, 0, 0, 0.125)' }) })) }), _jsxs("g", { transform: `translate(${margin}, ${margin})`, children: [_jsxs("g", { className: "y axis", textAnchor: "end", fontSize: "10", fill: "none", children: [yScale.ticks(5).map((d, i) => (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", 
                                                     /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
                                                     transform: `translate(0, ${yScale(d)})`, children: [_jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x2: -6 }), _jsx("text", { fill: "currentColor", x: -9, dy: '0.32em', children: valueFormatter(d, sampleUnit, 1) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(from), x2: xScale(to), y1: yScale(d), y2: yScale(d) }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`))), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: 0, y1: 0, y2: height - margin }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(to), x2: xScale(to), y1: 0, y2: height - margin })] }), _jsxs("g", { className: "x axis", fill: "none", fontSize: "10", textAnchor: "middle", transform: `translate(0,${height - margin})`, children: [xScale.ticks(5).map((d, i) => (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", 
                                                     /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */

package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { Table } from 'apache-arrow';
+import { type NavigateFunction } from '@parca/utilities';
+interface ContextMenuProps {
+    menuId: string;
+    table: Table<any>;
+    unit: string;
+    total: bigint;
+    totalUnfiltered: bigint;
+    row: number;
+    level: number;
+    navigateTo: NavigateFunction;
+    trackVisibility: (isVisible: boolean) => void;
+    curPath: string[];
+    setCurPath: (path: string[]) => void;
+    hideMenu: () => void;
+}
+declare const ContextMenu: ({ menuId, table, unit, total, totalUnfiltered, row, level, navigateTo, trackVisibility, curPath, setCurPath, hideMenu, }: ContextMenuProps) => JSX.Element;
+export default ContextMenu;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.js

@@ -0,0 +1,75 @@
+import { Fragment as _Fragment, jsx as _jsx, 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.
+// 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 { Icon } from '@iconify/react';
+import { Item, Menu, Separator, Submenu } from 'react-contexify';
+import { Tooltip } from 'react-tooltip';
+import { useParcaContext } from '@parca/components';
+import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
+import { useGraphTooltip } from '../../GraphTooltipArrow/useGraphTooltip';
+import { useGraphTooltipMetaInfo } from '../../GraphTooltipArrow/useGraphTooltipMetaInfo';
+import { hexifyAddress, truncateString } from '../../utils';
+const ContextMenu = ({ menuId, table, unit, total, totalUnfiltered, row, level, navigateTo, trackVisibility, curPath, setCurPath, hideMenu, }) => {
+    const { enableSourcesView } = useParcaContext();
+    const [isGraphTooltipDocked, setIsDocked] = useUserPreference(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
+    const contextMenuData = useGraphTooltip({
+        table,
+        unit,
+        total,
+        totalUnfiltered,
+        row,
+        level,
+    });
+    const { functionFilename, file, openFile, isSourceAvailable, locationAddress, mappingFile, mappingBuildID, inlined, } = useGraphTooltipMetaInfo({ table, row, navigateTo });
+    if (contextMenuData === null) {
+        return _jsx(_Fragment, {});
+    }
+    const { name, cumulativeText, diffText, diff } = contextMenuData;
+    const isMappingBuildIDAvailable = mappingBuildID !== null && mappingBuildID !== '';
+    const handleViewSourceFile = () => openFile();
+    const handleResetView = () => {
+        setCurPath([]);
+        return hideMenu();
+    };
+    const handleDockTooltip = () => {
+        return isGraphTooltipDocked ? setIsDocked(false) : setIsDocked(true);
+    };
+    const handleCopyItem = (text) => {
+        void navigator.clipboard.writeText(text);
+    };
+    const functionName = row === 0
+        ? ''
+        : name !== ''
+            ? name
+            : locationAddress !== 0n
+                ? hexifyAddress(locationAddress)
+                : '';
+    const buildIdText = !isMappingBuildIDAvailable ? '' : mappingBuildID;
+    const inlinedText = inlined === null ? 'merged' : inlined ? 'yes' : 'no';
+    const valuesToCopy = [
+        { id: 'Function name', value: functionName },
+        { id: 'Cumulative', value: cumulativeText ?? '' },
+        { id: 'Diff', value: diff !== 0n ? diffText : '' },
+        {
+            id: 'File',
+            value: functionFilename === '' ? functionFilename : file,
+        },
+        { id: 'Address', value: locationAddress === 0n ? '' : hexifyAddress(locationAddress) },
+        { id: 'Inlined', value: inlinedText },
+        { id: 'Binary', value: mappingFile ?? '' },
+        { id: 'Build Id', value: buildIdText },
+    ];
+    const nonEmptyValuesToCopy = valuesToCopy.filter(({ value }) => value !== '');
+    return (_jsxs(Menu, { id: menuId, onVisibilityChange: trackVisibility, children: [_jsxs(Item, { id: "view-source-file", onClick: handleViewSourceFile, disabled: enableSourcesView === false || !isSourceAvailable, children: [_jsx("div", { "data-tooltip-id": "view-source-file-help", "data-tooltip-content": "There is no source code uploaded for this build", children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "wpf:view-file" }), _jsx("div", { children: "View source file" })] }) }), !isSourceAvailable ? _jsx(Tooltip, { id: "view-source-file-help" }) : null] }), _jsx(Item, { id: "reset-view", onClick: handleResetView, disabled: curPath.length === 0, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "system-uicons:reset" }), _jsx("div", { children: "Reset view" })] }) }), _jsx(Submenu, { label: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "ph:copy" }), _jsx("div", { children: "Copy" })] }), children: nonEmptyValuesToCopy.map(({ id, value }) => (_jsx(Item, { id: id, onClick: () => handleCopyItem(value), children: _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "text-sm", children: id }), _jsx("div", { className: "text-xs", children: truncateString(value, 30) })] }) }, id))) }), _jsx(Separator, {}), _jsx(Item, { id: "dock-tooltip", onClick: handleDockTooltip, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "bx:dock-bottom" }), isGraphTooltipDocked ? 'Undock tooltip' : 'Dock tooltip'] }) })] }));
+};
+export default ContextMenu;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Table } from 'apache-arrow';
+import 'react-contexify/dist/ReactContexify.css';
 export declare const RowHeight = 26;
 interface IcicleGraphNodesProps {
     table: Table<any>;
@@ -21,6 +22,7 @@ interface IcicleGraphNodesProps {
     sortBy: string;
     darkMode: boolean;
     compareMode: boolean;
+    isContextMenuOpen: boolean;
 }
 export declare const IcicleGraphNodes: React.NamedExoticComponent<IcicleGraphNodesProps>;
 export interface mappingColors {
@@ -47,6 +49,7 @@ interface IcicleNodeProps {
     sortBy: string;
     darkMode: boolean;
     compareMode: boolean;
+    isContextMenuOpen: boolean;
 }
 export declare const IcicleNode: React.NamedExoticComponent<IcicleNodeProps>;
 export {};