@parca/profile 0.16.131 → 0.16.132

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.16.132 (2023-03-07)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.131](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.130...@parca/profile@0.16.131) (2023-03-06)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltip/index.d.ts

@@ -5,7 +5,7 @@ interface GraphTooltipProps {
     y?: number;
     unit: string;
     total: number;
-    hoveringNode: HoveringNode;
+    hoveringNode?: HoveringNode;
     contextElement: Element | null;
     isFixed?: boolean;
     virtualContextElement?: boolean;
@@ -20,5 +20,5 @@ export interface HoveringNode extends CallgraphNode, FlamegraphRootNode, Flamegr
         [key: string]: any;
     };
 }
-declare const GraphTooltip: ({ x, y, unit, total, hoveringNode, contextElement, isFixed, virtualContextElement, strings, mappings, locations, functions, }: GraphTooltipProps) => JSX.Element;
+declare const GraphTooltip: ({ x, y, unit, total, hoveringNode: hoveringNodeProp, contextElement, isFixed, virtualContextElement, strings, mappings, locations, functions, }: GraphTooltipProps) => JSX.Element;
 export default GraphTooltip;

package/dist/GraphTooltip/index.js

@@ -33,12 +33,13 @@ 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 { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { pointer } from 'd3-selection';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { usePopper } from 'react-popper';
 import { useKeyDown } from '@parca/components';
 import { getLastItem, valueFormatter } from '@parca/functions';
+import { selectHoveringNode, useAppSelector } from '@parca/store';
 import { hexifyAddress, truncateString, truncateStringReverse } from '../';
 import { ExpandOnHover } from './ExpandOnHoverValue';
 var NoData = function () {
@@ -154,7 +155,16 @@ var GraphTooltipContent = function (_a) {
                                                 hoveringNode: hoveringNode, strings: strings, mappings: mappings, locations: locations, functions: functions })] }) }))] })) })), _jsx("span", __assign({ className: "block text-gray-500 text-xs mx-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, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions;
+    var x = _a.x, y = _a.y, unit = _a.unit, total = _a.total, hoveringNodeProp = _a.hoveringNode, contextElement = _a.contextElement, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, _c = _a.virtualContextElement, virtualContextElement = _c === void 0 ? true : _c, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions;
+    var hoveringNodeState = useAppSelector(selectHoveringNode);
+    var hoveringNode = useMemo(function () {
+        var h = (hoveringNodeProp !== null && hoveringNodeProp !== void 0 ? hoveringNodeProp : hoveringNodeState);
+        if (h == null) {
+            return h;
+        }
+        // Cloning the object to avoid the mutating error as this is Redux store object and we are modifying the meta object in GraphTooltipContent component.
+        return __assign(__assign({}, h), { meta: __assign({}, h.meta) });
+    }, [hoveringNodeProp, hoveringNodeState]);
     var _d = useState(null), popperElement = _d[0], setPopperElement = _d[1];
     var _e = usePopper(virtualContextElement ? virtualElement : contextElement, popperElement, {
         placement: 'bottom-start',

package/dist/ProfileExplorer/ProfileExplorerSingle.js

@@ -10,11 +10,10 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { KeyDownProvider } from '@parca/components';
 import { ProfileViewWithData } from '..';
 import ProfileSelector from '../ProfileSelector';
 var ProfileExplorerSingle = function (_a) {
     var queryClient = _a.queryClient, query = _a.query, selectQuery = _a.selectQuery, selectProfile = _a.selectProfile, profile = _a.profile, compareProfile = _a.compareProfile, navigateTo = _a.navigateTo;
-    return (_jsxs(KeyDownProvider, { children: [_jsx("div", __assign({ className: "grid grid-cols-1" }, { children: _jsx("div", { children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: query, selectQuery: selectQuery, selectProfile: selectProfile, closeProfile: function () { }, profileSelection: profile, comparing: false, onCompareProfile: compareProfile, enforcedProfileName: '' }) }) })), _jsx("div", __assign({ className: "grid grid-cols-1" }, { children: _jsx("div", { children: profile != null ? (_jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: profile.ProfileSource(), navigateTo: navigateTo })) : (_jsx(_Fragment, {})) }) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: "grid grid-cols-1" }, { children: _jsx("div", { children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: query, selectQuery: selectQuery, selectProfile: selectProfile, closeProfile: function () { }, profileSelection: profile, comparing: false, onCompareProfile: compareProfile, enforcedProfileName: '' }) }) })), _jsx("div", __assign({ className: "grid grid-cols-1" }, { children: _jsx("div", { children: profile != null ? (_jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: profile.ProfileSource(), navigateTo: navigateTo })) : (_jsx(_Fragment, {})) }) }))] }));
 };
 export default ProfileExplorerSingle;

