@parca/profile 0.16.425 → 0.16.427

package/dist/ViewMatchers/index.js

@@ -0,0 +1,103 @@
+import { Fragment as _Fragment, 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 { useCallback, useEffect, useRef, useState } from 'react';
+import { Icon } from '@iconify/react';
+import cx from 'classnames';
+import { useGrpcMetadata } from '@parca/components';
+import { sanitizeLabelValue } from '@parca/utilities';
+import CustomSelect from '../SimpleMatchers/Select';
+const ViewMatchers = ({ labelNames, profileType, queryClient, runQuery, setMatchersString, currentQuery, }) => {
+    const [labelValuesMap, setLabelValuesMap] = useState({});
+    const [isLoading, setIsLoading] = useState({});
+    const metadata = useGrpcMetadata();
+    const currentMatchers = currentQuery.matchersString();
+    const parseCurrentMatchers = useCallback((matchersString) => {
+        const matches = matchersString.match(/(\w+)="([^"]+)"/g);
+        if (matches === null)
+            return {};
+        return matches.reduce((acc, match) => {
+            const [label, value] = match.split('=');
+            if (label !== undefined) {
+                acc[label] = value.replace(/"/g, '');
+            }
+            return acc;
+        }, 
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        {});
+    }, []);
+    const initialSelections = parseCurrentMatchers(currentMatchers);
+    const selectionsRef = useRef(initialSelections);
+    const runQueryRef = useRef(runQuery);
+    const timeoutRef = useRef(null);
+    useEffect(() => {
+        runQueryRef.current = runQuery;
+    }, [runQuery]);
+    const fetchLabelValues = useCallback(async (labelName) => {
+        try {
+            const response = await queryClient.values({ labelName, match: [], profileType }, { meta: metadata }).response;
+            return sanitizeLabelValue(response.labelValues);
+        }
+        catch (error) {
+            console.error('Error fetching label values:', error);
+            return [];
+        }
+    }, [queryClient, metadata, profileType]);
+    useEffect(() => {
+        const fetchAllLabelValues = async () => {
+            const newLabelValuesMap = {};
+            const newIsLoading = {};
+            for (const labelName of labelNames) {
+                newIsLoading[labelName] = true;
+                setIsLoading(prev => ({ ...prev, [labelName]: true }));
+                const values = await fetchLabelValues(labelName);
+                newLabelValuesMap[labelName] = values;
+                newIsLoading[labelName] = false;
+            }
+            setLabelValuesMap(newLabelValuesMap);
+            setIsLoading(newIsLoading);
+        };
+        void fetchAllLabelValues();
+    }, [labelNames, fetchLabelValues]);
+    const updateMatcherString = useCallback(() => {
+        const matcherParts = Object.entries(selectionsRef.current)
+            .filter(([_, v]) => v !== null && v !== '')
+            .map(([ln, v]) => `${ln}="${v}"`);
+        const matcherString = matcherParts.join(',');
+        setMatchersString(matcherString);
+        if (timeoutRef.current !== null) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+            runQueryRef.current();
+        }, 300);
+    }, [setMatchersString]);
+    const handleSelection = useCallback((labelName, value) => {
+        selectionsRef.current = {
+            ...selectionsRef.current,
+            [labelName]: value,
+        };
+        updateMatcherString();
+    }, [updateMatcherString]);
+    const handleReset = useCallback((labelName) => {
+        handleSelection(labelName, null);
+    }, [handleSelection]);
+    const transformValuesForSelect = useCallback((values) => {
+        return values.map(value => ({
+            key: value,
+            element: { active: _jsx(_Fragment, { children: value }), expanded: _jsx(_Fragment, { children: value }) },
+        }));
+    }, []);
+    return (_jsx("div", { className: "flex flex-wrap gap-2", children: labelNames.map(labelName => (_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "relative border shadow-sm px-4 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm flex gap-2 items-center justify-between bg-gray-100 dark:bg-gray-700 rounded-l-md border-gray-300 dark:border-gray-600", children: labelName }), _jsx(CustomSelect, { searchable: true, placeholder: "Select value", items: transformValuesForSelect(labelValuesMap[labelName] ?? []), onSelection: (value) => handleSelection(labelName, value), selectedKey: selectionsRef.current[labelName] ?? undefined, className: cx('rounded-l-none border-l-0', selectionsRef.current[labelName] != null && 'border-r-0 rounded-r-none'), loading: isLoading[labelName] ?? false }), selectionsRef.current[labelName] != null && (_jsx("button", { onClick: () => handleReset(labelName), className: "p-2 border-gray-200 bg-white dark:bg-gray-900 dark:border-gray-600 border rounded-r-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", "aria-label": `Reset ${labelName} selection`, children: _jsx(Icon, { icon: "mdi:close", className: "h-5 w-5 text-gray-400", "aria-hidden": "true" }) }))] }, labelName))) }));
+};
+export default ViewMatchers;

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupByDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ActionButtons/GroupByDropdown.tsx"],"names":[],"mappings":"AAyDA,QAAA,MAAM,eAAe,gCAGlB;IACD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,KAAG,KAAK,CAAC,GAAG,CAAC,OA6Db,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/{ProfileIcicleGraph → components}/ActionButtons/GroupByDropdown.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // limitations under the License.
 import { Menu, Transition } from '@headlessui/react';
 import { Icon } from '@iconify/react';
