@parca/profile 0.16.337 → 0.16.340

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.340](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.339...@parca/profile@0.16.340) (2024-02-12)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.339](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.338...@parca/profile@0.16.339) (2024-02-09)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.338](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.337...@parca/profile@0.16.338) (2024-02-07)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.337](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.336...@parca/profile@0.16.337) (2024-02-06)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileIcicleGraph/ActionButtons/GroupByDropdown.js

@@ -52,6 +52,6 @@ const GroupByDropdown = ({ groupBy, toggleGroupBy, }) => {
         : groupBy.length === 1
             ? groupByOptions.find(option => option.value === groupBy[0])?.label
             : 'Multiple';
-    return (_jsxs("div", { className: "relative", children: [_jsx("label", { className: "text-sm", children: "Group" }), _jsxs(Menu, { as: "div", className: "relative text-left", children: [_jsxs(Menu.Button, { className: "relative w-max cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm", children: [_jsx("span", { className: "block overflow-x-hidden text-ellipsis", children: label }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }), _jsx(Transition, { as: "div", leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Menu.Items, { className: "absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm", children: _jsx("div", { className: "p-4", children: _jsx("fieldset", { children: _jsx("div", { className: "space-y-5", children: groupByOptions.map(({ value, label, description, disabled }) => (_jsxs("div", { className: "relative flex items-start", children: [_jsx("div", { className: "flex h-6 items-center", children: _jsx("input", { id: value, name: value, type: "checkbox", disabled: disabled, className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", checked: groupBy.includes(value), onChange: () => toggleGroupBy(value) }) }), _jsxs("div", { className: "ml-3 text-sm leading-6", children: [_jsx("label", { htmlFor: value, className: "font-medium text-gray-900 dark:text-gray-200", children: label }), _jsx("p", { className: "text-gray-500 dark:text-gray-400", children: description })] })] }, value))) }) }) }) }) })] })] }));
+    return (_jsxs("div", { className: "relative", children: [_jsx("label", { className: "text-sm", children: "Group" }), _jsxs(Menu, { as: "div", className: "relative text-left", children: [_jsxs(Menu.Button, { id: "h-group-by-filter", className: "relative w-max cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm", children: [_jsx("span", { className: "block overflow-x-hidden text-ellipsis", children: label }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }), _jsx(Transition, { as: "div", leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Menu.Items, { className: "absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm", children: _jsx("div", { className: "p-4", children: _jsx("fieldset", { children: _jsx("div", { className: "space-y-5", children: groupByOptions.map(({ value, label, description, disabled }) => (_jsxs("div", { className: "relative flex items-start", children: [_jsx("div", { className: "flex h-6 items-center", children: _jsx("input", { id: value, name: value, type: "checkbox", disabled: disabled, className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", checked: groupBy.includes(value), onChange: () => toggleGroupBy(value) }) }), _jsxs("div", { className: "ml-3 text-sm leading-6", children: [_jsx("label", { htmlFor: value, className: "font-medium text-gray-900 dark:text-gray-200", children: label }), _jsx("p", { className: "text-gray-500 dark:text-gray-400", children: description })] })] }, value))) }) }) }) }) })] })] }));
 };
 export default GroupByDropdown;

package/dist/ProfileIcicleGraph/ActionButtons/RuntimeFilterDropdown.js

@@ -18,6 +18,6 @@ const RuntimeToggle = ({ id, state, toggle, label, description, }) => {
     return (_jsxs("div", { className: "relative flex items-start", children: [_jsx("div", { className: "flex h-6 items-center", children: _jsx("input", { id: id, name: id, type: "checkbox", className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", checked: state, onChange: () => toggle() }) }), _jsxs("div", { className: "ml-3 text-sm leading-6", children: [_jsx("label", { htmlFor: id, className: "font-medium text-gray-900 dark:text-gray-200", children: label }), _jsx("p", { className: "text-gray-500 dark:text-gray-400", children: description })] })] }, id));
 };
 const RuntimeFilterDropdown = ({ showRuntimeRuby, toggleShowRuntimeRuby, showRuntimePython, toggleShowRuntimePython, showInterpretedOnly, toggleShowInterpretedOnly, }) => {
-    return (_jsxs("div", { children: [_jsx("label", { className: "text-sm", children: "Runtimes" }), _jsxs(Menu, { as: "div", className: "relative text-left", children: [_jsx("div", { children: _jsxs(Menu.Button, { className: "relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm", children: [_jsx("span", { className: "block overflow-x-hidden text-ellipsis", children: "Runtimes" }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }) }), _jsx(Transition, { as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Menu.Items, { className: "absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm", children: _jsx("div", { className: "p-4", children: _jsx("fieldset", { children: _jsxs("div", { className: "space-y-5", children: [_jsx(RuntimeToggle, { id: "show-runtime-ruby", state: showRuntimeRuby, toggle: toggleShowRuntimeRuby, label: "Ruby", description: "Show Ruby runtime functions." }), _jsx(RuntimeToggle, { id: "show-runtime-python", state: showRuntimePython, toggle: toggleShowRuntimePython, label: "Python", description: "Show Python runtime functions." }), _jsx(RuntimeToggle, { id: "show-interpreted-only", state: showInterpretedOnly, toggle: toggleShowInterpretedOnly, label: "Interpreted Only", description: "Show only interpreted functions." })] }) }) }) }) })] })] }));
+    return (_jsxs("div", { children: [_jsx("label", { className: "text-sm", children: "Runtimes" }), _jsxs(Menu, { as: "div", className: "relative text-left", children: [_jsx("div", { children: _jsxs(Menu.Button, { className: "relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm", id: "h-runtimes-filter", children: [_jsx("span", { className: "block overflow-x-hidden text-ellipsis", children: "Runtimes" }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }) }), _jsx(Transition, { as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Menu.Items, { className: "absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm", children: _jsx("div", { className: "p-4", children: _jsx("fieldset", { children: _jsxs("div", { className: "space-y-5", children: [_jsx(RuntimeToggle, { id: "show-runtime-ruby", state: showRuntimeRuby, toggle: toggleShowRuntimeRuby, label: "Ruby", description: "Show Ruby runtime functions." }), _jsx(RuntimeToggle, { id: "show-runtime-python", state: showRuntimePython, toggle: toggleShowRuntimePython, label: "Python", description: "Show Python runtime functions." }), _jsx(RuntimeToggle, { id: "show-interpreted-only", state: showInterpretedOnly, toggle: toggleShowInterpretedOnly, label: "Interpreted Only", description: "Show only interpreted functions." })] }) }) }) }) })] })] }));
 };
 export default RuntimeFilterDropdown;

package/dist/ProfileIcicleGraph/ActionButtons/SortBySelect.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Select } from '@parca/components';
 import { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_NAME } from '../IcicleGraphArrow';
 const SortBySelect = ({ sortBy, setSortBy, compareMode, }) => {
-    return (_jsxs("div", { children: [_jsx("label", { className: "text-sm", children: "Sort" }), _jsx(Select, { className: "!px-3", items: [
+    return (_jsxs("div", { children: [_jsx("label", { className: "text-sm", children: "Sort" }), _jsx(Select, { id: "h-sort-by-filter", className: "!px-3", items: [
                     {
                         key: FIELD_FUNCTION_NAME,
                         disabled: false,

package/dist/ProfileIcicleGraph/index.js

@@ -39,7 +39,7 @@ const ShowHideLegendButton = ({ navigateTo, isHalfScreen, }) => {
     const setColorStackLegend = useCallback((value) => {
         setStoreColorStackLegend(value);
     }, [setStoreColorStackLegend]);
-    return (_jsx(_Fragment, { children: colorProfileName === 'default' || compareMode ? null : (_jsx(_Fragment, { children: isHalfScreen ? (_jsx(IconButton, { className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center !py-2 !px-3 cursor-pointer min-h-[38px]", icon: isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye', toolTipText: isColorStackLegendEnabled ? 'Hide legend' : 'Show legend', onClick: () => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true') })) : (_jsxs(Button, { className: "gap-2 w-max", variant: "neutral", onClick: () => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true'), children: [isColorStackLegendEnabled ? 'Hide legend' : 'Show legend', _jsx(Icon, { icon: isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye', width: 20 })] })) })) }));
+    return (_jsx(_Fragment, { children: colorProfileName === 'default' || compareMode ? null : (_jsx(_Fragment, { children: isHalfScreen ? (_jsx(IconButton, { className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center !py-2 !px-3 cursor-pointer min-h-[38px]", icon: isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye', toolTipText: isColorStackLegendEnabled ? 'Hide legend' : 'Show legend', onClick: () => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true'), id: "h-show-legend-button" })) : (_jsxs(Button, { className: "gap-2 w-max", variant: "neutral", onClick: () => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true'), id: "h-show-legend-button", children: [isColorStackLegendEnabled ? 'Hide legend' : 'Show legend', _jsx(Icon, { icon: isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye', width: 20 })] })) })) }));
 };
 const GroupAndSortActionButtons = ({ navigateTo }) => {
     const [storeSortBy = FIELD_FUNCTION_NAME, setStoreSortBy] = useURLState({

package/dist/ProfileSelector/CompareButton.js

@@ -24,6 +24,6 @@ const CompareButton = ({ disabled, onClick, }) => {
     const compareExplanation = 'Compare two profiles and see the relative difference between them more clearly.';
     if (disabled)
         return _jsx(_Fragment, {});
-    return (_jsxs("div", { ref: setComparePopperReferenceElement, children: [_jsx(Button, { variant: "neutral", disabled: disabled, onClick: onClick, onMouseEnter: () => setCompareHover(true), onMouseLeave: () => setCompareHover(false), children: "Compare" }), compareHover && (_jsx("div", { ref: setComparePopperElement, style: styles.popper, ...attributes.popper, className: "z-50", children: _jsx("div", { className: "flex", children: _jsxs("div", { className: "relative mx-2", children: [_jsx("svg", { className: "left-0 h-1 w-full text-black", x: "0px", y: "0px", viewBox: "0 0 255 127.5", children: _jsx("polygon", { className: "fill-current", points: "0,127.5 127.5,0 255,127.5" }) }), _jsx("div", { className: "right-0 w-40 rounded bg-black px-3 py-2 text-xs text-white", children: compareExplanation })] }) }) }))] }));
+    return (_jsxs("div", { ref: setComparePopperReferenceElement, children: [_jsx(Button, { variant: "neutral", disabled: disabled, onClick: onClick, onMouseEnter: () => setCompareHover(true), onMouseLeave: () => setCompareHover(false), id: "h-compare-button", children: "Compare" }), compareHover && (_jsx("div", { ref: setComparePopperElement, style: styles.popper, ...attributes.popper, className: "z-50", children: _jsx("div", { className: "flex", children: _jsxs("div", { className: "relative mx-2", children: [_jsx("svg", { className: "left-0 h-1 w-full text-black", x: "0px", y: "0px", viewBox: "0 0 255 127.5", children: _jsx("polygon", { className: "fill-current", points: "0,127.5 127.5,0 255,127.5" }) }), _jsx("div", { className: "right-0 w-40 rounded bg-black px-3 py-2 text-xs text-white", children: compareExplanation })] }) }) }))] }));
 };
 export default CompareButton;

package/dist/ProfileSelector/index.js

@@ -158,7 +158,7 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
                                                 viewComponent !== undefined && _jsx("div", { children: viewComponent?.createViewComponent })] }), _jsx(MatchersInput, { queryClient: queryClient, setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query })] }), _jsx(DateTimeRangePicker, { onRangeSelection: setTimeRangeSelection, range: timeRangeSelection }), _jsxs(ButtonGroup, { children: [!searchDisabled && (_jsx(_Fragment, { children: !comparing && (_jsx(CompareButton, { disabled: compareDisabled, onClick: handleCompareClick })) })), _jsx(Button, { disabled: searchDisabled, onClick: (e) => {
                                             e.preventDefault();
                                             setQueryExpression(true);
-                                        }, id: "matcher-search-button", children: "Search" })] })] }), _jsx("div", { children: comparing && _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}) }) })] }), _jsx("div", { className: "rounded bg-white shadow dark:border-gray-500 dark:bg-gray-700", children: _jsx("div", { style: { height: heightStyle }, children: !isDataLoading &&
+                                        }, id: "h-matcher-search-button", children: "Search" })] })] }), _jsx("div", { children: comparing && _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}) }) })] }), _jsx("div", { className: "rounded bg-white shadow dark:border-gray-500 dark:bg-gray-700", children: _jsx("div", { style: { height: heightStyle }, children: !isDataLoading &&
                         querySelection.expression !== undefined &&
                         querySelection.expression.length > 0 &&
                         querySelection.from !== undefined &&

package/dist/ProfileView/FilterByFunctionButton.js

@@ -29,6 +29,6 @@ const FilterByFunctionButton = ({ navigateTo, }) => {
             setStoreValue(localValue);
         }
     }, [localValue, isClearAction, setStoreValue]);
-    return (_jsx(Input, { placeholder: "Filter by function", className: "text-sm", onAction: onAction, onChange: e => setLocalValue(e.target.value), value: localValue ?? '', onBlur: () => setLocalValue(storeValue), actionIcon: isClearAction ? _jsx(Icon, { icon: "ep:circle-close" }) : _jsx(Icon, { icon: "ep:arrow-right" }) }));
+    return (_jsx(Input, { placeholder: "Filter by function", id: "h-filter-by-function", className: "text-sm", onAction: onAction, onChange: e => setLocalValue(e.target.value), value: localValue ?? '', onBlur: () => setLocalValue(storeValue), actionIcon: isClearAction ? _jsx(Icon, { icon: "ep:circle-close" }) : _jsx(Icon, { icon: "ep:arrow-right" }) }));
 };
 export default FilterByFunctionButton;

package/dist/ProfileView/index.js

@@ -156,7 +156,7 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                         'items-center': hasProfileSource,
                     }), children: [_jsxs("div", { children: [hasProfileSource && (_jsxs("div", { className: "max-w-[300px]", children: [_jsx("div", { className: "text-sm font-medium capitalize", children: headerParts.length > 0 ? headerParts[0].replace(/"/g, '') : '' }), _jsx("div", { className: "text-xs", children: headerParts.length > 1
                                                 ? headerParts[headerParts.length - 1].replace(/"/g, '')
-                                                : '' })] })), profileViewExternalMainActions != null ? profileViewExternalMainActions : null] }), _jsxs("div", { className: "lg:flex flex-wrap items-center gap-2 md:justify-end hidden", children: [_jsx(FilterByFunctionButton, { navigateTo: navigateTo }), profileViewExternalSubActions != null ? profileViewExternalSubActions : null, _jsx(UserPreferences, { customButton: _jsxs(Button, { className: "gap-2", variant: "neutral", children: ["Preferences", _jsx(Icon, { icon: "pajamas:preferences", width: 20 })] }) }), profileSource !== undefined && queryClient !== undefined ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsxs(Button, { className: "gap-2", variant: "neutral", onClick: e => {
+                                                : '' })] })), profileViewExternalMainActions != null ? profileViewExternalMainActions : null] }), _jsxs("div", { className: "lg:flex flex-wrap items-center gap-2 md:justify-end hidden", children: [_jsx(FilterByFunctionButton, { navigateTo: navigateTo }), profileViewExternalSubActions != null ? profileViewExternalSubActions : null, _jsx(UserPreferences, { customButton: _jsxs(Button, { className: "gap-2", variant: "neutral", id: "h-viz-preferences", children: ["Preferences", _jsx(Icon, { icon: "pajamas:preferences", width: 20 })] }) }), profileSource !== undefined && queryClient !== undefined ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsxs(Button, { id: "h-download-pprof", className: "gap-2", variant: "neutral", onClick: e => {
                                         e.preventDefault();
                                         onDownloadPProf();
                                     }, disabled: pprofDownloading, children: [pprofDownloading != null && pprofDownloading ? 'Downloading...' : 'Download pprof', _jsx(Icon, { icon: "material-symbols:download", width: 20 })] }), _jsx(ViewSelector, { defaultValue: "", navigateTo: navigateTo, position: -1, placeholderText: "Add panel", icon: _jsx(Icon, { icon: "material-symbols:add", width: 20 }), addView: true, disabled: isMultiPanelView || dashboardItems.length < 1 })] })] }), _jsx("div", { className: "w-full", ref: ref, children: _jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: provided => (_jsx("div", { ref: provided.innerRef, className: cx('grid w-full gap-2', isMultiPanelView ? 'grid-cols-2' : 'grid-cols-1'), ...provided.droppableProps, children: dashboardItems.map((dashboardItem, index) => {

package/dist/components/ProfileShareButton/index.js

@@ -55,6 +55,6 @@ const ProfileShareModal = ({ isOpen, closeModal, queryRequest, queryClient, }) =
 };
 const ProfileShareButton = ({ queryRequest, queryClient, disabled = false }) => {
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "neutral", onClick: () => setIsOpen(true), disabled: disabled, className: "gap-2", children: ["Share profile", _jsx(Icon, { icon: "material-symbols:share", width: 20 })] }), _jsx(ProfileShareModal, { isOpen: isOpen, closeModal: () => setIsOpen(false), queryRequest: queryRequest, queryClient: queryClient })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "neutral", onClick: () => setIsOpen(true), disabled: disabled, className: "gap-2", id: "h-share-profile-button", children: ["Share profile", _jsx(Icon, { icon: "material-symbols:share", width: 20 })] }), _jsx(ProfileShareModal, { isOpen: isOpen, closeModal: () => setIsOpen(false), queryRequest: queryRequest, queryClient: queryClient })] }));
 };
 export default ProfileShareButton;

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.337",
+  "version": "0.16.340",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.16.100",
-    "@parca/components": "^0.16.247",
+    "@parca/client": "^0.16.102",
+    "@parca/components": "^0.16.250",
     "@parca/dynamicsize": "^0.16.60",
-    "@parca/hooks": "^0.0.38",
+    "@parca/hooks": "^0.0.40",
     "@parca/parser": "^0.16.68",
-    "@parca/store": "^0.16.125",
-    "@parca/utilities": "^0.0.53",
+    "@parca/store": "^0.16.127",
+    "@parca/utilities": "^0.0.55",
     "@tanstack/react-query": "^4.0.5",
     "@types/react-beautiful-dnd": "^13.1.3",
     "apache-arrow": "^12.0.0",
@@ -51,5 +51,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "8b3f6adaea155bccaa116329ecca5d786aa7e172"
+  "gitHead": "e7080a85def2fdff1db52e48116998a4dc19484b"
 }

package/src/ProfileIcicleGraph/ActionButtons/GroupByDropdown.tsx

@@ -73,7 +73,10 @@ const GroupByDropdown = ({
     <div className="relative">
       <label className="text-sm">Group</label>
       <Menu as="div" className="relative text-left">
-        <Menu.Button className="relative w-max cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm">
+        <Menu.Button
+          id="h-group-by-filter"
+          className="relative w-max cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm"
+        >
           <span className="block overflow-x-hidden text-ellipsis">{label}</span>
           <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 text-gray-400">
             <Icon icon="heroicons:chevron-down-20-solid" aria-hidden="true" />

package/src/ProfileIcicleGraph/ActionButtons/RuntimeFilterDropdown.tsx

@@ -71,7 +71,10 @@ const RuntimeFilterDropdown = ({
       <label className="text-sm">Runtimes</label>
       <Menu as="div" className="relative text-left">
         <div>
-          <Menu.Button className="relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm">
+          <Menu.Button
+            className="relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm"
+            id="h-runtimes-filter"
+          >
             <span className="block overflow-x-hidden text-ellipsis">Runtimes</span>
             <span className="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2 text-gray-400">
               <Icon icon="heroicons:chevron-down-20-solid" aria-hidden="true" />

package/src/ProfileIcicleGraph/ActionButtons/SortBySelect.tsx

@@ -28,6 +28,7 @@ const SortBySelect = ({
     <div>
       <label className="text-sm">Sort</label>
       <Select
+        id="h-sort-by-filter"
         className="!px-3"
         items={[
           {

package/src/ProfileIcicleGraph/index.tsx

@@ -97,12 +97,14 @@ const ShowHideLegendButton = ({
               icon={isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye'}
               toolTipText={isColorStackLegendEnabled ? 'Hide legend' : 'Show legend'}
               onClick={() => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true')}
+              id="h-show-legend-button"
             />
           ) : (
             <Button
               className="gap-2 w-max"
               variant="neutral"
               onClick={() => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true')}
+              id="h-show-legend-button"
             >
               {isColorStackLegendEnabled ? 'Hide legend' : 'Show legend'}
               <Icon icon={isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye'} width={20} />

package/src/ProfileSelector/CompareButton.tsx

@@ -45,6 +45,7 @@ const CompareButton = ({
         onClick={onClick}
         onMouseEnter={() => setCompareHover(true)}
         onMouseLeave={() => setCompareHover(false)}
+        id="h-compare-button"
       >
         Compare
       </Button>

package/src/ProfileSelector/index.tsx

@@ -287,7 +287,7 @@ const ProfileSelector = ({
                 e.preventDefault();
                 setQueryExpression(true);
               }}
-              id="matcher-search-button"
+              id="h-matcher-search-button"
             >
               Search
             </Button>

package/src/ProfileView/FilterByFunctionButton.tsx

@@ -42,6 +42,7 @@ const FilterByFunctionButton = ({
   return (
     <Input
       placeholder="Filter by function"
+      id="h-filter-by-function"
       className="text-sm"
       onAction={onAction}
       onChange={e => setLocalValue(e.target.value)}

package/src/ProfileView/index.tsx

@@ -370,7 +370,7 @@ export const ProfileView = ({
             {profileViewExternalSubActions != null ? profileViewExternalSubActions : null}
             <UserPreferences
               customButton={
-                <Button className="gap-2" variant="neutral">
+                <Button className="gap-2" variant="neutral" id="h-viz-preferences">
                   Preferences
                   <Icon icon="pajamas:preferences" width={20} />
                 </Button>
@@ -383,6 +383,7 @@ export const ProfileView = ({
               />
             ) : null}
             <Button
+              id="h-download-pprof"
               className="gap-2"
               variant="neutral"
               onClick={e => {

package/src/components/ProfileShareButton/index.tsx

@@ -132,6 +132,7 @@ const ProfileShareButton = ({queryRequest, queryClient, disabled = false}: Props
         onClick={() => setIsOpen(true)}
         disabled={disabled}
         className="gap-2"
+        id="h-share-profile-button"
       >
         Share profile
         <Icon icon="material-symbols:share" width={20} />