@parca/profile 0.16.450 → 0.16.451

package/src/ProfileView/components/Toolbars/index.tsx

@@ -0,0 +1,193 @@
+// 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 {FC} from 'react';
+
+import {Icon} from '@iconify/react';
+
+import {QueryServiceClient} from '@parca/client';
+import {Button, UserPreferencesModal} from '@parca/components';
+import {ProfileType} from '@parca/parser';
+
+import {ProfileSource} from '../../../ProfileSource';
+import {useDashboard} from '../../context/DashboardContext';
+import GroupByDropdown from '../ActionButtons/GroupByDropdown';
+import SortByDropdown from '../ActionButtons/SortByDropdown';
+import FilterByFunctionButton from '../FilterByFunctionButton';
+import ShareButton from '../ShareButton';
+import ViewSelector from '../ViewSelector';
+import MultiLevelDropdown from './MultiLevelDropdown';
+import TableColumnsDropdown from './TableColumnsDropdown';
+
+export interface VisualisationToolbarProps {
+  groupBy: string[];
+  toggleGroupBy: (key: string) => void;
+  hasProfileSource: boolean;
+  pprofdownloading?: boolean;
+  profileSource?: ProfileSource;
+  queryClient?: QueryServiceClient;
+  onDownloadPProf: () => void;
+  curPath: string[];
+  setNewCurPath: (path: string[]) => void;
+  profileType?: ProfileType;
+  total: bigint;
+  filtered: bigint;
+  currentSearchString?: string;
+  setSearchString?: (value: string) => void;
+  groupByLabels: string[];
+  preferencesModal?: boolean;
+  profileViewExternalSubActions?: React.ReactNode;
+  clearSelection: () => void;
+  setGroupByLabels: (labels: string[]) => void;
+  showVisualizationSelector?: boolean;
+}
+
+export interface TableToolbarProps {
+  profileType?: ProfileType;
+  total: bigint;
+  filtered: bigint;
+  clearSelection: () => void;
+  currentSearchString?: string;
+}
+
+export interface IcicleGraphToolbarProps {
+  curPath: string[];
+  setNewCurPath: (path: string[]) => void;
+}
+
+export const TableToolbar: FC<TableToolbarProps> = ({
+  profileType,
+  total,
+  filtered,
+  clearSelection,
+  currentSearchString,
+}) => {
+  return (
+    <>
+      <div className="flex w-full gap-2 items-end">
+        <TableColumnsDropdown profileType={profileType} total={total} filtered={filtered} />
+        <Button
+          color="neutral"
+          onClick={clearSelection}
+          className="w-auto"
+          variant="neutral"
+          disabled={currentSearchString === undefined || currentSearchString.length === 0}
+        >
+          Clear selection
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export const IcicleGraphToolbar: FC<IcicleGraphToolbarProps> = ({curPath, setNewCurPath}) => {
+  return (
+    <>
+      <div className="flex w-full gap-2 items-end">
+        <SortByDropdown />
+        <Button
+          variant="neutral"
+          className="gap-2 w-max h-fit"
+          onClick={() => setNewCurPath([])}
+          disabled={curPath.length === 0}
+        >
+          Reset graph
+          <Icon icon="system-uicons:reset" width={20} />
+        </Button>
+      </div>
+    </>
+  );
+};
+
+const Divider = (): JSX.Element => (
+  <div className="border-t mt-4 border-gray-200 dark:border-gray-700 h-[1px] w-full pb-4" />
+);
+
+export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
+  groupBy,
+  toggleGroupBy,
+  groupByLabels,
+  setGroupByLabels,
+  profileType,
+  preferencesModal,
+  profileSource,
+  queryClient,
+  onDownloadPProf,
+  pprofdownloading,
+  profileViewExternalSubActions,
+  curPath,
+  setNewCurPath,
+  total,
+  filtered,
+  currentSearchString,
+  clearSelection,
+  showVisualizationSelector = true,
+}) => {
+  const {dashboardItems} = useDashboard();
+
+  const isTableViz = dashboardItems?.includes('table');
+  const isGraphViz = dashboardItems?.includes('icicle');
+
+  return (
+    <>
+      <div className="flex w-full justify-between items-end">
+        <div className="flex gap-3 items-end">
+          <>
+            <GroupByDropdown
+              groupBy={groupBy}
+              toggleGroupBy={toggleGroupBy}
+              labels={groupByLabels}
+              setGroupByLabels={setGroupByLabels}
+            />
+            <MultiLevelDropdown profileType={profileType} onSelect={() => {}} />
+          </>
+
+          <FilterByFunctionButton />
+
+          {profileViewExternalSubActions != null ? profileViewExternalSubActions : null}
+        </div>
+        <div className="flex gap-3">
+          {preferencesModal != null ? <UserPreferencesModal /> : null}
+          <ShareButton
+            profileSource={profileSource}
+            queryClient={queryClient}
+            queryRequest={profileSource?.QueryRequest() ?? undefined}
+            onDownloadPProf={onDownloadPProf}
+            pprofdownloading={pprofdownloading ?? false}
+            profileViewExternalSubActions={profileViewExternalSubActions}
+          />
+
+          {showVisualizationSelector ? <ViewSelector /> : null}
+        </div>
+      </div>
+      {isGraphViz && !isTableViz && (
+        <>
+          <Divider />
+          <IcicleGraphToolbar curPath={curPath} setNewCurPath={setNewCurPath} />
+        </>
+      )}
+      {isTableViz && !isGraphViz && (
+        <>
+          <Divider />
+          <TableToolbar
+            profileType={profileType}
+            total={total}
+            filtered={filtered}
+            clearSelection={clearSelection}
+            currentSearchString={currentSearchString}
+          />
+        </>
+      )}
+    </>
+  );
+};

