react Architecture Docs
Home / File/ SuspenseEventsView.js — react Source File

SuspenseEventsView.js — react Source File

Architecture documentation for SuspenseEventsView.js, a javascript file in the react codebase. 13 imports, 0 dependents.

File javascript BabelCompiler 13 imports

Entity Profile

Dependency Diagram

graph LR
  8ef7c873_9e8e_ccdf_ed63_88c7224b1bac["SuspenseEventsView.js"]
  20cc2065_4b5b_fd6b_be12_28f36b0ff4cf["types.js"]
  8ef7c873_9e8e_ccdf_ed63_88c7224b1bac --> 20cc2065_4b5b_fd6b_be12_28f36b0ff4cf
  bbc225e1_d450_ae58_6679_9240ebe54628["index.js"]
  8ef7c873_9e8e_ccdf_ed63_88c7224b1bac --> bbc225e1_d450_ae58_6679_9240ebe54628
  e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3["positioning.js"]
  8ef7c873_9e8e_ccdf_ed63_88c7224b1bac --> e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3
  6743acc7_a552_31bd_d8df_67b4ec27ba6d["durationToWidth"]
  8ef7c873_9e8e_ccdf_ed63_88c7224b1bac --> 6743acc7_a552_31bd_d8df_67b4ec27ba6d
  6fe722ba_3051_6ecf_abe3_62a190c3ad25["positioningScaleFactor"]
  8ef7c873_9e8e_ccdf_ed63_88c7224b1bac --> 6fe722ba_3051_6ecf_abe3_62a190c3ad25
  a1e0fb75_d73e_2a52_2e38_23e1f70979f8["positionToTimestamp"]
  8ef7c873_9e8e_ccdf_ed63_88c7224b1bac --> a1e0fb75_d73e_2a52_2e38_23e1f70979f8
  83465e3e_5308_9ddc_a12b_a84d78f1c10a["timestampToPosition"]
  8ef7c873_9e8e_ccdf_ed63_88c7224b1bac --> 83465e3e_5308_9ddc_a12b_a84d78f1c10a
  25b9c762_593d_45b1_d8ca_eb9b3db001b9["widthToDuration"]
  8ef7c873_9e8e_ccdf_ed63_88c7224b1bac --> 25b9c762_593d_45b1_d8ca_eb9b3db001b9
  021281ec_8833_1644_b4c0_b06b07634697["text.js"]
  8ef7c873_9e8e_ccdf_ed63_88c7224b1bac --> 021281ec_8833_1644_b4c0_b06b07634697
  1d4e7b93_85d0_def6_42c9_e20824e49731["drawText"]
  8ef7c873_9e8e_ccdf_ed63_88c7224b1bac --> 1d4e7b93_85d0_def6_42c9_e20824e49731
  f4cf9100_74bc_5445_ffb5_84c37b555dd3["formatting.js"]
  8ef7c873_9e8e_ccdf_ed63_88c7224b1bac --> f4cf9100_74bc_5445_ffb5_84c37b555dd3
  7a7bab2a_0762_eb64_07af_7551fee380d1["formatDuration"]
  8ef7c873_9e8e_ccdf_ed63_88c7224b1bac --> 7a7bab2a_0762_eb64_07af_7551fee380d1
  eab2f8f4_2e4c_8e75_87d9_c7d9b524affb["constants.js"]
  8ef7c873_9e8e_ccdf_ed63_88c7224b1bac --> eab2f8f4_2e4c_8e75_87d9_c7d9b524affb
  style 8ef7c873_9e8e_ccdf_ed63_88c7224b1bac fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/**
 * 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();
  }
// ... (300 more lines)

Domain

Dependencies

Source

Frequently Asked Questions

What does SuspenseEventsView.js do?
SuspenseEventsView.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain.
What does SuspenseEventsView.js depend on?
SuspenseEventsView.js imports 13 module(s): constants.js, drawText, durationToWidth, formatDuration, formatting.js, index.js, positionToTimestamp, positioning.js, and 5 more.
Where is SuspenseEventsView.js in the architecture?
SuspenseEventsView.js is located at packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js (domain: BabelCompiler, directory: packages/react-devtools-timeline/src/content-views).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free