Make inverting the call tree fast, by computing inverted call nodes lazily

src/actions/profile-view.js

@@ -65,7 +65,6 @@ import type {
   Pid,
   IndexIntoSamplesTable,
   CallNodePath,
-  CallNodeInfo,
   IndexIntoCallNodeTable,
   IndexIntoResourceTable,
   TrackIndex,
@@ -86,6 +85,7 @@ import {
 } from '../profile-logic/transforms';
 import { changeStoredProfileNameInDb } from 'firefox-profiler/app-logic/uploaded-profiles-db';
 import type { TabSlug } from '../app-logic/tabs-handling';
+import type { CallNodeInfo } from '../profile-logic/call-node-info';
 import { intersectSets } from 'firefox-profiler/utils/set';
 
 /**
@@ -2035,12 +2035,13 @@ export function handleCallNodeTransformShortcut(
     const threadSelectors = getThreadSelectorsFromThreadsKey(threadsKey);
     const unfilteredThread = threadSelectors.getThread(getState());
     const callNodeInfo = threadSelectors.getCallNodeInfo(getState());
-    const callNodeTable = callNodeInfo.getCallNodeTable();
     const implementation = getImplementationFilter(getState());
     const inverted = getInvertCallstack(getState());
     const callNodePath = callNodeInfo.getCallNodePathFromIndex(callNodeIndex);
-    const funcIndex = callNodeTable.func[callNodeIndex];
-    const category = callNodeTable.category[callNodeIndex];
+    const funcIndex = callNodeInfo.funcForNode(callNodeIndex);
+    const category = callNodeInfo.categoryForNode(callNodeIndex);
+
+    const nonInvertedCallNodeTable = callNodeInfo.getNonInvertedCallNodeTable();
 
     switch (event.key) {
       case 'F':
@@ -2099,7 +2100,7 @@ export function handleCallNodeTransformShortcut(
         break;
       }
       case 'r': {
-        if (funcHasRecursiveCall(callNodeTable, funcIndex)) {
+        if (funcHasRecursiveCall(nonInvertedCallNodeTable, funcIndex)) {
           dispatch(
             addTransformToStack(threadsKey, {
               type: 'collapse-recursion',
@@ -2110,7 +2111,7 @@ export function handleCallNodeTransformShortcut(
         break;
       }
       case 'R': {
-        if (funcHasDirectRecursiveCall(callNodeTable, funcIndex)) {
+        if (funcHasDirectRecursiveCall(nonInvertedCallNodeTable, funcIndex)) {
           dispatch(
             addTransformToStack(threadsKey, {
               type: 'collapse-direct-recursion',

src/components/calltree/CallTree.js

@@ -38,7 +38,6 @@ import type {
   State,
   ImplementationFilter,
   ThreadsKey,
-  CallNodeInfo,
   CategoryList,
   IndexIntoCallNodeTable,
   CallNodeDisplayData,
@@ -47,6 +46,7 @@ import type {
   SelectionContext,
 } from 'firefox-profiler/types';
 import type { CallTree as CallTreeType } from 'firefox-profiler/profile-logic/call-tree';
+import type { CallNodeInfo } from 'firefox-profiler/profile-logic/call-node-info';
 
 import type {
   Column,
@@ -320,7 +320,6 @@ class CallTreeImpl extends PureComponent<Props> {
       // This tree is empty.
       return;
     }
-    const callNodeTable = callNodeInfo.getCallNodeTable();
     newExpandedCallNodeIndexes.push(currentCallNodeIndex);
     for (let i = 0; i < maxInterestingDepth; i++) {
       const children = tree.getChildren(currentCallNodeIndex);
@@ -330,7 +329,8 @@ class CallTreeImpl extends PureComponent<Props> {
 
       // Let's find if there's a non idle children.
       const firstNonIdleNode = children.find(
-        (nodeIndex) => callNodeTable.category[nodeIndex] !== idleCategoryIndex
+        (nodeIndex) =>
+          callNodeInfo.categoryForNode(nodeIndex) !== idleCategoryIndex
       );
 
       // If there's a non idle children, use it; otherwise use the first
@@ -341,7 +341,7 @@ class CallTreeImpl extends PureComponent<Props> {
     }
     this._onExpandedCallNodesChange(newExpandedCallNodeIndexes);
 
-    const categoryIndex = callNodeTable.category[currentCallNodeIndex];
+    const categoryIndex = callNodeInfo.categoryForNode(currentCallNodeIndex);
     if (categoryIndex !== idleCategoryIndex) {
       // If we selected the call node with a "idle" category, we'd have a
       // completely dimmed activity graph because idle stacks are not drawn in

src/components/flame-graph/Canvas.js

@@ -28,7 +28,6 @@ import type {
   CssPixels,
   DevicePixels,
   Milliseconds,
-  CallNodeInfo,
   IndexIntoCallNodeTable,
   CallTreeSummaryStrategy,
   WeightType,
@@ -42,6 +41,7 @@ import type {
   FlameGraphDepth,
   IndexIntoFlameGraphTiming,
 } from 'firefox-profiler/profile-logic/flame-graph';
+import type { CallNodeInfo } from 'firefox-profiler/profile-logic/call-node-info';
 
 import type {
   ChartCanvasScale,
@@ -50,7 +50,7 @@ import type {
 
 import type {
   CallTree,
-  CallTreeTimings,
+  CallTreeTimingsNonInverted,
 } from 'firefox-profiler/profile-logic/call-tree';
 
 export type OwnProps = {|
@@ -77,7 +77,7 @@ export type OwnProps = {|
   +callTreeSummaryStrategy: CallTreeSummaryStrategy,
   +ctssSamples: SamplesLikeTable,
   +unfilteredCtssSamples: SamplesLikeTable,
-  +tracedTiming: CallTreeTimings | null,
+  +tracedTiming: CallTreeTimingsNonInverted | null,
   +displayImplementation: boolean,
   +displayStackType: boolean,
 |};

src/components/flame-graph/FlameGraph.js

@@ -30,6 +30,8 @@ import {
   handleCallNodeTransformShortcut,
   updateBottomBoxContentsAndMaybeOpen,
 } from 'firefox-profiler/actions/profile-view';
+import { extractNonInvertedCallTreeTimings } from 'firefox-profiler/profile-logic/call-tree';
+import { ensureExists } from 'firefox-profiler/utils/flow';
 
 import type {
   Thread,
@@ -40,14 +42,14 @@ import type {
   SamplesLikeTable,
   PreviewSelection,
   CallTreeSummaryStrategy,
-  CallNodeInfo,
   IndexIntoCallNodeTable,
   ThreadsKey,
   InnerWindowID,
   Page,
 } from 'firefox-profiler/types';
 
 import type { FlameGraphTiming } from 'firefox-profiler/profile-logic/flame-graph';
+import type { CallNodeInfo } from 'firefox-profiler/profile-logic/call-node-info';
 
 import type {
   CallTree,
@@ -344,6 +346,19 @@ class FlameGraphImpl extends React.PureComponent<Props> {
       displayStackType,
     } = this.props;
 
+    // Get the CallTreeTimingsNonInverted out of tracedTiming. We pass this
+    // along rather than the more generic CallTreeTimings type so that the
+    // FlameGraphCanvas component can operate on the more specialized type.
+    // (CallTreeTimingsNonInverted and CallTreeTimingsInverted are very
+    // different, and the flame graph is only used with non-inverted timings.)
+    const tracedTimingNonInverted =
+      tracedTiming !== null
+        ? ensureExists(
+            extractNonInvertedCallTreeTimings(tracedTiming),
+            'The flame graph should only ever see non-inverted timings, see UrlState.getInvertCallstack'
+          )
+        : null;
+
     const maxViewportHeight = maxStackDepthPlusOne * STACK_FRAME_HEIGHT;
 
     return (
@@ -394,7 +409,7 @@ class FlameGraphImpl extends React.PureComponent<Props> {
               isInverted,
               ctssSamples,
               unfilteredCtssSamples,
-              tracedTiming,
+              tracedTiming: tracedTimingNonInverted,
               displayImplementation,
               displayStackType,
             }}

src/components/shared/CallNodeContextMenu.js

@@ -53,7 +53,6 @@ import type {
   TransformType,
   ImplementationFilter,
   IndexIntoCallNodeTable,
-  CallNodeInfo,
   CallNodePath,
   Thread,
   ThreadsKey,
@@ -64,6 +63,7 @@ import type {
 
 import type { TabSlug } from 'firefox-profiler/app-logic/tabs-handling';
 import type { ConnectedProps } from 'firefox-profiler/utils/connect';
+import type { CallNodeInfo } from 'firefox-profiler/profile-logic/call-node-info';
 import type { BrowserConnectionStatus } from 'firefox-profiler/app-logic/browser-connection';
 
 type StateProps = {|
@@ -147,8 +147,7 @@ class CallNodeContextMenuImpl extends React.PureComponent<Props> {
       callNodeInfo,
     } = rightClickedCallNodeInfo;
 
-    const callNodeTable = callNodeInfo.getCallNodeTable();
-    const funcIndex = callNodeTable.func[callNodeIndex];
+    const funcIndex = callNodeInfo.funcForNode(callNodeIndex);
     const isJS = funcTable.isJS[funcIndex];
     const stringIndex = funcTable.name[funcIndex];
     const functionCall = stringTable.getString(stringIndex);
@@ -185,8 +184,7 @@ class CallNodeContextMenuImpl extends React.PureComponent<Props> {
       callNodeInfo,
     } = rightClickedCallNodeInfo;
 
-    const callNodeTable = callNodeInfo.getCallNodeTable();
-    const funcIndex = callNodeTable.func[callNodeIndex];
+    const funcIndex = callNodeInfo.funcForNode(callNodeIndex);
     const stringIndex = funcTable.fileName[funcIndex];
     if (stringIndex === null) {
       return null;
@@ -209,8 +207,7 @@ class CallNodeContextMenuImpl extends React.PureComponent<Props> {
       callNodeInfo,
     } = rightClickedCallNodeInfo;
 
-    const callNodeTable = callNodeInfo.getCallNodeTable();
-    const funcIndex = callNodeTable.func[callNodeIndex];
+    const funcIndex = callNodeInfo.funcForNode(callNodeIndex);
     const line = funcTable.lineNumber[funcIndex];
     const column = funcTable.columnNumber[funcIndex];
     return { line, column };
@@ -337,8 +334,7 @@ class CallNodeContextMenuImpl extends React.PureComponent<Props> {
     const { threadsKey, callNodePath, thread, callNodeIndex, callNodeInfo } =
       rightClickedCallNodeInfo;
     const selectedFunc = callNodePath[callNodePath.length - 1];
-    const callNodeTable = callNodeInfo.getCallNodeTable();
-    const category = callNodeTable.category[callNodeIndex];
+    const category = callNodeInfo.categoryForNode(callNodeIndex);
     switch (type) {
       case 'focus-subtree':
         addTransformToStack(threadsKey, {
@@ -451,8 +447,7 @@ class CallNodeContextMenuImpl extends React.PureComponent<Props> {
     const { callNodeInfo, callNodeIndex } = rightClickedCallNodeInfo;
     const { innerWindowIDToPageMap } = this.props;
 
-    const callNodeTable = callNodeInfo.getCallNodeTable();
-    const innerWindowID = callNodeTable.innerWindowID[callNodeIndex];
+    const innerWindowID = callNodeInfo.innerWindowIDForNode(callNodeIndex);
 
     if (innerWindowID && innerWindowIDToPageMap) {
       const page = innerWindowIDToPageMap.get(innerWindowID);
@@ -583,9 +578,8 @@ class CallNodeContextMenuImpl extends React.PureComponent<Props> {
       callNodeInfo,
     } = rightClickedCallNodeInfo;
 
-    const callNodeTable = callNodeInfo.getCallNodeTable();
-    const categoryIndex = callNodeTable.category[callNodeIndex];
-    const funcIndex = callNodeTable.func[callNodeIndex];
+    const categoryIndex = callNodeInfo.categoryForNode(callNodeIndex);
+    const funcIndex = callNodeInfo.funcForNode(callNodeIndex);
     const isJS = funcTable.isJS[funcIndex];
     const hasCategory = categoryIndex !== -1;
     // This could be the C++ library, or the JS filename.
@@ -599,6 +593,9 @@ class CallNodeContextMenuImpl extends React.PureComponent<Props> {
     const fileName =
       filePath &&
       parseFileNameFromSymbolication(filePath).path.match(/[^\\/]+$/)?.[0];
+
+    const callNodeTable = callNodeInfo.getNonInvertedCallNodeTable();
+
     const showOpenDebuggerItem =
       isJS &&
       filePath &&
@@ -607,6 +604,7 @@ class CallNodeContextMenuImpl extends React.PureComponent<Props> {
       filePath !== 'self-hosted' &&
       browserConnectionStatus.status === 'ESTABLISHED' &&
       this._getTabID();
+
     return (
       <>
         {fileName ? (

src/components/shared/thread/CPUGraph.js

@@ -13,9 +13,9 @@ import type {
   CategoryList,
   IndexIntoSamplesTable,
   Milliseconds,
-  CallNodeInfo,
   SelectedState,
 } from 'firefox-profiler/types';
+import type { CallNodeInfo } from 'firefox-profiler/profile-logic/call-node-info';
 
 type Props = {|
   +className: string,

src/components/shared/thread/StackGraph.js

@@ -12,10 +12,10 @@ import type {
   CategoryList,
   IndexIntoSamplesTable,
   Milliseconds,
-  CallNodeInfo,
   IndexIntoCallNodeTable,
   SelectedState,
 } from 'firefox-profiler/types';
+import type { CallNodeInfo } from 'firefox-profiler/profile-logic/call-node-info';
 
 type Props = {|
   +className: string,

src/components/stack-chart/Canvas.js

@@ -29,7 +29,6 @@ import type {
   ThreadsKey,
   UserTimingMarkerPayload,
   WeightType,
-  CallNodeInfo,
   IndexIntoCallNodeTable,
   CombinedTimingRows,
   Milliseconds,
@@ -41,6 +40,7 @@ import type {
   InnerWindowID,
   Page,
 } from 'firefox-profiler/types';
+import type { CallNodeInfo } from 'firefox-profiler/profile-logic/call-node-info';
 
 import type {
   ChartCanvasScale,
@@ -128,8 +128,7 @@ class StackChartCanvasImpl extends React.PureComponent<Props> {
       return;
     }
 
-    const callNodeTable = callNodeInfo.getCallNodeTable();
-    const depth = callNodeTable.depth[selectedCallNodeIndex];
+    const depth = callNodeInfo.depthForNode(selectedCallNodeIndex);
     const y = depth * ROW_CSS_PIXELS_HEIGHT;
 
     if (y < this.props.viewport.viewportTop) {
@@ -262,7 +261,7 @@ class StackChartCanvasImpl extends React.PureComponent<Props> {
       categoryForUserTiming = 0;
     }
 
-    const callNodeTable = callNodeInfo.getCallNodeTable();
+    const callNodeTable = callNodeInfo.getNonInvertedCallNodeTable();
 
     // Only draw the stack frames that are vertically within view.
     for (let depth = startDepth; depth < endDepth; depth++) {

src/components/stack-chart/index.js

@@ -43,7 +43,6 @@ import { getBottomBoxInfoForCallNode } from '../../profile-logic/profile-data';
 import type {
   Thread,
   CategoryList,
-  CallNodeInfo,
   IndexIntoCallNodeTable,
   CombinedTimingRows,
   MarkerIndex,
@@ -58,6 +57,7 @@ import type {
   InnerWindowID,
   Page,
 } from 'firefox-profiler/types';
+import type { CallNodeInfo } from 'firefox-profiler/profile-logic/call-node-info';
 
 import type { ConnectedProps } from '../../utils/connect';
 
@@ -181,8 +181,7 @@ class StackChartImpl extends React.PureComponent<Props> {
       event.preventDefault();
       const { callNodeInfo, selectedCallNodeIndex, thread } = this.props;
       if (selectedCallNodeIndex !== null) {
-        const callNodeTable = callNodeInfo.getCallNodeTable();
-        const funcIndex = callNodeTable.func[selectedCallNodeIndex];
+        const funcIndex = callNodeInfo.funcForNode(selectedCallNodeIndex);
         const funcName = thread.stringTable.getString(
           thread.funcTable.name[funcIndex]
         );

src/components/timeline/TrackThread.js

@@ -52,13 +52,13 @@ import type {
   IndexIntoSamplesTable,
   Milliseconds,
   StartEndRange,
-  CallNodeInfo,
   ImplementationFilter,
   IndexIntoCallNodeTable,
   SelectedState,
   State,
   ThreadsKey,
 } from 'firefox-profiler/types';
+import type { CallNodeInfo } from 'firefox-profiler/profile-logic/call-node-info';
 
 import type { ConnectedProps } from 'firefox-profiler/utils/connect';