@parca/profile 0.16.243 → 0.16.245

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.245](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.244...@parca/profile@0.16.245) (2023-09-01)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.244](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.243...@parca/profile@0.16.244) (2023-09-01)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.243](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.242...@parca/profile@0.16.243) (2023-09-01)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Table } from 'apache-arrow';
+import { FlamegraphArrow } from '@parca/client';
 import { type NavigateFunction } from '@parca/utilities';
 export declare const FIELD_LABELS_ONLY = "labels_only";
 export declare const FIELD_MAPPING_FILE = "mapping_file";
@@ -14,7 +14,7 @@ export declare const FIELD_LABELS = "labels";
 export declare const FIELD_CUMULATIVE = "cumulative";
 export declare const FIELD_DIFF = "diff";
 interface IcicleGraphArrowProps {
-    table: Table<any>;
+    arrow: FlamegraphArrow;
     total: bigint;
     filtered: bigint;
     sampleUnit: string;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -12,6 +12,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { tableFromIPC } from 'apache-arrow';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
 import { getColorForFeature, selectDarkMode, setHoveringNode, useAppDispatch, useAppSelector, } from '@parca/store';
 import { getLastItem, scaleLinear, selectQueryParam, } from '@parca/utilities';
@@ -32,10 +33,13 @@ export const FIELD_CHILDREN = 'children';
 export const FIELD_LABELS = 'labels';
 export const FIELD_CUMULATIVE = 'cumulative';
 export const FIELD_DIFF = 'diff';
-export const IcicleGraphArrow = memo(function IcicleGraphArrow({ table, total, filtered, width, setCurPath, curPath, sampleUnit, navigateTo, sortBy, }) {
+export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, sampleUnit, navigateTo, sortBy, }) {
     const dispatch = useAppDispatch();
     const [colorProfile] = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key);
     const isDarkMode = useAppSelector(selectDarkMode);
+    const table = useMemo(() => {
+        return tableFromIPC(arrow.record);
+    }, [arrow]);
     const [height, setHeight] = useState(0);
     const [hoveringRow, setHoveringRow] = useState(null);
     const [hoveringLevel, setHoveringLevel] = useState(null);

package/dist/ProfileIcicleGraph/index.d.ts

@@ -1,12 +1,11 @@
 import React from 'react';
-import { Table } from 'apache-arrow';
-import { Flamegraph } from '@parca/client';
+import { Flamegraph, FlamegraphArrow } from '@parca/client';
 import { type NavigateFunction } from '@parca/utilities';
 export type ResizeHandler = (width: number, height: number) => void;
 interface ProfileIcicleGraphProps {
-    width?: number;
+    width: number;
     graph?: Flamegraph;
-    table?: Table<any>;
+    arrow?: FlamegraphArrow;
     total: bigint;
     filtered: bigint;
     sampleUnit: string;
@@ -17,5 +16,5 @@ interface ProfileIcicleGraphProps {
     setActionButtons?: (buttons: React.JSX.Element) => void;
     error?: any;
 }
-declare const ProfileIcicleGraph: ({ graph, table, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, error, }: ProfileIcicleGraphProps) => JSX.Element;
+declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, error, width, }: ProfileIcicleGraphProps) => JSX.Element;
 export default ProfileIcicleGraph;

package/dist/ProfileIcicleGraph/index.js

@@ -15,7 +15,6 @@ import { Fragment, useCallback, useEffect, useMemo } from 'react';
 import { Menu, Transition } from '@headlessui/react';
 import { Icon } from '@iconify/react';
 import { Button, Select, useParcaContext, useURLState } from '@parca/components';
-import { useContainerDimensions } from '@parca/hooks';
 import { divide, selectQueryParam } from '@parca/utilities';
 import DiffLegend from '../components/DiffLegend';
 import IcicleGraph from './IcicleGraph';
@@ -50,20 +49,18 @@ const GroupAndSortActionButtons = ({ navigateTo }) => {
     }, [groupBy, setGroupBy]);
     return (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy }), _jsx(SortBySelect, { compareMode: compareMode, sortBy: storeSortBy, setSortBy: setStoreSortBy })] }));
 };
