Two optimizations for the marker chart

src/components/marker-chart/Canvas.js

@@ -48,7 +48,7 @@ type MarkerDrawingInformation = {|
   +w: CssPixels,
   +h: CssPixels,
   +isInstantMarker: boolean,
-  +text: string,
+  +markerIndex: MarkerIndex,
 |};
 
 // We can hover over multiple items with Marker chart when we are in the active
@@ -80,6 +80,8 @@ type OwnProps = {|
   +markerTimingAndBuckets: MarkerTimingAndBuckets,
   +rowHeight: CssPixels,
   +getMarker: (MarkerIndex) => Marker,
+  +getMarkerLabel: (MarkerIndex) => string,
+  +markerListLength: number,
   +threadsKey: ThreadsKey,
   +updatePreviewSelection: WrapFunctionInDispatch<UpdatePreviewSelection>,
   +changeMouseTimePosition: ChangeMouseTimePosition,
@@ -164,11 +166,11 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
     const rightClickedRow: number | void =
       rightClickedMarkerIndex === null
         ? undefined
-        : markerIndexToTimingRow.get(rightClickedMarkerIndex);
+        : markerIndexToTimingRow[rightClickedMarkerIndex];
     let newRow: number | void =
       hoveredMarker === null
         ? undefined
-        : markerIndexToTimingRow.get(hoveredMarker);
+        : markerIndexToTimingRow[hoveredMarker];
     if (
       timelineTrackOrganization.type === 'active-tab' &&
       newRow === undefined &&
@@ -190,7 +192,7 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
       let oldRow: number | void =
         prevHoveredMarker === null
           ? undefined
-          : markerIndexToTimingRow.get(prevHoveredMarker);
+          : markerIndexToTimingRow[prevHoveredMarker];
       if (
         timelineTrackOrganization.type === 'active-tab' &&
         oldRow === undefined &&
@@ -254,8 +256,10 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
   _getMarkerIndexToTimingRow = memoize(
     (
       markerTimingAndBuckets: MarkerTimingAndBuckets
-    ): Map<MarkerIndex, number> => {
-      const markerIndexToTimingRow = new Map();
+    ): Uint32Array /* like Map<MarkerIndex, RowIndex> */ => {
+      const markerIndexToTimingRow = new Uint32Array(
+        this.props.markerListLength
+      );
       for (
         let rowIndex = 0;
         rowIndex < markerTimingAndBuckets.length;
@@ -270,7 +274,7 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
           timingIndex < markerTiming.length;
           timingIndex++
         ) {
-          markerIndexToTimingRow.set(markerTiming.index[timingIndex], rowIndex);
+          markerIndexToTimingRow[markerTiming.index[timingIndex]] = rowIndex;
         }
       }
       return markerIndexToTimingRow;
@@ -287,13 +291,13 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
     w: CssPixels,
     h: CssPixels,
     isInstantMarker: boolean,
-    text: string,
+    markerIndex: MarkerIndex,
     isHighlighted: boolean = false
   ) {
     if (isInstantMarker) {
       this.drawOneInstantMarker(ctx, x, y, h, isHighlighted);
     } else {
-      this.drawOneIntervalMarker(ctx, x, y, w, h, text, isHighlighted);
+      this.drawOneIntervalMarker(ctx, x, y, w, h, markerIndex, isHighlighted);
     }
   }
 
@@ -303,10 +307,10 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
     y: CssPixels,
     w: CssPixels,
     h: CssPixels,
-    text: string,
+    markerIndex: MarkerIndex,
     isHighlighted: boolean
   ) {
-    const { marginLeft } = this.props;
+    const { marginLeft, getMarkerLabel } = this.props;
 
     if (w <= 2) {
       // This is an interval marker small enough that if we drew it as a
@@ -351,7 +355,10 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
       const w2: CssPixels = visibleWidth - 2 * TEXT_OFFSET_START;
 
       if (w2 > textMeasurement.minWidth) {
-        const fittedText = textMeasurement.getFittedText(text, w2);
+        const fittedText = textMeasurement.getFittedText(
+          getMarkerLabel(markerIndex),
+          w2
+        );
         if (fittedText) {
           ctx.fillStyle = isHighlighted ? 'white' : 'black';
           ctx.fillText(fittedText, x2, y + TEXT_OFFSET_TOP);
@@ -474,7 +481,6 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
           x = Math.round(x * devicePixelRatio) / devicePixelRatio;
           w = Math.round(w * devicePixelRatio) / devicePixelRatio;
 
-          const text = markerTiming.label[i];
           const markerIndex = markerTiming.index[i];
 
           const isHighlighted =
@@ -483,7 +489,14 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
             selectedMarkerIndex === markerIndex;
 
           if (isHighlighted) {
-            highlightedMarkers.push({ x, y, w, h, isInstantMarker, text });
+            highlightedMarkers.push({
+              x,
+              y,
+              w,
+              h,
+              isInstantMarker,
+              markerIndex,
+            });
           } else if (
             // Always render non-dot markers and markers that are larger than
             // one pixel.
@@ -493,7 +506,7 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
             x !== previousMarkerDrawnAtX
           ) {
             previousMarkerDrawnAtX = x;
-            this.drawOneMarker(ctx, x, y, w, h, isInstantMarker, text);
+            this.drawOneMarker(ctx, x, y, w, h, isInstantMarker, markerIndex);
           }
         }
       }
@@ -509,7 +522,7 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
         highlightedMarker.w,
         highlightedMarker.h,
         highlightedMarker.isInstantMarker,
-        highlightedMarker.text,
+        highlightedMarker.markerIndex,
         true /* isHighlighted */
       );
     });

src/components/marker-chart/index.js

@@ -55,8 +55,10 @@ type DispatchProps = {|
 
 type StateProps = {|
   +getMarker: (MarkerIndex) => Marker,
+  +getMarkerLabel: (MarkerIndex) => string,
   +markerTimingAndBuckets: MarkerTimingAndBuckets,
   +maxMarkerRows: number,
+  +markerListLength: number,
   +timeRange: StartEndRange,
   +threadsKey: ThreadsKey,
   +previewSelection: PreviewSelection,
@@ -105,10 +107,12 @@ class MarkerChartImpl extends React.PureComponent<Props> {
   render() {
     const {
       maxMarkerRows,
+      markerListLength,
       timeRange,
       threadsKey,
       markerTimingAndBuckets,
       getMarker,
+      getMarkerLabel,
       previewSelection,
       updatePreviewSelection,
       changeMouseTimePosition,
@@ -156,6 +160,8 @@ class MarkerChartImpl extends React.PureComponent<Props> {
               chartProps={{
                 markerTimingAndBuckets,
                 getMarker,
+                getMarkerLabel,
+                markerListLength,
                 // $FlowFixMe Error introduced by upgrading to v0.96.0. See issue #1936.
                 updatePreviewSelection,
                 changeMouseTimePosition,
@@ -194,8 +200,10 @@ export const MarkerChart = explicitConnect<{||}, StateProps, DispatchProps>({
       selectedThreadSelectors.getMarkerChartTimingAndBuckets(state);
     return {
       getMarker: selectedThreadSelectors.getMarkerGetter(state),
+      getMarkerLabel: selectedThreadSelectors.getMarkerChartLabelGetter(state),
       markerTimingAndBuckets,
       maxMarkerRows: markerTimingAndBuckets.length,
+      markerListLength: selectedThreadSelectors.getMarkerListLength(state),
       timeRange: getCommittedRange(state),
       threadsKey: getSelectedThreadsKey(state),
       previewSelection: getPreviewSelection(state),

src/profile-logic/marker-timing.js

@@ -30,7 +30,6 @@ const MAX_STACKING_DEPTH = 300;
  *      start: [0, 23, 35, 65, 75],
  *      end: [1, 25, 37, 67, 77],
  *      index: [0, 2, 5, 6, 8],
- *      label: ["Aye", "Aye", "Aye", "Aye", "Aye"],
  *      bucket: "DOM",
  *      instantOnly: false,
  *      length: 5,
@@ -40,7 +39,6 @@ const MAX_STACKING_DEPTH = 300;
  *      start: [1, 28, 39, 69, 70],
  *      end: [2, 29, 49, 70, 77],
  *      index: [1, 3, 7, 9, 10],
- *      label: ["Bee", "Bee", "Bee", "Bee", "Bee"],
  *      bucket: "DOM",
  *      instantOnly: false,
  *      length: 5,
@@ -50,7 +48,6 @@ const MAX_STACKING_DEPTH = 300;
  *      start: [1, 28, 39, 69, 70],
  *      end: [2, 29, 49, 70, 77],
  *      index: [1, 3, 7, 9, 10],
- *      label: ["Bee", "Bee", "Bee", "Bee", "Bee"],
  *      bucket: "DOM",
  *      instantOnly: false,
  *      length: 5,
@@ -60,7 +57,6 @@ const MAX_STACKING_DEPTH = 300;
  *      start: [10, 33, 45, 75, 85],
  *      end: [11, 35, 47, 77, 87],
  *      index: [4, 11, 12, 13, 14],
- *      label: ["Sea", "Sea", "Sea", "Sea", "Sea"],
  *      bucket: "Other",
  *      instantOnly: false,
  *      length: 5,
@@ -90,7 +86,6 @@ export function getMarkerTiming(
   markerIndexes: MarkerIndex[],
   // Categories can be null for things like Network Markers, where we don't care to
   // break things up by category.
-  getLabel: (MarkerIndex) => string,
   categories: ?CategoryList
 ): MarkerTiming[] {
   // Each marker type will have it's own timing information, later collapse these into
@@ -110,7 +105,6 @@ export function getMarkerTiming(
         // The chart will then be responsible for drawing this differently.
         marker.end === null ? marker.start : marker.end
       );
-      markerTiming.label.push(getLabel(markerIndex));
       markerTiming.index.push(markerIndex);
       markerTiming.length++;
     };
@@ -129,7 +123,6 @@ export function getMarkerTiming(
       start: [],
       end: [],
       index: [],
-      label: [],
       name: markerLineName,
       bucket: bucketName,
       instantOnly,
@@ -254,7 +247,6 @@ export function getMarkerTiming(
  *      start: [0, 23, 35, 65, 75],
  *      end: [1, 25, 37, 67, 77],
  *      index: [0, 2, 5, 6, 8],
- *      label: ["Aye", "Aye", "Aye", "Aye", "Aye"],
  *      bucket: "DOM",
  *      instantOnly: false,
  *      length: 5,
@@ -264,7 +256,6 @@ export function getMarkerTiming(
  *      start: [1, 28, 39, 69, 70],
  *      end: [2, 29, 49, 70, 77],
  *      index: [1, 3, 7, 9, 10],
- *      label: ["Bee", "Bee", "Bee", "Bee", "Bee"],
  *      bucket: "DOM",
  *      instantOnly: false,
  *      length: 5,
@@ -274,7 +265,6 @@ export function getMarkerTiming(
  *      start: [1, 28, 39, 69, 70],
  *      end: [2, 29, 49, 70, 77],
  *      index: [1, 3, 7, 9, 10],
- *      label: ["Bee", "Bee", "Bee", "Bee", "Bee"],
  *      bucket: "DOM",
  *      instantOnly: false,
  *      length: 5,
@@ -285,7 +275,6 @@ export function getMarkerTiming(
  *      start: [10, 33, 45, 75, 85],
  *      end: [11, 35, 47, 77, 87],
  *      index: [4, 11, 12, 13, 14],
- *      label: ["Sea", "Sea", "Sea", "Sea", "Sea"],
  *      bucket: "Other",
  *      instantOnly: false,
  *      length: 5,
@@ -297,13 +286,11 @@ export function getMarkerTimingAndBuckets(
   markerIndexes: MarkerIndex[],
   // Categories can be null for things like Network Markers, where we don't care to
   // break things up by category.
-  getLabel: (MarkerIndex) => string,
   categories: ?CategoryList
 ): MarkerTimingAndBuckets {
   const allMarkerTimings = getMarkerTiming(
     getMarker,
     markerIndexes,
-    getLabel,
     categories
   );
 

src/selectors/per-thread/markers.js

@@ -134,6 +134,12 @@ export function getMarkerSelectorsPerThread(
       )
   );
 
+  /**
+   * This returns the maximum marker index.
+   */
+  const getMarkerListLength: Selector<number> = (state) =>
+    getFullMarkerList(state).length;
+
   /**
    * This selector returns a function that's used to retrieve a marker object
    * from its MarkerIndex:
@@ -446,7 +452,7 @@ export function getMarkerSelectorsPerThread(
   /**
    * This getter uses the marker schema to decide on the labels for the marker chart.
    */
-  const _getMarkerChartLabelGetter: Selector<(MarkerIndex) => string> =
+  const getMarkerChartLabelGetter: Selector<(MarkerIndex) => string> =
     createSelector(
       getMarkerGetter,
       ProfileSelectors.getMarkerSchema,
@@ -481,7 +487,6 @@ export function getMarkerSelectorsPerThread(
     createSelector(
       getMarkerGetter,
       getMarkerChartMarkerIndexes,
-      _getMarkerChartLabelGetter,
       ProfileSelectors.getCategories,
       MarkerTimingLogic.getMarkerTimingAndBuckets
     );
@@ -535,7 +540,6 @@ export function getMarkerSelectorsPerThread(
   const getNetworkTrackTiming: Selector<MarkerTiming[]> = createSelector(
     getMarkerGetter,
     getNetworkMarkerIndexes,
-    _getMarkerChartLabelGetter,
     MarkerTimingLogic.getMarkerTiming
   );
 
@@ -546,7 +550,6 @@ export function getMarkerSelectorsPerThread(
   const getUserTimingMarkerTiming: Selector<MarkerTiming[]> = createSelector(
     getMarkerGetter,
     getUserTimingMarkerIndexes,
-    _getMarkerChartLabelGetter,
     MarkerTimingLogic.getMarkerTiming
   );
 
@@ -739,11 +742,13 @@ export function getMarkerSelectorsPerThread(
     getMarkerIndexToRawMarkerIndexes,
     getFullMarkerList,
     getFullMarkerListIndexes,
+    getMarkerListLength,
     getNetworkMarkerIndexes,
     getSearchFilteredNetworkMarkerIndexes,
     getAreMarkerPanelsEmptyInFullRange,
     getMarkerTableMarkerIndexes,
     getMarkerChartMarkerIndexes,
+    getMarkerChartLabelGetter,
     getMarkerTooltipLabelGetter,
     getMarkerTableLabelGetter,
     getMarkerLabelToCopyGetter,

src/test/store/__snapshots__/profile-view.test.js.snap

@@ -2007,9 +2007,6 @@ Array [
       3,
     ],
     "instantOnly": true,
-    "label": Array [
-      "",
-    ],
     "length": 1,
     "name": "D",
     "start": Array [
@@ -2025,9 +2022,6 @@ Array [
       4,
     ],
     "instantOnly": true,
-    "label": Array [
-      "",
-    ],
     "length": 1,
     "name": "E",
     "start": Array [
@@ -2043,9 +2037,6 @@ Array [
       5,
     ],
     "instantOnly": true,
-    "label": Array [
-      "",
-    ],
     "length": 1,
     "name": "F",
     "start": Array [
@@ -2063,10 +2054,6 @@ Array [
       7,
     ],
     "instantOnly": false,
-    "label": Array [
-      "https://mozilla.org",
-      "https://mozilla.org",
-    ],
     "length": 2,
     "name": "Network Requests",
     "start": Array [