Improve SampleGraph and HeightGraph performance (#5897)

Some minor perf improvements and code simplifications.

Author: mstange

src/components/shared/thread/HeightGraph.tsx

@@ -3,7 +3,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 import { PureComponent } from 'react';
 import classNames from 'classnames';
-import { ensureExists } from 'firefox-profiler/utils/types';
 import { timeCode } from 'firefox-profiler/utils/time-code';
 import { getSampleIndexClosestToStartTime } from 'firefox-profiler/profile-logic/profile-data';
 import { bisectionRight } from 'firefox-profiler/utils/bisect';
@@ -105,6 +104,8 @@ export class ThreadHeightGraph extends PureComponent<Props> {
       firstDrawnSampleIndex
     );
 
+    const idleCategoryIndex = categories.findIndex((c) => c.name === 'Idle');
+
     // Do one pass over the samples array to gather the samples we want to draw.
     const regularSamples = {
       height: [] as number[],
@@ -127,6 +128,12 @@ export class ThreadHeightGraph extends PureComponent<Props> {
       if (sampleTime < nextMinTime) {
         continue;
       }
+
+      const state = sampleSelectedStates[i] as SelectedState;
+      if (state === SelectedState.FilteredOutByTransform) {
+        continue;
+      }
+
       const heightFuncResult = heightFunc(i);
       if (heightFuncResult === null) {
         continue;
@@ -136,16 +143,11 @@ export class ThreadHeightGraph extends PureComponent<Props> {
 
       const xPos = (sampleTime - range[0]) * xPixelsPerMs;
       let samplesBucket;
-      if (sampleSelectedStates[i] === (SelectedState.Selected as number)) {
+      if (state === SelectedState.Selected) {
         samplesBucket = highlightedSamples;
       } else {
-        const stackIndex = ensureExists(
-          thread.samples.stack[i],
-          'A stack must exist for this sample, since a callNodeIndex exists.'
-        );
-        const categoryIndex = thread.stackTable.category[stackIndex];
-        const category = categories[categoryIndex];
-        if (category.name === 'Idle') {
+        const categoryIndex = thread.samples.category[i];
+        if (categoryIndex === idleCategoryIndex) {
           samplesBucket = idleSamples;
         } else {
           samplesBucket = regularSamples;

src/components/shared/thread/SampleGraph.tsx

@@ -175,6 +175,8 @@ class ThreadSampleGraphCanvas extends React.PureComponent<CanvasProps> {
       firstDrawnSampleIndex
     );
 
+    const idleCategoryIndex = categories.findIndex((c) => c.name === 'Idle');
+
     // Do one pass over the samples array to gather the samples we want to draw.
     const regularSamples: number[] = [];
     const idleSamples: number[] = [];
@@ -188,19 +190,18 @@ class ThreadSampleGraphCanvas extends React.PureComponent<CanvasProps> {
       if (sampleTime < nextMinTime) {
         continue;
       }
-      const stackIndex = thread.samples.stack[i];
-      if (stackIndex === null) {
+      const state = sampleSelectedStates[i] as SelectedState;
+      if (state === SelectedState.FilteredOutByTransform) {
         continue;
       }
       const xPos =
         (sampleTime - rangeStart) * xPixelsPerMs - drawnSampleWidth / 2;
       let samplesBucket;
-      if (sampleSelectedStates[i] === (SelectedState.Selected as number)) {
+      if (state === SelectedState.Selected) {
         samplesBucket = highlightedSamples;
       } else {
-        const categoryIndex = thread.stackTable.category[stackIndex];
-        const category = categories[categoryIndex];
-        if (category.name === 'Idle') {
+        const categoryIndex = thread.samples.category[i];
+        if (categoryIndex === idleCategoryIndex) {
           samplesBucket = idleSamples;
         } else {
           samplesBucket = regularSamples;