Viewing github.com/facebook/react/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js

```
/**
```

 * Copyright (c) Meta Platforms, Inc. and affiliates.

```
 *
```

 * This source code is licensed under the MIT license found in the

 * LICENSE file in the root directory of this source tree.

```
 *
```
```
 * @flow
```
```
 */
```

import type {SuspenseEvent, TimelineData} from '../types';

```
import type {
```
```
  Interaction,
```
```
  IntrinsicSize,
```
```
  MouseMoveInteraction,
```
```
  Rect,
```
```
  ViewRefs,
```
```
} from '../view-base';
```
```
import {
```
```
  durationToWidth,
```
```
  positioningScaleFactor,
```
```
  positionToTimestamp,
```
```
  timestampToPosition,
```
```
  widthToDuration,
```
```
} from './utils/positioning';
```
```
import {drawText} from './utils/text';
```

import {formatDuration} from '../utils/formatting';

```
import {
```
```
  View,
```
```
  Surface,
```
```
  rectContainsPoint,
```
```
  rectIntersectsRect,
```
```
  intersectionOfRects,
```
```
} from '../view-base';
```
```
import {
```
```
  BORDER_SIZE,
```
```
  COLORS,
```
```
  PENDING_SUSPENSE_EVENT_SIZE,
```
```
  SUSPENSE_EVENT_HEIGHT,
```
```
} from './constants';
```

const ROW_WITH_BORDER_HEIGHT = SUSPENSE_EVENT_HEIGHT + BORDER_SIZE;

```
const MAX_ROWS_TO_SHOW_INITIALLY = 3;
```

export class SuspenseEventsView extends View {

  _depthToSuspenseEvent: Map<number, SuspenseEvent[]>;

  _hoveredEvent: SuspenseEvent | null = null;

```
  _intrinsicSize: IntrinsicSize;
```
```
  _maxDepth: number = 0;
```
```
  _profilerData: TimelineData;
```

  onHover: ((event: SuspenseEvent | null) => void) | null = null;

  constructor(surface: Surface, frame: Rect, profilerData: TimelineData) {

```
    super(surface, frame);
```
```
    this._profilerData = profilerData;
```

    this._performPreflightComputations();

```
  }
```
```
  _performPreflightComputations() {
```

    this._depthToSuspenseEvent = new Map();

    const {duration, suspenseEvents} = this._profilerData;

```
    suspenseEvents.forEach(event => {
```
```
      const depth = event.depth;
```

      this._maxDepth = Math.max(this._maxDepth, depth);

      if (!this._depthToSuspenseEvent.has(depth)) {

        this._depthToSuspenseEvent.set(depth, [event]);

```
      } else {
```

        // $FlowFixMe[incompatible-use] This is unnecessary.

        this._depthToSuspenseEvent.get(depth).push(event);

```
      }
```
```
    });
```
```
    this._intrinsicSize = {
```
```
      width: duration,
```

      height: (this._maxDepth + 1) * ROW_WITH_BORDER_HEIGHT,

      hideScrollBarIfLessThanHeight: ROW_WITH_BORDER_HEIGHT,

      maxInitialHeight: ROW_WITH_BORDER_HEIGHT * MAX_ROWS_TO_SHOW_INITIALLY,

```
    };
```
```
  }
```
```
  desiredSize(): IntrinsicSize {
```
```
    return this._intrinsicSize;
```
```
  }
```

  setHoveredEvent(hoveredEvent: SuspenseEvent | null) {

    if (this._hoveredEvent === hoveredEvent) {

```
      return;
```
```
    }
```
```
    this._hoveredEvent = hoveredEvent;
```
```
    this.setNeedsDisplay();
```
```
  }
```
```
  /**
```

   * Draw a single `SuspenseEvent` as a box/span with text inside of it.

```
   */
```
```
  _drawSingleSuspenseEvent(
```
```
    context: CanvasRenderingContext2D,
```
```
    rect: Rect,
```
```
    event: SuspenseEvent,
```
```
    baseY: number,
```
```
    scaleFactor: number,
```
```
    showHoverHighlight: boolean,
```
```
  ) {
```
```
    const {frame} = this;
```
```
    const {
```
```
      componentName,
```
```
      depth,
```
```
      duration,
```
```
      phase,
```
```
      promiseName,
```
```
      resolution,
```
```
      timestamp,
```
```
      warning,
```
```
    } = event;
```

    baseY += depth * ROW_WITH_BORDER_HEIGHT;

    let fillStyle = ((null: any): string);

```
    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: Rect = {
```
```
        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: Rect = {
```
```
        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 += ` - ${formatDuration(duration)}`;

```
      }
```

      drawText(label, context, eventRect, drawableRect);

```
    }
```
```
  }
```

  draw(context: CanvasRenderingContext2D) {

```
    const {
```
```
      frame,
```
```
      _profilerData: {suspenseEvents},
```
```
      _hoveredEvent,
```
```
      visibleArea,
```
```
    } = this;
```

    context.fillStyle = COLORS.PRIORITY_BACKGROUND;

```
    context.fillRect(
```
```
      visibleArea.origin.x,
```
```
      visibleArea.origin.y,
```
```
      visibleArea.size.width,
```
```
      visibleArea.size.height,
```
```
    );
```
```
    // Draw events
```

    const scaleFactor = positioningScaleFactor(

```
      this._intrinsicSize.width,
```
```
      frame,
```
```
    );
```
```
    suspenseEvents.forEach(event => {
```
```
      this._drawSingleSuspenseEvent(
```
```
        context,
```
```
        visibleArea,
```
```
        event,
```
```
        frame.origin.y,
```
```
        scaleFactor,
```
```
        event === _hoveredEvent,
```
```
      );
```
```
    });
```
```
    // Render bottom borders.
```

    for (let i = 0; i <= this._maxDepth; i++) {

```
      const borderFrame: Rect = {
```
```
        origin: {
```
```
          x: frame.origin.x,
```

          y: frame.origin.y + (i + 1) * ROW_WITH_BORDER_HEIGHT - BORDER_SIZE,

```
        },
```
```
        size: {
```
```
          width: frame.size.width,
```
```
          height: BORDER_SIZE,
```
```
        },
```
```
      };
```

      if (rectIntersectsRect(borderFrame, visibleArea)) {

        const borderDrawableRect = intersectionOfRects(

```
          borderFrame,
```
```
          visibleArea,
```
```
        );