-import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LABELS, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from '../IcicleGraphArrow';
+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,

package/dist/components/FilterByFunctionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterByFunctionButton.d.ts","sourceRoot":"","sources":["../../src/components/FilterByFunctionButton.tsx"],"names":[],"mappings":"AAoBA,QAAA,MAAM,sBAAsB,QAAO,GAAG,CAAC,OAuCtC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/components/ShareButton/ResultBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResultBox.d.ts","sourceRoot":"","sources":["../../../src/components/ShareButton/ResultBox.tsx"],"names":[],"mappings":"AAoBA,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,QAAA,MAAM,SAAS,yBAA6B,KAAK,KAAG,GAAG,CAAC,OAqCvD,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { QueryRequest, QueryServiceClient } from '@parca/client';
+import { ProfileSource } from '../../ProfileSource';
+interface Props {
+    profileSource?: ProfileSource;
+    queryClient?: QueryServiceClient;
+    queryRequest?: QueryRequest;
+    onDownloadPProf: () => void;
+    pprofdownloading: boolean;
+    profileViewExternalSubActions: React.ReactNode;
+}
+declare const ShareButton: ({ queryRequest, queryClient, profileSource, onDownloadPProf, pprofdownloading, profileViewExternalSubActions, }: Props) => JSX.Element;
+export default ShareButton;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/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,qBAAqB,CAAC;AAGlD,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;AAkGD,QAAA,MAAM,WAAW,oHAOd,KAAK,KAAG,GAAG,CAAC,OA4Ed,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/{ProfileShareButton → ShareButton}/index.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // limitations under the License.
 import { useState } from 'react';
 import { Icon } from '@iconify/react';
-import { Button, Modal, useGrpcMetadata } from '@parca/components';
+import { Button, Dropdown, Modal, useGrpcMetadata } from '@parca/components';
 import ResultBox from './ResultBox';
 const ProfileShareModal = ({ isOpen, closeModal, queryRequest, queryClient, }) => {
     const [isShared, setIsShared] = useState(false);
@@ -53,8 +53,31 @@ const ProfileShareModal = ({ isOpen, closeModal, queryRequest, queryClient, }) =
                                 void handleSubmit();
                             }, disabled: loading || !isFormDataValid(), type: "submit", children: loading ? 'Sharing' : 'Share' }), error !== '' ? _jsx("p", { children: "Something went wrong please try again" }) : null] })) : (_jsxs(_Fragment, { children: [_jsx(ResultBox, { value: sharedLink, className: "mt-4" }), _jsx("div", { className: "mt-8 flex justify-center", children: _jsx(Button, { variant: "neutral", className: "w-fit", onClick: onClose, children: "Close" }) })] }))] }) }));
 };
