@parca/profile 0.16.426 → 0.16.428

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;

package/src/components/VisualisationToolbar/index.tsx

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"GroupByDropdown.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/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/ActionButtons/SortBySelect.d.ts

@@ -1,7 +0,0 @@
-declare const SortBySelect: ({ sortBy, setSortBy, compareMode, }: {
-    sortBy: string;
-    setSortBy: (key: string) => void;
-    compareMode: boolean;
-}) => React.JSX.Element;
-export default SortBySelect;
-//# sourceMappingURL=SortBySelect.d.ts.map

package/dist/ProfileIcicleGraph/ActionButtons/SortBySelect.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SortBySelect.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/ActionButtons/SortBySelect.tsx"],"names":[],"mappings":"AAiBA,QAAA,MAAM,YAAY,wCAIf;IACD,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,OAAO,CAAC;CACtB,KAAG,KAAK,CAAC,GAAG,CAAC,OAqDb,CAAC;AAEF,eAAe,YAAY,CAAC"}