@parca/profile 0.19.25 → 0.19.27

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/ProfileFilters/filterPresets.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import type {ProfileFilter} from '@parca/store';
+import type {ProfileFilter} from './useProfileFilters';
 
 export interface FilterPreset {
   key: string;
@@ -67,8 +67,10 @@ export const filterPresets: FilterPreset[] = [
   },
 ];
 
+const presetKeys = new Set(filterPresets.map(preset => preset.key));
+
 export const isPresetKey = (key: string): boolean => {
-  return filterPresets.some(preset => preset.key === key);
+  return presetKeys.has(key);
 };
 
 export const getPresetByKey = (key: string): FilterPreset | undefined => {

package/src/ProfileView/components/ProfileFilters/useProfileFilters.ts

@@ -11,21 +11,20 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useCallback, useEffect, useMemo} from 'react';
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
 import {type Filter} from '@parca/client';
-import {
-  selectLocalFilters,
-  setLocalFilters,
-  useAppDispatch,
-  useAppSelector,
-  type ProfileFilter,
-} from '@parca/store';
-
-import {getPresetByKey, isPresetKey, type FilterPreset} from './filterPresets';
+
+import {getPresetByKey, isPresetKey} from './filterPresets';
 import {useProfileFiltersUrlState} from './useProfileFiltersUrlState';
 
-export type {ProfileFilter};
+export interface ProfileFilter {
+  id: string;
+  type?: 'stack' | 'frame' | string; // string allows preset keys
+  field?: 'function_name' | 'binary' | 'system_name' | 'filename' | 'address' | 'line_number';
+  matchType?: 'equal' | 'not_equal' | 'contains' | 'not_contains';
+  value: string;
+}
 
 // Convert ProfileFilter[] to protobuf Filter[] matching the expected structure
 export const convertToProtoFilters = (profileFilters: ProfileFilter[]): Filter[] => {
@@ -41,6 +40,7 @@ export const convertToProtoFilters = (profileFilters: ProfileFilter[]): Filter[]
           expandedFilters.push({
             ...presetFilter,
             id: `${filter.id}-expanded-${index}`,
+            value: presetFilter.value,
           });
         });
       }
