From 3753ebbac00ed66d25dbd4603e7d4b167ef83e7e 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 01/14] Remove special handling of inverted roots from
 getTimingsForCallNodeIndex.

Handle it during display instead.
---
 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 8e0fac7817..9b0bd19dd9 100644
--- a/src/components/sidebar/CallTreeSidebar.tsx
+++ b/src/components/sidebar/CallTreeSidebar.tsx
@@ -319,7 +319,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 220fa723f2..a193e3cc32 100644
--- a/src/components/tooltip/CallNode.tsx
+++ b/src/components/tooltip/CallNode.tsx
@@ -304,6 +304,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 -------------------------------------------------- */}
@@ -346,7 +352,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 645d8a9cc8..807efeb671 100644
--- a/src/profile-logic/profile-data.ts
+++ b/src/profile-logic/profile-data.ts
@@ -1108,6 +1108,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;
 };
 
 /**
@@ -1208,16 +1212,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] =
@@ -1246,11 +1251,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);
         }
       }
     }
@@ -1287,7 +1288,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 f04baf9582..5c1624d8b9 100644
--- a/src/test/store/__snapshots__/profile-view.test.ts.snap
+++ b/src/test/store/__snapshots__/profile-view.test.ts.snap
@@ -1765,6 +1765,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 c78779dcf3..8a0b233e75 100644
--- a/src/test/store/profile-view.test.ts
+++ b/src/test/store/profile-view.test.ts
@@ -2431,6 +2431,7 @@ describe('getTimingsForSidebar', () => {
       };
       expect(timings).toEqual({
         forPath: expectedTiming,
+        isInvertedRoot: false,
         rootTime: 5,
       });
     });
@@ -2476,6 +2477,7 @@ describe('getTimingsForSidebar', () => {
             ]),
           },
         },
+        isInvertedRoot: false,
         rootTime: 5,
       });
     });
@@ -2522,6 +2524,7 @@ describe('getTimingsForSidebar', () => {
 
       expect(timings).toEqual({
         forPath: expectedTiming,
+        isInvertedRoot: false,
         rootTime: 5,
       });
     });
@@ -2600,6 +2603,7 @@ describe('getTimingsForSidebar', () => {
         };
         expect(timings).toEqual({
           forPath: expectedTiming,
+          isInvertedRoot: false,
           rootTime: 4,
         });
       });
@@ -2642,6 +2646,7 @@ describe('getTimingsForSidebar', () => {
         };
         expect(timings).toEqual({
           forPath: expectedTiming,
+          isInvertedRoot: false,
           rootTime: 4,
         });
       });
@@ -2673,6 +2678,7 @@ describe('getTimingsForSidebar', () => {
         };
         expect(timings).toEqual({
           forPath: { selfTime: expectedTiming, totalTime: expectedTiming },
+          isInvertedRoot: false,
           rootTime: 4,
         });
       });
@@ -2715,6 +2721,7 @@ describe('getTimingsForSidebar', () => {
         };
         expect(timings).toEqual({
           forPath: expectedTiming,
+          isInvertedRoot: false,
           rootTime: 4,
         });
       });
@@ -2746,6 +2753,7 @@ describe('getTimingsForSidebar', () => {
         };
         expect(timings).toEqual({
           forPath: { selfTime: expectedTiming, totalTime: expectedTiming },
+          isInvertedRoot: false,
           rootTime: 4,
         });
       });
@@ -2792,15 +2800,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,
       });
     });
@@ -2828,6 +2832,7 @@ describe('getTimingsForSidebar', () => {
             ]),
           },
         },
+        isInvertedRoot: false,
         rootTime: 5,
       });
     });
@@ -2839,24 +2844,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,
       });
 
@@ -2879,6 +2887,7 @@ describe('getTimingsForSidebar', () => {
             ]),
           },
         },
+        isInvertedRoot: false,
         rootTime: 5,
       });
     });
@@ -2906,6 +2915,7 @@ describe('getTimingsForSidebar', () => {
             ]),
           },
         },
+        isInvertedRoot: false,
         rootTime: 5,
       });
     });
@@ -2991,15 +3001,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,
         });
       });
@@ -3031,15 +3037,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,
         });
       });
@@ -3069,6 +3071,7 @@ describe('getTimingsForSidebar', () => {
               ]),
             },
           },
+          isInvertedRoot: false,
           rootTime: 4,
         });
       });

From d695b1f057302b67360b339003477d1534893f98 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 02/14] When computing sample selected states, split "Selected"
 into "TotalAndSelf" and "TotalButNotSelf" states.

This will let us share work between the activity graph and the sidebar,
see the next commit.

There's unfortunately a bit of the clash between the variable names and the types now.

Should we rename sampleSelectedStates to sampleRelationsToSelectedNode everywhere?
It sounds a bit clunky.
---
 .../shared/thread/ActivityGraphFills.tsx      | 12 +--
 src/components/shared/thread/HeightGraph.tsx  | 10 ++-
 src/components/shared/thread/SampleGraph.tsx  | 10 ++-
 src/profile-logic/profile-data.ts             | 73 ++++++++++------
 src/test/unit/profile-data.test.ts            | 84 +++++++++----------
 src/types/profile-derived.ts                  | 32 +++++--
 6 files changed, 140 insertions(+), 81 deletions(-)

diff --git a/src/components/shared/thread/ActivityGraphFills.tsx b/src/components/shared/thread/ActivityGraphFills.tsx
index 0b01e803dd..7b40fed127 100644
--- a/src/components/shared/thread/ActivityGraphFills.tsx
+++ b/src/components/shared/thread/ActivityGraphFills.tsx
@@ -13,7 +13,7 @@ import type {
   DevicePixels,
   CssPixels,
 } from 'firefox-profiler/types';
-import { SelectedState } from 'firefox-profiler/types';
+import { SAMPLE_RELATION_TO_SELECTED_STATE_MASK, SelectedState } from 'firefox-profiler/types';
 import type { HoveredPixelState } from './ActivityGraph';
 
 /**
@@ -245,8 +245,9 @@ export class ActivityGraphFillComputer {
       const afterSampleCpuPercent = threadCPUPercent[i + 1];
 
       const percentageBuffers = this.mutablePercentageBuffers[category];
-      const selectedState = sampleSelectedStates[i];
-      const percentageBuffer = percentageBuffers[selectedState];
+      const bufferIndex =
+        sampleSelectedStates[i] & SAMPLE_RELATION_TO_SELECTED_STATE_MASK;
+      const percentageBuffer = percentageBuffers[bufferIndex];
 
       _accumulateInBuffer(
         percentageBuffer,
@@ -273,8 +274,9 @@ export class ActivityGraphFillComputer {
     const nextSampleTime = sampleTime + interval;
     const percentageBuffers = this.mutablePercentageBuffers[lastSampleCategory];
 
-    const selectedState = sampleSelectedStates[lastIdx];
-    const percentageBuffer = percentageBuffers[selectedState];
+    const bufferIndex =
+      sampleSelectedStates[lastIdx] & SAMPLE_RELATION_TO_SELECTED_STATE_MASK;
+    const percentageBuffer = percentageBuffers[bufferIndex];
 
     _accumulateInBuffer(
       percentageBuffer,
diff --git a/src/components/shared/thread/HeightGraph.tsx b/src/components/shared/thread/HeightGraph.tsx
index 25b75dc4ac..d117ad19fb 100644
--- a/src/components/shared/thread/HeightGraph.tsx
+++ b/src/components/shared/thread/HeightGraph.tsx
@@ -4,7 +4,10 @@
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import { timeCode } from 'firefox-profiler/utils/time-code';
-import { getSampleIndexClosestToStartTime } from 'firefox-profiler/profile-logic/profile-data';
+import {
+  getSampleIndexClosestToStartTime,
+  toSelectedState,
+} from 'firefox-profiler/profile-logic/profile-data';
 import { bisectionRight } from 'firefox-profiler/utils/bisect';
 import { BLUE_70, BLUE_40 } from 'photon-colors';
 import './HeightGraph.css';
@@ -14,6 +17,7 @@ import type {
   CategoryList,
   IndexIntoSamplesTable,
   Milliseconds,
+  SampleRelationToNode,
 } from 'firefox-profiler/types';
 import { SelectedState } from 'firefox-profiler/types';
 
@@ -129,7 +133,9 @@ export class ThreadHeightGraph extends PureComponent<Props> {
         continue;
       }
 
-      const state = sampleSelectedStates[i] as SelectedState;
+      const state = toSelectedState(
+        sampleSelectedStates[i] as SampleRelationToNode
+      );
       if (state === SelectedState.FilteredOutByTransform) {
         continue;
       }
diff --git a/src/components/shared/thread/SampleGraph.tsx b/src/components/shared/thread/SampleGraph.tsx
index 7790794440..b74ecaf628 100644
--- a/src/components/shared/thread/SampleGraph.tsx
+++ b/src/components/shared/thread/SampleGraph.tsx
@@ -6,7 +6,10 @@ import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import { InView } from 'react-intersection-observer';
 import { timeCode } from 'firefox-profiler/utils/time-code';
-import { getSampleIndexClosestToCenteredTime } from 'firefox-profiler/profile-logic/profile-data';
+import {
+  getSampleIndexClosestToCenteredTime,
+  toSelectedState,
+} from 'firefox-profiler/profile-logic/profile-data';
 import { bisectionRight } from 'firefox-profiler/utils/bisect';
 import { withSize } from 'firefox-profiler/components/shared/WithSize';
 import { BLUE_40, BLUE_50, BLUE_70 } from 'photon-colors';
@@ -26,6 +29,7 @@ import type {
   Milliseconds,
   CssPixels,
   ImplementationFilter,
+  SampleRelationToNode,
 } from 'firefox-profiler/types';
 import { SelectedState } from 'firefox-profiler/types';
 import type { SizeProps } from 'firefox-profiler/components/shared/WithSize';
@@ -186,7 +190,9 @@ class ThreadSampleGraphCanvas extends React.PureComponent<CanvasProps> {
       if (sampleTime < nextMinTime) {
         continue;
       }
-      const state = sampleSelectedStates[i] as SelectedState;
+      const state = toSelectedState(
+        sampleSelectedStates[i] as SampleRelationToNode
+      );
       if (state === SelectedState.FilteredOutByTransform) {
         continue;
       }
diff --git a/src/profile-logic/profile-data.ts b/src/profile-logic/profile-data.ts
index 807efeb671..cf9ebddbc6 100644
--- a/src/profile-logic/profile-data.ts
+++ b/src/profile-logic/profile-data.ts
@@ -99,8 +99,13 @@ import type {
   IndexIntoSourceTable,
   TransformOutput,
   SampleCategoriesAndSubcategories,
+  SelectedState,
+} from 'firefox-profiler/types';
+import {
+  ResourceType,
+  SampleRelationToNode,
+  SAMPLE_RELATION_TO_SELECTED_STATE_MASK,
 } from 'firefox-profiler/types';
-import { SelectedState, ResourceType } from 'firefox-profiler/types';
 import type { CallNodeInfo, SuffixOrderIndex } from './call-node-info';
 
 /**
@@ -918,12 +923,12 @@ function _getSampleSelectedStatesForNoSelection(
     // 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;
+    let sampleSelectedState = SampleRelationToNode.TotalAndSelf;
 
     // But we still want to display filtered-out samples differently.
     const callNodeIndex = sampleCallNodes[sampleIndex];
     if (callNodeIndex === null) {
-      sampleSelectedState = SelectedState.FilteredOutByTransform;
+      sampleSelectedState = SampleRelationToNode.FilteredOut;
     }
 
     result[sampleIndex] = sampleSelectedState;
@@ -958,14 +963,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 <-- selected node
+ *       total, 14
+ *         total, 15
+ *           total, 16
+ *         total, 17
+ *       total, 18
+ *         total, 19
+ *         total, 20
  *     after, 21
  *       after, 22
  *     after, 23
@@ -989,19 +994,19 @@ function _getSampleSelectedStatesNonInverted(
   const sampleCount = sampleCallNodes.length;
   const sampleSelectedStates = new Uint8Array(sampleCount);
   for (let sampleIndex = 0; sampleIndex < sampleCount; sampleIndex++) {
-    let sampleSelectedState: SelectedState = SelectedState.Selected;
+    let sampleSelectedState: SampleRelationToNode =
+      SampleRelationToNode.FilteredOut;
     const callNodeIndex = sampleCallNodes[sampleIndex];
     if (callNodeIndex !== null) {
       if (callNodeIndex < selectedCallNodeIndex) {
-        sampleSelectedState = SelectedState.UnselectedOrderedBeforeSelected;
+        sampleSelectedState = SampleRelationToNode.Before;
+      } else if (callNodeIndex === selectedCallNodeIndex) {
+        sampleSelectedState = SampleRelationToNode.TotalAndSelf;
       } else if (callNodeIndex < selectedCallNodeDescendantsEndIndex) {
-        sampleSelectedState = SelectedState.Selected;
+        sampleSelectedState = SampleRelationToNode.TotalButNotSelf;
       } else {
-        sampleSelectedState = SelectedState.UnselectedOrderedAfterSelected;
+        sampleSelectedState = SampleRelationToNode.After;
       }
-    } else {
-      // This sample was filtered out.
-      sampleSelectedState = SelectedState.FilteredOutByTransform;
     }
     sampleSelectedStates[sampleIndex] = sampleSelectedState;
   }
@@ -1023,21 +1028,25 @@ function _getSampleSelectedStatesInverted(
     callNodeInfo.getSuffixOrderIndexRangeForCallNode(
       selectedInvertedCallNodeIndex
     );
+  const isInvertedRoot =
+    callNodeInfo.depthForNode(selectedInvertedCallNodeIndex) === 0;
   const sampleCount = sampleNonInvertedCallNodes.length;
   const sampleSelectedStates = new Uint8Array(sampleCount);
   for (let sampleIndex = 0; sampleIndex < sampleCount; sampleIndex++) {
-    let sampleSelectedState: SelectedState = SelectedState.Selected;
+    let sampleSelectedState: SampleRelationToNode =
+      SampleRelationToNode.FilteredOut;
     const callNodeIndex = sampleNonInvertedCallNodes[sampleIndex];
     if (callNodeIndex !== null) {
       const suffixOrderIndex = suffixOrderIndexes[callNodeIndex];
       if (suffixOrderIndex < selectedSubtreeRangeStart) {
-        sampleSelectedState = SelectedState.UnselectedOrderedBeforeSelected;
+        sampleSelectedState = SampleRelationToNode.Before;
       } else if (suffixOrderIndex >= selectedSubtreeRangeEnd) {
-        sampleSelectedState = SelectedState.UnselectedOrderedAfterSelected;
+        sampleSelectedState = SampleRelationToNode.After;
+      } else {
+        sampleSelectedState = isInvertedRoot
+          ? SampleRelationToNode.TotalAndSelf
+          : SampleRelationToNode.TotalButNotSelf;
       }
-    } else {
-      // This sample was filtered out.
-      sampleSelectedState = SelectedState.FilteredOutByTransform;
     }
     sampleSelectedStates[sampleIndex] = sampleSelectedState;
   }
@@ -4432,3 +4441,19 @@ export function computeStackTableFromRawStackTable(
     length: rawStackTable.length,
   };
 }
+
+/**
+ * Convert a SampleRelationToNode to a SelectedState.
+ *
+ * This is just a "binary and" with SAMPLE_RELATION_TO_SELECTED_STATE_MASK,
+ * wrapped in the appropriate type casts.
+ *
+ * This assumes that the given "sample relation" is with respect to the
+ * selected node.
+ */
+export function toSelectedState(
+  sampleRelationToNode: SampleRelationToNode
+): SelectedState {
+  return ((sampleRelationToNode as number) &
+    SAMPLE_RELATION_TO_SELECTED_STATE_MASK) as SelectedState;
+}
diff --git a/src/test/unit/profile-data.test.ts b/src/test/unit/profile-data.test.ts
index 9e074fe2e0..d0242c7905 100644
--- a/src/test/unit/profile-data.test.ts
+++ b/src/test/unit/profile-data.test.ts
@@ -63,7 +63,7 @@ import type {
   IndexIntoCategoryList,
   IndexIntoNativeSymbolTable,
 } from 'firefox-profiler/types';
-import { SelectedState, ResourceType } from 'firefox-profiler/types';
+import { ResourceType, SampleRelationToNode } from 'firefox-profiler/types';
 
 describe('string-table', function () {
   const u = StringTable.withBackingArray(['foo', 'bar', 'baz']);
@@ -1051,42 +1051,42 @@ describe('getSampleSelectedStates', function () {
       expect(
         Array.from(getSampleSelectedStates(callNodeInfo, sampleCallNodes, A_B))
       ).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))
       ).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)
         )
       ).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)
         )
       ).toEqual([
-        SelectedState.UnselectedOrderedBeforeSelected,
-        SelectedState.Selected,
-        SelectedState.UnselectedOrderedBeforeSelected,
-        SelectedState.UnselectedOrderedAfterSelected,
-        SelectedState.UnselectedOrderedBeforeSelected,
+        SampleRelationToNode.Before,
+        SampleRelationToNode.TotalAndSelf,
+        SampleRelationToNode.Before,
+        SampleRelationToNode.After,
+        SampleRelationToNode.Before,
       ]);
     });
 
@@ -1153,13 +1153,13 @@ describe('getSampleSelectedStates', function () {
           getSampleSelectedStates(callNodeInfoInverted, sampleCallNodes, inBA)
         )
       ).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
@@ -1168,13 +1168,13 @@ describe('getSampleSelectedStates', function () {
           getSampleSelectedStates(callNodeInfoInverted, sampleCallNodes, inCBA)
         )
       ).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
@@ -1183,13 +1183,13 @@ describe('getSampleSelectedStates', function () {
           getSampleSelectedStates(callNodeInfoInverted, sampleCallNodes, inB)
         )
       ).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 f52454fd9e..08ce62d959 100644
--- a/src/types/profile-derived.ts
+++ b/src/types/profile-derived.ts
@@ -685,18 +685,38 @@ export type RemoveProfileInformation = {
 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,
+  FilteredOutByTransform = 0,
+  // This sample is selected because an ancestor call node matches the currently
+  // selected call node. See SelectedSelf for the case where the sample's call node
+  // itself is the selected call node.
+  Selected = 1,
   // This call node is not selected, and the stacks are ordered before the selected
   // call node as sorted by the getTreeOrderComparator.
-  UnselectedOrderedBeforeSelected,
+  UnselectedOrderedBeforeSelected = 2,
   // This call node is not selected, and the stacks are ordered after the selected
   // call node as sorted by the getTreeOrderComparator.
-  UnselectedOrderedAfterSelected,
+  UnselectedOrderedAfterSelected = 3,
 }
 