-const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, table, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, error, }) {
+const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, error, width, }) {
     const { loader } = useParcaContext();
     const compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
-    const { ref, dimensions } = useContainerDimensions();
     const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState({
         param: 'sort_by',
         navigateTo,
     });
     const [totalFormatted, totalUnfilteredFormatted, isTrimmed, trimmedFormatted, trimmedPercentage, 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 = graph?.trimmed ?? arrow?.trimmed ?? 0n;
         const totalUnfiltered = total + filtered;
         // safeguard against division by zero
         const totalUnfilteredDivisor = totalUnfiltered > 0 ? totalUnfiltered : 1n;
@@ -76,13 +73,13 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, table, to
             filtered > 0,
             numberFormatter.format(divide(total * 100n, totalUnfilteredDivisor)),
         ];
-    }, [graph, filtered, total]);
+    }, [graph, arrow, filtered, total]);
     useEffect(() => {
         if (setActionButtons === undefined) {
             return;
         }
-        setActionButtons(_jsx("div", { className: "flex w-full justify-end gap-2 pb-2", children: _jsxs("div", { className: "ml-2 flex w-full items-end justify-between gap-2", children: [table !== undefined && _jsx(GroupAndSortActionButtons, { navigateTo: navigateTo }), _jsx("div", { children: _jsx(Button, { color: "neutral", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, variant: "neutral", children: "Reset View" }) })] }) }));
-    }, [navigateTo, table, curPath, setNewCurPath, setActionButtons]);
+        setActionButtons(_jsx("div", { className: "flex w-full justify-end gap-2 pb-2", children: _jsxs("div", { className: "ml-2 flex w-full items-end justify-between gap-2", children: [arrow !== undefined && _jsx(GroupAndSortActionButtons, { navigateTo: navigateTo }), _jsx("div", { children: _jsx(Button, { color: "neutral", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, variant: "neutral", children: "Reset View" }) })] }) }));
+    }, [navigateTo, arrow, curPath, setNewCurPath, setActionButtons]);
     if (loading) {
         return _jsx("div", { className: "h-96", children: loader });
     }
@@ -90,14 +87,14 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, table, to
         console.error('Error: ', error);
         return _jsxs("div", { className: "flex justify-center p-10", children: ["An error occurred: ", error.message] });
     }
-    if (graph === undefined && table === undefined)
+    if (graph === undefined && arrow === undefined)
         return _jsx("div", { className: "mx-auto text-center", children: "No data..." });
     if (total === 0n && !loading)
         return _jsx("div", { className: "mx-auto text-center", children: "Profile has no samples" });
     if (isTrimmed) {
         console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
     }
-    return (_jsxs("div", { className: "relative", children: [compareMode && _jsx(DiffLegend, {}), _jsxs("div", { ref: ref, className: "min-h-48", children: [graph !== undefined && (_jsx(IcicleGraph, { width: dimensions?.width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo })), table !== undefined && (_jsx(IcicleGraphArrow, { width: dimensions?.width, table: table, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo, sortBy: storeSortBy }))] }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }));
+    return (_jsxs("div", { className: "relative", children: [compareMode && _jsx(DiffLegend, {}), _jsxs("div", { className: "min-h-48", children: [graph !== undefined && (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo })), arrow !== undefined && (_jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo, sortBy: storeSortBy }))] }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }));
 };
 const groupByOptions = [
     {

package/dist/ProfileView/index.d.ts

@@ -1,5 +1,4 @@
-import { Table as ArrowTable } from 'apache-arrow';
-import { Callgraph as CallgraphType, Flamegraph, QueryServiceClient, Source, TableArrow, Top } from '@parca/client';
+import { Callgraph as CallgraphType, Flamegraph, FlamegraphArrow, QueryServiceClient, Source, TableArrow, Top } from '@parca/client';
 import { ProfileSource } from '../ProfileSource';
 type NavigateFunction = (path: string, queryParams: any, options?: {
     replace?: boolean;
@@ -7,7 +6,7 @@ type NavigateFunction = (path: string, queryParams: any, options?: {
 export interface FlamegraphData {
     loading: boolean;
     data?: Flamegraph;
-    table?: ArrowTable<any>;
+    arrow?: FlamegraphArrow;
     total?: bigint;
     filtered?: bigint;
     error?: any;

package/dist/ProfileView/index.js

@@ -130,7 +130,11 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                 return (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
                         id: 'icicleGraph',
                         onRender: perf?.onRender,
-                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, table: flamegraphData?.table, graph: flamegraphData?.data, total: total, filtered: filtered, sampleUnit: sampleUnit, navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons, error: flamegraphData.error }) }));
+                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, arrow: flamegraphData?.arrow, graph: flamegraphData?.data, total: total, filtered: filtered, sampleUnit: sampleUnit, navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons, error: flamegraphData.error, width: dimensions?.width !== undefined
+                            ? isHalfScreen
+                                ? (dimensions.width - 40) / 2
+                                : dimensions.width - 16
+                            : 0 }) }));
             }
             case 'callgraph': {
                 return callgraphData?.data !== undefined &&

package/dist/ProfileViewWithData.js

@@ -12,7 +12,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useEffect, useMemo, useState } from 'react';
-import { tableFromIPC } from 'apache-arrow';
 import { QueryRequest_ReportType } from '@parca/client';
 import { useGrpcMetadata, useParcaContext, useURLState } from '@parca/components';
 import { USER_PREFERENCES, useUIFeatureFlag, useUserPreference } from '@parca/hooks';
