From da7214c4ae113ee74b7a600720b178cb4155d987 Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange.moz@gmail.com>
Date: Sat, 7 Mar 2026 10:34:50 -0500
Subject: [PATCH 1/4] Move special handling of inverted roots.

Instead of not computing the information in getTimingsForCallNodeIndex,
compute the information anyway but then choose to not display it in the
various places where we display call node timings.

This allows the computation code to be more consistent, which will
make future optimizations easier to reason about because all paths
now call into accumulateDataToTimings.
---
 src/components/sidebar/CallTreeSidebar.tsx    |  6 +-
 src/components/tooltip/CallNode.tsx           |  8 +-
 src/profile-logic/profile-data.ts             | 21 ++++--
 .../__snapshots__/profile-view.test.ts.snap   |  1 +
 src/test/store/profile-view.test.ts           | 73 ++++++++++---------
 5 files changed, 64 insertions(+), 45 deletions(-)

diff --git a/src/components/sidebar/CallTreeSidebar.tsx b/src/components/sidebar/CallTreeSidebar.tsx
index e93028c5a0..fe03d9dc5a 100644
--- a/src/components/sidebar/CallTreeSidebar.tsx
+++ b/src/components/sidebar/CallTreeSidebar.tsx
@@ -299,7 +299,11 @@ class CallTreeSidebarImpl extends React.PureComponent<Props> {
     const totalTimePercent = Math.round((totalTime.value / rootTime) * 100);
     const selfTimePercent = Math.round((selfTime.value / rootTime) * 100);
     const totalTimeBreakdownByCategory = totalTime.breakdownByCategory;
-    const selfTimeBreakdownByCategory = selfTime.breakdownByCategory;
+    // For inverted root nodes, self === total, so showing a separate self
+    // breakdown would be redundant.
+    const selfTimeBreakdownByCategory = timings.isInvertedRoot
+      ? null
+      : selfTime.breakdownByCategory;
 
     return (
       <aside className="sidebar sidebar-calltree">
diff --git a/src/components/tooltip/CallNode.tsx b/src/components/tooltip/CallNode.tsx
index 4ebc6a65c3..ecf7c1157a 100644
--- a/src/components/tooltip/CallNode.tsx
+++ b/src/components/tooltip/CallNode.tsx
@@ -308,6 +308,12 @@ export class TooltipCallNode extends React.PureComponent<Props> {
     // JS Tracer threads have data relevant to the microsecond level.
     const isHighPrecision: boolean = Boolean(thread.isJsTracer);
 
+    // For inverted root nodes self === total, so per-category self values would
+    // just duplicate the running column. Pass null to suppress them.
+    const selfTimeForCategories = maybeTimings.isInvertedRoot
+      ? { ...selfTime, breakdownByCategory: null }
+      : selfTime;
+
     return (
       <div className="tooltipCallNodeCategory">
         {/* grid row -------------------------------------------------- */}
@@ -350,7 +356,7 @@ export class TooltipCallNode extends React.PureComponent<Props> {
         </div>
         {totalBreakdownByCategory.map((_, categoryIndex) =>
           this._maybeRenderOneCategoryGroup(
-            { totalTime, selfTime },
+            { totalTime, selfTime: selfTimeForCategories },
             categoryIndex,
             isHighPrecision
           )
diff --git a/src/profile-logic/profile-data.ts b/src/profile-logic/profile-data.ts
index 6ed16f8483..5efb20d563 100644
--- a/src/profile-logic/profile-data.ts
+++ b/src/profile-logic/profile-data.ts
@@ -1189,6 +1189,10 @@ export type TimingsForPath = {
   // timings for this path
   forPath: ItemTimings;
   rootTime: Milliseconds; // time for all the samples in the current tree
+  // True when the selected call node is the root of an inverted tree (i.e. a
+  // leaf function). In that case selfTime === totalTime, so consumers should
+  // not display a separate self-time category breakdown.
+  isInvertedRoot: boolean;
 };
 
 /**
@@ -1300,16 +1304,17 @@ export function getTimingsForCallNodeIndex(
   /* ------------ Start of the algorithm itself ------------ */
   if (needleNodeIndex === null) {
     // No index was provided, return empty timing information.
-    return { forPath: pathTimings, rootTime };
+    return { forPath: pathTimings, rootTime, isInvertedRoot: false };
   }
 
+  let needleNodeIsRootOfInvertedTree = false;
   const callNodeTable = callNodeInfo.getCallNodeTable();
   const stackIndexToCallNodeIndex =
     callNodeInfo.getStackIndexToNonInvertedCallNodeIndex();
   const callNodeInfoInverted = callNodeInfo.asInverted();
   if (callNodeInfoInverted !== null) {
     // Inverted case
-    const needleNodeIsRootOfInvertedTree =
+    needleNodeIsRootOfInvertedTree =
       callNodeInfoInverted.isRoot(needleNodeIndex);
     const suffixOrderIndexes = callNodeInfoInverted.getSuffixOrderIndexes();
     const [rangeStart, rangeEnd] =
@@ -1338,11 +1343,7 @@ export function getTimingsForCallNodeIndex(
         accumulateDataToTimings(pathTimings.totalTime, sampleIndex, weight);
 
         if (needleNodeIsRootOfInvertedTree) {
-          // This root node matches the passed call node path.
-          // Just increment the selfTime value.
-          // We don't call accumulateDataToTimings(pathTimings.selfTime, ...)
-          // here, mainly because this would be the same as for the total time.
-          pathTimings.selfTime.value += weight;
+          accumulateDataToTimings(pathTimings.selfTime, sampleIndex, weight);
         }
       }
     }
@@ -1379,7 +1380,11 @@ export function getTimingsForCallNodeIndex(
     }
   }
 
-  return { forPath: pathTimings, rootTime };
+  return {
+    forPath: pathTimings,
+    rootTime,
+    isInvertedRoot: needleNodeIsRootOfInvertedTree,
+  };
 }
 
 /**
diff --git a/src/test/store/__snapshots__/profile-view.test.ts.snap b/src/test/store/__snapshots__/profile-view.test.ts.snap
index d39678551b..fa0a6575f8 100644
--- a/src/test/store/__snapshots__/profile-view.test.ts.snap
+++ b/src/test/store/__snapshots__/profile-view.test.ts.snap
@@ -1814,6 +1814,7 @@ Object {
       "value": 2,
     },
   },
+  "isInvertedRoot": false,
   "rootTime": 2,
 }
 `;
diff --git a/src/test/store/profile-view.test.ts b/src/test/store/profile-view.test.ts
index 127d1bca69..58863b5142 100644
--- a/src/test/store/profile-view.test.ts
+++ b/src/test/store/profile-view.test.ts
@@ -2618,6 +2618,7 @@ describe('getTimingsForSidebar', () => {
       };
       expect(timings).toEqual({
         forPath: expectedTiming,
+        isInvertedRoot: false,
         rootTime: 5,
       });
     });
@@ -2663,6 +2664,7 @@ describe('getTimingsForSidebar', () => {
             ]),
           },
         },
+        isInvertedRoot: false,
         rootTime: 5,
       });
     });
@@ -2709,6 +2711,7 @@ describe('getTimingsForSidebar', () => {
 
       expect(timings).toEqual({
         forPath: expectedTiming,
+        isInvertedRoot: false,
         rootTime: 5,
       });
     });
@@ -2787,6 +2790,7 @@ describe('getTimingsForSidebar', () => {
         };
         expect(timings).toEqual({
           forPath: expectedTiming,
+          isInvertedRoot: false,
           rootTime: 4,
         });
       });
@@ -2829,6 +2833,7 @@ describe('getTimingsForSidebar', () => {
         };
         expect(timings).toEqual({
           forPath: expectedTiming,
+          isInvertedRoot: false,
           rootTime: 4,
         });
       });
@@ -2860,6 +2865,7 @@ describe('getTimingsForSidebar', () => {
         };
         expect(timings).toEqual({
           forPath: { selfTime: expectedTiming, totalTime: expectedTiming },
+          isInvertedRoot: false,
           rootTime: 4,
         });
       });
@@ -2902,6 +2908,7 @@ describe('getTimingsForSidebar', () => {
         };
         expect(timings).toEqual({
           forPath: expectedTiming,
+          isInvertedRoot: false,
           rootTime: 4,
         });
       });
@@ -2933,6 +2940,7 @@ describe('getTimingsForSidebar', () => {
         };
         expect(timings).toEqual({
           forPath: { selfTime: expectedTiming, totalTime: expectedTiming },
+          isInvertedRoot: false,
           rootTime: 4,
         });
       });
@@ -2979,15 +2987,11 @@ describe('getTimingsForSidebar', () => {
       };
       expect(timings).toEqual({
         forPath: {
-          selfTime: {
-            // Inverted trees have an empty breakdown for the selftime because
-            // it's always the same values as for totaltime, or 0. For a root
-            // node, the value is non-0 though.
-            ...EMPTY_TIMING,
-            value: 3,
-          },
+          // For inverted root nodes, selfTime === totalTime.
+          selfTime: expectedTiming,
           totalTime: expectedTiming,
         },
+        isInvertedRoot: true,
         rootTime: 5,
       });
     });
@@ -3015,6 +3019,7 @@ describe('getTimingsForSidebar', () => {
             ]),
           },
         },
+        isInvertedRoot: false,
         rootTime: 5,
       });
     });
@@ -3026,24 +3031,27 @@ describe('getTimingsForSidebar', () => {
       } = setupForInvertedTree();
 
       // Select the function as a root node
+      const expectedRootTiming = {
+        value: 1,
+        breakdownByCategory: withSingleSubcategory([
+          0,
+          0,
+          1, // Layout
+          0,
+          0,
+          0,
+          0,
+          0,
+        ]),
+      };
       let timings = getTimingsForPath([H]);
       expect(timings).toEqual({
         forPath: {
-          selfTime: { ...EMPTY_TIMING, value: 1 },
-          totalTime: {
-            value: 1,
-            breakdownByCategory: withSingleSubcategory([
-              0,
-              0,
-              1, // Layout
-              0,
-              0,
-              0,
-              0,
-              0,
-            ]),
-          },
+          // For inverted root nodes, selfTime === totalTime.
+          selfTime: expectedRootTiming,
+          totalTime: expectedRootTiming,
         },
+        isInvertedRoot: true,
         rootTime: 5,
       });
 
@@ -3066,6 +3074,7 @@ describe('getTimingsForSidebar', () => {
             ]),
           },
         },
+        isInvertedRoot: false,
         rootTime: 5,
       });
     });
@@ -3093,6 +3102,7 @@ describe('getTimingsForSidebar', () => {
             ]),
           },
         },
+        isInvertedRoot: false,
         rootTime: 5,
       });
     });
@@ -3178,15 +3188,11 @@ describe('getTimingsForSidebar', () => {
         };
         expect(timings).toEqual({
           forPath: {
-            selfTime: {
-              // selftime breakdowns are always empty for inverted trees because
-              // they're the same than the total time.
-              ...EMPTY_TIMING,
-              // But root nodes have self time value of course!
-              value: 1,
-            },
+            // For inverted root nodes, selfTime === totalTime.
+            selfTime: expectedTiming,
             totalTime: expectedTiming,
           },
+          isInvertedRoot: true,
           rootTime: 4,
         });
       });
@@ -3218,15 +3224,11 @@ describe('getTimingsForSidebar', () => {
         };
         expect(timings).toEqual({
           forPath: {
-            selfTime: {
-              // selftime breakdowns are always empty for inverted trees because
-              // they're the same than the total time.
-              ...EMPTY_TIMING,
-              // But root nodes have a selftime value
-              value: 1,
-            },
+            // For inverted root nodes, selfTime === totalTime.
+            selfTime: expectedTiming,
             totalTime: expectedTiming,
           },
+          isInvertedRoot: true,
           rootTime: 4,
         });
       });
@@ -3256,6 +3258,7 @@ describe('getTimingsForSidebar', () => {
               ]),
             },
           },
+          isInvertedRoot: false,
           rootTime: 4,
         });
       });

From e40c8c26ed2b0c02396242f014e5f75d34fa3514 Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange.moz@gmail.com>
Date: Fri, 6 Mar 2026 21:06:05 -0500
Subject: [PATCH 2/4] Compute each sample's relation to the selected call node.

Samples used to be labelled with a SelectedState, which conflated two
questions: how a sample should be drawn in the activity graph, and how the
sample relates to the selected call node. Split those apart:

 - SampleRelationToNode describes the relation, and distinguishes samples
   whose stack *ends* at the node (TotalAndSelf) from samples which merely
   pass through it (TotalButNotSelf). This will let us share work between the
   activity graph and the sidebar, see the next commit.
 - FillBucket is the old SelectedState, renamed to what it actually is: the
   four fills the activity graph draws per category. It makes no distinction
   between a node's self samples and its non-self samples.

SampleRelationToNode members are written as a FillBucket plus a "self" flag
bit above it, which keeps SampleRelations.fillBucket a single mask rather than
a table lookup, since it runs once per sample in the activity graph's loop.

The per-sample array is now wrapped in a SampleRelations class instead of
being passed around as a bare Uint8Array. A Uint8Array erases its element
type, so indexing one yields a plain number; going through the accessors keeps
the element type visible to the type checker and keeps the bit layout in one
place. Consumers which only care about "filtered out" and "counts towards the
total" use the isFilteredOut and contributesToTotal predicates.

getSampleRelationsToNode takes the node as a parameter and is not named after
the selection, even though every caller here passes the selected node: a later
commit computes relations to the node hovered in the flame graph.
---
 .../shared/thread/ActivityGraph.tsx           |   7 +-
 .../shared/thread/ActivityGraphCanvas.tsx     |   7 +-
 .../shared/thread/ActivityGraphFills.tsx      |  60 ++---
 src/components/shared/thread/CPUGraph.tsx     |   7 +-
 src/components/shared/thread/HeightGraph.tsx  |  11 +-
 src/components/shared/thread/SampleGraph.tsx  |  17 +-
 src/components/shared/thread/StackGraph.tsx   |   7 +-
 src/components/timeline/TrackThread.tsx       |  17 +-
 src/profile-logic/profile-data.ts             | 231 +++++++++++-------
 src/selectors/per-thread/stack-sample.ts      |   7 +-
 src/test/unit/profile-data.test.ts            | 192 ++++++++++-----
 src/types/profile-derived.ts                  |  72 ++++--
 12 files changed, 407 insertions(+), 228 deletions(-)

diff --git a/src/components/shared/thread/ActivityGraph.tsx b/src/components/shared/thread/ActivityGraph.tsx
index 5310970e54..65f1aed588 100644
--- a/src/components/shared/thread/ActivityGraph.tsx
+++ b/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}
diff --git a/src/components/shared/thread/ActivityGraphCanvas.tsx b/src/components/shared/thread/ActivityGraphCanvas.tsx
index 36356a762b..1e4584a25a 100644
--- a/src/components/shared/thread/ActivityGraphCanvas.tsx
+++ b/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!),
diff --git a/src/components/shared/thread/ActivityGraphFills.tsx b/src/components/shared/thread/ActivityGraphFills.tsx
index 0b01e803dd..faf8eade15 100644
--- a/src/components/shared/thread/ActivityGraphFills.tsx
+++ b/src/components/shared/thread/ActivityGraphFills.tsx
@@ -13,7 +13,8 @@ import type {
   DevicePixels,
   CssPixels,
 } from 'firefox-profiler/types';
-import { SelectedState } from 'firefox-profiler/types';
+import { FillBucket } from 'firefox-profiler/types';
+import type { SampleRelations } from 'firefox-profiler/profile-logic/profile-data';
 import type { HoveredPixelState } from './ActivityGraph';
 
 /**
@@ -39,7 +40,7 @@ type RenderedComponentSettings = {
   readonly treeOrderSampleComparator:
     | ((a: IndexIntoSamplesTable, b: IndexIntoSamplesTable) => number)
     | null;
-  readonly sampleSelectedStates: Uint8Array;
+  readonly sampleRelations: SampleRelations;
   readonly categoryDrawStyles: CategoryDrawStyles;
 };
 
@@ -76,17 +77,17 @@ export type CategoryDrawStyles = ReadonlyArray<{
   readonly filteredOutByTransformFillStyle: CanvasPattern | string;
 }>;
 
+const FILL_BUCKET_COUNT = 4;
+
 // These Float32Arrays are mutated in place during the computation step.
-// buffers[selectedState] is the buffer for the given SelectedState enum value.
-type SelectedPercentageAtPixelBuffers = Float32Array<ArrayBuffer>[];
+// buffers[fillBucket] is the buffer for the given FillBucket value.
+type PercentageAtPixelBuffers = Float32Array<ArrayBuffer>[];
 
 export type CpuRatioInTimeRange = {
   readonly cpuRatio: number;
   readonly timeRange: Milliseconds;
 };
 
-const SELECTED_STATE_BUFFER_COUNT = 4;
-
 const BOX_BLUR_RADII = [3, 2, 2];
 const SMOOTHING_RADIUS = 3 + 2 + 2;
 const SMOOTHING_KERNEL: Float32Array<ArrayBuffer> = _getSmoothingKernel(
@@ -97,7 +98,7 @@ const SMOOTHING_KERNEL: Float32Array<ArrayBuffer> = _getSmoothingKernel(
 export function computeActivityGraphFills(
   renderedComponentSettings: RenderedComponentSettings
 ) {
-  const mutablePercentageBuffers = _createSelectedPercentageAtPixelBuffers(
+  const mutablePercentageBuffers = _createPercentageAtPixelBuffers(
     renderedComponentSettings
   );
   const mutableFills = _getCategoryFills(
@@ -132,12 +133,12 @@ export function computeActivityGraphFills(
 export class ActivityGraphFillComputer {
   readonly renderedComponentSettings: RenderedComponentSettings;
   // The fills and percentages are mutated in place.
-  readonly mutablePercentageBuffers: SelectedPercentageAtPixelBuffers[];
+  readonly mutablePercentageBuffers: PercentageAtPixelBuffers[];
   readonly mutableFills: CategoryFill[];
 
   constructor(
     renderedComponentSettings: RenderedComponentSettings,
-    mutablePercentageBuffers: SelectedPercentageAtPixelBuffers[],
+    mutablePercentageBuffers: PercentageAtPixelBuffers[],
     mutableFills: CategoryFill[]
   ) {
     this.renderedComponentSettings = renderedComponentSettings;
@@ -216,7 +217,7 @@ export class ActivityGraphFillComputer {
       interval,
       sampleIndexOffset,
       rangeStart,
-      sampleSelectedStates,
+      sampleRelations,
     } = this.renderedComponentSettings;
 
     if (samples.length === 0) {
@@ -245,8 +246,7 @@ export class ActivityGraphFillComputer {
       const afterSampleCpuPercent = threadCPUPercent[i + 1];
 
       const percentageBuffers = this.mutablePercentageBuffers[category];
-      const selectedState = sampleSelectedStates[i];
-      const percentageBuffer = percentageBuffers[selectedState];
+      const percentageBuffer = percentageBuffers[sampleRelations.fillBucket(i)];
 
       _accumulateInBuffer(
         percentageBuffer,
@@ -273,8 +273,8 @@ export class ActivityGraphFillComputer {
     const nextSampleTime = sampleTime + interval;
     const percentageBuffers = this.mutablePercentageBuffers[lastSampleCategory];
 
-    const selectedState = sampleSelectedStates[lastIdx];
-    const percentageBuffer = percentageBuffers[selectedState];
+    const percentageBuffer =
+      percentageBuffers[sampleRelations.fillBucket(lastIdx)];
 
     _accumulateInBuffer(
       percentageBuffer,
@@ -652,16 +652,16 @@ function _getSmoothingKernel(
  * These buffers can only be used once per fill computation. The buffer values are
  * updated across various method calls.
  */
-function _createSelectedPercentageAtPixelBuffers({
+function _createPercentageAtPixelBuffers({
   categoryDrawStyles,
   canvasPixelWidth,
 }: {
   categoryDrawStyles: CategoryDrawStyles;
   canvasPixelWidth: number;
-}): SelectedPercentageAtPixelBuffers[] {
+}): PercentageAtPixelBuffers[] {
   return categoryDrawStyles.map(() => {
     const percentageBuffers = [];
-    for (let i = 0; i < SELECTED_STATE_BUFFER_COUNT; i++) {
+    for (let i = 0; i < FILL_BUCKET_COUNT; i++) {
       percentageBuffers[i] = new Float32Array(canvasPixelWidth);
     }
     return percentageBuffers;
@@ -669,17 +669,17 @@ function _createSelectedPercentageAtPixelBuffers({
 }
 
 /**
- * For each category, create a fill style for each of 4 draw states. These fill styles
- * are sorted by their gravity.
+ * For each category, create a fill style for each of the 4 fill buckets. These
+ * fill styles are sorted by their gravity.
  *
- * SelectedState.UnselectedOrderedBeforeSelected,
- * SelectedState.Selected,
- * SelectedState.UnselectedOrderedAfterSelected,
- * SelectedState.FilteredOutByTransform
+ * FillBucket.UnselectedOrderedBeforeSelected,
+ * FillBucket.Selected,
+ * FillBucket.UnselectedOrderedAfterSelected,
+ * FillBucket.FilteredOutByTransform
  */
 function _getCategoryFills(
   categoryDrawStyles: CategoryDrawStyles,
-  percentageBuffers: SelectedPercentageAtPixelBuffers[]
+  percentageBuffers: PercentageAtPixelBuffers[]
 ): CategoryFill[] {
   // Sort all of the categories by their gravity.
   const categoryIndexesByGravity = categoryDrawStyles
@@ -693,33 +693,33 @@ function _getCategoryFills(
       const categoryDrawStyle = categoryDrawStyles[categoryIndex];
       const buffer = percentageBuffers[categoryIndex];
       const canvasPixelWidth =
-        buffer[SelectedState.UnselectedOrderedBeforeSelected].length;
-      // For every category we draw four fills, for the four selection kinds:
+        buffer[FillBucket.UnselectedOrderedBeforeSelected].length;
+      // For every category we draw one fill per fill bucket:
       return [
         {
           category: categoryDrawStyle.category,
           fillStyle: categoryDrawStyle.getUnselectedFillStyle(),
           perPixelContribution:
-            buffer[SelectedState.UnselectedOrderedBeforeSelected],
+            buffer[FillBucket.UnselectedOrderedBeforeSelected],
           accumulatedUpperEdge: new Float32Array(canvasPixelWidth),
         },
         {
           category: categoryDrawStyle.category,
           fillStyle: categoryDrawStyle.getSelectedFillStyle(),
-          perPixelContribution: buffer[SelectedState.Selected],
+          perPixelContribution: buffer[FillBucket.Selected],
           accumulatedUpperEdge: new Float32Array(canvasPixelWidth),
         },
         {
           category: categoryDrawStyle.category,
           fillStyle: categoryDrawStyle.getUnselectedFillStyle(),
           perPixelContribution:
-            buffer[SelectedState.UnselectedOrderedAfterSelected],
+            buffer[FillBucket.UnselectedOrderedAfterSelected],
           accumulatedUpperEdge: new Float32Array(canvasPixelWidth),
         },
         {
           category: categoryDrawStyle.category,
           fillStyle: categoryDrawStyle.filteredOutByTransformFillStyle,
-          perPixelContribution: buffer[SelectedState.FilteredOutByTransform],
+          perPixelContribution: buffer[FillBucket.FilteredOutByTransform],
           accumulatedUpperEdge: new Float32Array(canvasPixelWidth),
         },
       ];
diff --git a/src/components/shared/thread/CPUGraph.tsx b/src/components/shared/thread/CPUGraph.tsx
index 6b24cfc716..517c640a5b 100644
--- a/src/components/shared/thread/CPUGraph.tsx
+++ b/src/components/shared/thread/CPUGraph.tsx
@@ -11,12 +11,13 @@ import type {
   IndexIntoSamplesTable,
   Milliseconds,
 } from 'firefox-profiler/types';
+import type { SampleRelations } from 'firefox-profiler/profile-logic/profile-data';
 import type { CallNodeInfo } from 'firefox-profiler/profile-logic/call-node-info';
 
 type Props = {
   readonly className: string;
   readonly thread: Thread;
-  readonly sampleSelectedStates: Uint8Array;
+  readonly sampleRelations: SampleRelations;
   readonly interval: Milliseconds;
   readonly rangeStart: Milliseconds;
   readonly rangeEnd: Milliseconds;
@@ -49,7 +50,7 @@ export class ThreadCPUGraph extends PureComponent<Props> {
     const {
       className,
       thread,
-      sampleSelectedStates,
+      sampleRelations,
       interval,
       rangeStart,
       rangeEnd,
@@ -69,7 +70,7 @@ export class ThreadCPUGraph extends PureComponent<Props> {
         trackName={trackName}
         interval={interval}
         thread={thread}
-        sampleSelectedStates={sampleSelectedStates}
+        sampleRelations={sampleRelations}
         rangeStart={rangeStart}
         rangeEnd={rangeEnd}
         categories={categories}
diff --git a/src/components/shared/thread/HeightGraph.tsx b/src/components/shared/thread/HeightGraph.tsx
index 29a1c57926..beee3fb286 100644
--- a/src/components/shared/thread/HeightGraph.tsx
+++ b/src/components/shared/thread/HeightGraph.tsx
@@ -15,14 +15,14 @@ import type {
   IndexIntoSamplesTable,
   Milliseconds,
 } from 'firefox-profiler/types';
-import { SelectedState } from 'firefox-profiler/types';
+import type { SampleRelations } from 'firefox-profiler/profile-logic/profile-data';
 
 type Props = {
   readonly heightFunc: (param: IndexIntoSamplesTable) => number | null;
   readonly maxValue: number;
   readonly className: string;
   readonly thread: Thread;
-  readonly sampleSelectedStates: Uint8Array;
+  readonly sampleRelations: SampleRelations;
   readonly interval: Milliseconds;
   readonly rangeStart: Milliseconds;
   readonly rangeEnd: Milliseconds;
@@ -64,7 +64,7 @@ export class ThreadHeightGraph extends PureComponent<Props> {
   drawCanvas(canvas: HTMLCanvasElement) {
     const {
       thread,
-      sampleSelectedStates,
+      sampleRelations,
       interval,
       rangeStart,
       rangeEnd,
@@ -130,8 +130,7 @@ export class ThreadHeightGraph extends PureComponent<Props> {
         continue;
       }
 
-      const state = sampleSelectedStates[i] as SelectedState;
-      if (state === SelectedState.FilteredOutByTransform) {
+      if (sampleRelations.isFilteredOut(i)) {
         continue;
       }
 
@@ -144,7 +143,7 @@ export class ThreadHeightGraph extends PureComponent<Props> {
 
       const xPos = (sampleTime - range[0]) * xPixelsPerMs;
       let samplesBucket;
-      if (state === SelectedState.Selected) {
+      if (sampleRelations.contributesToTotal(i)) {
         samplesBucket = highlightedSamples;
       } else {
         const categoryIndex = thread.samples.category[i];
diff --git a/src/components/shared/thread/SampleGraph.tsx b/src/components/shared/thread/SampleGraph.tsx
index 344b006d46..202341aa35 100644
--- a/src/components/shared/thread/SampleGraph.tsx
+++ b/src/components/shared/thread/SampleGraph.tsx
@@ -27,7 +27,7 @@ import type {
   CssPixels,
   ImplementationFilter,
 } from 'firefox-profiler/types';
-import { SelectedState } from 'firefox-profiler/types';
+import type { SampleRelations } from 'firefox-profiler/profile-logic/profile-data';
 import type { SizeProps } from 'firefox-profiler/components/shared/WithSize';
 import { lightDark } from 'firefox-profiler/utils/dark-mode';
 
@@ -38,7 +38,7 @@ export type HoveredPixelState = {
 type Props = {
   readonly className: string;
   readonly thread: Thread;
-  readonly sampleSelectedStates: Uint8Array;
+  readonly sampleRelations: SampleRelations;
   readonly interval: Milliseconds;
   readonly rangeStart: Milliseconds;
   readonly rangeEnd: Milliseconds;
@@ -62,7 +62,7 @@ type State = {
 type CanvasProps = {
   readonly className: string;
   readonly thread: Thread;
-  readonly sampleSelectedStates: Uint8Array;
+  readonly sampleRelations: SampleRelations;
   readonly interval: Milliseconds;
   readonly rangeStart: Milliseconds;
   readonly rangeEnd: Milliseconds;
@@ -137,7 +137,7 @@ class ThreadSampleGraphCanvas extends React.PureComponent<CanvasProps> {
       interval,
       rangeStart,
       rangeEnd,
-      sampleSelectedStates,
+      sampleRelations,
       categories,
       width,
       height,
@@ -187,14 +187,13 @@ class ThreadSampleGraphCanvas extends React.PureComponent<CanvasProps> {
       if (sampleTime < nextMinTime) {
         continue;
       }
-      const state = sampleSelectedStates[i] as SelectedState;
-      if (state === SelectedState.FilteredOutByTransform) {
+      if (sampleRelations.isFilteredOut(i)) {
         continue;
       }
       const xPos =
         (sampleTime - rangeStart) * xPixelsPerMs - drawnSampleWidth / 2;
       let samplesBucket;
-      if (state === SelectedState.Selected) {
+      if (sampleRelations.contributesToTotal(i)) {
         samplesBucket = highlightedSamples;
       } else {
         const categoryIndex = thread.samples.category[i];
@@ -343,7 +342,7 @@ export class ThreadSampleGraphImpl extends PureComponent<Props, State> {
       interval,
       rangeStart,
       rangeEnd,
-      sampleSelectedStates,
+      sampleRelations,
       width,
       height,
       zeroAt,
@@ -365,7 +364,7 @@ export class ThreadSampleGraphImpl extends PureComponent<Props, State> {
           thread={thread}
           rangeStart={rangeStart}
           rangeEnd={rangeEnd}
-          sampleSelectedStates={sampleSelectedStates}
+          sampleRelations={sampleRelations}
           categories={categories}
           width={width}
           height={height}
diff --git a/src/components/shared/thread/StackGraph.tsx b/src/components/shared/thread/StackGraph.tsx
index 1ace89ac3e..d48be60b7a 100644
--- a/src/components/shared/thread/StackGraph.tsx
+++ b/src/components/shared/thread/StackGraph.tsx
@@ -12,12 +12,13 @@ import type {
   Milliseconds,
   IndexIntoCallNodeTable,
 } from 'firefox-profiler/types';
+import type { SampleRelations } from 'firefox-profiler/profile-logic/profile-data';
 import type { CallNodeInfo } from 'firefox-profiler/profile-logic/call-node-info';
 
 type Props = {
   readonly className: string;
   readonly thread: Thread;
-  readonly sampleSelectedStates: Uint8Array;
+  readonly sampleRelations: SampleRelations;
   readonly sampleNonInvertedCallNodes: Array<IndexIntoCallNodeTable | null>;
   readonly interval: Milliseconds;
   readonly rangeStart: Milliseconds;
@@ -49,7 +50,7 @@ export class ThreadStackGraph extends PureComponent<Props> {
     const {
       className,
       thread,
-      sampleSelectedStates,
+      sampleRelations,
       interval,
       rangeStart,
       rangeEnd,
@@ -75,7 +76,7 @@ export class ThreadStackGraph extends PureComponent<Props> {
         trackName={trackName}
         interval={interval}
         thread={thread}
-        sampleSelectedStates={sampleSelectedStates}
+        sampleRelations={sampleRelations}
         rangeStart={rangeStart}
         rangeEnd={rangeEnd}
         categories={categories}
diff --git a/src/components/timeline/TrackThread.tsx b/src/components/timeline/TrackThread.tsx
index b0ee5338a6..c51e33363d 100644
--- a/src/components/timeline/TrackThread.tsx
+++ b/src/components/timeline/TrackThread.tsx
@@ -56,6 +56,7 @@ import type {
   State,
   ThreadsKey,
 } from 'firefox-profiler/types';
+import type { SampleRelations } from 'firefox-profiler/profile-logic/profile-data';
 import type { CallNodeInfo } from 'firefox-profiler/profile-logic/call-node-info';
 
 import type { ConnectedProps } from 'firefox-profiler/utils/connect';
@@ -80,7 +81,7 @@ type StateProps = {
   readonly categories: CategoryList;
   readonly timelineType: TimelineType;
   readonly hasFileIoMarkers: boolean;
-  readonly sampleSelectedStates: Uint8Array;
+  readonly sampleRelations: SampleRelations;
   readonly sampleNonInvertedCallNodes: Array<IndexIntoCallNodeTable | null>;
   readonly treeOrderSampleComparator: (
     a: IndexIntoSamplesTable,
@@ -181,7 +182,7 @@ class TimelineTrackThreadImpl extends PureComponent<Props> {
       hasFileIoMarkers,
       showMemoryMarkers,
       sampleNonInvertedCallNodes,
-      sampleSelectedStates,
+      sampleRelations,
       treeOrderSampleComparator,
       trackType,
       trackName,
@@ -252,7 +253,7 @@ class TimelineTrackThreadImpl extends PureComponent<Props> {
               sampleIndexOffset={sampleIndexOffset}
               onSampleClick={this._onSampleClick}
               categories={categories}
-              sampleSelectedStates={sampleSelectedStates}
+              sampleRelations={sampleRelations}
               treeOrderSampleComparator={treeOrderSampleComparator}
               implementationFilter={implementationFilter}
               zeroAt={zeroAt}
@@ -266,7 +267,7 @@ class TimelineTrackThreadImpl extends PureComponent<Props> {
                 thread={filteredThread}
                 rangeStart={rangeStart}
                 rangeEnd={rangeEnd}
-                sampleSelectedStates={sampleSelectedStates}
+                sampleRelations={sampleRelations}
                 categories={categories}
                 onSampleClick={this._onSampleClick}
                 implementationFilter={implementationFilter}
@@ -284,7 +285,7 @@ class TimelineTrackThreadImpl extends PureComponent<Props> {
                 rangeStart={rangeStart}
                 rangeEnd={rangeEnd}
                 callNodeInfo={callNodeInfo}
-                sampleSelectedStates={sampleSelectedStates}
+                sampleRelations={sampleRelations}
                 categories={categories}
                 onSampleClick={this._onSampleClick}
               />
@@ -300,7 +301,7 @@ class TimelineTrackThreadImpl extends PureComponent<Props> {
             rangeEnd={rangeEnd}
             callNodeInfo={callNodeInfo}
             sampleNonInvertedCallNodes={sampleNonInvertedCallNodes}
-            sampleSelectedStates={sampleSelectedStates}
+            sampleRelations={sampleRelations}
             categories={categories}
             onSampleClick={this._onSampleClick}
           />
@@ -348,8 +349,8 @@ export const TimelineTrackThread = explicitConnect<
       timelineType,
       hasFileIoMarkers:
         selectors.getTimelineFileIoMarkerIndexes(state).length !== 0,
-      sampleSelectedStates:
-        selectors.getSampleSelectedStatesInFilteredThread(state),
+      sampleRelations:
+        selectors.getSampleRelationsToSelectedNodeInFilteredThread(state),
       treeOrderSampleComparator:
         selectors.getTreeOrderComparatorInFilteredThread(state),
       selectedThreadIndexes,
diff --git a/src/profile-logic/profile-data.ts b/src/profile-logic/profile-data.ts
index 5efb20d563..e91e1beed0 100644
--- a/src/profile-logic/profile-data.ts
+++ b/src/profile-logic/profile-data.ts
@@ -42,6 +42,14 @@ import {
   numberSeriesFromDeltas,
   numberSeriesToDeltas,
 } from 'firefox-profiler/utils/number-series';
+import {
+  ResourceType,
+  FrameFlag,
+  FuncFlag,
+  SampleRelationToNode,
+  FillBucket,
+  FILL_BUCKET_MASK,
+} from 'firefox-profiler/types';
 
 import type { StringTable } from 'firefox-profiler/utils/string-table';
 import type {
@@ -110,12 +118,6 @@ import type {
   SampleCategoriesAndSubcategories,
   SourceLocationTable,
 } from 'firefox-profiler/types';
-import {
-  SelectedState,
-  ResourceType,
-  FrameFlag,
-  FuncFlag,
-} from 'firefox-profiler/types';
 import type { CallNodeInfo, SuffixOrderIndex } from './call-node-info';
 import {
   toFloat64Array,
@@ -983,47 +985,49 @@ export function getSampleIndexToCallNodeIndex(
 }
 
 /**
- * This is an implementation of getSampleSelectedStates for just the case where
- * no call node is selected.
+ * This is an implementation of getSampleRelationsToNode for just the
+ * case where no node is given.
  */
-function _getSampleSelectedStatesForNoSelection(
+function _getSampleRelationsForNoNode(
   sampleCallNodes: Array<IndexIntoCallNodeTable | null>
-): Uint8Array {
-  const result = new Uint8Array(sampleCallNodes.length);
+): SampleRelations {
+  const relations = new Uint8Array(sampleCallNodes.length);
   for (
     let sampleIndex = 0;
     sampleIndex < sampleCallNodes.length;
     sampleIndex++
   ) {
-    // When there's no selected call node, we don't want to shadow everything
-    // because everything is unselected. So let's pretend that
-    // everything is selected so that anything not filtered out will be nicely
-    // visible.
-    let sampleSelectedState = SelectedState.Selected;
+    // With no needle node there is nothing to highlight, and we don't want to
+    // shadow the whole graph. So let's pretend that every sample is part of the
+    // needle's total, so that anything not filtered out stays nicely visible.
+    // There is no node to be the "self" node of, so the choice between
+    // TotalAndSelf and TotalButNotSelf is arbitrary here; only
+    // SampleRelations.contributesToTotal is meaningful in this case.
+    let sampleRelation = SampleRelationToNode.TotalAndSelf;
 
     // But we still want to display filtered-out samples differently.
     const callNodeIndex = sampleCallNodes[sampleIndex];
     if (callNodeIndex === null) {
-      sampleSelectedState = SelectedState.FilteredOutByTransform;
+      sampleRelation = SampleRelationToNode.FilteredOut;
     }
 
-    result[sampleIndex] = sampleSelectedState;
+    relations[sampleIndex] = sampleRelation;
   }
-  return result;
+  return new SampleRelations(relations);
 }
 
 /**
- * Given the call node for each sample and the selected call node,
- * compute each sample's selected state.
+ * Given the call node for each sample and the needle call node,
+ * compute each sample's relation to the needle call node.
  *
- * For samples that are not filtered out, the sample's selected state is based
- * on the relation of the sample's call node to the selected call node: Any call
- * nodes in the selected node's subtree are "selected"; all other nodes are
- * either "before" or "after" the selected subtree.
+ * For samples that are not filtered out, the relation is based on the position
+ * of the sample's call node relative to the needle call node: Any call nodes
+ * in the needle node's subtree count towards its total time; all other nodes
+ * are either "before" or "after" the needle subtree.
  *
  * Call node tables are ordered in depth-first traversal order, so we can
  * determine whether a node is before, inside or after a subtree simply by
- * comparing the call node index to the "selected index range". Example:
+ * comparing the call node index to the "needle index range". Example:
  *
  * ```
  * before, 0
@@ -1039,14 +1043,14 @@ function _getSampleSelectedStatesForNoSelection(
  *     before, 10
  *       before, 11
  *     before, 12
- *     selected, 13 <-- selected node
- *       selected, 14
- *         selected, 15
- *           selected, 16
- *         selected, 17
- *       selected, 18
- *         selected, 19
- *         selected, 20
+ *     totalAndSelf, 13 <-- needle node
+ *       total, 14
+ *         total, 15
+ *           total, 16
+ *         total, 17
+ *       total, 18
+ *         total, 19
+ *         total, 20
  *     after, 21
  *       after, 22
  *     after, 23
@@ -1056,101 +1060,162 @@ function _getSampleSelectedStatesForNoSelection(
  *   after, 27
  * ```
  *
- * In this example, the selected node has index 13 and the "selected index range"
+ * In this example, the needle node has index 13 and the "needle index range"
  * is the range from 13 to 21 (not including 21).
  */
-function _getSampleSelectedStatesNonInverted(
+function _getSampleRelationsNonInverted(
   sampleCallNodes: Array<IndexIntoCallNodeTable | null>,
-  selectedCallNodeIndex: IndexIntoCallNodeTable,
+  needleNodeIndex: IndexIntoCallNodeTable,
   callNodeInfo: CallNodeInfo
-): Uint8Array {
+): SampleRelations {
   const callNodeTable = callNodeInfo.getCallNodeTable();
-  const selectedCallNodeDescendantsEndIndex =
-    callNodeTable.subtreeRangeEnd[selectedCallNodeIndex];
+  const needleDescendantsEndIndex =
+    callNodeTable.subtreeRangeEnd[needleNodeIndex];
   const sampleCount = sampleCallNodes.length;
-  const sampleSelectedStates = new Uint8Array(sampleCount);
+  const relations = new Uint8Array(sampleCount);
   for (let sampleIndex = 0; sampleIndex < sampleCount; sampleIndex++) {
-    let sampleSelectedState: SelectedState = SelectedState.Selected;
+    let sampleRelation: SampleRelationToNode = SampleRelationToNode.FilteredOut;
     const callNodeIndex = sampleCallNodes[sampleIndex];
     if (callNodeIndex !== null) {
-      if (callNodeIndex < selectedCallNodeIndex) {
-        sampleSelectedState = SelectedState.UnselectedOrderedBeforeSelected;
-      } else if (callNodeIndex < selectedCallNodeDescendantsEndIndex) {
-        sampleSelectedState = SelectedState.Selected;
+      if (callNodeIndex < needleNodeIndex) {
+        sampleRelation = SampleRelationToNode.Before;
+      } else if (callNodeIndex === needleNodeIndex) {
+        sampleRelation = SampleRelationToNode.TotalAndSelf;
+      } else if (callNodeIndex < needleDescendantsEndIndex) {
+        sampleRelation = SampleRelationToNode.TotalButNotSelf;
       } else {
-        sampleSelectedState = SelectedState.UnselectedOrderedAfterSelected;
+        sampleRelation = SampleRelationToNode.After;
       }
-    } else {
-      // This sample was filtered out.
-      sampleSelectedState = SelectedState.FilteredOutByTransform;
     }
-    sampleSelectedStates[sampleIndex] = sampleSelectedState;
+    relations[sampleIndex] = sampleRelation;
   }
-  return sampleSelectedStates;
+  return new SampleRelations(relations);
 }
 
 /**
- * The implementation of getSampleSelectedStates for the inverted tree.
+ * The implementation of getSampleRelationsToNode for the inverted tree.
  *
  * This uses the suffix order, see the documentation of CallNodeInfoInverted.
  */
-function _getSampleSelectedStatesInverted(
+function _getSampleRelationsInverted(
   sampleNonInvertedCallNodes: Array<IndexIntoCallNodeTable | null>,
-  selectedInvertedCallNodeIndex: IndexIntoCallNodeTable,
+  needleInvertedNodeIndex: IndexIntoCallNodeTable,
   callNodeInfo: CallNodeInfoInverted
-): Uint8Array {
+): SampleRelations {
   const suffixOrderIndexes = callNodeInfo.getSuffixOrderIndexes();
-  const [selectedSubtreeRangeStart, selectedSubtreeRangeEnd] =
-    callNodeInfo.getSuffixOrderIndexRangeForCallNode(
-      selectedInvertedCallNodeIndex
-    );
+  const [needleSubtreeRangeStart, needleSubtreeRangeEnd] =
+    callNodeInfo.getSuffixOrderIndexRangeForCallNode(needleInvertedNodeIndex);
+  // In an inverted tree, self time is attributed exclusively to the roots, so
+  // only a root's subtree samples can be "self" samples.
+  const isInvertedRoot = callNodeInfo.isRoot(needleInvertedNodeIndex);
   const sampleCount = sampleNonInvertedCallNodes.length;
-  const sampleSelectedStates = new Uint8Array(sampleCount);
+  const relations = new Uint8Array(sampleCount);
   for (let sampleIndex = 0; sampleIndex < sampleCount; sampleIndex++) {
-    let sampleSelectedState: SelectedState = SelectedState.Selected;
+    let sampleRelation: SampleRelationToNode = SampleRelationToNode.FilteredOut;
     const callNodeIndex = sampleNonInvertedCallNodes[sampleIndex];
     if (callNodeIndex !== null) {
       const suffixOrderIndex = suffixOrderIndexes[callNodeIndex];
-      if (suffixOrderIndex < selectedSubtreeRangeStart) {
-        sampleSelectedState = SelectedState.UnselectedOrderedBeforeSelected;
-      } else if (suffixOrderIndex >= selectedSubtreeRangeEnd) {
-        sampleSelectedState = SelectedState.UnselectedOrderedAfterSelected;
+      if (suffixOrderIndex < needleSubtreeRangeStart) {
+        sampleRelation = SampleRelationToNode.Before;
+      } else if (suffixOrderIndex >= needleSubtreeRangeEnd) {
+        sampleRelation = SampleRelationToNode.After;
+      } else {
+        sampleRelation = isInvertedRoot
+          ? SampleRelationToNode.TotalAndSelf
+          : SampleRelationToNode.TotalButNotSelf;
       }
-    } else {
-      // This sample was filtered out.
-      sampleSelectedState = SelectedState.FilteredOutByTransform;
     }
-    sampleSelectedStates[sampleIndex] = sampleSelectedState;
+    relations[sampleIndex] = sampleRelation;
+  }
+  return new SampleRelations(relations);
+}
+
+/**
+ * A SampleRelationToNode for every sample in a thread, describing how each
+ * sample relates to one particular call node. That is usually the selected
+ * call node, but it can be another node, e.g. the node hovered in the flame
+ * graph.
+ *
+ * This wraps the Uint8Array rather than exposing it because a Uint8Array erases
+ * its element type: indexing one yields a plain `number`, so nothing stops a
+ * caller from comparing it against an unrelated enum, or from forgetting that
+ * a node's samples are split across TotalAndSelf and TotalButNotSelf. Going
+ * through these accessors keeps the element type visible to the type checker,
+ * and keeps the bit layout of SampleRelationToNode in one place.
+ *
+ * Every accessor here is a single typed array load plus at most a mask and a
+ * comparison, because they are called once per sample in the activity graph's
+ * and the sample graphs' draw loops.
+ */
+export class SampleRelations {
+  _relations: Uint8Array;
+
+  constructor(relations: Uint8Array) {
+    this._relations = relations;
+  }
+
+  get(sampleIndex: IndexIntoSamplesTable): SampleRelationToNode {
+    return this._relations[sampleIndex] as SampleRelationToNode;
+  }
+
+  /**
+   * Which of the activity graph's fill buckets the sample contributes to. This
+   * discards the sample's "self" bit; see SampleRelationToNode for the layout
+   * that makes this a plain mask.
+   */
+  fillBucket(sampleIndex: IndexIntoSamplesTable): FillBucket {
+    return (this._relations[sampleIndex] & FILL_BUCKET_MASK) as FillBucket;
+  }
+
+  /**
+   * Whether the sample was filtered out, e.g. by a search or by a call tree
+   * transform.
+   */
+  isFilteredOut(sampleIndex: IndexIntoSamplesTable): boolean {
+    return this.get(sampleIndex) === SampleRelationToNode.FilteredOut;
+  }
+
+  /**
+   * Whether the sample's stack runs through the node, i.e. whether the sample
+   * counts towards the node's total time. True for both TotalAndSelf and
+   * TotalButNotSelf samples.
+   */
+  contributesToTotal(sampleIndex: IndexIntoSamplesTable): boolean {
+    return this.fillBucket(sampleIndex) === FillBucket.Selected;
+  }
+
+  toArrayForTesting(): SampleRelationToNode[] {
+    return Array.from(this._relations) as SampleRelationToNode[];
   }
-  return sampleSelectedStates;
 }
 
 /**
- * Go through the samples, and determine their current state with respect to
- * the selection.
+ * Go through the samples, and determine how each of them relates to the given
+ * needle node. Pass null for the needle node to treat every sample as part of
+ * the needle's total; see _getSampleRelationsForNoNode.
  *
  * This is used in the activity graph. The "ordering" is used so that samples
  * from the same subtree (in the call tree) "clump together" in the graph.
  */
-export function getSampleSelectedStates(
+export function getSampleRelationsToNode(
   callNodeInfo: CallNodeInfo,
   sampleNonInvertedCallNodes: Array<IndexIntoCallNodeTable | null>,
-  selectedCallNodeIndex: IndexIntoCallNodeTable | null
-): Uint8Array {
-  if (selectedCallNodeIndex === null || selectedCallNodeIndex === -1) {
-    return _getSampleSelectedStatesForNoSelection(sampleNonInvertedCallNodes);
+  needleNodeIndex: IndexIntoCallNodeTable | null
+): SampleRelations {
+  if (needleNodeIndex === null || needleNodeIndex === -1) {
+    return _getSampleRelationsForNoNode(sampleNonInvertedCallNodes);
   }
 
   const callNodeInfoInverted = callNodeInfo.asInverted();
   return callNodeInfoInverted !== null
-    ? _getSampleSelectedStatesInverted(
+    ? _getSampleRelationsInverted(
         sampleNonInvertedCallNodes,
-        selectedCallNodeIndex,
+        needleNodeIndex,
         callNodeInfoInverted
       )
-    : _getSampleSelectedStatesNonInverted(
+    : _getSampleRelationsNonInverted(
         sampleNonInvertedCallNodes,
-        selectedCallNodeIndex,
+        needleNodeIndex,
         callNodeInfo
       );
 }
@@ -3857,7 +3922,7 @@ export function isSampleWithNonEmptyStack(
  *
  * This order is used for the activity graph. The tree order comparator is used
  * specifically for hit testing, but we also compare call nodes in the same way
- * in mapCallNodeSelectedStatesToSamples, which is what gets used for determining
+ * in getSampleRelationsToNode, which is what gets used for determining
  * which areas of the graph to draw in with the selection highlight fill.
  *
  * "Ordered after" means "swims on top in the activity graph".
diff --git a/src/selectors/per-thread/stack-sample.ts b/src/selectors/per-thread/stack-sample.ts
index 97c5e38283..f3e617991f 100644
--- a/src/selectors/per-thread/stack-sample.ts
+++ b/src/selectors/per-thread/stack-sample.ts
@@ -47,6 +47,7 @@ import type {
   CallNodeInfo,
   CallNodeInfoInverted,
 } from 'firefox-profiler/profile-logic/call-node-info';
+import type { SampleRelations } from 'firefox-profiler/profile-logic/profile-data';
 
 import type { ThreadSelectorsPerThread } from './thread';
 import type { MarkerSelectorsPerThread } from './markers';
@@ -277,7 +278,7 @@ export function getStackAndSampleSelectorsPerThread(
     ProfileData.getSampleIndexToCallNodeIndex
   );
 
-  const getSampleSelectedStatesInFilteredThread: Selector<Uint8Array> =
+  const getSampleRelationsToSelectedNodeInFilteredThread: Selector<SampleRelations> =
     createSelector(
       getSampleIndexToNonInvertedCallNodeIndexForFilteredThread,
       getCallNodeInfo,
@@ -287,7 +288,7 @@ export function getStackAndSampleSelectorsPerThread(
         callNodeInfo,
         selectedCallNode
       ) => {
-        return ProfileData.getSampleSelectedStates(
+        return ProfileData.getSampleRelationsToNode(
           callNodeInfo,
           sampleIndexToNonInvertedCallNodeIndex,
           selectedCallNode
@@ -609,7 +610,7 @@ export function getStackAndSampleSelectorsPerThread(
     getExpandedCallNodePaths,
     getExpandedCallNodeIndexes,
     getSampleIndexToNonInvertedCallNodeIndexForFilteredThread,
-    getSampleSelectedStatesInFilteredThread,
+    getSampleRelationsToSelectedNodeInFilteredThread,
     getTreeOrderComparatorInFilteredThread,
     getCallTree,
     getNonInvertedCallTree,
diff --git a/src/test/unit/profile-data.test.ts b/src/test/unit/profile-data.test.ts
index 4d17eb69d8..0e83649442 100644
--- a/src/test/unit/profile-data.test.ts
+++ b/src/test/unit/profile-data.test.ts
@@ -18,7 +18,8 @@ import {
   getSampleIndexClosestToStartTime,
   getSampleIndexToCallNodeIndex,
   getTreeOrderComparator,
-  getSampleSelectedStates,
+  getSampleRelationsToNode,
+  SampleRelations,
   extractProfileFilterPageData,
   findAddressProofForFile,
   calculateFunctionSizeLowerBound,
@@ -66,7 +67,8 @@ import type {
   IndexIntoNativeSymbolTable,
 } from 'firefox-profiler/types';
 import {
-  SelectedState,
+  SampleRelationToNode,
+  FillBucket,
   ResourceType,
   FrameFlag,
   FuncFlag,
@@ -1014,7 +1016,57 @@ describe('funcHasDirectRecursiveCall and funcHasRecursiveCall', function () {
   });
 });
 
-describe('getSampleSelectedStates', function () {
+describe('SampleRelations', function () {
+  // SampleRelations.fillBucket recovers a relation's fill bucket with a single
+  // mask rather than a lookup table, which only works as long as every
+  // SampleRelationToNode is laid out as its FillBucket plus flag bits above
+  // it. Pin that layout down here, so that adding a relation which breaks it
+  // fails loudly instead of silently drawing samples into the wrong fill.
+  const expectedBuckets: Array<[SampleRelationToNode, FillBucket]> = [
+    [SampleRelationToNode.FilteredOut, FillBucket.FilteredOutByTransform],
+    [SampleRelationToNode.TotalButNotSelf, FillBucket.Selected],
+    [SampleRelationToNode.TotalAndSelf, FillBucket.Selected],
+    [SampleRelationToNode.Before, FillBucket.UnselectedOrderedBeforeSelected],
+    [SampleRelationToNode.After, FillBucket.UnselectedOrderedAfterSelected],
+  ];
+
+  const relations = new SampleRelations(
+    new Uint8Array(expectedBuckets.map(([relation]) => relation))
+  );
+
+  it('maps every relation to the right fill bucket', function () {
+    expect(expectedBuckets.map((_, i) => relations.fillBucket(i))).toEqual(
+      expectedBuckets.map(([, bucket]) => bucket)
+    );
+  });
+
+  it('round-trips every relation through get', function () {
+    expect(relations.toArrayForTesting()).toEqual(
+      expectedBuckets.map(([relation]) => relation)
+    );
+    expect(expectedBuckets.map((_, i) => relations.get(i))).toEqual(
+      expectedBuckets.map(([relation]) => relation)
+    );
+  });
+
+  it('treats only FilteredOut as filtered out', function () {
+    expect(expectedBuckets.map((_, i) => relations.isFilteredOut(i))).toEqual([
+      true,
+      false,
+      false,
+      false,
+      false,
+    ]);
+  });
+
+  it('counts both self and non-self samples towards the total', function () {
+    expect(
+      expectedBuckets.map((_, i) => relations.contributesToTotal(i))
+    ).toEqual([false, true, true, false, false]);
+  });
+});
+
+describe('getSampleRelationsToNode', function () {
   function setup(textSamples: string) {
     const {
       derivedThreads,
@@ -1064,44 +1116,56 @@ describe('getSampleSelectedStates', function () {
 
     it('determines the selection status of all the samples', function () {
       expect(
-        Array.from(getSampleSelectedStates(callNodeInfo, sampleCallNodes, A_B))
+        getSampleRelationsToNode(
+          callNodeInfo,
+          sampleCallNodes,
+          A_B
+        ).toArrayForTesting()
       ).toEqual([
-        SelectedState.Selected,
-        SelectedState.UnselectedOrderedAfterSelected,
-        SelectedState.Selected,
-        SelectedState.UnselectedOrderedAfterSelected,
-        SelectedState.UnselectedOrderedAfterSelected,
+        SampleRelationToNode.TotalButNotSelf,
+        SampleRelationToNode.After,
+        SampleRelationToNode.TotalButNotSelf,
+        SampleRelationToNode.After,
+        SampleRelationToNode.After,
       ]);
       expect(
-        Array.from(getSampleSelectedStates(callNodeInfo, sampleCallNodes, A_D))
+        getSampleRelationsToNode(
+          callNodeInfo,
+          sampleCallNodes,
+          A_D
+        ).toArrayForTesting()
       ).toEqual([
-        SelectedState.UnselectedOrderedBeforeSelected,
-        SelectedState.Selected,
-        SelectedState.UnselectedOrderedBeforeSelected,
-        SelectedState.Selected,
-        SelectedState.Selected,
+        SampleRelationToNode.Before,
+        SampleRelationToNode.TotalButNotSelf,
+        SampleRelationToNode.Before,
+        SampleRelationToNode.TotalButNotSelf,
+        SampleRelationToNode.TotalAndSelf,
       ]);
       expect(
-        Array.from(
-          getSampleSelectedStates(callNodeInfo, sampleCallNodes, A_B_F)
-        )
+        getSampleRelationsToNode(
+          callNodeInfo,
+          sampleCallNodes,
+          A_B_F
+        ).toArrayForTesting()
       ).toEqual([
-        SelectedState.UnselectedOrderedBeforeSelected,
-        SelectedState.UnselectedOrderedAfterSelected,
-        SelectedState.Selected,
-        SelectedState.UnselectedOrderedAfterSelected,
-        SelectedState.UnselectedOrderedAfterSelected,
+        SampleRelationToNode.Before,
+        SampleRelationToNode.After,
+        SampleRelationToNode.TotalAndSelf,
+        SampleRelationToNode.After,
+        SampleRelationToNode.After,
       ]);
       expect(
-        Array.from(
-          getSampleSelectedStates(callNodeInfo, sampleCallNodes, A_D_E)
-        )
+        getSampleRelationsToNode(
+          callNodeInfo,
+          sampleCallNodes,
+          A_D_E
+        ).toArrayForTesting()
       ).toEqual([
-        SelectedState.UnselectedOrderedBeforeSelected,
-        SelectedState.Selected,
-        SelectedState.UnselectedOrderedBeforeSelected,
-        SelectedState.UnselectedOrderedAfterSelected,
-        SelectedState.UnselectedOrderedBeforeSelected,
+        SampleRelationToNode.Before,
+        SampleRelationToNode.TotalAndSelf,
+        SampleRelationToNode.Before,
+        SampleRelationToNode.After,
+        SampleRelationToNode.Before,
       ]);
     });
 
@@ -1164,47 +1228,53 @@ describe('getSampleSelectedStates', function () {
       // Test B <- A <- ...
       // Only samples 2 and 6 have stacks ending in ... -> A -> B
       expect(
-        Array.from(
-          getSampleSelectedStates(callNodeInfoInverted, sampleCallNodes, inBA)
-        )
+        getSampleRelationsToNode(
+          callNodeInfoInverted,
+          sampleCallNodes,
+          inBA
+        ).toArrayForTesting()
       ).toEqual([
-        SelectedState.UnselectedOrderedBeforeSelected,
-        SelectedState.UnselectedOrderedBeforeSelected,
-        SelectedState.Selected,
-        SelectedState.UnselectedOrderedBeforeSelected,
-        SelectedState.UnselectedOrderedAfterSelected,
-        SelectedState.UnselectedOrderedAfterSelected,
-        SelectedState.Selected,
+        SampleRelationToNode.Before,
+        SampleRelationToNode.Before,
+        SampleRelationToNode.TotalButNotSelf,
+        SampleRelationToNode.Before,
+        SampleRelationToNode.After,
+        SampleRelationToNode.After,
+        SampleRelationToNode.TotalButNotSelf,
       ]);
       // Test C <- B <- A <- ...
       // Only sample 5 has a stack ending in ... -> A -> B -> C
       expect(
-        Array.from(
-          getSampleSelectedStates(callNodeInfoInverted, sampleCallNodes, inCBA)
-        )
+        getSampleRelationsToNode(
+          callNodeInfoInverted,
+          sampleCallNodes,
+          inCBA
+        ).toArrayForTesting()
       ).toEqual([
-        SelectedState.UnselectedOrderedBeforeSelected,
-        SelectedState.UnselectedOrderedBeforeSelected,
-        SelectedState.UnselectedOrderedBeforeSelected,
-        SelectedState.UnselectedOrderedBeforeSelected,
-        SelectedState.UnselectedOrderedBeforeSelected,
-        SelectedState.Selected,
-        SelectedState.UnselectedOrderedBeforeSelected,
+        SampleRelationToNode.Before,
+        SampleRelationToNode.Before,
+        SampleRelationToNode.Before,
+        SampleRelationToNode.Before,
+        SampleRelationToNode.Before,
+        SampleRelationToNode.TotalButNotSelf,
+        SampleRelationToNode.Before,
       ]);
       // Test B <- ...
       // Only samples 2 and 6 have stacks ending in ... -> B
       expect(
-        Array.from(
-          getSampleSelectedStates(callNodeInfoInverted, sampleCallNodes, inB)
-        )
+        getSampleRelationsToNode(
+          callNodeInfoInverted,
+          sampleCallNodes,
+          inB
+        ).toArrayForTesting()
       ).toEqual([
-        SelectedState.UnselectedOrderedBeforeSelected,
-        SelectedState.UnselectedOrderedBeforeSelected,
-        SelectedState.Selected,
-        SelectedState.UnselectedOrderedBeforeSelected,
-        SelectedState.UnselectedOrderedAfterSelected,
-        SelectedState.UnselectedOrderedAfterSelected,
-        SelectedState.Selected,
+        SampleRelationToNode.Before,
+        SampleRelationToNode.Before,
+        SampleRelationToNode.TotalAndSelf,
+        SampleRelationToNode.Before,
+        SampleRelationToNode.After,
+        SampleRelationToNode.After,
+        SampleRelationToNode.TotalAndSelf,
       ]);
     });
 
diff --git a/src/types/profile-derived.ts b/src/types/profile-derived.ts
index b93f55826d..682c845df5 100644
--- a/src/types/profile-derived.ts
+++ b/src/types/profile-derived.ts
@@ -787,22 +787,62 @@ export type RemoveProfileInformation = {
 };
 
 /**
- * This const enum is used to decide how to highlight and stripe areas in the
- * timeline.
- */
-export const enum SelectedState {
-  // Samples can be filtered through various operations, like searching, or
-  // call tree transforms.
-  FilteredOutByTransform,
-  // This sample is selected because either the tip or an ancestor call node matches
-  // the currently selected call node.
-  Selected,
-  // This call node is not selected, and the stacks are ordered before the selected
-  // call node as sorted by the getTreeOrderComparator.
-  UnselectedOrderedBeforeSelected,
-  // This call node is not selected, and the stacks are ordered after the selected
-  // call node as sorted by the getTreeOrderComparator.
-  UnselectedOrderedAfterSelected,
+ * The activity graph draws one fill per category per bucket. Every sample
+ * contributes to exactly one bucket. This is only about how a sample is
+ * *drawn*: unlike SampleRelationToNode, it makes no distinction between a
+ * node's self samples and its non-self samples, because both are drawn with
+ * the selection highlight fill.
+ */
+export const enum FillBucket {
+  FilteredOutByTransform = 0,
+  Selected = 1,
+  UnselectedOrderedBeforeSelected = 2,
+  UnselectedOrderedAfterSelected = 3,
+}
+
+// The bit in a SampleRelationToNode which says that the sample's stack *ends*
+// at the node, rather than just passing through it. It is deliberately above
+// the bits used by FillBucket, so that a relation's fill bucket can be
+// recovered with a single mask - see SampleRelations.fillBucket.
+const SELF_FLAG = 1 << 2;
+
+// Masks a SampleRelationToNode down to its FillBucket.
+export const FILL_BUCKET_MASK = 3;
+
+/**
+ * Describes how a sample relates to one particular call node. Usually that node
+ * is the selected call node, but the same relation is useful for other nodes,
+ * too, e.g. for the hovered node in the flame graph.
+ *
+ * "Total" means that the sample's stack runs through the node, so the sample
+ * counts towards the node's total time. "AndSelf" additionally means that the
+ * sample's stack *ends* at the node, so it also counts towards the node's self
+ * time. Keeping those two apart lets the sidebar and the flame graph tooltip
+ * compute their timings from the same array that the activity graph uses to
+ * decide how to highlight and stripe its areas.
+ *
+ * "Before" and "After" describe samples which are unrelated to the node, and
+ * order them relative to it as sorted by getTreeOrderComparator. The activity
+ * graph relies on that ordering so that samples from the same subtree clump
+ * together in the graph.
+ *
+ * Every member is written as its FillBucket, optionally with SELF_FLAG on top.
+ * That is what makes SampleRelations.fillBucket a single mask rather than a
+ * table lookup, so keep new members in that form.
+ */
+export const enum SampleRelationToNode {
+  // The sample was filtered out, e.g. by a search or by a call tree transform.
+  FilteredOut = FillBucket.FilteredOutByTransform,
+  // The sample's stack runs through the node but does not end at it, so the
+  // sample counts towards the node's total time but not its self time.
+  TotalButNotSelf = FillBucket.Selected,
+  // The sample's stack ends at the node, so the sample counts towards both the
+  // node's total time and its self time.
+  TotalAndSelf = FillBucket.Selected | SELF_FLAG,
+  // The sample is unrelated to the node, and ordered before it.
+  Before = FillBucket.UnselectedOrderedBeforeSelected,
+  // The sample is unrelated to the node, and ordered after it.
+  After = FillBucket.UnselectedOrderedAfterSelected,
 }
 
 /**

From 551df5a0bf6231d1d444a2b81f84894396db5166 Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange.moz@gmail.com>
Date: Fri, 6 Mar 2026 21:48:33 -0500
Subject: [PATCH 3/4] Use precomputed sample relations in sidebar timings
 computation.

getTimingsForCallNodeIndex walked the stacks itself, with separate inverted and
non-inverted code paths. Replace it with getCallNodeTimings, which consumes the
SampleRelations that the activity graph already computes, and so needs neither
code path: the relation already encodes whether a sample is filtered out,
counts towards the needle's total, and counts towards its self time.

Rename getSampleIndexToNonInvertedCallNodeIndexForFilteredThread to
getSampleCallNodesForFilteredThread, and add
getPreviewFilteredCtssSampleCallNodes / getPreviewFilteredCtssSampleRelations
so that the sidebar timings no longer have to recompute the relations. The
preview-filtered relations are a subarray of the filtered ones rather than a
fresh computation.

The flame graph tooltip computes relations to the *hovered* node, which is why
getSampleRelationsToNode is not specific to the selection.

The two profile-query call sites that computed a CallNodeSelfAndSummary now use
getPreviewFilteredCtssSampleCallNodes rather than the filtered-thread array,
since they index it with getPreviewFilteredCtssSamples. The two are only
interchangeable while the summary strategy is 'timing' and there is no preview
selection, which is true for every profile-query caller today, so this does not
change any output.
---
 .../test/unit/call-tree-formatting.test.ts    |   4 +-
 src/actions/profile-view.ts                   |   4 +-
 src/components/flame-graph/Canvas.tsx         |  50 ++++--
 .../flame-graph/ConnectedFlameGraph.tsx       |   5 +
 src/components/flame-graph/FlameGraph.tsx     |   3 +
 src/components/timeline/TrackThread.tsx       |   4 +-
 src/profile-logic/profile-data.ts             | 143 +++++-------------
 src/profile-query/formatters/thread-info.ts   |  11 +-
 src/selectors/per-thread/index.ts             |   6 +-
 src/selectors/per-thread/stack-sample.ts      |  82 ++++++++--
 src/selectors/per-thread/thread.tsx           |   1 +
 src/test/unit/category-breakdown.test.ts      |  19 ++-
 12 files changed, 178 insertions(+), 154 deletions(-)

diff --git a/profiler-cli/src/test/unit/call-tree-formatting.test.ts b/profiler-cli/src/test/unit/call-tree-formatting.test.ts
index 9d616bf953..ddb361a0d3 100644
--- a/profiler-cli/src/test/unit/call-tree-formatting.test.ts
+++ b/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,
diff --git a/src/actions/profile-view.ts b/src/actions/profile-view.ts
index a02aeb2c48..6f5e3e99ae 100644
--- a/src/actions/profile-view.ts
+++ b/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 ||
diff --git a/src/components/flame-graph/Canvas.tsx b/src/components/flame-graph/Canvas.tsx
index 655f51ede9..c7b042fa0f 100644
--- a/src/components/flame-graph/Canvas.tsx
+++ b/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
         }
diff --git a/src/components/flame-graph/ConnectedFlameGraph.tsx b/src/components/flame-graph/ConnectedFlameGraph.tsx
index 21d060d600..17d8e1a46f 100644
--- a/src/components/flame-graph/ConnectedFlameGraph.tsx
+++ b/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),
   }),
diff --git a/src/components/flame-graph/FlameGraph.tsx b/src/components/flame-graph/FlameGraph.tsx
index 6e3e87aac7..a6999b3ad5 100644
--- a/src/components/flame-graph/FlameGraph.tsx
+++ b/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,
             }}
diff --git a/src/components/timeline/TrackThread.tsx b/src/components/timeline/TrackThread.tsx
index c51e33363d..39909bd0e5 100644
--- a/src/components/timeline/TrackThread.tsx
+++ b/src/components/timeline/TrackThread.tsx
@@ -337,9 +337,7 @@ export const TimelineTrackThread = explicitConnect<
       rangeFilteredThread: selectors.getRangeFilteredThread(state),
       callNodeInfo: selectors.getCallNodeInfo(state),
       sampleNonInvertedCallNodes:
-        selectors.getSampleIndexToNonInvertedCallNodeIndexForFilteredThread(
-          state
-        ),
+        selectors.getSampleCallNodesForFilteredThread(state),
       unfilteredSamplesRange: selectors.unfilteredSamplesRange(state),
       interval: getProfileInterval(state),
       rangeStart: committedRange.start,
diff --git a/src/profile-logic/profile-data.ts b/src/profile-logic/profile-data.ts
index e91e1beed0..5c2abef6fb 100644
--- a/src/profile-logic/profile-data.ts
+++ b/src/profile-logic/profile-data.ts
@@ -1184,6 +1184,25 @@ export class SampleRelations {
     return this.fillBucket(sampleIndex) === FillBucket.Selected;
   }
 
+  /**
+   * Whether the sample's stack ends at the node, i.e. whether the sample counts
+   * towards the node's self time.
+   */
+  contributesToSelf(sampleIndex: IndexIntoSamplesTable): boolean {
+    return this.get(sampleIndex) === SampleRelationToNode.TotalAndSelf;
+  }
+
+  /**
+   * The relations for a contiguous range of samples. This shares the underlying
+   * buffer, so it does not copy.
+   */
+  subarray(
+    start: IndexIntoSamplesTable,
+    end: IndexIntoSamplesTable
+  ): SampleRelations {
+    return new SampleRelations(this._relations.subarray(start, end));
+  }
+
   toArrayForTesting(): SampleRelationToNode[] {
     return Array.from(this._relations) as SampleRelationToNode[];
   }
@@ -1294,35 +1313,15 @@ function accumulateSampleToTimings(
 }
 
 /**
- * This function is the same as getTimingsForCallNodeIndex, but accepts a CallNodePath
- * instead of an IndexIntoCallNodeTable.
+ * This function returns timings related to a call node, based on the
+ * information in sampleRelations.
  */
-export function getTimingsForPath(
-  needlePath: CallNodePath,
-  callNodeInfo: CallNodeInfo,
+export function getCallNodeTimings(
   categories: CategoryList,
   samples: SamplesLikeTable,
-  sampleCategoriesAndSubcategories: SampleCategoriesAndSubcategories
-) {
-  return getTimingsForCallNodeIndex(
-    callNodeInfo.getCallNodeIndexFromPath(needlePath),
-    callNodeInfo,
-    categories,
-    samples,
-    sampleCategoriesAndSubcategories
-  );
-}
-
-/**
- * This function returns the timings for a specific call node. The algorithm is
- * adjusted when the call tree is inverted.
- */
-export function getTimingsForCallNodeIndex(
-  needleNodeIndex: IndexIntoCallNodeTable | null,
-  callNodeInfo: CallNodeInfo,
-  categories: CategoryList,
-  samples: SamplesLikeTable,
-  sampleCategoriesAndSubcategories: SampleCategoriesAndSubcategories
+  sampleCategoriesAndSubcategories: SampleCategoriesAndSubcategories,
+  sampleRelations: SampleRelations,
+  isInvertedRoot: boolean
 ): TimingsForPath {
   /* ------------ Variables definitions ------------*/
 
@@ -1367,89 +1366,27 @@ export function getTimingsForCallNodeIndex(
   /* ------------- End of function definitions ------------- */
 
   /* ------------ Start of the algorithm itself ------------ */
-  if (needleNodeIndex === null) {
-    // No index was provided, return empty timing information.
-    return { forPath: pathTimings, rootTime, isInvertedRoot: false };
-  }
-
-  let needleNodeIsRootOfInvertedTree = false;
-  const callNodeTable = callNodeInfo.getCallNodeTable();
-  const stackIndexToCallNodeIndex =
-    callNodeInfo.getStackIndexToNonInvertedCallNodeIndex();
-  const callNodeInfoInverted = callNodeInfo.asInverted();
-  if (callNodeInfoInverted !== null) {
-    // Inverted case
-    needleNodeIsRootOfInvertedTree =
-      callNodeInfoInverted.isRoot(needleNodeIndex);
-    const suffixOrderIndexes = callNodeInfoInverted.getSuffixOrderIndexes();
-    const [rangeStart, rangeEnd] =
-      callNodeInfoInverted.getSuffixOrderIndexRangeForCallNode(needleNodeIndex);
-
-    // Loop over each sample and accumulate the self time, running time, and
-    // the category breakdown.
-    for (let sampleIndex = 0; sampleIndex < samples.length; sampleIndex++) {
-      // Get the call node for this sample.
-      // TODO: Consider using sampleCallNodes for this, to save one indirection on
-      // a hot path.
-      const thisStackIndex = samples.stack[sampleIndex];
-      if (thisStackIndex === null) {
-        continue;
-      }
-      const thisNodeIndex = stackIndexToCallNodeIndex[thisStackIndex];
-      const thisNodeSuffixOrderIndex = suffixOrderIndexes[thisNodeIndex];
-      const weight = samples.weight ? samples.weight[sampleIndex] : 1;
-      rootTime += Math.abs(weight);
-
-      if (
-        thisNodeSuffixOrderIndex >= rangeStart &&
-        thisNodeSuffixOrderIndex < rangeEnd
-      ) {
-        // One of the parents is the exact passed path.
-        accumulateDataToTimings(pathTimings.totalTime, sampleIndex, weight);
-
-        if (needleNodeIsRootOfInvertedTree) {
-          accumulateDataToTimings(pathTimings.selfTime, sampleIndex, weight);
-        }
-      }
+  // Loop over each sample and accumulate the self time, total time, and
+  // the category breakdown. sampleRelations tells us whether each sample is
+  // filtered out, counts towards the needle's total time, and whether it also
+  // counts towards its self time. This works for both inverted and
+  // non-inverted call trees, because getSampleRelationsToNode handles
+  // that distinction internally.
+  for (let sampleIndex = 0; sampleIndex < samples.length; sampleIndex++) {
+    if (sampleRelations.isFilteredOut(sampleIndex)) {
+      continue;
     }
-  } else {
-    // Non-inverted case
-    const needleSubtreeRangeEnd =
-      callNodeTable.subtreeRangeEnd[needleNodeIndex];
-
-    // Loop over each sample and accumulate the self time, running time, and
-    // the category breakdown.
-    for (let sampleIndex = 0; sampleIndex < samples.length; sampleIndex++) {
-      // Get the call node for this sample.
-      // TODO: Consider using sampleCallNodes for this, to save one indirection on
-      // a hot path.
-      const thisStackIndex = samples.stack[sampleIndex];
-      if (thisStackIndex === null) {
-        continue;
-      }
-      const thisNodeIndex = stackIndexToCallNodeIndex[thisStackIndex];
-      const weight = samples.weight ? samples.weight[sampleIndex] : 1;
-      rootTime += Math.abs(weight);
-
-      // For non-inverted trees, we compute the self time from the stacks' leaf nodes.
-      if (thisNodeIndex === needleNodeIndex) {
+    const weight = samples.weight ? samples.weight[sampleIndex] : 1;
+    rootTime += Math.abs(weight);
+    if (sampleRelations.contributesToTotal(sampleIndex)) {
+      accumulateDataToTimings(pathTimings.totalTime, sampleIndex, weight);
+      if (sampleRelations.contributesToSelf(sampleIndex)) {
         accumulateDataToTimings(pathTimings.selfTime, sampleIndex, weight);
       }
-      if (
-        thisNodeIndex >= needleNodeIndex &&
-        thisNodeIndex < needleSubtreeRangeEnd
-      ) {
-        // One of the parents is the exact passed path.
-        accumulateDataToTimings(pathTimings.totalTime, sampleIndex, weight);
-      }
     }
   }
 
-  return {
-    forPath: pathTimings,
-    rootTime,
-    isInvertedRoot: needleNodeIsRootOfInvertedTree,
-  };
+  return { forPath: pathTimings, rootTime, isInvertedRoot };
 }
 
 /**
diff --git a/src/profile-query/formatters/thread-info.ts b/src/profile-query/formatters/thread-info.ts
index 4c8be214d0..ab39519e6c 100644
--- a/src/profile-query/formatters/thread-info.ts
+++ b/src/profile-query/formatters/thread-info.ts
@@ -43,10 +43,7 @@ import {
   computeCallNodeSelfAndSummary,
   extractSamplesLikeTable,
 } from 'firefox-profiler/profile-logic/call-tree';
-import {
-  getInvertedCallNodeInfo,
-  getSampleIndexToCallNodeIndex,
-} from 'firefox-profiler/profile-logic/profile-data';
+import { getInvertedCallNodeInfo } from 'firefox-profiler/profile-logic/profile-data';
 import type { Store } from '../../types/store';
 import type { TimestampManager } from '../timestamps';
 import type { ThreadMap } from '../thread-map';
@@ -390,10 +387,8 @@ export function collectThreadSamplesBottomUp(
   const weightType = threadSelectors.getWeightTypeForCallTree(state);
 
   const samples = threadSelectors.getPreviewFilteredCtssSamples(state);
-  const sampleIndexToCallNodeIndex = getSampleIndexToCallNodeIndex(
-    samples.stack,
-    callNodeInfo.getStackIndexToNonInvertedCallNodeIndex()
-  );
+  const sampleIndexToCallNodeIndex =
+    threadSelectors.getPreviewFilteredCtssSampleCallNodes(state);
 
   const callNodeSelfAndSummary = computeCallNodeSelfAndSummary(
     samples,
diff --git a/src/selectors/per-thread/index.ts b/src/selectors/per-thread/index.ts
index af4d8b081c..dc0d4aa863 100644
--- a/src/selectors/per-thread/index.ts
+++ b/src/selectors/per-thread/index.ts
@@ -255,12 +255,12 @@ export const selectedNodeSelectors: NodeSelectors = (() => {
   );
 
   const getTimingsForSidebar: Selector<TimingsForPath> = createSelector(
-    selectedThreadSelectors.getSelectedCallNodePath,
-    selectedThreadSelectors.getCallNodeInfo,
     ProfileSelectors.getCategories,
     selectedThreadSelectors.getPreviewFilteredCtssSamples,
     selectedThreadSelectors.getPreviewFilteredCtssSampleCategoriesAndSubcategories,
-    ProfileData.getTimingsForPath
+    selectedThreadSelectors.getPreviewFilteredCtssSampleRelations,
+    selectedThreadSelectors.getSelectedCallNodeIsInvertedRoot,
+    ProfileData.getCallNodeTimings
   );
 
   return {
diff --git a/src/selectors/per-thread/stack-sample.ts b/src/selectors/per-thread/stack-sample.ts
index f3e617991f..63347c19c1 100644
--- a/src/selectors/per-thread/stack-sample.ts
+++ b/src/selectors/per-thread/stack-sample.ts
@@ -250,26 +250,26 @@ export function getStackAndSampleSelectorsPerThread(
       )
   );
 
-  const _getSampleIndexToNonInvertedCallNodeIndexForPreviewFilteredCtssThread: Selector<
+  const _getSampleCallNodesForFilteredCtssThread: Selector<
     Array<IndexIntoCallNodeTable | null>
   > = createSelector(
-    (state: State) =>
-      threadSelectors.getPreviewFilteredCtssSamples(state).stack,
+    (state: State) => threadSelectors.getFilteredCtssSamples(state).stack,
     (state: State) =>
       getCallNodeInfo(state).getStackIndexToNonInvertedCallNodeIndex(),
     ProfileData.getSampleIndexToCallNodeIndex
   );
 
-  const _getSampleIndexToNonInvertedCallNodeIndexForFilteredCtssThread: Selector<
+  const getPreviewFilteredCtssSampleCallNodes: Selector<
     Array<IndexIntoCallNodeTable | null>
   > = createSelector(
-    (state: State) => threadSelectors.getFilteredCtssSamples(state).stack,
+    _getSampleCallNodesForFilteredCtssThread,
     (state: State) =>
-      getCallNodeInfo(state).getStackIndexToNonInvertedCallNodeIndex(),
-    ProfileData.getSampleIndexToCallNodeIndex
+      threadSelectors.getPreviewFilteredCtssSampleIndexOffsets(state),
+    (state: State) => threadSelectors.getFilteredCtssSampleIndexOffsets(state),
+    (filteredCallNodes, [b, e], [fb]) => filteredCallNodes.slice(b - fb, e - fb)
   );
 
-  const getSampleIndexToNonInvertedCallNodeIndexForFilteredThread: Selector<
+  const getSampleCallNodesForFilteredThread: Selector<
     Array<IndexIntoCallNodeTable | null>
   > = createSelector(
     (state: State) => threadSelectors.getFilteredThread(state).samples.stack,
@@ -280,7 +280,7 @@ export function getStackAndSampleSelectorsPerThread(
 
   const getSampleRelationsToSelectedNodeInFilteredThread: Selector<SampleRelations> =
     createSelector(
-      getSampleIndexToNonInvertedCallNodeIndexForFilteredThread,
+      getSampleCallNodesForFilteredThread,
       getCallNodeInfo,
       getSelectedCallNodeIndex,
       (
@@ -296,13 +296,64 @@ export function getStackAndSampleSelectorsPerThread(
       }
     );
 
+  const getFilteredCtssSampleRelations: Selector<SampleRelations> =
+    createSelector(
+      threadSelectors.getFilteredCtssSamples,
+      (state: State) => threadSelectors.getFilteredThread(state).samples,
+      getSampleRelationsToSelectedNodeInFilteredThread,
+      _getSampleCallNodesForFilteredCtssThread,
+      getCallNodeInfo,
+      getSelectedCallNodeIndex,
+      (
+        filteredCtssSamples,
+        filteredSamples,
+        filteredRelations,
+        ctssSampleCallNodes,
+        callNodeInfo,
+        selectedCallNode
+      ) => {
+        if (filteredCtssSamples === filteredSamples) {
+          return filteredRelations;
+        }
+        return ProfileData.getSampleRelationsToNode(
+          callNodeInfo,
+          ctssSampleCallNodes,
+          selectedCallNode
+        );
+      }
+    );
+
+  const getPreviewFilteredCtssSampleRelations: Selector<SampleRelations> =
+    createSelector(
+      getFilteredCtssSampleRelations,
+      (state: State) =>
+        threadSelectors.getPreviewFilteredCtssSampleIndexOffsets(state),
+      (state: State) =>
+        threadSelectors.getFilteredCtssSampleIndexOffsets(state),
+      (filteredRelations, [b, e], [fb]) =>
+        filteredRelations.subarray(b - fb, e - fb)
+    );
+
+  const getSelectedCallNodeIsInvertedRoot: Selector<boolean> = createSelector(
+    getCallNodeInfo,
+    getSelectedCallNodeIndex,
+    (callNodeInfo, selectedCallNodeIndex) => {
+      const callNodeInfoInverted = callNodeInfo.asInverted();
+      return (
+        selectedCallNodeIndex !== null &&
+        callNodeInfoInverted !== null &&
+        callNodeInfoInverted.isRoot(selectedCallNodeIndex)
+      );
+    }
+  );
+
   const getTreeOrderComparatorInFilteredThread: Selector<
     (
       sampleIndexA: IndexIntoSamplesTable,
       sampleIndexB: IndexIntoSamplesTable
     ) => number
   > = createSelector(
-    getSampleIndexToNonInvertedCallNodeIndexForFilteredThread,
+    getSampleCallNodesForFilteredThread,
     getCallNodeInfo,
     ProfileData.getTreeOrderComparator
   );
@@ -361,7 +412,7 @@ export function getStackAndSampleSelectorsPerThread(
   const getCallNodeSelfAndSummary: Selector<CallNodeSelfAndSummary> =
     createSelector(
       threadSelectors.getPreviewFilteredCtssSamples,
-      _getSampleIndexToNonInvertedCallNodeIndexForPreviewFilteredCtssThread,
+      getPreviewFilteredCtssSampleCallNodes,
       getCallNodeInfo,
       (samples, sampleIndexToCallNodeIndex, callNodeInfo) => {
         return CallTree.computeCallNodeSelfAndSummary(
@@ -464,7 +515,7 @@ export function getStackAndSampleSelectorsPerThread(
   const getTracedTiming: Selector<CallTree.CallTreeTimings | null> =
     createSelector(
       threadSelectors.getPreviewFilteredCtssSamples,
-      _getSampleIndexToNonInvertedCallNodeIndexForPreviewFilteredCtssThread,
+      getPreviewFilteredCtssSampleCallNodes,
       getCallNodeInfo,
       ProfileSelectors.getProfileInterval,
       (samples, sampleIndexToCallNodeIndex, callNodeInfo, interval) => {
@@ -529,7 +580,7 @@ export function getStackAndSampleSelectorsPerThread(
   const _getStackTimingByDepthWithMap: Selector<StackTiming.StackTimingByDepthWithMap> =
     createSelector(
       threadSelectors.getFilteredCtssSamples,
-      _getSampleIndexToNonInvertedCallNodeIndexForFilteredCtssThread,
+      _getSampleCallNodesForFilteredCtssThread,
       getCallNodeInfo,
       getFilteredCallNodeMaxDepthPlusOne,
       ProfileSelectors.getProfileInterval,
@@ -609,8 +660,11 @@ export function getStackAndSampleSelectorsPerThread(
     getSelectedCallNodeIndex,
     getExpandedCallNodePaths,
     getExpandedCallNodeIndexes,
-    getSampleIndexToNonInvertedCallNodeIndexForFilteredThread,
+    getSampleCallNodesForFilteredThread,
     getSampleRelationsToSelectedNodeInFilteredThread,
+    getPreviewFilteredCtssSampleCallNodes,
+    getPreviewFilteredCtssSampleRelations,
+    getSelectedCallNodeIsInvertedRoot,
     getTreeOrderComparatorInFilteredThread,
     getCallTree,
     getNonInvertedCallTree,
diff --git a/src/selectors/per-thread/thread.tsx b/src/selectors/per-thread/thread.tsx
index 994ccf6a5b..6feca19113 100644
--- a/src/selectors/per-thread/thread.tsx
+++ b/src/selectors/per-thread/thread.tsx
@@ -745,6 +745,7 @@ export function getThreadSelectorsWithMarkersPerThread(
     getPreviewFilteredThread,
     getFilteredCtssSamples,
     getPreviewFilteredCtssSamples,
+    getPreviewFilteredCtssSampleIndexOffsets,
     getPreviewFilteredCtssSampleCategoriesAndSubcategories,
     getHasFilteredCtssSamples,
     getHasPreviewFilteredCtssSamples,
diff --git a/src/test/unit/category-breakdown.test.ts b/src/test/unit/category-breakdown.test.ts
index 7f1f37f129..3d2362f6e5 100644
--- a/src/test/unit/category-breakdown.test.ts
+++ b/src/test/unit/category-breakdown.test.ts
@@ -3,8 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import {
+  getCallNodeTimings,
+  getSampleRelationsToNode,
   getTimingsForAllSamples,
-  getTimingsForCallNodeIndex,
   getTimingsForFuncIndex,
 } from '../../profile-logic/profile-data';
 import { sortCategoryBreakdown } from '../../profile-logic/category-breakdown';
@@ -77,7 +78,7 @@ describe('getTimingsForAllSamples', function () {
     });
   });
 
-  it('matches the root time of getTimingsForCallNodeIndex', function () {
+  it('matches the root time of getCallNodeTimings', function () {
     const {
       state,
       threadSelectors,
@@ -89,12 +90,18 @@ describe('getTimingsForAllSamples', function () {
         B[cat:Layout]  C[cat:GC / CC]
       `);
 
-    const { rootTime } = getTimingsForCallNodeIndex(
-      0,
-      threadSelectors.getCallNodeInfo(state),
+    const callNodeInfo = threadSelectors.getCallNodeInfo(state);
+    const sampleRelations = getSampleRelationsToNode(
+      callNodeInfo,
+      threadSelectors.getPreviewFilteredCtssSampleCallNodes(state),
+      0
+    );
+    const { rootTime } = getCallNodeTimings(
       categories,
       samples,
-      sampleCategoriesAndSubcategories
+      sampleCategoriesAndSubcategories,
+      sampleRelations,
+      false
     );
 
     expect(

From b88f9091910649250e30dd8872b73efac7fd8065 Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange.moz@gmail.com>
Date: Sat, 7 Mar 2026 13:20:33 -0500
Subject: [PATCH 4/4] Optimize getCallNodeTimings.

---
 src/profile-logic/profile-data.ts | 122 +++++++++++++++++-------------
 1 file changed, 70 insertions(+), 52 deletions(-)

diff --git a/src/profile-logic/profile-data.ts b/src/profile-logic/profile-data.ts
index 5c2abef6fb..002ac3514d 100644
--- a/src/profile-logic/profile-data.ts
+++ b/src/profile-logic/profile-data.ts
@@ -1256,17 +1256,16 @@ export type OneCategoryBreakdown = {
   subcategoryBreakdown: Milliseconds[]; // { [IndexIntoSubcategoryList]: Milliseconds }
 };
 export type BreakdownByCategory = OneCategoryBreakdown[]; // { [IndexIntoCategoryList]: OneCategoryBreakdown }
+export type ItemTimingsGroup = {
+  value: Milliseconds;
+  breakdownByCategory: BreakdownByCategory | null;
+};
+
 export type ItemTimings = {
-  selfTime: {
-    // time spent excluding children
-    value: Milliseconds;
-    breakdownByCategory: BreakdownByCategory | null;
-  };
-  totalTime: {
-    // time spent including children
-    value: Milliseconds;
-    breakdownByCategory: BreakdownByCategory | null;
-  };
+  // time spent excluding children
+  selfTime: ItemTimingsGroup;
+  // time spent including children
+  totalTime: ItemTimingsGroup;
 };
 
 export type TimingsForPath = {
@@ -1323,49 +1322,26 @@ export function getCallNodeTimings(
   sampleRelations: SampleRelations,
   isInvertedRoot: boolean
 ): TimingsForPath {
-  /* ------------ Variables definitions ------------*/
+  const { sampleCategories, sampleSubcategories } =
+    sampleCategoriesAndSubcategories;
 
-  // This object holds the timings for the current call node path, specified by
-  // needleNodeIndex.
-  const pathTimings: ItemTimings = {
-    selfTime: {
-      value: 0,
-      breakdownByCategory: null,
-    },
-    totalTime: {
-      value: 0,
-      breakdownByCategory: null,
-    },
-  };
+  let selfValue = 0;
+  const selfCategorySummary = new Float64Array(categories.length);
+  const selfSubcategorySummaries = categories.map(
+    (category) => new Float64Array(category.subcategories.length)
+  );
+  let totalValue = 0;
+  const totalCategorySummary = new Float64Array(categories.length);
+  const totalSubcategorySummaries = categories.map(
+    (category) => new Float64Array(category.subcategories.length)
+  );
+  let hasSelf = false;
+  let hasTotal = false;
 
   // This holds the root time, it's incremented for all samples and is useful to
   // have an absolute value to compare the other values with.
   let rootTime = 0;
 
-  /* -------- End of variable definitions ------- */
-
-  /* ------------ Functions definitions --------- *
-   * We define functions here so that they have easy access to the variables and
-   * the algorithm's parameters. */
-
-  const accumulateDataToTimings = (
-    timings: {
-      breakdownByCategory: BreakdownByCategory | null;
-      value: number;
-    },
-    sampleIndex: IndexIntoSamplesTable,
-    duration: Milliseconds
-  ): void =>
-    accumulateSampleToTimings(
-      timings,
-      categories,
-      sampleCategoriesAndSubcategories,
-      sampleIndex,
-      duration
-    );
-  /* ------------- End of function definitions ------------- */
-
-  /* ------------ Start of the algorithm itself ------------ */
   // Loop over each sample and accumulate the self time, total time, and
   // the category breakdown. sampleRelations tells us whether each sample is
   // filtered out, counts towards the needle's total time, and whether it also
@@ -1373,19 +1349,61 @@ export function getCallNodeTimings(
   // non-inverted call trees, because getSampleRelationsToNode handles
   // that distinction internally.
   for (let sampleIndex = 0; sampleIndex < samples.length; sampleIndex++) {
-    if (sampleRelations.isFilteredOut(sampleIndex)) {
+    // Read the relation just once; this loop runs over every sample.
+    const relation = sampleRelations.get(sampleIndex);
+    if (relation === SampleRelationToNode.FilteredOut) {
       continue;
     }
     const weight = samples.weight ? samples.weight[sampleIndex] : 1;
     rootTime += Math.abs(weight);
-    if (sampleRelations.contributesToTotal(sampleIndex)) {
-      accumulateDataToTimings(pathTimings.totalTime, sampleIndex, weight);
-      if (sampleRelations.contributesToSelf(sampleIndex)) {
-        accumulateDataToTimings(pathTimings.selfTime, sampleIndex, weight);
+    if (
+      relation === SampleRelationToNode.TotalAndSelf ||
+      relation === SampleRelationToNode.TotalButNotSelf
+    ) {
+      totalValue += weight;
+      hasTotal = true;
+      const categoryIndex = sampleCategories[sampleIndex];
+      const subcategoryIndex = sampleSubcategories[sampleIndex];
+      totalCategorySummary[categoryIndex] += weight;
+      totalSubcategorySummaries[categoryIndex][subcategoryIndex] += weight;
+      if (relation === SampleRelationToNode.TotalAndSelf) {
+        selfValue += weight;
+        hasSelf = true;
+        selfCategorySummary[categoryIndex] += weight;
+        selfSubcategorySummaries[categoryIndex][subcategoryIndex] += weight;
       }
     }
   }
 
+  function createBreakdown(
+    categorySummary: Float64Array,
+    subcategorySummaries: Float64Array[]
+  ): BreakdownByCategory {
+    return categories.map((category, categoryIndex) => {
+      const entireCategoryValue = categorySummary[categoryIndex];
+      const subcategoryValues = subcategorySummaries[categoryIndex];
+      const subcategoryBreakdown = category.subcategories.map(
+        (_sc, scIndex) => subcategoryValues[scIndex]
+      );
+      return { entireCategoryValue, subcategoryBreakdown };
+    });
+  }
+
+  const pathTimings: ItemTimings = {
+    selfTime: {
+      value: selfValue,
+      breakdownByCategory: hasSelf
+        ? createBreakdown(selfCategorySummary, selfSubcategorySummaries)
+        : null,
+    },
+    totalTime: {
+      value: totalValue,
+      breakdownByCategory: hasTotal
+        ? createBreakdown(totalCategorySummary, totalSubcategorySummaries)
+        : null,
+    },
+  };
+
   return { forPath: pathTimings, rootTime, isInvertedRoot };
 }