@parca/profile 0.16.22 → 0.16.43

package/CHANGELOG.md

@@ -3,137 +3,124 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.16.22](https://github.com/parca-dev/parca/compare/ui-v0.16.20...ui-v0.16.22) (2022-09-27)
+## [0.16.43](https://github.com/parca-dev/parca/compare/ui-v0.16.42...ui-v0.16.43) (2022-10-13)
 
 **Note:** Version bump only for package @parca/profile
 
+## [0.16.42](https://github.com/parca-dev/parca/compare/ui-v0.16.41...ui-v0.16.42) (2022-10-13)
 
+**Note:** Version bump only for package @parca/profile
 
+## [0.16.40](https://github.com/parca-dev/parca/compare/ui-v0.16.39...ui-v0.16.40) (2022-10-10)
 
+**Note:** Version bump only for package @parca/profile
 
-## [0.16.21](https://github.com/parca-dev/parca/compare/ui-v0.16.20...ui-v0.16.21) (2022-09-27)
+## [0.16.39](https://github.com/parca-dev/parca/compare/ui-v0.16.38...ui-v0.16.39) (2022-10-10)
 
 **Note:** Version bump only for package @parca/profile
 
+## [0.16.38](https://github.com/parca-dev/parca/compare/ui-v0.16.37...ui-v0.16.38) (2022-10-10)
 
+## [0.16.32](https://github.com/parca-dev/parca/compare/ui-v0.16.30...ui-v0.16.32) (2022-10-06)
 
+## [0.16.30](https://github.com/parca-dev/parca/compare/ui-v0.16.27...ui-v0.16.30) (2022-10-01)
 
-
-## [0.16.20](https://github.com/parca-dev/parca/compare/ui-v0.16.19...ui-v0.16.20) (2022-09-27)
+## 0.16.27 (2022-09-29)
 
 **Note:** Version bump only for package @parca/profile
 
+## [0.16.32](https://github.com/parca-dev/parca/compare/ui-v0.16.31...ui-v0.16.32) (2022-10-06)
 
+**Note:** Version bump only for package @parca/profile
 
-
-
-## [0.16.19](https://github.com/parca-dev/parca/compare/ui-v0.16.18...ui-v0.16.19) (2022-09-26)
+## [0.16.28](https://github.com/parca-dev/parca/compare/ui-v0.16.27...ui-v0.16.28) (2022-09-30)
 
 **Note:** Version bump only for package @parca/profile
 
+## [0.16.24](https://github.com/parca-dev/parca/compare/ui-v0.16.23...ui-v0.16.24) (2022-09-27)
 
+## [0.16.20](https://github.com/parca-dev/parca/compare/ui-v0.16.19...ui-v0.16.20) (2022-09-27)
 
+## [0.16.19](https://github.com/parca-dev/parca/compare/ui-v0.16.18...ui-v0.16.19) (2022-09-26)
 
+## [0.16.18](https://github.com/parca-dev/parca/compare/ui-v0.16.17...ui-v0.16.18) (2022-09-26)
 
-## [0.16.16](https://github.com/parca-dev/parca/compare/ui-v0.16.15...ui-v0.16.16) (2022-09-26)
+## [0.16.2](https://github.com/parca-dev/parca/compare/ui-v0.13.4...ui-v0.16.2) (2022-09-14)
+
+## [0.13.4](https://github.com/parca-dev/parca/compare/ui-v0.13.3...ui-v0.13.4) (2022-06-07)
 
 **Note:** Version bump only for package @parca/profile
 
+## [0.16.23](https://github.com/parca-dev/parca/compare/ui-v0.16.20...ui-v0.16.23) (2022-09-27)
 
+**Note:** Version bump only for package @parca/profile
 
+## [0.16.22](https://github.com/parca-dev/parca/compare/ui-v0.16.20...ui-v0.16.22) (2022-09-27)
 
+**Note:** Version bump only for package @parca/profile
 
-# [0.16.0](https://github.com/parca-dev/parca/compare/ui-v0.15.26...ui-v0.16.0) (2022-09-13)
+## [0.16.21](https://github.com/parca-dev/parca/compare/ui-v0.16.20...ui-v0.16.21) (2022-09-27)
 
 **Note:** Version bump only for package @parca/profile
 
+## [0.16.20](https://github.com/parca-dev/parca/compare/ui-v0.16.19...ui-v0.16.20) (2022-09-27)
 
+**Note:** Version bump only for package @parca/profile
 
+## [0.16.19](https://github.com/parca-dev/parca/compare/ui-v0.16.18...ui-v0.16.19) (2022-09-26)
 
+**Note:** Version bump only for package @parca/profile
 
-## [0.15.25](https://github.com/parca-dev/parca/compare/ui-v0.15.24...ui-v0.15.25) (2022-09-13)
+## [0.16.16](https://github.com/parca-dev/parca/compare/ui-v0.16.15...ui-v0.16.16) (2022-09-26)
 
 **Note:** Version bump only for package @parca/profile
 
+# [0.16.0](https://github.com/parca-dev/parca/compare/ui-v0.15.26...ui-v0.16.0) (2022-09-13)
 
+**Note:** Version bump only for package @parca/profile
 
+## [0.15.25](https://github.com/parca-dev/parca/compare/ui-v0.15.24...ui-v0.15.25) (2022-09-13)
 
+**Note:** Version bump only for package @parca/profile
 
 ## [0.15.24](https://github.com/parca-dev/parca/compare/ui-v0.15.23...ui-v0.15.24) (2022-09-13)
 
-
-
 ## [0.15.19](https://github.com/parca-dev/parca/compare/ui-v0.15.17...ui-v0.15.19) (2022-09-08)
 
-
-
 ## [0.15.17](https://github.com/parca-dev/parca/compare/ui-v0.15.10...ui-v0.15.17) (2022-09-07)
 
-
 ### Bug Fixes
 
-* **ui:** type all the things (string mode) ([e91ac9d](https://github.com/parca-dev/parca/commit/e91ac9deb8a200ed3c9a9c5d81ae71e13d49466e))
-
-
+- **ui:** type all the things (string mode) ([e91ac9d](https://github.com/parca-dev/parca/commit/e91ac9deb8a200ed3c9a9c5d81ae71e13d49466e))
 
 ## 0.15.10 (2022-08-30)
 
-
-
-
-
 ## [0.15.19](https://github.com/parca-dev/parca/compare/ui-v0.15.18...ui-v0.15.19) (2022-09-08)
 
-
-
 ## [0.15.17](https://github.com/parca-dev/parca/compare/ui-v0.15.10...ui-v0.15.17) (2022-09-07)
 
-
-
 ## [0.15.10](https://github.com/parca-dev/parca/compare/ui-v0.15.8...ui-v0.15.10) (2022-08-30)
 
 **Note:** Version bump only for package @parca/profile
 
-
-
-
-
 ## [0.15.18](https://github.com/parca-dev/parca/compare/ui-v0.15.17...ui-v0.15.18) (2022-09-08)
 
-
-
 ## [0.15.10](https://github.com/parca-dev/parca/compare/ui-v0.15.8...ui-v0.15.10) (2022-08-30)
 
 **Note:** Version bump only for package @parca/profile
 
-
-
-
-
 ## [0.15.17](https://github.com/parca-dev/parca/compare/ui-v0.15.16...ui-v0.15.17) (2022-09-07)
 
-
-
 ## [0.15.11](https://github.com/parca-dev/parca/compare/ui-v0.15.10...ui-v0.15.11) (2022-09-01)
 
-
-
 ## [0.15.10](https://github.com/parca-dev/parca/compare/ui-v0.15.2...ui-v0.15.10) (2022-08-30)
 
-
-
 ## [0.15.2](https://github.com/parca-dev/parca/compare/ui-v0.15.1...ui-v0.15.2) (2022-08-25)
 
-
-
 ## 0.15.1 (2022-08-25)
 
 **Note:** Version bump only for package @parca/profile
 
-
-
-
-
 ## [0.15.11](https://github.com/parca-dev/parca/compare/ui-v0.15.10...ui-v0.15.11) (2022-09-01)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/Edge/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface IEdge {
     source: number;
     target: number;

package/dist/Callgraph/Node/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface INode {
     id: number;
     x: number;
@@ -15,5 +16,5 @@ interface Props {
     setHoveredNode: (node: INode | null) => void;
     nodeRadius: number;
 }
-declare const Node: ({ node, hoveredNode, setHoveredNode, nodeRadius, }: Props) => JSX.Element;
+declare const Node: ({ node, hoveredNode, setHoveredNode, nodeRadius: defaultRadius, }: Props) => JSX.Element;
 export default Node;

package/dist/Callgraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Callgraph as CallgraphType } from '@parca/client';
 export interface Props {
     graph: CallgraphType;

package/dist/GraphTooltip/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CallgraphNode, FlamegraphRootNode } from '@parca/client';
 interface GraphTooltipProps {
     x: number;

package/dist/GraphTooltip/index.js

@@ -21,10 +21,24 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getLastItem, valueFormatter } from '@parca/functions';
-import { hexifyAddress } from '../';
+// 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 { CopyToClipboard } from 'react-copy-to-clipboard';
 import { useState, useEffect } from 'react';
 import { usePopper } from 'react-popper';
+import { getLastItem, valueFormatter } from '@parca/functions';
+import useIsShiftDown from '@parca/components/src/hooks/useIsShiftDown';
+import { hexifyAddress } from '../';
 var virtualElement = {
     getBoundingClientRect: function () {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -55,21 +69,37 @@ function generateGetBoundingClientRect(contextElement, x, y) {
     };
 }
 var TooltipMetaInfo = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var hoveringNode = _a.hoveringNode;
+    var _b, _c, _d, _e;
+    var hoveringNode = _a.hoveringNode, onCopy = _a.onCopy;
     if (hoveringNode.meta === undefined)
         return _jsx(_Fragment, {});
+    var getTextForFile = function (hoveringNode) {
+        var _a, _b, _c, _d;
+        if (hoveringNode.meta === undefined)
+            return '<unknown>';
+        // @ts-expect-error
+        return "".concat(hoveringNode.meta.function.filename, " ").concat(((_a = hoveringNode.meta.line) === null || _a === void 0 ? void 0 : _a.line) !== undefined && ((_b = hoveringNode.meta.line) === null || _b === void 0 ? void 0 : _b.line) !== '0'
+            ? " +".concat(hoveringNode.meta.line.line.toString())
+            : "".concat(((_c = hoveringNode.meta.function) === null || _c === void 0 ? void 0 : _c.startLine) !== undefined &&
+                ((_d = hoveringNode.meta.function) === null || _d === void 0 ? void 0 : _d.startLine) !== '0'
+                ? " +".concat(hoveringNode.meta.function.startLine)
+                : ''));
+    };
     return (_jsxs(_Fragment, { children: [((_b = hoveringNode.meta.function) === null || _b === void 0 ? void 0 : _b.filename) !== undefined &&
-                ((_c = hoveringNode.meta.function) === null || _c === void 0 ? void 0 : _c.filename) !== '' && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "File" })), _jsxs("td", __assign({ className: "w-4/5 break-all" }, { children: [hoveringNode.meta.function.filename, ((_d = hoveringNode.meta.line) === null || _d === void 0 ? void 0 : _d.line) !== undefined && ((_e = hoveringNode.meta.line) === null || _e === void 0 ? void 0 : _e.line) !== '0'
-                                ? " +".concat(hoveringNode.meta.line.line.toString())
-                                : "".concat(((_f = hoveringNode.meta.function) === null || _f === void 0 ? void 0 : _f.startLine) !== undefined &&
-                                    ((_g = hoveringNode.meta.function) === null || _g === void 0 ? void 0 : _g.startLine) !== '0'
-                                    ? " +".concat(hoveringNode.meta.function.startLine)
-                                    : '')] }))] })), ((_h = hoveringNode.meta.location) === null || _h === void 0 ? void 0 : _h.address) !== undefined &&
-                ((_j = hoveringNode.meta.location) === null || _j === void 0 ? void 0 : _j.address) !== '0' && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "Address" })), _jsx("td", __assign({ className: "w-4/5 break-all" }, { children: ' 0x' + hoveringNode.meta.location.address.toString() }))] })), hoveringNode.meta.mapping !== undefined && hoveringNode.meta.mapping.file !== '' && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "Binary" })), _jsx("td", __assign({ className: "w-4/5 break-all" }, { children: getLastItem(hoveringNode.meta.mapping.file) }))] }))] }));
+                ((_c = hoveringNode.meta.function) === null || _c === void 0 ? void 0 : _c.filename) !== '' && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "File" })), _jsx("td", __assign({ className: "w-4/5 break-all" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: getTextForFile(hoveringNode) }, { children: _jsx("button", __assign({ className: "cursor-pointer text-left" }, { children: getTextForFile(hoveringNode) })) })) }))] })), ((_d = hoveringNode.meta.location) === null || _d === void 0 ? void 0 : _d.address) !== undefined &&
+                ((_e = hoveringNode.meta.location) === null || _e === void 0 ? void 0 : _e.address) !== '0' && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "Address" })), _jsx("td", __assign({ className: "w-4/5 break-all" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: ' 0x' + hoveringNode.meta.location.address.toString() }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: ' 0x' + hoveringNode.meta.location.address.toString() })) })) }))] })), hoveringNode.meta.mapping !== undefined && hoveringNode.meta.mapping.file !== '' && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "Binary" })), _jsx("td", __assign({ className: "w-4/5 break-all" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hoveringNode.meta.mapping.file }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: getLastItem(hoveringNode.meta.mapping.file) })) })) }))] })), hoveringNode.meta.mapping !== undefined && hoveringNode.meta.mapping.buildId !== '' && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "Build Id" })), _jsx("td", __assign({ className: "w-4/5 break-all" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hoveringNode.meta.mapping.buildId }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: getLastItem(hoveringNode.meta.mapping.buildId) })) })) }))] }))] }));
 };
