Speed up call tree sidebar by sharing work with the activity graph

profiler-cli/src/test/unit/call-tree-formatting.test.ts

@@ -93,9 +93,7 @@ function buildBottomUpResult(
     const weightType = threadSelectors.getWeightTypeForCallTree(state);
     const samples = threadSelectors.getPreviewFilteredCtssSamples(state);
     const sampleIndexToCallNodeIndex =
-      threadSelectors.getSampleIndexToNonInvertedCallNodeIndexForFilteredThread(
-        state
-      );
+      threadSelectors.getPreviewFilteredCtssSampleCallNodes(state);
 
     const callNodeSelfAndSummary = computeCallNodeSelfAndSummary(
       samples,

src/actions/profile-view.ts

@@ -158,9 +158,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

@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 import * as React from 'react';
-import memoize from 'memoize-immutable';
+import memoize from 'memoize-one';
 import { withChartViewport, type Viewport } from '../shared/chart/Viewport';
 import { ChartCanvas } from '../shared/chart/Canvas';
 import { FastFillStyle } from '../../utils';
@@ -17,9 +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 { getSelfAndTotalForCallNode } from 'firefox-profiler/profile-logic/call-tree';
-import MixedTupleMap from 'mixedtuplemap';
+import {
+  getCallNodeTimings,
+  getSampleRelationsToNode,
+} from 'firefox-profiler/profile-logic/profile-data';
 
 import type {
   Thread,
@@ -75,6 +77,7 @@ export type OwnProps = {
   readonly callTreeSummaryStrategy: CallTreeSummaryStrategy;
   readonly ctssSamples: SamplesLikeTable;
   readonly ctssSampleCategoriesAndSubcategories: SampleCategoriesAndSubcategories;
+  readonly ctssSampleCallNodes: Array<IndexIntoCallNodeTable | null>;
   readonly tracedTiming: CallTreeTimings | null;
   readonly displayStackType: boolean;
 };
@@ -352,10 +355,33 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
     }
   };
 
-  // Properly memoize this derived information for the Tooltip component.
-  _getTimingsForCallNodeIndex = memoize(getTimingsForCallNodeIndex, {
-    cache: new MixedTupleMap(),
-  });
+  _getCallNodeTimings = memoize(
+    (
+      categories: CategoryList,
+      ctssSamples: SamplesLikeTable,
+      ctssSampleCategoriesAndSubcategories: SampleCategoriesAndSubcategories,
+      callNodeInfo: CallNodeInfo,
+      ctssSampleCallNodes: Array<IndexIntoCallNodeTable | null>,
+      callNodeIndex: IndexIntoCallNodeTable
+    ) => {
+      const callNodeInfoInverted = callNodeInfo.asInverted();
+      const isInvertedRoot =
+        callNodeInfoInverted !== null &&
+        callNodeInfoInverted.isRoot(callNodeIndex);
+      const sampleRelations = getSampleRelationsToNode(
+        callNodeInfo,
+        ctssSampleCallNodes,
+        callNodeIndex
+      );
+      return getCallNodeTimings(
+        categories,
+        ctssSamples,
+        ctssSampleCategoriesAndSubcategories,
+        sampleRelations,
+        isInvertedRoot
+      );
+    }
+  );
 
   _getHoveredStackInfo = ({
     depth,
@@ -374,6 +400,7 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
       weightType,
       ctssSamples,
       ctssSampleCategoriesAndSubcategories,
+      ctssSampleCallNodes,
       tracedTiming,
       displayStackType,
     } = this.props;
@@ -431,12 +458,13 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
         callTreeSummaryStrategy={callTreeSummaryStrategy}
         timings={
           shouldComputeTimings
-            ? this._getTimingsForCallNodeIndex(
-                callNodeIndex,
-                callNodeInfo,
+            ? this._getCallNodeTimings(
                 categories,
                 ctssSamples,
-                ctssSampleCategoriesAndSubcategories
+                ctssSampleCategoriesAndSubcategories,
+                callNodeInfo,
+                ctssSampleCallNodes,
+                callNodeIndex
               )
             : undefined
         }

src/components/flame-graph/ConnectedFlameGraph.tsx

@@ -74,6 +74,7 @@ type StateProps = {
   readonly callTreeSummaryStrategy: CallTreeSummaryStrategy;
   readonly ctssSamples: SamplesLikeTable;
   readonly ctssSampleCategoriesAndSubcategories: SampleCategoriesAndSubcategories;
+  readonly ctssSampleCallNodes: Array<IndexIntoCallNodeTable | null>;
   readonly tracedTiming: CallTreeTimings | null;
   readonly displayStackType: boolean;
 };
@@ -158,6 +159,7 @@ class ConnectedFlameGraphImpl
       weightType,
       ctssSamples,
       ctssSampleCategoriesAndSubcategories,
+      ctssSampleCallNodes,
       tracedTiming,
       displayStackType,
     } = this.props;
@@ -186,6 +188,7 @@ class ConnectedFlameGraphImpl
         ctssSampleCategoriesAndSubcategories={
           ctssSampleCategoriesAndSubcategories
         }
+        ctssSampleCallNodes={ctssSampleCallNodes}
         tracedTiming={tracedTiming}
         displayStackType={displayStackType}
         onSelectedCallNodeChange={this._onSelectedCallNodeChange}
@@ -228,6 +231,8 @@ export const ConnectedFlameGraph = explicitConnectWithForwardRef<
       selectedThreadSelectors.getPreviewFilteredCtssSampleCategoriesAndSubcategories(
         state
       ),
+    ctssSampleCallNodes:
+      selectedThreadSelectors.getPreviewFilteredCtssSampleCallNodes(state),
     tracedTiming: selectedThreadSelectors.getTracedTiming(state),
     displayStackType: getProfileUsesMultipleStackTypes(state),
   }),

