_drawSingleNativeEvent(context, rect, event, baseY, scaleFactor, showHoverHighlight) {
    const {
      frame
    } = this;
    const {
      depth,
      duration,
      timestamp,
      type,
      warning
    } = event;
    baseY += depth * NativeEventsView_ROW_WITH_BORDER_HEIGHT;
    const xStart = timestampToPosition(timestamp, scaleFactor, frame);
    const xStop = timestampToPosition(timestamp + duration, scaleFactor, frame);
    const eventRect = {
      origin: {
        x: xStart,
        y: baseY
      },
      size: {
        width: xStop - xStart,
        height: NATIVE_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();

    if (warning !== null) {
      context.fillStyle = showHoverHighlight ? COLORS.WARNING_BACKGROUND_HOVER : COLORS.WARNING_BACKGROUND;
    } else {
      context.fillStyle = showHoverHighlight ? COLORS.NATIVE_EVENT_HOVER : COLORS.NATIVE_EVENT;
    }

    context.fillRect(drawableRect.origin.x, drawableRect.origin.y, drawableRect.size.width, drawableRect.size.height);
    const label = `${type} - ${formatting_formatDuration(duration)}`;
    drawText(label, context, eventRect, drawableRect);
  }
Draw a single `NativeEvent` as a box/span with text inside of it.