+var timeoutHandle = null;
 var GraphTooltipContent = function (_a) {
     var hoveringNode = _a.hoveringNode, unit = _a.unit, total = _a.total, isFixed = _a.isFixed;
+    var _b = useState(false), isCopied = _b[0], setIsCopied = _b[1];
+    var onCopy = function () {
+        setIsCopied(true);
+        if (timeoutHandle !== null) {
+            clearTimeout(timeoutHandle);
+        }
+        timeoutHandle = setTimeout(function () { return setIsCopied(false); }, 3000);
+    };
     var hoveringNodeCumulative = parseFloat(hoveringNode.cumulative);
     var diff = hoveringNode.diff === undefined ? 0 : parseFloat(hoveringNode.diff);
     var prevValue = hoveringNodeCumulative - diff;
@@ -78,10 +108,13 @@ var GraphTooltipContent = function (_a) {
     var diffValueText = diffSign + valueFormatter(diff, unit, 1);
     var diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
     var diffText = "".concat(diffValueText, " (").concat(diffPercentageText, ")");
-    var metaRows = hoveringNode.meta === undefined ? _jsx(_Fragment, {}) : _jsx(TooltipMetaInfo, { hoveringNode: hoveringNode });
+    var metaRows = hoveringNode.meta === undefined ? (_jsx(_Fragment, {})) : (_jsx(TooltipMetaInfo, { onCopy: onCopy, hoveringNode: hoveringNode }));
+    var getTextForCumulative = function (hoveringNodeCumulative) {
+        return "".concat(valueFormatter(hoveringNodeCumulative, unit, 2), " (\n      ").concat(((hoveringNodeCumulative * 100) / total).toFixed(2), "%)");
+    };
     return (_jsx("div", __assign({ className: "flex ".concat(isFixed ? 'w-full h-36' : '') }, { children: _jsx("div", __assign({ className: "m-auto w-full ".concat(isFixed ? 'w-full h-36' : '') }, { children: _jsx("div", __assign({ className: "border-gray-300 dark:border-gray-500 bg-gray-50 dark:bg-gray-900 rounded-lg p-3 shadow-lg opacity-90", style: { borderWidth: 1 } }, { children: _jsx("div", __assign({ className: "flex flex-row" }, { children: _jsxs("div", __assign({ className: "ml-2 mr-6" }, { children: [_jsx("span", __assign({ className: "font-semibold break-all" }, { children: hoveringNode.meta === undefined ? (_jsx("p", { children: "root" })) : (_jsx(_Fragment, { children: hoveringNode.meta.function !== undefined &&
-                                        hoveringNode.meta.function.name !== '' ? (_jsx("p", { children: hoveringNode.meta.function.name })) : (_jsx(_Fragment, { children: hoveringNode.meta.location !== undefined &&
-                                            parseInt(hoveringNode.meta.location.address, 10) !== 0 ? (_jsx("p", { children: hexifyAddress(hoveringNode.meta.location.address) })) : (_jsx("p", { children: "unknown" })) })) })) })), _jsx("span", __assign({ className: "text-gray-700 dark:text-gray-300 my-2" }, { children: _jsx("table", __assign({ className: "table-fixed" }, { children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "Cumulative" })), _jsxs("td", __assign({ className: "w-4/5" }, { children: [valueFormatter(hoveringNodeCumulative, unit, 2), " (", ((hoveringNodeCumulative * 100) / total).toFixed(2), "%)"] }))] }), hoveringNode.diff !== undefined && diff !== 0 && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "Diff" })), _jsx("td", __assign({ className: "w-4/5" }, { children: diffText }))] })), metaRows] }) })) }))] })) })) })) })) })));
+                                        hoveringNode.meta.function.name !== '' ? (_jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hoveringNode.meta.function.name }, { children: _jsx("button", __assign({ className: "cursor-pointer text-left" }, { children: hoveringNode.meta.function.name })) }))) : (_jsx(_Fragment, { children: hoveringNode.meta.location !== undefined &&
+                                            parseInt(hoveringNode.meta.location.address, 10) !== 0 ? (_jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hexifyAddress(hoveringNode.meta.location.address) }, { children: _jsx("button", __assign({ className: "cursor-pointer text-left" }, { children: hexifyAddress(hoveringNode.meta.location.address) })) }))) : (_jsx("p", { children: "unknown" })) })) })) })), _jsx("span", __assign({ className: "text-gray-700 dark:text-gray-300 my-2" }, { children: _jsx("table", __assign({ className: "table-fixed" }, { children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "Cumulative" })), _jsx("td", __assign({ className: "w-4/5" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: getTextForCumulative(hoveringNodeCumulative) }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: getTextForCumulative(hoveringNodeCumulative) })) })) }))] }), hoveringNode.diff !== undefined && diff !== 0 && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "Diff" })), _jsx("td", __assign({ className: "w-4/5" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: diffText }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: diffText })) })) }))] })), metaRows] }) })) })), _jsx("span", __assign({ className: "block text-gray-500 text-xs mt-2" }, { children: isCopied ? 'Copied!' : 'Hold shift and click on a value to copy.' }))] })) })) })) })) })));
 };
 var GraphTooltip = function (_a) {
     var x = _a.x, y = _a.y, unit = _a.unit, total = _a.total, hoveringNode = _a.hoveringNode, contextElement = _a.contextElement, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, _c = _a.virtualContextElement, virtualContextElement = _c === void 0 ? true : _c;
@@ -106,12 +139,15 @@ var GraphTooltip = function (_a) {
         ],
     }), styles = _e.styles, attributes = _e.attributes, popperProps = __rest(_e, ["styles", "attributes"]);
     var update = popperProps.update;