package/dist/ProfileExplorer/index.js

@@ -24,7 +24,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // limitations under the License.
 import { useEffect, useState } from 'react';
 import { Provider } from 'react-redux';
-import { DateTimeRange, useParcaContext } from '@parca/components';
+import { DateTimeRange, KeyDownProvider, useParcaContext } from '@parca/components';
 import { store } from '@parca/store';
 import { ProfileSelectionFromParams, SuffixParams } from '..';
 import { useProfileTypes } from '../ProfileSelector';
@@ -201,6 +201,6 @@ var ProfileExplorerApp = function (_a) {
 var ProfileExplorer = function (_a) {
     var queryClient = _a.queryClient, queryParams = _a.queryParams, navigateTo = _a.navigateTo;
     var reduxStore = store().store;
-    return (_jsx(Provider, __assign({ store: reduxStore }, { children: _jsx(ProfileExplorerApp, { queryClient: queryClient, queryParams: queryParams, navigateTo: navigateTo }) })));
+    return (_jsx(Provider, __assign({ store: reduxStore }, { children: _jsx(KeyDownProvider, { children: _jsx(ProfileExplorerApp, { queryClient: queryClient, queryParams: queryParams, navigateTo: navigateTo }) }) })));
 };
 export default ProfileExplorer;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FlamegraphNode, FlamegraphRootNode } from '@parca/client';