-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", 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 })] }));
+const ShareButton = ({ queryRequest, queryClient, profileSource, onDownloadPProf, pprofdownloading, profileViewExternalSubActions, }) => {
+    const [showProfileShareModal, setShowProfileShareModal] = useState(false);
+    const actions = [
+        {
+            key: 'shareProfile',
+            label: 'Share profile via link',
+            onSelect: () => setShowProfileShareModal(true),
+            id: 'h-share-profile-button',
+            disabled: profileSource === undefined && queryClient === undefined && queryRequest === undefined,
+            icon: 'material-symbols-light:link',
+        },
+        {
+            key: 'downloadProfile',
+            label: pprofdownloading != null && pprofdownloading ? 'Downloading...' : 'Download as pprof',
+            onSelect: () => onDownloadPProf(),
+            id: 'h-download-pprof',
+            disabled: pprofdownloading,
+            icon: 'material-symbols:download',
+        },
+    ];
+    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 &&
+                    queryClient !== undefined &&
+                    queryRequest !== undefined && (_jsx(ProfileShareModal, { isOpen: showProfileShareModal, closeModal: () => setShowProfileShareModal(false), queryRequest: queryRequest, queryClient: queryClient }))] })) }));
 };
-export default ProfileShareButton;
+export default ShareButton;

package/dist/components/ViewSelector/Dropdown.d.ts

@@ -0,0 +1,30 @@
+export interface DropdownElement {
+    active: JSX.Element;
+    expanded: JSX.Element;
+}
+export interface DropdownItem {
+    key: string;
+    disabled?: boolean;
+    element: DropdownElement;
+    innerAction?: InnerAction;
+}
+export interface InnerAction {
+    text: string;
+    onClick: () => void;
+}
+export declare function contructItemsFromArray(items: any[]): DropdownItem[];
+declare const Dropdown: ({ items, selectedKey, onSelection, placeholder, width, className, loading, primary, disabled, icon, id, }: {
+    items: DropdownItem[];
+    selectedKey: string | undefined;
+    onSelection: (value: string) => void;
+    placeholder?: string;
+    width?: number;
+    className?: string;
+    loading?: boolean;
+    primary?: boolean;
+    disabled?: boolean;
+    icon?: JSX.Element;
+    id?: string;
+}) => JSX.Element;
+export default Dropdown;
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/components/ViewSelector/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ViewSelector/Dropdown.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAMnE;AAED,QAAA,MAAM,QAAQ,8GAYX;IACD,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,KAAG,GAAG,CAAC,OA4GP,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/ViewSelector/Dropdown.js