@@ -142,36 +142,41 @@ export const useProfileFilters = (): {
   removeFilter: (id: string) => void;
   updateFilter: (id: string, updates: Partial<ProfileFilter>) => void;
   resetFilters: () => void;
-  applyPreset: (preset: FilterPreset) => void;
 } => {
   const {appliedFilters, setAppliedFilters} = useProfileFiltersUrlState();
-  const dispatch = useAppDispatch();
-  const localFilters = useAppSelector(selectLocalFilters);
+
+  const [localFilters, setLocalFilters] = useState<ProfileFilter[]>([]);
+
+  const lastAppliedFiltersRef = useRef<ProfileFilter[]>([]);
+
+  const localFiltersRef = useRef<ProfileFilter[]>(localFilters);
+  localFiltersRef.current = localFilters;
 
   useEffect(() => {
-    if (appliedFilters != null && appliedFilters.length > 0) {
-      // Check if they're different to avoid unnecessary updates
-      const areFiltersEqual =
-        appliedFilters.length === localFilters.length &&
-        appliedFilters.every((applied, index) => {
-          const local = localFilters[index];
-          return (
-            local != null &&
-            applied.type === local.type &&
-            applied.field === local.field &&
-            applied.matchType === local.matchType &&
-            applied.value === local.value
-          );
-        });
+    const currentApplied = appliedFilters ?? [];
+    const lastApplied = lastAppliedFiltersRef.current;
+
+    // Check if appliedFilters actually changed (avoid circular updates)
+    const appliedChanged =
+      currentApplied.length !== lastApplied.length ||
+      currentApplied.some((applied, index) => {
+        const last = lastApplied[index];
+        return (
+          last == null ||
+          applied.type !== last.type ||
+          applied.field !== last.field ||
+          applied.matchType !== last.matchType ||
+          applied.value !== last.value
+        );
+      });
 
-      if (!areFiltersEqual) {
-        dispatch(setLocalFilters(appliedFilters));
-      }
-    } else if (appliedFilters != null && appliedFilters.length === 0 && localFilters.length > 0) {
-      dispatch(setLocalFilters([]));
+    if (!appliedChanged) {
+      return;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+
+    lastAppliedFiltersRef.current = currentApplied;
+    setLocalFilters(currentApplied);
+  }, [appliedFilters]);
 
   const hasUnsavedChanges = useMemo(() => {
     const localWithValues = localFilters.filter(f => {
@@ -210,8 +215,8 @@ export const useProfileFilters = (): {
       id: `filter-${Date.now()}-${Math.random()}`,
       value: '',
     };
-    dispatch(setLocalFilters([...localFilters, newFilter]));
-  }, [dispatch, localFilters]);
+    setLocalFilters([...localFiltersRef.current, newFilter]);
+  }, []);
 
   const excludeBinary = useCallback(
     (binaryName: string) => {
@@ -235,13 +240,14 @@ export const useProfileFilters = (): {
         matchType: 'not_contains',
         value: binaryName,
       };
-      dispatch(setLocalFilters([...localFilters, newFilter]));
+      setLocalFilters([...localFiltersRef.current, newFilter]);
 
       // Auto-apply the filter since it has a value
       const filtersToApply = [...(appliedFilters ?? []), newFilter];
       setAppliedFilters(filtersToApply);
     },
-    [appliedFilters, setAppliedFilters, dispatch, localFilters]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setAppliedFilters]
   );
 
   const removeExcludeBinary = useCallback(
@@ -263,34 +269,27 @@ export const useProfileFilters = (): {
         setAppliedFilters(updatedAppliedFilters);
 
         // Also remove from local filters
-        const updatedLocalFilters = localFilters.filter(f => f.id !== filterToRemove.id);
-        dispatch(setLocalFilters(updatedLocalFilters));
+        setLocalFilters(localFiltersRef.current.filter(f => f.id !== filterToRemove.id));
       }
     },
-    [appliedFilters, setAppliedFilters, dispatch, localFilters]
+    [appliedFilters, setAppliedFilters]
   );
 
-  const removeFilter = useCallback(
-    (id: string) => {
-      dispatch(setLocalFilters(localFilters.filter(f => f.id !== id)));
-    },
-    [dispatch, localFilters]
-  );
+  const removeFilter = useCallback((id: string) => {
+    setLocalFilters(localFiltersRef.current.filter(f => f.id !== id));
+  }, []);
 
-  const updateFilter = useCallback(
-    (id: string, updates: Partial<ProfileFilter>) => {
-      dispatch(setLocalFilters(localFilters.map(f => (f.id === id ? {...f, ...updates} : f))));
-    },
-    [dispatch, localFilters]
-  );
+  const updateFilter = useCallback((id: string, updates: Partial<ProfileFilter>) => {
+    setLocalFilters(localFiltersRef.current.map(f => (f.id === id ? {...f, ...updates} : f)));
+  }, []);
 
   const resetFilters = useCallback(() => {
-    dispatch(setLocalFilters([]));
+    setLocalFilters([]);
     setAppliedFilters([]);
-  }, [dispatch, setAppliedFilters]);
+  }, [setAppliedFilters]);
 
   const onApplyFilters = useCallback((): void => {
-    const validFilters = localFilters.filter(f => {
+    const validFilters = localFiltersRef.current.filter(f => {
       // For preset filters, only need type and value
       if (f.type != null && isPresetKey(f.type)) {
         return f.value !== '' && f.type != null;
@@ -305,29 +304,12 @@ export const useProfileFilters = (): {
     }));
 
     setAppliedFilters(filtersToApply);
-  }, [localFilters, setAppliedFilters]);
+  }, [setAppliedFilters]);
 
   const protoFilters = useMemo(() => {
     return convertToProtoFilters(appliedFilters ?? []);
   }, [appliedFilters]);
 
-  const applyPreset = useCallback(
-    (preset: FilterPreset) => {
-      const presetFilter: ProfileFilter = {
-        id: `filter-preset-${Date.now()}`,
-        type: preset.key,
-        value: preset.name,
-      };
-
-      // Add preset filter to existing filters
-      const updatedFilters = [...localFilters, presetFilter];
-      dispatch(setLocalFilters(updatedFilters));
-
-      setAppliedFilters(updatedFilters);
-    },
-    [dispatch, setAppliedFilters, localFilters]
-  );
-
   return {
     localFilters,
     appliedFilters,
@@ -340,6 +322,5 @@ export const useProfileFilters = (): {
     removeFilter,
     updateFilter,
     resetFilters,
-    applyPreset,
   };
 };

package/src/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.ts

@@ -12,9 +12,9 @@
 // limitations under the License.
 
 import {useURLStateCustom, type ParamValueSetterCustom} from '@parca/components';
-import {type ProfileFilter} from '@parca/store';
 
 import {isPresetKey} from './filterPresets';
+import {type ProfileFilter} from './useProfileFilters';
 
 // Compact encoding mappings
 const TYPE_MAP: Record<string, string> = {

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

@@ -154,7 +154,7 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
 
   return (
     <>
-      <div className="flex w-full justify-between items-end">
+      <div className="flex w-full justify-between items-end gap-2">
         <div className="flex gap-2 items-end">
           {isGraphViz && (
             <>

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

@@ -88,7 +88,7 @@ const ViewSelector = ({profileSource}: Props): JSX.Element => {
     supportingText?: string;
   }): DropdownElement => {
     const title = (
-      <span className="capitalize">
+      <span className="capitalize whitespace-nowrap">
         {typeof label === 'string' ? label.replaceAll('-', ' ') : label}
       </span>
     );