+import { FlamegraphNode } from '@parca/client';
 import { Location, Mapping, Function as ParcaFunction } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 export declare const RowHeight = 26;
 interface IcicleGraphNodesProps {
@@ -15,7 +15,6 @@ interface IcicleGraphNodesProps {
     level: number;
     curPath: string[];
     setCurPath: (path: string[]) => void;
-    setHoveringNode: (node: FlamegraphNode | FlamegraphRootNode | undefined) => void;
     path: string[];
     xScale: (value: number) => number;
     searchString?: string;
@@ -37,7 +36,6 @@ interface IcicleNodeProps {
     path: string[];
     total: number;
     setCurPath: (path: string[]) => void;
-    setHoveringNode: (node: FlamegraphNode | FlamegraphRootNode | undefined) => void;
     xScale: (value: number) => number;
     isRoot?: boolean;
     searchString?: string;

package/dist/ProfileIcicleGraph/IcicleGraph/IcicleGraphNodes.js

@@ -27,12 +27,12 @@ import cx from 'classnames';
 import { scaleLinear } from 'd3-scale';
 import { useKeyDown } from '@parca/components';
 import { isSearchMatch } from '@parca/functions';
-import { selectBinaries, useAppSelector } from '@parca/store';
+import { selectBinaries, setHoveringNode, useAppDispatch, useAppSelector } from '@parca/store';
 import useNodeColor from './useNodeColor';
 import { nodeLabel } from './utils';
 export var RowHeight = 26;
-export var IcicleGraphNodes = React.memo(function IcicleGraphNodes(_a) {
-    var data = _a.data, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions, 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, searchString = _a.searchString, compareMode = _a.compareMode;
+export var IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo(_a) {
+    var data = _a.data, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions, x = _a.x, y = _a.y, xScale = _a.xScale, total = _a.total, totalWidth = _a.totalWidth, level = _a.level, path = _a.path, setCurPath = _a.setCurPath, curPath = _a.curPath, searchString = _a.searchString, compareMode = _a.compareMode;
     var binaries = useAppSelector(selectBinaries);
     var nodes = curPath.length === 0
         ? data
@@ -41,10 +41,10 @@ export var IcicleGraphNodes = React.memo(function IcicleGraphNodes(_a) {
                 curPath[0] ===
                     nodeLabel(d, strings, mappings, locations, functions, binaries.length > 1);
         });
-    return (_jsx("g", __assign({ transform: "translate(".concat(x, ", ").concat(y, ")") }, { children: nodes.map(function (d, i) {
+    return (_jsx("g", __assign({ transform: "translate(".concat(x, ", ").concat(y, ")") }, { children: nodes.map(function nodeMapper(d, i) {
             var start = nodes.slice(0, i).reduce(function (sum, d) { return sum + parseFloat(d.cumulative); }, 0);
             var xStart = xScale(start);
-            return (_jsx(IcicleNode, { x: xStart, y: 0, totalWidth: totalWidth, height: RowHeight, path: path, setCurPath: setCurPath, setHoveringNode: setHoveringNode, level: level, curPath: curPath, data: d, strings: strings, mappings: mappings, locations: locations, functions: functions, total: total, xScale: xScale, searchString: searchString, compareMode: compareMode }, "node-".concat(level, "-").concat(i)));
+            return (_jsx(IcicleNode, { x: xStart, y: 0, totalWidth: totalWidth, height: RowHeight, path: path, setCurPath: setCurPath, level: level, curPath: curPath, data: d, strings: strings, mappings: mappings, locations: locations, functions: functions, total: total, xScale: xScale, searchString: searchString, compareMode: compareMode }, "node-".concat(level, "-").concat(i)));
         }) })));
 });
 var icicleRectStyles = {
@@ -56,9 +56,10 @@ var fadedIcicleRectStyles = {
     transition: 'opacity .15s linear',
     opacity: '0.5',
 };
-export var IcicleNode = React.memo(function IcicleNode(_a) {
-    var x = _a.x, y = _a.y, height = _a.height, setCurPath = _a.setCurPath, setHoveringNode = _a.setHoveringNode, curPath = _a.curPath, level = _a.level, path = _a.path, data = _a.data, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions, total = _a.total, totalWidth = _a.totalWidth, xScale = _a.xScale, _b = _a.isRoot, isRoot = _b === void 0 ? false : _b, searchString = _a.searchString, compareMode = _a.compareMode;
+export var IcicleNode = React.memo(function IcicleNodeNoMemo(_a) {
+    var x = _a.x, y = _a.y, height = _a.height, setCurPath = _a.setCurPath, curPath = _a.curPath, level = _a.level, path = _a.path, data = _a.data, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions, total = _a.total, totalWidth = _a.totalWidth, xScale = _a.xScale, _b = _a.isRoot, isRoot = _b === void 0 ? false : _b, searchString = _a.searchString, compareMode = _a.compareMode;
     var binaries = useAppSelector(selectBinaries);
+    var dispatch = useAppDispatch();
     var isShiftDown = useKeyDown().isShiftDown;
     var colorResult = useNodeColor({ data: data, compareMode: compareMode });
     var name = useMemo(function () {
@@ -90,12 +91,12 @@ export var IcicleNode = React.memo(function IcicleNode(_a) {
     var onMouseEnter = function () {
         if (isShiftDown)
             return;
-        setHoveringNode(data);
+        dispatch(setHoveringNode(data));
     };
     var onMouseLeave = function () {
         if (isShiftDown)
             return;
-        setHoveringNode(undefined);
+        dispatch(setHoveringNode(undefined));
     };
     return (_jsxs(_Fragment, { children: [_jsxs("g", __assign({ transform: "translate(".concat(x + 1, ", ").concat(y + 1, ")"), style: styles, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: function () {
                     setCurPath(nextPath);
@@ -103,5 +104,5 @@ export var IcicleNode = React.memo(function IcicleNode(_a) {
                             fill: colorResult,
                         }, className: cx('stroke-white dark:stroke-gray-700', {
                             'opacity-50': isHighlightEnabled && !isHighlighted,
-                        }) }), width > 5 && (_jsx("svg", __assign({ width: width - 5, height: height }, { children: _jsx("text", __assign({ x: 5, y: 15, style: { fontSize: '12px' } }, { children: name })) })))] })), data.children !== undefined && data.children.length > 0 && (_jsx(IcicleGraphNodes, { data: data.children, strings: strings, mappings: mappings, locations: locations, functions: functions, x: x, y: RowHeight, xScale: newXScale, total: total, totalWidth: totalWidth, level: nextLevel, setHoveringNode: setHoveringNode, path: nextPath, curPath: nextCurPath, setCurPath: setCurPath, searchString: searchString, compareMode: compareMode }))] }));
+                        }) }), width > 5 && (_jsx("svg", __assign({ width: width - 5, height: height }, { children: _jsx("text", __assign({ x: 5, y: 15, style: { fontSize: '12px' } }, { children: name })) })))] })), data.children !== undefined && data.children.length > 0 && (_jsx(IcicleGraphNodes, { data: data.children, strings: strings, mappings: mappings, locations: locations, functions: functions, x: x, y: RowHeight, xScale: newXScale, total: total, totalWidth: totalWidth, level: nextLevel, path: nextPath, curPath: nextCurPath, setCurPath: setCurPath, searchString: searchString, compareMode: compareMode }))] }));
 });

package/dist/ProfileIcicleGraph/IcicleGraph/index.js

@@ -25,6 +25,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { scaleLinear } from 'd3-scale';
 import { selectQueryParam } from '@parca/functions';
+import { setHoveringNode, useAppDispatch } from '@parca/store';
 import GraphTooltip from '../../GraphTooltip';
 import ColorStackLegend from './ColorStackLegend';
 import { IcicleNode, RowHeight } from './IcicleGraphNodes';
@@ -32,8 +33,8 @@ import useColoredGraph from './useColoredGraph';
 export var IcicleGraph = memo(function IcicleGraph(_a) {
     var _b;
     var graph = _a.graph, width = _a.width, setCurPath = _a.setCurPath, curPath = _a.curPath, sampleUnit = _a.sampleUnit, navigateTo = _a.navigateTo;
-    var _c = useState(), hoveringNode = _c[0], setHoveringNode = _c[1];
-    var _d = useState(0), height = _d[0], setHeight = _d[1];
+    var dispatch = useAppDispatch();
+    var _c = useState(0), height = _c[0], setHeight = _c[1];
     var svg = useRef(null);
     var ref = useRef(null);
     var coloredGraph = useColoredGraph(graph);
@@ -54,6 +55,6 @@ export var IcicleGraph = memo(function IcicleGraph(_a) {
     if (coloredGraph.root === undefined || width === undefined) {
         return _jsx(_Fragment, {});
     }
-    return (_jsxs("div", __assign({ onMouseLeave: function () { return setHoveringNode(undefined); } }, { children: [_jsx(ColorStackLegend, { navigateTo: navigateTo, compareMode: compareMode }), _jsx(GraphTooltip, { unit: sampleUnit, total: total, hoveringNode: hoveringNode, contextElement: svg.current, strings: coloredGraph.stringTable, mappings: coloredGraph.mapping, locations: coloredGraph.locations, functions: coloredGraph.function }), _jsx("svg", __assign({ className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg }, { children: _jsx("g", __assign({ ref: ref }, { children: _jsx("g", __assign({ transform: 'translate(0, 0)' }, { children: _jsx(IcicleNode, { x: 0, y: 0, totalWidth: width, height: RowHeight, setCurPath: setCurPath, setHoveringNode: setHoveringNode, curPath: curPath, data: coloredGraph.root, strings: coloredGraph.stringTable, mappings: coloredGraph.mapping, locations: coloredGraph.locations, functions: coloredGraph.function, total: total, xScale: xScale, path: [], level: 0, isRoot: true, searchString: currentSearchString, compareMode: compareMode }) })) })) }))] })));
+    return (_jsxs("div", __assign({ onMouseLeave: function () { return dispatch(setHoveringNode(undefined)); } }, { children: [_jsx(ColorStackLegend, { navigateTo: navigateTo, compareMode: compareMode }), _jsx(GraphTooltip, { unit: sampleUnit, total: total, contextElement: svg.current, strings: coloredGraph.stringTable, mappings: coloredGraph.mapping, locations: coloredGraph.locations, functions: coloredGraph.function }), _jsx("svg", __assign({ className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg }, { children: _jsx("g", __assign({ ref: ref }, { children: _jsx("g", __assign({ transform: 'translate(0, 0)' }, { children: _jsx(IcicleNode, { x: 0, y: 0, totalWidth: width, height: RowHeight, setCurPath: setCurPath, curPath: curPath, data: coloredGraph.root, strings: coloredGraph.stringTable, mappings: coloredGraph.mapping, locations: coloredGraph.locations, functions: coloredGraph.function, total: total, xScale: xScale, path: [], level: 0, isRoot: true, searchString: currentSearchString, compareMode: compareMode }) })) })) }))] })));
 });
 export default IcicleGraph;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.131",
+  "version": "0.16.132",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.65",
-    "@parca/components": "^0.16.106",
+    "@parca/components": "^0.16.107",
     "@parca/dynamicsize": "^0.16.54",
     "@parca/functions": "^0.16.66",
     "@parca/parser": "^0.16.55",
-    "@parca/store": "^0.16.62",
+    "@parca/store": "^0.16.63",
     "@types/react-beautiful-dnd": "^13.1.3",
     "d3": "7.8.2",
     "d3-scale": "^4.0.2",
@@ -45,5 +45,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "d60fe1c35d044d0ab89c15b6717fd6615cc4bd3a"
+  "gitHead": "dd55ee1fb7a1a7393433738765a0cfe488cdd1cd"
 }

package/src/GraphTooltip/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect, useState} from 'react';
+import {useEffect, useMemo, useState} from 'react';
 
 import {pointer} from 'd3-selection';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
@@ -25,6 +25,7 @@ import {
 } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 import {useKeyDown} from '@parca/components';
 import {getLastItem, valueFormatter} from '@parca/functions';
+import {selectHoveringNode, useAppSelector} from '@parca/store';
 
 import {hexifyAddress, truncateString, truncateStringReverse} from '../';
 import {ExpandOnHover} from './ExpandOnHoverValue';
@@ -38,7 +39,7 @@ interface GraphTooltipProps {
   y?: number;
   unit: string;
   total: number;
-  hoveringNode: HoveringNode;
+  hoveringNode?: HoveringNode;
   contextElement: Element | null;
   isFixed?: boolean;
   virtualContextElement?: boolean;
@@ -360,7 +361,7 @@ const GraphTooltip = ({
   y,
   unit,
   total,
-  hoveringNode,
+  hoveringNode: hoveringNodeProp,
   contextElement,
   isFixed = false,
   virtualContextElement = true,
@@ -369,6 +370,22 @@ const GraphTooltip = ({
   locations,
   functions,
 }: GraphTooltipProps): JSX.Element => {
+  const hoveringNodeState = useAppSelector(selectHoveringNode);
+  const hoveringNode = useMemo<HoveringNode>(() => {
+    const h = (hoveringNodeProp ?? hoveringNodeState) as HoveringNode;
+    if (h == null) {
+      return h;
+    }
+
+    // Cloning the object to avoid the mutating error as this is Redux store object and we are modifying the meta object in GraphTooltipContent component.
+    return {
+      ...h,
+      meta: {
+        ...h.meta,
+      },
+    };
+  }, [hoveringNodeProp, hoveringNodeState]);
+
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
   const {styles, attributes, ...popperProps} = usePopper(

package/src/ProfileExplorer/ProfileExplorerSingle.tsx

@@ -12,7 +12,6 @@
 // limitations under the License.
 
 import {QueryServiceClient} from '@parca/client';
-import {KeyDownProvider} from '@parca/components';
 import type {NavigateFunction} from '@parca/functions';
 
 import {ProfileSelection, ProfileViewWithData} from '..';
@@ -38,7 +37,7 @@ const ProfileExplorerSingle = ({
   navigateTo,
 }: ProfileExplorerSingleProps): JSX.Element => {
   return (
-    <KeyDownProvider>
+    <>
       <div className="grid grid-cols-1">
         <div>
           <ProfileSelector
@@ -67,7 +66,7 @@ const ProfileExplorerSingle = ({
           )}
         </div>
       </div>
-    </KeyDownProvider>
+    </>
   );
 };
 

package/src/ProfileExplorer/index.tsx

@@ -16,7 +16,7 @@ import {useEffect, useState} from 'react';
 import {Provider} from 'react-redux';
 
 import {QueryServiceClient} from '@parca/client';
-import {DateTimeRange, useParcaContext} from '@parca/components';
+import {DateTimeRange, KeyDownProvider, useParcaContext} from '@parca/components';
 import type {NavigateFunction} from '@parca/functions';
 import {store} from '@parca/store';
 
@@ -391,11 +391,13 @@ const ProfileExplorer = ({
 
   return (
     <Provider store={reduxStore}>
-      <ProfileExplorerApp
-        queryClient={queryClient}
-        queryParams={queryParams}
-        navigateTo={navigateTo}
-      />
+      <KeyDownProvider>
+        <ProfileExplorerApp
+          queryClient={queryClient}
+          queryParams={queryParams}
+          navigateTo={navigateTo}
+        />
+      </KeyDownProvider>
     </Provider>
   );
 };

package/src/ProfileIcicleGraph/IcicleGraph/IcicleGraphNodes.tsx

@@ -16,7 +16,7 @@ import React, {useMemo} from 'react';
 import cx from 'classnames';
 import {scaleLinear} from 'd3-scale';
 
-import {FlamegraphNode, FlamegraphRootNode} from '@parca/client';
+import {FlamegraphNode} from '@parca/client';
 import {
   Location,
   Mapping,
@@ -24,7 +24,7 @@ import {
 } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 import {useKeyDown} from '@parca/components';
 import {isSearchMatch} from '@parca/functions';
-import {selectBinaries, useAppSelector} from '@parca/store';
+import {selectBinaries, setHoveringNode, useAppDispatch, useAppSelector} from '@parca/store';
 
 import useNodeColor from './useNodeColor';
 import {nodeLabel} from './utils';
@@ -44,14 +44,13 @@ interface IcicleGraphNodesProps {
   level: number;
   curPath: string[];
   setCurPath: (path: string[]) => void;
-  setHoveringNode: (node: FlamegraphNode | FlamegraphRootNode | undefined) => void;
   path: string[];
   xScale: (value: number) => number;
   searchString?: string;
   compareMode: boolean;
 }
 
-export const IcicleGraphNodes = React.memo(function IcicleGraphNodes({
+export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({
   data,
   strings,
   mappings,
@@ -63,7 +62,6 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodes({
   total,
   totalWidth,
   level,
-  setHoveringNode,
   path,
   setCurPath,
   curPath,
@@ -83,7 +81,7 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodes({
 
   return (
     <g transform={`translate(${x}, ${y})`}>
-      {nodes.map((d, i) => {
+      {nodes.map(function nodeMapper(d, i) {
         const start = nodes.slice(0, i).reduce((sum, d) => sum + parseFloat(d.cumulative), 0);
         const xStart = xScale(start);
 
@@ -96,7 +94,6 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodes({
             height={RowHeight}
             path={path}
             setCurPath={setCurPath}
-            setHoveringNode={setHoveringNode}
             level={level}
             curPath={curPath}
             data={d}
@@ -130,7 +127,6 @@ interface IcicleNodeProps {
   path: string[];
   total: number;
   setCurPath: (path: string[]) => void;
-  setHoveringNode: (node: FlamegraphNode | FlamegraphRootNode | undefined) => void;
   xScale: (value: number) => number;
   isRoot?: boolean;
   searchString?: string;
@@ -147,12 +143,11 @@ const fadedIcicleRectStyles = {
   opacity: '0.5',
 };
 
-export const IcicleNode = React.memo(function IcicleNode({
+export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   x,
   y,
   height,
   setCurPath,
-  setHoveringNode,
   curPath,
   level,
   path,
@@ -169,6 +164,7 @@ export const IcicleNode = React.memo(function IcicleNode({
   compareMode,
 }: IcicleNodeProps): JSX.Element {
   const binaries = useAppSelector(selectBinaries);
+  const dispatch = useAppDispatch();
   const {isShiftDown} = useKeyDown();
   const colorResult = useNodeColor({data, compareMode});
   const name = useMemo(() => {
@@ -206,12 +202,12 @@ export const IcicleNode = React.memo(function IcicleNode({
   const onMouseEnter = (): void => {
     if (isShiftDown) return;
 
-    setHoveringNode(data);
+    dispatch(setHoveringNode(data));
   };
   const onMouseLeave = (): void => {
     if (isShiftDown) return;
 
-    setHoveringNode(undefined);
+    dispatch(setHoveringNode(undefined));
   };
 
   return (
@@ -258,7 +254,6 @@ export const IcicleNode = React.memo(function IcicleNode({
           total={total}
           totalWidth={totalWidth}
           level={nextLevel}
-          setHoveringNode={setHoveringNode}
           path={nextPath}
           curPath={nextCurPath}
           setCurPath={setCurPath}

package/src/ProfileIcicleGraph/IcicleGraph/index.tsx

@@ -15,10 +15,11 @@ import {memo, useEffect, useMemo, useRef, useState} from 'react';
 
 import {scaleLinear} from 'd3-scale';
 
-import {Flamegraph, FlamegraphNode, FlamegraphRootNode} from '@parca/client';
+import {Flamegraph} from '@parca/client';
 import {selectQueryParam, type NavigateFunction} from '@parca/functions';
+import {setHoveringNode, useAppDispatch} from '@parca/store';
 
-import GraphTooltip, {type HoveringNode} from '../../GraphTooltip';
+import GraphTooltip from '../../GraphTooltip';
 import ColorStackLegend from './ColorStackLegend';
 import {IcicleNode, RowHeight} from './IcicleGraphNodes';
 import useColoredGraph from './useColoredGraph';
@@ -40,9 +41,7 @@ export const IcicleGraph = memo(function IcicleGraph({
   sampleUnit,
   navigateTo,
 }: IcicleGraphProps): JSX.Element {
-  const [hoveringNode, setHoveringNode] = useState<
-    FlamegraphNode | FlamegraphRootNode | undefined
-  >();
+  const dispatch = useAppDispatch();
   const [height, setHeight] = useState(0);
   const svg = useRef(null);
   const ref = useRef<SVGGElement>(null);
@@ -71,12 +70,11 @@ export const IcicleGraph = memo(function IcicleGraph({
   }
 
   return (
-    <div onMouseLeave={() => setHoveringNode(undefined)}>
+    <div onMouseLeave={() => dispatch(setHoveringNode(undefined))}>
       <ColorStackLegend navigateTo={navigateTo} compareMode={compareMode} />
       <GraphTooltip
         unit={sampleUnit}
         total={total}
-        hoveringNode={hoveringNode as HoveringNode}
         contextElement={svg.current}
         strings={coloredGraph.stringTable}
         mappings={coloredGraph.mapping}
@@ -98,7 +96,6 @@ export const IcicleGraph = memo(function IcicleGraph({
               totalWidth={width}
               height={RowHeight}
               setCurPath={setCurPath}
-              setHoveringNode={setHoveringNode}
               curPath={curPath}
               data={coloredGraph.root}
               strings={coloredGraph.stringTable}