package/src/ProfileView/components/VisualizationContainer/index.tsx

@@ -0,0 +1,68 @@
+// 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 {FC} from 'react';
+
+import cx from 'classnames';
+import type {DraggableProvided, DraggableStateSnapshot} from 'react-beautiful-dnd';
+
+import {useDashboard} from '../../context/DashboardContext';
+import {VisualizationType} from '../../types/visualization';
+import {VisualizationPanel} from '../VisualizationPanel';
+
+interface VisualizationContainerProps {
+  provided: DraggableProvided;
+  snapshot: DraggableStateSnapshot;
+  dashboardItem: VisualizationType;
+  getDashboardItemByType: (props: {type: VisualizationType; isHalfScreen: boolean}) => JSX.Element;
+  isMultiPanelView: boolean;
+  index: number;
+  actionButtons: {
+    icicle: JSX.Element;
+    table: JSX.Element;
+  };
+}
+
+export const VisualizationContainer: FC<VisualizationContainerProps> = ({
+  provided,
+  snapshot,
+  dashboardItem,
+  getDashboardItemByType,
+  isMultiPanelView,
+  index,
+  actionButtons,
+}) => {
+  const {handleClosePanel} = useDashboard();
+
+  return (
+    <div
+      ref={provided.innerRef}
+      {...provided.draggableProps}
+      className={cx(
+        'w-full min-h-96',
+        snapshot.isDragging ? 'bg-gray-200 dark:bg-gray-500' : 'bg-white dark:bg-gray-900',
+        isMultiPanelView ? 'border-2 border-gray-100 dark:border-gray-700 rounded-md p-3' : ''
+      )}
+    >
+      <VisualizationPanel
+        handleClosePanel={handleClosePanel}
+        isMultiPanelView={isMultiPanelView}
+        dashboardItem={dashboardItem}
+        getDashboardItemByType={getDashboardItemByType}
+        dragHandleProps={provided.dragHandleProps}
+        index={index}
+        actionButtons={actionButtons}
+      />
+    </div>
+  );
+};

package/src/ProfileView/{VisualizationPanel.tsx → components/VisualizationPanel.tsx}

