@parca/profile 0.19.24 → 0.19.26

package/src/ProfileFlameGraph/FlameGraphArrow/useScrollViewport.ts

@@ -0,0 +1,89 @@
+// 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 {useCallback, useEffect, useRef, useState} from 'react';
+
+export interface ViewportState {
+  scrollTop: number;
+  scrollLeft: number;
+  containerHeight: number;
+  containerWidth: number;
+}
+
+export const useScrollViewport = (containerRef: React.RefObject<HTMLDivElement>): ViewportState => {
+  const [viewport, setViewport] = useState<ViewportState>({
+    scrollTop: 0,
+    scrollLeft: 0,
+    containerHeight: 0,
+    containerWidth: 0,
+  });
+
+  const throttleRef = useRef<number | null>(null);
+
+  const updateViewport = useCallback(() => {
+    if (containerRef.current !== null) {
+      const container = containerRef.current;
+
+      const newViewport = {
+        scrollTop: container.scrollTop,
+        scrollLeft: container.scrollLeft,
+        containerHeight: container.clientHeight,
+        containerWidth: container.clientWidth,
+      };
+
+      setViewport(newViewport);
+    }
+  }, [containerRef]);
+
+  // Throttling Strategy:
+  // Use requestAnimationFrame to throttle scroll events to 60fps max
+  // This ensures smooth performance while preventing excessive re-renders
+  const throttledUpdateViewport = useCallback(() => {
+    if (throttleRef.current !== null) {
+      cancelAnimationFrame(throttleRef.current);
+    }
+    throttleRef.current = requestAnimationFrame(updateViewport);
+  }, [updateViewport]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container === null) return;
+
+    // ResizeObserver Strategy:
+    // Monitor container size changes (window resize, layout shifts)
+    // to update viewport dimensions for accurate culling calculations
+    const resizeObserver = new ResizeObserver(() => {
+      throttledUpdateViewport();
+    });
+
+    // Container Scroll Event Strategy:
+    // Use passive event listeners for better scroll performance
+    // Throttle with requestAnimationFrame to maintain 60fps target
+    container.addEventListener('scroll', throttledUpdateViewport, {passive: true});
+    resizeObserver.observe(container);
+
+    // Initialize viewport state on mount
+    updateViewport();
+
+    return () => {
+      // Cleanup: Remove event listeners and cancel pending animations
+      container.removeEventListener('scroll', throttledUpdateViewport);
+      resizeObserver.disconnect();
+      if (throttleRef.current !== null) {
+        cancelAnimationFrame(throttleRef.current);
+      }
+    };
+  }, [containerRef, throttledUpdateViewport, updateViewport]);
+
+  return viewport;
+};

package/src/ProfileFlameGraph/FlameGraphArrow/useVisibleNodes.ts