@@ -0,0 +1,41 @@
+import { Fragment as _Fragment, 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 { Fragment } from 'react';
+import { Listbox, Transition } from '@headlessui/react';
+import { Icon } from '@iconify/react';
+import cx from 'classnames';
+import { Button, useParcaContext } from '@parca/components';
+export function contructItemsFromArray(items) {
+    return items.map(item => ({
+        key: item.key,
+        element: { active: _jsx(_Fragment, { children: item.label }), expanded: _jsx(_Fragment, { children: item.label }) },
+        innerAction: item.innerAction,
+    }));
+}
+const Dropdown = ({ items, selectedKey, onSelection, placeholder, width, className = '', loading, primary = false, disabled = false, icon, id, }) => {
+    const selection = items.find(v => v.key === selectedKey) ?? {
+        key: selectedKey,
+        element: { active: _jsx(_Fragment, { children: selectedKey }), expanded: _jsx(_Fragment, { children: selectedKey }) },
+    };
+    const { loader } = useParcaContext();
+    const styles = 'relative border rounded-md shadow-sm px-4 py-2 text-left cursor-default focus:outline-none focus:ring-1 items-center focus:ring-indigo-500 focus:border-indigo-500 text-sm flex gap-2 flex items-center justify-between';
+    const defaultStyles = 'bg-white dark:bg-gray-900 dark:border-gray-600';
+    const primaryStyles = 'text-gray-100 dark:gray-900 bg-indigo-600 border-indigo-500 font-medium py-2 px-4';
+    return (_jsx(Listbox, { value: selectedKey, onChange: onSelection, children: ({ open }) => (_jsxs("div", { className: "relative", children: [_jsx("div", { id: id, children: _jsxs(Listbox.Button, { className: cx(styles, width !== undefined ? `w-${width}` : 'w-full', disabled ? 'cursor-not-allowed opacity-50 pointer-events-none' : '', primary ? primaryStyles : defaultStyles, { [className]: className.length > 0 }), children: [_jsx("div", { className: cx(icon != null ? '' : 'block overflow-x-hidden text-ellipsis'), children: selection?.key !== '' ? selection.element.active : placeholder }), _jsx("div", { className: cx(icon != null ? '' : 'pointer-events-none text-gray-400'), children: icon ?? _jsx(Icon, { icon: "heroicons:chevron-up-down-20-solid", "aria-hidden": "true" }) })] }) }), _jsx(Transition, { show: open, as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Listbox.Options, { className: "absolute w-[246px] right-0 z-50 mt-1 max-h-[50vh] 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: loading === true ? (_jsx("div", { className: "w-[270px]", children: loader })) : (items.length > 0 &&
+                            items.map(option => (_jsx(Listbox.Option, { id: `h-select-option-${option.key}`, disabled: option.disabled ?? false, className: ({ active }) => cx(active && 'bg-indigo-600 text-white', 'relative flex cursor-default select-none py-2 px-3'), value: option.key, children: ({ selected, active, disabled }) => (_jsxs("div", { className: "flex items-center w-full justify-between", children: [_jsx("div", { className: "flex items-center", children: _jsx("span", { className: cx(selected ? 'font-semibold' : 'font-normal', disabled && 'opacity-50'), children: option.element.expanded }) }), option.innerAction !== undefined && (_jsxs(Button, { variant: "neutral", className: "p-[6px]", onClick: e => {
+                                                e.stopPropagation();
+                                                option.innerAction?.onClick();
+                                            }, children: [option.innerAction.text, option.innerAction.text === 'Add Panel' && (_jsx(Icon, { icon: "ic:baseline-plus", className: "w-[14px] h-[14px] ml-2" }))] })), selected ? (_jsx("span", { className: cx(active ? 'text-white' : 'text-indigo-600', 'absolute inset-y-0 right-0 flex items-center pr-4'), children: _jsx(Icon, { icon: "heroicons:check-20-solid", "aria-hidden": "true" }) })) : null] })) }, option.key)))) }) })] })) }));
+};
+export default Dropdown;

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

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

package/dist/components/ViewSelector/index.d.ts.map

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

package/dist/{ProfileView/ViewSelector.js → components/ViewSelector/index.js}