src/components/flame-graph/FlameGraph.tsx

@@ -64,6 +64,7 @@ export type Props = {
   readonly callTreeSummaryStrategy: CallTreeSummaryStrategy;
   readonly ctssSamples: SamplesLikeTable;
   readonly ctssSampleCategoriesAndSubcategories: SampleCategoriesAndSubcategories;
+  readonly ctssSampleCallNodes: Array<IndexIntoCallNodeTable | null>;
   readonly tracedTiming: CallTreeTimings | null;
   readonly displayStackType: boolean;
   readonly contextMenuId?: string;
@@ -281,6 +282,7 @@ export class FlameGraph
       weightType,
       ctssSamples,
       ctssSampleCategoriesAndSubcategories,
+      ctssSampleCallNodes,
       tracedTiming,
       displayStackType,
       contextMenuId = 'CallNodeContextMenu',
@@ -337,6 +339,7 @@ export class FlameGraph
               startsAtBottom,
               ctssSamples,
               ctssSampleCategoriesAndSubcategories,
+              ctssSampleCallNodes,
               tracedTiming,
               displayStackType,
             }}

src/components/shared/thread/ActivityGraph.tsx

@@ -24,6 +24,7 @@ import type {
   Milliseconds,
   CssPixels,
 } from 'firefox-profiler/types';
+import type { SampleRelations } from 'firefox-profiler/profile-logic/profile-data';
 import type {
   ActivityFillGraphQuerier,
   CpuRatioInTimeRange,
@@ -43,7 +44,7 @@ export type Props = {
     sampleIndex: IndexIntoSamplesTable | null
   ) => void;
   readonly categories: CategoryList;
-  readonly sampleSelectedStates: Uint8Array;
+  readonly sampleRelations: SampleRelations;
   readonly treeOrderSampleComparator: (
     a: IndexIntoSamplesTable,
     b: IndexIntoSamplesTable
@@ -131,7 +132,7 @@ class ThreadActivityGraphImpl extends React.PureComponent<Props, State> {
       rangeStart,
       rangeEnd,
       sampleIndexOffset,
-      sampleSelectedStates,
+      sampleRelations,
       treeOrderSampleComparator,
       implementationFilter,
       width,
@@ -158,7 +159,7 @@ class ThreadActivityGraphImpl extends React.PureComponent<Props, State> {
           rangeStart={rangeStart}
           rangeEnd={rangeEnd}
           sampleIndexOffset={sampleIndexOffset}
-          sampleSelectedStates={sampleSelectedStates}
+          sampleRelations={sampleRelations}
           treeOrderSampleComparator={treeOrderSampleComparator}
           categories={categories}
           passFillsQuerier={this._setFillsQuerier}

src/components/shared/thread/ActivityGraphCanvas.tsx

@@ -18,6 +18,7 @@ import type {
   IndexIntoSamplesTable,
   CategoryList,
 } from 'firefox-profiler/types';
+import type { SampleRelations } from 'firefox-profiler/profile-logic/profile-data';
 import type { SizeProps } from 'firefox-profiler/components/shared/WithSize';
 
 type CanvasProps = {
@@ -29,7 +30,7 @@ type CanvasProps = {
   readonly rangeStart: Milliseconds;
   readonly rangeEnd: Milliseconds;
   readonly sampleIndexOffset: number;
-  readonly sampleSelectedStates: Uint8Array;
+  readonly sampleRelations: SampleRelations;
   readonly treeOrderSampleComparator: (
     a: IndexIntoSamplesTable,
     b: IndexIntoSamplesTable
@@ -129,7 +130,7 @@ export class ActivityGraphCanvas extends React.PureComponent<CanvasProps> {
       rangeStart,
       rangeEnd,
       sampleIndexOffset,
-      sampleSelectedStates,
+      sampleRelations,
       treeOrderSampleComparator,
       width,
       height,
@@ -150,7 +151,7 @@ export class ActivityGraphCanvas extends React.PureComponent<CanvasProps> {
       rangeStart,
       rangeEnd,
       sampleIndexOffset,
-      sampleSelectedStates,
+      sampleRelations,
       xPixelsPerMs: canvasPixelWidth / (rangeEnd - rangeStart),
       treeOrderSampleComparator,
       categoryDrawStyles: this._getCategoryDrawStyles(ctx!),