@@ -0,0 +1,167 @@
+// 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 {useMemo, useRef} from 'react';
+
+import {Table} from 'apache-arrow';
+
+import {RowHeight} from './FlameGraphNodes';
+import {FIELD_CUMULATIVE, FIELD_DEPTH, FIELD_VALUE_OFFSET} from './index';
+import {ViewportState} from './useScrollViewport';
+import {getMaxDepth} from './utils';
+
+/**
+ * This function groups rows by their depth level.
+ * Instead of scanning all rows to find depth matches, we pre-compute
+ * buckets so viewport rendering only examines depth ranges that are relevant.
+ */
+const useDepthBuckets = <TRow extends Record<string, any>>(
+  table: Table<TRow> | undefined
+): number[][] => {
+  return useMemo(() => {
+    if (table === undefined) return [];
+
+    const depthColumn = table.getChild(FIELD_DEPTH);
+    if (depthColumn === null) return [];
+
+    // Find max depth
+    const maxDepth = getMaxDepth(depthColumn);
+
+    // Create buckets for each depth level
+    const buckets: number[][] = Array.from({length: maxDepth + 1}, () => []);
+
+    // Populate buckets with row indices
+    for (let row = 0; row < table.numRows; row++) {
+      const depth = depthColumn.get(row) ?? 0;
+      buckets[depth].push(row);
+    }
+
+    return buckets;
+  }, [table]);
+};
+
+export interface UseVisibleNodesParams {
+  table: Table<any>;
+  viewport: ViewportState;
+  total: bigint;
+  width: number;
+  selectedRow: number;
+  effectiveDepth: number;
+}
+
+/**
+ * useVisibleNodes returns row indices visible in the current viewport through multi-stage culling.
+ * Combines depth buckets, horizontal bounds checking, and size filtering to
+ * minimize rendered nodes from potentially 100K+ rows to ~hundreds.
+ *
+ * We use depth buckets to only iterate through the rows that are visible in the viewport vertically.
+ * After that we use horizontal bounds checking to only iterate through the rows that are visible in the viewport horizontally.
+ * Finally we use size filtering to only iterate through the rows that are visible in the viewport by size.
+ *
+ * Critical for maintaining 60fps performance on large flamegraphs where
+ * rendering all nodes would freeze the browser.
+ */
+export const useVisibleNodes = ({
+  table,
+  viewport,
+  total,
+  width,
+  selectedRow,
+  effectiveDepth,
+}: UseVisibleNodesParams): number[] => {
+  const depthBuckets = useDepthBuckets(table);
+  const lastResultRef = useRef<{
+    key: string;
+    result: number[];
+  }>({key: '', result: []});
+
+  return useMemo(() => {
+    // Create a stable key for memoization to prevent unnecessary recalculations
+    const memoKey = `${viewport.scrollTop}-${viewport.containerHeight}-${selectedRow}-${effectiveDepth}-${width}`;
+
+    // Return cached result if viewport hasn't meaningfully changed
+    if (lastResultRef.current.key === memoKey) {
+      return lastResultRef.current.result;
+    }
+
+    if (table === null || viewport.containerHeight === 0) return [];
+
+    const visibleRows: number[] = [];
+    const {scrollTop, containerHeight} = viewport;
+
+    // Viewport Culling Algorithm:
+    // 1. Calculate visible depth range based on scroll position and container height
+    // 2. Add 5-row buffer above/below for smooth scrolling experience
+    const startDepth = Math.max(0, Math.floor(scrollTop / RowHeight) - 5);
+    const endDepth = Math.min(
+      effectiveDepth,
+      Math.ceil((scrollTop + containerHeight) / RowHeight) + 5
+    );
+
+    const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
+    const valueOffsetColumn = table.getChild(FIELD_VALUE_OFFSET);
+
+    const selectionOffset =
+      valueOffsetColumn?.get(selectedRow) !== null &&
+      valueOffsetColumn?.get(selectedRow) !== undefined
+        ? BigInt(valueOffsetColumn?.get(selectedRow))
+        : 0n;
+    const selectionCumulative =
+      cumulativeColumn?.get(selectedRow) !== null ? BigInt(cumulativeColumn?.get(selectedRow)) : 0n;
+
+    const totalNumber = Number(total);
+    const selectionOffsetNumber = Number(selectionOffset);
+    const selectionCumulativeNumber = Number(selectionCumulative);
+
+    // Iterate only through visible depth range instead of all rows
+    for (let depth = startDepth; depth <= endDepth && depth < depthBuckets.length; depth++) {
+      // Skip if depth is beyond effective depth limit
+      if (effectiveDepth !== undefined && depth > effectiveDepth) {
+        continue;
+      }
+
+      const rowsAtDepth = depthBuckets[depth];
+
+      for (const row of rowsAtDepth) {
+        const cumulative =
+          cumulativeColumn?.get(row) !== null ? Number(cumulativeColumn?.get(row)) : 0;
+
+        const valueOffset =
+          valueOffsetColumn?.get(row) !== null && valueOffsetColumn?.get(row) !== undefined
+            ? Number(valueOffsetColumn?.get(row))
+            : 0;
+
+        // Horizontal culling: Skip nodes outside selection bounds
+        if (
+          valueOffset + cumulative <= selectionOffsetNumber ||
+          valueOffset >= selectionOffsetNumber + selectionCumulativeNumber
+        ) {
+          continue;
+        }
+
+        // Size culling: Skip nodes too small to be visible (< 1px width)
+        const computedWidth = (cumulative / totalNumber) * width;
+        if (computedWidth <= 1) {
+          continue;
+        }
+
+        visibleRows.push(row);
+      }
+    }
+
+    // Cache the result with the current key
+    lastResultRef.current = {key: memoKey, result: visibleRows};
+
+    return visibleRows;
+  }, [depthBuckets, viewport, total, width, selectedRow, effectiveDepth, table]);
+};

package/src/ProfileFlameGraph/FlameGraphArrow/utils.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Table} from 'apache-arrow';
+import {Table, Vector} from 'apache-arrow';
 
 import {
   BINARY_FEATURE_TYPES,
@@ -203,3 +203,14 @@ export function isCurrentPathFrameMatch(
     a.labels === b.labels
   );
 }
