@parca/profile 0.19.24 → 0.19.25

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>
             ) : (