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

ComponentMeasuresView.js — react Source File

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

File javascript BabelCompiler 12 imports

Entity Profile

Dependency Diagram

graph LR
  264bd2ad_e2e5_86fa_8a9c_741f2a953c2f["ComponentMeasuresView.js"]
  20cc2065_4b5b_fd6b_be12_28f36b0ff4cf["types.js"]
  264bd2ad_e2e5_86fa_8a9c_741f2a953c2f --> 20cc2065_4b5b_fd6b_be12_28f36b0ff4cf
  bbc225e1_d450_ae58_6679_9240ebe54628["index.js"]
  264bd2ad_e2e5_86fa_8a9c_741f2a953c2f --> bbc225e1_d450_ae58_6679_9240ebe54628
  e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3["positioning.js"]
  264bd2ad_e2e5_86fa_8a9c_741f2a953c2f --> e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3
  6743acc7_a552_31bd_d8df_67b4ec27ba6d["durationToWidth"]
  264bd2ad_e2e5_86fa_8a9c_741f2a953c2f --> 6743acc7_a552_31bd_d8df_67b4ec27ba6d
  6fe722ba_3051_6ecf_abe3_62a190c3ad25["positioningScaleFactor"]
  264bd2ad_e2e5_86fa_8a9c_741f2a953c2f --> 6fe722ba_3051_6ecf_abe3_62a190c3ad25
  a1e0fb75_d73e_2a52_2e38_23e1f70979f8["positionToTimestamp"]
  264bd2ad_e2e5_86fa_8a9c_741f2a953c2f --> a1e0fb75_d73e_2a52_2e38_23e1f70979f8
  83465e3e_5308_9ddc_a12b_a84d78f1c10a["timestampToPosition"]
  264bd2ad_e2e5_86fa_8a9c_741f2a953c2f --> 83465e3e_5308_9ddc_a12b_a84d78f1c10a
  021281ec_8833_1644_b4c0_b06b07634697["text.js"]
  264bd2ad_e2e5_86fa_8a9c_741f2a953c2f --> 021281ec_8833_1644_b4c0_b06b07634697
  1d4e7b93_85d0_def6_42c9_e20824e49731["drawText"]
  264bd2ad_e2e5_86fa_8a9c_741f2a953c2f --> 1d4e7b93_85d0_def6_42c9_e20824e49731
  f4cf9100_74bc_5445_ffb5_84c37b555dd3["formatting.js"]
  264bd2ad_e2e5_86fa_8a9c_741f2a953c2f --> f4cf9100_74bc_5445_ffb5_84c37b555dd3
  7a7bab2a_0762_eb64_07af_7551fee380d1["formatDuration"]
  264bd2ad_e2e5_86fa_8a9c_741f2a953c2f --> 7a7bab2a_0762_eb64_07af_7551fee380d1
  eab2f8f4_2e4c_8e75_87d9_c7d9b524affb["constants.js"]
  264bd2ad_e2e5_86fa_8a9c_741f2a953c2f --> eab2f8f4_2e4c_8e75_87d9_c7d9b524affb
  style 264bd2ad_e2e5_86fa_8a9c_741f2a953c2f 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 {ReactComponentMeasure, TimelineData, ViewState} 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 {BORDER_SIZE, COLORS, NATIVE_EVENT_HEIGHT} from './constants';

const ROW_WITH_BORDER_HEIGHT = NATIVE_EVENT_HEIGHT + BORDER_SIZE;

export class ComponentMeasuresView extends View {
  _cachedSearchMatches: Map<string, boolean>;
  _cachedSearchRegExp: RegExp | null = null;
  _hoveredComponentMeasure: ReactComponentMeasure | null = null;
  _intrinsicSize: IntrinsicSize;
  _profilerData: TimelineData;
  _viewState: ViewState;

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

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

    this._profilerData = profilerData;
    this._viewState = viewState;

    this._cachedSearchMatches = new Map();
    this._cachedSearchRegExp = null;
// ... (242 more lines)

Domain

Dependencies

Source

Frequently Asked Questions

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