Use one buffer only.

Author: mstange

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,47 +784,69 @@ 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)
     .sort(
       (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),
         },
       ];