@parca/profile 0.19.26 → 0.19.28

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.19.28](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.27...@parca/profile@0.19.28) (2025-07-22)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.19.27](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.26...@parca/profile@0.19.27) (2025-07-21)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.19.26](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.25...@parca/profile@0.19.26) (2025-07-21)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileFlameGraph/FlameGraphArrow/ContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/ContextMenu.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAOnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAO1C,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,GAAI,kIAalB,gBAAgB,KAAG,GAAG,CAAC,OAiOzB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/ContextMenu.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAOnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAO1C,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,GAAI,kIAalB,gBAAgB,KAAG,GAAG,CAAC,OAsOzB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/ProfileFlameGraph/FlameGraphArrow/ContextMenu.js

@@ -93,13 +93,16 @@ const ContextMenu = ({ menuId, table, total, totalUnfiltered, row, compareAbsolu
                         setDashboardItems([...dashboardItems, 'table']);
                     }
                 }, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "ph:table" }), _jsx("div", { children: "Show in table" })] }) }), enableSandwichView === true && (_jsx(Item, { id: "show-in-sandwich", onClick: () => {
+                    if (functionName === '' || functionName == null) {
+                        return;
+                    }
                     if (dashboardItems.includes('sandwich')) {
                         setSandwichFunctionName(functionName);
                         return;
                     }
                     setSandwichFunctionName(functionName);
                     setDashboardItems([...dashboardItems, 'sandwich']);
-                }, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "tdesign:sandwich-filled" }), _jsxs("div", { className: "relative", children: [dashboardItems.includes('sandwich')
+                }, disabled: functionName === '' || functionName == null, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "tdesign:sandwich-filled" }), _jsxs("div", { className: "relative", children: [dashboardItems.includes('sandwich')
                                     ? 'Focus sandwich on this frame.'
                                     : 'Show in sandwich', _jsx("span", { className: "absolute top-[-2px] text-xs lowercase text-red-500", children: "\u00A0alpha" })] })] }) })), _jsx(Item, { id: "reset-view", onClick: handleResetView, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "system-uicons:reset" }), _jsx("div", { children: "Reset graph" })] }) }), _jsxs(Item, { id: "hide-binary", onClick: () => hideBinary(getLastItem(mappingFile)), disabled: mappingFile === null || mappingFile === '', children: [_jsx("div", { "data-tooltip-id": "hide-binary-help", "data-tooltip-content": "Hide all frames for this binary", children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "bx:bxs-hide" }), _jsxs("div", { children: ["Hide binary ", mappingFile !== null && `(${getLastItem(mappingFile)})`] })] }) }), _jsx(Tooltip, { place: "left", id: "hide-binary-help" })] }), _jsx(Submenu, { label: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "ph:copy" }), _jsx("div", { children: "Copy" })] }), children: _jsx("div", { className: "max-h-[300px] overflow-scroll", children: nonEmptyValuesToCopy.map(({ id, value }) => (_jsx(Item, { id: id, onClick: () => handleCopyItem(value), className: "dark:bg-gray-800", children: _jsxs("div", { className: "flex flex-col dark:text-gray-300 hover:dark:text-gray-100", children: [_jsx("div", { className: "text-sm", children: id }), _jsx("div", { className: "text-xs", children: truncateString(value, 30) })] }) }, id))) }) }), checkDebuginfoStatusHandler !== undefined ? (_jsx(Item, { id: "check-debuginfo-status", onClick: () => checkDebuginfoStatusHandler(mappingBuildID), disabled: !isMappingBuildIDAvailable, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "bx:bx-info-circle" }), _jsx("div", { className: "relative pr-4", children: "Check debuginfo status" })] }) })) : null, _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'] }) })] }));
 };

package/dist/ProfileFlameGraph/FlameGraphArrow/ContextMenuWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuWrapper.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/ContextMenuWrapper.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CACtD;AAED,QAAA,MAAM,kBAAkB,2HAkBvB,CAAC;AAIF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ContextMenuWrapper.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/ContextMenuWrapper.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CACtD;AAED,QAAA,MAAM,kBAAkB,2HAwBvB,CAAC;AAIF,eAAe,kBAAkB,CAAC"}

package/dist/ProfileFlameGraph/FlameGraphArrow/ContextMenuWrapper.js

@@ -14,19 +14,24 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useState } from 'react';
 import ContextMenu from './ContextMenu';
 const ContextMenuWrapper = forwardRef((props, ref) => {
-    // Fix for race condition: Always render ContextMenu to maintain component tree stability
-    // but use callback timing to ensure correct data is available when menu shows
-    const [row, setRow] = useState(0);
+    // Initialize with null to prevent rendering with invalid data
+    const [row, setRow] = useState(null);
     useImperativeHandle(ref, () => ({
         setRow: (newRow, callback) => {
             setRow(newRow);
             // Execute callback after state update using requestAnimationFrame
             if (callback != null) {
-                requestAnimationFrame(callback);
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(callback);
+                });
             }
         },
     }));
-    return _jsx(ContextMenu, { ...props, row: row });
+    // Only render ContextMenu when we have a valid row
+    if (row === null) {
+        return null;
+    }
+    return _jsx(ContextMenu, { ...props, row: row, isSandwich: props.isInSandwichView });
 });
 ContextMenuWrapper.displayName = 'ContextMenuWrapper';
 export default ContextMenuWrapper;

