@parca/profile 0.16.425 → 0.16.427

package/src/{ProfileView/ViewSelector.tsx → components/ViewSelector/index.tsx}

@@ -11,29 +11,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Select, useParcaContext, useURLState, type SelectElement} from '@parca/components';
+import {useParcaContext, useURLState} from '@parca/components';
 
-interface Props {
-  position: number;
-  defaultValue: string;
-  placeholderText?: string;
-  primary?: boolean;
-  addView?: boolean;
-  disabled?: boolean;
-  icon?: JSX.Element;
-  id?: string;
-}
+import Dropdown, {DropdownElement, InnerAction} from './Dropdown';
 
-const ViewSelector = ({
-  defaultValue,
-  position,
-  placeholderText,
-  primary = false,
-  addView = false,
-  disabled = false,
-  icon,
-  id,
-}: Props): JSX.Element => {
+const ViewSelector = (): JSX.Element => {
   const [dashboardItems = ['icicle'], setDashboardItems] = useURLState<string[]>(
     'dashboard_items',
     {
@@ -56,7 +38,7 @@ const ViewSelector = ({
   }: {
     key: string;
     supportingText?: string;
-  }): SelectElement => {
+  }): DropdownElement => {
     const title = <span className="capitalize">{key.replaceAll('-', ' ')}</span>;
 
     return {
@@ -70,44 +52,55 @@ const ViewSelector = ({
     };
   };
 
+  const getInnerActionForItem = (item: {
+    key: string;
+    canBeSelected: boolean;
+  }): InnerAction | undefined => {
+    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: string): void => {
-    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 (
-    <Select
+    <Dropdown
       className="h-view-selector"
       items={items}
-      selectedKey={defaultValue}
+      selectedKey={dashboardItems.length >= 2 ? 'Multiple' : dashboardItems[0]}
       onSelection={onSelection}
-      placeholder={placeholderText ?? 'Select view type...'}
-      primary={primary}
-      disabled={disabled}
-      icon={icon}
-      id={id}
+      placeholder={'Select view type...'}
+      id="h-view-selector"
     />
   );
 };

package/src/components/VisualisationToolbar/MultiLevelDropdown.tsx

@@ -0,0 +1,258 @@
+// 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 React, {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 {ProfileType} from '@parca/parser';
+
+import {
+  FIELD_CUMULATIVE,
+  FIELD_DIFF,
+  FIELD_FUNCTION_NAME,
+} from '../../ProfileIcicleGraph/IcicleGraphArrow';
+import {useProfileViewContext} from '../../ProfileView/ProfileViewContext';
+
+interface MenuItemType {
+  label: string;
+  items?: MenuItemType[];
+  onclick?: () => void;
+  hide?: boolean;
+  id?: string;
+  disabled?: boolean;
+  active?: boolean;
+  value?: string;
+  icon?: string;
+}
+
+type MenuItemProps = MenuItemType & {
+  onSelect: (path: string[]) => void;
+  path?: string[];
+  closeDropdown: () => void;
+  isNested?: boolean;
+  activeValue?: string;
+  icon?: string;
+};
+
+const MenuItem: React.FC<MenuItemProps> = ({
+  label,
+  items,
+  onclick,
+  onSelect,
+  path = [],
+  id,
+  closeDropdown,
+  isNested = false,
+  activeValue,
+  value,
+  disabled = false,
+  icon,
+}) => {
+  const isActive = isNested && value === activeValue;
+
+  const handleSelect = (): void => {
+    if (items === undefined) {
+      if (onclick !== undefined) {
+        onclick();
+        closeDropdown();
+      } else {
+        onSelect([...path, label]);
+        closeDropdown();
+      }
+    }
+  };
+
+  return (
+    <div className="relative">
+      <Menu>
+        {({close}) => (
+          <>
+            <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}
+            >
+              <span className="flex items-center">
+                <div className="flex items-center">
+                  <span>{label}</span>
+                  {icon !== undefined && <Icon icon={icon} className="ml-2 h-4 w-4" />}
+                </div>
+                {isActive && <Icon icon="heroicons-solid:check" className="ml-2 h-4 w-4" />}
+              </span>
+              {items !== undefined && (
+                <Icon icon="flowbite:caret-right-solid" className="h-[14px] w-[14px]" />
+              )}
+            </Menu.Button>
+            {items !== undefined && (
+              <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">
+                {items?.map((item, index) => (
+                  <MenuItem
+                    key={index}
+                    {...item}
+                    onSelect={selectedPath => {
+                      onSelect([...path, ...selectedPath]);
+                      close();
+                      closeDropdown();
+                    }}
+                    path={[...path, label]}
+                    closeDropdown={closeDropdown}
+                    isNested={true}
+                    activeValue={activeValue}
+                  />
+                ))}
+              </Menu.Items>
+            )}
+          </>
+        )}
+      </Menu>
+    </div>
+  );
+};
+
+interface MultiLevelDropdownProps {
+  onSelect: (path: string[]) => void;
+  profileType?: ProfileType;
+}
+
+const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({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<string>(
+    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: string): void => {
+      setStoreColorStackLegend(value);
+    },
+    [setStoreColorStackLegend]
+  );
+
+  const resetLegend = (): void => {
+    setBinaryFrameFilter([]);
+  };
+
+  const menuItems: MenuItemType[] = [
+    {
+      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 (
+    <div className="relative inline-block text-left">
+      <Menu>
+        {({open, close}) => (
+          <>
+            <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">
+              <Icon
+                icon="pepicons-pencil:dots-x"
+                className="h-5 w-5 text-gray-800 dark:text-gray-200"
+              />
+            </Menu.Button>
+            {open && (
+              <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">
+                <span className="text-xs text-gray-400 capitalize px-4 py-3">actions</span>
+                {menuItems
+                  .filter(item => item.hide !== undefined && !item.hide)
+                  .map((item, index) => (
+                    <MenuItem
+                      key={index}
+                      {...item}
+                      onSelect={onSelect}
+                      closeDropdown={close}
+                      activeValue={storeSortBy as string}
+                    />
+                  ))}
+              </Menu.Items>
+            )}
+          </>
+        )}
+      </Menu>
+    </div>
+  );
+};
+
+export default MultiLevelDropdown;

package/src/components/VisualisationToolbar/TableColumnsDropdown.tsx

@@ -0,0 +1,222 @@
+// 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, type CellContext, type ColumnDef} from '@tanstack/table-core';
+
+import {useURLState} from '@parca/components';
+import {ProfileType} from '@parca/parser';
+import {valueFormatter} from '@parca/utilities';
+
+import {useProfileViewContext} from '../../ProfileView/ProfileViewContext';
+import {ColumnName, DataRow, Row, addPlusSign, getRatioString, isDummyRow} from '../../Table';
+import ColumnsVisibility from '../../Table/ColumnsVisibility';
+
+interface Props {
+  profileType?: ProfileType;
+  total: bigint;
+  filtered: bigint;
+}
+
+const TableColumnsDropdown = ({profileType, total, filtered}: Props): JSX.Element => {
+  const {compareMode} = useProfileViewContext();
+  const [tableColumns, setTableColumns] = useURLState<string[]>('table_columns', {
+    alwaysReturnArray: true,
+  });
+
+  const columnHelper = createColumnHelper<Row>();
+
+  const unit: string = useMemo(() => profileType?.sampleUnit ?? '', [profileType?.sampleUnit]);
+
+  const columns = useMemo<Array<ColumnDef<Row>>>(() => {
+    return [
+      columnHelper.accessor('flat', {
+        id: 'flat',
+        header: 'Flat',
+        cell: info => valueFormatter((info as CellContext<DataRow, bigint>).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 as CellContext<DataRow, bigint>).getValue(), total, filtered);
+        },
+        size: 120,
+        meta: {
+          align: 'right',
+        },
+        invertSorting: true,
+      }),
+      columnHelper.accessor('flatDiff', {
+        id: 'flatDiff',
+        header: 'Flat Diff',
+        cell: info =>
+          addPlusSign(valueFormatter((info as CellContext<DataRow, bigint>).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 as CellContext<DataRow, bigint>).getValue(), total, filtered);
+        },
+        size: 120,
+        meta: {
+          align: 'right',
+        },
+        invertSorting: true,
+      }),
+      columnHelper.accessor('cumulative', {
+        id: 'cumulative',
+        header: 'Cumulative',
+        cell: info => valueFormatter((info as CellContext<DataRow, bigint>).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 as CellContext<DataRow, bigint>).getValue(), total, filtered);
+        },
+        size: 150,
+        meta: {
+          align: 'right',
+        },
+        invertSorting: true,
+      }),
+      columnHelper.accessor('cumulativeDiff', {
+        id: 'cumulativeDiff',
+        header: 'Cumulative Diff',
+        cell: info =>
+          addPlusSign(valueFormatter((info as CellContext<DataRow, bigint>).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 as CellContext<DataRow, bigint>).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) as ColumnName[]).forEach(column => {
+          newState[column] = tableColumns.includes(column);
+        });
+        return newState;
+      });
+    }
+  }, [tableColumns]);
+
+  const updateColumnVisibility = (column: string, isVisible: boolean): void => {
+    const updatedColumns = {...columnVisibility, [column]: isVisible};
+
+    const newTableColumns = (Object.keys(updatedColumns) as ColumnName[]).filter(
+      col => updatedColumns[col]
+    );
+    setTableColumns(newTableColumns);
+  };
+
+  return (
+    <div className="flex flex-col gap-1">
+      <label className="text-sm">Table Columns</label>
+      <ColumnsVisibility
+        columns={columns}
+        visibility={columnVisibility}
+        setVisibility={(id, visible) => {
+          updateColumnVisibility(id, visible);
+        }}
+      />
+    </div>
+  );
+};
+
+export default TableColumnsDropdown;