@parca/profile 0.16.198 → 0.16.199

package/src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts

@@ -0,0 +1,51 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {Table} from 'apache-arrow';
+
+import {EVERYTHING_ELSE, FEATURE_TYPES, type Feature} from '@parca/store';
+import {getLastItem} from '@parca/utilities';
+
+import {hexifyAddress} from '../../utils';
+import {FIELD_FUNCTION_NAME, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE} from './index';
+
+export function nodeLabel(table: Table<any>, row: number, showBinaryName: boolean): string {
+  const functionName: string | null = table.getChild(FIELD_FUNCTION_NAME)?.get(row);
+  if (functionName !== null && functionName !== '') {
+    return functionName;
+  }
+
+  let mappingString = '';
+  if (showBinaryName) {
+    const mappingFile: string | null = table.getChild(FIELD_MAPPING_FILE)?.get(row) ?? '';
+    const binary: string | undefined = getLastItem(mappingFile ?? undefined);
+    if (binary != null) mappingString = `[${binary}]`;
+  }
+
+  const addressBigInt: bigint = table.getChild(FIELD_LOCATION_ADDRESS)?.get(row);
+  const address = hexifyAddress(addressBigInt);
+  const fallback = `${mappingString}${address}`;
+  return fallback === '' ? '<unknown>' : fallback;
+}
+
+export const extractFeature = (mapping: string): Feature => {
+  if (mapping.startsWith('runtime') || mapping === 'root') {
+    return {name: 'runtime', type: FEATURE_TYPES.Runtime};
+  }
+
+  if (mapping != null && mapping !== '') {
+    return {name: mapping, type: FEATURE_TYPES.Binary};
+  }
+
+  return {name: EVERYTHING_ELSE, type: FEATURE_TYPES.Misc};
+};

package/src/ProfileIcicleGraph/index.tsx

@@ -13,13 +13,16 @@
 
 import {useEffect, useMemo} from 'react';
 
+import {Table} from 'apache-arrow';
+
 import {Flamegraph} from '@parca/client';
 import {Button} from '@parca/components';
 import {useContainerDimensions} from '@parca/hooks';
 import {divide, selectQueryParam, type NavigateFunction} from '@parca/utilities';
 
 import DiffLegend from '../components/DiffLegend';
-import {IcicleGraph} from './IcicleGraph';
+import IcicleGraph from './IcicleGraph';
+import IcicleGraphArrow from './IcicleGraphArrow';
 
 const numberFormatter = new Intl.NumberFormat('en-US');
 