@@ -11,8 +11,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 { Select, useParcaContext, useURLState } from '@parca/components';
-const ViewSelector = ({ defaultValue, position, placeholderText, primary = false, addView = false, disabled = false, icon, id, }) => {
+import { useParcaContext, useURLState } from '@parca/components';
+import Dropdown from './Dropdown';
+const ViewSelector = () => {
     const [dashboardItems = ['icicle'], setDashboardItems] = useURLState('dashboard_items', {
         alwaysReturnArray: true,
     });
@@ -31,28 +32,40 @@ const ViewSelector = ({ defaultValue, position, placeholderText, primary = false
             expanded: (_jsxs(_Fragment, { children: [title, supportingText !== null && _jsx("span", { className: "text-xs", children: supportingText })] })),
         };
     };
+    const getInnerActionForItem = (item) => {
+        if (dashboardItems.length === 1 && item.key === dashboardItems[0])
+            return undefined;
+        return {
+            text: !item.canBeSelected && item.key === 'source'
+                ? 'Add Panel'
+                : item.canBeSelected
+                    ? 'Add Panel'
+                    : 'Close Panel',
+            onClick: () => {
+                if (item.canBeSelected) {
+                    setDashboardItems([...dashboardItems, item.key]);
+                }
+                else {
+                    setDashboardItems(dashboardItems.filter(v => v !== item.key));
+                }
+            },
+        };
+    };
     const items = allItems.map(item => ({
         key: item.key,
         disabled: !item.canBeSelected,
         element: getOption(item),
+        innerAction: getInnerActionForItem(item),
     }));
     const onSelection = (value) => {
-        if (addView) {
-            setDashboardItems([dashboardItems[0], value]);
-            return;
-        }
         const isOnlyChart = dashboardItems.length === 1;
         if (isOnlyChart) {
             setDashboardItems([value]);
             return;
         }
-        // Note: this will need to be updated if we ever have more more than 2 panels
-        const isFirstChart = position === 0;
-        const newDashboardItems = isFirstChart
-            ? [value, dashboardItems[1]]
-            : [dashboardItems[0], value];
+        const newDashboardItems = [dashboardItems[0], value];
         setDashboardItems(newDashboardItems);
     };
-    return (_jsx(Select, { className: "h-view-selector", items: items, selectedKey: defaultValue, onSelection: onSelection, placeholder: placeholderText ?? 'Select view type...', primary: primary, disabled: disabled, icon: icon, id: id }));
+    return (_jsx(Dropdown, { className: "h-view-selector", items: items, selectedKey: dashboardItems.length >= 2 ? 'Multiple' : dashboardItems[0], onSelection: onSelection, placeholder: 'Select view type...', id: "h-view-selector" }));
 };
 export default ViewSelector;

package/dist/components/VisualisationToolbar/MultiLevelDropdown.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ProfileType } from '@parca/parser';
+interface MultiLevelDropdownProps {
+    onSelect: (path: string[]) => void;
+    profileType?: ProfileType;
+}
+declare const MultiLevelDropdown: React.FC<MultiLevelDropdownProps>;
+export default MultiLevelDropdown;
+//# sourceMappingURL=MultiLevelDropdown.d.ts.map

