@parca/profile 0.19.24 → 0.19.26

package/src/ProfileFlameGraph/FlameGraphArrow/FlameGraphNodes.tsx

@@ -77,212 +77,226 @@ export const fadedFlameRectStyles = {
   opacity: '0.5',
 };
 
-export const FlameNode = React.memo(function FlameNodeNoMemo({
-  table,
-  row,
-  colors,
-  colorBy,
-  height,
-  totalWidth,
-  darkMode,
-  compareMode,
-  colorForSimilarNodes,
-  selectedRow,
-  onClick,
-  onContextMenu,
-  hoveringRow,
-  setHoveringRow,
-  isFlameChart,
-  profileSource,
-  isRenderedAsFlamegraph = false,
-  isInSandwichView = false,
-  maxDepth = 0,
-  effectiveDepth,
-  tooltipId = 'default',
-}: FlameNodeProps): React.JSX.Element {
-  // get the columns to read from
-  const mappingColumn = table.getChild(FIELD_MAPPING_FILE);
-  const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
-  const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
-  const depthColumn = table.getChild(FIELD_DEPTH);
-  const diffColumn = table.getChild(FIELD_DIFF);
-  const filenameColumn = table.getChild(FIELD_FUNCTION_FILE_NAME);
-  const valueOffsetColumn = table.getChild(FIELD_VALUE_OFFSET);
-  const tsColumn = table.getChild(FIELD_TIMESTAMP);
-
-  // get the actual values from the columns
-  const binaries = useAppSelector(selectBinaries);
-
-  const mappingFile: string | null = arrowToString(mappingColumn?.get(row));
-  const functionName: string | null = arrowToString(functionNameColumn?.get(row));
-  const cumulative = cumulativeColumn?.get(row) !== null ? BigInt(cumulativeColumn?.get(row)) : 0n;
-  const diff: bigint | null = diffColumn?.get(row) !== null ? BigInt(diffColumn?.get(row)) : null;
-  const filename: string | null = arrowToString(filenameColumn?.get(row));
-  const depth: number = depthColumn?.get(row) ?? 0;
-
-  const valueOffset: bigint =
-    valueOffsetColumn?.get(row) !== null && valueOffsetColumn?.get(row) !== undefined
-      ? BigInt(valueOffsetColumn?.get(row))
-      : 0n;
-
-  const colorAttribute =
-    colorBy === 'filename' ? filename : colorBy === 'binary' ? mappingFile : null;
-
-  const colorsMap = colors;
-
-  const hoveringName =
-    hoveringRow !== undefined ? arrowToString(functionNameColumn?.get(hoveringRow)) : '';
-  const shouldBeHighlighted =
-    functionName != null && hoveringName != null && functionName === hoveringName;
-
-  const colorResult = useNodeColor({
-    isDarkMode: darkMode,
+export const FlameNode = React.memo(
+  function FlameNodeNoMemo({
+    table,
+    row,
+    colors,
+    colorBy,
+    height,
+    totalWidth,
+    darkMode,
     compareMode,
-    cumulative,
-    diff,
-    colorsMap,
-    colorAttribute,
-  });
-
-  const name = useMemo(() => {
-    return row === 0 ? 'root' : nodeLabel(table, row, binaries.length > 1);
-  }, [table, row, binaries]);
-
-  // Hide frames beyond effective depth limit
-  if (effectiveDepth !== undefined && depth > effectiveDepth) {
-    return <></>;
-  }
-
-  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;
-  if (
-    valueOffset + cumulative <= selectionOffset ||
-    valueOffset >= selectionOffset + selectionCumulative
-  ) {
-    // If the end of the node is before the selection offset or the start of the node is after the selection offset + totalWidth, we don't render it.
-    return <></>;
-  }
-
-  if (row === 0 && (isFlameChart || isInSandwichView)) {
-    // The root node is not rendered in the flame chart or sandwich view, so we return null.
-    return <></>;
-  }
-
-  // Cumulative can be larger than total when a selection is made. All parents of the selection are likely larger, but we want to only show them as 100% in the graph.
-  const tsBounds = boundsFromProfileSource(profileSource);
-  const total = cumulativeColumn?.get(selectedRow);
-  const totalRatio = cumulative > total ? 1 : Number(cumulative) / Number(total);
-  const width: number = isFlameChart
-    ? (Number(cumulative) / (Number(tsBounds[1]) - Number(tsBounds[0]))) * totalWidth
-    : totalRatio * totalWidth;
-
-  if (width <= 1) {
-    return <></>;
-  }
+    colorForSimilarNodes,
+    selectedRow,
+    onClick,
+    onContextMenu,
+    hoveringRow,
+    setHoveringRow,
+    isFlameChart,
+    profileSource,
+    isRenderedAsFlamegraph = false,
+    isInSandwichView = false,
+    maxDepth = 0,
+    effectiveDepth,
+    tooltipId = 'default',
+  }: FlameNodeProps): React.JSX.Element {
+    // get the columns to read from
+    const mappingColumn = table.getChild(FIELD_MAPPING_FILE);
+    const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
+    const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
+    const depthColumn = table.getChild(FIELD_DEPTH);
+    const diffColumn = table.getChild(FIELD_DIFF);
+    const filenameColumn = table.getChild(FIELD_FUNCTION_FILE_NAME);
+    const valueOffsetColumn = table.getChild(FIELD_VALUE_OFFSET);
+    const tsColumn = table.getChild(FIELD_TIMESTAMP);
+
+    // get the actual values from the columns
+    const binaries = useAppSelector(selectBinaries);
+
+    const mappingFile: string | null = arrowToString(mappingColumn?.get(row));
+    const functionName: string | null = arrowToString(functionNameColumn?.get(row));
+    const cumulative =
+      cumulativeColumn?.get(row) !== null ? BigInt(cumulativeColumn?.get(row)) : 0n;
+    const diff: bigint | null = diffColumn?.get(row) !== null ? BigInt(diffColumn?.get(row)) : null;
+    const filename: string | null = arrowToString(filenameColumn?.get(row));
+    const depth: number = depthColumn?.get(row) ?? 0;
+
+    const valueOffset: bigint =
+      valueOffsetColumn?.get(row) !== null && valueOffsetColumn?.get(row) !== undefined
+        ? BigInt(valueOffsetColumn?.get(row))
+        : 0n;
+
+    const colorAttribute =
+      colorBy === 'filename' ? filename : colorBy === 'binary' ? mappingFile : null;
+
+    const colorsMap = colors;
+
+    const hoveringName =
+      hoveringRow !== undefined ? arrowToString(functionNameColumn?.get(hoveringRow)) : '';
+    const shouldBeHighlighted =
+      functionName != null && hoveringName != null && functionName === hoveringName;
+
+    const colorResult = useNodeColor({
+      isDarkMode: darkMode,
+      compareMode,
+      cumulative,
+      diff,
+      colorsMap,
+      colorAttribute,
+    });
+
+    const name = useMemo(() => {
+      return row === 0 ? 'root' : nodeLabel(table, row, binaries.length > 1);
+    }, [table, row, binaries]);
+
+    // Hide frames beyond effective depth limit
+    if (effectiveDepth !== undefined && depth > effectiveDepth) {
+      return <></>;
+    }
 
-  const selectedDepth = depthColumn?.get(selectedRow);
-  const styles =
-    selectedDepth !== undefined && selectedDepth > depth ? fadedFlameRectStyles : flameRectStyles;
+    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;
+    if (
+      valueOffset + cumulative <= selectionOffset ||
+      valueOffset >= selectionOffset + selectionCumulative
+    ) {
+      // If the end of the node is before the selection offset or the start of the node is after the selection offset + totalWidth, we don't render it.
+      return <></>;
+    }
 
-  const onMouseEnter = (): void => {
-    setHoveringRow(row);
-    window.dispatchEvent(
-      new CustomEvent(`flame-tooltip-update-${tooltipId}`, {
-        detail: {row},
-      })
-    );
-  };
-
-  const onMouseLeave = (): void => {
-    setHoveringRow(undefined);
-    window.dispatchEvent(
-      new CustomEvent(`flame-tooltip-update-${tooltipId}`, {
-        detail: {row: null},
-      })
-    );
-  };
-
-  const handleContextMenu = (e: React.MouseEvent): void => {
-    onContextMenu(e, row);
-  };
-
-  const ts = tsColumn !== null ? Number(tsColumn.get(row)) : 0;
-  const x =
-    isFlameChart && tsColumn !== null
-      ? ((ts - Number(tsBounds[0])) / (Number(tsBounds[1]) - Number(tsBounds[0]))) * totalWidth
-      : selectedDepth > depth
-      ? 0
-      : ((Number(valueOffset) - Number(selectionOffset)) / Number(total)) * totalWidth;
-
-  const calculateY = (
-    isRenderedAsFlamegraph: boolean,
-    isInSandwichView: boolean,
-    isFlameChart: boolean,
-    maxDepth: number,
-    depth: number,
-    height: number
-  ): number => {
-    if (isRenderedAsFlamegraph) {
-      return (maxDepth - depth) * height; // Flamegraph is inverted
+    if (row === 0 && (isFlameChart || isInSandwichView)) {
+      // The root node is not rendered in the flame chart or sandwich view, so we return null.
+      return <></>;
     }
 
-    if (isFlameChart || isInSandwichView) {
-      return (depth - 1) * height;
+    // Cumulative can be larger than total when a selection is made. All parents of the selection are likely larger, but we want to only show them as 100% in the graph.
+    const tsBounds = boundsFromProfileSource(profileSource);
+    const total = cumulativeColumn?.get(selectedRow);
+    const totalRatio = cumulative > total ? 1 : Number(cumulative) / Number(total);
+    const width: number = isFlameChart
+      ? (Number(cumulative) / (Number(tsBounds[1]) - Number(tsBounds[0]))) * totalWidth
+      : totalRatio * totalWidth;
+
+    if (width <= 1) {
+      return <></>;
     }
 
-    return depth * height;
-  };
+    const selectedDepth = depthColumn?.get(selectedRow);
+    const styles =
+      selectedDepth !== undefined && selectedDepth > depth ? fadedFlameRectStyles : flameRectStyles;
+
+    const onMouseEnter = (): void => {
+      setHoveringRow(row);
+      window.dispatchEvent(
+        new CustomEvent(`flame-tooltip-update-${tooltipId}`, {
+          detail: {row},
+        })
+      );
+    };
+
+    const onMouseLeave = (): void => {
+      setHoveringRow(undefined);
+      window.dispatchEvent(
+        new CustomEvent(`flame-tooltip-update-${tooltipId}`, {
+          detail: {row: null},
+        })
+      );
+    };
+
+    const handleContextMenu = (e: React.MouseEvent): void => {
+      onContextMenu(e, row);
+    };
+
+    const ts = tsColumn !== null ? Number(tsColumn.get(row)) : 0;
+    const x =
+      isFlameChart && tsColumn !== null
+        ? ((ts - Number(tsBounds[0])) / (Number(tsBounds[1]) - Number(tsBounds[0]))) * totalWidth
+        : selectedDepth > depth
+        ? 0
+        : ((Number(valueOffset) - Number(selectionOffset)) / Number(total)) * totalWidth;
+
+    const calculateY = (
+      isRenderedAsFlamegraph: boolean,
+      isInSandwichView: boolean,
+      isFlameChart: boolean,
+      maxDepth: number,
+      depth: number,
+      height: number
+    ): number => {
+      if (isRenderedAsFlamegraph) {
+        return (maxDepth - depth) * height; // Flamegraph is inverted
+      }
+
+      if (isFlameChart || isInSandwichView) {
+        return (depth - 1) * height;
+      }
+
+      return depth * height;
+    };
+
+    const y = calculateY(
+      isRenderedAsFlamegraph,
+      isInSandwichView,
+      isFlameChart,
+      effectiveDepth ?? maxDepth,
+      depth,
+      height
+    );
 
-  const y = calculateY(
-    isRenderedAsFlamegraph,
-    isInSandwichView,
-    isFlameChart,
-    effectiveDepth ?? maxDepth,
-    depth,
-    height
-  );
-
-  return (
-    <>
-      <g
-        id={row === 0 ? 'root-span' : undefined}
-        transform={`translate(${x + 1}, ${y + 1})`}
-        style={styles}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        onClick={onClick}
-        onContextMenu={handleContextMenu}
-      >
-        <rect
-          x={0}
-          y={0}
-          width={width}
-          height={height}
-          style={{
-            fill: colorResult,
-          }}
-          className={cx(
-            shouldBeHighlighted
-              ? `${colorForSimilarNodes} stroke-[3] [stroke-dasharray:6,4] [stroke-linecap:round] [stroke-linejoin:round] h-6`
-              : 'stroke-white dark:stroke-gray-700'
+    return (
+      <>
+        <g
+          id={row === 0 ? 'root-span' : undefined}
+          transform={`translate(${x + 1}, ${y + 1})`}
+          style={styles}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          onClick={onClick}
+          onContextMenu={handleContextMenu}
+        >
+          <rect
+            x={0}
+            y={0}
+            width={width}
+            height={height}
+            style={{
+              fill: colorResult,
+            }}
+            className={cx(
+              shouldBeHighlighted
+                ? `${colorForSimilarNodes} stroke-[3] [stroke-dasharray:6,4] [stroke-linecap:round] [stroke-linejoin:round] h-6`
+                : 'stroke-white dark:stroke-gray-700'
+            )}
+          />
+          {width > 5 && (
+            <svg width={width - 5} height={height}>
+              <TextWithEllipsis
+                text={name}
+                x={5}
+                y={15}
+                width={width - 10} // Subtract padding from available width
+              />
+            </svg>
           )}
-        />
-        {width > 5 && (
-          <svg width={width - 5} height={height}>
-            <TextWithEllipsis
-              text={name}
-              x={5}
-              y={15}
-              width={width - 10} // Subtract padding from available width
-            />
-          </svg>
-        )}
-      </g>
-    </>
-  );
-});
+        </g>
+      </>
+    );
+  },
+  (prevProps, nextProps) => {
+    // Only re-render if the relevant props have changed
+    return (
+      prevProps.row === nextProps.row &&
+      prevProps.selectedRow === nextProps.selectedRow &&
+      prevProps.hoveringRow === nextProps.hoveringRow &&
+      prevProps.totalWidth === nextProps.totalWidth &&
+      prevProps.height === nextProps.height &&
+      prevProps.effectiveDepth === nextProps.effectiveDepth
+    );
+  }
+);

package/src/ProfileFlameGraph/FlameGraphArrow/index.tsx

@@ -39,12 +39,15 @@ import {FlameNode, RowHeight, colorByColors} from './FlameGraphNodes';
 import {MemoizedTooltip} from './MemoizedTooltip';
 import {TooltipProvider} from './TooltipContext';
 import {useFilenamesList} from './useMappingList';
+import {useScrollViewport} from './useScrollViewport';
+import {useVisibleNodes} from './useVisibleNodes';
 import {
   CurrentPathFrame,
   arrowToString,
   extractFeature,
   extractFilenameFeature,
   getCurrentPathFrameData,
+  getMaxDepth,
   isCurrentPathFrameMatch,
 } from './utils';
 
@@ -120,17 +123,6 @@ export const getFilenameColors = (
 
 const noop = (): void => {};
 
-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;
-}
-
 export const FlameGraphArrow = memo(function FlameGraphArrow({
   arrow,
   total,
@@ -166,35 +158,11 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
     return result;
   }, [arrow, perf]);
   const svg = useRef(null);
+  const containerRef = useRef<HTMLDivElement>(null);
   const renderStartTime = useRef<number>(0);
 
   const [svgElement, setSvgElement] = useState<SVGSVGElement | null>(null);
 
-  useEffect(() => {
-    if (perf?.markInteraction != null) {
-      renderStartTime.current = performance.now();
-    }
-  }, [table, width, curPath, perf]);
-
-  useEffect(() => {
-    if (perf?.setMeasurement != null && renderStartTime.current > 0) {
-      const measureRenderTime = (): void => {
-        const renderTime = performance.now() - renderStartTime.current;
-        if (perf?.setMeasurement != null) {
-          perf.setMeasurement('flamegraph.render_time', renderTime);
-        }
-
-        renderStartTime.current = 0;
-      };
-
-      requestAnimationFrame(measureRenderTime);
-    }
-  }, [table, width, curPath, perf]);
-
-  useEffect(() => {
-    setSvgElement(svg.current);
-  }, [tooltipId]);
-
   const {excludeBinary} = useProfileFilters();
 
   const {compareMode} = useProfileViewContext();
@@ -304,10 +272,13 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
   // Use deferred value to prevent UI blocking when expanding frames
   const deferredEffectiveDepth = useDeferredValue(effectiveDepth);
 
-  const height = isInSandwichView
+  const totalHeight = isInSandwichView
     ? deferredEffectiveDepth * RowHeight
     : (deferredEffectiveDepth + 1) * RowHeight;
 
+  // Get the viewport of the container, this is used to determine which rows are visible.
+  const viewport = useScrollViewport(containerRef);
+
   // To find the selected row, we must walk the current path and look at which
   // children of the current frame matches the path element exactly. Until the
   // end, the row we find at the end is our selected row.
@@ -333,6 +304,25 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
   }
   const selectedRow = currentRow;
 
+  const visibleNodes = useVisibleNodes({
+    table,
+    viewport,
+    total,
+    width: width ?? 1,
+    selectedRow,
+    effectiveDepth: deferredEffectiveDepth,
+  });
+
+  useEffect(() => {
+    if (perf?.markInteraction != null) {
+      renderStartTime.current = performance.now();
+    }
+  }, [table, width, curPath, perf]);
+
+  useEffect(() => {
+    setSvgElement(svg.current);
+  }, [tooltipId]);
+
   return (
     <TooltipProvider
       table={table}
@@ -359,46 +349,55 @@ export const FlameGraphArrow = memo(function FlameGraphArrow({
           isInSandwichView={isInSandwichView}
         />
         <MemoizedTooltip contextElement={svgElement} dockedMetainfo={dockedMetainfo} />
-        <svg
-          className="font-robotoMono"
-          width={width}
-          height={height}
-          preserveAspectRatio="xMinYMid"
-          ref={svg}
+        <div
+          ref={containerRef}
+          className="overflow-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-800 will-change-transform scroll-smooth webkit-overflow-scrolling-touch contain"
+          style={{
+            width: width ?? '100%',
+            contain: 'layout style paint',
+          }}
         >
-          {Array.from({length: table.numRows}, (_, row) => (
-            <FlameNode
-              key={row}
-              table={table}
-              row={row} // root is always row 0 in the arrow record
-              colors={colorByColors}
-              colorBy={colorByValue}
-              totalWidth={width ?? 1}
-              height={RowHeight}
-              darkMode={isDarkMode}
-              compareMode={compareMode}
-              colorForSimilarNodes={colorForSimilarNodes}
-              selectedRow={selectedRow}
-              onClick={() => {
-                if (isFlameChart) {
-                  // We don't want to expand in flame charts.
-                  return;
-                }
-                handleRowClick(row);
-              }}
-              onContextMenu={displayMenu}
-              hoveringRow={highlightSimilarStacksPreference ? hoveringRow : undefined}
-              setHoveringRow={highlightSimilarStacksPreference ? setHoveringRow : noop}
-              isFlameChart={isFlameChart}
-              profileSource={profileSource}
-              isRenderedAsFlamegraph={isRenderedAsFlamegraph}
-              isInSandwichView={isInSandwichView}
-              maxDepth={maxDepth}
-              effectiveDepth={deferredEffectiveDepth}
-              tooltipId={tooltipId}
-            />
-          ))}
-        </svg>
+          <svg
+            className="font-robotoMono"
+            width={width ?? 0}
+            height={totalHeight}
+            preserveAspectRatio="xMinYMid"
+            ref={svg}
+          >
+            {visibleNodes.map(row => (
+              <FlameNode
+                key={row}
+                table={table}
+                row={row}
+                colors={colorByColors}
+                colorBy={colorByValue}
+                totalWidth={width ?? 1}
+                height={RowHeight}
+                darkMode={isDarkMode}
+                compareMode={compareMode}
+                colorForSimilarNodes={colorForSimilarNodes}
+                selectedRow={selectedRow}
+                onClick={() => {
+                  if (isFlameChart) {
+                    // We don't want to expand in flame charts.
+                    return;
+                  }
+                  handleRowClick(row);
+                }}
+                onContextMenu={displayMenu}
+                hoveringRow={highlightSimilarStacksPreference ? hoveringRow : undefined}
+                setHoveringRow={highlightSimilarStacksPreference ? setHoveringRow : noop}
+                isFlameChart={isFlameChart}
+                profileSource={profileSource}
+                isRenderedAsFlamegraph={isRenderedAsFlamegraph}
+                isInSandwichView={isInSandwichView}
+                maxDepth={maxDepth}
+                effectiveDepth={deferredEffectiveDepth}
+                tooltipId={tooltipId}
+              />
+            ))}
+          </svg>
+        </div>
       </div>
     </TooltipProvider>
   );