@parca/profile 0.19.25 → 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;
+}