+    var isShiftDown = useIsShiftDown();
     useEffect(function () {
         if (contextElement != null) {
+            if (isShiftDown)
+                return;
             virtualElement.getBoundingClientRect = generateGetBoundingClientRect(contextElement, x, y);
             void (update === null || update === void 0 ? void 0 : update());
         }
-    }, [x, y, contextElement, update]);
+    }, [x, y, contextElement, update, isShiftDown]);
     if (hoveringNode === undefined || hoveringNode == null)
         return _jsx(_Fragment, {});
     return isFixed ? (_jsx(GraphTooltipContent, { hoveringNode: hoveringNode, unit: unit, total: total, isFixed: isFixed })) : (_jsx("div", __assign({ ref: setPopperElement, style: styles.popper }, attributes.popper, { children: _jsx(GraphTooltipContent, { hoveringNode: hoveringNode, unit: unit, total: total, isFixed: isFixed }) })));

package/dist/IcicleGraph.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Flamegraph, FlamegraphNode, FlamegraphRootNode } from '@parca/client';
 interface IcicleGraphProps {
     graph: Flamegraph;

package/dist/IcicleGraph.js

@@ -29,6 +29,7 @@ import { scaleLinear } from 'd3-scale';
 import GraphTooltip from './GraphTooltip';
 import { getLastItem, diffColor, isSearchMatch } from '@parca/functions';
 import { useAppSelector, selectDarkMode, selectSearchNodeString } from '@parca/store';
+import useIsShiftDown from '@parca/components/src/hooks/useIsShiftDown';
 import { hexifyAddress } from './utils';
 var RowHeight = 26;
 var icicleRectStyles = {
@@ -70,6 +71,7 @@ export function nodeLabel(node) {
 export function IcicleGraphNodes(_a) {
     var data = _a.data, x = _a.x, y = _a.y, xScale = _a.xScale, total = _a.total, totalWidth = _a.totalWidth, level = _a.level, setHoveringNode = _a.setHoveringNode, path = _a.path, setCurPath = _a.setCurPath, curPath = _a.curPath;
     var isDarkMode = useAppSelector(selectDarkMode);
+    var isShiftDown = useIsShiftDown();
     var nodes = curPath.length === 0 ? data : data.filter(function (d) { return d != null && curPath[0] === nodeLabel(d); });
     var nextLevel = level + 1;
     return (_jsx("g", __assign({ transform: "translate(".concat(x, ", ").concat(y, ")") }, { children: nodes.map(function (d, i) {
@@ -94,8 +96,16 @@ export function IcicleGraphNodes(_a) {
             var newXScale = nextCurPath.length === 0 && curPath.length === 1
                 ? scaleLinear().domain([0, cumulative]).range([0, totalWidth])
                 : xScale;
-            var onMouseEnter = function () { return setHoveringNode(d); };
-            var onMouseLeave = function () { return setHoveringNode(undefined); };
+            var onMouseEnter = function () {
+                if (isShiftDown)
+                    return;
+                setHoveringNode(d);
+            };
+            var onMouseLeave = function () {
+                if (isShiftDown)
+                    return;
+                setHoveringNode(undefined);
+            };
             return (_jsxs(React.Fragment, { children: [_jsx(IcicleRect, { x: xStart, y: 0, width: width, height: RowHeight, name: name, color: color, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, curPath: curPath }, "rect-".concat(key)), data !== undefined && data.length > 0 && (_jsx(IcicleGraphNodes, { data: d.children, x: xStart, y: RowHeight, xScale: newXScale, total: total, totalWidth: totalWidth, level: nextLevel, setHoveringNode: setHoveringNode, path: nextPath, curPath: nextCurPath, setCurPath: setCurPath }, "node-".concat(key)))] }, "node-".concat(key)));
         }) })));
 }
@@ -103,12 +113,21 @@ var MemoizedIcicleGraphNodes = React.memo(IcicleGraphNodes);
 export function IcicleGraphRootNode(_a) {
     var node = _a.node, xScale = _a.xScale, total = _a.total, totalWidth = _a.totalWidth, setHoveringNode = _a.setHoveringNode, setCurPath = _a.setCurPath, curPath = _a.curPath;
     var isDarkMode = useAppSelector(selectDarkMode);
+    var isShiftDown = useIsShiftDown();
     var cumulative = parseFloat(node.cumulative);
     var diff = parseFloat(node.diff);
     var color = diffColor(diff, cumulative, isDarkMode);
     var onClick = function () { return setCurPath([]); };
-    var onMouseEnter = function () { return setHoveringNode(node); };
-    var onMouseLeave = function () { return setHoveringNode(undefined); };
+    var onMouseEnter = function () {
+        if (isShiftDown)
+            return;
+        setHoveringNode(node);
+    };
+    var onMouseLeave = function () {
+        if (isShiftDown)
+            return;
+        setHoveringNode(undefined);
+    };
     var path = [];
     return (_jsxs("g", __assign({ transform: 'translate(0, 0)' }, { children: [_jsx(IcicleRect, { x: 0, y: 0, width: totalWidth, height: RowHeight, name: 'root', color: color, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, curPath: curPath }), _jsx(MemoizedIcicleGraphNodes, { data: node.children, x: 0, y: RowHeight, xScale: xScale, total: total, totalWidth: totalWidth, level: 0, setHoveringNode: setHoveringNode, path: path, curPath: curPath, setCurPath: setCurPath })] })));
 }

package/dist/MatchersInput/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Query } from '@parca/parser';
 import { LabelsResponse, QueryServiceClient, ValuesResponse } from '@parca/client';
 interface MatchersInputProps {

package/dist/MetricsCircle/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface MetricsCircleProps {
     cx: number;
     cy: number;

package/dist/MetricsGraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SingleProfileSelection } from '..';
 import { MetricsSeries as MetricsSeriesPb, Label } from '@parca/client';
 import { DateTimeRange } from '@parca/components';

package/dist/MetricsGraph/index.js

@@ -35,8 +35,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // limitations under the License.
 import { useEffect, useRef, useState } from 'react';
 import * as d3 from 'd3';
-import MetricsSeries from '../MetricsSeries';
-import MetricsCircle from '../MetricsCircle';
 import { pointer } from 'd3-selection';
 import { formatForTimespan } from '@parca/functions/time';
 import { timeFormat } from '..';
@@ -46,6 +44,9 @@ import { usePopper } from 'react-popper';
 import { valueFormatter, formatDate } from '@parca/functions';
 import { DateTimeRange } from '@parca/components';
 import { useContainerDimensions } from '@parca/dynamicsize';
+import useIsShiftDown from '@parca/components/src/hooks/useIsShiftDown';
+import MetricsSeries from '../MetricsSeries';
+import MetricsCircle from '../MetricsCircle';
 var MetricsGraph = function (_a) {
     var data = _a.data, from = _a.from, to = _a.to, profile = _a.profile, onSampleClick = _a.onSampleClick, onLabelClick = _a.onLabelClick, setTimeRange = _a.setTimeRange, sampleUnit = _a.sampleUnit;
     var _b = useContainerDimensions(), ref = _b.ref, dimensions = _b.dimensions;
@@ -133,30 +134,8 @@ export var RawMetricsGraph = function (_a) {
     var _c = useState(false), hovering = _c[0], setHovering = _c[1];
     var _d = useState(-1), relPos = _d[0], setRelPos = _d[1];
     var _e = useState([0, 0]), pos = _e[0], setPos = _e[1];
-    var _f = useState(false), freezeTooltip = _f[0], setFreezeTooltip = _f[1];
     var metricPointRef = useRef(null);
-    useEffect(function () {
-        var handleShiftDown = function (event) {
-            if (event.keyCode === 16) {
-                setFreezeTooltip(true);
-            }
-        };
-        window.addEventListener('keydown', handleShiftDown);
-        return function () {
-            window.removeEventListener('keydown', handleShiftDown);
-        };
-    }, []);
-    useEffect(function () {
-        var handleShiftUp = function (event) {
-            if (event.keyCode === 16) {
-                setFreezeTooltip(false);
-            }
-        };
-        window.addEventListener('keyup', handleShiftUp);
-        return function () {
-            window.removeEventListener('keyup', handleShiftUp);
-        };
-    }, []);
+    var isShiftDown = useIsShiftDown();
     var time = parseFloat(profile === null || profile === void 0 ? void 0 : profile.HistoryParams().time);
     if (width === undefined || width == null) {
         width = 0;
@@ -283,7 +262,7 @@ export var RawMetricsGraph = function (_a) {
         var xCoordinateWithoutMargin = xCoordinate - margin;
         var yCoordinate = rel[1];
         var yCoordinateWithoutMargin = yCoordinate - margin;
-        if (!freezeTooltip) {
+        if (!isShiftDown) {
             throttledSetPos([xCoordinateWithoutMargin, yCoordinateWithoutMargin]);
         }
     };
@@ -336,7 +315,6 @@ export var RawMetricsGraph = function (_a) {
     var selected = findSelectedProfile();
     return (_jsxs(_Fragment, { children: [highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (_jsx("div", __assign({ onMouseMove: onMouseMove, onMouseEnter: function () { return setHovering(true); }, onMouseLeave: function () { return setHovering(false); } }, { children: _jsx(MetricsTooltip, { x: pos[0] + margin, y: pos[1] + margin, highlighted: highlighted, onLabelClick: onLabelClick, contextElement: graph.current, sampleUnit: sampleUnit }) }))), _jsx("div", __assign({ ref: graph, onMouseEnter: function () {
                     setHovering(true);
-                    setFreezeTooltip(false);
                 }, onMouseLeave: function () { return setHovering(false); } }, { children: _jsxs("svg", __assign({ width: "".concat(width, "px"), height: "".concat(height + margin, "px"), onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseMove: onMouseMove }, { children: [_jsx("g", __assign({ transform: "translate(".concat(margin, ", 0)") }, { children: dragging && (_jsx("g", __assign({ 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", __assign({ transform: "translate(".concat(margin, ", ").concat(margin, ")") }, { children: [_jsx("g", __assign({ className: "lines fill-transparent" }, { children: series.map(function (s, i) { return (_jsx("g", __assign({ className: "line" }, { children: _jsx(MetricsSeries, { data: s, line: l, color: color(i.toString()), strokeWidth: hovering && highlighted != null && i === highlighted.seriesIndex
                                                 ? lineStrokeHover
                                                 : lineStroke, xScale: xScale, yScale: yScale }) }), i)); }) })), hovering && highlighted != null && (_jsx("g", __assign({ className: "circle-group", ref: metricPointRef, style: { fill: color(highlighted.seriesIndex.toString()) } }, { children: _jsx(MetricsCircle, { cx: highlighted.x, cy: highlighted.y }) }))), selected != null && (_jsx("g", __assign({ className: "circle-group", style: (selected === null || selected === void 0 ? void 0 : selected.seriesIndex) != null

package/dist/MetricsSeries/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import * as d3 from 'd3';
 interface MetricsSeriesProps {
     data: any;

package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ProfileSelection } from '..';
 import { QueryServiceClient } from '@parca/client';
 import { NavigateFunction } from '.';

package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import { ProfileSelection } from '..';
 import { NavigateFunction } from '../ProfileExplorer';

package/dist/ProfileExplorer/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 export declare type NavigateFunction = (path: string, queryParams: any) => void;
 interface ProfileExplorerProps {

package/dist/ProfileIcicleGraph.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Flamegraph } from '@parca/client';
 interface ProfileIcicleGraphProps {
     width?: number;

package/dist/ProfileMetricsGraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ProfileSelection } from '..';
 import { QueryServiceClient, QueryRangeResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';

package/dist/ProfileSelector/CompareButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const CompareButton: ({ disabled, onClick, }: {
     disabled: boolean;
     onClick: () => void;

package/dist/ProfileSelector/MergeButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const MergeButton: ({ disabled, onClick, }: {
     disabled: boolean;
     onClick: () => void;

package/dist/ProfileSelector/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient, ProfileTypesResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { ProfileSelection } from '..';

package/dist/ProfileSource.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ProfileType } from '@parca/parser';
 import { Label, QueryRequest, ProfileDiffSelection } from '@parca/client';
 export interface ProfileSource {

package/dist/ProfileTypeSelector/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ProfileTypesResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 interface WellKnownProfile {

package/dist/ProfileView.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient, Flamegraph, Top, Callgraph } from '@parca/client';
 import { ProfileSource } from './ProfileSource';
 import './ProfileView.styles.css';

package/dist/ProfileViewWithData.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import { ProfileSource } from './ProfileSource';
 declare type NavigateFunction = (path: string, queryParams: any) => void;

package/dist/TopTable.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TopNodeMeta, Top } from '@parca/client';
 import './TopTable.styles.css';
 interface TopTableProps {
@@ -5,5 +6,5 @@ interface TopTableProps {
     sampleUnit: string;
 }
 export declare const RowLabel: (meta: TopNodeMeta | undefined) => string;
-export declare const TopTable: ({ data, sampleUnit }: TopTableProps) => JSX.Element;
+export declare const TopTable: ({ data: top, sampleUnit }: TopTableProps) => JSX.Element;
 export default TopTable;

package/dist/components/DiffLegend.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const DiffLegend: () => JSX.Element;
 export default DiffLegend;

package/dist/components/ProfileShareButton/ResultBox.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     value: string;
     className?: string;

package/dist/components/ProfileShareButton/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryRequest, QueryServiceClient } from '@parca/client';
 interface Props {
     queryRequest: QueryRequest;

package/dist/stories/ProfileTypeSelector.stories.d.ts

@@ -0,0 +1,5 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ProfileTypeSelector from '../ProfileTypeSelector';
+declare const _default: ComponentMeta<({ profileTypesData, loading, error, selectedKey, onSelection, flexibleKnownProfilesDetection, }: import("../ProfileTypeSelector").Props) => JSX.Element>;
+export default _default;
+export declare const Primary: ComponentStory<typeof ProfileTypeSelector>;