[Deploy] Fast activity graph drawing

src/actions/profile-view.ts

@@ -156,9 +156,7 @@ export function selectSelfCallNode(
   return (dispatch, getState) => {
     const threadSelectors = getThreadSelectorsFromThreadsKey(threadsKey);
     const sampleCallNodes =
-      threadSelectors.getSampleIndexToNonInvertedCallNodeIndexForFilteredThread(
-        getState()
-      );
+      threadSelectors.getSampleCallNodesForFilteredThread(getState());
 
     if (
       sampleIndex === null ||

src/components/flame-graph/Canvas.tsx

@@ -17,8 +17,11 @@ import {
   formatPercent,
 } from 'firefox-profiler/utils/format-numbers';
 import { TooltipCallNode } from 'firefox-profiler/components/tooltip/CallNode';
-import { getTimingsForCallNodeIndex } from 'firefox-profiler/profile-logic/profile-data';
 import MixedTupleMap from 'mixedtuplemap';
+import {
+  getCallNodeTimings,
+  getSampleSelectedStates,
+} from 'firefox-profiler/profile-logic/profile-data';
 
 import type {
   Thread,
@@ -74,6 +77,7 @@ export type OwnProps = {
   readonly callTreeSummaryStrategy: CallTreeSummaryStrategy;
   readonly ctssSamples: SamplesLikeTable;
   readonly ctssSampleCategoriesAndSubcategories: SampleCategoriesAndSubcategories;
+  readonly ctssSampleCallNodes: Array<IndexIntoCallNodeTable | null>;
   readonly tracedTiming: CallTreeTimingsNonInverted | null;
   readonly displayStackType: boolean;
 };
@@ -344,7 +348,10 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
   };
 
   // Properly memoize this derived information for the Tooltip component.
-  _getTimingsForCallNodeIndex = memoize(getTimingsForCallNodeIndex, {
+  _getSampleSelectedStates = memoize(getSampleSelectedStates, {
+    cache: new MixedTupleMap(),
+  });
+  _getCallNodeTimings = memoize(getCallNodeTimings, {
     cache: new MixedTupleMap(),
   });
 
@@ -365,6 +372,7 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
       weightType,
       ctssSamples,
       ctssSampleCategoriesAndSubcategories,
+      ctssSampleCallNodes,
       tracedTiming,
       displayStackType,
     } = this.props;
@@ -404,6 +412,11 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
       // strategies, but it may not be worth implementing it.
       callTreeSummaryStrategy === 'timing';
 
+    const callNodeInfoInverted = callNodeInfo.asInverted();
+    const isInvertedRoot =
+      callNodeInfoInverted !== null &&
+      callNodeInfoInverted.isRoot(callNodeIndex);
+
     return (
       // Important! Only pass in props that have been properly memoized so this component
       // doesn't over-render.
@@ -420,12 +433,16 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
         callTreeSummaryStrategy={callTreeSummaryStrategy}
         timings={
           shouldComputeTimings
-            ? this._getTimingsForCallNodeIndex(
-                callNodeIndex,
-                callNodeInfo,
+            ? this._getCallNodeTimings(
                 categories,
                 ctssSamples,
-                ctssSampleCategoriesAndSubcategories
+                ctssSampleCategoriesAndSubcategories,
+                this._getSampleSelectedStates(
+                  callNodeInfo,
+                  ctssSampleCallNodes,
+                  callNodeIndex
+                ),
+                isInvertedRoot
               )
             : undefined
         }

src/components/flame-graph/FlameGraph.tsx

@@ -87,6 +87,7 @@ type StateProps = {
   readonly callTreeSummaryStrategy: CallTreeSummaryStrategy;
   readonly ctssSamples: SamplesLikeTable;
   readonly ctssSampleCategoriesAndSubcategories: SampleCategoriesAndSubcategories;
+  readonly ctssSampleCallNodes: Array<IndexIntoCallNodeTable | null>;
   readonly tracedTiming: CallTreeTimings | null;
   readonly displayStackType: boolean;
 };
@@ -341,6 +342,7 @@ class FlameGraphImpl
       weightType,
       ctssSamples,
       ctssSampleCategoriesAndSubcategories,
+      ctssSampleCallNodes,
       tracedTiming,
       displayStackType,
     } = this.props;
@@ -406,6 +408,7 @@ class FlameGraphImpl
               isInverted,
               ctssSamples,
               ctssSampleCategoriesAndSubcategories,
+              ctssSampleCallNodes,
               tracedTiming: tracedTimingNonInverted,
               displayStackType,
             }}
@@ -459,6 +462,8 @@ export const FlameGraph = explicitConnectWithForwardRef<
       selectedThreadSelectors.getPreviewFilteredCtssSampleCategoriesAndSubcategories(
         state
       ),
+    ctssSampleCallNodes:
+      selectedThreadSelectors.getPreviewFilteredCtssSampleCallNodes(state),
     tracedTiming: selectedThreadSelectors.getTracedTiming(state),
     displayStackType: getProfileUsesMultipleStackTypes(state),
   }),

src/components/shared/thread/ActivityGraphCanvas.tsx

@@ -4,11 +4,15 @@
  * */
 import * as React from 'react';
 import { InView } from 'react-intersection-observer';
+import memoizeOne from 'memoize-one';
 import type {
   ActivityFillGraphQuerier,
   CategoryDrawStyles,
 } from './ActivityGraphFills';
-import { computeActivityGraphFills } from './ActivityGraphFills';
+import {
+  computeActivityGraphFills,
+  precomputePositions,
+} from './ActivityGraphFills';
 import { timeCode } from 'firefox-profiler/utils/time-code';
 import { mapCategoryColorNameToStyles } from 'firefox-profiler/utils/colors';
 
@@ -46,6 +50,7 @@ export class ActivityGraphCanvas extends React.PureComponent<CanvasProps> {
     renderScheduled: false,
     inView: false,
   };
+  _memoizedPrecomputePositions = memoizeOne(precomputePositions);
 
   _renderCanvas() {
     if (!this._canvasState.inView) {
@@ -141,6 +146,17 @@ export class ActivityGraphCanvas extends React.PureComponent<CanvasProps> {
     canvas.width = canvasPixelWidth;
     canvas.height = canvasPixelHeight;
 
+    const xPixelsPerMs = canvasPixelWidth / (rangeEnd - rangeStart);
+    const precomputedPositions = this._memoizedPrecomputePositions(
+      fullThread.samples.time,
+      sampleIndexOffset,
+      rangeFilteredThread.samples.length,
+      rangeStart,
+      xPixelsPerMs,
+      interval,
+      canvasPixelWidth
+    );
+
     const { fills, fillsQuerier } = computeActivityGraphFills({
       canvasPixelWidth,
       canvasPixelHeight,
@@ -154,6 +170,7 @@ export class ActivityGraphCanvas extends React.PureComponent<CanvasProps> {
       xPixelsPerMs: canvasPixelWidth / (rangeEnd - rangeStart),
       treeOrderSampleComparator,
       categoryDrawStyles: this._getCategoryDrawStyles(ctx!),
+      precomputedPositions,
     });
 
     // The value in fillsQuerier is needed in ActivityGraph but is computed in this method