@parca/profile 0.16.449 → 0.16.451

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

@@ -0,0 +1,96 @@
+// 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 {
+  DragDropContext,
+  Draggable,
+  Droppable,
+  type DraggableLocation,
+  type DropResult,
+} from 'react-beautiful-dnd';
+
+import {useDashboard} from '../../context/DashboardContext';
+import {VisualizationType} from '../../types/visualization';
+import {VisualizationContainer} from '../VisualizationContainer';
+
+interface DashboardLayoutProps {
+  getDashboardItemByType: (props: {type: VisualizationType; isHalfScreen: boolean}) => JSX.Element;
+  actionButtons: {
+    icicle: JSX.Element;
+    table: JSX.Element;
+  };
+}
+
+export const DashboardLayout: FC<DashboardLayoutProps> = ({
+  getDashboardItemByType,
+  actionButtons,
+}) => {
+  const {dashboardItems, setDashboardItems, isMultiPanelView} = useDashboard();
+
+  const onDragEnd = (result: DropResult): void => {
+    const {destination, source, draggableId} = result;
+
+    if (Boolean(destination) && destination?.index !== source.index) {
+      const targetItem = draggableId;
+      const otherItems = dashboardItems.filter(item => item !== targetItem);
+      const newDashboardItems =
+        (destination as DraggableLocation).index < source.index
+          ? [targetItem, ...otherItems]
+          : [...otherItems, targetItem];
+
+      setDashboardItems(newDashboardItems);
+    }
+  };
+
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <Droppable droppableId="droppable" direction="horizontal">
+        {provided => (
+          <div
+            ref={provided.innerRef}
+            className={cx(
+              'grid w-full gap-2',
+              isMultiPanelView ? 'grid-cols-2 mt-4' : 'grid-cols-1'
+            )}
+            {...provided.droppableProps}
+          >
+            {dashboardItems.map((dashboardItem, index) => (
+              <Draggable
+                key={dashboardItem}
+                draggableId={dashboardItem}
+                index={index}
+                isDragDisabled={!isMultiPanelView}
+              >
+                {(provided, snapshot) => (
+                  <VisualizationContainer
+                    provided={provided}
+                    snapshot={snapshot}
+                    dashboardItem={dashboardItem as VisualizationType}
+                    getDashboardItemByType={getDashboardItemByType}
+                    isMultiPanelView={isMultiPanelView}
+                    index={index}
+                    actionButtons={actionButtons}
+                  />
+                )}
+              </Draggable>
+            ))}
+            {provided.placeholder}
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
+  );
+};

package/src/ProfileView/components/ProfileHeader/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';
+
+interface ProfileHeaderProps {
+  profileSourceString?: string;
+  hasProfileSource: boolean;
+  externalMainActions?: React.ReactNode;
+}
+
+export const ProfileHeader: FC<ProfileHeaderProps> = ({
+  profileSourceString,
+  hasProfileSource,
+
+  externalMainActions,
+}) => {
+  const headerParts = profileSourceString?.split('"') ?? [];
+
+  const showDivider =
+    hasProfileSource && (externalMainActions === null || externalMainActions === undefined);
+
+  return (
+    <>
+      {showDivider && (
+        <div className="border-t border-gray-200 dark:border-gray-700 h-[1px] w-full pb-4" />
+      )}
+      <div
+        className={cx(
+          'flex w-full',
+          hasProfileSource || externalMainActions != null ? 'justify-start' : 'justify-end',
+          {
+            'items-end mb-4': !hasProfileSource && externalMainActions != null,
+            'items-center mb-2': hasProfileSource,
+          }
+        )}
+      >
+        <div>
+          {hasProfileSource && (
+            <div className="flex items-center gap-1">
+              <div className="text-xs font-medium">
+                {headerParts.length > 0 ? headerParts[0].replace(/"/g, '') : ''}
+              </div>
+              <div className="text-xs font-medium">
+                {headerParts.length > 1
+                  ? headerParts[headerParts.length - 1].replace(/"/g, '')
+                  : ''}
+              </div>
+            </div>
+          )}
+          {externalMainActions}
+        </div>
+      </div>
+    </>
+  );
+};

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

@@ -18,7 +18,7 @@ import {Icon} from '@iconify/react';
 import {QueryRequest, QueryServiceClient} from '@parca/client';
 import {Button, Dropdown, Modal, useGrpcMetadata} from '@parca/components';
 
-import {ProfileSource} from '../../ProfileSource';
+import {ProfileSource} from '../../../ProfileSource';
 import ResultBox from './ResultBox';
 
 interface Props {

package/src/{components/VisualisationToolbar → ProfileView/components/Toolbars}/MultiLevelDropdown.tsx

@@ -20,12 +20,8 @@ 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';
+import {FIELD_FUNCTION_NAME} from '../../../ProfileIcicleGraph/IcicleGraphArrow';
+import {useProfileViewContext} from '../../context/ProfileViewContext';
 
 interface MenuItemType {
   label: string;

package/src/{components/VisualisationToolbar → ProfileView/components/Toolbars}/TableColumnsDropdown.tsx

@@ -19,10 +19,10 @@ import {useURLState} from '@parca/components';
 import {ProfileType} from '@parca/parser';
 import {valueFormatter} from '@parca/utilities';
 
-import {useProfileViewContext} from '../../ProfileView/ProfileViewContext';
-import {Row, isDummyRow} from '../../Table';
-import ColumnsVisibility from '../../Table/ColumnsVisibility';
-import {ColumnName, DataRow, addPlusSign, getRatioString} from '../../Table/utils/functions';
+import {Row, isDummyRow} from '../../../Table';
+import ColumnsVisibility from '../../../Table/ColumnsVisibility';
+import {ColumnName, DataRow, addPlusSign, getRatioString} from '../../../Table/utils/functions';
+import {useProfileViewContext} from '../../context/ProfileViewContext';
 
 interface Props {
   profileType?: ProfileType;

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,
+  };
+};