+// Given a SampleRelationToNode r to the selected node, we can mask off the "self" bit
+// using `(r & SAMPLE_RELATION_TO_SELECTED_STATE_MASK)` to get the corresponding
+// SelectedState value.
+export const SAMPLE_RELATION_TO_SELECTED_STATE_MASK = 3;
+
+/**
+ * Similar to SelectedState, but also used for relations to other nodes, e.g. to
+ * the hovered node in the flamegraph.
+ * The other difference compared to SelectedState is that SampleRelationToNode makes
+ * a distinction between "self" and "non-self" samples. This is used to compute the
+ * timings in the sidebar and in the flamegraph tooltip.
+ */
+export const enum SampleRelationToNode {
+  FilteredOut = SelectedState.FilteredOutByTransform,
+  TotalButNotSelf = SelectedState.Selected,
+  TotalAndSelf = SelectedState.Selected | (1 << 2),
+  Before = SelectedState.UnselectedOrderedBeforeSelected,
+  After = SelectedState.UnselectedOrderedAfterSelected,
+}
 /**
  * It holds the initially selected track's HTMLElement. This allows the timeline
  * to scroll the initially selected track into view once the page is loaded.

From fdba7bbd0ef1846e3dd28af1878b58cdfc81285f 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 03/14] Use precomputed sample selected states in sidebar
 timings computation.

---
 src/actions/profile-view.ts                   |   4 +-
 src/components/flame-graph/Canvas.tsx         |  29 +++-
 src/components/flame-graph/FlameGraph.tsx     |   5 +
 .../shared/thread/ActivityGraphFills.tsx      |   5 +-
 src/components/timeline/TrackThread.tsx       |   4 +-
 src/profile-logic/profile-data.ts             | 131 ++++--------------
 src/selectors/per-thread/index.ts             |   6 +-
 src/selectors/per-thread/stack-sample.ts      |  82 +++++++++--
 src/selectors/per-thread/thread.tsx           |   1 +
 9 files changed, 130 insertions(+), 137 deletions(-)

diff --git a/src/actions/profile-view.ts b/src/actions/profile-view.ts
index a7bf7ddc39..2ffba4e896 100644
--- a/src/actions/profile-view.ts
+++ b/src/actions/profile-view.ts
@@ -156,9 +156,7 @@ export function selectSelfCallNode(
   return (dispatch, getState) => {
     const threadSelectors = getThreadSelectorsFromThreadsKey(threadsKey);
     const sampleCallNodes =
-      threadSelectors.getSampleIndexToNonInvertedCallNodeIndexForFilteredThread(
-        getState()
-      );
+      threadSelectors.getSampleCallNodesForFilteredThread(getState());
 
     if (
       sampleIndex === null ||
diff --git a/src/components/flame-graph/Canvas.tsx b/src/components/flame-graph/Canvas.tsx
index 1c163512b2..badc12addd 100644
--- a/src/components/flame-graph/Canvas.tsx
+++ b/src/components/flame-graph/Canvas.tsx
@@ -17,8 +17,11 @@ import {
   formatPercent,
 } from 'firefox-profiler/utils/format-numbers';
 import { TooltipCallNode } from 'firefox-profiler/components/tooltip/CallNode';
-import { getTimingsForCallNodeIndex } from 'firefox-profiler/profile-logic/profile-data';
 import MixedTupleMap from 'mixedtuplemap';
+import {
+  getCallNodeTimings,
+  getSampleSelectedStates,
+} from 'firefox-profiler/profile-logic/profile-data';
 
 import type {
   Thread,
@@ -74,6 +77,7 @@ export type OwnProps = {
   readonly callTreeSummaryStrategy: CallTreeSummaryStrategy;
   readonly ctssSamples: SamplesLikeTable;
   readonly ctssSampleCategoriesAndSubcategories: SampleCategoriesAndSubcategories;
+  readonly ctssSampleCallNodes: Array<IndexIntoCallNodeTable | null>;
   readonly tracedTiming: CallTreeTimingsNonInverted | null;
   readonly displayStackType: boolean;
 };
@@ -344,7 +348,10 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
   };
 
   // Properly memoize this derived information for the Tooltip component.
-  _getTimingsForCallNodeIndex = memoize(getTimingsForCallNodeIndex, {
+  _getSampleSelectedStates = memoize(getSampleSelectedStates, {
+    cache: new MixedTupleMap(),
+  });
+  _getCallNodeTimings = memoize(getCallNodeTimings, {
     cache: new MixedTupleMap(),
   });
 
@@ -365,6 +372,7 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
       weightType,
       ctssSamples,
       ctssSampleCategoriesAndSubcategories,
+      ctssSampleCallNodes,
       tracedTiming,
       displayStackType,
     } = this.props;
@@ -404,6 +412,11 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
       // strategies, but it may not be worth implementing it.
       callTreeSummaryStrategy === 'timing';
 
+    const callNodeInfoInverted = callNodeInfo.asInverted();
+    const isInvertedRoot =
+      callNodeInfoInverted !== null &&
+      callNodeInfoInverted.isRoot(callNodeIndex);
+
     return (
       // Important! Only pass in props that have been properly memoized so this component
       // doesn't over-render.
@@ -420,12 +433,16 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
         callTreeSummaryStrategy={callTreeSummaryStrategy}
         timings={
           shouldComputeTimings
-            ? this._getTimingsForCallNodeIndex(
-                callNodeIndex,
-                callNodeInfo,
+            ? this._getCallNodeTimings(
                 categories,
                 ctssSamples,
-                ctssSampleCategoriesAndSubcategories
+                ctssSampleCategoriesAndSubcategories,
+                this._getSampleSelectedStates(
+                  callNodeInfo,
+                  ctssSampleCallNodes,
+                  callNodeIndex
+                ),
+                isInvertedRoot
               )
             : undefined
         }
diff --git a/src/components/flame-graph/FlameGraph.tsx b/src/components/flame-graph/FlameGraph.tsx
index 376d0f3025..3a2d8eab5c 100644
--- a/src/components/flame-graph/FlameGraph.tsx
+++ b/src/components/flame-graph/FlameGraph.tsx
@@ -87,6 +87,7 @@ type StateProps = {
   readonly callTreeSummaryStrategy: CallTreeSummaryStrategy;
   readonly ctssSamples: SamplesLikeTable;
   readonly ctssSampleCategoriesAndSubcategories: SampleCategoriesAndSubcategories;
+  readonly ctssSampleCallNodes: Array<IndexIntoCallNodeTable | null>;
   readonly tracedTiming: CallTreeTimings | null;
   readonly displayStackType: boolean;
 };
@@ -341,6 +342,7 @@ class FlameGraphImpl
       weightType,
       ctssSamples,
       ctssSampleCategoriesAndSubcategories,
+      ctssSampleCallNodes,
       tracedTiming,
       displayStackType,
     } = this.props;
@@ -406,6 +408,7 @@ class FlameGraphImpl
               isInverted,
               ctssSamples,
               ctssSampleCategoriesAndSubcategories,
+              ctssSampleCallNodes,
               tracedTiming: tracedTimingNonInverted,
               displayStackType,
             }}
@@ -459,6 +462,8 @@ export const FlameGraph = explicitConnectWithForwardRef<
       selectedThreadSelectors.getPreviewFilteredCtssSampleCategoriesAndSubcategories(
         state
       ),
+    ctssSampleCallNodes:
+      selectedThreadSelectors.getPreviewFilteredCtssSampleCallNodes(state),
     tracedTiming: selectedThreadSelectors.getTracedTiming(state),
     displayStackType: getProfileUsesMultipleStackTypes(state),
   }),
diff --git a/src/components/shared/thread/ActivityGraphFills.tsx b/src/components/shared/thread/ActivityGraphFills.tsx
index 7b40fed127..0efa566c09 100644
--- a/src/components/shared/thread/ActivityGraphFills.tsx
+++ b/src/components/shared/thread/ActivityGraphFills.tsx
@@ -13,7 +13,10 @@ import type {
   DevicePixels,
   CssPixels,
 } from 'firefox-profiler/types';
-import { SAMPLE_RELATION_TO_SELECTED_STATE_MASK, SelectedState } from 'firefox-profiler/types';
+import {
+  SAMPLE_RELATION_TO_SELECTED_STATE_MASK,
+  SelectedState,
+} from 'firefox-profiler/types';
 import type { HoveredPixelState } from './ActivityGraph';
 
 /**
diff --git a/src/components/timeline/TrackThread.tsx b/src/components/timeline/TrackThread.tsx
index b0ee5338a6..710a83972e 100644
--- a/src/components/timeline/TrackThread.tsx
+++ b/src/components/timeline/TrackThread.tsx
@@ -336,9 +336,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 cf9ebddbc6..b7cb6742f9 100644
--- a/src/profile-logic/profile-data.ts
+++ b/src/profile-logic/profile-data.ts
@@ -1124,39 +1124,15 @@ export type TimingsForPath = {
 };
 
 /**
- * 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 sampleSelectedStates.
  */
