@parca/profile 0.19.10 → 0.19.12

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.12 (2025-07-02)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.19.11](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.10...@parca/profile@0.19.11) (2025-06-26)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.19.10](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.9...@parca/profile@0.19.10) (2025-06-25)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileSelector/QueryControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QueryControls.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/QueryControls.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAClD,OAAe,EAAC,KAAK,cAAc,EAAC,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAC,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,EAAS,aAAa,EAAsB,MAAM,mBAAmB,CAAC;AAC7E,OAAO,EAAC,WAAW,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAYjD,UAAU,kBAAkB;IAC1B,uBAAuB,EAAE,OAAO,CAAC;IACjC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,0BAA0B,EAAE,OAAO,CAAC;IACpC,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACnD,iBAAiB,CAAC,EAAE,QAAQ,CAAC;IAC7B,aAAa,CAAC,EAAE;QACd,2BAA2B,CAAC,EAAE,OAAO,CAAC;QACtC,0BAA0B,CAAC,EAAE,OAAO,CAAC;QACrC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;QACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACvC,CAAC;IACF,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,2BAA2B,EAAE,OAAO,CAAC;IACrC,8BAA8B,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,kBAAkB,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,KAAK,EAAE,KAAK,CAAC;IACb,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACjD,kBAAkB,EAAE,aAAa,CAAC;IAClC,qBAAqB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACtD,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,kBAAkB,CAAC;IAChC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC1C,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,aAAa,CAAC,EAC5B,uBAAuB,EACvB,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,2BAA2B,EAC3B,8BAA8B,EAC9B,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,qBAAqB,EACrB,cAAc,EACd,WAAW,EACX,MAAM,EACN,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,QAAQ,EACR,WAAW,EACX,iBAAiB,EACjB,iBAAiB,GAClB,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAkJlC"}
+{"version":3,"file":"QueryControls.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/QueryControls.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAClD,OAAe,EAAC,KAAK,cAAc,EAAC,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAC,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,EAAS,aAAa,EAAsB,MAAM,mBAAmB,CAAC;AAC7E,OAAO,EAAC,WAAW,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAYjD,UAAU,kBAAkB;IAC1B,uBAAuB,EAAE,OAAO,CAAC;IACjC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,0BAA0B,EAAE,OAAO,CAAC;IACpC,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACnD,iBAAiB,CAAC,EAAE,QAAQ,CAAC;IAC7B,aAAa,CAAC,EAAE;QACd,2BAA2B,CAAC,EAAE,OAAO,CAAC;QACtC,0BAA0B,CAAC,EAAE,OAAO,CAAC;QACrC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;QACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACvC,CAAC;IACF,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,2BAA2B,EAAE,OAAO,CAAC;IACrC,8BAA8B,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,kBAAkB,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,KAAK,EAAE,KAAK,CAAC;IACb,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACjD,kBAAkB,EAAE,aAAa,CAAC;IAClC,qBAAqB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACtD,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,kBAAkB,CAAC;IAChC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC1C,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,aAAa,CAAC,EAC5B,uBAAuB,EACvB,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,2BAA2B,EAC3B,8BAA8B,EAC9B,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,qBAAqB,EACrB,cAAc,EACd,WAAW,EACX,MAAM,EACN,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,QAAQ,EACR,WAAW,EACX,iBAAiB,EACjB,iBAAiB,GAClB,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAmJlC"}

package/dist/ProfileSelector/QueryControls.js

@@ -24,7 +24,7 @@ export function QueryControls({ showProfileTypeSelector, profileTypesData, profi
                                                     setQueryBrowserMode(advancedModeForQueryBrowser ? 'simple' : 'advanced');
                                                 }, className: `${advancedModeForQueryBrowser ? 'bg-indigo-600' : 'bg-gray-400 dark:bg-gray-800'} relative inline-flex h-[20px] w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75`, children: [_jsx("span", { className: "sr-only", children: "Use setting" }), _jsx("span", { "aria-hidden": "true", className: `${advancedModeForQueryBrowser ? 'translate-x-6' : 'translate-x-0'} pointer-events-none inline-block h-[16px] w-[16px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out` })] }), _jsx("label", { className: "text-xs", children: "Advanced Mode" })] }))] }), viewComponent?.createViewComponent] }), viewComponent?.disableExplorativeQuerying === true &&
                         viewComponent?.labelnames !== undefined &&