package/dist/ProfileFlameGraph/FlameGraphArrow/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAQN,MAAM,OAAO,CAAC;AAKf,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAG9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAIlD,OAAO,EAAuB,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAMtE,OAAO,EACL,gBAAgB,EAOjB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,iBAAiB,gBAAgB,CAAC;AAC/C,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AACjD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,aAAa,YAAY,CAAC;AACvC,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,cAAc,aAAa,CAAC;AACzC,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AACjE,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,yBAAyB,uBAAuB,CAAC;AAC9D,eAAO,MAAM,cAAc,aAAa,CAAC;AACzC,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAC7C,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,WAAW,UAAU,CAAC;AACnC,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAEjD,UAAU,oBAAoB;IAC5B,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,UAAU,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC/C,YAAY,EAAE,OAAO,CAAC;IACtB,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,GAC3B,cAAc,MAAM,EAAE,EACtB,YAAY,OAAO,EACnB,qBAAqB,WAAW,KAC/B,aAQF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,eAAe,MAAM,EAAE,EACvB,YAAY,OAAO,EACnB,qBAAqB,WAAW,KAC/B,aAQF,CAAC;AAIF,eAAO,MAAM,eAAe,kDAsR1B,CAAC;AAEH,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAQN,MAAM,OAAO,CAAC;AAKf,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAG9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAIlD,OAAO,EAAuB,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAMtE,OAAO,EACL,gBAAgB,EAOjB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,iBAAiB,gBAAgB,CAAC;AAC/C,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AACjD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,aAAa,YAAY,CAAC;AACvC,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,cAAc,aAAa,CAAC;AACzC,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AACjE,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,yBAAyB,uBAAuB,CAAC;AAC9D,eAAO,MAAM,cAAc,aAAa,CAAC;AACzC,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAC7C,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,WAAW,UAAU,CAAC;AACnC,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAEjD,UAAU,oBAAoB;IAC5B,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,UAAU,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC/C,YAAY,EAAE,OAAO,CAAC;IACtB,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,GAC3B,cAAc,MAAM,EAAE,EACtB,YAAY,OAAO,EACnB,qBAAqB,WAAW,KAC/B,aAQF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,eAAe,MAAM,EAAE,EACvB,YAAY,OAAO,EACnB,qBAAqB,WAAW,KAC/B,aAQF,CAAC;AAIF,eAAO,MAAM,eAAe,kDAuR1B,CAAC;AAEH,eAAe,eAAe,CAAC"}

package/dist/ProfileFlameGraph/FlameGraphArrow/index.js

@@ -148,7 +148,11 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({ arrow, total, fil
         // Add a new frame filter to hide this binary using the new ProfileFilters system
         excludeBinary(binaryToRemove);
     };
-    const handleRowClick = (row) => {
+    const handleRowClick = useCallback((row) => {
+        if (isFlameChart) {
+            // In flame charts, we don't want to expand the node, so we return early.
+            return;
+        }
         // Walk down the stack starting at row until we reach the root (row 0).
         const path = [];
         let currentRow = row;
@@ -160,7 +164,7 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({ arrow, total, fil
         // Reverse the path so that the root is first.
         path.reverse();
         setCurPath(path);
-    };
+    }, [table, setCurPath, isFlameChart]);
     const depthColumn = table.getChild(FIELD_DEPTH);
     const maxDepth = getMaxDepth(depthColumn);
     // Apply frame limit if maxFrameCount is provided and not expanded
@@ -215,12 +219,6 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({ arrow, total, fil
     return (_jsx(TooltipProvider, { table: table, total: total, totalUnfiltered: total + filtered, profileType: profileType, unit: arrow.unit, compareAbsolute: compareAbsolute, tooltipId: tooltipId, children: _jsxs("div", { className: "relative", children: [_jsx(ContextMenuWrapper, { ref: contextMenuRef, menuId: MENU_ID, table: table, total: total, totalUnfiltered: total + filtered, compareAbsolute: compareAbsolute, resetPath: () => setCurPath([]), hideMenu: hideAll, hideBinary: hideBinary, unit: arrow.unit, profileType: profileType, isInSandwichView: isInSandwichView }), _jsx(MemoizedTooltip, { contextElement: svgElement, dockedMetainfo: dockedMetainfo }), _jsx("div", { ref: containerRef, className: "overflow-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-800 will-change-transform scroll-smooth webkit-overflow-scrolling-touch contain", style: {
                         width: width ?? '100%',
                         contain: 'layout style paint',
-                    }, children: _jsx("svg", { className: "font-robotoMono", width: width ?? 0, height: totalHeight, preserveAspectRatio: "xMinYMid", ref: svg, children: visibleNodes.map(row => (_jsx(FlameNode, { table: table, row: row, colors: colorByColors, colorBy: colorByValue, totalWidth: width ?? 1, height: RowHeight, darkMode: isDarkMode, compareMode: compareMode, colorForSimilarNodes: colorForSimilarNodes, selectedRow: selectedRow, onClick: () => {
-                                if (isFlameChart) {
-                                    // We don't want to expand in flame charts.
-                                    return;
-                                }
-                                handleRowClick(row);
-                            }, onContextMenu: displayMenu, hoveringRow: highlightSimilarStacksPreference ? hoveringRow : undefined, setHoveringRow: highlightSimilarStacksPreference ? setHoveringRow : noop, isFlameChart: isFlameChart, profileSource: profileSource, isRenderedAsFlamegraph: isRenderedAsFlamegraph, isInSandwichView: isInSandwichView, maxDepth: maxDepth, effectiveDepth: deferredEffectiveDepth, tooltipId: tooltipId }, row))) }) })] }) }));
+                    }, children: _jsx("svg", { className: "font-robotoMono", width: width ?? 0, height: totalHeight, preserveAspectRatio: "xMinYMid", ref: svg, children: visibleNodes.map(row => (_jsx(FlameNode, { table: table, row: row, colors: colorByColors, colorBy: colorByValue, totalWidth: width ?? 1, height: RowHeight, darkMode: isDarkMode, compareMode: compareMode, colorForSimilarNodes: colorForSimilarNodes, selectedRow: selectedRow, onClick: () => handleRowClick(row), onContextMenu: displayMenu, hoveringRow: highlightSimilarStacksPreference ? hoveringRow : undefined, setHoveringRow: highlightSimilarStacksPreference ? setHoveringRow : noop, isFlameChart: isFlameChart, profileSource: profileSource, isRenderedAsFlamegraph: isRenderedAsFlamegraph, isInSandwichView: isInSandwichView, maxDepth: maxDepth, effectiveDepth: deferredEffectiveDepth, tooltipId: tooltipId }, row))) }) })] }) }));
 });
 export default FlameGraphArrow;

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

