diff --git a/ui/packages/shared/profile/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx b/ui/packages/shared/profile/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx index bf30e528481..2822f4ecdf6 100644 --- 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; + 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 = useMemo(() => { + return tableFromIPC(arrow.record); + }, [arrow]); + const [height, setHeight] = useState(0); const [hoveringRow, setHoveringRow] = useState(null); const [hoveringLevel, setHoveringLevel] = useState(null); diff --git a/ui/packages/shared/profile/src/ProfileIcicleGraph/index.tsx b/ui/packages/shared/profile/src/ProfileIcicleGraph/index.tsx index f5bf206c523..f7cb83f2fb7 100644 --- 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; + 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(
- {table !== undefined && } + {arrow !== undefined && }
); - }, [navigateTo, table, curPath, setNewCurPath, setActionButtons]); + }, [navigateTo, arrow, curPath, setNewCurPath, setActionButtons]); if (loading) { return
{loader}
; @@ -186,7 +184,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ return
An error occurred: {error.message}
; } - if (graph === undefined && table === undefined) + if (graph === undefined && arrow === undefined) return
No data...
; if (total === 0n && !loading) @@ -212,10 +210,10 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ navigateTo={navigateTo} /> )} - {table !== undefined && ( + {arrow !== undefined && ( ; + arrow?: FlamegraphArrow; total?: bigint; filtered?: bigint; error?: any; @@ -258,7 +258,7 @@ export const ProfileView = ({