-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.
- * Note that the unfilteredThread should be the original thread before any filtering
- * (by range or other) happens. Also sampleIndexOffset needs to be properly
- * specified and is the offset to be applied on thread's indexes to access
- * the same samples in unfilteredThread.
- */
-export function getTimingsForCallNodeIndex(
-  needleNodeIndex: IndexIntoCallNodeTable | null,
-  callNodeInfo: CallNodeInfo,
-  categories: CategoryList,
-  samples: SamplesLikeTable,
-  sampleCategoriesAndSubcategories: SampleCategoriesAndSubcategories
+  sampleCategoriesAndSubcategories: SampleCategoriesAndSubcategories,
+  sampleSelectedStates: Uint8Array,
+  isInvertedRoot: boolean
 ): TimingsForPath {
   /* ------------ Variables definitions ------------*/
 
@@ -1219,89 +1195,30 @@ 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. The sampleSelectedStates encodes whether each
+  // sample is filtered out, in the needle's subtree (total), or is an exact
+  // match for the needle (self). This works for both inverted and non-inverted
+  // call trees since getSampleSelectedStates handles the distinction internally.
+  for (let sampleIndex = 0; sampleIndex < samples.length; sampleIndex++) {
+    const state = sampleSelectedStates[sampleIndex] as SampleRelationToNode;
+    if (state === SampleRelationToNode.FilteredOut) {
+      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 (
+      state === SampleRelationToNode.TotalAndSelf ||
+      state === SampleRelationToNode.TotalButNotSelf
+    ) {
+      accumulateDataToTimings(pathTimings.totalTime, sampleIndex, weight);
+      if (state === SampleRelationToNode.TotalAndSelf) {
         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/selectors/per-thread/index.ts b/src/selectors/per-thread/index.ts
index 6b777e2ef5..1040e7238d 100644
--- a/src/selectors/per-thread/index.ts
+++ b/src/selectors/per-thread/index.ts
@@ -241,12 +241,12 @@ export const selectedNodeSelectors: NodeSelectors = (() => {
   );
 
   const getTimingsForSidebar: Selector<TimingsForPath> = createSelector(
-    selectedThreadSelectors.getSelectedCallNodePath,
-    selectedThreadSelectors.getCallNodeInfo,
     ProfileSelectors.getCategories,
     selectedThreadSelectors.getPreviewFilteredCtssSamples,
     selectedThreadSelectors.getPreviewFilteredCtssSampleCategoriesAndSubcategories,
-    ProfileData.getTimingsForPath
+    selectedThreadSelectors.getPreviewFilteredCtssSampleSelectedStates,
+    selectedThreadSelectors.getSelectedCallNodeIsInvertedRoot,
+    ProfileData.getCallNodeTimings
   );
 
   return {
diff --git a/src/selectors/per-thread/stack-sample.ts b/src/selectors/per-thread/stack-sample.ts
index 11f1a282a5..599fb535a1 100644
--- a/src/selectors/per-thread/stack-sample.ts
+++ b/src/selectors/per-thread/stack-sample.ts
@@ -240,26 +240,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,
@@ -270,7 +270,7 @@ export function getStackAndSampleSelectorsPerThread(
 
   const getSampleSelectedStatesInFilteredThread: Selector<Uint8Array> =
     createSelector(
-      getSampleIndexToNonInvertedCallNodeIndexForFilteredThread,
+      getSampleCallNodesForFilteredThread,
       getCallNodeInfo,
       getSelectedCallNodeIndex,
       (
@@ -286,13 +286,64 @@ export function getStackAndSampleSelectorsPerThread(
       }
     );
 
+  const getFilteredCtssSampleSelectedStates: Selector<Uint8Array> =
+    createSelector(
+      threadSelectors.getFilteredCtssSamples,
+      (state: State) => threadSelectors.getFilteredThread(state).samples,
+      getSampleSelectedStatesInFilteredThread,
+      _getSampleCallNodesForFilteredCtssThread,
+      getCallNodeInfo,
+      getSelectedCallNodeIndex,
+      (
+        filteredCtssSamples,
+        filteredSamples,
+        filteredSelectedStates,
+        ctssSampleCallNodes,
+        callNodeInfo,
+        selectedCallNode
+      ) => {
+        if (filteredCtssSamples === filteredSamples) {
+          return filteredSelectedStates;
+        }
+        return ProfileData.getSampleSelectedStates(
+          callNodeInfo,
+          ctssSampleCallNodes,
+          selectedCallNode
+        );
+      }
+    );
+
+  const getPreviewFilteredCtssSampleSelectedStates: Selector<Uint8Array> =
+    createSelector(
+      getFilteredCtssSampleSelectedStates,
+      (state: State) =>
+        threadSelectors.getPreviewFilteredCtssSampleIndexOffsets(state),
+      (state: State) =>
+        threadSelectors.getFilteredCtssSampleIndexOffsets(state),
+      (filteredSelectedStates, [b, e], [fb]) =>
+        filteredSelectedStates.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
   );
@@ -318,7 +369,7 @@ export function getStackAndSampleSelectorsPerThread(
   const getCallNodeSelfAndSummary: Selector<CallNodeSelfAndSummary> =
     createSelector(
       threadSelectors.getPreviewFilteredCtssSamples,
-      _getSampleIndexToNonInvertedCallNodeIndexForPreviewFilteredCtssThread,
+      getPreviewFilteredCtssSampleCallNodes,
       getCallNodeInfo,
       (samples, sampleIndexToCallNodeIndex, callNodeInfo) => {
         return CallTree.computeCallNodeSelfAndSummary(
@@ -404,7 +455,7 @@ export function getStackAndSampleSelectorsPerThread(
   const getTracedTiming: Selector<CallTree.CallTreeTimings | null> =
     createSelector(
       threadSelectors.getPreviewFilteredCtssSamples,
-      _getSampleIndexToNonInvertedCallNodeIndexForPreviewFilteredCtssThread,
+      getPreviewFilteredCtssSampleCallNodes,
       getCallNodeInfo,
       ProfileSelectors.getProfileInterval,
       (samples, sampleIndexToCallNodeIndex, callNodeInfo, interval) => {
@@ -445,7 +496,7 @@ export function getStackAndSampleSelectorsPerThread(
   const _getStackTimingByDepthWithMap: Selector<StackTiming.StackTimingByDepthWithMap> =
     createSelector(
       threadSelectors.getFilteredCtssSamples,
-      _getSampleIndexToNonInvertedCallNodeIndexForFilteredCtssThread,
+      _getSampleCallNodesForFilteredCtssThread,
       getCallNodeInfo,
       getFilteredCallNodeMaxDepthPlusOne,
       ProfileSelectors.getProfileInterval,
@@ -503,8 +554,11 @@ export function getStackAndSampleSelectorsPerThread(
     getSelectedCallNodeIndex,
     getExpandedCallNodePaths,
     getExpandedCallNodeIndexes,
-    getSampleIndexToNonInvertedCallNodeIndexForFilteredThread,
+    getSampleCallNodesForFilteredThread,
     getSampleSelectedStatesInFilteredThread,
+    getPreviewFilteredCtssSampleCallNodes,
+    getPreviewFilteredCtssSampleSelectedStates,
+    getSelectedCallNodeIsInvertedRoot,
     getTreeOrderComparatorInFilteredThread,
     getCallTree,
     getFunctionListTree,
diff --git a/src/selectors/per-thread/thread.tsx b/src/selectors/per-thread/thread.tsx
index 00158837aa..d211c82be9 100644
--- a/src/selectors/per-thread/thread.tsx
+++ b/src/selectors/per-thread/thread.tsx
@@ -616,6 +616,7 @@ export function getThreadSelectorsWithMarkersPerThread(
     getPreviewFilteredThread,
     getFilteredCtssSamples,
     getPreviewFilteredCtssSamples,
+    getPreviewFilteredCtssSampleIndexOffsets,
     getPreviewFilteredCtssSampleCategoriesAndSubcategories,
     getHasFilteredCtssSamples,
     getHasPreviewFilteredCtssSamples,

From aed691ca6c505e04135a3e9b6a21896fe4cde7d0 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 04/14] Optimize getCallNodeTimings.

---
 src/profile-logic/profile-data.ts | 125 ++++++++++++++----------------
 1 file changed, 60 insertions(+), 65 deletions(-)

diff --git a/src/profile-logic/profile-data.ts b/src/profile-logic/profile-data.ts
index b7cb6742f9..d7725dc3ca 100644
--- a/src/profile-logic/profile-data.ts
+++ b/src/profile-logic/profile-data.ts
@@ -1100,17 +1100,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 = {
@@ -1134,67 +1133,26 @@ export function getCallNodeTimings(
   sampleSelectedStates: Uint8Array,
   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. */
-
-  /**
-   * This is a small utility function to more easily add data to breakdowns.
-   */
-  function accumulateDataToTimings(
-    timings: {
-      breakdownByCategory: BreakdownByCategory | null;
-      value: number;
-    },
-    sampleIndex: IndexIntoSamplesTable,
-    duration: Milliseconds
-  ): void {
-    // Step 1: increment the total value
-    timings.value += duration;
-
-    // step 2: find the category value for this stack.
-    const categoryIndex = sampleCategories[sampleIndex];
-    const subcategoryIndex = sampleSubcategories[sampleIndex];
-
-    // step 3: increment the right value in the category breakdown
-    if (timings.breakdownByCategory === null) {
-      timings.breakdownByCategory = categories.map((category) => ({
-        entireCategoryValue: 0,
-        subcategoryBreakdown: Array(category.subcategories.length).fill(0),
-      }));
-    }
-    timings.breakdownByCategory[categoryIndex].entireCategoryValue += duration;
-    timings.breakdownByCategory[categoryIndex].subcategoryBreakdown[
-      subcategoryIndex
-    ] += 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. The sampleSelectedStates encodes whether each
   // sample is filtered out, in the needle's subtree (total), or is an exact
@@ -1211,13 +1169,50 @@ export function getCallNodeTimings(
       state === SampleRelationToNode.TotalAndSelf ||
       state === SampleRelationToNode.TotalButNotSelf
     ) {
-      accumulateDataToTimings(pathTimings.totalTime, sampleIndex, weight);
+      totalValue += weight;
+      hasTotal = true;
+      const categoryIndex = sampleCategories[sampleIndex];
+      const subcategoryIndex = sampleSubcategories[sampleIndex];
+      totalCategorySummary[categoryIndex] += weight;
+      totalSubcategorySummaries[categoryIndex][subcategoryIndex] += weight;
       if (state === SampleRelationToNode.TotalAndSelf) {
-        accumulateDataToTimings(pathTimings.selfTime, sampleIndex, weight);
+        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 };
 }
 

From 6ddb03b0ae7bc66173aed964bc3082e2a12e4c5c Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange.moz@gmail.com>
Date: Sat, 7 Mar 2026 16:01:38 -0500
Subject: [PATCH 05/14] Only do one cpuPercent access per loop iteration.

---
 src/components/shared/thread/ActivityGraphFills.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/shared/thread/ActivityGraphFills.tsx b/src/components/shared/thread/ActivityGraphFills.tsx
index 0efa566c09..4a67f27245 100644
--- a/src/components/shared/thread/ActivityGraphFills.tsx
+++ b/src/components/shared/thread/ActivityGraphFills.tsx
@@ -240,12 +240,11 @@ export class ActivityGraphFillComputer {
 
     // Go through the samples and accumulate the category into the percentageBuffers.
     const { threadCPUPercent } = samples;
+    let beforeSampleCpuPercent = threadCPUPercent[0];
     for (let i = 0; i < samples.length - 1; i++) {
       const nextSampleTime = samples.time[i + 1];
-      const category = samples.category[i];
-
-      const beforeSampleCpuPercent = threadCPUPercent[i];
       const afterSampleCpuPercent = threadCPUPercent[i + 1];
+      const category = samples.category[i];
 
       const percentageBuffers = this.mutablePercentageBuffers[category];
       const bufferIndex =
@@ -265,13 +264,13 @@ export class ActivityGraphFillComputer {
 
       prevSampleTime = sampleTime;
       sampleTime = nextSampleTime;
+      beforeSampleCpuPercent = afterSampleCpuPercent;
     }
 
     // Handle the last sample, which was not covered by the for loop above.
     const lastIdx = samples.length - 1;
     const lastSampleCategory = samples.category[lastIdx];
 
-    const beforeSampleCpuPercent = threadCPUPercent[lastIdx];
     const afterSampleCpuPercent = threadCPUPercent[lastIdx + 1]; // guaranteed to exist
 
     const nextSampleTime = sampleTime + interval;

From 101d150dc7b5320d6c29d7181c5effc66a4cf428 Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange.moz@gmail.com>
Date: Sun, 8 Feb 2026 15:05:16 -0500
Subject: [PATCH 06/14] Precompute sample positions.

---
 .../shared/thread/ActivityGraphCanvas.tsx     |  19 +-
 .../shared/thread/ActivityGraphFills.tsx      | 233 +++++++++---------
 .../ThreadActivityGraph.test.tsx.snap         | 198 +++++++--------
 3 files changed, 238 insertions(+), 212 deletions(-)

diff --git a/src/components/shared/thread/ActivityGraphCanvas.tsx b/src/components/shared/thread/ActivityGraphCanvas.tsx
index 36356a762b..d58a1af75e 100644
--- a/src/components/shared/thread/ActivityGraphCanvas.tsx
+++ b/src/components/shared/thread/ActivityGraphCanvas.tsx
@@ -4,11 +4,15 @@
  * */
 import * as React from 'react';
 import { InView } from 'react-intersection-observer';
+import memoizeOne from 'memoize-one';
 import type {
   ActivityFillGraphQuerier,
   CategoryDrawStyles,
 } from './ActivityGraphFills';
-import { computeActivityGraphFills } from './ActivityGraphFills';
+import {
+  computeActivityGraphFills,
+  precomputePositions,
+} from './ActivityGraphFills';
 import { timeCode } from 'firefox-profiler/utils/time-code';
 import { mapCategoryColorNameToStyles } from 'firefox-profiler/utils/colors';
 
@@ -46,6 +50,7 @@ export class ActivityGraphCanvas extends React.PureComponent<CanvasProps> {
     renderScheduled: false,
     inView: false,
   };
+  _memoizedPrecomputePositions = memoizeOne(precomputePositions);
 
   _renderCanvas() {
     if (!this._canvasState.inView) {
@@ -141,6 +146,17 @@ export class ActivityGraphCanvas extends React.PureComponent<CanvasProps> {
     canvas.width = canvasPixelWidth;
     canvas.height = canvasPixelHeight;
 
+    const xPixelsPerMs = canvasPixelWidth / (rangeEnd - rangeStart);
+    const precomputedPositions = this._memoizedPrecomputePositions(
+      fullThread.samples.time,
+      sampleIndexOffset,
+      rangeFilteredThread.samples.length,
+      rangeStart,
+      xPixelsPerMs,
+      interval,
+      canvasPixelWidth
+    );
+
     const { fills, fillsQuerier } = computeActivityGraphFills({
       canvasPixelWidth,
       canvasPixelHeight,
@@ -154,6 +170,7 @@ export class ActivityGraphCanvas extends React.PureComponent<CanvasProps> {
       xPixelsPerMs: canvasPixelWidth / (rangeEnd - rangeStart),
       treeOrderSampleComparator,
       categoryDrawStyles: this._getCategoryDrawStyles(ctx!),
+      precomputedPositions,
     });
 
     // The value in fillsQuerier is needed in ActivityGraph but is computed in this method
diff --git a/src/components/shared/thread/ActivityGraphFills.tsx b/src/components/shared/thread/ActivityGraphFills.tsx
index 4a67f27245..d9e4992bb8 100644
--- a/src/components/shared/thread/ActivityGraphFills.tsx
+++ b/src/components/shared/thread/ActivityGraphFills.tsx
@@ -44,6 +44,18 @@ type RenderedComponentSettings = {
     | null;
   readonly sampleSelectedStates: Uint8Array;
   readonly categoryDrawStyles: CategoryDrawStyles;
+  readonly precomputedPositions: PrecomputedPositions;
+};
+
+export type PrecomputedPositions = {
+  // The fractional device pixel position per sample in the range-filtered thread.
+  // Each position is clamped such that 0 <= pos < canvasPixelWidth.
+  samplePositions: Float32Array; // DevicePixel[]
+  // The fractional device pixel position of the half-way point *before* the sample,
+  // per sample in the range-filtered thread. Has one extra element at the end for
+  // the half-way position after the last sample.
+  // Each position is clamped such that 0 <= pos < canvasPixelWidth.
+  halfwayPositions: Float32Array; // DevicePixel[]
 };
 
 type SampleContributionToPixel = {
@@ -97,6 +109,64 @@ const SMOOTHING_KERNEL: Float32Array<ArrayBuffer> = _getSmoothingKernel(
   BOX_BLUR_RADII
 );
 
+export function precomputePositions(
+  fullThreadSampleTimes: Milliseconds[],
+  sampleIndexOffset: number,
+  sampleCount: number,
+  rangeStart: Milliseconds,
+  xPixelsPerMs: number,
+  interval: Milliseconds,
+  canvasPixelWidth: DevicePixels
+): PrecomputedPositions {
+  function convertTimeToClampedPosition(time: Milliseconds): DevicePixels {
+    const pos = (time - rangeStart) * xPixelsPerMs;
+    if (pos < 0) {
+      return 0;
+    }
+    if (pos > canvasPixelWidth - 0.1) {
+      return canvasPixelWidth - 0.1;
+    }
+    return pos;
+  }
+
+  // The fractional device pixel position per sample in the range-filtered thread.
+  const samplePositions = new Float32Array(sampleCount); // DevicePixel[]
+
+  // The fractional device pixel position of the half-way point *before* the sample,
+  // per sample in the range-filtered thread. Has one extra element at the end for
+  // the half-way position after the last sample.
+  const halfwayPositions = new Float32Array(sampleCount + 1); // DevicePixel[]
+
+  let previousSampleTime =
+    sampleIndexOffset > 0
+      ? fullThreadSampleTimes[sampleIndexOffset - 1]
+      : fullThreadSampleTimes[0] - interval;
+  // Go through the samples and accumulate the category into the percentageBuffers.
+  for (let i = 0; i < sampleCount; i++) {
+    const sampleTime = fullThreadSampleTimes[sampleIndexOffset + i];
+    samplePositions[i] = convertTimeToClampedPosition(sampleTime);
+
+    const halfwayPointTimeBefore = (previousSampleTime + sampleTime) / 2;
+    halfwayPositions[i] = convertTimeToClampedPosition(halfwayPointTimeBefore);
+
+    previousSampleTime = sampleTime;
+  }
+
+  // Add another half-way point for after the last sample.
+  const afterLastSampleTime =
+    sampleIndexOffset + sampleCount < fullThreadSampleTimes.length
+      ? fullThreadSampleTimes[sampleIndexOffset + sampleCount]
+      : previousSampleTime + interval;
+  const halfwayPointTime = (previousSampleTime + afterLastSampleTime) / 2;
+  halfwayPositions[sampleCount] =
+    convertTimeToClampedPosition(halfwayPointTime);
+
+  return {
+    samplePositions,
+    halfwayPositions,
+  };
+}
+
 export function computeActivityGraphFills(
   renderedComponentSettings: RenderedComponentSettings
 ) {
@@ -214,12 +284,9 @@ export class ActivityGraphFillComputer {
    */
   _accumulateSampleCategories() {
     const {
-      fullThread,
       rangeFilteredThread: { samples },
-      interval,
-      sampleIndexOffset,
-      rangeStart,
       sampleSelectedStates,
+      precomputedPositions,
     } = this.renderedComponentSettings;
 
     if (samples.length === 0) {
@@ -227,22 +294,16 @@ export class ActivityGraphFillComputer {
       return;
     }
 
-    let prevSampleTime = samples.time[0] - interval;
-    let sampleTime = samples.time[0];
 
-    if (sampleIndexOffset > 0) {
-      // If sampleIndexOffset is greater than zero, it means that we are zoomed
-      // in the timeline and we are seeing a portion of it. In that case,
-      // rangeFilteredThread will not have the information of the first previous
-      // sample. So we need to get that information from the full thread.
-      prevSampleTime = fullThread.samples.time[sampleIndexOffset - 1];
-    }
-
-    // Go through the samples and accumulate the category into the percentageBuffers.
+    // Go through the samples and accumulate the category into the percentageBuffers.)
+    const { samplePositions, halfwayPositions } = precomputedPositions;
     const { threadCPUPercent } = samples;
     let beforeSampleCpuPercent = threadCPUPercent[0];
-    for (let i = 0; i < samples.length - 1; i++) {
-      const nextSampleTime = samples.time[i + 1];
+    let halfwayPositionBefore = halfwayPositions[0];
+    for (let i = 0; i < samples.length; i++) {
+      // Note that both halfwayPositions and threadCPUPercent have an extra element
+      // at the end, so accessing [i + 1] is valid even for the last sample.
+      const halfwayPositionAfter = halfwayPositions[i + 1];
       const afterSampleCpuPercent = threadCPUPercent[i + 1];
       const category = samples.category[i];
 
@@ -250,46 +311,20 @@ export class ActivityGraphFillComputer {
       const bufferIndex =
         sampleSelectedStates[i] & SAMPLE_RELATION_TO_SELECTED_STATE_MASK;
       const percentageBuffer = percentageBuffers[bufferIndex];
+      const samplePosition = samplePositions[i];
 
       _accumulateInBuffer(
         percentageBuffer,
-        this.renderedComponentSettings,
-        prevSampleTime,
-        sampleTime,
-        nextSampleTime,
+        halfwayPositionBefore,
+        samplePosition,
+        halfwayPositionAfter,
         beforeSampleCpuPercent,
-        afterSampleCpuPercent,
-        rangeStart
+        afterSampleCpuPercent
       );
 
-      prevSampleTime = sampleTime;
-      sampleTime = nextSampleTime;
+      halfwayPositionBefore = halfwayPositionAfter;
       beforeSampleCpuPercent = afterSampleCpuPercent;
     }
-
-    // Handle the last sample, which was not covered by the for loop above.
-    const lastIdx = samples.length - 1;
-    const lastSampleCategory = samples.category[lastIdx];
-
-    const afterSampleCpuPercent = threadCPUPercent[lastIdx + 1]; // guaranteed to exist
-
-    const nextSampleTime = sampleTime + interval;
-    const percentageBuffers = this.mutablePercentageBuffers[lastSampleCategory];
-
-    const bufferIndex =
-      sampleSelectedStates[lastIdx] & SAMPLE_RELATION_TO_SELECTED_STATE_MASK;
-    const percentageBuffer = percentageBuffers[bufferIndex];
-
-    _accumulateInBuffer(
-      percentageBuffer,
-      this.renderedComponentSettings,
-      prevSampleTime,
-      sampleTime,
-      nextSampleTime,
-      beforeSampleCpuPercent,
-      afterSampleCpuPercent,
-      rangeStart
-    );
   }
 }
 
@@ -590,46 +625,36 @@ export class ActivityFillGraphQuerier {
   ): number {
     const {
       rangeFilteredThread: { samples },
-      interval,
-      sampleIndexOffset,
-      fullThread,
-      xPixelsPerMs,
-      rangeStart,
+      canvasPixelWidth,
+      precomputedPositions: { samplePositions, halfwayPositions },
     } = this.renderedComponentSettings;
-    const kernelPos = xPixel - SMOOTHING_RADIUS;
-    const pixelsAroundX = new Float32Array(SMOOTHING_KERNEL.length);
-    const sampleTime = samples.time[sample];
-    // Use the fullThread here to properly get the next and previous in case zoomed in.
-    const fullThreadSample = sample + sampleIndexOffset;
-    const prevSampleTime =
-      fullThreadSample > 0
-        ? fullThread.samples.time[fullThreadSample - 1]
-        : sampleTime - interval;
-    const nextSampleTime =
-      fullThreadSample + 1 < fullThread.samples.length
-        ? fullThread.samples.time[fullThreadSample + 1]
-        : sampleTime + interval;
+    const fullWidthPixels = new Float32Array(canvasPixelWidth);
+
+    const halfwayPositionBefore = halfwayPositions[sample];
+    const halfwayPositionAfter = halfwayPositions[sample + 1];
+    const samplePosition = samplePositions[sample];
 
     const { threadCPUPercent } = samples;
     const beforeSampleCpuPercent = threadCPUPercent[sample];
     const afterSampleCpuPercent = threadCPUPercent[sample + 1]; // guaranteed to exist
 
-    const kernelRangeStartTime = rangeStart + kernelPos / xPixelsPerMs;
-
     _accumulateInBuffer(
-      pixelsAroundX,
-      this.renderedComponentSettings,
-      prevSampleTime,
-      sampleTime,
-      nextSampleTime,
+      fullWidthPixels,
+      halfwayPositionBefore,
+      samplePosition,
+      halfwayPositionAfter,
       beforeSampleCpuPercent,
-      afterSampleCpuPercent,
-      kernelRangeStartTime
+      afterSampleCpuPercent
     );
 
     let sum = 0;
     for (let i = 0; i < SMOOTHING_KERNEL.length; i++) {
-      sum += SMOOTHING_KERNEL[i] * pixelsAroundX[i];
+      const pixelAtI = (xPixel | 0) + (i - SMOOTHING_RADIUS);
+      const pixelContribution =
+        pixelAtI >= 0 && pixelAtI < canvasPixelWidth
+          ? fullWidthPixels[pixelAtI]
+          : 0;
+      sum += SMOOTHING_KERNEL[i] * pixelContribution;
     }
 
     return sum / 100;
@@ -742,31 +767,15 @@ function _getCategoryFills(
  */
 function _accumulateInBuffer(
   percentageBuffer: Float32Array,
-  renderedComponentSettings: RenderedComponentSettings,
-  prevSampleTime: Milliseconds,
-  sampleTime: Milliseconds,
-  nextSampleTime: Milliseconds,
+  halfwayPositionBefore: DevicePixels,
+  samplePosition: DevicePixels,
+  halfwayPositionAfter: DevicePixels,
   beforeSampleCpuPercent: number,
-  afterSampleCpuPercent: number,
-  bufferTimeRangeStart: Milliseconds
+  afterSampleCpuPercent: number
 ) {
-  const { xPixelsPerMs } = renderedComponentSettings;
-  const sampleCategoryStartTime = (prevSampleTime + sampleTime) / 2;
-  const sampleCategoryEndTime = (sampleTime + nextSampleTime) / 2;
-  let sampleCategoryStartPixel =
-    (sampleCategoryStartTime - bufferTimeRangeStart) * xPixelsPerMs;
-  let sampleCategoryEndPixel =
-    (sampleCategoryEndTime - bufferTimeRangeStart) * xPixelsPerMs;
-  if (sampleCategoryStartPixel < 0) {
-    sampleCategoryStartPixel = 0;
-  }
-  if (sampleCategoryEndPixel > percentageBuffer.length - 1) {
-    sampleCategoryEndPixel = percentageBuffer.length - 1;
-  }
-  const samplePixel = (sampleTime - bufferTimeRangeStart) * xPixelsPerMs;
-  const intCategoryStartPixel = sampleCategoryStartPixel | 0;
-  const intCategoryEndPixel = sampleCategoryEndPixel | 0;
-  const intSamplePixel = samplePixel | 0;
+  const intHalfwayPositionBefore = halfwayPositionBefore | 0;
+  const intHalfwayPositionAfter = halfwayPositionAfter | 0;
+  const intSamplePosition = samplePosition | 0;
 
   // Every sample has two parts because of different CPU usage values.
   // For every sample part, we have a fractional interval of this sample part's
@@ -796,37 +805,37 @@ function _accumulateInBuffer(
   // This is because CPU usage number of a sample represents the CPU usage
   // starting starting from the previous sample time to this sample time.
   // These parts will be:
-  // - Between `sampleCategoryStartPixel` and `samplePixel` with beforeSampleCpuPercent.
-  // - Between `samplePixel` and `sampleCategoryEndPixel` with afterSampleCpuPercent.
+  // - Between `halfwayPositionBefore` and `samplePosition` with beforeSampleCpuPercent.
+  // - Between `samplePosition` and `halfwayPositionAfter` with afterSampleCpuPercent.
 
   // Here we are accumulating the first part of the sample. It will use the
   // CPU delta number that belongs to this sample.
   // This part starts from the "sample start time" to "sample time" and uses
   // beforeSampleCpuPercent.
-  for (let i = intCategoryStartPixel; i <= intSamplePixel; i++) {
+  for (let i = intHalfwayPositionBefore; i <= intSamplePosition; i++) {
     percentageBuffer[i] += beforeSampleCpuPercent;
   }
 
   // Subtract the partial pixels from start and end of the first part.
-  percentageBuffer[intCategoryStartPixel] -=
-    beforeSampleCpuPercent * (sampleCategoryStartPixel - intCategoryStartPixel);
-  percentageBuffer[intSamplePixel] -=
-    beforeSampleCpuPercent * (1 - (samplePixel - intSamplePixel));
+  percentageBuffer[intHalfwayPositionBefore] -=
+    beforeSampleCpuPercent * (halfwayPositionBefore - intHalfwayPositionBefore);
+  percentageBuffer[intSamplePosition] -=
+    beforeSampleCpuPercent * (1 - (samplePosition - intSamplePosition));
 
   // Here we are accumulating the second part of the sample. It will use the
   // CPU delta number that belongs to the next sample.
   // This part starts from "sample time" to "sample end time" and uses
   // afterSampleCpuPercent.
-  for (let i = intSamplePixel; i <= intCategoryEndPixel; i++) {
+  for (let i = intSamplePosition; i <= intHalfwayPositionAfter; i++) {
     percentageBuffer[i] += afterSampleCpuPercent;
   }
 
   // Subtract the partial pixels from start and end of the second part.
-  percentageBuffer[intSamplePixel] -=
-    afterSampleCpuPercent * (samplePixel - intSamplePixel);
-  percentageBuffer[intCategoryEndPixel] -=
+  percentageBuffer[intSamplePosition] -=
+    afterSampleCpuPercent * (samplePosition - intSamplePosition);
+  percentageBuffer[intHalfwayPositionAfter] -=
     afterSampleCpuPercent *
-    (1 - (sampleCategoryEndPixel - intCategoryEndPixel));
+    (1 - (halfwayPositionAfter - intHalfwayPositionAfter));
 }
 /**
  * Apply a 1d box blur to a destination array.
diff --git a/src/test/components/__snapshots__/ThreadActivityGraph.test.tsx.snap b/src/test/components/__snapshots__/ThreadActivityGraph.test.tsx.snap
index 8a0a5b41dc..2edc33c6df 100644
--- a/src/test/components/__snapshots__/ThreadActivityGraph.test.tsx.snap
+++ b/src/test/components/__snapshots__/ThreadActivityGraph.test.tsx.snap
@@ -6410,67 +6410,67 @@ Array [
   Array [
     "lineTo",
     73,
-    9.638095237314701,
+    9.63809534907341,
   ],
   Array [
     "lineTo",
     72,
-    9.31428574025631,
+    9.314285963773727,
   ],
   Array [
     "lineTo",
     71,
-    8.845714256167412,
+    8.845714628696442,
   ],
   Array [
     "lineTo",
     70,
-    8.220952451229095,
+    8.220953196287155,
   ],
   Array [
     "lineTo",
     69,
-    7.445714473724365,
+    7.445715367794037,
   ],
   Array [
     "lineTo",
     68,
-    6.563809514045715,
+    6.563810706138611,
   ],
   Array [
     "lineTo",
     67,
-    5.638095438480377,
+    5.638096630573273,
   ],
   Array [
     "lineTo",
     66,
-    4.767618775367737,
+    4.76762056350708,
   ],
   Array [
     "lineTo",
     65,
-    4.060952663421631,
+    4.060953855514526,
   ],
   Array [
     "lineTo",
     64,
-    3.592381477355957,
+    3.592382073402405,
   ],
   Array [
     "lineTo",
     63,
-    3.417142629623413,
+    3.4171438217163086,
   ],
   Array [
     "lineTo",
     62,
-    3.580952286720276,
+    3.5809534788131714,
   ],
   Array [
     "lineTo",
     61,
-    4.022856950759888,
+    4.0228575468063354,
   ],
   Array [
     "lineTo",
@@ -6500,12 +6500,12 @@ Array [
   Array [
     "lineTo",
     55,
-    7.893333435058594,
+    7.893333286046982,
   ],
   Array [
     "lineTo",
     54,
-    8.21333333849907,
+    8.213333189487457,
   ],
   Array [
     "lineTo",
@@ -6515,17 +6515,17 @@ Array [
   Array [
     "lineTo",
     52,
-    8.607619106769562,
+    8.60761895775795,
   ],
   Array [
     "lineTo",
     51,
-    8.727619051933289,
+    8.727618902921677,
   ],
   Array [
     "lineTo",
     50,
-    8.828571438789368,
+    8.828571289777756,
   ],
   Array [
     "lineTo",
@@ -6690,57 +6690,57 @@ Array [
   Array [
     "lineTo",
     17,
-    8.314285725355148,
+    8.31428587436676,
   ],
   Array [
     "lineTo",
     16,
-    7.771428674459457,
+    7.771428823471069,
   ],
   Array [
     "lineTo",
     15,
-    7.102857232093811,
+    7.102857530117035,
   ],
   Array [
     "lineTo",
     14,
-    6.417142748832703,
+    6.41714334487915,
   ],
   Array [
     "lineTo",
     13,
-    5.840000212192535,
+    5.840000510215759,
   ],
   Array [
     "lineTo",
     12,
-    5.5314284563064575,
+    5.531429052352905,
   ],
   Array [
     "lineTo",
     11,
-    5.537143051624298,
+    5.537143349647522,
   ],
   Array [
     "lineTo",
     10,
-    5.885714292526245,
+    5.885714590549469,
   ],
   Array [
     "lineTo",
     9,
-    6.5142858028411865,
+    6.51428610086441,
   ],
   Array [
     "lineTo",
     8,
-    7.3257142305374146,
+    7.325714528560638,
   ],
   Array [
     "lineTo",
     7,
-    8.154285550117493,
+    8.154285848140717,
   ],
   Array [
     "lineTo",
@@ -6825,82 +6825,82 @@ Array [
   Array [
     "lineTo",
     7,
-    8.154285550117493,
+    8.154285848140717,
   ],
   Array [
     "lineTo",
     8,
-    7.3257142305374146,
+    7.325714528560638,
   ],
   Array [
     "lineTo",
     9,
-    6.5142858028411865,
+    6.51428610086441,
   ],
   Array [
     "lineTo",
     10,
-    5.885714292526245,
+    5.885714590549469,
   ],
   Array [
     "lineTo",
     11,
-    5.537143051624298,
+    5.537143349647522,
   ],
   Array [
     "lineTo",
     12,
-    5.5314284563064575,
+    5.531429052352905,
   ],
   Array [
     "lineTo",
     13,
-    5.840000212192535,
+    5.840000510215759,
   ],
   Array [
     "lineTo",
     14,
-    6.417142748832703,
+    6.41714334487915,
   ],
   Array [
     "lineTo",
     15,
-    7.102857232093811,
+    7.102857530117035,
   ],
   Array [
     "lineTo",
     16,
-    7.771428674459457,
+    7.771428823471069,
   ],
   Array [
     "lineTo",
     17,
-    8.314285725355148,
+    8.31428587436676,
   ],
   Array [
     "lineTo",
     16,
-    7.714285850524902,
+    7.714285999536514,
   ],
   Array [
     "lineTo",
     15,
-    6.874285936355591,
+    6.874286234378815,
   ],
   Array [
     "lineTo",
     14,
-    5.845714211463928,
+    5.845714807510376,
   ],
   Array [
     "lineTo",
     13,
-    4.7200000286102295,
+    4.720000624656677,
   ],
   Array [
     "lineTo",
     12,
-    3.6342859268188477,
+    3.6342865228652954,
   ],
   Array [
     "lineTo",
@@ -6910,12 +6910,12 @@ Array [
   Array [
     "lineTo",
     10,
-    2.121904492378235,
+    2.1219050884246826,
   ],
   Array [
     "lineTo",
     9,
-    1.9314289093017578,
+    1.93142831325531,
   ],
   Array [
     "lineTo",
@@ -6930,22 +6930,22 @@ Array [
   Array [
     "lineTo",
     6,
-    3.7371432781219482,
+    3.7371426820755005,
   ],
   Array [
     "lineTo",
     5,
-    4.841905236244202,
+    4.841904640197754,
   ],
   Array [
     "lineTo",
     4,
-    5.984762012958527,
+    5.984761714935303,
   ],
   Array [
     "lineTo",
     3,
-    7.05523818731308,
+    7.055237889289856,
   ],
   Array [
     "lineTo",
@@ -6974,57 +6974,57 @@ Array [
   Array [
     "moveTo",
     63,
-    3.417142629623413,
+    3.4171438217163086,
   ],
   Array [
     "lineTo",
     64,
-    3.592381477355957,
+    3.592382073402405,
   ],
   Array [
     "lineTo",
     65,
-    4.060952663421631,
+    4.060953855514526,
   ],
   Array [
     "lineTo",
     66,
-    4.767618775367737,
+    4.76762056350708,
   ],
   Array [
     "lineTo",
     67,
-    5.638095438480377,
+    5.638096630573273,
   ],
   Array [
     "lineTo",
     68,
-    6.563809514045715,
+    6.563810706138611,
   ],
   Array [
     "lineTo",
     69,
-    7.445714473724365,
+    7.445715367794037,
   ],
   Array [
     "lineTo",
     70,
-    8.220952451229095,
+    8.220953196287155,
   ],
   Array [
     "lineTo",
     71,
-    8.845714256167412,
+    8.845714628696442,
   ],
   Array [
     "lineTo",
     72,
-    9.31428574025631,
+    9.314285963773727,
   ],
   Array [
     "lineTo",
     73,
-    9.638095237314701,
+    9.63809534907341,
   ],
   Array [
     "lineTo",
@@ -7059,47 +7059,47 @@ Array [
   Array [
     "lineTo",
     79,
-    9.965714283753186,
+    9.965714153368026,
   ],
   Array [
     "lineTo",
     78,
-    9.897142853587866,
+    9.89714260213077,
   ],
   Array [
     "lineTo",
     77,
-    9.771428555250168,
+    9.771428126841784,
   ],
   Array [
     "lineTo",
     76,
-    9.571428559720516,
+    9.571427926421165,
   ],
   Array [
     "lineTo",
     75,
-    9.291428551077843,
+    9.291427731513977,
   ],
   Array [
     "lineTo",
     74,
-    8.948571383953094,
+    8.948570489883423,
   ],
   Array [
     "lineTo",
     73,
-    8.546666651964188,
+    8.546665757894516,
   ],
   Array [
     "lineTo",
     72,
-    8.091428577899933,
+    8.091427981853485,
   ],
   Array [
     "lineTo",
     71,
-    7.588571459054947,
+    7.588571012020111,
   ],
   Array [
     "lineTo",
@@ -7109,37 +7109,37 @@ Array [
   Array [
     "lineTo",
     69,
-    6.42857164144516,
+    6.428572237491608,
   ],
   Array [
     "lineTo",
     68,
-    5.77523797750473,
+    5.775238871574402,
   ],
   Array [
     "lineTo",
     67,
-    5.08952409029007,
+    5.089524984359741,
   ],
   Array [
     "lineTo",
     66,
-    4.436190128326416,
+    4.436191916465759,
   ],
   Array [
     "lineTo",
     65,
-    3.8895243406295776,
+    3.889525532722473,
   ],
   Array [
     "lineTo",
     64,
-    3.5238099098205566,
+    3.5238105058670044,
   ],
   Array [
     "lineTo",
     63,
-    3.399999737739563,
+    3.4000009298324585,
   ],
   Array [
     "closePath",
@@ -9244,57 +9244,57 @@ Array [
   Array [
     "lineTo",
     44,
-    9.948872178792953,
+    9.94887215550989,
   ],
   Array [
     "lineTo",
     43,
-    9.789473675191402,
+    9.7894736379385,
   ],
   Array [
     "lineTo",
     42,
-    9.464661702513695,
+    9.464661553502083,
   ],
   Array [
     "lineTo",
     41,
-    8.91729325056076,
+    8.917292952537537,
   ],
   Array [
     "lineTo",
     40,
-    8.090225607156754,
+    8.090225160121918,
   ],
   Array [
     "lineTo",
     39,
-    7.028571367263794,
+    7.02857106924057,
   ],
   Array [
     "lineTo",
     38,
-    5.789473652839661,
+    5.789473056793213,
   ],
   Array [
     "lineTo",
     37,
-    4.481202960014343,
+    4.4812023639678955,
   ],
   Array [
     "lineTo",
     36,
-    3.218045234680176,
+    3.2180440425872803,
   ],
   Array [
     "lineTo",
     35,
-    2.1142858266830444,
+    2.1142852306365967,
   ],
   Array [
     "lineTo",
     34,
-    1.2330824136734009,
+    1.2330818176269531,
   ],
   Array [
     "lineTo",
@@ -9369,7 +9369,7 @@ Array [
   Array [
     "lineTo",
     19,
-    1.8646615743637085,
+    1.8646621704101562,
   ],
   Array [
     "lineTo",
@@ -9379,47 +9379,47 @@ Array [
   Array [
     "lineTo",
     17,
-    4.1443610191345215,
+    4.144361615180969,
   ],
   Array [
     "lineTo",
     16,
-    5.449623763561249,
+    5.44962465763092,
   ],
   Array [
     "lineTo",
     15,
-    6.715789437294006,
+    6.715790033340454,
   ],
   Array [
     "lineTo",
     14,
-    7.8285713493824005,
+    7.82857209444046,
   ],
   Array [
     "lineTo",
     13,
-    8.721804469823837,
+    8.721805065870285,
   ],
   Array [
     "lineTo",
     12,
-    9.33834582567215,
+    9.338346272706985,
   ],
   Array [
     "lineTo",
     11,
-    9.717293232679367,
+    9.717293456196785,
   ],
   Array [
     "lineTo",
     10,
-    9.915789477527142,
+    9.915789570659399,
   ],
   Array [
     "lineTo",
     9,
-    9.990977443521842,
+    9.990977477864362,
   ],
   Array [
     "closePath",

From ea239b5dadc022097d556ede68f53f1c9bf84bff Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange.moz@gmail.com>
Date: Sat, 7 Mar 2026 16:29:59 -0500
Subject: [PATCH 07/14] Split and optimize _accumulateInBuffer.

---
 .../shared/thread/ActivityGraphFills.tsx      | 96 +++++++++----------
 1 file changed, 43 insertions(+), 53 deletions(-)

diff --git a/src/components/shared/thread/ActivityGraphFills.tsx b/src/components/shared/thread/ActivityGraphFills.tsx
index d9e4992bb8..e88d1da6c0 100644
--- a/src/components/shared/thread/ActivityGraphFills.tsx
+++ b/src/components/shared/thread/ActivityGraphFills.tsx
@@ -294,7 +294,6 @@ export class ActivityGraphFillComputer {
       return;
     }
 
-
     // Go through the samples and accumulate the category into the percentageBuffers.)
     const { samplePositions, halfwayPositions } = precomputedPositions;
     const { threadCPUPercent } = samples;
@@ -313,12 +312,22 @@ export class ActivityGraphFillComputer {
       const percentageBuffer = percentageBuffers[bufferIndex];
       const samplePosition = samplePositions[i];
 
-      _accumulateInBuffer(
+      // Samples have two parts to be able to present the different CPU usages properly.
+      // This is because CPU usage number of a sample represents the CPU usage
+      // starting starting from the previous sample time to this sample time.
+      // These parts will be:
+      // - Between `halfwayPositionBefore` and `samplePosition` with beforeSampleCpuPercent.
+      // - Between `samplePosition` and `halfwayPositionAfter` with afterSampleCpuPercent.
+      _accumulateHalfSampleInBuffer(
         percentageBuffer,
         halfwayPositionBefore,
         samplePosition,
+        beforeSampleCpuPercent
+      );
+      _accumulateHalfSampleInBuffer(
+        percentageBuffer,
+        samplePosition,
         halfwayPositionAfter,
-        beforeSampleCpuPercent,
         afterSampleCpuPercent
       );
 
@@ -638,12 +647,22 @@ export class ActivityFillGraphQuerier {
     const beforeSampleCpuPercent = threadCPUPercent[sample];
     const afterSampleCpuPercent = threadCPUPercent[sample + 1]; // guaranteed to exist
 
-    _accumulateInBuffer(
+    // Samples have two parts to be able to present the different CPU usages properly.
+    // This is because CPU usage number of a sample represents the CPU usage
+    // starting starting from the previous sample time to this sample time.
+    // These parts will be:
+    // - Between `halfwayPositionBefore` and `samplePosition` with beforeSampleCpuPercent.
+    // - Between `samplePosition` and `halfwayPositionAfter` with afterSampleCpuPercent.
+    _accumulateHalfSampleInBuffer(
       fullWidthPixels,
       halfwayPositionBefore,
       samplePosition,
+      beforeSampleCpuPercent
+    );
+    _accumulateHalfSampleInBuffer(
+      fullWidthPixels,
+      samplePosition,
       halfwayPositionAfter,
-      beforeSampleCpuPercent,
       afterSampleCpuPercent
     );
 
@@ -760,23 +779,15 @@ function _getCategoryFills(
 }
 
 /**
- * Mutates `percentageBuffer` by adding contributions from a single sample to
- * the pixels that the sample overlaps with. The buffer covers the following
- * time range: It starts at `rangeStart` and ends at
- * `rangeStart + percentageBuffer.length / renderedComponentSettings.xPixelsPerMs`.
+ * Mutates `percentageBuffer` by adding contributions from a single half-sample to
+ * the pixels that the sample overlaps with.
  */
-function _accumulateInBuffer(
+function _accumulateHalfSampleInBuffer(
   percentageBuffer: Float32Array,
-  halfwayPositionBefore: DevicePixels,
-  samplePosition: DevicePixels,
-  halfwayPositionAfter: DevicePixels,
-  beforeSampleCpuPercent: number,
-  afterSampleCpuPercent: number
+  startPos: DevicePixels,
+  endPos: DevicePixels,
+  cpuPercent: number
 ) {
-  const intHalfwayPositionBefore = halfwayPositionBefore | 0;
-  const intHalfwayPositionAfter = halfwayPositionAfter | 0;
-  const intSamplePosition = samplePosition | 0;
-
   // Every sample has two parts because of different CPU usage values.
   // For every sample part, we have a fractional interval of this sample part's
   // contribution to the graph's pixels.
@@ -800,43 +811,22 @@ function _accumulateInBuffer(
   // |       |       |       |///////////////////////|       |       |
   // |       |       +-------+///////////////////////|       |       |
   // +-------+-------+///////////////////////////////+-------+-------+
+  const intStartPos = startPos | 0;
+  const intEndPos = endPos | 0;
+
+  if (intStartPos === intEndPos) {
+    percentageBuffer[intStartPos] += cpuPercent * (endPos - startPos);
+  } else {
+    if (intStartPos + 1 < intEndPos) {
+      percentageBuffer.fill(cpuPercent, intStartPos + 1, intEndPos);
+    }
 
-  // Samples have two parts to be able to present the different CPU usages properly.
-  // This is because CPU usage number of a sample represents the CPU usage
-  // starting starting from the previous sample time to this sample time.
-  // These parts will be:
-  // - Between `halfwayPositionBefore` and `samplePosition` with beforeSampleCpuPercent.
-  // - Between `samplePosition` and `halfwayPositionAfter` with afterSampleCpuPercent.
-
-  // Here we are accumulating the first part of the sample. It will use the
-  // CPU delta number that belongs to this sample.
-  // This part starts from the "sample start time" to "sample time" and uses
-  // beforeSampleCpuPercent.
-  for (let i = intHalfwayPositionBefore; i <= intSamplePosition; i++) {
-    percentageBuffer[i] += beforeSampleCpuPercent;
-  }
-
-  // Subtract the partial pixels from start and end of the first part.
-  percentageBuffer[intHalfwayPositionBefore] -=
-    beforeSampleCpuPercent * (halfwayPositionBefore - intHalfwayPositionBefore);
-  percentageBuffer[intSamplePosition] -=
-    beforeSampleCpuPercent * (1 - (samplePosition - intSamplePosition));
-
-  // Here we are accumulating the second part of the sample. It will use the
-  // CPU delta number that belongs to the next sample.
-  // This part starts from "sample time" to "sample end time" and uses
-  // afterSampleCpuPercent.
-  for (let i = intSamplePosition; i <= intHalfwayPositionAfter; i++) {
-    percentageBuffer[i] += afterSampleCpuPercent;
+    percentageBuffer[intStartPos] +=
+      cpuPercent * (1 - (startPos - intStartPos));
+    percentageBuffer[intEndPos] += cpuPercent * (endPos - intEndPos);
   }
-
-  // Subtract the partial pixels from start and end of the second part.
-  percentageBuffer[intSamplePosition] -=
-    afterSampleCpuPercent * (samplePosition - intSamplePosition);
-  percentageBuffer[intHalfwayPositionAfter] -=
-    afterSampleCpuPercent *
-    (1 - (halfwayPositionAfter - intHalfwayPositionAfter));
 }
+
 /**
  * Apply a 1d box blur to a destination array.
  */

From c9a35c65bd1b3a217f273560711e62a83be0f88e Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange.moz@gmail.com>
Date: Sat, 7 Mar 2026 16:59:26 -0500
Subject: [PATCH 08/14] Optimize _getSmoothedContributionFromSampleToPixel.

---
 .../shared/thread/ActivityGraphFills.tsx      | 68 ++++++++++++-------
 1 file changed, 45 insertions(+), 23 deletions(-)

diff --git a/src/components/shared/thread/ActivityGraphFills.tsx b/src/components/shared/thread/ActivityGraphFills.tsx
index e88d1da6c0..b6d83b196c 100644
--- a/src/components/shared/thread/ActivityGraphFills.tsx
+++ b/src/components/shared/thread/ActivityGraphFills.tsx
@@ -634,11 +634,8 @@ export class ActivityFillGraphQuerier {
   ): number {
     const {
       rangeFilteredThread: { samples },
-      canvasPixelWidth,
       precomputedPositions: { samplePositions, halfwayPositions },
     } = this.renderedComponentSettings;
-    const fullWidthPixels = new Float32Array(canvasPixelWidth);
-
     const halfwayPositionBefore = halfwayPositions[sample];
     const halfwayPositionAfter = halfwayPositions[sample + 1];
     const samplePosition = samplePositions[sample];
@@ -647,35 +644,22 @@ export class ActivityFillGraphQuerier {
     const beforeSampleCpuPercent = threadCPUPercent[sample];
     const afterSampleCpuPercent = threadCPUPercent[sample + 1]; // guaranteed to exist
 
-    // Samples have two parts to be able to present the different CPU usages properly.
-    // This is because CPU usage number of a sample represents the CPU usage
-    // starting starting from the previous sample time to this sample time.
-    // These parts will be:
-    // - Between `halfwayPositionBefore` and `samplePosition` with beforeSampleCpuPercent.
-    // - Between `samplePosition` and `halfwayPositionAfter` with afterSampleCpuPercent.
-    _accumulateHalfSampleInBuffer(
-      fullWidthPixels,
+    const kernelCenterPosition = Math.round(xPixel);
+
+    let sum = 0;
+    sum += _accumulateHalfSampleToKernelSum(
+      kernelCenterPosition,
       halfwayPositionBefore,
       samplePosition,
       beforeSampleCpuPercent
     );
-    _accumulateHalfSampleInBuffer(
-      fullWidthPixels,
+    sum += _accumulateHalfSampleToKernelSum(
+      kernelCenterPosition,
       samplePosition,
       halfwayPositionAfter,
       afterSampleCpuPercent
     );
 
-    let sum = 0;
-    for (let i = 0; i < SMOOTHING_KERNEL.length; i++) {
-      const pixelAtI = (xPixel | 0) + (i - SMOOTHING_RADIUS);
-      const pixelContribution =
-        pixelAtI >= 0 && pixelAtI < canvasPixelWidth
-          ? fullWidthPixels[pixelAtI]
-          : 0;
-      sum += SMOOTHING_KERNEL[i] * pixelContribution;
-    }
-
     return sum / 100;
   }
 }
@@ -827,6 +811,44 @@ function _accumulateHalfSampleInBuffer(
   }
 }
 
+function _accumulateHalfSampleToKernelSum(
+  kernelCenterPosition: DevicePixels,
+  startPos: DevicePixels,
+  endPos: DevicePixels,
+  cpuPercent: number
+): number {
+  function kernelVal(intPos: number): number {
+    const indexInSmoothingKernel =
+      intPos - kernelCenterPosition + SMOOTHING_RADIUS;
+    if (
+      indexInSmoothingKernel < 0 ||
+      indexInSmoothingKernel >= SMOOTHING_RADIUS * 2 + 1
+    ) {
+      return 0;
+    }
+    return SMOOTHING_KERNEL[indexInSmoothingKernel];
+  }
+
+  const intStartPos = startPos | 0;
+  const intEndPos = endPos | 0;
+
+  let sum = 0;
+
+  if (intStartPos === intEndPos) {
+    sum += kernelVal(intStartPos) * cpuPercent * (endPos - startPos);
+  } else {
+    if (intStartPos + 1 < intEndPos) {
+      for (let i = intStartPos + 1; i < intEndPos; i++) {
+        sum += kernelVal(i) * cpuPercent;
+      }
+    }
+
+    sum += kernelVal(intStartPos) * cpuPercent * (1 - (startPos - intStartPos));
+    sum += kernelVal(intEndPos) * cpuPercent * (endPos - intEndPos);
+  }
+  return sum;
+}
+
 /**
  * Apply a 1d box blur to a destination array.
  */

From f8cb6ce43f4f504083152532c90e0d35c830503a Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange.moz@gmail.com>
Date: Sat, 7 Mar 2026 17:10:46 -0500
Subject: [PATCH 09/14] Only call _accumulateHalfSampleInBuffer for non-zero
 CPU half-samples.

---
 .../shared/thread/ActivityGraphFills.tsx      | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/shared/thread/ActivityGraphFills.tsx b/src/components/shared/thread/ActivityGraphFills.tsx
index b6d83b196c..163c2e47f4 100644
--- a/src/components/shared/thread/ActivityGraphFills.tsx
+++ b/src/components/shared/thread/ActivityGraphFills.tsx
@@ -318,18 +318,22 @@ export class ActivityGraphFillComputer {
       // These parts will be:
       // - Between `halfwayPositionBefore` and `samplePosition` with beforeSampleCpuPercent.
       // - Between `samplePosition` and `halfwayPositionAfter` with afterSampleCpuPercent.
-      _accumulateHalfSampleInBuffer(
-        percentageBuffer,
-        halfwayPositionBefore,
-        samplePosition,
-        beforeSampleCpuPercent
-      );
-      _accumulateHalfSampleInBuffer(
-        percentageBuffer,
-        samplePosition,
-        halfwayPositionAfter,
-        afterSampleCpuPercent
-      );
+      if (beforeSampleCpuPercent !== 0) {
+        _accumulateHalfSampleInBuffer(
+          percentageBuffer,
+          halfwayPositionBefore,
+          samplePosition,
+          beforeSampleCpuPercent
+        );
+      }
+      if (afterSampleCpuPercent !== 0) {
+        _accumulateHalfSampleInBuffer(
+          percentageBuffer,
+          samplePosition,
+          halfwayPositionAfter,
+          afterSampleCpuPercent
+        );
+      }
 
       halfwayPositionBefore = halfwayPositionAfter;
       beforeSampleCpuPercent = afterSampleCpuPercent;

From 371f63ff09aff6c32964886950ea68370eba5f35 Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange.moz@gmail.com>
Date: Sat, 7 Mar 2026 17:08:30 -0500
Subject: [PATCH 10/14] Inline the two calls to _accumulateHalfSampleInBuffer.

Sadly this gives a big performance boost in Firefox.
---
 .../shared/thread/ActivityGraphFills.tsx      | 123 +++++++++---------
 1 file changed, 62 insertions(+), 61 deletions(-)

diff --git a/src/components/shared/thread/ActivityGraphFills.tsx b/src/components/shared/thread/ActivityGraphFills.tsx
index 163c2e47f4..7bdcc564d1 100644
--- a/src/components/shared/thread/ActivityGraphFills.tsx
+++ b/src/components/shared/thread/ActivityGraphFills.tsx
@@ -318,21 +318,71 @@ export class ActivityGraphFillComputer {
       // These parts will be:
       // - Between `halfwayPositionBefore` and `samplePosition` with beforeSampleCpuPercent.
       // - Between `samplePosition` and `halfwayPositionAfter` with afterSampleCpuPercent.
+
+      // Every sample has two parts because of different CPU usage values.
+      // For every sample part, we have a fractional interval of this sample part's
+      // contribution to the graph's pixels.
+      //
+      // v       v       v       v       v       v       v       v       v
+      // +-------+-------+-----+-+-------+-------+-----+-+-------+-------+
+      // |       |       |     |///////////////////////| |       |       |
+      // |       |       |     |///////////////////////| |       |       |
+      // |       |       |     |///////////////////////| |       |       |
+      // +-------+-------+-----+///////////////////////+-+-------+-------+
+      //
+      // We have a device-pixel array of contributions. We map the fractional
+      // interval to this array of device pixels: Fully overlapping pixels are
+      // 1, and the partial overlapping pixels are the degree of overlap.
+
+      //                                 |
+      //                                 v
+      //
+      // +-------+-------+-------+-------+-------+-------+-------+-------+
+      // |       |       |       |///////////////+-------+       |       |
+      // |       |       |       |///////////////////////|       |       |
+      // |       |       +-------+///////////////////////|       |       |
+      // +-------+-------+///////////////////////////////+-------+-------+
+
       if (beforeSampleCpuPercent !== 0) {
-        _accumulateHalfSampleInBuffer(
-          percentageBuffer,
-          halfwayPositionBefore,
-          samplePosition,
-          beforeSampleCpuPercent
-        );
+        const startPos = halfwayPositionBefore;
+        const endPos = samplePosition;
+        const cpuPercent = beforeSampleCpuPercent;
+
+        const intStartPos = startPos | 0;
+        const intEndPos = endPos | 0;
+
+        if (intStartPos === intEndPos) {
+          percentageBuffer[intStartPos] += cpuPercent * (endPos - startPos);
+        } else {
+          if (intStartPos + 1 < intEndPos) {
+            percentageBuffer.fill(cpuPercent, intStartPos + 1, intEndPos);
+          }
+
+          percentageBuffer[intStartPos] +=
+            cpuPercent * (1 - (startPos - intStartPos));
+          percentageBuffer[intEndPos] += cpuPercent * (endPos - intEndPos);
+        }
       }
+
       if (afterSampleCpuPercent !== 0) {
-        _accumulateHalfSampleInBuffer(
-          percentageBuffer,
-          samplePosition,
-          halfwayPositionAfter,
-          afterSampleCpuPercent
-        );
+        const startPos = samplePosition;
+        const endPos = halfwayPositionAfter;
+        const cpuPercent = afterSampleCpuPercent;
+
+        const intStartPos = startPos | 0;
+        const intEndPos = endPos | 0;
+
+        if (intStartPos === intEndPos) {
+          percentageBuffer[intStartPos] += cpuPercent * (endPos - startPos);
+        } else {
+          if (intStartPos + 1 < intEndPos) {
+            percentageBuffer.fill(cpuPercent, intStartPos + 1, intEndPos);
+          }
+
+          percentageBuffer[intStartPos] +=
+            cpuPercent * (1 - (startPos - intStartPos));
+          percentageBuffer[intEndPos] += cpuPercent * (endPos - intEndPos);
+        }
       }
 
       halfwayPositionBefore = halfwayPositionAfter;
@@ -766,55 +816,6 @@ function _getCategoryFills(
   return ([] as CategoryFill[]).concat(...nestedFills);
 }
 
-/**
- * Mutates `percentageBuffer` by adding contributions from a single half-sample to
- * the pixels that the sample overlaps with.
- */
-function _accumulateHalfSampleInBuffer(
-  percentageBuffer: Float32Array,
-  startPos: DevicePixels,
-  endPos: DevicePixels,
-  cpuPercent: number
-) {
-  // Every sample has two parts because of different CPU usage values.
-  // For every sample part, we have a fractional interval of this sample part's
-  // contribution to the graph's pixels.
-  //
-  // v       v       v       v       v       v       v       v       v
-  // +-------+-------+-----+-+-------+-------+-----+-+-------+-------+
-  // |       |       |     |///////////////////////| |       |       |
-  // |       |       |     |///////////////////////| |       |       |
-  // |       |       |     |///////////////////////| |       |       |
-  // +-------+-------+-----+///////////////////////+-+-------+-------+
-  //
-  // We have a device-pixel array of contributions. We map the fractional
-  // interval to this array of device pixels: Fully overlapping pixels are
-  // 1, and the partial overlapping pixels are the degree of overlap.
-
-  //                                 |
-  //                                 v
-  //
-  // +-------+-------+-------+-------+-------+-------+-------+-------+
-  // |       |       |       |///////////////+-------+       |       |
-  // |       |       |       |///////////////////////|       |       |
-  // |       |       +-------+///////////////////////|       |       |
-  // +-------+-------+///////////////////////////////+-------+-------+
-  const intStartPos = startPos | 0;
-  const intEndPos = endPos | 0;
-
-  if (intStartPos === intEndPos) {
-    percentageBuffer[intStartPos] += cpuPercent * (endPos - startPos);
-  } else {
-    if (intStartPos + 1 < intEndPos) {
-      percentageBuffer.fill(cpuPercent, intStartPos + 1, intEndPos);
-    }
-
-    percentageBuffer[intStartPos] +=
-      cpuPercent * (1 - (startPos - intStartPos));
-    percentageBuffer[intEndPos] += cpuPercent * (endPos - intEndPos);
-  }
-}
-
 function _accumulateHalfSampleToKernelSum(
   kernelCenterPosition: DevicePixels,
   startPos: DevicePixels,

From 83fd8c5d8f9f4a306a57d85d1e9d2712eea9784c Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange.moz@gmail.com>
Date: Sun, 8 Feb 2026 16:19:14 -0500
Subject: [PATCH 11/14] Avoid float-to-integer conversions by using fixed
 precision computations.

When computing the activity graph fills, store the fractional sample
positions as integers after multipyling by (1 << FIXED_PREC_BITS).
This lets us use shifts and masking when we accumulate the contributions
into the buffers in the hot loops.
---
 .../shared/thread/ActivityGraphFills.tsx      | 122 ++-
 .../ThreadActivityGraph.test.tsx.snap         | 790 +++++++++---------
 2 files changed, 474 insertions(+), 438 deletions(-)

diff --git a/src/components/shared/thread/ActivityGraphFills.tsx b/src/components/shared/thread/ActivityGraphFills.tsx
index 7bdcc564d1..6d58205d29 100644
--- a/src/components/shared/thread/ActivityGraphFills.tsx
+++ b/src/components/shared/thread/ActivityGraphFills.tsx
@@ -50,12 +50,12 @@ type RenderedComponentSettings = {
 export type PrecomputedPositions = {
   // The fractional device pixel position per sample in the range-filtered thread.
   // Each position is clamped such that 0 <= pos < canvasPixelWidth.
-  samplePositions: Float32Array; // DevicePixel[]
+  samplePositions: Int32Array; // (DevicePixel * (1 << FIXED_POINT_BITS))[]
   // The fractional device pixel position of the half-way point *before* the sample,
   // per sample in the range-filtered thread. Has one extra element at the end for
   // the half-way position after the last sample.
   // Each position is clamped such that 0 <= pos < canvasPixelWidth.
-  halfwayPositions: Float32Array; // DevicePixel[]
+  halfwayPositions: Int32Array; // (DevicePixel * (1 << FIXED_POINT_BITS))[]
 };
 
 type SampleContributionToPixel = {
@@ -73,7 +73,7 @@ type CategoryFill = {
   readonly fillStyle: string | CanvasPattern;
   // Mutated in place during the computation step.
   // Contains values between 0 and 100.
-  readonly perPixelContribution: Float32Array<ArrayBuffer>;
+  readonly perPixelContribution: Int32Array<ArrayBuffer>;
   // Mutated in place during the computation step.
   // Contains values between 0 and 1.
   readonly accumulatedUpperEdge: Float32Array<ArrayBuffer>;
@@ -93,7 +93,7 @@ export type CategoryDrawStyles = ReadonlyArray<{
 
 // 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>[];
+type SelectedPercentageAtPixelBuffers = Int32Array<ArrayBuffer>[];
 
 export type CpuRatioInTimeRange = {
   readonly cpuRatio: number;
@@ -109,6 +109,9 @@ const SMOOTHING_KERNEL: Float32Array<ArrayBuffer> = _getSmoothingKernel(
   BOX_BLUR_RADII
 );
 
+const FIXED_POINT_BITS = 16;
+const FIXED_POINT_MASK = (1 << FIXED_POINT_BITS) - 1;
+
 export function precomputePositions(
   fullThreadSampleTimes: Milliseconds[],
   sampleIndexOffset: number,
@@ -118,24 +121,29 @@ export function precomputePositions(
   interval: Milliseconds,
   canvasPixelWidth: DevicePixels
 ): PrecomputedPositions {
-  function convertTimeToClampedPosition(time: Milliseconds): DevicePixels {
-    const pos = (time - rangeStart) * xPixelsPerMs;
-    if (pos < 0) {
+  const canvasPixelsFp = canvasPixelWidth << FIXED_POINT_BITS;
+  const xPixelsFpPerMs = xPixelsPerMs * (1 << FIXED_POINT_BITS);
+
+  function convertTimeToClampedPositionFixedPointPrecision(
+    time: Milliseconds
+  ): DevicePixels {
+    const posFp = ((time - rangeStart) * xPixelsFpPerMs) | 0;
+    if (posFp < 0) {
       return 0;
     }
-    if (pos > canvasPixelWidth - 0.1) {
-      return canvasPixelWidth - 0.1;
+    if (posFp >= canvasPixelsFp) {
+      return canvasPixelsFp - 1;
     }
-    return pos;
+    return posFp;
   }
 
   // The fractional device pixel position per sample in the range-filtered thread.
-  const samplePositions = new Float32Array(sampleCount); // DevicePixel[]
+  const samplePositions = new Int32Array(sampleCount); // DevicePixel[]
 
   // The fractional device pixel position of the half-way point *before* the sample,
   // per sample in the range-filtered thread. Has one extra element at the end for
   // the half-way position after the last sample.
-  const halfwayPositions = new Float32Array(sampleCount + 1); // DevicePixel[]
+  const halfwayPositions = new Int32Array(sampleCount + 1); // DevicePixel[]
 
   let previousSampleTime =
     sampleIndexOffset > 0
@@ -144,10 +152,13 @@ export function precomputePositions(
   // Go through the samples and accumulate the category into the percentageBuffers.
   for (let i = 0; i < sampleCount; i++) {
     const sampleTime = fullThreadSampleTimes[sampleIndexOffset + i];
-    samplePositions[i] = convertTimeToClampedPosition(sampleTime);
+    samplePositions[i] =
+      convertTimeToClampedPositionFixedPointPrecision(sampleTime);
 
     const halfwayPointTimeBefore = (previousSampleTime + sampleTime) / 2;
-    halfwayPositions[i] = convertTimeToClampedPosition(halfwayPointTimeBefore);
+    halfwayPositions[i] = convertTimeToClampedPositionFixedPointPrecision(
+      halfwayPointTimeBefore
+    );
 
     previousSampleTime = sampleTime;
   }
@@ -159,7 +170,7 @@ export function precomputePositions(
       : previousSampleTime + interval;
   const halfwayPointTime = (previousSampleTime + afterLastSampleTime) / 2;
   halfwayPositions[sampleCount] =
-    convertTimeToClampedPosition(halfwayPointTime);
+    convertTimeToClampedPositionFixedPointPrecision(halfwayPointTime);
 
   return {
     samplePositions,
@@ -256,7 +267,8 @@ export class ActivityGraphFillComputer {
       // Only copy the first array, as there is no accumulation.
       const { accumulatedUpperEdge, perPixelContribution } = mutableFills[0];
       for (let i = 0; i < perPixelContribution.length; i++) {
-        accumulatedUpperEdge[i] = perPixelContribution[i] / 100;
+        accumulatedUpperEdge[i] =
+          perPixelContribution[i] / (100 << FIXED_POINT_BITS);
       }
     }
 
@@ -268,7 +280,8 @@ export class ActivityGraphFillComputer {
     } of mutableFills.slice(1)) {
       for (let i = 0; i < perPixelContribution.length; i++) {
         accumulatedUpperEdge[i] =
-          previousUpperEdge[i] + perPixelContribution[i] / 100;
+          previousUpperEdge[i] +
+          perPixelContribution[i] / (100 << FIXED_POINT_BITS);
       }
       previousUpperEdge = accumulatedUpperEdge;
     }
@@ -348,19 +361,25 @@ export class ActivityGraphFillComputer {
         const endPos = samplePosition;
         const cpuPercent = beforeSampleCpuPercent;
 
-        const intStartPos = startPos | 0;
-        const intEndPos = endPos | 0;
+        const intStartPos = startPos >> FIXED_POINT_BITS;
+        const intEndPos = endPos >> FIXED_POINT_BITS;
 
         if (intStartPos === intEndPos) {
           percentageBuffer[intStartPos] += cpuPercent * (endPos - startPos);
         } else {
           if (intStartPos + 1 < intEndPos) {
-            percentageBuffer.fill(cpuPercent, intStartPos + 1, intEndPos);
+            percentageBuffer.fill(
+              cpuPercent << FIXED_POINT_BITS,
+              intStartPos + 1,
+              intEndPos
+            );
           }
 
+          const startPosFrac = startPos & FIXED_POINT_MASK;
           percentageBuffer[intStartPos] +=
-            cpuPercent * (1 - (startPos - intStartPos));
-          percentageBuffer[intEndPos] += cpuPercent * (endPos - intEndPos);
+            cpuPercent * ((1 << FIXED_POINT_BITS) - startPosFrac);
+          const endPosFrac = endPos & FIXED_POINT_MASK;
+          percentageBuffer[intEndPos] += cpuPercent * endPosFrac;
         }
       }
 
@@ -369,19 +388,25 @@ export class ActivityGraphFillComputer {
         const endPos = halfwayPositionAfter;
         const cpuPercent = afterSampleCpuPercent;
 
-        const intStartPos = startPos | 0;
-        const intEndPos = endPos | 0;
+        const intStartPos = startPos >> FIXED_POINT_BITS;
+        const intEndPos = endPos >> FIXED_POINT_BITS;
 
         if (intStartPos === intEndPos) {
           percentageBuffer[intStartPos] += cpuPercent * (endPos - startPos);
         } else {
           if (intStartPos + 1 < intEndPos) {
-            percentageBuffer.fill(cpuPercent, intStartPos + 1, intEndPos);
+            percentageBuffer.fill(
+              cpuPercent << FIXED_POINT_BITS,
+              intStartPos + 1,
+              intEndPos
+            );
           }
 
+          const startPosFrac = startPos & FIXED_POINT_MASK;
           percentageBuffer[intStartPos] +=
-            cpuPercent * (1 - (startPos - intStartPos));
-          percentageBuffer[intEndPos] += cpuPercent * (endPos - intEndPos);
+            cpuPercent * ((1 << FIXED_POINT_BITS) - startPosFrac);
+          const endPosFrac = endPos & FIXED_POINT_MASK;
+          percentageBuffer[intEndPos] += cpuPercent * endPosFrac;
         }
       }
 
@@ -690,6 +715,7 @@ export class ActivityFillGraphQuerier {
       rangeFilteredThread: { samples },
       precomputedPositions: { samplePositions, halfwayPositions },
     } = this.renderedComponentSettings;
+
     const halfwayPositionBefore = halfwayPositions[sample];
     const halfwayPositionAfter = halfwayPositions[sample + 1];
     const samplePosition = samplePositions[sample];
@@ -747,8 +773,8 @@ function _createSelectedPercentageAtPixelBuffers({
 }): SelectedPercentageAtPixelBuffers[] {
   return categoryDrawStyles.map(() => {
     const percentageBuffers = [];
-    for (let i = 0; i < SELECTED_STATE_BUFFER_COUNT; i++) {
-      percentageBuffers[i] = new Float32Array(canvasPixelWidth);
+    for (let i = 0; i <= SELECTED_STATE_BUFFER_COUNT; i++) {
+      percentageBuffers[i] = new Int32Array(canvasPixelWidth);
     }
     return percentageBuffers;
   });
@@ -834,13 +860,14 @@ function _accumulateHalfSampleToKernelSum(
     return SMOOTHING_KERNEL[indexInSmoothingKernel];
   }
 
-  const intStartPos = startPos | 0;
-  const intEndPos = endPos | 0;
+  const intStartPos = startPos >> FIXED_POINT_BITS;
+  const intEndPos = endPos >> FIXED_POINT_BITS;
 
   let sum = 0;
 
   if (intStartPos === intEndPos) {
-    sum += kernelVal(intStartPos) * cpuPercent * (endPos - startPos);
+    const frac = (endPos - startPos) / (1 << FIXED_POINT_BITS);
+    sum += kernelVal(intStartPos) * cpuPercent * frac;
   } else {
     if (intStartPos + 1 < intEndPos) {
       for (let i = intStartPos + 1; i < intEndPos; i++) {
@@ -848,18 +875,29 @@ function _accumulateHalfSampleToKernelSum(
       }
     }
 
-    sum += kernelVal(intStartPos) * cpuPercent * (1 - (startPos - intStartPos));
-    sum += kernelVal(intEndPos) * cpuPercent * (endPos - intEndPos);
+    const startPosFrac =
+      (startPos & FIXED_POINT_MASK) / (1 << FIXED_POINT_BITS);
+    sum += kernelVal(intStartPos) * cpuPercent * (1 - startPosFrac);
+    const endPosFrac = (endPos & FIXED_POINT_MASK) / (1 << FIXED_POINT_BITS);
+    sum += kernelVal(intEndPos) * cpuPercent * endPosFrac;
   }
   return sum;
 }
 
+type TypedArray<T> = {
+  readonly length: number;
+  [n: number]: number;
+  BYTES_PER_ELEMENT: number;
+  set(array: T, offset?: number): void;
+  slice(start?: number, end?: number): T;
+};
+
 /**
  * Apply a 1d box blur to a destination array.
  */
-function _boxBlur1D(
-  srcArray: Float32Array,
-  destArray: Float32Array,
+function _boxBlur1D<T extends TypedArray<T>>(
+  srcArray: T,
+  destArray: T,
   radius: number
 ): void {
   if (srcArray.length < radius) {
@@ -892,12 +930,12 @@ function _boxBlur1D(
 /**
  * Apply a blur with a gaussian distribution to a destination array.
  */
-function _applyGaussianBlur1D(
-  srcArray: Float32Array<ArrayBuffer>,
+function _applyGaussianBlur1D<T extends TypedArray<T>>(
+  srcArray: T,
   boxBlurRadii: number[]
 ): void {
   let a = srcArray;
-  let b = new Float32Array(srcArray.length);
+  let b = srcArray.slice();
   for (const radius of boxBlurRadii) {
     _boxBlur1D(a, b, radius);
     [b, a] = [a, b];
@@ -907,8 +945,6 @@ function _applyGaussianBlur1D(
     // The last blur was applied to the temporary array, blit the final values back
     // to the srcArray. This ensures that we are always mutating the values of the
     // src array, and not returning the newly created array.
-    for (let i = 0; i < srcArray.length; i++) {
-      srcArray[i] = a[i];
-    }
+    srcArray.set(a);
   }
 }
diff --git a/src/test/components/__snapshots__/ThreadActivityGraph.test.tsx.snap b/src/test/components/__snapshots__/ThreadActivityGraph.test.tsx.snap
index 2edc33c6df..1c647439ce 100644
--- a/src/test/components/__snapshots__/ThreadActivityGraph.test.tsx.snap
+++ b/src/test/components/__snapshots__/ThreadActivityGraph.test.tsx.snap
@@ -1498,72 +1498,72 @@ Array [
   Array [
     "lineTo",
     71,
-    9.942857138812542,
+    9.94285736232996,
   ],
   Array [
     "lineTo",
     70,
-    9.77142859250307,
+    9.77142944931984,
   ],
   Array [
     "lineTo",
     69,
-    9.428571462631226,
+    9.428572095930576,
   ],
   Array [
     "lineTo",
     68,
-    8.857142850756645,
+    8.857144191861153,
   ],
   Array [
     "lineTo",
     67,
-    7.999999970197678,
+    8.000001460313797,
   ],
   Array [
     "lineTo",
     66,
-    6.914285719394684,
+    6.914286911487579,
   ],
   Array [
     "lineTo",
     65,
-    5.657142698764801,
+    5.65714418888092,
   ],
   Array [
     "lineTo",
     64,
-    4.342857003211975,
+    4.342858791351318,
   ],
   Array [
     "lineTo",
     63,
-    3.0857139825820923,
+    3.0857163667678833,
   ],
   Array [
     "lineTo",
     62,
-    1.9999998807907104,
+    2.0000016689300537,
   ],
   Array [
     "lineTo",
     61,
-    1.142856478691101,
+    1.142858862876892,
   ],
   Array [
     "lineTo",
     60,
-    0.5714285373687744,
+    0.5714297294616699,
   ],
   Array [
     "lineTo",
     59,
-    0.22857129573822021,
+    0.22857189178466797,
   ],
   Array [
     "lineTo",
     58,
-    0.05714237689971924,
+    0.0571441650390625,
   ],
   Array [
     "lineTo",
@@ -1748,72 +1748,72 @@ Array [
   Array [
     "lineTo",
     21,
-    0.05714237689971924,
+    0.0571441650390625,
   ],
   Array [
     "lineTo",
     20,
-    0.22857129573822021,
+    0.22857189178466797,
   ],
   Array [
     "lineTo",
     19,
-    0.5714285373687744,
+    0.5714297294616699,
   ],
   Array [
     "lineTo",
     18,
-    1.142856478691101,
+    1.142858862876892,
   ],
   Array [
     "lineTo",
     17,
-    1.9999998807907104,
+    2.0000016689300537,
   ],
   Array [
     "lineTo",
     16,
-    3.0857139825820923,
+    3.0857163667678833,
   ],
   Array [
     "lineTo",
     15,
-    4.342857003211975,
+    4.342858791351318,
   ],
   Array [
     "lineTo",
     14,
-    5.657142698764801,
+    5.65714418888092,
   ],
   Array [
     "lineTo",
     13,
-    6.914285719394684,
+    6.914286911487579,
   ],
   Array [
     "lineTo",
     12,
-    7.999999970197678,
+    8.000001460313797,
   ],
   Array [
     "lineTo",
     11,
-    8.857142850756645,
+    8.857144191861153,
   ],
   Array [
     "lineTo",
     10,
-    9.428571462631226,
+    9.428572095930576,
   ],
   Array [
     "lineTo",
     9,
-    9.77142859250307,
+    9.77142944931984,
   ],
   Array [
     "lineTo",
     8,
-    9.942857138812542,
+    9.94285736232996,
   ],
   Array [
     "closePath",
@@ -1883,72 +1883,72 @@ Array [
   Array [
     "lineTo",
     8,
-    9.942857138812542,
+    9.94285736232996,
   ],
   Array [
     "lineTo",
     9,
-    9.77142859250307,
+    9.77142944931984,
   ],
   Array [
     "lineTo",
     10,
-    9.428571462631226,
+    9.428572095930576,
   ],
   Array [
     "lineTo",
     11,
-    8.857142850756645,
+    8.857144191861153,
   ],
   Array [
     "lineTo",
     12,
-    7.999999970197678,
+    8.000001460313797,
   ],
   Array [
     "lineTo",
     13,
-    6.914285719394684,
+    6.914286911487579,
   ],
   Array [
     "lineTo",
     14,
-    5.657142698764801,
+    5.65714418888092,
   ],
   Array [
     "lineTo",
     15,
-    4.342857003211975,
+    4.342858791351318,
   ],
   Array [
     "lineTo",
     16,
-    3.0857139825820923,
+    3.0857163667678833,
   ],
   Array [
     "lineTo",
     17,
-    1.9999998807907104,
+    2.0000016689300537,
   ],
   Array [
     "lineTo",
     18,
-    1.142856478691101,
+    1.142858862876892,
   ],
   Array [
     "lineTo",
     19,
-    0.5714285373687744,
+    0.5714297294616699,
   ],
   Array [
     "lineTo",
     20,
-    0.22857129573822021,
+    0.22857189178466797,
   ],
   Array [
     "lineTo",
     21,
-    0.05714237689971924,
+    0.0571441650390625,
   ],
   Array [
     "lineTo",
@@ -1958,112 +1958,112 @@ Array [
   Array [
     "lineTo",
     21,
-    0,
+    0.0000017881393432617188,
   ],
   Array [
     "lineTo",
     20,
-    0,
+    0.0000011920928955078125,
   ],
   Array [
     "lineTo",
     19,
-    0,
+    0.0000017881393432617188,
   ],
   Array [
     "lineTo",
     18,
-    -0.0000011920928955078125,
+    0.0000029802322387695312,
   ],
   Array [
     "lineTo",
     17,
-    0,
+    0.0000029802322387695312,
   ],
   Array [
     "lineTo",
     16,
-    0,
+    0.0000029802322387695312,
   ],
   Array [
     "lineTo",
     15,
-    0,
+    0.0000029802322387695312,
   ],
   Array [
     "lineTo",
     14,
-    0,
+    0.0000029802322387695312,
   ],
   Array [
     "lineTo",
     13,
-    0,
+    0.0000029802322387695312,
   ],
   Array [
     "lineTo",
     12,
-    0,
+    0.0000029802322387695312,
   ],
   Array [
     "lineTo",
     11,
-    0.05714297294616699,
+    0.05714595317840576,
   ],
   Array [
     "lineTo",
     10,
-    0.22857129573822021,
+    0.22857367992401123,
   ],
   Array [
     "lineTo",
     9,
-    0.5714285373687744,
+    0.5714309215545654,
   ],
   Array [
     "lineTo",
     8,
-    1.1428570747375488,
+    1.142858862876892,
   ],
   Array [
     "lineTo",
     7,
-    1.9999998807907104,
+    2.0000016689300537,
   ],
   Array [
     "lineTo",
     6,
-    3.0857139825820923,
+    3.0857163667678833,
   ],
   Array [
     "lineTo",
     5,
-    4.342857003211975,
+    4.342858791351318,
   ],
   Array [
     "lineTo",
     4,
-    5.657142698764801,
+    5.65714418888092,
   ],
   Array [
     "lineTo",
     3,
-    6.914285719394684,
+    6.914286911487579,
   ],
   Array [
     "lineTo",
     2,
-    7.999999970197678,
+    8.000001460313797,
   ],
   Array [
     "lineTo",
     1,
-    8.857142850756645,
+    8.857144191861153,
   ],
   Array [
     "lineTo",
     0,
-    9.428571462631226,
+    9.428572095930576,
   ],
   Array [
     "closePath",
@@ -2077,72 +2077,72 @@ Array [
   Array [
     "moveTo",
     58,
-    0.05714237689971924,
+    0.0571441650390625,
   ],
   Array [
     "lineTo",
     59,
-    0.22857129573822021,
+    0.22857189178466797,
   ],
   Array [
     "lineTo",
     60,
-    0.5714285373687744,
+    0.5714297294616699,
   ],
   Array [
     "lineTo",
     61,
-    1.142856478691101,
+    1.142858862876892,
   ],
   Array [
     "lineTo",
     62,
-    1.9999998807907104,
+    2.0000016689300537,
   ],
   Array [
     "lineTo",
     63,
-    3.0857139825820923,
+    3.0857163667678833,
   ],
   Array [
     "lineTo",
     64,
-    4.342857003211975,
+    4.342858791351318,
   ],
   Array [
     "lineTo",
     65,
-    5.657142698764801,
+    5.65714418888092,
   ],
   Array [
     "lineTo",
     66,
-    6.914285719394684,
+    6.914286911487579,
   ],
   Array [
     "lineTo",
     67,
-    7.999999970197678,
+    8.000001460313797,
   ],
   Array [
     "lineTo",
     68,
-    8.857142850756645,
+    8.857144191861153,
   ],
   Array [
     "lineTo",
     69,
-    9.428571462631226,
+    9.428572095930576,
   ],
   Array [
     "lineTo",
     70,
-    9.77142859250307,
+    9.77142944931984,
   ],
   Array [
     "lineTo",
     71,
-    9.942857138812542,
+    9.94285736232996,
   ],
   Array [
     "lineTo",
@@ -2187,112 +2187,112 @@ Array [
   Array [
     "lineTo",
     79,
-    9.428571462631226,
+    9.428572095930576,
   ],
   Array [
     "lineTo",
     78,
-    8.857142850756645,
+    8.857144191861153,
   ],
   Array [
     "lineTo",
     77,
-    7.999999970197678,
+    8.000001460313797,
   ],
   Array [
     "lineTo",
     76,
-    6.914285719394684,
+    6.914286911487579,
   ],
   Array [
     "lineTo",
     75,
-    5.657142698764801,
+    5.65714418888092,
   ],
   Array [
     "lineTo",
     74,
-    4.342857003211975,
+    4.342858791351318,
   ],
   Array [
     "lineTo",
     73,
-    3.0857139825820923,
+    3.0857163667678833,
   ],
   Array [
     "lineTo",
     72,
-    1.9999998807907104,
+    2.0000016689300537,
   ],
   Array [
     "lineTo",
     71,
-    1.1428570747375488,
+    1.142858862876892,
   ],
   Array [
     "lineTo",
     70,
-    0.5714285373687744,
+    0.5714309215545654,
   ],
   Array [
     "lineTo",
     69,
-    0.22857129573822021,
+    0.22857367992401123,
   ],
   Array [
     "lineTo",
     68,
-    0.05714297294616699,
+    0.05714595317840576,
   ],
   Array [
     "lineTo",
     67,
-    0,
+    0.0000029802322387695312,
   ],
   Array [
     "lineTo",
     66,
-    0,
+    0.0000029802322387695312,
   ],
   Array [
     "lineTo",
     65,
-    0,
+    0.0000029802322387695312,
   ],
   Array [
     "lineTo",
     64,
-    0,
+    0.0000029802322387695312,
   ],
   Array [
     "lineTo",
     63,
-    0,
+    0.0000029802322387695312,
   ],
   Array [
     "lineTo",
     62,
-    0,
+    0.0000029802322387695312,
   ],
   Array [
     "lineTo",
     61,
-    -0.0000011920928955078125,
+    0.0000029802322387695312,
   ],
   Array [
     "lineTo",
     60,
-    0,
+    0.0000017881393432617188,
   ],
   Array [
     "lineTo",
     59,
-    0,
+    0.0000011920928955078125,
   ],
   Array [
     "lineTo",
     58,
-    0,
+    0.0000017881393432617188,
   ],
   Array [
     "closePath",
@@ -3934,322 +3934,322 @@ Array [
   Array [
     "lineTo",
     71,
-    9.9828571442049,
+    9.982858276925981,
   ],
   Array [
     "lineTo",
     70,
-    9.931428576819599,
+    9.93143005296588,
   ],
   Array [
     "lineTo",
     69,
-    9.828571435064077,
+    9.82857208698988,
   ],
   Array [
     "lineTo",
     68,
-    9.657142870128155,
+    9.65714417397976,
   ],
   Array [
     "lineTo",
     67,
-    9.400000013411045,
+    9.400001540780067,
   ],
   Array [
     "lineTo",
     66,
-    9.045714288949966,
+    9.04571533203125,
   ],
   Array [
     "lineTo",
     65,
-    8.582857102155685,
+    8.5828597843647,
   ],
   Array [
     "lineTo",
     64,
-    8.017142862081528,
+    8.017144799232483,
   ],
   Array [
     "lineTo",
     63,
-    7.354285717010498,
+    7.354287803173065,
   ],
   Array [
     "lineTo",
     62,
-    6.599999964237213,
+    6.600002944469452,
   ],
   Array [
     "lineTo",
     61,
-    5.8000001311302185,
+    5.800003111362457,
   ],
   Array [
     "lineTo",
     60,
-    5,
+    5.000001490116119,
   ],
   Array [
     "lineTo",
     59,
-    4.2399996519088745,
+    4.240002632141113,
   ],
   Array [
     "lineTo",
     58,
-    3.5600000619888306,
+    3.560001850128174,
   ],
   Array [
     "lineTo",
     57,
-    3.0000001192092896,
+    3.000001311302185,
   ],
   Array [
     "lineTo",
     56,
-    2.605714201927185,
+    2.6057159900665283,
   ],
   Array [
     "lineTo",
     55,
-    2.4228566884994507,
+    2.4228590726852417,
   ],
   Array [
     "lineTo",
     54,
-    2.457142472267151,
+    2.457144260406494,
   ],
   Array [
     "lineTo",
     53,
-    2.7142852544784546,
+    2.714287042617798,
   ],
   Array [
     "lineTo",
     52,
-    3.1999999284744263,
+    3.2000017166137695,
   ],
   Array [
     "lineTo",
     51,
-    3.8514286279678345,
+    3.85142982006073,
   ],
   Array [
     "lineTo",
     50,
-    4.605714678764343,
+    4.605715870857239,
   ],
   Array [
     "lineTo",
     49,
-    5.394285619258881,
+    5.394287109375,
   ],
   Array [
     "lineTo",
     48,
-    6.1485713720321655,
+    6.148573160171509,
   ],
   Array [
     "lineTo",
     47,
-    6.800000071525574,
+    6.800001561641693,
   ],
   Array [
     "lineTo",
     46,
-    7.319999933242798,
+    7.320001125335693,
   ],
   Array [
     "lineTo",
     45,
-    7.680000066757202,
+    7.680001854896545,
   ],
   Array [
     "lineTo",
     44,
-    7.920000106096268,
+    7.920001149177551,
   ],
   Array [
     "lineTo",
     43,
-    8.080000132322311,
+    8.080001771450043,
   ],
   Array [
     "lineTo",
     42,
-    8.199999928474426,
+    8.200001567602158,
   ],
   Array [
     "lineTo",
     41,
-    8.308571428060532,
+    8.308572322130203,
   ],
   Array [
     "lineTo",
     40,
-    8.434285670518875,
+    8.434286564588547,
   ],
   Array [
     "lineTo",
     39,
-    8.565714210271835,
+    8.565714955329895,
   ],
   Array [
     "lineTo",
     38,
-    8.69142860174179,
+    8.691430687904358,
   ],
   Array [
     "lineTo",
     37,
-    8.80000002682209,
+    8.80000151693821,
   ],
   Array [
     "lineTo",
     36,
-    8.862857148051262,
+    8.862858563661575,
   ],
   Array [
     "lineTo",
     35,
-    8.851428627967834,
+    8.851429745554924,
   ],
   Array [
     "lineTo",
     34,
-    8.748571425676346,
+    8.748573362827301,
   ],
   Array [
     "lineTo",
     33,
-    8.537142872810364,
+    8.537144511938095,
   ],
   Array [
     "lineTo",
     32,
-    8.199999928474426,
+    8.200001567602158,
   ],
   Array [
     "lineTo",
     31,
-    7.765714228153229,
+    7.76571661233902,
   ],
   Array [
     "lineTo",
     30,
-    7.262856960296631,
+    7.26285845041275,
   ],
   Array [
     "lineTo",
     29,
-    6.73714280128479,
+    6.737144589424133,
   ],
   Array [
     "lineTo",
     28,
-    6.234285831451416,
+    6.234287917613983,
   ],
   Array [
     "lineTo",
     27,
-    5.8000001311302185,
+    5.800001621246338,
   ],
   Array [
     "lineTo",
     26,
-    5.428571403026581,
+    5.428573489189148,
   ],
   Array [
     "lineTo",
     25,
-    5.11428564786911,
+    5.114286839962006,
   ],
   Array [
     "lineTo",
     24,
-    4.80571448802948,
+    4.8057156801223755,
   ],
   Array [
     "lineTo",
     23,
-    4.451428651809692,
+    4.451429843902588,
   ],
   Array [
     "lineTo",
     22,
-    3.999999761581421,
+    4.000001549720764,
   ],
   Array [
     "lineTo",
     21,
-    3.514285087585449,
+    3.5142868757247925,
   ],
   Array [
     "lineTo",
     20,
-    3.057142496109009,
+    3.057144284248352,
   ],
   Array [
     "lineTo",
     19,
-    2.742857336997986,
+    2.742859125137329,
   ],
   Array [
     "lineTo",
     18,
-    2.685713768005371,
+    2.685716152191162,
   ],
   Array [
     "lineTo",
     17,
-    3.0000001192092896,
+    3.000001311302185,
   ],
   Array [
     "lineTo",
     16,
-    3.6571425199508667,
+    3.65714430809021,
   ],
   Array [
     "lineTo",
     15,
-    4.628571271896362,
+    4.628573656082153,
   ],
   Array [
     "lineTo",
     14,
-    5.771428644657135,
+    5.771431028842926,
   ],
   Array [
     "lineTo",
     13,
-    6.942857205867767,
+    6.942858994007111,
   ],
   Array [
     "lineTo",
     12,
-    7.999999970197678,
+    8.000001460313797,
   ],
   Array [
     "lineTo",
     11,
-    8.857142850756645,
+    8.857144191861153,
   ],
   Array [
     "lineTo",
     10,
-    9.428571462631226,
+    9.428572095930576,
   ],
   Array [
     "lineTo",
     9,
-    9.77142859250307,
+    9.77142944931984,
   ],
   Array [
     "lineTo",
     8,
-    9.942857138812542,
+    9.94285736232996,
   ],
   Array [
     "closePath",
@@ -4319,187 +4319,187 @@ Array [
   Array [
     "lineTo",
     8,
-    9.942857138812542,
+    9.94285736232996,
   ],
   Array [
     "lineTo",
     9,
-    9.77142859250307,
+    9.77142944931984,
   ],
   Array [
     "lineTo",
     10,
-    9.428571462631226,
+    9.428572095930576,
   ],
   Array [
     "lineTo",
     11,
-    8.857142850756645,
+    8.857144191861153,
   ],
   Array [
     "lineTo",
     12,
-    7.999999970197678,
+    8.000001460313797,
   ],
   Array [
     "lineTo",
     13,
-    6.942857205867767,
+    6.942858994007111,
   ],
   Array [
     "lineTo",
     14,
-    5.771428644657135,
+    5.771431028842926,
   ],
   Array [
     "lineTo",
     15,
-    4.628571271896362,
+    4.628573656082153,
   ],
   Array [
     "lineTo",
     16,
-    3.6571425199508667,
+    3.65714430809021,
   ],
   Array [
     "lineTo",
     17,
-    3.0000001192092896,
+    3.000001311302185,
   ],
   Array [
     "lineTo",
     18,
-    2.685713768005371,
+    2.685716152191162,
   ],
   Array [
     "lineTo",
     19,
-    2.742857336997986,
+    2.742859125137329,
   ],
   Array [
     "lineTo",
     20,
-    3.057142496109009,
+    3.057144284248352,
   ],
   Array [
     "lineTo",
     21,
-    3.514285087585449,
+    3.5142868757247925,
   ],
   Array [
     "lineTo",
     22,
-    3.999999761581421,
+    4.000001549720764,
   ],
   Array [
     "lineTo",
     21,
-    3.4571421146392822,
+    3.4571444988250732,
   ],
   Array [
     "lineTo",
     20,
-    2.8285712003707886,
+    2.8285735845565796,
   ],
   Array [
     "lineTo",
     19,
-    2.1714287996292114,
+    2.1714311838150024,
   ],
   Array [
     "lineTo",
     18,
-    1.5428566932678223,
+    1.5428602695465088,
   ],
   Array [
     "lineTo",
     17,
-    1.000000238418579,
+    1.0000026226043701,
   ],
   Array [
     "lineTo",
     16,
-    0.6057137250900269,
+    0.6057178974151611,
   ],
   Array [
     "lineTo",
     15,
-    0.42285680770874023,
+    0.4228609800338745,
   ],
   Array [
     "lineTo",
     14,
-    0.4571431875228882,
+    0.45714735984802246,
   ],
   Array [
     "lineTo",
     13,
-    0.7142859697341919,
+    0.7142901420593262,
   ],
   Array [
     "lineTo",
     12,
-    1.2000000476837158,
+    1.2000030279159546,
   ],
   Array [
     "lineTo",
     11,
-    1.8742859363555908,
+    1.8742889165878296,
   ],
   Array [
     "lineTo",
     10,
-    2.6971429586410522,
+    2.6971453428268433,
   ],
   Array [
     "lineTo",
     9,
-    3.6228573322296143,
+    3.6228591203689575,
   ],
   Array [
     "lineTo",
     8,
-    4.6057140827178955,
+    4.605715870857239,
   ],
   Array [
     "lineTo",
     7,
-    5.600000023841858,
+    5.600001513957977,
   ],
   Array [
     "lineTo",
     6,
-    6.548571288585663,
+    6.54857337474823,
   ],
   Array [
     "lineTo",
     5,
-    7.394285500049591,
+    7.3942869901657104,
   ],
   Array [
     "lineTo",
     4,
-    8.125714361667633,
+    8.12571570277214,
   ],
   Array [
     "lineTo",
     3,
-    8.731428682804108,
+    8.731430023908615,
   ],
   Array [
     "lineTo",
     2,
-    9.200000017881393,
+    9.200001507997513,
   ],
   Array [
     "lineTo",
     1,
-    9.542857110500336,
+    9.542858898639679,
   ],
   Array [
     "lineTo",
     0,
-    9.771428555250168,
+    9.77142944931984,
   ],
   Array [
     "closePath",
@@ -4513,72 +4513,72 @@ Array [
   Array [
     "moveTo",
     58,
-    3.5600000619888306,
+    3.560001850128174,
   ],
   Array [
     "lineTo",
     59,
-    4.2399996519088745,
+    4.240002632141113,
   ],
   Array [
     "lineTo",
     60,
-    5,
+    5.000001490116119,
   ],
   Array [
     "lineTo",
     61,
-    5.8000001311302185,
+    5.800003111362457,
   ],
   Array [
     "lineTo",
     62,
-    6.599999964237213,
+    6.600002944469452,
   ],
   Array [
     "lineTo",
     63,
-    7.354285717010498,
+    7.354287803173065,
   ],
   Array [
     "lineTo",
     64,
-    8.017142862081528,
+    8.017144799232483,
   ],
   Array [
     "lineTo",
     65,
-    8.582857102155685,
+    8.5828597843647,
   ],
   Array [
     "lineTo",
     66,
-    9.045714288949966,
+    9.04571533203125,
   ],
   Array [
     "lineTo",
     67,
-    9.400000013411045,
+    9.400001540780067,
   ],
   Array [
     "lineTo",
     68,
-    9.657142870128155,
+    9.65714417397976,
   ],
   Array [
     "lineTo",
     69,
-    9.828571435064077,
+    9.82857208698988,
   ],
   Array [
     "lineTo",
     70,
-    9.931428576819599,
+    9.93143005296588,
   ],
   Array [
     "lineTo",
     71,
-    9.9828571442049,
+    9.982858276925981,
   ],
   Array [
     "lineTo",
@@ -4613,97 +4613,97 @@ Array [
   Array [
     "lineTo",
     76,
-    9.9828571442049,
+    9.982858276925981,
   ],
   Array [
     "lineTo",
     75,
-    9.931428576819599,
+    9.93143005296588,
   ],
   Array [
     "lineTo",
     74,
-    9.828571435064077,
+    9.82857208698988,
   ],
   Array [
     "lineTo",
     73,
-    9.657142870128155,
+    9.65714417397976,
   ],
   Array [
     "lineTo",
     72,
-    9.400000013411045,
+    9.400001540780067,
   ],
   Array [
     "lineTo",
     71,
-    9.074285700917244,
+    9.0742889046669,
   ],
   Array [
     "lineTo",
     70,
-    8.697142899036407,
+    8.697146624326706,
   ],
   Array [
     "lineTo",
     69,
-    8.302857279777527,
+    8.302859514951706,
   ],
   Array [
     "lineTo",
     68,
-    7.925714403390884,
+    7.925717234611511,
   ],
   Array [
     "lineTo",
     67,
-    7.60000005364418,
+    7.600003033876419,
   ],
   Array [
     "lineTo",
     66,
-    7.314285635948181,
+    7.314288318157196,
   ],
   Array [
     "lineTo",
     65,
-    7.057142853736877,
+    7.057147324085236,
   ],
   Array [
     "lineTo",
     64,
-    6.782857179641724,
+    6.782861351966858,
   ],
   Array [
     "lineTo",
     63,
-    6.445714235305786,
+    6.44571840763092,
   ],
   Array [
     "lineTo",
     62,
-    5.999999940395355,
+    6.000004410743713,
   ],
   Array [
     "lineTo",
     61,
-    5.457142889499664,
+    5.4571473598480225,
   ],
   Array [
     "lineTo",
     60,
-    4.828571677207947,
+    4.82857346534729,
   ],
   Array [
     "lineTo",
     59,
-    4.171428084373474,
+    4.171432852745056,
   ],
   Array [
     "lineTo",
     58,
-    3.5428571701049805,
+    3.5428601503372192,
   ],
   Array [
     "closePath",
@@ -6395,157 +6395,157 @@ Array [
   Array [
     "lineTo",
     76,
-    9.9828571442049,
+    9.982858276925981,
   ],
   Array [
     "lineTo",
     75,
-    9.931428576819599,
+    9.93143005296588,
   ],
   Array [
     "lineTo",
     74,
-    9.828571435064077,
+    9.82857208698988,
   ],
   Array [
     "lineTo",
     73,
-    9.63809534907341,
+    9.638096615672112,
   ],
   Array [
     "lineTo",
     72,
-    9.314285963773727,
+    9.314288347959518,
   ],
   Array [
     "lineTo",
     71,
-    8.845714628696442,
+    8.84571686387062,
   ],
   Array [
     "lineTo",
     70,
-    8.220953196287155,
+    8.220956474542618,
   ],
   Array [
     "lineTo",
     69,
-    7.445715367794037,
+    7.445719838142395,
   ],
   Array [
     "lineTo",
     68,
-    6.563810706138611,
+    6.563816964626312,
   ],
   Array [
     "lineTo",
     67,
-    5.638096630573273,
+    5.6381043791770935,
   ],
   Array [
     "lineTo",
     66,
-    4.76762056350708,
+    4.767628312110901,
   ],
   Array [
     "lineTo",
     65,
-    4.060953855514526,
+    4.060960412025452,
   ],
   Array [
     "lineTo",
     64,
-    3.592382073402405,
+    3.59238862991333,
   ],
   Array [
     "lineTo",
     63,
-    3.4171438217163086,
+    3.4171491861343384,
   ],
   Array [
     "lineTo",
     62,
-    3.5809534788131714,
+    3.580957055091858,
   ],
   Array [
     "lineTo",
     61,
-    4.0228575468063354,
+    4.022860527038574,
   ],
   Array [
     "lineTo",
     60,
-    4.664762020111084,
+    4.664764404296875,
   ],
   Array [
     "lineTo",
     59,
-    5.41523814201355,
+    5.415240526199341,
   ],
   Array [
     "lineTo",
     58,
-    6.182857155799866,
+    6.182858347892761,
   ],
   Array [
     "lineTo",
     57,
-    6.8761903047561646,
+    6.876191794872284,
   ],
   Array [
     "lineTo",
     56,
-    7.457142770290375,
+    7.457144260406494,
   ],
   Array [
     "lineTo",
     55,
-    7.893333286046982,
+    7.893334925174713,
   ],
   Array [
     "lineTo",
     54,
-    8.213333189487457,
+    8.213334679603577,
   ],
   Array [
     "lineTo",
     53,
-    8.443809449672699,
+    8.44381108880043,
   ],
   Array [
     "lineTo",
     52,
-    8.60761895775795,
+    8.607620298862457,
   ],
   Array [
     "lineTo",
     51,
-    8.727618902921677,
+    8.72761994600296,
   ],
   Array [
     "lineTo",
     50,
-    8.828571289777756,
+    8.828572109341621,
   ],
   Array [
     "lineTo",
     49,
-    8.904761895537376,
+    8.904763758182526,
   ],
   Array [
     "lineTo",
     48,
-    8.954285681247711,
+    8.954286202788353,
   ],
   Array [
     "lineTo",
     47,
-    8.982857167720795,
+    8.982858285307884,
   ],
   Array [
     "lineTo",
     46,
-    8.996190428733826,
+    8.996191397309303,
   ],
   Array [
     "lineTo",
@@ -6675,92 +6675,92 @@ Array [
   Array [
     "lineTo",
     20,
-    8.982857167720795,
+    8.982858285307884,
   ],
   Array [
     "lineTo",
     19,
-    8.897142857313156,
+    8.897145092487335,
   ],
   Array [
     "lineTo",
     18,
-    8.69142860174179,
+    8.691432178020477,
   ],
   Array [
     "lineTo",
     17,
-    8.31428587436676,
+    8.314289897680283,
   ],
   Array [
     "lineTo",
     16,
-    7.771428823471069,
+    7.771434038877487,
   ],
   Array [
     "lineTo",
     15,
-    7.102857530117035,
+    7.10286408662796,
   ],
   Array [
     "lineTo",
     14,
-    6.41714334487915,
+    6.417150795459747,
   ],
   Array [
     "lineTo",
     13,
-    5.840000510215759,
+    5.840008556842804,
   ],
   Array [
     "lineTo",
     12,
-    5.531429052352905,
+    5.531436204910278,
   ],
   Array [
     "lineTo",
     11,
-    5.537143349647522,
+    5.537150502204895,
   ],
   Array [
     "lineTo",
     10,
-    5.885714590549469,
+    5.88572084903717,
   ],
   Array [
     "lineTo",
     9,
-    6.51428610086441,
+    6.514289975166321,
   ],
   Array [
     "lineTo",
     8,
-    7.325714528560638,
+    7.325717210769653,
   ],
   Array [
     "lineTo",
     7,
-    8.154285848140717,
+    8.154287785291672,
   ],
   Array [
     "lineTo",
     6,
-    8.89142856001854,
+    8.891430646181107,
   ],
   Array [
     "lineTo",
     5,
-    9.428571462631226,
+    9.428572095930576,
   ],
   Array [
     "lineTo",
     4,
-    9.77142859250307,
+    9.77142944931984,
   ],
   Array [
     "lineTo",
     3,
-    9.942857138812542,
+    9.94285736232996,
   ],
   Array [
     "closePath",
@@ -6805,162 +6805,162 @@ Array [
   Array [
     "lineTo",
     3,
-    9.942857138812542,
+    9.94285736232996,
   ],
   Array [
     "lineTo",
     4,
-    9.77142859250307,
+    9.77142944931984,
   ],
   Array [
     "lineTo",
     5,
-    9.428571462631226,
+    9.428572095930576,
   ],
   Array [
     "lineTo",
     6,
-    8.89142856001854,
+    8.891430646181107,
   ],
   Array [
     "lineTo",
     7,
-    8.154285848140717,
+    8.154287785291672,
   ],
   Array [
     "lineTo",
     8,
-    7.325714528560638,
+    7.325717210769653,
   ],
   Array [
     "lineTo",
     9,
-    6.51428610086441,
+    6.514289975166321,
   ],
   Array [
     "lineTo",
     10,
-    5.885714590549469,
+    5.88572084903717,
   ],
   Array [
     "lineTo",
     11,
-    5.537143349647522,
+    5.537150502204895,
   ],
   Array [
     "lineTo",
     12,
-    5.531429052352905,
+    5.531436204910278,
   ],
   Array [
     "lineTo",
     13,
-    5.840000510215759,
+    5.840008556842804,
   ],
   Array [
     "lineTo",
     14,
-    6.41714334487915,
+    6.417150795459747,
   ],
   Array [
     "lineTo",
     15,
-    7.102857530117035,
+    7.10286408662796,
   ],
   Array [
     "lineTo",
     16,
-    7.771428823471069,
+    7.771434038877487,
   ],
   Array [
     "lineTo",
     17,
-    8.31428587436676,
+    8.314289897680283,
   ],
   Array [
     "lineTo",
     16,
-    7.714285999536514,
+    7.714291363954544,
   ],
   Array [
     "lineTo",
     15,
-    6.874286234378815,
+    6.874293386936188,
   ],
   Array [
     "lineTo",
     14,
-    5.845714807510376,
+    5.845722854137421,
   ],
   Array [
     "lineTo",
     13,
-    4.720000624656677,
+    4.720008969306946,
   ],
   Array [
     "lineTo",
     12,
-    3.6342865228652954,
+    3.634294271469116,
   ],
   Array [
     "lineTo",
     11,
-    2.7257144451141357,
+    2.725721597671509,
   ],
   Array [
     "lineTo",
     10,
-    2.1219050884246826,
+    2.1219098567962646,
   ],
   Array [
     "lineTo",
     9,
-    1.93142831325531,
+    1.9314289093017578,
   ],
   Array [
     "lineTo",
     8,
-    2.182857394218445,
+    2.182855010032654,
   ],
   Array [
     "lineTo",
     7,
-    2.81333327293396,
+    2.813328504562378,
   ],
   Array [
     "lineTo",
     6,
-    3.7371426820755005,
+    3.737136721611023,
   ],
   Array [
     "lineTo",
     5,
-    4.841904640197754,
+    4.841897487640381,
   ],
   Array [
     "lineTo",
     4,
-    5.984761714935303,
+    5.984754860401154,
   ],
   Array [
     "lineTo",
     3,
-    7.055237889289856,
+    7.055232226848602,
   ],
   Array [
     "lineTo",
     2,
-    7.973333299160004,
+    7.973329126834869,
   ],
   Array [
     "lineTo",
     1,
-    8.758095279335976,
+    8.758093267679214,
   ],
   Array [
     "lineTo",
     0,
-    9.31428574025631,
+    9.314285293221474,
   ],
   Array [
     "closePath",
@@ -6974,72 +6974,72 @@ Array [
   Array [
     "moveTo",
     63,
-    3.4171438217163086,
+    3.4171491861343384,
   ],
   Array [
     "lineTo",
     64,
-    3.592382073402405,
+    3.59238862991333,
   ],
   Array [
     "lineTo",
     65,
-    4.060953855514526,
+    4.060960412025452,
   ],
   Array [
     "lineTo",
     66,
-    4.76762056350708,
+    4.767628312110901,
   ],
   Array [
     "lineTo",
     67,
-    5.638096630573273,
+    5.6381043791770935,
   ],
   Array [
     "lineTo",
     68,
-    6.563810706138611,
+    6.563816964626312,
   ],
   Array [
     "lineTo",
     69,
-    7.445715367794037,
+    7.445719838142395,
   ],
   Array [
     "lineTo",
     70,
-    8.220953196287155,
+    8.220956474542618,
   ],
   Array [
     "lineTo",
     71,
-    8.845714628696442,
+    8.84571686387062,
   ],
   Array [
     "lineTo",
     72,
-    9.314285963773727,
+    9.314288347959518,
   ],
   Array [
     "lineTo",
     73,
-    9.63809534907341,
+    9.638096615672112,
   ],
   Array [
     "lineTo",
     74,
-    9.828571435064077,
+    9.82857208698988,
   ],
   Array [
     "lineTo",
     75,
-    9.931428576819599,
+    9.93143005296588,
   ],
   Array [
     "lineTo",
     76,
-    9.9828571442049,
+    9.982858276925981,
   ],
   Array [
     "lineTo",
@@ -7059,87 +7059,87 @@ Array [
   Array [
     "lineTo",
     79,
-    9.965714153368026,
+    9.96571502648294,
   ],
   Array [
     "lineTo",
     78,
-    9.89714260213077,
+    9.89714507944882,
   ],
   Array [
     "lineTo",
     77,
-    9.771428126841784,
+    9.771430976688862,
   ],
   Array [
     "lineTo",
     76,
-    9.571427926421165,
+    9.571432508528233,
   ],
   Array [
     "lineTo",
     75,
-    9.291427731513977,
+    9.291433691978455,
   ],
   Array [
     "lineTo",
     74,
-    8.948570489883423,
+    8.948576375842094,
   ],
   Array [
     "lineTo",
     73,
-    8.546665757894516,
+    8.546672016382217,
   ],
   Array [
     "lineTo",
     72,
-    8.091427981853485,
+    8.09143528342247,
   ],
   Array [
     "lineTo",
     71,
-    7.588571012020111,
+    7.5885772705078125,
   ],
   Array [
     "lineTo",
     70,
-    7.03809529542923,
+    7.038102746009827,
   ],
   Array [
     "lineTo",
     69,
-    6.428572237491608,
+    6.428579688072205,
   ],
   Array [
     "lineTo",
     68,
-    5.775238871574402,
+    5.77524721622467,
   ],
   Array [
     "lineTo",
     67,
-    5.089524984359741,
+    5.089534223079681,
   ],
   Array [
     "lineTo",
     66,
-    4.436191916465759,
+    4.436201453208923,
   ],
   Array [
     "lineTo",
     65,
-    3.889525532722473,
+    3.889532685279846,
   ],
   Array [
     "lineTo",
     64,
-    3.5238105058670044,
+    3.523818850517273,
   ],
   Array [
     "lineTo",
     63,
-    3.4000009298324585,
+    3.400007486343384,
   ],
   Array [
     "closePath",
@@ -8664,72 +8664,72 @@ Array [
   Array [
     "lineTo",
     46,
-    9.942857138812542,
+    9.94285736232996,
   ],
   Array [
     "lineTo",
     45,
-    9.77142859250307,
+    9.77142944931984,
   ],
   Array [
     "lineTo",
     44,
-    9.428571462631226,
+    9.428572095930576,
   ],
   Array [
     "lineTo",
     43,
-    8.857142850756645,
+    8.857144191861153,
   ],
   Array [
     "lineTo",
     42,
-    7.999999970197678,
+    8.000001460313797,
   ],
   Array [
     "lineTo",
     41,
-    6.914285719394684,
+    6.914286911487579,
   ],
   Array [
     "lineTo",
     40,
-    5.657142698764801,
+    5.65714418888092,
   ],
   Array [
     "lineTo",
     39,
-    4.342857003211975,
+    4.342858791351318,
   ],
   Array [
     "lineTo",
     38,
-    3.0857139825820923,
+    3.0857163667678833,
   ],
   Array [
     "lineTo",
     37,
-    1.9999998807907104,
+    2.0000016689300537,
   ],
   Array [
     "lineTo",
     36,
-    1.142856478691101,
+    1.142858862876892,
   ],
   Array [
     "lineTo",
     35,
-    0.5714285373687744,
+    0.5714297294616699,
   ],
   Array [
     "lineTo",
     34,
-    0.22857129573822021,
+    0.22857189178466797,
   ],
   Array [
     "lineTo",
     33,
-    0.05714237689971924,
+    0.0571441650390625,
   ],
   Array [
     "lineTo",
@@ -8864,37 +8864,37 @@ Array [
   Array [
     "lineTo",
     6,
-    0.05714237689971924,
+    0.0571441650390625,
   ],
   Array [
     "lineTo",
     5,
-    0.22857129573822021,
+    0.22857189178466797,
   ],
   Array [
     "lineTo",
     4,
-    0.5714285373687744,
+    0.5714297294616699,
   ],
   Array [
     "lineTo",
     3,
-    1.314285397529602,
+    1.3142865896224976,
   ],
   Array [
     "lineTo",
     2,
-    2.457142472267151,
+    2.457144260406494,
   ],
   Array [
     "lineTo",
     1,
-    4.399999976158142,
+    4.400001764297485,
   ],
   Array [
     "lineTo",
     0,
-    6.228571236133575,
+    6.228572130203247,
   ],
   Array [
     "closePath",
@@ -9244,77 +9244,77 @@ Array [
   Array [
     "lineTo",
     44,
-    9.94887215550989,
+    9.948873901739717,
   ],
   Array [
     "lineTo",
     43,
-    9.7894736379385,
+    9.78947602212429,
   ],
   Array [
     "lineTo",
     42,
-    9.464661553502083,
+    9.464665204286575,
   ],
   Array [
     "lineTo",
     41,
-    8.917292952537537,
+    8.917298913002014,
   ],
   Array [
     "lineTo",
     40,
-    8.090225160121918,
+    8.090232908725739,
   ],
   Array [
     "lineTo",
     39,
-    7.02857106924057,
+    7.028581202030182,
   ],
   Array [
     "lineTo",
     38,
-    5.789473056793213,
+    5.789485275745392,
   ],
   Array [
     "lineTo",
     37,
-    4.4812023639678955,
+    4.481214880943298,
   ],
   Array [
     "lineTo",
     36,
-    3.2180440425872803,
+    3.2180559635162354,
   ],
   Array [
     "lineTo",
     35,
-    2.1142852306365967,
+    2.1142959594726562,
   ],
   Array [
     "lineTo",
     34,
-    1.2330818176269531,
+    1.2330901622772217,
   ],
   Array [
     "lineTo",
     33,
-    0.6315785646438599,
+    0.6315839290618896,
   ],
   Array [
     "lineTo",
     32,
-    0.2646613121032715,
+    0.26466548442840576,
   ],
   Array [
     "lineTo",
     31,
-    0.07518768310546875,
+    0.07519066333770752,
   ],
   Array [
     "lineTo",
     30,
-    0.006015300750732422,
+    0.00601649284362793,
   ],
   Array [
     "lineTo",
@@ -9354,67 +9354,67 @@ Array [
   Array [
     "lineTo",
     22,
-    0.20150363445281982,
+    0.20150423049926758,
   ],
   Array [
     "lineTo",
     21,
-    0.5172938108444214,
+    0.5172926187515259,
   ],
   Array [
     "lineTo",
     20,
-    1.052631139755249,
+    1.0526305437088013,
   ],
   Array [
     "lineTo",
     19,
-    1.8646621704101562,
+    1.864660382270813,
   ],
   Array [
     "lineTo",
     18,
-    2.914286255836487,
+    2.914283871650696,
   ],
   Array [
     "lineTo",
     17,
-    4.144361615180969,
+    4.1443586349487305,
   ],
   Array [
     "lineTo",
     16,
-    5.44962465763092,
+    5.449621677398682,
   ],
   Array [
     "lineTo",
     15,
-    6.715790033340454,
+    6.7157867550849915,
   ],
   Array [
     "lineTo",
     14,
-    7.82857209444046,
+    7.8285689651966095,
   ],
   Array [
     "lineTo",
     13,
-    8.721805065870285,
+    8.721803277730942,
   ],
   Array [
     "lineTo",
     12,
-    9.338346272706985,
+    9.338345304131508,
   ],
   Array [
     "lineTo",
     11,
-    9.717293456196785,
+    9.717292785644531,
   ],
   Array [
     "lineTo",
     10,
-    9.915789570659399,
+    9.915789794176817,
   ],
   Array [
     "lineTo",

From 4bad7bdc35243161feaf37d186fd701dd90a844a Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange.moz@gmail.com>
Date: Sun, 8 Feb 2026 16:57:41 -0500
Subject: [PATCH 12/14] Use one buffer only.

---
 .../shared/thread/ActivityGraphFills.tsx      | 105 ++++++++++--------
 1 file changed, 60 insertions(+), 45 deletions(-)

diff --git a/src/components/shared/thread/ActivityGraphFills.tsx b/src/components/shared/thread/ActivityGraphFills.tsx
index 6d58205d29..cd5b79f3ae 100644
--- a/src/components/shared/thread/ActivityGraphFills.tsx
+++ b/src/components/shared/thread/ActivityGraphFills.tsx
@@ -91,10 +91,6 @@ export type CategoryDrawStyles = ReadonlyArray<{
   readonly filteredOutByTransformFillStyle: CanvasPattern | string;
 }>;
 
-// These Float32Arrays are mutated in place during the computation step.
-// buffers[selectedState] is the buffer for the given SelectedState enum value.
-type SelectedPercentageAtPixelBuffers = Int32Array<ArrayBuffer>[];
-
 export type CpuRatioInTimeRange = {
   readonly cpuRatio: number;
   readonly timeRange: Milliseconds;
@@ -149,7 +145,7 @@ export function precomputePositions(
     sampleIndexOffset > 0
       ? fullThreadSampleTimes[sampleIndexOffset - 1]
       : fullThreadSampleTimes[0] - interval;
-  // Go through the samples and accumulate the category into the percentageBuffers.
+  // Go through the samples and accumulate the category into the percentageBuffer.
   for (let i = 0; i < sampleCount; i++) {
     const sampleTime = fullThreadSampleTimes[sampleIndexOffset + i];
     samplePositions[i] =
@@ -181,16 +177,16 @@ export function precomputePositions(
 export function computeActivityGraphFills(
   renderedComponentSettings: RenderedComponentSettings
 ) {
-  const mutablePercentageBuffers = _createSelectedPercentageAtPixelBuffers(
+  const mutablePercentageBuffer = _createSelectedPercentageAtPixelBuffers(
     renderedComponentSettings
   );
   const mutableFills = _getCategoryFills(
     renderedComponentSettings.categoryDrawStyles,
-    mutablePercentageBuffers
+    mutablePercentageBuffer
   );
   const activityGraphFills = new ActivityGraphFillComputer(
     renderedComponentSettings,
-    mutablePercentageBuffers,
+    mutablePercentageBuffer,
     mutableFills
   );
 
@@ -216,16 +212,16 @@ export function computeActivityGraphFills(
 export class ActivityGraphFillComputer {
   readonly renderedComponentSettings: RenderedComponentSettings;
   // The fills and percentages are mutated in place.
-  readonly mutablePercentageBuffers: SelectedPercentageAtPixelBuffers[];
+  readonly mutablePercentageBuffer: Int32Array;
   readonly mutableFills: CategoryFill[];
 
   constructor(
     renderedComponentSettings: RenderedComponentSettings,
-    mutablePercentageBuffers: SelectedPercentageAtPixelBuffers[],
+    mutablePercentageBuffer: Int32Array,
     mutableFills: CategoryFill[]
   ) {
     this.renderedComponentSettings = renderedComponentSettings;
-    this.mutablePercentageBuffers = mutablePercentageBuffers;
+    this.mutablePercentageBuffer = mutablePercentageBuffer;
     this.mutableFills = mutableFills;
   }
 
@@ -296,18 +292,20 @@ export class ActivityGraphFillComputer {
    * with these methods.
    */
   _accumulateSampleCategories() {
+    const { mutablePercentageBuffer: buffer, renderedComponentSettings } = this;
     const {
+      canvasPixelWidth,
       rangeFilteredThread: { samples },
       sampleSelectedStates,
       precomputedPositions,
-    } = this.renderedComponentSettings;
+    } = renderedComponentSettings;
 
     if (samples.length === 0) {
       // If we have no samples, there's nothing to do.
       return;
     }
 
-    // Go through the samples and accumulate the category into the percentageBuffers.)
+    // Go through the samples and accumulate the category into the buffer.
     const { samplePositions, halfwayPositions } = precomputedPositions;
     const { threadCPUPercent } = samples;
     let beforeSampleCpuPercent = threadCPUPercent[0];
@@ -319,10 +317,10 @@ export class ActivityGraphFillComputer {
       const afterSampleCpuPercent = threadCPUPercent[i + 1];
       const category = samples.category[i];
 
-      const percentageBuffers = this.mutablePercentageBuffers[category];
       const bufferIndex =
         sampleSelectedStates[i] & SAMPLE_RELATION_TO_SELECTED_STATE_MASK;
-      const percentageBuffer = percentageBuffers[bufferIndex];
+      const bufferRow = category * SELECTED_STATE_BUFFER_COUNT + bufferIndex;
+      const baseIndex = bufferRow * canvasPixelWidth;
       const samplePosition = samplePositions[i];
 
       // Samples have two parts to be able to present the different CPU usages properly.
@@ -365,21 +363,21 @@ export class ActivityGraphFillComputer {
         const intEndPos = endPos >> FIXED_POINT_BITS;
 
         if (intStartPos === intEndPos) {
-          percentageBuffer[intStartPos] += cpuPercent * (endPos - startPos);
+          buffer[baseIndex + intStartPos] += cpuPercent * (endPos - startPos);
         } else {
           if (intStartPos + 1 < intEndPos) {
-            percentageBuffer.fill(
+            buffer.fill(
               cpuPercent << FIXED_POINT_BITS,
-              intStartPos + 1,
-              intEndPos
+              baseIndex + intStartPos + 1,
+              baseIndex + intEndPos
             );
           }
 
           const startPosFrac = startPos & FIXED_POINT_MASK;
-          percentageBuffer[intStartPos] +=
+          buffer[baseIndex + intStartPos] +=
             cpuPercent * ((1 << FIXED_POINT_BITS) - startPosFrac);
           const endPosFrac = endPos & FIXED_POINT_MASK;
-          percentageBuffer[intEndPos] += cpuPercent * endPosFrac;
+          buffer[baseIndex + intEndPos] += cpuPercent * endPosFrac;
         }
       }
 
@@ -392,21 +390,21 @@ export class ActivityGraphFillComputer {
         const intEndPos = endPos >> FIXED_POINT_BITS;
 
         if (intStartPos === intEndPos) {
-          percentageBuffer[intStartPos] += cpuPercent * (endPos - startPos);
+          buffer[baseIndex + intStartPos] += cpuPercent * (endPos - startPos);
         } else {
           if (intStartPos + 1 < intEndPos) {
-            percentageBuffer.fill(
+            buffer.fill(
               cpuPercent << FIXED_POINT_BITS,
-              intStartPos + 1,
-              intEndPos
+              baseIndex + intStartPos + 1,
+              baseIndex + intEndPos
             );
           }
 
           const startPosFrac = startPos & FIXED_POINT_MASK;
-          percentageBuffer[intStartPos] +=
+          buffer[baseIndex + intStartPos] +=
             cpuPercent * ((1 << FIXED_POINT_BITS) - startPosFrac);
           const endPosFrac = endPos & FIXED_POINT_MASK;
-          percentageBuffer[intEndPos] += cpuPercent * endPosFrac;
+          buffer[baseIndex + intEndPos] += cpuPercent * endPosFrac;
         }
       }
 
@@ -770,14 +768,9 @@ function _createSelectedPercentageAtPixelBuffers({
 }: {
   categoryDrawStyles: CategoryDrawStyles;
   canvasPixelWidth: number;
-}): SelectedPercentageAtPixelBuffers[] {
-  return categoryDrawStyles.map(() => {
-    const percentageBuffers = [];
-    for (let i = 0; i <= SELECTED_STATE_BUFFER_COUNT; i++) {
-      percentageBuffers[i] = new Int32Array(canvasPixelWidth);
-    }
-    return percentageBuffers;
-  });
+}): Int32Array<ArrayBuffer> {
+  const rowCount = categoryDrawStyles.length * SELECTED_STATE_BUFFER_COUNT;
+  return new Int32Array(canvasPixelWidth * rowCount);
 }
 
 /**
@@ -791,8 +784,13 @@ function _createSelectedPercentageAtPixelBuffers({
  */
 function _getCategoryFills(
   categoryDrawStyles: CategoryDrawStyles,
-  percentageBuffers: SelectedPercentageAtPixelBuffers[]
+  percentageBuffer: Int32Array<ArrayBuffer>
 ): CategoryFill[] {
+  const canvasPixelWidth =
+    percentageBuffer.length /
+    categoryDrawStyles.length /
+    SELECTED_STATE_BUFFER_COUNT;
+
   // Sort all of the categories by their gravity.
   const categoryIndexesByGravity = categoryDrawStyles
     .map((_, i) => i)
@@ -800,38 +798,55 @@ function _getCategoryFills(
       (a, b) => categoryDrawStyles[b].gravity - categoryDrawStyles[a].gravity
     );
 
+  function bufferForCategoryAndSelectedState(
+    category: IndexIntoCategoryList,
+    selectedState: SelectedState
+  ): Int32Array<ArrayBuffer> {
+    const rowIndex = category * SELECTED_STATE_BUFFER_COUNT + selectedState;
+    const sliceStart = rowIndex * canvasPixelWidth;
+    const sliceEnd = sliceStart + canvasPixelWidth;
+    return percentageBuffer.subarray(sliceStart, sliceEnd);
+  }
+
   const nestedFills: CategoryFill[][] = categoryIndexesByGravity.map(
     (categoryIndex) => {
       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:
       return [
         {
           category: categoryDrawStyle.category,
           fillStyle: categoryDrawStyle.getUnselectedFillStyle(),
-          perPixelContribution:
-            buffer[SelectedState.UnselectedOrderedBeforeSelected],
+          perPixelContribution: bufferForCategoryAndSelectedState(
+            categoryIndex,
+            SelectedState.UnselectedOrderedBeforeSelected
+          ),
           accumulatedUpperEdge: new Float32Array(canvasPixelWidth),
         },
         {
           category: categoryDrawStyle.category,
           fillStyle: categoryDrawStyle.getSelectedFillStyle(),
-          perPixelContribution: buffer[SelectedState.Selected],
+          perPixelContribution: bufferForCategoryAndSelectedState(
+            categoryIndex,
+            SelectedState.Selected
+          ),
           accumulatedUpperEdge: new Float32Array(canvasPixelWidth),
         },
         {
           category: categoryDrawStyle.category,
           fillStyle: categoryDrawStyle.getUnselectedFillStyle(),
-          perPixelContribution:
-            buffer[SelectedState.UnselectedOrderedAfterSelected],
+          perPixelContribution: bufferForCategoryAndSelectedState(
+            categoryIndex,
+            SelectedState.UnselectedOrderedAfterSelected
+          ),
           accumulatedUpperEdge: new Float32Array(canvasPixelWidth),
         },
         {
           category: categoryDrawStyle.category,
           fillStyle: categoryDrawStyle.filteredOutByTransformFillStyle,
-          perPixelContribution: buffer[SelectedState.FilteredOutByTransform],
+          perPixelContribution: bufferForCategoryAndSelectedState(
+            categoryIndex,
+            SelectedState.FilteredOutByTransform
+          ),
           accumulatedUpperEdge: new Float32Array(canvasPixelWidth),
         },
       ];

From e749c9e91514d8e52c2103c2a56713a5639b0f18 Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange.moz@gmail.com>
Date: Sat, 7 Mar 2026 17:39:54 -0500
Subject: [PATCH 13/14] Skip the work for all-zero-CPU samples.

---
 src/components/shared/thread/ActivityGraphFills.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/shared/thread/ActivityGraphFills.tsx b/src/components/shared/thread/ActivityGraphFills.tsx
index cd5b79f3ae..cbbd3caa69 100644
--- a/src/components/shared/thread/ActivityGraphFills.tsx
+++ b/src/components/shared/thread/ActivityGraphFills.tsx
@@ -315,6 +315,13 @@ export class ActivityGraphFillComputer {
       // at the end, so accessing [i + 1] is valid even for the last sample.
       const halfwayPositionAfter = halfwayPositions[i + 1];
       const afterSampleCpuPercent = threadCPUPercent[i + 1];
+
+      if (beforeSampleCpuPercent === 0 && afterSampleCpuPercent === 0) {
+        halfwayPositionBefore = halfwayPositionAfter;
+        beforeSampleCpuPercent = afterSampleCpuPercent;
+        continue;
+      }
+
       const category = samples.category[i];
 
       const bufferIndex =

From 5f9873bd00448f49c631ec3933276ba6bf012f23 Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange.moz@gmail.com>
Date: Sat, 7 Mar 2026 17:41:26 -0500
Subject: [PATCH 14/14] Store samples.categories in a local variable.

---
 src/components/shared/thread/ActivityGraphFills.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/shared/thread/ActivityGraphFills.tsx b/src/components/shared/thread/ActivityGraphFills.tsx
index cbbd3caa69..1bd518ea0b 100644
--- a/src/components/shared/thread/ActivityGraphFills.tsx
+++ b/src/components/shared/thread/ActivityGraphFills.tsx
@@ -307,7 +307,7 @@ export class ActivityGraphFillComputer {
 
     // Go through the samples and accumulate the category into the buffer.
     const { samplePositions, halfwayPositions } = precomputedPositions;
-    const { threadCPUPercent } = samples;
+    const { threadCPUPercent, category: sampleCategories } = samples;
     let beforeSampleCpuPercent = threadCPUPercent[0];
     let halfwayPositionBefore = halfwayPositions[0];
     for (let i = 0; i < samples.length; i++) {
@@ -322,7 +322,7 @@ export class ActivityGraphFillComputer {
         continue;
       }
 
-      const category = samples.category[i];
+      const category = sampleCategories[i];
 
       const bufferIndex =
         sampleSelectedStates[i] & SAMPLE_RELATION_TO_SELECTED_STATE_MASK;