@@ -27,7 +30,8 @@ export type ResizeHandler = (width: number, height: number) => void;
 
 interface ProfileIcicleGraphProps {
   width?: number;
-  graph: Flamegraph | undefined;
+  graph?: Flamegraph;
+  table?: Table<any>;
   total: bigint;
   filtered: bigint;
   sampleUnit: string;
@@ -40,6 +44,7 @@ interface ProfileIcicleGraphProps {
 
 const ProfileIcicleGraph = ({
   graph,
+  table,
   total,
   filtered,
   curPath,
@@ -66,7 +71,8 @@ const ProfileIcicleGraph = ({
       return ['0', '0', false, '0', '0', false, '0', '0'];
     }
 
-    const trimmed = graph.trimmed;
+    // const trimmed = graph.trimmed;
+    const trimmed = 0n;
 
     const totalUnfiltered = total + filtered;
     // safeguard against division by zero
@@ -101,7 +107,7 @@ const ProfileIcicleGraph = ({
     );
   }, [setNewCurPath, curPath, setActionButtons]);
 
-  if (graph === undefined) return <div>no data...</div>;
+  if (graph === undefined && table === undefined) return <div>no data...</div>;
 
   if (total === 0n && !loading) return <>Profile has no samples</>;
 
@@ -113,16 +119,30 @@ const ProfileIcicleGraph = ({
     <div className="relative">
       {compareMode && <DiffLegend />}
       <div ref={ref}>
-        <IcicleGraph
-          width={dimensions?.width}
-          graph={graph}
-          total={total}
-          filtered={filtered}
-          curPath={curPath}
-          setCurPath={setNewCurPath}
-          sampleUnit={sampleUnit}
-          navigateTo={navigateTo}
-        />
+        {graph !== undefined && (
+          <IcicleGraph
+            width={dimensions?.width}
+            graph={graph}
+            total={total}
+            filtered={filtered}
+            curPath={curPath}
+            setCurPath={setNewCurPath}
+            sampleUnit={sampleUnit}
+            navigateTo={navigateTo}
+          />
+        )}
+        {table !== undefined && (
+          <IcicleGraphArrow
+            width={dimensions?.width}
+            table={table}
+            total={total}
+            filtered={filtered}
+            curPath={curPath}
+            setCurPath={setNewCurPath}
+            sampleUnit={sampleUnit}
+            navigateTo={navigateTo}
+          />
+        )}
       </div>
       <p className="my-2 text-xs">
         Showing {totalFormatted}{' '}

package/src/ProfileView/index.tsx

@@ -13,6 +13,7 @@
 
 import {Profiler, ProfilerProps, useEffect, useMemo, useState} from 'react';
 
+import {Table} from 'apache-arrow';
 import cx from 'classnames';
 import {scaleLinear} from 'd3';
 import graphviz from 'graphviz-wasm';
@@ -53,6 +54,7 @@ type NavigateFunction = (path: string, queryParams: any, options?: {replace?: bo
 export interface FlamegraphData {
   loading: boolean;
   data?: Flamegraph;
+  table?: Table<any>;
   total?: bigint;
   filtered?: bigint;
   error?: any;
@@ -230,7 +232,7 @@ export const ProfileView = ({
   }): JSX.Element => {
     switch (type) {
       case 'icicle': {
-        return flamegraphData?.data != null ? (
+        return flamegraphData?.table !== undefined || flamegraphData.data !== undefined ? (
           <ConditionalWrapper<ProfilerProps>
             condition={perf?.onRender != null}
             WrapperComponent={Profiler}
@@ -242,6 +244,7 @@ export const ProfileView = ({
             <ProfileIcicleGraph
               curPath={curPath}
               setNewCurPath={setNewCurPath}
+              table={flamegraphData.table}
               graph={flamegraphData.data}
               total={total}
               filtered={filtered}

package/src/ProfileViewWithData.tsx

@@ -13,9 +13,11 @@
 
 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';
-import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
+import {USER_PREFERENCES, useUIFeatureFlag, useUserPreference} from '@parca/hooks';
 import {saveAsBlob, type NavigateFunction} from '@parca/utilities';
 
 import {ProfileSource} from './ProfileSource';
@@ -38,6 +40,7 @@ export const ProfileViewWithData = ({
   const metadata = useGrpcMetadata();
   const [dashboardItems] = useURLState({param: 'dashboard_items', navigateTo});
   const [enableTrimming] = useUserPreference<boolean>(USER_PREFERENCES.ENABLE_GRAPH_TRIMMING.key);
+  const [arrowFlamegraphEnabled] = useUIFeatureFlag('flamegraph-arrow');
   const [pprofDownloading, setPprofDownloading] = useState<boolean>(false);
 
   const nodeTrimThreshold = useMemo(() => {
@@ -53,11 +56,15 @@ export const ProfileViewWithData = ({
     return (1 / width) * 100;
   }, [enableTrimming]);
 
+  const reportType = arrowFlamegraphEnabled
+    ? QueryRequest_ReportType.FLAMEGRAPH_ARROW
+    : QueryRequest_ReportType.FLAMEGRAPH_TABLE;
+
   const {
     isLoading: flamegraphLoading,
     response: flamegraphResponse,
     error: flamegraphError,
-  } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_TABLE, {
+  } = useQuery(queryClient, profileSource, reportType, {
     skip: !dashboardItems.includes('icicle'),
     nodeTrimThreshold,
   });
@@ -80,16 +87,19 @@ export const ProfileViewWithData = ({
   });
 
   useEffect(() => {
-    if (!flamegraphLoading && flamegraphResponse?.report.oneofKind === 'flamegraph') {
-      perf?.markInteraction('Flamegraph render', flamegraphResponse.report.flamegraph.total);
+    if (
+      (!flamegraphLoading && flamegraphResponse?.report.oneofKind === 'flamegraph') ||
+      flamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+    ) {
+      perf?.markInteraction('Flamegraph render', flamegraphResponse.total);
     }
 
     if (!topTableLoading && topTableResponse?.report.oneofKind === 'top') {
-      perf?.markInteraction('Top table render', topTableResponse?.report?.top.total);
+      perf?.markInteraction('Top table render', topTableResponse.total);
     }
 
     if (!callgraphLoading && callgraphResponse?.report.oneofKind === 'callgraph') {
-      perf?.markInteraction('Callgraph render', callgraphResponse?.report?.callgraph.cumulative);
+      perf?.markInteraction('Callgraph render', callgraphResponse.total);
     }
   }, [
     flamegraphLoading,
@@ -144,6 +154,10 @@ export const ProfileViewWithData = ({
           flamegraphResponse?.report.oneofKind === 'flamegraph'
             ? flamegraphResponse?.report?.flamegraph
             : undefined,
+        table:
+          flamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+            ? tableFromIPC(flamegraphResponse?.report?.flamegraphArrow.record)
+            : undefined,
         total: BigInt(flamegraphResponse?.total ?? '0'),
         filtered: BigInt(flamegraphResponse?.filtered ?? '0'),
         error: flamegraphError,