@parca/profile 0.19.24 → 0.19.26

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}

package/src/Sandwich/index.tsx

@@ -11,59 +11,31 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useEffect, useMemo, useRef, useState} from 'react';
+import React, {useRef, useState} from 'react';
 
-import {type Row as TableRow} from '@tanstack/table-core';
-import {tableFromIPC} from 'apache-arrow';
 import {AnimatePresence, motion} from 'framer-motion';
 
-import {QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
-import {useParcaContext, useURLState} from '@parca/components';
-import {useCurrentColorProfile} from '@parca/hooks';
-import {ProfileType} from '@parca/parser';
+import {useURLState} from '@parca/components';
 
-import useMappingList, {
-  useFilenamesList,
-} from '../ProfileFlameGraph/FlameGraphArrow/useMappingList';
 import {ProfileSource} from '../ProfileSource';
-import {useProfileFilters} from '../ProfileView/components/ProfileFilters/useProfileFilters';
 import {useDashboard} from '../ProfileView/context/DashboardContext';
 import {useVisualizationState} from '../ProfileView/hooks/useVisualizationState';
-import {FIELD_FUNCTION_NAME, Row} from '../Table';
-import {useColorManagement} from '../Table/hooks/useColorManagement';
-import {useQuery} from '../useQuery';
+import {SandwichData} from '../ProfileView/types/visualization';
 import {CalleesSection} from './components/CalleesSection';
 import {CallersSection} from './components/CallersSection';
-import {processRowData} from './utils/processRowData';
 
 interface Props {
-  data?: Uint8Array;
-  total: bigint;
-  filtered: bigint;
-  profileType?: ProfileType;
-  loading: boolean;
-  unit?: string;
-  metadataMappingFiles?: string[];
-  queryClient?: QueryServiceClient;
   profileSource: ProfileSource;
+  sandwichData: SandwichData;
 }
 
 const Sandwich = React.memo(function Sandwich({
-  data,
-  filtered,
-  profileType,
-  loading,
-  unit,
-  metadataMappingFiles,
-  queryClient,
+  sandwichData,
   profileSource,
 }: Props): React.JSX.Element {
-  const currentColorProfile = useCurrentColorProfile();
   const {dashboardItems} = useDashboard();
   const [sandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
 
-  const {isDarkMode} = useParcaContext();
-  const [selectedRow, setSelectedRow] = useState<TableRow<Row> | null>(null);
   const callersRef = React.useRef<HTMLDivElement | null>(null);
   const calleesRef = React.useRef<HTMLDivElement | null>(null);
   const [isExpanded, setIsExpanded] = useState(false);
@@ -71,113 +43,7 @@ const Sandwich = React.memo(function Sandwich({
 
   const callersCalleesContainerRef = useRef<HTMLDivElement | null>(null);
 
-  const {colorBy, setColorBy, curPathArrow, setCurPathArrow} = useVisualizationState();
-
-  const nodeTrimThreshold = useMemo(() => {
-    let width =
-      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-      window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-    // subtract the padding
-    width = width - 12 - 16 - 12;
-    return (1 / width) * 100;
-  }, []);
-
-  const {protoFilters} = useProfileFilters();
-
-  const {
-    isLoading: callersFlamegraphLoading,
-    response: callersFlamegraphResponse,
-    error: callersFlamegraphError,
-  } = useQuery(
-    queryClient as QueryServiceClient,
-    profileSource,
-    QueryRequest_ReportType.FLAMEGRAPH_ARROW,
-    {
-      nodeTrimThreshold,
-      groupBy: [FIELD_FUNCTION_NAME],
-      invertCallStack: true,
-      sandwichByFunction: sandwichFunctionName,
-      skip: sandwichFunctionName === undefined,
-      protoFilters,
-    }
-  );
-
-  const {
-    isLoading: calleesFlamegraphLoading,
-    response: calleesFlamegraphResponse,
-    error: calleesFlamegraphError,
-  } = useQuery(
-    queryClient as QueryServiceClient,
-    profileSource,
-    QueryRequest_ReportType.FLAMEGRAPH_ARROW,
-    {
-      nodeTrimThreshold,
-      groupBy: [FIELD_FUNCTION_NAME],
-      invertCallStack: false,
-      sandwichByFunction: sandwichFunctionName,
-      skip: sandwichFunctionName === undefined,
-      protoFilters,
-    }
-  );
-
-  const table = useMemo(() => {
-    if (loading || data == null) {
-      return null;
-    }
-
-    return tableFromIPC(data);
-  }, [data, loading]);
-
-  const mappingsList = useMappingList(metadataMappingFiles);
-  const filenamesList = useFilenamesList(table);
-
-  const mappingsListCount = useMemo(
-    () => mappingsList.filter(m => m !== '').length,
-    [mappingsList]
-  );
-
-  // If there is only one mapping file, we want to color by filename by default.
-  useEffect(() => {
-    if (mappingsListCount === 1 && colorBy !== 'filename') {
-      setColorBy('filename');
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mappingsListCount]);
-
-  const {colorByColors, colorByValue} = useColorManagement({
-    isDarkMode,
-    currentColorProfile,
-    mappingsList,
-    filenamesList,
-    colorBy,
-  });
-
-  unit = useMemo(() => unit ?? profileType?.sampleUnit ?? '', [unit, profileType?.sampleUnit]);
-
-  const rows = useMemo(() => {
-    if (table == null || table.numRows === 0) {
-      return [];
-    }
-
-    return processRowData({
-      table,
-      colorByColors,
-      colorBy: colorByValue,
-    });
-  }, [table, colorByColors, colorByValue]);
-
-  useEffect(() => {
-    if (sandwichFunctionName !== undefined && selectedRow == null) {
-      // find the row with the sandwichFunctionName
-      const row = rows.find(row => {
-        return row.name.trim() === sandwichFunctionName.trim();
-      });
-
-      if (row != null) {
-        setSelectedRow(row as unknown as TableRow<Row>);
-      }
-    }
-  }, [sandwichFunctionName, rows, selectedRow]);
+  const {curPathArrow, setCurPathArrow} = useVisualizationState();
 
   return (
     <section className="flex flex-row h-full w-full">
@@ -194,24 +60,10 @@ const Sandwich = React.memo(function Sandwich({
               <div className="w-full flex flex-col" ref={callersCalleesContainerRef}>
                 <CallersSection
                   callersRef={callersRef}
-                  callersFlamegraphResponse={
-                    callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
-                      ? {
-                          report: {
-                            oneofKind: 'flamegraphArrow',
-                            flamegraphArrow: callersFlamegraphResponse.report.flamegraphArrow,
-                          },
-                          total: callersFlamegraphResponse.total?.toString() ?? '0',
-                        }
-                      : undefined
-                  }
-                  callersFlamegraphLoading={callersFlamegraphLoading}
-                  callersFlamegraphError={callersFlamegraphError}
-                  filtered={filtered}
+                  callersFlamegraphData={sandwichData.callers}
                   profileSource={profileSource}
                   curPathArrow={curPathArrow}
                   setCurPathArrow={setCurPathArrow}
-                  metadataMappingFiles={metadataMappingFiles}
                   isExpanded={isExpanded}
                   setIsExpanded={setIsExpanded}
                   defaultMaxFrames={defaultMaxFrames}
@@ -219,24 +71,10 @@ const Sandwich = React.memo(function Sandwich({
                 <div className="h-4" />
                 <CalleesSection
                   calleesRef={calleesRef}
-                  calleesFlamegraphResponse={
-                    calleesFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
-                      ? {
-                          report: {
-                            oneofKind: 'flamegraphArrow',
-                            flamegraphArrow: calleesFlamegraphResponse.report.flamegraphArrow,
-                          },
-                          total: calleesFlamegraphResponse.total?.toString() ?? '0',
-                        }
-                      : undefined
-                  }
-                  calleesFlamegraphLoading={calleesFlamegraphLoading}
-                  calleesFlamegraphError={calleesFlamegraphError}
-                  filtered={filtered}
+                  calleesFlamegraphData={sandwichData.callees}
                   profileSource={profileSource}
                   curPathArrow={curPathArrow}
                   setCurPathArrow={setCurPathArrow}
-                  metadataMappingFiles={metadataMappingFiles}
                 />
               </div>
             ) : (