_drawSingleReactComponentMeasure(context, rect, componentMeasure, scaleFactor, showHoverHighlight) {
    const {
      frame
    } = this;
    const {
      componentName,
      duration,
      timestamp,
      type,
      warning
    } = componentMeasure;
    const xStart = timestampToPosition(timestamp, scaleFactor, frame);
    const xStop = timestampToPosition(timestamp + duration, scaleFactor, frame);
    const componentMeasureRect = {
      origin: {
        x: xStart,
        y: frame.origin.y
      },
      size: {
        width: xStop - xStart,
        height: NATIVE_EVENT_HEIGHT
      }
    };

    if (!rectIntersectsRect(componentMeasureRect, rect)) {
      return false; // Not in view
    }

    const width = durationToWidth(duration, scaleFactor);

    if (width < 1) {
      return false; // Too small to render at this zoom level
    }

    let textFillStyle = null;
    let typeLabel = null;
    const drawableRect = intersectionOfRects(componentMeasureRect, rect);
    context.beginPath();

    if (warning !== null) {
      context.fillStyle = showHoverHighlight ? COLORS.WARNING_BACKGROUND_HOVER : COLORS.WARNING_BACKGROUND;
    } else {
      switch (type) {
        case 'render':
          context.fillStyle = showHoverHighlight ? COLORS.REACT_RENDER_HOVER : COLORS.REACT_RENDER;
          textFillStyle = COLORS.REACT_RENDER_TEXT;
          typeLabel = 'rendered';
          break;

        case 'layout-effect-mount':
          context.fillStyle = showHoverHighlight ? COLORS.REACT_LAYOUT_EFFECTS_HOVER : COLORS.REACT_LAYOUT_EFFECTS;
          textFillStyle = COLORS.REACT_LAYOUT_EFFECTS_TEXT;
          typeLabel = 'mounted layout effect';
          break;

        case 'layout-effect-unmount':
          context.fillStyle = showHoverHighlight ? COLORS.REACT_LAYOUT_EFFECTS_HOVER : COLORS.REACT_LAYOUT_EFFECTS;
          textFillStyle = COLORS.REACT_LAYOUT_EFFECTS_TEXT;
          typeLabel = 'unmounted layout effect';
          break;

        case 'passive-effect-mount':
          context.fillStyle = showHoverHighlight ? COLORS.REACT_PASSIVE_EFFECTS_HOVER : COLORS.REACT_PASSIVE_EFFECTS;
          textFillStyle = COLORS.REACT_PASSIVE_EFFECTS_TEXT;
          typeLabel = 'mounted passive effect';
          break;

        case 'passive-effect-unmount':
          context.fillStyle = showHoverHighlight ? COLORS.REACT_PASSIVE_EFFECTS_HOVER : COLORS.REACT_PASSIVE_EFFECTS;
          textFillStyle = COLORS.REACT_PASSIVE_EFFECTS_TEXT;
          typeLabel = 'unmounted passive effect';
          break;
      }
    }

    let isMatch = false;
    const cachedSearchRegExp = this._cachedSearchRegExp;

    if (cachedSearchRegExp !== null) {
      const cachedSearchMatches = this._cachedSearchMatches;
      const cachedValue = cachedSearchMatches.get(componentName);

      if (cachedValue != null) {
        isMatch = cachedValue;
      } else {
        isMatch = componentName.match(cachedSearchRegExp) !== null;
        cachedSearchMatches.set(componentName, isMatch);
      }
    }

    if (isMatch) {
      context.fillStyle = COLORS.SEARCH_RESULT_FILL;
    }

    context.fillRect(drawableRect.origin.x, drawableRect.origin.y, drawableRect.size.width, drawableRect.size.height);
    const label = `${componentName} ${typeLabel} - ${formatting_formatDuration(duration)}`;
    drawText(label, context, componentMeasureRect, drawableRect, {
      fillStyle: textFillStyle
    });
    return true;
  }
Draw a single `ReactComponentMeasure` as a box/span with text inside of it.