@parca/profile 0.16.426 → 0.16.427

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,171 @@
+// 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();
+
+  console.log('🚀 ~ preferencesModal:', preferencesModal);
+
+  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"}

package/dist/ProfileIcicleGraph/ActionButtons/SortBySelect.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// Copyright 2022 The Parca Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-import { Select } from '@parca/components';
-import { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_NAME } from '../IcicleGraphArrow';
-const SortBySelect = ({ sortBy, setSortBy, compareMode, }) => {
-    return (_jsxs("div", { children: [_jsx("label", { className: "text-sm", children: "Sort" }), _jsx(Select, { className: "!px-3", items: [
-                    {
-                        key: FIELD_FUNCTION_NAME,
-                        disabled: false,
-                        element: {
-                            active: _jsx(_Fragment, { children: "Function" }),
-                            expanded: (_jsx(_Fragment, { children: _jsx("span", { children: "Function" }) })),
-                        },
-                    },
-                    {
-                        key: FIELD_CUMULATIVE,
-                        disabled: false,
-                        element: {
-                            active: _jsx(_Fragment, { children: "Cumulative" }),
-                            expanded: (_jsx(_Fragment, { children: _jsx("span", { children: "Cumulative" }) })),
-                        },
-                    },
-                    {
-                        key: FIELD_DIFF,
-                        disabled: !compareMode,
-                        element: {
-                            active: _jsx(_Fragment, { children: "Diff" }),
-                            expanded: (_jsx(_Fragment, { children: _jsx("span", { children: "Diff" }) })),
-                        },
-                    },
-                ], selectedKey: sortBy, onSelection: key => setSortBy(key), placeholder: 'Sort By', primary: false, disabled: false, id: "h-sort-by-filter" })] }));
-};
-export default SortBySelect;

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

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

package/dist/ProfileView/ViewSelector.d.ts

@@ -1,13 +0,0 @@
-interface Props {
-    position: number;
-    defaultValue: string;
-    placeholderText?: string;
-    primary?: boolean;
-    addView?: boolean;
-    disabled?: boolean;
-    icon?: JSX.Element;
-    id?: string;
-}
-declare const ViewSelector: ({ defaultValue, position, placeholderText, primary, addView, disabled, icon, id, }: Props) => JSX.Element;
-export default ViewSelector;
-//# sourceMappingURL=ViewSelector.d.ts.map

package/dist/ProfileView/ViewSelector.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ViewSelector.d.ts","sourceRoot":"","sources":["../../src/ProfileView/ViewSelector.tsx"],"names":[],"mappings":"AAeA,UAAU,KAAK;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,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;AAED,QAAA,MAAM,YAAY,uFASf,KAAK,KAAG,GAAG,CAAC,OA6Ed,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"ResultBox.d.ts","sourceRoot":"","sources":["../../../src/components/ProfileShareButton/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/ProfileShareButton/index.d.ts

@@ -1,9 +0,0 @@
-import { QueryRequest, QueryServiceClient } from '@parca/client';
-interface Props {
-    queryRequest: QueryRequest;
-    queryClient: QueryServiceClient;
-    disabled?: boolean;
-}
-declare const ProfileShareButton: ({ queryRequest, queryClient, disabled }: Props) => JSX.Element;
-export default ProfileShareButton;
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ProfileShareButton/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,YAAY,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAK/D,UAAU,KAAK;IACb,YAAY,EAAE,YAAY,CAAC;IAC3B,WAAW,EAAE,kBAAkB,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkGD,QAAA,MAAM,kBAAkB,4CAAmD,KAAK,KAAG,GAAG,CAAC,OAuBtF,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/src/ProfileIcicleGraph/ActionButtons/SortBySelect.tsx

@@ -1,81 +0,0 @@
-// Copyright 2022 The Parca Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import {Select} from '@parca/components';
-
-import {FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_NAME} from '../IcicleGraphArrow';
-
-const SortBySelect = ({
-  sortBy,
-  setSortBy,
-  compareMode,
-}: {
-  sortBy: string;
-  setSortBy: (key: string) => void;
-  compareMode: boolean;
-}): React.JSX.Element => {
-  return (
-    <div>
-      <label className="text-sm">Sort</label>
-      <Select
-        className="!px-3"
-        items={[
-          {
-            key: FIELD_FUNCTION_NAME,
-            disabled: false,
-            element: {
-              active: <>Function</>,
-              expanded: (
-                <>
-                  <span>Function</span>
-                </>
-              ),
-            },
-          },
-          {
-            key: FIELD_CUMULATIVE,
-            disabled: false,
-            element: {
-              active: <>Cumulative</>,
-              expanded: (
-                <>
-                  <span>Cumulative</span>
-                </>
-              ),
-            },
-          },
-          {
-            key: FIELD_DIFF,
-            disabled: !compareMode,
-            element: {
-              active: <>Diff</>,
-              expanded: (
-                <>
-                  <span>Diff</span>
-                </>
-              ),
-            },
-          },
-        ]}
-        selectedKey={sortBy}
-        onSelection={key => setSortBy(key)}
-        placeholder={'Sort By'}
-        primary={false}
-        disabled={false}
-        id="h-sort-by-filter"
-      />
-    </div>
-  );
-};
-
-export default SortBySelect;