@@ -1,4 +1,4 @@
-import type { ProfileFilter } from '@parca/store';
+import type { ProfileFilter } from './useProfileFilters';
 export interface FilterPreset {
     key: string;
     name: string;

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

@@ -1 +1 @@
-{"version":3,"file":"filterPresets.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/filterPresets.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,cAAc,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,aAAa,EAAE,YAAY,EA6CvC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,KAAG,OAEzC,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,YAAY,GAAG,SAE3D,CAAC"}
+{"version":3,"file":"filterPresets.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/filterPresets.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAEvD,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,aAAa,EAAE,YAAY,EA6CvC,CAAC;AAIF,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,KAAG,OAEzC,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,YAAY,GAAG,SAE3D,CAAC"}

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

@@ -56,8 +56,9 @@ export const filterPresets = [
         ],
     },
 ];
+const presetKeys = new Set(filterPresets.map(preset => preset.key));
 export const isPresetKey = (key) => {
-    return filterPresets.some(preset => preset.key === key);
+    return presetKeys.has(key);
 };
 export const getPresetByKey = (key) => {
     return filterPresets.find(preset => preset.key === key);

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

@@ -1,7 +1,11 @@
 import { type Filter } from '@parca/client';
-import { type ProfileFilter } from '@parca/store';
-import { type FilterPreset } from './filterPresets';
-export type { ProfileFilter };
+export interface ProfileFilter {
+    id: string;
+    type?: 'stack' | 'frame' | string;
+    field?: 'function_name' | 'binary' | 'system_name' | 'filename' | 'address' | 'line_number';
+    matchType?: 'equal' | 'not_equal' | 'contains' | 'not_contains';
+    value: string;
+}
 export declare const convertToProtoFilters: (profileFilters: ProfileFilter[]) => Filter[];
 export declare const useProfileFilters: () => {
     localFilters: ProfileFilter[];
@@ -15,6 +19,5 @@ export declare const useProfileFilters: () => {
     removeFilter: (id: string) => void;
     updateFilter: (id: string, updates: Partial<ProfileFilter>) => void;
     resetFilters: () => void;
-    applyPreset: (preset: FilterPreset) => void;
 };
 //# sourceMappingURL=useProfileFilters.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useProfileFilters.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/useProfileFilters.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,KAAK,MAAM,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAKL,KAAK,aAAa,EACnB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAA8B,KAAK,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAG/E,YAAY,EAAC,aAAa,EAAC,CAAC;AAG5B,eAAO,MAAM,qBAAqB,GAAI,gBAAgB,aAAa,EAAE,KAAG,MAAM,EAoG7E,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAO;IACnC,YAAY,EAAE,aAAa,EAAE,CAAC;IAC9B,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,mBAAmB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IACpE,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAwM7C,CAAC"}
+{"version":3,"file":"useProfileFilters.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/useProfileFilters.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,KAAK,MAAM,EAAC,MAAM,eAAe,CAAC;AAK1C,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IAClC,KAAK,CAAC,EAAE,eAAe,GAAG,QAAQ,GAAG,aAAa,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;IAC5F,SAAS,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,eAAO,MAAM,qBAAqB,GAAI,gBAAgB,aAAa,EAAE,KAAG,MAAM,EAqG7E,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAO;IACnC,YAAY,EAAE,aAAa,EAAE,CAAC;IAC9B,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,mBAAmB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IACpE,YAAY,EAAE,MAAM,IAAI,CAAC;CAsL1B,CAAC"}

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

@@ -10,8 +10,7 @@
 // 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 { useCallback, useEffect, useMemo } from 'react';
-import { selectLocalFilters, setLocalFilters, useAppDispatch, useAppSelector, } from '@parca/store';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { getPresetByKey, isPresetKey } from './filterPresets';
 import { useProfileFiltersUrlState } from './useProfileFiltersUrlState';
 // Convert ProfileFilter[] to protobuf Filter[] matching the expected structure
@@ -27,6 +26,7 @@ export const convertToProtoFilters = (profileFilters) => {
                     expandedFilters.push({
                         ...presetFilter,
                         id: `${filter.id}-expanded-${index}`,
+                        value: presetFilter.value,
                     });
                 });
             }