```

        context.fillStyle = COLORS.REACT_WORK_BORDER;

```
        context.fillRect(
```
```
          borderDrawableRect.origin.x,
```
```
          borderDrawableRect.origin.y,
```

          borderDrawableRect.size.width,

          borderDrawableRect.size.height,

```
        );
```
```
      }
```
```
    }
```
```
  }
```
```
  /**
```
```
   * @private
```
```
   */
```

  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {

    const {frame, _intrinsicSize, onHover, visibleArea} = this;

```
    if (!onHover) {
```
```
      return;
```
```
    }
```

    const {location} = interaction.payload;

    if (!rectContainsPoint(location, visibleArea)) {

```
      onHover(null);
```
```
      return;
```
```
    }
```

    const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);

    const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);

    const adjustedCanvasMouseY = location.y - frame.origin.y;

    const depth = Math.floor(adjustedCanvasMouseY / ROW_WITH_BORDER_HEIGHT);

    const suspenseEventsAtDepth = this._depthToSuspenseEvent.get(depth);

```
    if (suspenseEventsAtDepth) {
```

      // Find the event being hovered over.

      for (let index = suspenseEventsAtDepth.length - 1; index >= 0; index--) {

        const suspenseEvent = suspenseEventsAtDepth[index];

        const {duration, timestamp} = suspenseEvent;

```
        if (duration === null) {
```

          const timestampAllowance = widthToDuration(

            PENDING_SUSPENSE_EVENT_SIZE / 2,

```
            scaleFactor,
```
```
          );
```
```
          if (
```

            timestamp - timestampAllowance <= hoverTimestamp &&

            hoverTimestamp <= timestamp + timestampAllowance

```
          ) {
```

            this.currentCursor = 'context-menu';

            viewRefs.hoveredView = this;

```
            onHover(suspenseEvent);
```
```
            return;
```
```
          }
```
```
        } else if (
```

          hoverTimestamp >= timestamp &&

          hoverTimestamp <= timestamp + duration

```
        ) {
```

          this.currentCursor = 'context-menu';

```
          viewRefs.hoveredView = this;
```
```
          onHover(suspenseEvent);
```
```
          return;
```
```
        }
```
```
      }
```
```
    }
```
```
    onHover(null);
```
```
  }
```

  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {

```
    switch (interaction.type) {
```
```
      case 'mousemove':
```

        this._handleMouseMove(interaction, viewRefs);

```
        break;
```
```
    }
```
```
  }
```
```
}
```