@parca/profile 0.16.426 → 0.16.428

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"}

package/dist/components/VisualisationToolbar/TableColumnsDropdown.js

@@ -0,0 +1,189 @@
+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, useMemo, useState } from 'react';
+import { createColumnHelper } from '@tanstack/table-core';
+import { useURLState } from '@parca/components';
+import { valueFormatter } from '@parca/utilities';
+import { useProfileViewContext } from '../../ProfileView/ProfileViewContext';
+import { addPlusSign, getRatioString, isDummyRow } from '../../Table';
+import ColumnsVisibility from '../../Table/ColumnsVisibility';
+const TableColumnsDropdown = ({ profileType, total, filtered }) => {
+    const { compareMode } = useProfileViewContext();
+    const [tableColumns, setTableColumns] = useURLState('table_columns', {
+        alwaysReturnArray: true,
+    });
+    const columnHelper = createColumnHelper();
+    const unit = useMemo(() => profileType?.sampleUnit ?? '', [profileType?.sampleUnit]);
+    const columns = useMemo(() => {
+        return [
+            columnHelper.accessor('flat', {
+                id: 'flat',
+                header: 'Flat',
+                cell: info => valueFormatter(info.getValue(), unit, 2),
+                size: 80,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('flat', {
+                id: 'flatPercentage',
+                header: 'Flat (%)',
+                cell: info => {
+                    if (isDummyRow(info.row.original)) {
+                        return '';
+                    }
+                    return getRatioString(info.getValue(), total, filtered);
+                },
+                size: 120,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('flatDiff', {
+                id: 'flatDiff',
+                header: 'Flat Diff',
+                cell: info => addPlusSign(valueFormatter(info.getValue(), unit, 2)),
+                size: 120,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('flatDiff', {
+                id: 'flatDiffPercentage',
+                header: 'Flat Diff (%)',
+                cell: info => {
+                    if (isDummyRow(info.row.original)) {
+                        return '';
+                    }
+                    return getRatioString(info.getValue(), total, filtered);
+                },
+                size: 120,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('cumulative', {
+                id: 'cumulative',
+                header: 'Cumulative',
+                cell: info => valueFormatter(info.getValue(), unit, 2),
+                size: 150,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('cumulative', {
+                id: 'cumulativePercentage',
+                header: 'Cumulative (%)',
+                cell: info => {
+                    if (isDummyRow(info.row.original)) {
+                        return '';
+                    }
+                    return getRatioString(info.getValue(), total, filtered);
+                },
+                size: 150,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('cumulativeDiff', {
+                id: 'cumulativeDiff',
+                header: 'Cumulative Diff',
+                cell: info => addPlusSign(valueFormatter(info.getValue(), unit, 2)),
+                size: 170,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('cumulativeDiff', {
+                id: 'cumulativeDiffPercentage',
+                header: 'Cumulative Diff (%)',
+                cell: info => {
+                    if (isDummyRow(info.row.original)) {
+                        return '';
+                    }
+                    return getRatioString(info.getValue(), total, filtered);
+                },
+                size: 170,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('name', {
+                id: 'name',
+                header: 'Name',
+                cell: info => info.getValue(),
+            }),
+            columnHelper.accessor('functionSystemName', {
+                id: 'functionSystemName',
+                header: 'Function System Name',
+                cell: info => info.getValue(),
+            }),
+            columnHelper.accessor('functionFileName', {
+                id: 'functionFileName',
+                header: 'Function File Name',
+                cell: info => info.getValue(),
+            }),
+            columnHelper.accessor('mappingFile', {
+                id: 'mappingFile',
+                header: 'Mapping File',
+                cell: info => info.getValue(),
+            }),
+        ];
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [profileType, unit]);
+    const [columnVisibility, setColumnVisibility] = useState(() => {
+        return {
+            flat: true,
+            flatPercentage: false,
+            flatDiff: compareMode,
+            flatDiffPercentage: false,
+            cumulative: true,
+            cumulativePercentage: false,
+            cumulativeDiff: compareMode,
+            cumulativeDiffPercentage: false,
+            name: true,
+            functionSystemName: false,
+            functionFileName: false,
+            mappingFile: false,
+        };
+    });
+    useEffect(() => {
+        if (Array.isArray(tableColumns)) {
+            setColumnVisibility(prevState => {
+                const newState = { ...prevState };
+                Object.keys(newState).forEach(column => {
+                    newState[column] = tableColumns.includes(column);
+                });
+                return newState;
+            });
+        }
+    }, [tableColumns]);
+    const updateColumnVisibility = (column, isVisible) => {
+        const updatedColumns = { ...columnVisibility, [column]: isVisible };
+        const newTableColumns = Object.keys(updatedColumns).filter(col => updatedColumns[col]);
+        setTableColumns(newTableColumns);
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-sm", children: "Table Columns" }), _jsx(ColumnsVisibility, { columns: columns, visibility: columnVisibility, setVisibility: (id, visible) => {
+                    updateColumnVisibility(id, visible);
+                } })] }));
+};
+export default TableColumnsDropdown;

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

@@ -0,0 +1,25 @@
+import { QueryRequest, QueryServiceClient } from '@parca/client';
+import { ProfileType } from '@parca/parser';
+import { ProfileSource } from '../../ProfileSource';
+interface Props {
+    groupBy: string | string[];
+    toggleGroupBy: (key: string) => void;
+    hasProfileSource: boolean;
+    isMultiPanelView: boolean;
+    dashboardItems: any;
+    profileSource?: ProfileSource;
+    queryClient?: QueryServiceClient;
+    queryRequest?: QueryRequest;
+    onDownloadPProf: () => void;
+    pprofdownloading: boolean | undefined;
+    curPath: string[];
+    setNewCurPath: (path: string[]) => void;
+    profileType?: ProfileType;
+    total: bigint;
+    filtered: bigint;
+    setSearchString?: (searchString: string) => void;
+    currentSearchString?: string;
+}
+declare const VisualisationToolbar: ({ hasProfileSource, profileSource, queryClient, onDownloadPProf, pprofdownloading, curPath, setNewCurPath, profileType, total, filtered, setSearchString, currentSearchString, }: Props) => JSX.Element;
+export default VisualisationToolbar;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VisualisationToolbar/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAC,YAAY,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAE/D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAQlD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,GAAG,CAAC;IACpB,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,GAAG,SAAS,CAAC;IACtC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,QAAA,MAAM,oBAAoB,qLAavB,KAAK,KAAG,GAAG,CAAC,OAsGd,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/VisualisationToolbar/index.js

@@ -0,0 +1,54 @@
+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 { Icon } from '@iconify/react';
+import cx from 'classnames';
+import { Button, UserPreferencesModal, useParcaContext, useURLState } from '@parca/components';
+import { FIELD_FUNCTION_NAME } from '../../ProfileIcicleGraph/IcicleGraphArrow';
+import GroupByDropdown from '../ActionButtons/GroupByDropdown';
+import FilterByFunctionButton from '../FilterByFunctionButton';
+import ShareButton from '../ShareButton';
+import ViewSelector from '../ViewSelector';
+import MultiLevelDropdown from './MultiLevelDropdown';
+import TableColumnsDropdown from './TableColumnsDropdown';
+const VisualisationToolbar = ({ hasProfileSource, profileSource, queryClient, onDownloadPProf, pprofdownloading, curPath, setNewCurPath, profileType, total, filtered, setSearchString, currentSearchString, }) => {
+    const [dashboardItems] = useURLState('dashboard_items', {
+        alwaysReturnArray: true,
+    });
+    const { profileViewExternalMainActions, profileViewExternalSubActions, preferencesModal } = useParcaContext();
+    const [groupBy, setStoreGroupBy] = useURLState('group_by', {
+        defaultValue: [FIELD_FUNCTION_NAME],
+        alwaysReturnArray: true,
+    });
+    const setGroupBy = useCallback((keys) => {
+        setStoreGroupBy(keys);
+    }, [setStoreGroupBy]);
+    const toggleGroupBy = useCallback((key) => {
+        groupBy.includes(key)
+            ? setGroupBy(groupBy.filter(v => v !== key)) // remove
+            : setGroupBy([...groupBy, key]); // add
+    }, [groupBy, setGroupBy]);
+    const clearSelection = useCallback(() => {
+        setSearchString?.('');
+    }, [setSearchString]);
+    const isTableViz = dashboardItems?.includes('table');
+    const isGraphViz = dashboardItems?.includes('icicle');
+    return (_jsx("div", { className: cx('mb-4 flex w-full', hasProfileSource || profileViewExternalMainActions != null
+            ? 'justify-between'
+            : 'justify-end', {
+            'items-end': !hasProfileSource && profileViewExternalMainActions != null,
+            'items-center': hasProfileSource,
+        }), children: _jsxs("div", { className: "flex w-full justify-between items-end", children: [_jsxs("div", { className: "flex gap-3 items-end", children: [isGraphViz && (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy }), _jsx(MultiLevelDropdown, { profileType: profileType, onSelect: () => { } }), _jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, children: ["Reset graph", _jsx(Icon, { icon: "system-uicons:reset", width: 20 })] })] })), isTableViz && (_jsxs(_Fragment, { children: [_jsx(TableColumnsDropdown, { profileType: profileType, total: total, filtered: filtered }), dashboardItems.length > 1 && (_jsx(Button, { color: "neutral", onClick: clearSelection, className: "w-auto", variant: "neutral", disabled: currentSearchString === undefined || currentSearchString.length === 0, children: "Clear selection" }))] })), _jsx(FilterByFunctionButton, {}), profileViewExternalSubActions != null ? profileViewExternalSubActions : null] }), _jsxs("div", { className: "flex gap-3", children: [preferencesModal === true ? _jsx(UserPreferencesModal, {}) : null, _jsx(ShareButton, { profileSource: profileSource, queryClient: queryClient, queryRequest: profileSource?.QueryRequest() ?? undefined, onDownloadPProf: onDownloadPProf, pprofdownloading: pprofdownloading ?? false, profileViewExternalSubActions: profileViewExternalSubActions }), _jsx(ViewSelector, {})] })] }) }));
+};
+export default VisualisationToolbar;