ui/shared/profile: Pass down arrow response object

ui/packages/shared/profile/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -13,8 +13,9 @@
 
 import React, {memo, useEffect, useMemo, useRef, useState} from 'react';
 
-import {Dictionary, Table, Vector} from 'apache-arrow';
+import {Dictionary, Table, Vector, tableFromIPC} from 'apache-arrow';
 
+import {FlamegraphArrow} from '@parca/client';
 import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
 import {
   getColorForFeature,
@@ -51,7 +52,7 @@ export const FIELD_CUMULATIVE = 'cumulative';
 export const FIELD_DIFF = 'diff';
 
 interface IcicleGraphArrowProps {
-  table: Table<any>;
+  arrow: FlamegraphArrow;
   total: bigint;
   filtered: bigint;
   sampleUnit: string;
@@ -63,7 +64,7 @@ interface IcicleGraphArrowProps {
 }
 
 export const IcicleGraphArrow = memo(function IcicleGraphArrow({
-  table,
+  arrow,
   total,
   filtered,
   width,
@@ -79,6 +80,10 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   );
   const isDarkMode = useAppSelector(selectDarkMode);
 
+  const table: Table<any> = useMemo(() => {
+    return tableFromIPC(arrow.record);
+  }, [arrow]);
+
   const [height, setHeight] = useState(0);
   const [hoveringRow, setHoveringRow] = useState<number | null>(null);
   const [hoveringLevel, setHoveringLevel] = useState<number | null>(null);

ui/packages/shared/profile/src/ProfileIcicleGraph/index.tsx

@@ -15,9 +15,8 @@ import React, {Fragment, useCallback, useEffect, useMemo} from 'react';
 
 import {Menu, Transition} from '@headlessui/react';
 import {Icon} from '@iconify/react';
-import {Table} from 'apache-arrow';
 
-import {Flamegraph} from '@parca/client';
+import {Flamegraph, FlamegraphArrow} from '@parca/client';
 import {Button, Select, useParcaContext, useURLState} from '@parca/components';
 import {divide, selectQueryParam, type NavigateFunction} from '@parca/utilities';
 
@@ -37,7 +36,7 @@ export type ResizeHandler = (width: number, height: number) => void;
 interface ProfileIcicleGraphProps {
   width: number;
   graph?: Flamegraph;
-  table?: Table<any>;
+  arrow?: FlamegraphArrow;
   total: bigint;
   filtered: bigint;
   sampleUnit: string;
@@ -102,7 +101,7 @@ const GroupAndSortActionButtons = ({navigateTo}: {navigateTo?: NavigateFunction}
 
 const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   graph,
-  table,
+  arrow,
   total,
   filtered,
   curPath,
@@ -132,12 +131,11 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     isFiltered,
     filteredPercentage,
   ] = useMemo(() => {
-    if (graph === undefined) {
+    if (graph === undefined && arrow === undefined) {
       return ['0', '0', false, '0', '0', false, '0', '0'];
     }
 
-    // const trimmed = graph.trimmed;
-    const trimmed = 0n;
+    const trimmed: bigint = graph?.trimmed ?? arrow?.trimmed ?? 0n;
 
     const totalUnfiltered = total + filtered;
     // safeguard against division by zero
@@ -152,7 +150,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
       filtered > 0,
       numberFormatter.format(divide(total * 100n, totalUnfilteredDivisor)),
     ];
-  }, [graph, filtered, total]);
+  }, [graph, arrow, filtered, total]);
 
   useEffect(() => {
     if (setActionButtons === undefined) {
@@ -161,7 +159,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     setActionButtons(
       <div className="flex w-full justify-end gap-2 pb-2">
         <div className="ml-2 flex w-full items-end justify-between gap-2">
-          {table !== undefined && <GroupAndSortActionButtons navigateTo={navigateTo} />}
+          {arrow !== undefined && <GroupAndSortActionButtons navigateTo={navigateTo} />}
           <div>
             <Button
               color="neutral"
@@ -175,7 +173,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
         </div>
       </div>
     );
-  }, [navigateTo, table, curPath, setNewCurPath, setActionButtons]);
+  }, [navigateTo, arrow, curPath, setNewCurPath, setActionButtons]);
 
   if (loading) {
     return <div className="h-96">{loader}</div>;
@@ -186,7 +184,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     return <div className="flex justify-center p-10">An error occurred: {error.message}</div>;
   }
 
-  if (graph === undefined && table === undefined)
+  if (graph === undefined && arrow === undefined)
     return <div className="mx-auto text-center">No data...</div>;
 
   if (total === 0n && !loading)
@@ -212,10 +210,10 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
             navigateTo={navigateTo}
           />
         )}
-        {table !== undefined && (
+        {arrow !== undefined && (
           <IcicleGraphArrow
             width={width}
-            table={table}
+            arrow={arrow}
             total={total}
             filtered={filtered}
             curPath={curPath}

ui/packages/shared/profile/src/ProfileView/index.tsx

@@ -14,7 +14,6 @@
 import {Profiler, ProfilerProps, useEffect, useMemo, useState} from 'react';
 
 import {Icon} from '@iconify/react';
-import {Table as ArrowTable} from 'apache-arrow';
 import cx from 'classnames';
 import {scaleLinear} from 'd3';
 import graphviz from 'graphviz-wasm';
@@ -29,6 +28,7 @@ import {
 import {
   Callgraph as CallgraphType,
   Flamegraph,
+  FlamegraphArrow,
   QueryServiceClient,
   Source,
   TableArrow,
@@ -64,7 +64,7 @@ type NavigateFunction = (path: string, queryParams: any, options?: {replace?: bo
 export interface FlamegraphData {
   loading: boolean;
   data?: Flamegraph;
-  table?: ArrowTable<any>;
+  arrow?: FlamegraphArrow;
   total?: bigint;
   filtered?: bigint;
   error?: any;
@@ -258,7 +258,7 @@ export const ProfileView = ({
             <ProfileIcicleGraph
               curPath={curPath}
               setNewCurPath={setNewCurPath}
-              table={flamegraphData?.table}
+              arrow={flamegraphData?.arrow}
               graph={flamegraphData?.data}
               total={total}
               filtered={filtered}

ui/packages/shared/profile/src/ProfileViewWithData.tsx

@@ -13,7 +13,7 @@
 
 import {useEffect, useMemo, useState} from 'react';
 
 import {tableFromIPC} from 'apache-arrow';
 
 import {QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
 import {useGrpcMetadata, useParcaContext, useURLState} from '@parca/components';
@@ -184,9 +184,9 @@
           flamegraphResponse?.report.oneofKind === 'flamegraph'
             ? flamegraphResponse?.report?.flamegraph
             : undefined,
-        table:
+        arrow:
           flamegraphResponse?.report.oneofKind === 'flamegraphArrow'
-            ? tableFromIPC(flamegraphResponse?.report?.flamegraphArrow.record)
+            ? flamegraphResponse?.report?.flamegraphArrow
             : undefined,
         total: BigInt(flamegraphResponse?.total ?? '0'),
         filtered: BigInt(flamegraphResponse?.filtered ?? '0'),