@parca/profile 0.19.24 → 0.19.25

package/src/ProfileView/components/ColorStackLegend.tsx

@@ -50,8 +50,6 @@ const ColorStackLegend = ({mappings, compareMode = false, loading}: Props): Reac
       .map(f => f.value);
   }, [appliedFilters]);
 
-  console.log('currentBinaryFilters', currentBinaryFilters);
-
   const mappingsList = useMappingList(mappings);
 
   const mappingColors = useMemo(() => {

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

@@ -24,6 +24,7 @@ import {SourceView} from '../../../SourceView';
 import {Table} from '../../../Table';
 import type {
   FlamegraphData,
+  SandwichData,
   SourceData,
   TopTableData,
   VisualizationType,
@@ -36,6 +37,7 @@ interface GetDashboardItemProps {
   flamegraphData: FlamegraphData;
   flamechartData: FlamegraphData;
   topTableData?: TopTableData;
+  sandwichData: SandwichData;
   sourceData?: SourceData;
   profileSource: ProfileSource;
   total: bigint;
@@ -58,13 +60,13 @@ export const getDashboardItem = ({
   flamechartData,
   topTableData,
   sourceData,
+  sandwichData,
   profileSource,
   total,
   filtered,
   curPathArrow,
   setNewCurPathArrow,
   perf,
-  queryClient,
 }: GetDashboardItemProps): JSX.Element => {
   switch (type) {
     case 'flamegraph':
@@ -142,17 +144,7 @@ export const getDashboardItem = ({
       );
     case 'sandwich':
       return topTableData != null ? (
-        <Sandwich
-          total={total}
-          filtered={filtered}
-          loading={topTableData.loading}
-          data={topTableData.arrow?.record}
-          unit={topTableData.unit}
-          profileType={profileSource?.ProfileType()}
-          metadataMappingFiles={flamegraphData.metadataMappingFiles}
-          profileSource={profileSource}
-          queryClient={queryClient}
-        />
+        <Sandwich profileSource={profileSource} sandwichData={sandwichData} />
       ) : (
         <></>
       );

package/src/ProfileView/index.tsx

@@ -44,6 +44,7 @@ export const ProfileView = ({
   pprofDownloading,
   compare,
   showVisualizationSelector,
+  sandwichData,
 }: ProfileViewProps): JSX.Element => {
   const {
     timezone,
@@ -88,6 +89,7 @@ export const ProfileView = ({
     isHalfScreen: boolean;
   }): JSX.Element => {
     return getDashboardItem({
+      sandwichData,
       type,
       isHalfScreen,
       dimensions,

package/src/ProfileView/types/visualization.ts

@@ -11,20 +11,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {
-  Callgraph as CallgraphType,
-  Flamegraph,
-  FlamegraphArrow,
-  QueryServiceClient,
-  Source,
-  TableArrow,
-} from '@parca/client';
+import {FlamegraphArrow, QueryServiceClient, Source, TableArrow} from '@parca/client';
 
 import {ProfileSource} from '../../ProfileSource';
 
 export interface FlamegraphData {
   loading: boolean;
-  data?: Flamegraph;
   arrow?: FlamegraphArrow;
   total?: bigint;
   filtered?: bigint;
@@ -43,20 +35,17 @@ export interface TopTableData {
   unit?: string;
 }
 
-export interface CallgraphData {
-  loading: boolean;
-  data?: CallgraphType;
-  total?: bigint;
-  filtered?: bigint;
-  error?: any;
-}
-
 export interface SourceData {
   loading: boolean;
   data?: Source;
   error?: any;
 }
 
+export interface SandwichData {
+  callees: FlamegraphData;
+  callers: FlamegraphData;
+}
+
 export type VisualizationType =
   | 'flamegraph'
   | 'callgraph'
@@ -70,8 +59,8 @@ export interface ProfileViewProps {
   filtered: bigint;
   flamegraphData: FlamegraphData;
   flamechartData: FlamegraphData;
+  sandwichData: SandwichData;
   topTableData?: TopTableData;
-  callgraphData?: CallgraphData;
   sourceData?: SourceData;
   profileSource: ProfileSource;
   queryClient?: QueryServiceClient;

package/src/ProfileViewWithData.tsx

@@ -47,6 +47,7 @@ export const ProfileViewWithData = ({
     defaultValue: [FIELD_FUNCTION_NAME],
     alwaysReturnArray: true,
   });
+  const [sandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
 
   const [invertStack] = useURLState('invert_call_stack');
   const invertCallStack = invertStack === 'true';
@@ -131,15 +132,6 @@ export const ProfileViewWithData = ({
     protoFilters,
   });
 
-  const {
-    isLoading: callgraphLoading,
-    response: callgraphResponse,
-    error: callgraphError,
-  } = useQuery(queryClient, profileSource, QueryRequest_ReportType.CALLGRAPH, {
-    skip: !dashboardItems.includes('callgraph'),
-    protoFilters,
-  });
-
   const {
     isLoading: sourceLoading,
     response: sourceResponse,
@@ -151,6 +143,32 @@ export const ProfileViewWithData = ({
     protoFilters,
   });
 
+  const {
+    isLoading: callersFlamegraphLoading,
+    response: callersFlamegraphResponse,
+    error: callersFlamegraphError,
+  } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
+    nodeTrimThreshold,
+    groupBy: [FIELD_FUNCTION_NAME],
+    invertCallStack: true,
+    sandwichByFunction: sandwichFunctionName,
+    skip: sandwichFunctionName === undefined && !dashboardItems.includes('sandwich'),
+    protoFilters,
+  });
+
+  const {
+    isLoading: calleesFlamegraphLoading,
+    response: calleesFlamegraphResponse,
+    error: calleesFlamegraphError,
+  } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
+    nodeTrimThreshold,
+    groupBy: [FIELD_FUNCTION_NAME],
+    invertCallStack: false,
+    sandwichByFunction: sandwichFunctionName,
+    skip: sandwichFunctionName === undefined && !dashboardItems.includes('sandwich'),
+    protoFilters,
+  });
+
   useEffect(() => {
     if (
       (!flamegraphLoading && flamegraphResponse?.report.oneofKind === 'flamegraph') ||
@@ -163,18 +181,12 @@ export const ProfileViewWithData = ({
       perf?.markInteraction('table render', tableResponse.total);
     }
 
-    if (!callgraphLoading && callgraphResponse?.report.oneofKind === 'callgraph') {
-      perf?.markInteraction('Callgraph render', callgraphResponse.total);
-    }
-
     if (!sourceLoading && sourceResponse?.report.oneofKind === 'source') {
       perf?.markInteraction('Source render', sourceResponse.total);
     }
   }, [
     flamegraphLoading,
     flamegraphResponse,
-    callgraphResponse,
-    callgraphLoading,
     tableLoading,
     tableResponse,
     sourceLoading,
@@ -210,15 +222,18 @@ export const ProfileViewWithData = ({
   } else if (tableResponse !== null) {
     total = BigInt(tableResponse.total);
     filtered = BigInt(tableResponse.filtered);
-  } else if (callgraphResponse !== null) {
-    total = BigInt(callgraphResponse.total);
-    filtered = BigInt(callgraphResponse.filtered);
   } else if (sourceResponse !== null) {
     total = BigInt(sourceResponse.total);
     filtered = BigInt(sourceResponse.filtered);
   } else if (flamechartResponse !== null) {
     total = BigInt(flamechartResponse.total);
     filtered = BigInt(flamechartResponse.filtered);
+  } else if (callersFlamegraphResponse !== null) {
+    total = BigInt(callersFlamegraphResponse.total);
+    filtered = BigInt(callersFlamegraphResponse.filtered);
+  } else if (calleesFlamegraphResponse !== null) {
+    total = BigInt(calleesFlamegraphResponse.total);
+    filtered = BigInt(calleesFlamegraphResponse.filtered);
   }
 
   return (
@@ -227,10 +242,6 @@ export const ProfileViewWithData = ({
       filtered={filtered}
       flamegraphData={{
         loading: flamegraphLoading && profileMetadataLoading,
-        data:
-          flamegraphResponse?.report.oneofKind === 'flamegraph'
-            ? flamegraphResponse?.report?.flamegraph
-            : undefined,
         arrow:
           flamegraphResponse?.report.oneofKind === 'flamegraphArrow'
             ? flamegraphResponse?.report?.flamegraphArrow
@@ -279,14 +290,6 @@ export const ProfileViewWithData = ({
             ? tableResponse.report.tableArrow.unit
             : '',
       }}
-      callgraphData={{
-        loading: callgraphLoading,
-        data:
-          callgraphResponse?.report.oneofKind === 'callgraph'
-            ? callgraphResponse?.report?.callgraph
-            : undefined,
-        error: callgraphError,
-      }}
       sourceData={{
         loading: sourceLoading,
         data:
@@ -295,6 +298,38 @@ export const ProfileViewWithData = ({
             : undefined,
         error: sourceError,
       }}
+      sandwichData={{
+        callees: {
+          arrow:
+            calleesFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+              ? calleesFlamegraphResponse?.report?.flamegraphArrow
+              : undefined,
+          loading: calleesFlamegraphLoading,
+          error: calleesFlamegraphError,
+          total: BigInt(calleesFlamegraphResponse?.total ?? '0'),
+          filtered: BigInt(calleesFlamegraphResponse?.filtered ?? '0'),
+          metadataMappingFiles:
+            profileMetadataResponse?.report.oneofKind === 'profileMetadata'
+              ? profileMetadataResponse?.report?.profileMetadata?.mappingFiles
+              : undefined,
+          metadataLoading: profileMetadataLoading,
+        },
+        callers: {
+          arrow:
+            callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+              ? callersFlamegraphResponse?.report?.flamegraphArrow
+              : undefined,
+          loading: callersFlamegraphLoading,
+          error: callersFlamegraphError,
+          total: BigInt(callersFlamegraphResponse?.total ?? '0'),
+          filtered: BigInt(callersFlamegraphResponse?.filtered ?? '0'),
+          metadataMappingFiles:
+            profileMetadataResponse?.report.oneofKind === 'profileMetadata'
+              ? profileMetadataResponse?.report?.profileMetadata?.mappingFiles
+              : undefined,
+          metadataLoading: profileMetadataLoading,
+        },
+      }}
       profileSource={profileSource}
       queryClient={queryClient}
       onDownloadPProf={() => void downloadPProfClick()}

package/src/Sandwich/components/CalleesSection.tsx

@@ -13,24 +13,14 @@
 
 import React from 'react';
 
-import {type FlamegraphArrow} from '@parca/client';
-
 import ProfileFlameGraph from '../../ProfileFlameGraph';
 import {type CurrentPathFrame} from '../../ProfileFlameGraph/FlameGraphArrow/utils';
 import {type ProfileSource} from '../../ProfileSource';
+import {FlamegraphData} from '../../ProfileView/types/visualization';
 
 interface CalleesSectionProps {
   calleesRef: React.RefObject<HTMLDivElement>;
-  calleesFlamegraphResponse?: {
-    report: {
-      oneofKind: string;
-      flamegraphArrow?: FlamegraphArrow;
-    };
-    total?: string;
-  };
-  calleesFlamegraphLoading: boolean;
-  calleesFlamegraphError: any;
-  filtered: bigint;
+  calleesFlamegraphData: FlamegraphData;
   profileSource: ProfileSource;
   curPathArrow: CurrentPathFrame[];
   setCurPathArrow: (path: CurrentPathFrame[]) => void;
@@ -39,14 +29,10 @@ interface CalleesSectionProps {
 
 export function CalleesSection({
   calleesRef,
-  calleesFlamegraphResponse,
-  calleesFlamegraphLoading,
-  calleesFlamegraphError,
-  filtered,
+  calleesFlamegraphData,
   profileSource,
   curPathArrow,
   setCurPathArrow,
-  metadataMappingFiles,
 }: CalleesSectionProps): JSX.Element {
   return (
     <div className="flex relative items-start flex-row" ref={calleesRef}>
@@ -54,22 +40,18 @@ export function CalleesSection({
         {'<-'} Callees
       </div>
       <ProfileFlameGraph
-        arrow={
-          calleesFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
-            ? calleesFlamegraphResponse?.report?.flamegraphArrow
-            : undefined
-        }
-        total={BigInt(calleesFlamegraphResponse?.total ?? '0')}
-        filtered={filtered}
+        arrow={calleesFlamegraphData?.arrow}
+        total={calleesFlamegraphData.total ?? BigInt(0)}
+        filtered={calleesFlamegraphData.filtered ?? BigInt(0)}
         profileType={profileSource?.ProfileType()}
-        loading={calleesFlamegraphLoading}
-        error={calleesFlamegraphError}
+        loading={calleesFlamegraphData.loading}
+        error={calleesFlamegraphData.error}
         isHalfScreen={true}
         width={
           calleesRef.current != null ? calleesRef.current.getBoundingClientRect().width - 25 : 0
         }
-        metadataMappingFiles={metadataMappingFiles}
-        metadataLoading={false}
+        metadataMappingFiles={calleesFlamegraphData.metadataMappingFiles}
+        metadataLoading={calleesFlamegraphData.metadataLoading}
         isInSandwichView={true}
         curPathArrow={curPathArrow}
         setNewCurPathArrow={setCurPathArrow}

package/src/Sandwich/components/CallersSection.tsx

@@ -16,12 +16,12 @@ import React, {useMemo} from 'react';
 import {Vector, tableFromIPC} from 'apache-arrow';
 import {Tooltip} from 'react-tooltip';
 
-import {type FlamegraphArrow} from '@parca/client';
 import {Button} from '@parca/components';
 
 import ProfileFlameGraph from '../../ProfileFlameGraph';
 import {type CurrentPathFrame} from '../../ProfileFlameGraph/FlameGraphArrow/utils';
 import {type ProfileSource} from '../../ProfileSource';
+import {FlamegraphData} from '../../ProfileView/types/visualization';
 
 const FIELD_DEPTH = 'depth';
 
@@ -38,20 +38,10 @@ function getMaxDepth(depthColumn: Vector<any> | null): number {
 
 interface CallersSectionProps {
   callersRef: React.RefObject<HTMLDivElement>;
-  callersFlamegraphResponse?: {
-    report: {
-      oneofKind: string;
-      flamegraphArrow?: FlamegraphArrow;
-    };
-    total?: string;
-  };
-  callersFlamegraphLoading: boolean;
-  callersFlamegraphError: any;
-  filtered: bigint;
+  callersFlamegraphData: FlamegraphData;
   profileSource: ProfileSource;
   curPathArrow: CurrentPathFrame[];
   setCurPathArrow: (path: CurrentPathFrame[]) => void;
-  metadataMappingFiles?: string[];
   isExpanded: boolean;
   setIsExpanded: (isExpanded: boolean) => void;
   defaultMaxFrames: number;
@@ -59,29 +49,22 @@ interface CallersSectionProps {
 
 export function CallersSection({
   callersRef,
-  callersFlamegraphResponse,
-  callersFlamegraphLoading,
-  callersFlamegraphError,
-  filtered,
+  callersFlamegraphData,
   profileSource,
   curPathArrow,
   setCurPathArrow,
-  metadataMappingFiles,
   isExpanded,
   setIsExpanded,
   defaultMaxFrames,
 }: CallersSectionProps): JSX.Element {
   const maxDepth = useMemo(() => {
-    if (
-      callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow' &&
-      callersFlamegraphResponse?.report?.flamegraphArrow != null
-    ) {
-      const table = tableFromIPC(callersFlamegraphResponse.report.flamegraphArrow.record);
+    if (callersFlamegraphData?.arrow != null) {
+      const table = tableFromIPC(callersFlamegraphData.arrow.record);
       const depthColumn = table.getChild(FIELD_DEPTH);
       return getMaxDepth(depthColumn);
     }
     return 0;
-  }, [callersFlamegraphResponse]);
+  }, [callersFlamegraphData]);
 
   const shouldShowButton = maxDepth > defaultMaxFrames;
 
@@ -113,22 +96,18 @@ export function CallersSection({
         </div>
         <div className="flex-1 overflow-hidden relative">
           <ProfileFlameGraph
-            arrow={
-              callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
-                ? callersFlamegraphResponse?.report?.flamegraphArrow
-                : undefined
-            }
-            total={BigInt(callersFlamegraphResponse?.total ?? '0')}
-            filtered={filtered}
+            arrow={callersFlamegraphData?.arrow}
+            total={callersFlamegraphData.total ?? BigInt(0)}
+            filtered={callersFlamegraphData.filtered ?? BigInt(0)}
             profileType={profileSource?.ProfileType()}
-            loading={callersFlamegraphLoading}
-            error={callersFlamegraphError}
+            loading={callersFlamegraphData.loading}
+            error={callersFlamegraphData.error}
             isHalfScreen={true}
             width={
               callersRef.current != null ? callersRef.current.getBoundingClientRect().width - 25 : 0
             }
-            metadataMappingFiles={metadataMappingFiles}
-            metadataLoading={false}
+            metadataMappingFiles={callersFlamegraphData.metadataMappingFiles}
+            metadataLoading={callersFlamegraphData.metadataLoading}
             isInSandwichView={true}
             curPathArrow={curPathArrow}
             setNewCurPathArrow={setCurPathArrow}