package/dist/components/VisualisationToolbar/MultiLevelDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiLevelDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/VisualisationToolbar/MultiLevelDropdown.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAOzC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAgH1C,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,CAsHzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/VisualisationToolbar/MultiLevelDropdown.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { useCallback } from 'react';
+import { Menu } from '@headlessui/react';
+import { Icon } from '@iconify/react';
+import { useURLState } from '@parca/components';
+import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
+import { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_NAME, } from '../../ProfileIcicleGraph/IcicleGraphArrow';
+import { useProfileViewContext } from '../../ProfileView/ProfileViewContext';
+const MenuItem = ({ label, items, onclick, onSelect, path = [], id, closeDropdown, isNested = false, activeValue, value, disabled = false, icon, }) => {
+    const isActive = isNested && value === activeValue;
+    const handleSelect = () => {
+        if (items === undefined) {
+            if (onclick !== undefined) {
+                onclick();
+                closeDropdown();
+            }
+            else {
+                onSelect([...path, label]);
+                closeDropdown();
+            }
+        }
+    };
+    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
+                            ? '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: [_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 => {
+                                onSelect([...path, ...selectedPath]);
+                                close();
+                                closeDropdown();
+                            }, path: [...path, label], closeDropdown: closeDropdown, isNested: true, activeValue: activeValue }, index))) }))] })) }) }));
+};
+const MultiLevelDropdown = ({ onSelect, profileType }) => {
+    const [storeSortBy, setStoreSortBy] = useURLState('sort_by', {
+        defaultValue: FIELD_FUNCTION_NAME,
+    });
+    const [colorStackLegend, setStoreColorStackLegend] = useURLState('color_stack_legend');
+    const [binaryFrameFilter, setBinaryFrameFilter] = useURLState('binary_frame_filter');
+    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';
+    // By default, we want delta profiles (CPU) to be relatively compared.
+    // For non-delta profiles, like goroutines or memory, we want the profiles to be compared absolutely.
+    const compareAbsoluteDefault = profileType?.delta === false ? 'true' : 'false';
+    const [compareAbsolute = compareAbsoluteDefault, setCompareAbsolute] = useURLState('compare_absolute');
+    const isCompareAbsolute = compareAbsolute === 'true';
+    const setColorStackLegend = useCallback((value) => {
+        setStoreColorStackLegend(value);
+    }, [setStoreColorStackLegend]);
+    const resetLegend = () => {
+        setBinaryFrameFilter([]);
+    };
+    const menuItems = [
+        {
+            label: 'Sort by',
+            id: 'h-sort-by-filter',
+            items: [
+                {
+                    label: 'Function',
+                    onclick: () => setStoreSortBy(FIELD_FUNCTION_NAME),
+                    value: FIELD_FUNCTION_NAME,
+                },
+                {
+                    label: 'Cumulative',
+                    onclick: () => setStoreSortBy(FIELD_CUMULATIVE),
+                    value: FIELD_CUMULATIVE,
+                },
+                {
+                    label: 'Diff',
+                    onclick: () => setStoreSortBy(FIELD_DIFF),
+                    value: FIELD_DIFF,
+                    disabled: !compareMode,
+                },
+            ],
+            hide: false,
+            icon: 'material-symbols:sort',
+        },
+        {
+            label: isColorStackLegendEnabled ? 'Hide legend' : 'Show legend',
+            onclick: () => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true'),
+            hide: compareMode || colorProfileName === 'default',
+            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: isCompareAbsolute ? 'Compare Relative' : 'Compare Absolute',
+            onclick: () => setCompareAbsolute(isCompareAbsolute ? 'false' : 'true'),
+            hide: !compareMode,
+            icon: isCompareAbsolute ? 'fluent-mdl2:compare' : 'fluent-mdl2:compare-uneven',
+        },
+        {
+            label: 'Reset Legend',
+            hide: binaryFrameFilter === undefined || binaryFrameFilter.length === 0,
+            onclick: () => resetLegend(),
+            id: 'h-reset-legend-button',
+            icon: 'system-uicons:reset',
+        },
+    ];
+    return (_jsx("div", { className: "relative inline-block text-left", children: _jsx(Menu, { children: ({ open, close }) => (_jsxs(_Fragment, { children: [_jsx(Menu.Button, { className: "inline-flex dark:bg-gray-900 dark:border-gray-600 justify-center w-full px-4 py-2 text-sm font-medium text-white bg-white rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 border border-gray-200", children: _jsx(Icon, { icon: "pepicons-pencil:dots-x", className: "h-5 w-5 text-gray-800 dark:text-gray-200" }) }), open && (_jsxs(Menu.Items, { className: "absolute z-30 right-0 w-56 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, activeValue: storeSortBy }, index)))] }))] })) }) }));
+};
+export default MultiLevelDropdown;

package/dist/components/VisualisationToolbar/TableColumnsDropdown.d.ts

@@ -0,0 +1,9 @@
+import { ProfileType } from '@parca/parser';
+interface Props {
+    profileType?: ProfileType;
+    total: bigint;
+    filtered: bigint;
+}
+declare const TableColumnsDropdown: ({ profileType, total, filtered }: Props) => JSX.Element;
+export default TableColumnsDropdown;
+//# sourceMappingURL=TableColumnsDropdown.d.ts.map

package/dist/components/VisualisationToolbar/TableColumnsDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableColumnsDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/VisualisationToolbar/TableColumnsDropdown.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAO1C,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,oBAAoB,qCAAoC,KAAK,KAAG,GAAG,CAAC,OA4LzE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}