@@ -129,8 +128,8 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
             data: flamegraphResponse?.report.oneofKind === 'flamegraph'
                 ? flamegraphResponse?.report?.flamegraph
                 : undefined,
-            table: flamegraphResponse?.report.oneofKind === 'flamegraphArrow'
-                ? tableFromIPC(flamegraphResponse?.report?.flamegraphArrow.record)
+            arrow: flamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+                ? flamegraphResponse?.report?.flamegraphArrow
                 : undefined,
             total: BigInt(flamegraphResponse?.total ?? '0'),
             filtered: BigInt(flamegraphResponse?.filtered ?? '0'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.243",
+  "version": "0.16.245",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.86",
@@ -49,5 +49,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "fef627c0af7b6169048f9108637cdc92442ad4ae"
+  "gitHead": "6f9a132da7b7598c0aed2854f6c525f8ee97d67b"
 }

package/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);

package/src/ProfileIcicleGraph/index.tsx

@@ -15,11 +15,9 @@ 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 {useContainerDimensions} from '@parca/hooks';
 import {divide, selectQueryParam, type NavigateFunction} from '@parca/utilities';
 
 import DiffLegend from '../components/DiffLegend';
@@ -36,9 +34,9 @@ const numberFormatter = new Intl.NumberFormat('en-US');
 export type ResizeHandler = (width: number, height: number) => void;
 
 interface ProfileIcicleGraphProps {
-  width?: number;
+  width: number;
   graph?: Flamegraph;
-  table?: Table<any>;
+  arrow?: FlamegraphArrow;
   total: bigint;
   filtered: bigint;
   sampleUnit: string;
@@ -103,7 +101,7 @@ const GroupAndSortActionButtons = ({navigateTo}: {navigateTo?: NavigateFunction}
 
 const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   graph,
-  table,
+  arrow,
   total,
   filtered,
   curPath,
@@ -113,11 +111,11 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   loading,
   setActionButtons,
   error,
+  width,
 }: ProfileIcicleGraphProps): JSX.Element {
   const {loader} = useParcaContext();
   const compareMode: boolean =
     selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
-  const {ref, dimensions} = useContainerDimensions();
 
   const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState({
     param: 'sort_by',
@@ -133,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
@@ -153,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) {
@@ -162,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"
@@ -176,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>;
@@ -187,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)
@@ -200,10 +197,10 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   return (
     <div className="relative">
       {compareMode && <DiffLegend />}
-      <div ref={ref} className="min-h-48">
+      <div className="min-h-48">
         {graph !== undefined && (
           <IcicleGraph
-            width={dimensions?.width}
+            width={width}
             graph={graph}
             total={total}
             filtered={filtered}
@@ -213,10 +210,10 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
             navigateTo={navigateTo}
           />
         )}
-        {table !== undefined && (
+        {arrow !== undefined && (
           <IcicleGraphArrow
-            width={dimensions?.width}
-            table={table}
+            width={width}
+            arrow={arrow}
             total={total}
             filtered={filtered}
             curPath={curPath}

package/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}
@@ -267,6 +267,13 @@ export const ProfileView = ({
               loading={flamegraphData.loading}
               setActionButtons={setActionButtons}
               error={flamegraphData.error}
+              width={
+                dimensions?.width !== undefined
+                  ? isHalfScreen
+                    ? (dimensions.width - 40) / 2
+                    : dimensions.width - 16
+                  : 0
+              }
             />
           </ConditionalWrapper>
         );

package/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'),