@@ -20,13 +20,15 @@ import type {DraggableProvidedDragHandleProps} from 'react-beautiful-dnd';
 import {IconButton, useParcaContext} from '@parca/components';
 import {CloseIcon} from '@parca/icons';
 
+import {VisualizationType} from '../types/visualization';
+
 interface Props {
-  dashboardItem: string;
+  dashboardItem: VisualizationType;
   index: number;
   isMultiPanelView: boolean;
-  handleClosePanel: (dashboardItem: string) => void;
+  handleClosePanel: (dashboardItem: VisualizationType) => void;
   dragHandleProps: DraggableProvidedDragHandleProps | null | undefined;
-  getDashboardItemByType: (props: {type: string; isHalfScreen: boolean}) => JSX.Element;
+  getDashboardItemByType: (props: {type: VisualizationType; isHalfScreen: boolean}) => JSX.Element;
   actionButtons: {
     icicle: JSX.Element;
     table: JSX.Element;

package/src/ProfileView/context/DashboardContext.tsx

@@ -0,0 +1,61 @@
+// 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 {FC, PropsWithChildren, createContext, useContext} from 'react';
+
+import {useURLState} from '@parca/components';
+
+import {VisualizationType} from '../types/visualization';
+
+interface DashboardContextType {
+  dashboardItems: string[];
+  setDashboardItems: (items: string[]) => void;
+  handleClosePanel: (visualizationType: VisualizationType) => void;
+  isMultiPanelView: boolean;
+}
+
+const DashboardContext = createContext<DashboardContextType | undefined>(undefined);
+
+export const DashboardProvider: FC<PropsWithChildren> = ({children}) => {
+  const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
+    alwaysReturnArray: true,
+  });
+
+  const handleClosePanel = (visualizationType: VisualizationType): void => {
+    const newDashboardItems = dashboardItems.filter(item => item !== visualizationType);
+    setDashboardItems(newDashboardItems);
+  };
+
+  const isMultiPanelView = dashboardItems.length > 1;
+
+  return (
+    <DashboardContext.Provider
+      value={{
+        dashboardItems,
+        setDashboardItems,
+        handleClosePanel,
+        isMultiPanelView,
+      }}
+    >
+      {children}
+    </DashboardContext.Provider>
+  );
+};
+
+export const useDashboard = (): DashboardContextType => {
+  const context = useContext(DashboardContext);
+  if (context === undefined) {
+    throw new Error('useDashboard must be used within a DashboardProvider');
+  }
+  return context;
+};

package/src/ProfileView/{ProfileViewContext.tsx → context/ProfileViewContext.tsx}

@@ -13,7 +13,7 @@
 
 import {ReactNode, createContext, useContext} from 'react';
 
-import {ProfileSource} from '../ProfileSource';
+import {ProfileSource} from '../../ProfileSource';
 
 interface Props {
   profileSource?: ProfileSource;

package/src/ProfileView/hooks/useGraphviz.ts

@@ -0,0 +1,69 @@
+// 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, useState} from 'react';
+
+import graphviz from 'graphviz-wasm';
+
+import {Callgraph as CallgraphType} from '@parca/client';
+
+import {jsonToDot} from '../../Callgraph/utils';
+
+interface UseGraphvizProps {
+  callgraphData?: CallgraphType;
+  width?: number;
+  colorRange: [string, string];
+}
+
+export const useGraphviz = ({
+  callgraphData,
+  width,
+  colorRange,
+}: UseGraphvizProps): {
+  graphvizLoaded: boolean;
+  callgraphSVG: string | undefined;
+} => {
+  const [graphvizLoaded, setGraphvizLoaded] = useState(false);
+  const [callgraphSVG, setCallgraphSVG] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    async function loadGraphviz(): Promise<void> {
+      await graphviz.loadWASM();
+      setGraphvizLoaded(true);
+    }
+    void loadGraphviz();
+  }, []);
+
+  useEffect(() => {
+    async function loadCallgraphSVG(
+      graph: CallgraphType,
+      width: number,
+      colorRange: [string, string]
+    ): Promise<void> {
+      await setCallgraphSVG(undefined);
+      const dataAsDot = await jsonToDot({
+        graph,
+        width,
+        colorRange,
+      });
+      const svgGraph = await graphviz.layout(dataAsDot, 'svg', 'dot');
+      await setCallgraphSVG(svgGraph);
+    }
+
+    if (graphvizLoaded && callgraphData != null && width != null) {
+      void loadCallgraphSVG(callgraphData, width, colorRange);
+    }
+  }, [graphvizLoaded, callgraphData, width, colorRange]);
+
+  return {graphvizLoaded, callgraphSVG};
+};

