ui/shared/profile: Pass down arrow response object

Instead of building the table from the response object right away, pass down the wrapper with additional information, such as trimming value. Only in the final step, right before building the icicle graph, parse the record bytes into an actual arrow table.
parca-dev · Sep 1, 2023 · 196086b · 196086b
1 parent cad92c3
commit 196086b
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 21 deletions.
diff --git a/ui/packages/shared/profile/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx b/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);

diff --git a/ui/packages/shared/profile/src/ProfileIcicleGraph/index.tsx b/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}

diff --git a/ui/packages/shared/profile/src/ProfileView/index.tsx b/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}

diff --git a/ui/packages/shared/profile/src/ProfileViewWithData.tsx b/ui/packages/shared/profile/src/ProfileViewWithData.tsx
@@ -184,9 +184,9 @@ export const ProfileViewWithData = ({
           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'),