-                        viewComponent?.labelnames.length >= 1 ? (_jsx(ViewMatchers, { labelNames: viewComponent.labelnames, setMatchersString: setMatchersString, profileType: selectedProfileName, runQuery: setQueryExpression, currentQuery: query, queryClient: queryClient })) : advancedModeForQueryBrowser ? (_jsx(MatchersInput, { setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query, profileType: selectedProfileName, queryClient: queryClient })) : (_jsx(SimpleMatchers, { setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query, profileType: selectedProfileName, queryBrowserRef: queryBrowserRef, queryClient: queryClient }, query.toString()))] }), showSumBySelector && (_jsxs("div", { children: [_jsx("div", { className: "mb-0.5 mt-1.5 flex items-center justify-between", children: _jsx("label", { className: "text-xs", children: "Sum by" }) }), _jsx(Select, { id: "h-sum-by-selector", defaultValue: [], isMulti: true, name: "colors", options: labels.map(label => ({ label, value: label })), className: "parca-select-container text-sm w-full max-w-80", classNamePrefix: "parca-select", value: (sumBySelection ?? []).map(sumBy => ({ label: sumBy, value: sumBy })), onChange: newValue => {
+                        viewComponent?.labelnames.length >= 1 ? (_jsx(ViewMatchers, { labelNames: viewComponent.labelnames, setMatchersString: setMatchersString, profileType: selectedProfileName, runQuery: setQueryExpression, currentQuery: query, queryClient: queryClient })) : advancedModeForQueryBrowser ? (_jsx(MatchersInput, { setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query, profileType: selectedProfileName, queryClient: queryClient })) : (_jsx(SimpleMatchers, { setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query, profileType: selectedProfileName, queryBrowserRef: queryBrowserRef, queryClient: queryClient }, query.toString()))] }), showSumBySelector && (_jsxs("div", { children: [_jsx("div", { className: "mb-0.5 mt-1.5 flex items-center justify-between", children: _jsx("label", { className: "text-xs", children: "Sum by" }) }), _jsx(Select, { id: "h-sum-by-selector", defaultValue: [], isMulti: true, isClearable: false, name: "colors", options: labels.map(label => ({ label, value: label })), className: "parca-select-container text-sm w-full max-w-80", classNamePrefix: "parca-select", value: (sumBySelection ?? []).map(sumBy => ({ label: sumBy, value: sumBy })), onChange: newValue => {
                             setUserSumBySelection(newValue.map(option => option.value));
                         }, placeholder: "Labels...", styles: {
                             indicatorSeparator: () => ({ display: 'none' }),

package/dist/ProfileView/components/ActionButtons/GroupByDropdown.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 interface GroupByControlsProps {
     groupBy: string[];
     labels: string[];
-    toggleGroupBy: (key: string) => void;
     setGroupByLabels: (labels: string[]) => void;
 }
 declare const GroupByControls: React.FC<GroupByControlsProps>;

package/dist/ProfileView/components/ActionButtons/GroupByDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupByDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ActionButtons/GroupByDropdown.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAuRzD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoDnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"GroupByDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ActionButtons/GroupByDropdown.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAYnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ProfileView/components/ActionButtons/GroupByDropdown.js

@@ -1,143 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Copyright 2022 The Parca Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-import { useEffect, useRef, useState } from 'react';
-import { Transition } from '@headlessui/react';
-import { Icon } from '@iconify/react';
-import Select from 'react-select';
-import { Button } from '@parca/components';
-import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LABELS, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from '../../../ProfileIcicleGraph/IcicleGraphArrow';
-const groupByOptions = [
-    {
-        value: FIELD_FUNCTION_NAME,
-        label: 'Function Name',
-        description: 'Stacktraces are grouped by function names.',
-        disabled: true,
-    },
-    {
-        value: FIELD_FUNCTION_FILE_NAME,
-        label: 'Filename',
-        description: 'Stacktraces are grouped by filenames.',
-        disabled: false,
-    },
-    {
-        value: FIELD_LOCATION_ADDRESS,
-        label: 'Address',
-        description: 'Stacktraces are grouped by addresses.',
-        disabled: false,
-    },
-    {
-        value: FIELD_MAPPING_FILE,
-        label: 'Binary',
-        description: 'Stacktraces are grouped by binaries.',
-        disabled: false,
-    },
-];
-const LabelSelector = ({ labels, groupBy, setGroupByLabels, isOpen, labelsButtonRef, setIsLabelSelectorOpen, }) => {
-    const [position, setPosition] = useState({ top: 0, left: 0 });
-    useEffect(() => {
-        if (isOpen && labelsButtonRef.current !== null) {
-            const rect = labelsButtonRef.current.getBoundingClientRect();
-            const parentRect = labelsButtonRef.current.offsetParent?.getBoundingClientRect() ?? {
-                top: 0,
-                left: 0,
-            };
-            setPosition({
-                top: rect.bottom - parentRect.top,
-                left: rect.right - parentRect.left + 4,
-            });
-        }
-    }, [isOpen, labelsButtonRef]);
-    if (!isOpen)
-        return null;
-    return (_jsx("div", { className: "absolute w-64 ml-4 z-20", style: {
-            top: `${position.top}px`,
-            left: `${position.left}px`,
-        }, children: _jsx(Select, { isMulti: true, name: "labels", options: labels.map(label => ({ label, value: `${FIELD_LABELS}.${label}` })), className: "parca-select-container text-sm w-full border-gray-300 border rounded-md", classNamePrefix: "parca-select", value: groupBy
-                .filter(l => l.startsWith(FIELD_LABELS))
-                .map(l => ({ value: l, label: l.slice(FIELD_LABELS.length + 1) })), onChange: newValue => {
-                setGroupByLabels(newValue.map(option => option.value));
-                setIsLabelSelectorOpen(false);
-            }, placeholder: "Select labels...", styles: {
-                menu: provided => ({
-                    ...provided,
-                    position: 'relative',
-                    marginBottom: 0,
-                    boxShadow: 'none',
-                    marginTop: 0,
-                }),
-                control: provided => ({
-                    ...provided,
-                    boxShadow: 'none',
-                    borderBottom: '1px solid #e2e8f0',
-                    borderRight: 0,
-                    borderLeft: 0,
-                    borderTop: 0,
-                    borderBottomLeftRadius: 0,
-                    borderBottomRightRadius: 0,
-                    ':hover': {
-                        borderColor: '#e2e8f0',
-                        borderBottomLeftRadius: 0,
-                        borderBottomRightRadius: 0,
-                    },
-                }),
-            }, menuIsOpen: true }) }));
-};
-const GroupByDropdown = ({ groupBy, toggleGroupBy, onLabelClick, labelsButtonRef, }) => {
-    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-    const dropdownRef = useRef(null);
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (isDropdownOpen &&
-                dropdownRef.current != null &&
-                !dropdownRef.current.contains(event.target)) {
-                setIsDropdownOpen(false);
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isDropdownOpen]);
-    const label = groupBy.length === 0
-        ? 'Nothing'
-        : groupBy.length === 1
-            ? groupByOptions.find(option => option.value === groupBy[0])?.label
-            : 'Multiple';
-    const selectedLabels = groupBy
-        .filter(l => l.startsWith(FIELD_LABELS))
-        .map(l => l.slice(FIELD_LABELS.length + 1));
-    return (_jsxs("div", { className: "relative", ref: dropdownRef, children: [_jsx("label", { className: "text-sm", children: "Group by" }), _jsxs("div", { className: "relative text-left", id: "h-group-by-filter", children: [_jsxs(Button, { variant: "neutral", onClick: () => setIsDropdownOpen(!isDropdownOpen), className: "relative w-max cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] text-left text-sm shadow-sm 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", show: isDropdownOpen, children: _jsx("div", { 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: [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))), _jsxs("div", { className: "ml-7 flex flex-col items-start text-sm leading-6 cursor-pointer", onClick: onLabelClick, ref: labelsButtonRef, children: [_jsxs("div", { className: "flex justify-between w-full items-center", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium text-gray-900 dark:text-gray-200", children: "Labels" }), _jsx("p", { className: "text-gray-500 dark:text-gray-400", children: "Stacktraces are grouped by labels." })] }), _jsx(Icon, { icon: "flowbite:caret-right-solid", className: "h-[14px] w-[14px]" })] }), selectedLabels.length > 0 && (_jsxs("div", { className: "flex gap-2 flex-wrap", children: [_jsx("span", { className: "text-gray-500 dark:text-gray-200", children: "Selected labels:" }), _jsx("div", { className: "flex flex-wrap gap-3", children: selectedLabels.map(label => (_jsx("span", { className: "mr-2 px-3 py-1 text-xs text-gray-700 dark:text-gray-200 bg-gray-200 rounded-md dark:bg-gray-800", children: label }, label))) })] }))] })] }) }) }) }) })] })] }));
-};
-const GroupByControls = ({ groupBy, labels, toggleGroupBy, setGroupByLabels, }) => {
-    const [isLabelSelectorOpen, setIsLabelSelectorOpen] = useState(false);
-    const labelsButton = useRef(null);
-    const labelSelectorRef = useRef(null);
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (isLabelSelectorOpen &&
-                labelSelectorRef.current !== null &&
-                !labelSelectorRef.current.contains(event.target) &&
-                labelsButton.current !== null &&
-                !labelsButton.current.contains(event.target)) {
-                setIsLabelSelectorOpen(false);
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isLabelSelectorOpen]);
-    return (_jsx("div", { className: "inline-flex items-start", children: _jsxs("div", { className: "relative flex items-start", children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, onLabelClick: () => setIsLabelSelectorOpen(!isLabelSelectorOpen), labelsButtonRef: labelsButton }), _jsx("div", { ref: labelSelectorRef, children: _jsx(LabelSelector, { labels: labels, groupBy: groupBy, setGroupByLabels: setGroupByLabels, isOpen: isLabelSelectorOpen, labelsButtonRef: labelsButton, setIsLabelSelectorOpen: setIsLabelSelectorOpen }) })] }) }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import GroupByLabelsDropdown from '../GroupByLabelsDropdown';
+const GroupByControls = ({ groupBy, labels, setGroupByLabels }) => {
+    return (_jsx("div", { className: "inline-flex items-start", children: _jsx("div", { className: "relative flex gap-3 items-start", children: _jsx(GroupByLabelsDropdown, { labels: labels, groupBy: groupBy, setGroupByLabels: setGroupByLabels }) }) }));
 };
 export default GroupByControls;

package/dist/ProfileView/components/GroupByLabelsDropdown/index.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    labels: string[];
+    groupBy: string[];
+    setGroupByLabels: (labels: string[]) => void;
+}
+declare const GroupByLabelsDropdown: ({ labels, groupBy, setGroupByLabels }: Props) => JSX.Element;
+export default GroupByLabelsDropdown;
+//# sourceMappingURL=index.d.ts.map

package/dist/ProfileView/components/GroupByLabelsDropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/GroupByLabelsDropdown/index.tsx"],"names":[],"mappings":"AAsBA,UAAU,KAAK;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,qBAAqB,0CAAyC,KAAK,KAAG,GAAG,CAAC,OA6D/E,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import Select from 'react-select';
+import { FIELD_LABELS } from '../../../ProfileIcicleGraph/IcicleGraphArrow';
+const GroupByLabelsDropdown = ({ labels, groupBy, setGroupByLabels }) => {
+    return (_jsxs("div", { children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("label", { className: "text-sm", children: "Group by" }) }), _jsx(Select, { id: "h-group-by-labels-selector", isMulti: true, defaultMenuIsOpen: false, defaultValue: undefined, name: "labels", options: labels.map(label => ({ label, value: `${FIELD_LABELS}.${label}` })), className: "parca-select-container text-sm w-full rounded-md bg-white", classNamePrefix: "parca-select", value: groupBy
+                    .filter(l => l.startsWith(FIELD_LABELS))
+                    .map(l => ({ value: l, label: l.slice(FIELD_LABELS.length + 1) })), onChange: newValue => {
+                    setGroupByLabels(newValue.map(option => option.value));
+                }, placeholder: "Select labels...", styles: {
+                    menu: provided => ({
+                        ...provided,
+                        marginBottom: 0,
+                        boxShadow: 'none',
+                        marginTop: 0,
+                        zIndex: 1000,
+                        minWidth: '320px',
+                    }),
+                    control: provided => ({
+                        ...provided,
+                        position: 'relative',
+                        boxShadow: 'none',
+                        borderBottom: '1px solid #e2e8f0',
+                        borderRight: '1px solid #e2e8f0',
+                        borderLeft: '1px solid #e2e8f0',
+                        borderTop: '1px solid #e2e8f0',
+                        ':hover': {
+                            borderColor: '#e2e8f0',
+                            borderBottomLeftRadius: 0,
+                            borderBottomRightRadius: 0,
+                        },
+                    }),
+                    option: provided => ({
+                        ...provided,
+                        ':hover': {
+                            backgroundColor: '#4f46e5',
+                            color: '#ffffff',
+                        },
+                        ':focus': {
+                            backgroundColor: '#4f46e5',
+                            color: '#ffffff',
+                        },
+                    }),
+                } })] }));
+};
+export default GroupByLabelsDropdown;

package/dist/ProfileView/components/InvertCallStack/index.d.ts

@@ -0,0 +1,3 @@
+declare const InvertCallStack: () => JSX.Element;
+export default InvertCallStack;
+//# sourceMappingURL=index.d.ts.map

package/dist/ProfileView/components/InvertCallStack/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/InvertCallStack/index.tsx"],"names":[],"mappings":"AAiBA,QAAA,MAAM,eAAe,QAAO,GAAG,CAAC,OAc/B,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { Icon } from '@iconify/react';
+import { Button, useURLState } from '@parca/components';
+const InvertCallStack = () => {
+    const [invertStack = '', setInvertStack] = useURLState('invert_call_stack');
+    const isInvert = invertStack === 'true';
+    return (_jsxs(Button, { variant: "neutral", className: "flex items-center gap-2", onClick: () => setInvertStack(isInvert ? '' : 'true'), children: [_jsx(Icon, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', className: "h-4 w-4" }), isInvert ? 'Original' : 'Invert', " Call Stack"] }));
+};
+export default InvertCallStack;

package/dist/ProfileView/components/ShareButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ShareButton/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,EAAC,YAAY,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAG/D,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrD,UAAU,KAAK;IACb,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,6BAA6B,EAAE,KAAK,CAAC,SAAS,CAAC;CAChD;AAmGD,QAAA,MAAM,WAAW,oHAOd,KAAK,KAAG,GAAG,CAAC,OA4Ed,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ShareButton/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,EAAC,YAAY,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAG/D,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrD,UAAU,KAAK;IACb,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,6BAA6B,EAAE,KAAK,CAAC,SAAS,CAAC;CAChD;AAmGD,QAAA,MAAM,WAAW,oHAOd,KAAK,KAAG,GAAG,CAAC,OAgFd,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -77,7 +77,7 @@ const ShareButton = ({ queryRequest, queryClient, profileSource, onDownloadPProf
     return (_jsx(_Fragment, { children: profileViewExternalSubActions != null ? (_jsx(_Fragment, { children: _jsxs(Button, { className: "gap-2", variant: "neutral", onClick: e => {
                     e.preventDefault();
                     onDownloadPProf();
-                }, disabled: pprofdownloading, id: "h-download-pprof", children: [pprofdownloading != null && pprofdownloading ? 'Downloading...' : 'Download pprof', _jsx(Icon, { icon: "material-symbols:download", width: 20 })] }) })) : (_jsxs(_Fragment, { children: [_jsxs(Dropdown, { dropdownWidth: "w-48", element: _jsxs(Button, { variant: "neutral", children: ["Share", _jsx(Icon, { icon: "material-symbols:share", className: "h-5 w-5 ml-2" })] }), children: [_jsx("span", { className: "text-xs text-gray-400 capitalize px-2", children: "actions" }), actions.map(item => (_jsx(Dropdown.Item, { onSelect: item.onSelect, children: _jsxs("div", { id: item.id, className: "flex items-center", children: [_jsx("span", { children: item.label }), _jsx(Icon, { icon: item.icon, className: "ml-2 h-4 w-4" })] }) }, item.key)))] }), profileSource !== undefined &&
+                }, disabled: pprofdownloading, id: "h-download-pprof", children: [pprofdownloading != null && pprofdownloading ? 'Downloading...' : 'Download pprof', _jsx(Icon, { icon: "material-symbols:download", width: 20 })] }) })) : (_jsxs(_Fragment, { children: [_jsxs(Dropdown, { dropdownWidth: "w-48", element: _jsxs(Button, { variant: "neutral", className: "flex items-center gap-2", id: "h-share-dropdown-button", children: [_jsx(Icon, { icon: "material-symbols:share", className: "h-4 w-4" }), "Share"] }), children: [_jsx("span", { className: "text-xs text-gray-400 capitalize px-2", children: "actions" }), actions.map(item => (_jsx(Dropdown.Item, { onSelect: item.onSelect, children: _jsxs("div", { id: item.id, className: "flex items-center gap-2", children: [_jsx(Icon, { icon: item.icon, className: "h-4 w-4" }), _jsx("span", { children: item.label })] }) }, item.key)))] }), profileSource !== undefined &&
                     queryClient !== undefined &&
                     queryRequest !== undefined && (_jsx(ProfileShareModal, { isOpen: showProfileShareModal, closeModal: () => setShowProfileShareModal(false), queryRequest: queryRequest, queryClient: queryClient }))] })) }));
 };

package/dist/ProfileView/components/Toolbars/MultiLevelDropdown.d.ts

@@ -3,6 +3,9 @@ import { ProfileType } from '@parca/parser';
 interface MultiLevelDropdownProps {
     onSelect: (path: string[]) => void;
     profileType?: ProfileType;
+    groupBy: string[];
+    toggleGroupBy: (key: string) => void;
+    isTableVizOnly: boolean;
 }
 declare const MultiLevelDropdown: React.FC<MultiLevelDropdownProps>;
 export default MultiLevelDropdown;

package/dist/ProfileView/components/Toolbars/MultiLevelDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiLevelDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/MultiLevelDropdown.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAOzC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AA6H1C,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAkKzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"MultiLevelDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/MultiLevelDropdown.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAQtE,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAkK1C,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAyOzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -11,14 +11,29 @@ 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 { useCallback } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Menu } from '@headlessui/react';
 import { Icon } from '@iconify/react';
+import cx from 'classnames';
 import { useURLState } from '@parca/components';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
-import { FIELD_FUNCTION_NAME } from '../../../ProfileIcicleGraph/IcicleGraphArrow';
+import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from '../../../ProfileIcicleGraph/IcicleGraphArrow';
 import { useProfileViewContext } from '../../context/ProfileViewContext';
-const MenuItem = ({ label, items, onclick, onSelect, path = [], id, closeDropdown, isNested = false, activeValueForSortBy, activeValueForColorBy, value, disabled = false, icon, customSubmenu, }) => {
+import SwitchMenuItem from './SwitchMenuItem';
+const MenuItem = ({ label, items, onclick, onSelect, path = [], id, closeDropdown, isNested = false, activeValueForSortBy, activeValueForColorBy, activeValuesForLevel, value, disabled = false, icon, customSubmenu, renderAsDiv = false, }) => {
+    const menuRef = useRef(null);
+    const [shouldOpenLeft, setShouldOpenLeft] = useState(false);
+    useEffect(() => {
+        if (items !== undefined && menuRef.current !== null) {
+            const rect = menuRef.current.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            const menuWidth = 224; // w-56 = 14rem = 224px
+            const spaceOnRight = viewportWidth - rect.right;
+            const spaceOnLeft = rect.left;
+            // Open to the left if there's not enough space on the right but enough on the left
+            setShouldOpenLeft(spaceOnRight < menuWidth && spaceOnLeft >= menuWidth);
+        }
+    }, [items]);
     let isActive = false;
     if (isNested) {
         if (activeValueForSortBy !== undefined && value === activeValueForSortBy) {
@@ -27,6 +42,9 @@ const MenuItem = ({ label, items, onclick, onSelect, path = [], id, closeDropdow
         if (activeValueForColorBy !== undefined && value === activeValueForColorBy) {
             isActive = true;
         }
+        if (activeValuesForLevel?.includes(value ?? '') ?? false) {
+            isActive = true;
+        }
     }
     const handleSelect = () => {
         if (items === undefined) {
@@ -40,17 +58,19 @@ const MenuItem = ({ label, items, onclick, onSelect, path = [], id, closeDropdow
             }
         }
     };
-    return (_jsx("div", { className: "relative", children: _jsx(Menu, { children: ({ close }) => (_jsxs(_Fragment, { children: [_jsxs(Menu.Button, { className: `w-full text-left px-4 py-2 text-sm ${disabled
+    return (_jsx("div", { className: "relative", ref: menuRef, children: _jsx(Menu, { children: ({ close }) => (_jsxs(_Fragment, { children: [_jsxs(Menu.Button, { as: renderAsDiv ? 'div' : 'button', className: `w-full text-left px-4 py-2 text-sm ${disabled
                             ? 'text-gray-400'
                             : isActive
                                 ? 'text-white bg-indigo-400 hover:text-white'
-                                : 'text-white-600 hover:bg-indigo-600 hover:text-white'} flex justify-between items-center`, onClick: handleSelect, id: id, disabled: disabled, children: [customSubmenu !== undefined ? (customSubmenu) : (_jsxs("span", { className: "flex items-center", children: [_jsxs("div", { className: "flex items-center", children: [_jsx("span", { children: label }), icon !== undefined && _jsx(Icon, { icon: icon, className: "ml-2 h-4 w-4" })] }), isActive && _jsx(Icon, { icon: "heroicons-solid:check", className: "ml-2 h-4 w-4" })] })), items !== undefined && (_jsx(Icon, { icon: "flowbite:caret-right-solid", className: "h-[14px] w-[14px]" }))] }), items !== undefined && (_jsx(Menu.Items, { className: "absolute left-full top-0 w-56 mt-0 origin-top-right bg-white border border-gray-200 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-900 ml-1 dark:border-gray-600", children: items?.map((item, index) => (_jsx(MenuItem, { ...item, onSelect: selectedPath => {
+                                : 'text-white-600 hover:bg-indigo-600 hover:text-white'} flex justify-between items-center`, onClick: handleSelect, id: id, disabled: disabled, children: [customSubmenu !== undefined ? (customSubmenu) : (_jsxs("span", { className: "flex items-center", children: [_jsxs("div", { className: "flex items-center gap-2", children: [icon !== undefined && _jsx(Icon, { icon: icon, className: "h-4 w-4" }), _jsx("span", { children: label })] }), isActive && _jsx(Icon, { icon: "heroicons-solid:check", className: "ml-2 h-4 w-4" })] })), items !== undefined && (_jsx(Icon, { icon: "flowbite:caret-right-solid", className: "h-[14px] w-[14px]" }))] }), items !== undefined && (_jsx(Menu.Items, { className: `absolute top-0 w-56 mt-0 bg-white border border-gray-200 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-900 dark:border-gray-600 ${shouldOpenLeft
+                            ? 'right-full mr-1 origin-top-left'
+                            : 'left-full ml-1 origin-top-right'}`, children: items?.map((item, index) => (_jsx(MenuItem, { ...item, onSelect: selectedPath => {
                                 onSelect([...path, ...selectedPath]);
                                 close();
                                 closeDropdown();
-                            }, path: [...path, label], closeDropdown: closeDropdown, isNested: true, activeValueForSortBy: activeValueForSortBy, activeValueForColorBy: activeValueForColorBy }, index))) }))] })) }) }));
+                            }, path: [...path, label], closeDropdown: closeDropdown, isNested: true, activeValueForSortBy: activeValueForSortBy, activeValueForColorBy: activeValueForColorBy, activeValuesForLevel: activeValuesForLevel }, index))) }))] })) }) }));
 };
-const MultiLevelDropdown = ({ onSelect, profileType }) => {
+const MultiLevelDropdown = ({ onSelect, profileType, groupBy, toggleGroupBy, isTableVizOnly, }) => {
     const [storeSortBy] = useURLState('sort_by', {
         defaultValue: FIELD_FUNCTION_NAME,
     });
@@ -63,8 +83,6 @@ const MultiLevelDropdown = ({ onSelect, profileType }) => {
     });
     const { compareMode } = useProfileViewContext();
     const [colorProfileName] = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key);
-    const [invertStack = '', setInvertStack] = useURLState('invert_call_stack');
-    const isInvert = invertStack === 'true';
     const isColorStackLegendEnabled = colorStackLegend === 'true';
     const [alignFunctionName, setAlignFunctionName] = useURLState('align_function_name');
     const isLeftAligned = alignFunctionName === 'left' || alignFunctionName === undefined;
@@ -85,9 +103,37 @@ const MultiLevelDropdown = ({ onSelect, profileType }) => {
         setBinaryFrameFilter([]);
     };
     const menuItems = [
+        {
+            label: 'Levels',
+            id: 'h-levels-filter',
+            items: [
+                {
+                    label: 'Function',
+                    onclick: () => toggleGroupBy(FIELD_FUNCTION_NAME),
+                    value: FIELD_FUNCTION_NAME,
+                },
+                {
+                    label: 'Binary',
+                    onclick: () => toggleGroupBy(FIELD_MAPPING_FILE),
+                    value: FIELD_MAPPING_FILE,
+                },
+                {
+                    label: 'Code',
+                    onclick: () => toggleGroupBy(FIELD_FUNCTION_FILE_NAME),
+                    value: FIELD_FUNCTION_FILE_NAME,
+                },
+                {
+                    label: 'Address',
+                    onclick: () => toggleGroupBy(FIELD_LOCATION_ADDRESS),
+                    value: FIELD_LOCATION_ADDRESS,
+                },
+            ],
+            hide: !!isTableVizOnly,
+            icon: 'heroicons-solid:bars-3',
+        },
         {
             label: 'Color by',
-            id: 'h-solor-by-filter',
+            id: 'h-color-by-filter',
             items: [
                 {
                     label: 'Binary',
@@ -110,17 +156,11 @@ const MultiLevelDropdown = ({ onSelect, profileType }) => {
             id: 'h-show-legend-button',
             icon: isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye',
         },
-        {
-            label: isInvert ? 'Original Call Stack' : 'Invert Call Stack',
-            onclick: () => setInvertStack(isInvert ? '' : 'true'),
-            hide: false,
-            icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending',
-        },
         {
             label: isLeftAligned ? 'Right-align function names' : 'Left-align function names',
             onclick: () => setAlignFunctionName(isLeftAligned ? 'right' : 'left'),
             id: 'h-align-function-names',
-            hide: false,
+            hide: !!isTableVizOnly,
             icon: isLeftAligned
                 ? 'ic:outline-align-horizontal-right'
                 : 'ic:outline-align-horizontal-left',
@@ -131,6 +171,24 @@ const MultiLevelDropdown = ({ onSelect, profileType }) => {
             hide: !compareMode,
             icon: isCompareAbsolute ? 'fluent-mdl2:compare' : 'fluent-mdl2:compare-uneven',
         },
+        {
+            label: 'Highlight matching nodes after filtering',
+            hide: !!isTableVizOnly,
+            customSubmenu: (_jsx(SwitchMenuItem, { label: "Highlight matching nodes after filtering", id: "h-highlight-after-filtering", userPreferenceDetails: USER_PREFERENCES.HIGHTLIGHT_AFTER_FILTERING })),
+            renderAsDiv: true,
+        },
+        {
+            label: 'Dock Graph MetaInfo',
+            hide: !!isTableVizOnly,
+            customSubmenu: (_jsx(SwitchMenuItem, { label: "Dock graph tooltip", id: "h-dock-graph-meta-info", userPreferenceDetails: USER_PREFERENCES.GRAPH_METAINFO_DOCKED })),
+            renderAsDiv: true,
+        },
+        {
+            label: 'Highlight similar stacks when hovering over a node',
+            hide: !!isTableVizOnly,
+            customSubmenu: (_jsx(SwitchMenuItem, { label: "Highlight similar stacks when hovering over a node", id: "h-highlight-similar-stacks", userPreferenceDetails: USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS })),
+            renderAsDiv: true,
+        },
         {
             label: 'Reset Legend',
             hide: binaryFrameFilter === undefined || binaryFrameFilter.length === 0,
@@ -149,8 +207,8 @@ const MultiLevelDropdown = ({ onSelect, profileType }) => {
             icon: 'ph:eye-closed',
         },
     ];
-    return (_jsx("div", { className: "relative inline-block text-left", id: "h-visualisation-toolbar-actions", children: _jsx(Menu, { children: ({ open, close }) => (_jsxs(_Fragment, { children: [_jsxs(Menu.Button, { className: "inline-flex dark:bg-gray-900 dark:border-gray-600 justify-center w-full px-4 py-2 text-sm font-normal text-gray-600 dark:text-gray-200 bg-white rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 border border-gray-200 pr-[1.7rem]", children: [_jsx("span", { children: "More" }), _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" }) })] }), open && (_jsxs(Menu.Items, { className: "absolute z-30 left-0 w-64 mt-2 py-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border dark:bg-gray-900 dark:border-gray-600", children: [_jsx("span", { className: "text-xs text-gray-400 capitalize px-4 py-3", children: "actions" }), menuItems
-                                .filter(item => item.hide !== undefined && !item.hide)
-                                .map((item, index) => (_jsx(MenuItem, { ...item, onSelect: onSelect, closeDropdown: close, activeValueForSortBy: storeSortBy, activeValueForColorBy: colorBy === undefined || colorBy === '' ? 'binary' : colorBy }, index)))] }))] })) }) }));
+    return (_jsx("div", { className: "relative inline-block text-left", id: "h-visualisation-toolbar-actions", children: _jsx(Menu, { children: ({ open, close }) => (_jsxs(_Fragment, { children: [_jsxs(Menu.Button, { className: "flex dark:bg-gray-900 dark:border-gray-600 justify-center w-full px-4 py-2 text-sm font-normal text-gray-600 dark:text-gray-200 bg-white rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 border border-gray-200 pr-[1.7rem]", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { icon: "pajamas:preferences", className: "w-4 h-4" }), _jsx("span", { children: "Preferences" })] }), _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" }) })] }), open && (_jsx(Menu.Items, { className: cx(isTableVizOnly ? 'w-64' : 'w-80', 'absolute z-30 left-0 mt-2 py-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border dark:bg-gray-900 dark:border-gray-600'), children: menuItems
+                            .filter(item => item.hide !== undefined && !item.hide)
+                            .map((item, index) => (_jsx(MenuItem, { ...item, onSelect: onSelect, closeDropdown: close, activeValueForSortBy: storeSortBy, activeValueForColorBy: colorBy === undefined || colorBy === '' ? 'binary' : colorBy, activeValuesForLevel: groupBy, renderAsDiv: item.renderAsDiv }, index))) }))] })) }) }));
 };
 export default MultiLevelDropdown;

package/dist/ProfileView/components/Toolbars/SwitchMenuItem.d.ts

@@ -0,0 +1,9 @@
+import { type UserPreferenceDetails } from '@parca/hooks';
+interface SwitchMenuItemProps {
+    label: string;
+    id: string;
+    userPreferenceDetails: UserPreferenceDetails;
+}
+declare function SwitchMenuItem<T>({ label, id, userPreferenceDetails }: SwitchMenuItemProps): JSX.Element;
+export default SwitchMenuItem;
+//# sourceMappingURL=SwitchMenuItem.d.ts.map

package/dist/ProfileView/components/Toolbars/SwitchMenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchMenuItem.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/SwitchMenuItem.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAoB,KAAK,qBAAqB,EAAC,MAAM,cAAc,CAAC;AAE3E,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB,EAAE,qBAAqB,CAAC;CAC9C;AAED,iBAAS,cAAc,CAAC,CAAC,EAAE,EAAC,KAAK,EAAE,EAAE,EAAE,qBAAqB,EAAC,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAwB/F;AAED,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { Switch } from '@headlessui/react';
+import { useUserPreference } from '@parca/hooks';
+function SwitchMenuItem({ label, id, userPreferenceDetails }) {
+    const [enabledPreference, setEnabledPreference] = useUserPreference(userPreferenceDetails.key);
+    return (_jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("span", { children: label }), _jsxs(Switch, { id: id, checked: enabledPreference, onChange: (checked) => setEnabledPreference(checked), className: `${enabledPreference ? 'bg-indigo-600' : 'bg-gray-400 dark:bg-gray-800'}
+        relative inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2  focus-visible:ring-white/75`, children: [_jsx("span", { className: "sr-only", children: "Use setting" }), _jsx("span", { "aria-hidden": "true", className: `${enabledPreference ? 'translate-x-5' : 'translate-x-0'}
+            pointer-events-none inline-block h-[20px] w-[20px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out` })] })] }));
+}
+export default SwitchMenuItem;

package/dist/ProfileView/components/Toolbars/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAIzB,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,oDAAoD,CAAC;AACpF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AASrD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6BAA6B,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,EAAE,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5E,yBAAyB,EAAE,MAAM,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,+BAA+B;IAC9C,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAwB9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAiB1D,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,EAAE,CAAC,+BAA+B,CAmB1E,CAAC;AAMF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA8F9D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAIzB,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,oDAAoD,CAAC;AACpF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAUrD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6BAA6B,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,EAAE,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5E,yBAAyB,EAAE,MAAM,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,+BAA+B;IAC9C,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAwB9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAiB1D,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,EAAE,CAAC,+BAA+B,CAmB1E,CAAC;AAMF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA6G9D,CAAC"}

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

@@ -4,6 +4,7 @@ import { Button, UserPreferencesModal } from '@parca/components';
 import { useDashboard } from '../../context/DashboardContext';
 import GroupByDropdown from '../ActionButtons/GroupByDropdown';
 import FilterByFunctionButton from '../FilterByFunctionButton';
+import InvertCallStack from '../InvertCallStack';
 import ShareButton from '../ShareButton';
 import ViewSelector from '../ViewSelector';
 import MultiLevelDropdown from './MultiLevelDropdown';
@@ -21,13 +22,15 @@ const Divider = () => (_jsx("div", { className: "border-t mt-4 border-gray-200 d
 export const VisualisationToolbar = ({ groupBy, toggleGroupBy, groupByLabels, setGroupByLabels, profileType, preferencesModal, profileSource, queryClient, onDownloadPProf, pprofdownloading, profileViewExternalSubActions, curPath, setNewCurPath, total, filtered, currentSearchString, clearSelection, showVisualizationSelector = true, resetSandwichFunctionName, sandwichFunctionName, }) => {
     const { dashboardItems } = useDashboard();
     const isTableViz = dashboardItems?.includes('table');
+    const isTableVizOnly = dashboardItems?.length === 1 && isTableViz;
     const isGraphViz = dashboardItems?.includes('icicle');
     const isSandwichIcicleGraphViz = dashboardItems?.includes('sandwich');
+    const isTableView = isTableVizOnly || isSandwichIcicleGraphViz;
     const req = profileSource?.QueryRequest();
     if (req !== null && req !== undefined) {
         req.groupBy = {
             fields: groupBy ?? [],
         };
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full justify-between items-end", children: [_jsxs("div", { className: "flex gap-3 items-end", children: [_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, labels: groupByLabels, setGroupByLabels: setGroupByLabels }), _jsx(MultiLevelDropdown, { profileType: profileType, onSelect: () => { } })] }), _jsx(FilterByFunctionButton, {}), profileViewExternalSubActions != null ? profileViewExternalSubActions : null] }), _jsxs("div", { className: "flex gap-3", children: [preferencesModal === true && _jsx(UserPreferencesModal, {}), _jsx(ShareButton, { profileSource: profileSource, queryClient: queryClient, queryRequest: req, onDownloadPProf: onDownloadPProf, pprofdownloading: pprofdownloading ?? false, profileViewExternalSubActions: profileViewExternalSubActions }), showVisualizationSelector ? _jsx(ViewSelector, { profileSource: profileSource }) : null] })] }), isGraphViz && !isTableViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(IcicleGraphToolbar, { curPath: curPath, setNewCurPath: setNewCurPath })] })), isTableViz && !isGraphViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(TableToolbar, { profileType: profileType, total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })] })), isSandwichIcicleGraphViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(SandwichIcicleGraphToolbar, { resetSandwichFunctionName: resetSandwichFunctionName, sandwichFunctionName: sandwichFunctionName })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full justify-between items-end", children: [_jsxs("div", { className: "flex gap-3 items-end", children: [!isTableView && (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, labels: groupByLabels, setGroupByLabels: setGroupByLabels }), _jsx(InvertCallStack, {})] })), _jsx(FilterByFunctionButton, {}), profileViewExternalSubActions != null ? profileViewExternalSubActions : null] }), _jsxs("div", { className: "flex gap-3", children: [preferencesModal === true && _jsx(UserPreferencesModal, {}), _jsx(MultiLevelDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, profileType: profileType, onSelect: () => { }, isTableVizOnly: isTableView }), _jsx(ShareButton, { profileSource: profileSource, queryClient: queryClient, queryRequest: req, onDownloadPProf: onDownloadPProf, pprofdownloading: pprofdownloading ?? false, profileViewExternalSubActions: profileViewExternalSubActions }), showVisualizationSelector ? _jsx(ViewSelector, { profileSource: profileSource }) : null] })] }), isGraphViz && !isTableViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(IcicleGraphToolbar, { curPath: curPath, setNewCurPath: setNewCurPath })] })), isTableViz && !isGraphViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(TableToolbar, { profileType: profileType, total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })] })), isSandwichIcicleGraphViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(SandwichIcicleGraphToolbar, { resetSandwichFunctionName: resetSandwichFunctionName, sandwichFunctionName: sandwichFunctionName })] }))] }));
 };