package/src/ProfileView/hooks/useProfileMetadata.ts

@@ -0,0 +1,59 @@
+// 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 {useMemo} from 'react';
+
+import {Table as ArrowTable, tableFromIPC} from 'apache-arrow';
+
+import {FlamegraphArrow} from '@parca/client';
+
+import useMappingList, {
+  useFilenamesList,
+} from '../../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
+
+interface UseProfileMetadataProps {
+  flamegraphArrow?: FlamegraphArrow;
+  metadataMappingFiles?: string[];
+  metadataLoading: boolean;
+  colorBy: string;
+}
+
+export const useProfileMetadata = ({
+  flamegraphArrow,
+  metadataMappingFiles,
+  metadataLoading,
+  colorBy,
+}: UseProfileMetadataProps): {
+  table: ArrowTable<any> | null;
+  mappingsList: string[];
+  filenamesList: string[];
+  colorMappings: string[];
+  metadataLoading: boolean;
+} => {
+  const table: ArrowTable<any> | null = useMemo(() => {
+    return flamegraphArrow !== undefined ? tableFromIPC(flamegraphArrow.record) : null;
+  }, [flamegraphArrow]);
+
+  const mappingsList = useMappingList(metadataMappingFiles);
+  const filenamesList = useFilenamesList(table);
+
+  const colorMappings = colorBy === 'binary' ? mappingsList : filenamesList;
+
+  return {
+    table,
+    mappingsList,
+    filenamesList,
+    colorMappings,
+    metadataLoading,
+  };
+};

package/src/ProfileView/hooks/useVisualizationState.ts

@@ -0,0 +1,82 @@
+// 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, useState} from 'react';
+
+import {useURLState} from '@parca/components';
+
+import {FIELD_FUNCTION_NAME, FIELD_LABELS} from '../../ProfileIcicleGraph/IcicleGraphArrow';
+
+export const useVisualizationState = (): {
+  curPath: string[];
+  setCurPath: (path: string[]) => void;
+  currentSearchString: string | undefined;
+  setSearchString: (searchString: string | undefined) => void;
+  colorStackLegend: string | undefined;
+  colorBy: string;
+  groupBy: string[];
+  setGroupBy: (keys: string[]) => void;
+  toggleGroupBy: (key: string) => void;
+  clearSelection: () => void;
+  setGroupByLabels: (labels: string[]) => void;
+} => {
+  const [curPath, setCurPath] = useState<string[]>([]);
+  const [currentSearchString, setSearchString] = useURLState<string | undefined>('search_string');
+  const [colorStackLegend] = useURLState<string | undefined>('color_stack_legend');
+  const [colorBy] = useURLState('color_by');
+  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 setGroupByLabels = useCallback(
+    (labels: string[]): void => {
+      setGroupBy(groupBy.filter(l => !l.startsWith(`${FIELD_LABELS}.`)).concat(labels));
+    },
+    [groupBy, setGroupBy]
+  );
+
+  const clearSelection = useCallback((): void => {
+    setSearchString?.('');
+  }, [setSearchString]);
+
+  return {
+    curPath,
+    setCurPath,
+    currentSearchString,
+    setSearchString,
+    colorStackLegend,
+    colorBy: (colorBy as string) ?? '',
+    groupBy,
+    setGroupBy,
+    toggleGroupBy,
+    setGroupByLabels,
+    clearSelection,
+  };
+};