@parca/profile 0.19.16 → 0.19.18

package/src/{ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx → ProfileFlameGraph/FlameGraphArrow/FlameGraphNodes.tsx}

@@ -21,8 +21,6 @@ import {isSearchMatch} from '@parca/utilities';
 
 import 'react-contexify/dist/ReactContexify.css';
 
-import {USER_PREFERENCES} from '@parca/hooks';
-
 import {ProfileSource} from '../../ProfileSource';
 import TextWithEllipsis from './TextWithEllipsis';
 import {
@@ -32,7 +30,6 @@ import {
   FIELD_FUNCTION_FILE_NAME,
   FIELD_FUNCTION_NAME,
   FIELD_MAPPING_FILE,
-  FIELD_PARENT,
   FIELD_TIMESTAMP,
   FIELD_VALUE_OFFSET,
 } from './index';
@@ -45,7 +42,7 @@ export interface colorByColors {
   [key: string]: string;
 }
 
-export interface IcicleNodeProps {
+export interface FlameNodeProps {
   height: number;
   totalWidth: number;
   table: Table<any>;
@@ -59,30 +56,30 @@ export interface IcicleNodeProps {
   colorForSimilarNodes: string;
   selectedRow: number;
   onClick: () => void;
-  isIcicleChart: boolean;
+  isFlameChart: boolean;
   profileSource: ProfileSource;
-  isFlamegraph?: boolean;
-  isSandwich?: boolean;
+  isRenderedAsFlamegraph?: boolean;
+  isInSandwichView?: boolean;
   maxDepth?: number;
   effectiveDepth?: number;
   tooltipId?: string;
 
-  // Hovering row must only ever be used for highlighting similar nodes, otherwise it will cause performance issues as it causes the full iciclegraph to get rerendered every time the hovering row changes.
+  // Hovering row must only ever be used for highlighting similar nodes, otherwise it will cause performance issues as it causes the full flamegraph to get rerendered every time the hovering row changes.
   hoveringRow?: number;
   setHoveringRow: (row: number | undefined) => void;
 }
 
-export const icicleRectStyles = {
+export const flameRectStyles = {
   cursor: 'pointer',
   transition: 'opacity .15s linear',
 };
-export const fadedIcicleRectStyles = {
+export const fadedFlameRectStyles = {
   cursor: 'pointer',
   transition: 'opacity .15s linear',
   opacity: '0.5',
 };
 
-export const IcicleNode = React.memo(function IcicleNodeNoMemo({
+export const FlameNode = React.memo(function FlameNodeNoMemo({
   table,
   row,
   colors,
@@ -98,14 +95,14 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   onContextMenu,
   hoveringRow,
   setHoveringRow,
-  isIcicleChart,
+  isFlameChart,
   profileSource,
-  isFlamegraph = false,
-  isSandwich = false,
+  isRenderedAsFlamegraph = false,
+  isInSandwichView = false,
   maxDepth = 0,
   effectiveDepth,
   tooltipId = 'default',
-}: IcicleNodeProps): React.JSX.Element {
+}: FlameNodeProps): React.JSX.Element {
   // get the columns to read from
   const mappingColumn = table.getChild(FIELD_MAPPING_FILE);
   const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
@@ -181,8 +178,8 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
     return <></>;
   }
 
-  if (row === 0 && (isIcicleChart || isSandwich)) {
-    // The root node is not rendered in the icicle chart or sandwich view, so we return null.
+  if (row === 0 && (isFlameChart || isInSandwichView)) {
+    // The root node is not rendered in the flame chart or sandwich view, so we return null.
     return <></>;
   }
 
@@ -190,7 +187,7 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   const tsBounds = boundsFromProfileSource(profileSource);
   const total = cumulativeColumn?.get(selectedRow);
   const totalRatio = cumulative > total ? 1 : Number(cumulative) / Number(total);
-  const width: number = isIcicleChart
+  const width: number = isFlameChart
     ? (Number(cumulative) / (Number(tsBounds[1]) - Number(tsBounds[0]))) * totalWidth
     : totalRatio * totalWidth;
 
@@ -200,12 +197,12 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
 
   const selectedDepth = depthColumn?.get(selectedRow);
   const styles =
-    selectedDepth !== undefined && selectedDepth > depth ? fadedIcicleRectStyles : icicleRectStyles;
+    selectedDepth !== undefined && selectedDepth > depth ? fadedFlameRectStyles : flameRectStyles;
 
   const onMouseEnter = (): void => {
     setHoveringRow(row);
     window.dispatchEvent(
-      new CustomEvent(`icicle-tooltip-update-${tooltipId}`, {
+      new CustomEvent(`flame-tooltip-update-${tooltipId}`, {
         detail: {row},
       })
     );
@@ -214,7 +211,7 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   const onMouseLeave = (): void => {
     setHoveringRow(undefined);
     window.dispatchEvent(
-      new CustomEvent(`icicle-tooltip-update-${tooltipId}`, {
+      new CustomEvent(`flame-tooltip-update-${tooltipId}`, {
         detail: {row: null},
       })
     );
@@ -226,25 +223,25 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
 
   const ts = tsColumn !== null ? Number(tsColumn.get(row)) : 0;
   const x =
-    isIcicleChart && tsColumn !== null
+    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 = (
-    isFlamegraph: boolean,
-    isSandwich: boolean,
-    isIcicleChart: boolean,
+    isRenderedAsFlamegraph: boolean,
+    isInSandwichView: boolean,
+    isFlameChart: boolean,
     maxDepth: number,
     depth: number,
     height: number
   ): number => {
-    if (isFlamegraph) {
+    if (isRenderedAsFlamegraph) {
       return (maxDepth - depth) * height; // Flamegraph is inverted
     }
 
-    if (isIcicleChart || isSandwich) {
+    if (isFlameChart || isInSandwichView) {
       return (depth - 1) * height;
     }
 
@@ -252,9 +249,9 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   };
 
   const y = calculateY(
-    isFlamegraph,
-    isSandwich,
-    isIcicleChart,
+    isRenderedAsFlamegraph,
+    isInSandwichView,
+    isFlameChart,
     effectiveDepth ?? maxDepth,
     depth,
     height

package/src/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/MemoizedTooltip.tsx

@@ -38,7 +38,7 @@ export const MemoizedTooltip = memo(function MemoizedTooltip({
       setTooltipRow(event.detail.row);
     };
 
-    const eventName = `icicle-tooltip-update-${tooltipId}`;
+    const eventName = `flame-tooltip-update-${tooltipId}`;
 
     // Delay to ensure all DOM updates and React renders are complete
     // This fixes the race condition in sandwich view

package/src/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/index.tsx

@@ -25,7 +25,7 @@ import {Dictionary, Table, Vector, tableFromIPC} from 'apache-arrow';
 import {useContextMenu} from 'react-contexify';
 
 import {FlamegraphArrow} from '@parca/client';
-import {useURLState} from '@parca/components';
+import {useParcaContext, useURLState} from '@parca/components';
 import {USER_PREFERENCES, useCurrentColorProfile, useUserPreference} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
 import {getColorForFeature, selectDarkMode, useAppSelector} from '@parca/store';
@@ -34,7 +34,7 @@ import {getLastItem, type ColorConfig} from '@parca/utilities';
 import {ProfileSource} from '../../ProfileSource';
 import {useProfileViewContext} from '../../ProfileView/context/ProfileViewContext';
 import ContextMenuWrapper, {ContextMenuWrapperRef} from './ContextMenuWrapper';
-import {IcicleNode, RowHeight, colorByColors} from './IcicleGraphNodes';
+import {FlameNode, RowHeight, colorByColors} from './FlameGraphNodes';
 import {MemoizedTooltip} from './MemoizedTooltip';
 import {TooltipProvider} from './TooltipContext';
 import {useFilenamesList} from './useMappingList';
@@ -69,7 +69,7 @@ export const FIELD_PARENT = 'parent';
 export const FIELD_DEPTH = 'depth';
 export const FIELD_VALUE_OFFSET = 'value_offset';
 
-interface IcicleGraphArrowProps {
+interface FlameGraphArrowProps {
   arrow: FlamegraphArrow;
   total: bigint;
   filtered: bigint;
@@ -81,9 +81,9 @@ interface IcicleGraphArrowProps {
   isHalfScreen: boolean;
   mappingsListFromMetadata: string[];
   compareAbsolute: boolean;
-  isIcicleChart?: boolean;
-  isFlamegraph?: boolean;
-  isSandwich?: boolean;
+  isFlameChart?: boolean;
+  isRenderedAsFlamegraph?: boolean;
+  isInSandwichView?: boolean;
   tooltipId?: string;
   maxFrameCount?: number;
   isExpanded?: boolean;
@@ -130,7 +130,7 @@ function getMaxDepth(depthColumn: Vector<any> | null): number {
   return max;
 }
 
-export const IcicleGraphArrow = memo(function IcicleGraphArrow({
+export const FlameGraphArrow = memo(function FlameGraphArrow({
   arrow,
   total,
   filtered,
@@ -141,27 +141,59 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   profileSource,
   mappingsListFromMetadata,
   compareAbsolute,
-  isIcicleChart = false,
-  isFlamegraph = false,
-  isSandwich = false,
+  isFlameChart = false,
+  isRenderedAsFlamegraph = false,
+  isInSandwichView = false,
   tooltipId = 'default',
   maxFrameCount,
   isExpanded = false,
-}: IcicleGraphArrowProps): React.JSX.Element {
+}: FlameGraphArrowProps): React.JSX.Element {
   const [highlightSimilarStacksPreference] = useUserPreference<boolean>(
     USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key
   );
   const [hoveringRow, setHoveringRow] = useState<number | undefined>(undefined);
   const [dockedMetainfo] = useUserPreference<boolean>(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
   const isDarkMode = useAppSelector(selectDarkMode);
+  const {perf} = useParcaContext();
 
   const table: Table<any> = useMemo(() => {
-    return tableFromIPC(arrow.record);
-  }, [arrow]);
+    const result = tableFromIPC(arrow.record);
+
+    if (perf?.setMeasurement != null) {
+      perf.setMeasurement('flamegraph.node_count', result.numRows);
+    }
+
+    return result;
+  }, [arrow, perf]);
   const svg = useRef(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);
+        }
+
+        if (renderTime > 500 && perf.captureMessage != null) {
+          perf.captureMessage(`Slow flamegraph render: ${renderTime.toFixed(0)}ms`, 'warning');
+        }
+        renderStartTime.current = 0;
+      };
+
+      requestAnimationFrame(measureRenderTime);
+    }
+  }, [table, width, curPath, perf]);
+
   useEffect(() => {
     setSvgElement(svg.current);
   }, [tooltipId]);
@@ -226,7 +258,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
 
   const colorByColors: colorByColors = colorByList[colorByValue as ColorByKey];
 
-  const MENU_ID = 'icicle-graph-context-menu';
+  const MENU_ID = 'flame-graph-context-menu';
   const contextMenuRef = useRef<ContextMenuWrapperRef>(null);
   const {show, hideAll} = useContextMenu({
     id: MENU_ID,
@@ -286,7 +318,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   // Use deferred value to prevent UI blocking when expanding frames
   const deferredEffectiveDepth = useDeferredValue(effectiveDepth);
 
-  const height = isSandwich
+  const height = isInSandwichView
     ? deferredEffectiveDepth * RowHeight
     : (deferredEffectiveDepth + 1) * RowHeight;
 
@@ -338,7 +370,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
           hideBinary={hideBinary}
           unit={arrow.unit}
           profileType={profileType}
-          isSandwich={isSandwich}
+          isInSandwichView={isInSandwichView}
         />
         <MemoizedTooltip contextElement={svgElement} dockedMetainfo={dockedMetainfo} />
         <svg
@@ -349,7 +381,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
           ref={svg}
         >
           {Array.from({length: table.numRows}, (_, row) => (
-            <IcicleNode
+            <FlameNode
               key={row}
               table={table}
               row={row} // root is always row 0 in the arrow record
@@ -363,8 +395,8 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
               colorForSimilarNodes={colorForSimilarNodes}
               selectedRow={selectedRow}
               onClick={() => {
-                if (isIcicleChart) {
-                  // We don't want to expand in icicle charts.
+                if (isFlameChart) {
+                  // We don't want to expand in flame charts.
                   return;
                 }
                 handleRowClick(row);
@@ -372,10 +404,10 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
               onContextMenu={displayMenu}
               hoveringRow={highlightSimilarStacksPreference ? hoveringRow : undefined}
               setHoveringRow={highlightSimilarStacksPreference ? setHoveringRow : noop}
-              isIcicleChart={isIcicleChart}
+              isFlameChart={isFlameChart}
               profileSource={profileSource}
-              isFlamegraph={isFlamegraph}
-              isSandwich={isSandwich}
+              isRenderedAsFlamegraph={isRenderedAsFlamegraph}
+              isInSandwichView={isInSandwichView}
               maxDepth={maxDepth}
               effectiveDepth={deferredEffectiveDepth}
               tooltipId={tooltipId}
@@ -387,4 +419,4 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   );
 });
 
-export default IcicleGraphArrow;
+export default FlameGraphArrow;

package/src/{ProfileIcicleGraph/benchmarks/ProfileIcicleGraph-10M.benchmark.tsx → ProfileFlameGraph/benchmarks/ProfileFlameGraph-10M.benchmark.tsx}

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import React from 'react';
-import ProfileIcicleGraph from '..';
+import ProfileFlameGraph from '..';
 import {Provider} from 'react-redux';
 import {createStore} from '@parca/store';
 import parca10mGraphData from './benchdata/parca-10m.json';
@@ -26,7 +26,7 @@ export default function ({callback = () => {}}): React.ReactElement {
   return (
     <div ref={callback}>
       <Provider store={reduxStore}>
-        <ProfileIcicleGraph
+        <ProfileFlameGraph
           graph={parca10mGraph}
           sampleUnit={parca10mGraph.unit}
           curPath={[]}

package/src/{ProfileIcicleGraph/benchmarks/ProfileIcicleGraph-1M.benchmark.tsx → ProfileFlameGraph/benchmarks/ProfileFlameGraph-1M.benchmark.tsx}

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import React from 'react';
-import ProfileIcicleGraph from '../';
+import ProfileFlameGraph from '../';
 import {Provider} from 'react-redux';
 import {createStore} from '@parca/store';
 import {Flamegraph} from '@parca/client';
@@ -26,7 +26,7 @@ export default function ({callback = () => {}}): React.ReactElement {
   return (
     <div ref={callback}>
       <Provider store={reduxStore}>
-        <ProfileIcicleGraph
+        <ProfileFlameGraph
           graph={parca1mGraph}
           sampleUnit={parca1mGraph.unit}
           curPath={[]}

package/src/{ProfileIcicleGraph/benchmarks/ProfileIcicleGraph-20M.benchmark.tsx → ProfileFlameGraph/benchmarks/ProfileFlameGraph-20M.benchmark.tsx}

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import React from 'react';
-import ProfileIcicleGraph from '..';
+import ProfileFlameGraph from '..';
 import {Provider} from 'react-redux';
 import {createStore} from '@parca/store';
 import parca20mGraphData from './benchdata/parca-20m.json';
@@ -26,7 +26,7 @@ export default function ({callback = () => {}}): React.ReactElement {
   return (
     <div ref={callback}>
       <Provider store={reduxStore}>
-        <ProfileIcicleGraph
+        <ProfileFlameGraph
           graph={parca20mGraph}
           sampleUnit={parca20mGraph.unit}
           curPath={[]}