@parca/profile 0.18.4 → 0.19.0

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

@@ -50,6 +50,9 @@ export interface VisualisationToolbarProps {
   clearSelection: () => void;
   setGroupByLabels: (labels: string[]) => void;
   showVisualizationSelector?: boolean;
+  sandwichFunctionName?: string;
+  setSandwichFunctionName: (sandwichFunctionName: string | undefined) => void;
+  resetSandwichFunctionName: () => void;
 }
 
 export interface TableToolbarProps {
@@ -65,6 +68,11 @@ export interface IcicleGraphToolbarProps {
   setNewCurPath: (path: CurrentPathFrame[]) => void;
 }
 
+export interface SandwichIcicleGraphToolbarProps {
+  resetSandwichFunctionName: () => void;
+  sandwichFunctionName?: string;
+}
+
 export const TableToolbar: FC<TableToolbarProps> = ({
   profileType,
   total,
@@ -76,6 +84,7 @@ export const TableToolbar: FC<TableToolbarProps> = ({
     <>
       <div className="flex w-full gap-2 items-end">
         <TableColumnsDropdown profileType={profileType} total={total} filtered={filtered} />
+
         <Button
           color="neutral"
           onClick={clearSelection}
@@ -108,6 +117,27 @@ export const IcicleGraphToolbar: FC<IcicleGraphToolbarProps> = ({curPath, setNew
   );
 };
 
+export const SandwichIcicleGraphToolbar: FC<SandwichIcicleGraphToolbarProps> = ({
+  resetSandwichFunctionName,
+  sandwichFunctionName,
+}) => {
+  return (
+    <>
+      <div className="flex w-full gap-2 items-end justify-between">
+        <Button
+          color="neutral"
+          onClick={() => resetSandwichFunctionName()}
+          className="w-auto"
+          variant="neutral"
+          disabled={sandwichFunctionName === undefined || sandwichFunctionName.length === 0}
+        >
+          Reset view
+        </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" />
 );
@@ -131,12 +161,14 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
   currentSearchString,
   clearSelection,
   showVisualizationSelector = true,
+  resetSandwichFunctionName,
+  sandwichFunctionName,
 }) => {
   const {dashboardItems} = useDashboard();
 
   const isTableViz = dashboardItems?.includes('table');
   const isGraphViz = dashboardItems?.includes('icicle');
-
+  const isSandwichIcicleGraphViz = dashboardItems?.includes('sandwich');
   const req = profileSource?.QueryRequest();
   if (req !== null && req !== undefined) {
     req.groupBy = {
@@ -193,6 +225,15 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
           />
         </>
       )}
+      {isSandwichIcicleGraphViz && (
+        <>
+          <Divider />
+          <SandwichIcicleGraphToolbar
+            resetSandwichFunctionName={resetSandwichFunctionName}
+            sandwichFunctionName={sandwichFunctionName}
+          />
+        </>
+      )}
     </>
   );
 };

package/src/ProfileView/components/ViewSelector/Dropdown.tsx

@@ -36,6 +36,7 @@ export interface DropdownItem {
 export interface InnerAction {
   text: string;
   onClick: () => void;
+  isDisabled?: boolean;
 }
 
 export function contructItemsFromArray(items: any[]): DropdownItem[] {
@@ -173,7 +174,7 @@ const DropdownOption = ({option}: {option: DropdownItem}): JSX.Element => {
                 e.stopPropagation();
                 option.innerAction?.onClick();
               }}
-              disabled={disabled}
+              disabled={disabled || option.innerAction.isDisabled}
             >
               {option.innerAction.text}
               {option.innerAction.text === 'Add Panel' && (

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

@@ -43,6 +43,7 @@ const ViewSelector = ({profileSource}: Props): JSX.Element => {
   }> = [
     {key: 'table', label: 'Table', canBeSelected: !dashboardItems.includes('table')},
     {key: 'icicle', label: 'icicle', canBeSelected: !dashboardItems.includes('icicle')},
+    {key: 'sandwich', label: 'sandwich', canBeSelected: !dashboardItems.includes('sandwich')},
   ];
   if (enableicicleCharts) {
     allItems.push({
@@ -96,6 +97,16 @@ const ViewSelector = ({profileSource}: Props): JSX.Element => {
     canBeSelected: boolean;
   }): InnerAction | undefined => {
     if (dashboardItems.length === 1 && item.key === dashboardItems[0]) return undefined;
+
+    // For sandwich view, return a no-op action
+    if (item.key === 'sandwich') {
+      return {
+        text: 'Add Panel',
+        onClick: () => {},
+        isDisabled: true, // Custom property to control button state
+      };
+    }
+
     return {
       text:
         !item.canBeSelected && item.key === 'source'

package/src/ProfileView/hooks/useVisualizationState.ts

@@ -27,11 +27,15 @@ export const useVisualizationState = (): {
   setSearchString: (searchString: string | undefined) => void;
   colorStackLegend: string | undefined;
   colorBy: string;
+  setColorBy: (colorBy: string) => void;
   groupBy: string[];
   setGroupBy: (keys: string[]) => void;
   toggleGroupBy: (key: string) => void;
   clearSelection: () => void;
   setGroupByLabels: (labels: string[]) => void;
+  sandwichFunctionName: string | undefined;
+  setSandwichFunctionName: (sandwichFunctionName: string | undefined) => void;
+  resetSandwichFunctionName: () => void;
 } => {
   const [curPath, setCurPath] = useState<string[]>([]);
   const [curPathArrow, setCurPathArrow] = useURLStateCustom<CurrentPathFrame[]>('cur_path', {
@@ -41,11 +45,14 @@ export const useVisualizationState = (): {
   });
   const [currentSearchString, setSearchString] = useURLState<string | undefined>('search_string');
   const [colorStackLegend] = useURLState<string | undefined>('color_stack_legend');
-  const [colorBy] = useURLState('color_by');
+  const [colorBy, setColorBy] = useURLState('color_by');
   const [groupBy, setStoreGroupBy] = useURLState<string[]>('group_by', {
     defaultValue: [FIELD_FUNCTION_NAME],
     alwaysReturnArray: true,
   });
+  const [sandwichFunctionName, setSandwichFunctionName] = useURLState<string | undefined>(
+    'sandwich_function_name'
+  );
 
   const setGroupBy = useCallback(
     (keys: string[]): void => {
@@ -74,6 +81,10 @@ export const useVisualizationState = (): {
     setSearchString?.('');
   }, [setSearchString]);
 
+  const resetSandwichFunctionName = useCallback((): void => {
+    setSandwichFunctionName(undefined);
+  }, [setSandwichFunctionName]);
+
   return {
     curPath,
     setCurPath,
@@ -83,10 +94,14 @@ export const useVisualizationState = (): {
     setSearchString,
     colorStackLegend,
     colorBy: (colorBy as string) ?? '',
+    setColorBy,
     groupBy,
     setGroupBy,
     toggleGroupBy,
     setGroupByLabels,
     clearSelection,
+    sandwichFunctionName,
+    setSandwichFunctionName,
+    resetSandwichFunctionName,
   };
 };

package/src/ProfileView/index.tsx

@@ -62,6 +62,9 @@ export const ProfileView = ({
     toggleGroupBy,
     clearSelection,
     setGroupByLabels,
+    sandwichFunctionName,
+    setSandwichFunctionName,
+    resetSandwichFunctionName,
   } = useVisualizationState();
 
   const {colorMappings} = useProfileMetadata({
@@ -101,6 +104,7 @@ export const ProfileView = ({
       currentSearchString,
       setSearchString,
       perf,
+      queryClient,
     });
   };
 
@@ -149,6 +153,9 @@ export const ProfileView = ({
             clearSelection={clearSelection}
             setGroupByLabels={setGroupByLabels}
             showVisualizationSelector={showVisualizationSelector}
+            sandwichFunctionName={sandwichFunctionName}
+            setSandwichFunctionName={setSandwichFunctionName}
+            resetSandwichFunctionName={resetSandwichFunctionName}
           />
 
           {isColorStackLegendEnabled && (

package/src/ProfileView/types/visualization.ts

@@ -57,7 +57,13 @@ export interface SourceData {
   error?: any;
 }
 
-export type VisualizationType = 'icicle' | 'callgraph' | 'table' | 'source' | 'iciclechart';
+export type VisualizationType =
+  | 'icicle'
+  | 'callgraph'
+  | 'table'
+  | 'source'
+  | 'iciclechart'
+  | 'sandwich';
 
 export interface ProfileViewProps {
   total: bigint;

package/src/ProfileViewWithData.tsx

@@ -129,7 +129,7 @@ export const ProfileViewWithData = ({
     response: tableResponse,
     error: tableError,
   } = useQuery(queryClient, profileSource, QueryRequest_ReportType.TABLE_ARROW, {
-    skip: !dashboardItems.includes('table'),
+    skip: !dashboardItems.includes('table') && !dashboardItems.includes('sandwich'),
     binaryFrameFilter,
   });
 

package/src/Sandwich/components/CalleesSection.tsx

@@ -0,0 +1,87 @@
+// 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 from 'react';
+
+import {type FlamegraphArrow} from '@parca/client';
+
+import ProfileIcicleGraph from '../../ProfileIcicleGraph';
+import {type CurrentPathFrame} from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
+import {type ProfileSource} from '../../ProfileSource';
+
+interface CalleesSectionProps {
+  calleesRef: React.RefObject<HTMLDivElement>;
+  isHalfScreen: boolean;
+  calleesFlamegraphResponse?: {
+    report: {
+      oneofKind: string;
+      flamegraphArrow?: FlamegraphArrow;
+    };
+    total?: string;
+  };
+  calleesFlamegraphLoading: boolean;
+  calleesFlamegraphError: any;
+  filtered: bigint;
+  profileSource: ProfileSource;
+  curPathArrow: CurrentPathFrame[];
+  setCurPathArrow: (path: CurrentPathFrame[]) => void;
+  metadataMappingFiles?: string[];
+}
+
+export function CalleesSection({
+  calleesRef,
+  isHalfScreen,
+  calleesFlamegraphResponse,
+  calleesFlamegraphLoading,
+  calleesFlamegraphError,
+  filtered,
+  profileSource,
+  curPathArrow,
+  setCurPathArrow,
+  metadataMappingFiles,
+}: CalleesSectionProps): JSX.Element {
+  return (
+    <div className="flex relative items-start flex-row" ref={calleesRef}>
+      <div className="[writing-mode:vertical-lr] -rotate-180 px-1 uppercase text-[10px] text-left">
+        {'<-'} Callees
+      </div>
+      <ProfileIcicleGraph
+        arrow={
+          calleesFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+            ? calleesFlamegraphResponse?.report?.flamegraphArrow
+            : undefined
+        }
+        total={BigInt(calleesFlamegraphResponse?.total ?? '0')}
+        filtered={filtered}
+        profileType={profileSource?.ProfileType()}
+        loading={calleesFlamegraphLoading}
+        error={calleesFlamegraphError}
+        isHalfScreen={true}
+        width={
+          calleesRef.current != null
+            ? isHalfScreen
+              ? (calleesRef.current.getBoundingClientRect().width - 54) / 2
+              : calleesRef.current.getBoundingClientRect().width - 16
+            : 0
+        }
+        metadataMappingFiles={metadataMappingFiles}
+        metadataLoading={false}
+        isSandwichIcicleGraph={true}
+        curPathArrow={curPathArrow}
+        setNewCurPathArrow={setCurPathArrow}
+        profileSource={profileSource}
+        tooltipId="callees"
+      />
+    </div>
+  );
+}

package/src/Sandwich/components/CallersSection.tsx

@@ -0,0 +1,88 @@
+// 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 from 'react';
+
+import {type FlamegraphArrow} from '@parca/client';
+
+import ProfileIcicleGraph from '../../ProfileIcicleGraph';
+import {type CurrentPathFrame} from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
+import {type ProfileSource} from '../../ProfileSource';
+
+interface CallersSectionProps {
+  callersRef: React.RefObject<HTMLDivElement>;
+  isHalfScreen: boolean;
+  callersFlamegraphResponse?: {
+    report: {
+      oneofKind: string;
+      flamegraphArrow?: FlamegraphArrow;
+    };
+    total?: string;
+  };
+  callersFlamegraphLoading: boolean;
+  callersFlamegraphError: any;
+  filtered: bigint;
+  profileSource: ProfileSource;
+  curPathArrow: CurrentPathFrame[];
+  setCurPathArrow: (path: CurrentPathFrame[]) => void;
+  metadataMappingFiles?: string[];
+}
+
+export function CallersSection({
+  callersRef,
+  isHalfScreen,
+  callersFlamegraphResponse,
+  callersFlamegraphLoading,
+  callersFlamegraphError,
+  filtered,
+  profileSource,
+  curPathArrow,
+  setCurPathArrow,
+  metadataMappingFiles,
+}: CallersSectionProps): JSX.Element {
+  return (
+    <div className="flex relative flex-row" ref={callersRef}>
+      <div className="[writing-mode:vertical-lr] -rotate-180 px-1 uppercase text-[10px] text-left">
+        Callers {'->'}
+      </div>
+      <ProfileIcicleGraph
+        arrow={
+          callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+            ? callersFlamegraphResponse?.report?.flamegraphArrow
+            : undefined
+        }
+        total={BigInt(callersFlamegraphResponse?.total ?? '0')}
+        filtered={filtered}
+        profileType={profileSource?.ProfileType()}
+        loading={callersFlamegraphLoading}
+        error={callersFlamegraphError}
+        isHalfScreen={true}
+        width={
+          callersRef.current != null
+            ? isHalfScreen
+              ? (callersRef.current.getBoundingClientRect().width - 54) / 2
+              : callersRef.current.getBoundingClientRect().width - 16
+            : 0
+        }
+        metadataMappingFiles={metadataMappingFiles}
+        metadataLoading={false}
+        isSandwichIcicleGraph={true}
+        curPathArrow={curPathArrow}
+        setNewCurPathArrow={setCurPathArrow}
+        isFlamegraph={true}
+        profileSource={profileSource}
+        tooltipId="callers"
+      />
+    </div>
+  );
+}

package/src/Sandwich/components/TableSection.tsx

@@ -0,0 +1,67 @@
+// 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 {type ColumnDef, type Row as RowType} from '@tanstack/table-core';
+
+import {Table as TableComponent} from '@parca/components';
+
+import {type Row} from '../../Table';
+import {ColumnName, DataRow, ROW_HEIGHT} from '../../Table/utils/functions';
+
+interface TableSectionProps {
+  rows: Row[];
+  columns: Array<ColumnDef<Row>>;
+  initialSorting: Array<{id: string; desc: boolean}>;
+  selectedRow: RowType<Row> | null;
+  onRowClick: (row: DataRow) => void;
+  shouldHighlightRow: (row: Row) => boolean;
+  enableHighlighting: boolean;
+  columnVisibility: Record<ColumnName, boolean>;
+  height?: number;
+  sandwichFunctionName?: string;
+}
+
+export function TableSection({
+  rows,
+  columns,
+  initialSorting,
+  selectedRow,
+  onRowClick,
+  shouldHighlightRow,
+  enableHighlighting,
+  columnVisibility,
+  height,
+  sandwichFunctionName,
+}: TableSectionProps): JSX.Element {
+  console.log(height);
+  return (
+    <div
+      style={{height: height !== undefined ? `${height}px` : '80vh'}}
+      className={`font-robotoMono w-full cursor-pointer ${
+        selectedRow != null && sandwichFunctionName !== undefined ? 'w-[50%]' : ''
+      }`}
+    >
+      <TableComponent
+        data={rows}
+        columns={columns}
+        initialSorting={initialSorting}
+        usePointerCursor={true}
+        onRowClick={onRowClick}
+        shouldHighlightRow={shouldHighlightRow}
+        enableHighlighting={enableHighlighting}
+        estimatedRowHeight={ROW_HEIGHT}
+        columnVisibility={columnVisibility}
+      />
+    </div>
+  );
+}