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

NativeEventsView.js — react Source File

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

File javascript BabelCompiler 12 imports

Entity Profile

Dependency Diagram

graph LR
  259c9bd5_8e3e_fcc5_0448_afc1cd9d1e73["NativeEventsView.js"]
  20cc2065_4b5b_fd6b_be12_28f36b0ff4cf["types.js"]
  259c9bd5_8e3e_fcc5_0448_afc1cd9d1e73 --> 20cc2065_4b5b_fd6b_be12_28f36b0ff4cf
  bbc225e1_d450_ae58_6679_9240ebe54628["index.js"]
  259c9bd5_8e3e_fcc5_0448_afc1cd9d1e73 --> bbc225e1_d450_ae58_6679_9240ebe54628
  e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3["positioning.js"]
  259c9bd5_8e3e_fcc5_0448_afc1cd9d1e73 --> e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3
  6743acc7_a552_31bd_d8df_67b4ec27ba6d["durationToWidth"]
  259c9bd5_8e3e_fcc5_0448_afc1cd9d1e73 --> 6743acc7_a552_31bd_d8df_67b4ec27ba6d
  6fe722ba_3051_6ecf_abe3_62a190c3ad25["positioningScaleFactor"]
  259c9bd5_8e3e_fcc5_0448_afc1cd9d1e73 --> 6fe722ba_3051_6ecf_abe3_62a190c3ad25
  a1e0fb75_d73e_2a52_2e38_23e1f70979f8["positionToTimestamp"]
  259c9bd5_8e3e_fcc5_0448_afc1cd9d1e73 --> a1e0fb75_d73e_2a52_2e38_23e1f70979f8
  83465e3e_5308_9ddc_a12b_a84d78f1c10a["timestampToPosition"]
  259c9bd5_8e3e_fcc5_0448_afc1cd9d1e73 --> 83465e3e_5308_9ddc_a12b_a84d78f1c10a
  021281ec_8833_1644_b4c0_b06b07634697["text.js"]
  259c9bd5_8e3e_fcc5_0448_afc1cd9d1e73 --> 021281ec_8833_1644_b4c0_b06b07634697
  1d4e7b93_85d0_def6_42c9_e20824e49731["drawText"]
  259c9bd5_8e3e_fcc5_0448_afc1cd9d1e73 --> 1d4e7b93_85d0_def6_42c9_e20824e49731
  f4cf9100_74bc_5445_ffb5_84c37b555dd3["formatting.js"]
  259c9bd5_8e3e_fcc5_0448_afc1cd9d1e73 --> f4cf9100_74bc_5445_ffb5_84c37b555dd3
  7a7bab2a_0762_eb64_07af_7551fee380d1["formatDuration"]
  259c9bd5_8e3e_fcc5_0448_afc1cd9d1e73 --> 7a7bab2a_0762_eb64_07af_7551fee380d1
  eab2f8f4_2e4c_8e75_87d9_c7d9b524affb["constants.js"]
  259c9bd5_8e3e_fcc5_0448_afc1cd9d1e73 --> eab2f8f4_2e4c_8e75_87d9_c7d9b524affb
  style 259c9bd5_8e3e_fcc5_0448_afc1cd9d1e73 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 {NativeEvent, TimelineData} from '../types';
import type {
  Interaction,
  IntrinsicSize,
  MouseMoveInteraction,
  Rect,
  ViewRefs,
} from '../view-base';

import {
  durationToWidth,
  positioningScaleFactor,
  positionToTimestamp,
  timestampToPosition,
} from './utils/positioning';
import {drawText} from './utils/text';
import {formatDuration} from '../utils/formatting';
import {
  View,
  Surface,
  rectContainsPoint,
  rectIntersectsRect,
  intersectionOfRects,
} from '../view-base';
import {COLORS, NATIVE_EVENT_HEIGHT, BORDER_SIZE} from './constants';

const ROW_WITH_BORDER_HEIGHT = NATIVE_EVENT_HEIGHT + BORDER_SIZE;

export class NativeEventsView extends View {
  _depthToNativeEvent: Map<number, NativeEvent[]>;
  _hoveredEvent: NativeEvent | null = null;
  _intrinsicSize: IntrinsicSize;
  _maxDepth: number = 0;
  _profilerData: TimelineData;

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

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

    this._profilerData = profilerData;

    this._performPreflightComputations();
  }

  _performPreflightComputations() {
    this._depthToNativeEvent = new Map();

    const {duration, nativeEvents} = this._profilerData;

    nativeEvents.forEach(event => {
// ... (200 more lines)

Domain

Dependencies

Source

Frequently Asked Questions

What does NativeEventsView.js do?
NativeEventsView.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain.
What does NativeEventsView.js depend on?
NativeEventsView.js imports 12 module(s): constants.js, drawText, durationToWidth, formatDuration, formatting.js, index.js, positionToTimestamp, positioning.js, and 4 more.
Where is NativeEventsView.js in the architecture?
NativeEventsView.js is located at packages/react-devtools-timeline/src/content-views/NativeEventsView.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