@@ -114,29 +114,29 @@ export const convertToProtoFilters = (profileFilters) => {
 };
 export const useProfileFilters = () => {
     const { appliedFilters, setAppliedFilters } = useProfileFiltersUrlState();
-    const dispatch = useAppDispatch();
-    const localFilters = useAppSelector(selectLocalFilters);
+    const [localFilters, setLocalFilters] = useState([]);
+    const lastAppliedFiltersRef = useRef([]);
+    const localFiltersRef = useRef(localFilters);
+    localFiltersRef.current = localFilters;
     useEffect(() => {
-        if (appliedFilters != null && appliedFilters.length > 0) {
-            // Check if they're different to avoid unnecessary updates
-            const areFiltersEqual = appliedFilters.length === localFilters.length &&
-                appliedFilters.every((applied, index) => {
-                    const local = localFilters[index];
-                    return (local != null &&
-                        applied.type === local.type &&
-                        applied.field === local.field &&
-                        applied.matchType === local.matchType &&
-                        applied.value === local.value);
-                });
-            if (!areFiltersEqual) {
-                dispatch(setLocalFilters(appliedFilters));
-            }
-        }
-        else if (appliedFilters != null && appliedFilters.length === 0 && localFilters.length > 0) {
-            dispatch(setLocalFilters([]));
+        const currentApplied = appliedFilters ?? [];
+        const lastApplied = lastAppliedFiltersRef.current;
+        // Check if appliedFilters actually changed (avoid circular updates)
+        const appliedChanged = currentApplied.length !== lastApplied.length ||
+            currentApplied.some((applied, index) => {
+                const last = lastApplied[index];
+                return (last == null ||
+                    applied.type !== last.type ||
+                    applied.field !== last.field ||
+                    applied.matchType !== last.matchType ||
+                    applied.value !== last.value);
+            });
+        if (!appliedChanged) {
+            return;
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        lastAppliedFiltersRef.current = currentApplied;
+        setLocalFilters(currentApplied);
+    }, [appliedFilters]);
     const hasUnsavedChanges = useMemo(() => {
         const localWithValues = localFilters.filter(f => {
             // For preset filters, only need type and value
@@ -169,8 +169,8 @@ export const useProfileFilters = () => {
             id: `filter-${Date.now()}-${Math.random()}`,
             value: '',
         };
-        dispatch(setLocalFilters([...localFilters, newFilter]));
-    }, [dispatch, localFilters]);
+        setLocalFilters([...localFiltersRef.current, newFilter]);
+    }, []);
     const excludeBinary = useCallback((binaryName) => {
         // Check if this binary is already being filtered with not_contains
         const existingFilter = (appliedFilters ?? []).find(f => f.type === 'frame' &&
@@ -187,11 +187,13 @@ export const useProfileFilters = () => {
             matchType: 'not_contains',
             value: binaryName,
         };
-        dispatch(setLocalFilters([...localFilters, newFilter]));
+        setLocalFilters([...localFiltersRef.current, newFilter]);
         // Auto-apply the filter since it has a value
         const filtersToApply = [...(appliedFilters ?? []), newFilter];
         setAppliedFilters(filtersToApply);
-    }, [appliedFilters, setAppliedFilters, dispatch, localFilters]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setAppliedFilters]);
     const removeExcludeBinary = useCallback((binaryName) => {
         // Search for the exclude filter (not_contains) for this binary
         const filterToRemove = (appliedFilters ?? []).find(f => f.type === 'frame' &&
@@ -203,22 +205,21 @@ export const useProfileFilters = () => {
             const updatedAppliedFilters = (appliedFilters ?? []).filter(f => f.id !== filterToRemove.id);
             setAppliedFilters(updatedAppliedFilters);
             // Also remove from local filters
-            const updatedLocalFilters = localFilters.filter(f => f.id !== filterToRemove.id);
-            dispatch(setLocalFilters(updatedLocalFilters));
+            setLocalFilters(localFiltersRef.current.filter(f => f.id !== filterToRemove.id));
         }
-    }, [appliedFilters, setAppliedFilters, dispatch, localFilters]);
+    }, [appliedFilters, setAppliedFilters]);
     const removeFilter = useCallback((id) => {
-        dispatch(setLocalFilters(localFilters.filter(f => f.id !== id)));
-    }, [dispatch, localFilters]);
+        setLocalFilters(localFiltersRef.current.filter(f => f.id !== id));
+    }, []);
     const updateFilter = useCallback((id, updates) => {
-        dispatch(setLocalFilters(localFilters.map(f => (f.id === id ? { ...f, ...updates } : f))));
-    }, [dispatch, localFilters]);
+        setLocalFilters(localFiltersRef.current.map(f => (f.id === id ? { ...f, ...updates } : f)));
+    }, []);
     const resetFilters = useCallback(() => {
-        dispatch(setLocalFilters([]));
+        setLocalFilters([]);
         setAppliedFilters([]);
-    }, [dispatch, setAppliedFilters]);
+    }, [setAppliedFilters]);
     const onApplyFilters = useCallback(() => {
-        const validFilters = localFilters.filter(f => {
+        const validFilters = localFiltersRef.current.filter(f => {
             // For preset filters, only need type and value
             if (f.type != null && isPresetKey(f.type)) {
                 return f.value !== '' && f.type != null;
@@ -231,21 +232,10 @@ export const useProfileFilters = () => {
             id: `filter-${Date.now()}-${index}`,
         }));
         setAppliedFilters(filtersToApply);
-    }, [localFilters, setAppliedFilters]);
+    }, [setAppliedFilters]);
     const protoFilters = useMemo(() => {
         return convertToProtoFilters(appliedFilters ?? []);
     }, [appliedFilters]);
-    const applyPreset = useCallback((preset) => {
-        const presetFilter = {
-            id: `filter-preset-${Date.now()}`,
-            type: preset.key,
-            value: preset.name,
-        };
-        // Add preset filter to existing filters
-        const updatedFilters = [...localFilters, presetFilter];
-        dispatch(setLocalFilters(updatedFilters));
-        setAppliedFilters(updatedFilters);
-    }, [dispatch, setAppliedFilters, localFilters]);
     return {
         localFilters,
         appliedFilters,
@@ -258,6 +248,5 @@ export const useProfileFilters = () => {
         removeFilter,
         updateFilter,
         resetFilters,
-        applyPreset,
     };
 };

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

@@ -1,5 +1,5 @@
 import { type ParamValueSetterCustom } from '@parca/components';
-import { type ProfileFilter } from '@parca/store';
+import { type ProfileFilter } from './useProfileFilters';
 export declare const decodeProfileFilters: (encoded: string) => ProfileFilter[];
 export declare const useProfileFiltersUrlState: () => {
     appliedFilters: ProfileFilter[];

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

@@ -1 +1 @@
-{"version":3,"file":"useProfileFiltersUrlState.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.ts"],"names":[],"mappings":"AAaA,OAAO,EAAoB,KAAK,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AACjF,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,cAAc,CAAC;AAwDhD,eAAO,MAAM,oBAAoB,GAAI,SAAS,MAAM,KAAG,aAAa,EAkCnE,CAAC;AAEF,eAAO,MAAM,yBAAyB,QAAO;IAC3C,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,iBAAiB,EAAE,sBAAsB,CAAC,aAAa,EAAE,CAAC,CAAC;CAmB5D,CAAC"}
+{"version":3,"file":"useProfileFiltersUrlState.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.ts"],"names":[],"mappings":"AAaA,OAAO,EAAoB,KAAK,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AAGjF,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAsDvD,eAAO,MAAM,oBAAoB,GAAI,SAAS,MAAM,KAAG,aAAa,EAkCnE,CAAC;AAEF,eAAO,MAAM,yBAAyB,QAAO;IAC3C,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,iBAAiB,EAAE,sBAAsB,CAAC,aAAa,EAAE,CAAC,CAAC;CAmB5D,CAAC"}

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

