_drawSingleSuspenseEvent(context, rect, event, baseY, scaleFactor, showHoverHighlight) {
    const {
      frame
    } = this;
    const {
      componentName,
      depth,
      duration,
      phase,
      promiseName,
      resolution,
      timestamp,
      warning
    } = event;
    baseY += depth * SuspenseEventsView_ROW_WITH_BORDER_HEIGHT;
    let fillStyle = null;

    if (warning !== null) {
      fillStyle = showHoverHighlight ? COLORS.WARNING_BACKGROUND_HOVER : COLORS.WARNING_BACKGROUND;
    } else {
      switch (resolution) {
        case 'rejected':
          fillStyle = showHoverHighlight ? COLORS.REACT_SUSPENSE_REJECTED_EVENT_HOVER : COLORS.REACT_SUSPENSE_REJECTED_EVENT;
          break;

        case 'resolved':
          fillStyle = showHoverHighlight ? COLORS.REACT_SUSPENSE_RESOLVED_EVENT_HOVER : COLORS.REACT_SUSPENSE_RESOLVED_EVENT;
          break;

        case 'unresolved':
          fillStyle = showHoverHighlight ? COLORS.REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER : COLORS.REACT_SUSPENSE_UNRESOLVED_EVENT;
          break;
      }
    }

    const xStart = timestampToPosition(timestamp, scaleFactor, frame); // Pending suspense events (ones that never resolved) won't have durations.
    // So instead we draw them as diamonds.

    if (duration === null) {
      const size = PENDING_SUSPENSE_EVENT_SIZE;
      const halfSize = size / 2;
      baseY += (SUSPENSE_EVENT_HEIGHT - PENDING_SUSPENSE_EVENT_SIZE) / 2;
      const y = baseY + halfSize;
      const suspenseRect = {
        origin: {
          x: xStart - halfSize,
          y: baseY
        },
        size: {
          width: size,
          height: size
        }
      };

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

      context.beginPath();
      context.fillStyle = fillStyle;
      context.moveTo(xStart, y - halfSize);
      context.lineTo(xStart + halfSize, y);
      context.lineTo(xStart, y + halfSize);
      context.lineTo(xStart - halfSize, y);
      context.fill();
    } else {
      const xStop = timestampToPosition(timestamp + duration, scaleFactor, frame);
      const eventRect = {
        origin: {
          x: xStart,
          y: baseY
        },
        size: {
          width: xStop - xStart,
          height: SUSPENSE_EVENT_HEIGHT
        }
      };

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

      const width = durationToWidth(duration, scaleFactor);

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

      const drawableRect = intersectionOfRects(eventRect, rect);
      context.beginPath();
      context.fillStyle = fillStyle;
      context.fillRect(drawableRect.origin.x, drawableRect.origin.y, drawableRect.size.width, drawableRect.size.height);
      let label = 'suspended';

      if (promiseName != null) {
        label = promiseName;
      } else if (componentName != null) {
        label = `${componentName} ${label}`;
      }

      if (phase !== null) {
        label += ` during ${phase}`;
      }

      if (resolution !== 'unresolved') {
        label += ` - ${formatting_formatDuration(duration)}`;
      }

      drawText(label, context, eventRect, drawableRect);
    }
  }
Draw a single `SuspenseEvent` as a box/span with text inside of it.