+
+export function getMaxDepth(depthColumn: Vector<any> | null): number {
+  if (depthColumn === null) return 0;
+
+  let max = 0;
+  for (const val of depthColumn) {
+    const numVal = Number(val);
+    if (numVal > max) max = numVal;
+  }
+  return max;
+}

package/src/ProfileView/components/ColorStackLegend.tsx

@@ -50,8 +50,6 @@ const ColorStackLegend = ({mappings, compareMode = false, loading}: Props): Reac
       .map(f => f.value);
   }, [appliedFilters]);
 
-  console.log('currentBinaryFilters', currentBinaryFilters);
-
   const mappingsList = useMappingList(mappings);
 
   const mappingColors = useMemo(() => {

package/src/ProfileView/components/DashboardItems/index.tsx

@@ -24,6 +24,7 @@ import {SourceView} from '../../../SourceView';
 import {Table} from '../../../Table';
 import type {
   FlamegraphData,
+  SandwichData,
   SourceData,
   TopTableData,
   VisualizationType,
@@ -36,6 +37,7 @@ interface GetDashboardItemProps {
   flamegraphData: FlamegraphData;
   flamechartData: FlamegraphData;
   topTableData?: TopTableData;
+  sandwichData: SandwichData;
   sourceData?: SourceData;
   profileSource: ProfileSource;
   total: bigint;
@@ -58,13 +60,13 @@ export const getDashboardItem = ({
   flamechartData,
   topTableData,
   sourceData,
+  sandwichData,
   profileSource,
   total,
   filtered,
   curPathArrow,
   setNewCurPathArrow,
   perf,
-  queryClient,
 }: GetDashboardItemProps): JSX.Element => {
   switch (type) {
     case 'flamegraph':
@@ -142,17 +144,7 @@ export const getDashboardItem = ({
       );
     case 'sandwich':
       return topTableData != null ? (
-        <Sandwich
-          total={total}
-          filtered={filtered}
-          loading={topTableData.loading}
-          data={topTableData.arrow?.record}
-          unit={topTableData.unit}
-          profileType={profileSource?.ProfileType()}
-          metadataMappingFiles={flamegraphData.metadataMappingFiles}
-          profileSource={profileSource}
-          queryClient={queryClient}
-        />
+        <Sandwich profileSource={profileSource} sandwichData={sandwichData} />
       ) : (
         <></>
       );

package/src/ProfileView/index.tsx

@@ -44,6 +44,7 @@ export const ProfileView = ({
   pprofDownloading,
   compare,
   showVisualizationSelector,
+  sandwichData,
 }: ProfileViewProps): JSX.Element => {
   const {
     timezone,
@@ -88,6 +89,7 @@ export const ProfileView = ({
     isHalfScreen: boolean;
   }): JSX.Element => {
     return getDashboardItem({
+      sandwichData,
       type,
       isHalfScreen,
       dimensions,

package/src/ProfileView/types/visualization.ts

@@ -11,20 +11,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {
-  Callgraph as CallgraphType,
-  Flamegraph,
-  FlamegraphArrow,
-  QueryServiceClient,
-  Source,
-  TableArrow,
-} from '@parca/client';
+import {FlamegraphArrow, QueryServiceClient, Source, TableArrow} from '@parca/client';
 
 import {ProfileSource} from '../../ProfileSource';
 
 export interface FlamegraphData {
   loading: boolean;
-  data?: Flamegraph;
   arrow?: FlamegraphArrow;
   total?: bigint;
   filtered?: bigint;
@@ -43,20 +35,17 @@ export interface TopTableData {
   unit?: string;
 }
 
-export interface CallgraphData {
-  loading: boolean;
-  data?: CallgraphType;
-  total?: bigint;
-  filtered?: bigint;
-  error?: any;
-}
-
 export interface SourceData {
   loading: boolean;
   data?: Source;
   error?: any;
 }
 
+export interface SandwichData {
+  callees: FlamegraphData;
+  callers: FlamegraphData;
+}
+
 export type VisualizationType =
   | 'flamegraph'
   | 'callgraph'
@@ -70,8 +59,8 @@ export interface ProfileViewProps {
   filtered: bigint;
   flamegraphData: FlamegraphData;
   flamechartData: FlamegraphData;
+  sandwichData: SandwichData;
   topTableData?: TopTableData;
-  callgraphData?: CallgraphData;
   sourceData?: SourceData;
   profileSource: ProfileSource;
   queryClient?: QueryServiceClient;

package/src/ProfileViewWithData.tsx

@@ -47,6 +47,7 @@ export const ProfileViewWithData = ({
     defaultValue: [FIELD_FUNCTION_NAME],
     alwaysReturnArray: true,
   });
+  const [sandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
 
   const [invertStack] = useURLState('invert_call_stack');
   const invertCallStack = invertStack === 'true';
@@ -131,15 +132,6 @@ export const ProfileViewWithData = ({
     protoFilters,
   });
 
-  const {
-    isLoading: callgraphLoading,
-    response: callgraphResponse,
-    error: callgraphError,
-  } = useQuery(queryClient, profileSource, QueryRequest_ReportType.CALLGRAPH, {
-    skip: !dashboardItems.includes('callgraph'),
-    protoFilters,
-  });
-
   const {
     isLoading: sourceLoading,
     response: sourceResponse,
@@ -151,6 +143,32 @@ export const ProfileViewWithData = ({
     protoFilters,
   });
 
+  const {
+    isLoading: callersFlamegraphLoading,
+    response: callersFlamegraphResponse,
+    error: callersFlamegraphError,
+  } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
+    nodeTrimThreshold,
+    groupBy: [FIELD_FUNCTION_NAME],
+    invertCallStack: true,
+    sandwichByFunction: sandwichFunctionName,
+    skip: sandwichFunctionName === undefined && !dashboardItems.includes('sandwich'),
+    protoFilters,
+  });
+
+  const {
+    isLoading: calleesFlamegraphLoading,
+    response: calleesFlamegraphResponse,
+    error: calleesFlamegraphError,
+  } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
+    nodeTrimThreshold,
+    groupBy: [FIELD_FUNCTION_NAME],
+    invertCallStack: false,
+    sandwichByFunction: sandwichFunctionName,
+    skip: sandwichFunctionName === undefined && !dashboardItems.includes('sandwich'),
+    protoFilters,
+  });
+
   useEffect(() => {
     if (
       (!flamegraphLoading && flamegraphResponse?.report.oneofKind === 'flamegraph') ||
@@ -163,18 +181,12 @@ export const ProfileViewWithData = ({
       perf?.markInteraction('table render', tableResponse.total);
     }
 
-    if (!callgraphLoading && callgraphResponse?.report.oneofKind === 'callgraph') {
-      perf?.markInteraction('Callgraph render', callgraphResponse.total);
-    }
-
     if (!sourceLoading && sourceResponse?.report.oneofKind === 'source') {
       perf?.markInteraction('Source render', sourceResponse.total);
     }
   }, [
     flamegraphLoading,
     flamegraphResponse,
-    callgraphResponse,
-    callgraphLoading,
     tableLoading,
     tableResponse,
     sourceLoading,
@@ -210,15 +222,18 @@ export const ProfileViewWithData = ({
   } else if (tableResponse !== null) {
     total = BigInt(tableResponse.total);
     filtered = BigInt(tableResponse.filtered);
-  } else if (callgraphResponse !== null) {
-    total = BigInt(callgraphResponse.total);
-    filtered = BigInt(callgraphResponse.filtered);
   } else if (sourceResponse !== null) {
     total = BigInt(sourceResponse.total);
     filtered = BigInt(sourceResponse.filtered);
   } else if (flamechartResponse !== null) {
     total = BigInt(flamechartResponse.total);
     filtered = BigInt(flamechartResponse.filtered);
+  } else if (callersFlamegraphResponse !== null) {
+    total = BigInt(callersFlamegraphResponse.total);
+    filtered = BigInt(callersFlamegraphResponse.filtered);
+  } else if (calleesFlamegraphResponse !== null) {
+    total = BigInt(calleesFlamegraphResponse.total);
+    filtered = BigInt(calleesFlamegraphResponse.filtered);
   }
 
   return (
@@ -227,10 +242,6 @@ export const ProfileViewWithData = ({
       filtered={filtered}
       flamegraphData={{
         loading: flamegraphLoading && profileMetadataLoading,
-        data:
-          flamegraphResponse?.report.oneofKind === 'flamegraph'
-            ? flamegraphResponse?.report?.flamegraph
-            : undefined,
         arrow:
           flamegraphResponse?.report.oneofKind === 'flamegraphArrow'
             ? flamegraphResponse?.report?.flamegraphArrow
@@ -279,14 +290,6 @@ export const ProfileViewWithData = ({
             ? tableResponse.report.tableArrow.unit
             : '',
       }}
-      callgraphData={{
-        loading: callgraphLoading,
-        data:
-          callgraphResponse?.report.oneofKind === 'callgraph'
-            ? callgraphResponse?.report?.callgraph
-            : undefined,
-        error: callgraphError,
-      }}
       sourceData={{
         loading: sourceLoading,
         data:
@@ -295,6 +298,38 @@ export const ProfileViewWithData = ({
             : undefined,
         error: sourceError,
       }}
+      sandwichData={{
+        callees: {
+          arrow:
+            calleesFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+              ? calleesFlamegraphResponse?.report?.flamegraphArrow
+              : undefined,
+          loading: calleesFlamegraphLoading,
+          error: calleesFlamegraphError,
+          total: BigInt(calleesFlamegraphResponse?.total ?? '0'),
+          filtered: BigInt(calleesFlamegraphResponse?.filtered ?? '0'),
+          metadataMappingFiles:
+            profileMetadataResponse?.report.oneofKind === 'profileMetadata'
+              ? profileMetadataResponse?.report?.profileMetadata?.mappingFiles
+              : undefined,
+          metadataLoading: profileMetadataLoading,
+        },
+        callers: {
+          arrow:
+            callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+              ? callersFlamegraphResponse?.report?.flamegraphArrow
+              : undefined,
+          loading: callersFlamegraphLoading,
+          error: callersFlamegraphError,
+          total: BigInt(callersFlamegraphResponse?.total ?? '0'),
+          filtered: BigInt(callersFlamegraphResponse?.filtered ?? '0'),
+          metadataMappingFiles:
+            profileMetadataResponse?.report.oneofKind === 'profileMetadata'
+              ? profileMetadataResponse?.report?.profileMetadata?.mappingFiles
+              : undefined,
+          metadataLoading: profileMetadataLoading,
+        },
+      }}
       profileSource={profileSource}
       queryClient={queryClient}
       onDownloadPProf={() => void downloadPProfClick()}

package/src/Sandwich/components/CalleesSection.tsx

@@ -13,24 +13,14 @@
 
 import React from 'react';
 
-import {type FlamegraphArrow} from '@parca/client';
-
 import ProfileFlameGraph from '../../ProfileFlameGraph';
 import {type CurrentPathFrame} from '../../ProfileFlameGraph/FlameGraphArrow/utils';
 import {type ProfileSource} from '../../ProfileSource';
+import {FlamegraphData} from '../../ProfileView/types/visualization';
 
 interface CalleesSectionProps {
   calleesRef: React.RefObject<HTMLDivElement>;
-  calleesFlamegraphResponse?: {
-    report: {
-      oneofKind: string;
-      flamegraphArrow?: FlamegraphArrow;
-    };
-    total?: string;
-  };
-  calleesFlamegraphLoading: boolean;
-  calleesFlamegraphError: any;
-  filtered: bigint;
+  calleesFlamegraphData: FlamegraphData;
   profileSource: ProfileSource;
   curPathArrow: CurrentPathFrame[];
   setCurPathArrow: (path: CurrentPathFrame[]) => void;
@@ -39,14 +29,10 @@ interface CalleesSectionProps {
 
 export function CalleesSection({
   calleesRef,
-  calleesFlamegraphResponse,
-  calleesFlamegraphLoading,
-  calleesFlamegraphError,
-  filtered,
+  calleesFlamegraphData,
   profileSource,
   curPathArrow,
   setCurPathArrow,
-  metadataMappingFiles,
 }: CalleesSectionProps): JSX.Element {
   return (
     <div className="flex relative items-start flex-row" ref={calleesRef}>
@@ -54,22 +40,18 @@ export function CalleesSection({
         {'<-'} Callees
       </div>
       <ProfileFlameGraph
-        arrow={
-          calleesFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
-            ? calleesFlamegraphResponse?.report?.flamegraphArrow
-            : undefined
-        }
-        total={BigInt(calleesFlamegraphResponse?.total ?? '0')}
-        filtered={filtered}
+        arrow={calleesFlamegraphData?.arrow}
+        total={calleesFlamegraphData.total ?? BigInt(0)}
+        filtered={calleesFlamegraphData.filtered ?? BigInt(0)}
         profileType={profileSource?.ProfileType()}
-        loading={calleesFlamegraphLoading}
-        error={calleesFlamegraphError}
+        loading={calleesFlamegraphData.loading}
+        error={calleesFlamegraphData.error}
         isHalfScreen={true}
         width={
           calleesRef.current != null ? calleesRef.current.getBoundingClientRect().width - 25 : 0
         }
-        metadataMappingFiles={metadataMappingFiles}
-        metadataLoading={false}
+        metadataMappingFiles={calleesFlamegraphData.metadataMappingFiles}
+        metadataLoading={calleesFlamegraphData.metadataLoading}
         isInSandwichView={true}
         curPathArrow={curPathArrow}
         setNewCurPathArrow={setCurPathArrow}