@@ -31,5 +31,5 @@ export const VisualisationToolbar = ({ groupBy, toggleGroupBy, groupByLabels, se
             fields: groupBy ?? [],
         };
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full justify-between items-end", children: [_jsxs("div", { className: "flex gap-2 items-end", children: [isGraphViz && (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, labels: groupByLabels, setGroupByLabels: setGroupByLabels }), _jsx(InvertCallStack, {})] })), _jsx(ProfileFilters, {}), profileViewExternalSubActions != null ? profileViewExternalSubActions : null] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(MultiLevelDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, profileType: profileType, onSelect: () => { }, isTableVizOnly: isTableVizOnly }), _jsx(ShareButton, { profileSource: profileSource, queryClient: queryClient, queryRequest: req, onDownloadPProf: onDownloadPProf, pprofdownloading: pprofdownloading ?? false, profileViewExternalSubActions: profileViewExternalSubActions }), showVisualizationSelector ? _jsx(ViewSelector, { profileSource: profileSource }) : null] })] }), isGraphVizOnly && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(FlameGraphToolbar, { curPath: curPath, setNewCurPath: setNewCurPath })] })), isTableVizOnly && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(TableToolbar, { profileType: profileType, total: total, filtered: filtered })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full justify-between items-end gap-2", children: [_jsxs("div", { className: "flex gap-2 items-end", children: [isGraphViz && (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, labels: groupByLabels, setGroupByLabels: setGroupByLabels }), _jsx(InvertCallStack, {})] })), _jsx(ProfileFilters, {}), profileViewExternalSubActions != null ? profileViewExternalSubActions : null] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(MultiLevelDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, profileType: profileType, onSelect: () => { }, isTableVizOnly: isTableVizOnly }), _jsx(ShareButton, { profileSource: profileSource, queryClient: queryClient, queryRequest: req, onDownloadPProf: onDownloadPProf, pprofdownloading: pprofdownloading ?? false, profileViewExternalSubActions: profileViewExternalSubActions }), showVisualizationSelector ? _jsx(ViewSelector, { profileSource: profileSource }) : null] })] }), isGraphVizOnly && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(FlameGraphToolbar, { curPath: curPath, setNewCurPath: setNewCurPath })] })), isTableVizOnly && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(TableToolbar, { profileType: profileType, total: total, filtered: filtered })] }))] }));
 };

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

@@ -34,7 +34,7 @@ const ViewSelector = ({ profileSource }) => {
         allItems.push({ key: 'source', label: 'Source', canBeSelected: false });
     }
     const getOption = ({ label, supportingText, }) => {
-        const title = (_jsx("span", { className: "capitalize", children: typeof label === 'string' ? label.replaceAll('-', ' ') : label }));
+        const title = (_jsx("span", { className: "capitalize whitespace-nowrap", children: typeof label === 'string' ? label.replaceAll('-', ' ') : label }));
         return {
             active: title,
             expanded: (_jsxs(_Fragment, { children: [title, supportingText !== null && _jsx("span", { className: "text-xs", children: supportingText })] })),

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.26",
+  "version": "0.19.28",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
     "@parca/client": "0.17.3",
-    "@parca/components": "0.16.352",
+    "@parca/components": "0.16.353",
     "@parca/dynamicsize": "0.16.65",
-    "@parca/hooks": "0.0.97",
+    "@parca/hooks": "0.0.98",
     "@parca/icons": "0.16.72",
     "@parca/parser": "0.16.79",
-    "@parca/store": "0.16.181",
+    "@parca/store": "0.16.182",
     "@parca/utilities": "0.0.105",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
@@ -78,5 +78,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "efe1ffd0a42671c5c6bf561ebd6c132015f616f1"
+  "gitHead": "fcd8ab30d83c0bc8f23e4c244da5e2b06aacf74a"
 }

package/src/ProfileFlameGraph/FlameGraphArrow/ContextMenu.tsx

@@ -188,6 +188,10 @@ const ContextMenu = ({
         <Item
           id="show-in-sandwich"
           onClick={() => {
+            if (functionName === '' || functionName == null) {
+              return;
+            }
+
             if (dashboardItems.includes('sandwich')) {
               setSandwichFunctionName(functionName);
               return;
@@ -196,6 +200,7 @@ const ContextMenu = ({
             setSandwichFunctionName(functionName);
             setDashboardItems([...dashboardItems, 'sandwich']);
           }}
+          disabled={functionName === '' || functionName == null}
         >
           <div className="flex w-full items-center gap-2">
             <Icon icon="tdesign:sandwich-filled" />

package/src/ProfileFlameGraph/FlameGraphArrow/ContextMenuWrapper.tsx

@@ -39,21 +39,27 @@ export interface ContextMenuWrapperRef {
 
 const ContextMenuWrapper = forwardRef<ContextMenuWrapperRef, ContextMenuWrapperProps>(
   (props, ref) => {
-    // Fix for race condition: Always render ContextMenu to maintain component tree stability
-    // but use callback timing to ensure correct data is available when menu shows
-    const [row, setRow] = useState(0);
+    // Initialize with null to prevent rendering with invalid data
+    const [row, setRow] = useState<number | null>(null);
 
     useImperativeHandle(ref, () => ({
       setRow: (newRow: number, callback?: () => void) => {
         setRow(newRow);
         // Execute callback after state update using requestAnimationFrame
         if (callback != null) {
-          requestAnimationFrame(callback);
+          requestAnimationFrame(() => {
+            requestAnimationFrame(callback);
+          });
         }
       },
     }));
 
-    return <ContextMenu {...props} row={row} />;
+    // Only render ContextMenu when we have a valid row
+    if (row === null) {
+      return null;
+    }
+
+    return <ContextMenu {...props} row={row} isSandwich={props.isInSandwichView} />;
   }
 );
 

package/src/ProfileFlameGraph/FlameGraphArrow/index.tsx

@@ -247,20 +247,27 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
     excludeBinary(binaryToRemove);
   };
 
-  const handleRowClick = (row: number): void => {
-    // Walk down the stack starting at row until we reach the root (row 0).
-    const path: CurrentPathFrame[] = [];
-    let currentRow = row;
-    while (currentRow > 0) {
-      const frame = getCurrentPathFrameData(table, currentRow);
-      path.push(frame);
-      currentRow = table.getChild(FIELD_PARENT)?.get(currentRow) ?? 0;
-    }
-
-    // Reverse the path so that the root is first.
-    path.reverse();
-    setCurPath(path);
-  };
+  const handleRowClick = useCallback(
+    (row: number): void => {
+      if (isFlameChart) {
+        // In flame charts, we don't want to expand the node, so we return early.
+        return;
+      }
+      // Walk down the stack starting at row until we reach the root (row 0).
+      const path: CurrentPathFrame[] = [];
+      let currentRow = row;
+      while (currentRow > 0) {
+        const frame = getCurrentPathFrameData(table, currentRow);
+        path.push(frame);
+        currentRow = table.getChild(FIELD_PARENT)?.get(currentRow) ?? 0;
+      }
+
+      // Reverse the path so that the root is first.
+      path.reverse();
+      setCurPath(path);
+    },
+    [table, setCurPath, isFlameChart]
+  );
 
   const depthColumn = table.getChild(FIELD_DEPTH);
   const maxDepth = getMaxDepth(depthColumn);
@@ -377,13 +384,7 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
                 compareMode={compareMode}
                 colorForSimilarNodes={colorForSimilarNodes}
                 selectedRow={selectedRow}
-                onClick={() => {
-                  if (isFlameChart) {
-                    // We don't want to expand in flame charts.
-                    return;
-                  }
-                  handleRowClick(row);
-                }}
+                onClick={() => handleRowClick(row)}
                 onContextMenu={displayMenu}
                 hoveringRow={highlightSimilarStacksPreference ? hoveringRow : undefined}
                 setHoveringRow={highlightSimilarStacksPreference ? setHoveringRow : noop}

package/src/ProfileView/components/ProfileFilters/filterPresets.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import type {ProfileFilter} from '@parca/store';
+import type {ProfileFilter} from './useProfileFilters';
 
 export interface FilterPreset {
   key: string;
@@ -67,8 +67,10 @@ export const filterPresets: FilterPreset[] = [
   },
 ];
 
+const presetKeys = new Set(filterPresets.map(preset => preset.key));
+
 export const isPresetKey = (key: string): boolean => {
-  return filterPresets.some(preset => preset.key === key);
+  return presetKeys.has(key);
 };
 
 export const getPresetByKey = (key: string): FilterPreset | undefined => {

package/src/ProfileView/components/ProfileFilters/useProfileFilters.ts

@@ -11,21 +11,20 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useCallback, useEffect, useMemo} from 'react';
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
 import {type Filter} from '@parca/client';
-import {
-  selectLocalFilters,
-  setLocalFilters,
-  useAppDispatch,
-  useAppSelector,
-  type ProfileFilter,
-} from '@parca/store';
-
-import {getPresetByKey, isPresetKey, type FilterPreset} from './filterPresets';
+
+import {getPresetByKey, isPresetKey} from './filterPresets';
 import {useProfileFiltersUrlState} from './useProfileFiltersUrlState';
 
-export type {ProfileFilter};
+export interface ProfileFilter {
+  id: string;
+  type?: 'stack' | 'frame' | string; // string allows preset keys
+  field?: 'function_name' | 'binary' | 'system_name' | 'filename' | 'address' | 'line_number';
+  matchType?: 'equal' | 'not_equal' | 'contains' | 'not_contains';
+  value: string;
+}
 
 // Convert ProfileFilter[] to protobuf Filter[] matching the expected structure
 export const convertToProtoFilters = (profileFilters: ProfileFilter[]): Filter[] => {
@@ -41,6 +40,7 @@ export const convertToProtoFilters = (profileFilters: ProfileFilter[]): Filter[]
           expandedFilters.push({
             ...presetFilter,
             id: `${filter.id}-expanded-${index}`,
+            value: presetFilter.value,
           });
         });
       }
@@ -142,36 +142,41 @@ export const useProfileFilters = (): {
   removeFilter: (id: string) => void;
   updateFilter: (id: string, updates: Partial<ProfileFilter>) => void;
   resetFilters: () => void;
-  applyPreset: (preset: FilterPreset) => void;
 } => {
   const {appliedFilters, setAppliedFilters} = useProfileFiltersUrlState();
-  const dispatch = useAppDispatch();
-  const localFilters = useAppSelector(selectLocalFilters);
+
+  const [localFilters, setLocalFilters] = useState<ProfileFilter[]>([]);
+
+  const lastAppliedFiltersRef = useRef<ProfileFilter[]>([]);
+
+  const localFiltersRef = useRef<ProfileFilter[]>(localFilters);
+  localFiltersRef.current = localFilters;
 
   useEffect(() => {
-    if (appliedFilters != null && appliedFilters.length > 0) {
-      // Check if they're different to avoid unnecessary updates
-      const areFiltersEqual =
-        appliedFilters.length === localFilters.length &&
-        appliedFilters.every((applied, index) => {
-          const local = localFilters[index];
-          return (
-            local != null &&
-            applied.type === local.type &&
-            applied.field === local.field &&
-            applied.matchType === local.matchType &&
-            applied.value === local.value
-          );
-        });
+    const currentApplied = appliedFilters ?? [];
+    const lastApplied = lastAppliedFiltersRef.current;
+
+    // Check if appliedFilters actually changed (avoid circular updates)
+    const appliedChanged =
+      currentApplied.length !== lastApplied.length ||
+      currentApplied.some((applied, index) => {
+        const last = lastApplied[index];
+        return (
+          last == null ||
+          applied.type !== last.type ||
+          applied.field !== last.field ||
+          applied.matchType !== last.matchType ||
+          applied.value !== last.value
+        );
+      });
 
-      if (!areFiltersEqual) {
-        dispatch(setLocalFilters(appliedFilters));
-      }
-    } else if (appliedFilters != null && appliedFilters.length === 0 && localFilters.length > 0) {
-      dispatch(setLocalFilters([]));
+    if (!appliedChanged) {
+      return;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+
+    lastAppliedFiltersRef.current = currentApplied;
+    setLocalFilters(currentApplied);
+  }, [appliedFilters]);
 
   const hasUnsavedChanges = useMemo(() => {
     const localWithValues = localFilters.filter(f => {
@@ -210,8 +215,8 @@ export const useProfileFilters = (): {
       id: `filter-${Date.now()}-${Math.random()}`,
       value: '',
     };
-    dispatch(setLocalFilters([...localFilters, newFilter]));
-  }, [dispatch, localFilters]);
+    setLocalFilters([...localFiltersRef.current, newFilter]);
+  }, []);
 
   const excludeBinary = useCallback(
     (binaryName: string) => {
@@ -235,13 +240,14 @@ export const useProfileFilters = (): {
         matchType: 'not_contains',
         value: binaryName,
       };
-      dispatch(setLocalFilters([...localFilters, newFilter]));
+      setLocalFilters([...localFiltersRef.current, newFilter]);
 
       // Auto-apply the filter since it has a value
       const filtersToApply = [...(appliedFilters ?? []), newFilter];
       setAppliedFilters(filtersToApply);
     },
-    [appliedFilters, setAppliedFilters, dispatch, localFilters]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setAppliedFilters]
   );
 
   const removeExcludeBinary = useCallback(
@@ -263,34 +269,27 @@ export const useProfileFilters = (): {
         setAppliedFilters(updatedAppliedFilters);
 
         // Also remove from local filters
-        const updatedLocalFilters = localFilters.filter(f => f.id !== filterToRemove.id);
-        dispatch(setLocalFilters(updatedLocalFilters));
+        setLocalFilters(localFiltersRef.current.filter(f => f.id !== filterToRemove.id));
       }
     },
-    [appliedFilters, setAppliedFilters, dispatch, localFilters]
+    [appliedFilters, setAppliedFilters]
   );
 
-  const removeFilter = useCallback(
-    (id: string) => {
-      dispatch(setLocalFilters(localFilters.filter(f => f.id !== id)));
-    },
-    [dispatch, localFilters]
-  );
+  const removeFilter = useCallback((id: string) => {
+    setLocalFilters(localFiltersRef.current.filter(f => f.id !== id));
+  }, []);
 
-  const updateFilter = useCallback(
-    (id: string, updates: Partial<ProfileFilter>) => {
-      dispatch(setLocalFilters(localFilters.map(f => (f.id === id ? {...f, ...updates} : f))));
-    },
-    [dispatch, localFilters]
-  );
+  const updateFilter = useCallback((id: string, updates: Partial<ProfileFilter>) => {
+    setLocalFilters(localFiltersRef.current.map(f => (f.id === id ? {...f, ...updates} : f)));
+  }, []);
 
   const resetFilters = useCallback(() => {
-    dispatch(setLocalFilters([]));
+    setLocalFilters([]);
     setAppliedFilters([]);
-  }, [dispatch, setAppliedFilters]);
+  }, [setAppliedFilters]);
 
   const onApplyFilters = useCallback((): void => {
-    const validFilters = localFilters.filter(f => {
+    const validFilters = localFiltersRef.current.filter(f => {
       // For preset filters, only need type and value
       if (f.type != null && isPresetKey(f.type)) {
         return f.value !== '' && f.type != null;
@@ -305,29 +304,12 @@ export const useProfileFilters = (): {
     }));
 
     setAppliedFilters(filtersToApply);
-  }, [localFilters, setAppliedFilters]);
+  }, [setAppliedFilters]);
 
   const protoFilters = useMemo(() => {
     return convertToProtoFilters(appliedFilters ?? []);
   }, [appliedFilters]);
 
-  const applyPreset = useCallback(
-    (preset: FilterPreset) => {
-      const presetFilter: ProfileFilter = {
-        id: `filter-preset-${Date.now()}`,
-        type: preset.key,
-        value: preset.name,
-      };
-
-      // Add preset filter to existing filters
-      const updatedFilters = [...localFilters, presetFilter];
-      dispatch(setLocalFilters(updatedFilters));
-
-      setAppliedFilters(updatedFilters);
-    },
-    [dispatch, setAppliedFilters, localFilters]
-  );
-
   return {
     localFilters,
     appliedFilters,
@@ -340,6 +322,5 @@ export const useProfileFilters = (): {
     removeFilter,
     updateFilter,
     resetFilters,
-    applyPreset,
   };
 };

package/src/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.ts

@@ -12,9 +12,9 @@
 // limitations under the License.
 
 import {useURLStateCustom, type ParamValueSetterCustom} from '@parca/components';
-import {type ProfileFilter} from '@parca/store';
 
 import {isPresetKey} from './filterPresets';
+import {type ProfileFilter} from './useProfileFilters';
 
 // Compact encoding mappings
 const TYPE_MAP: Record<string, string> = {

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

@@ -154,7 +154,7 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
 
   return (
     <>
-      <div className="flex w-full justify-between items-end">
+      <div className="flex w-full justify-between items-end gap-2">
         <div className="flex gap-2 items-end">
           {isGraphViz && (
             <>

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

@@ -88,7 +88,7 @@ const ViewSelector = ({profileSource}: Props): JSX.Element => {
     supportingText?: string;
   }): DropdownElement => {
     const title = (
-      <span className="capitalize">
+      <span className="capitalize whitespace-nowrap">
         {typeof label === 'string' ? label.replaceAll('-', ' ') : label}
       </span>
     );