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

CanvasPage.js — react Source File

Architecture documentation for CanvasPage.js, a javascript file in the react codebase. 18 imports, 1 dependents.

File javascript BabelCompiler Validation 18 imports 1 dependents 2 functions

Entity Profile

Dependency Diagram

graph LR
  d5e5a241_0d88_22ae_6561_9211ad78e796["CanvasPage.js"]
  bbc225e1_d450_ae58_6679_9240ebe54628["index.js"]
  d5e5a241_0d88_22ae_6561_9211ad78e796 --> bbc225e1_d450_ae58_6679_9240ebe54628
  20cc2065_4b5b_fd6b_be12_28f36b0ff4cf["types.js"]
  d5e5a241_0d88_22ae_6561_9211ad78e796 --> 20cc2065_4b5b_fd6b_be12_28f36b0ff4cf
  26b975cb_9771_494c_1177_61d461583cdf["index.js"]
  d5e5a241_0d88_22ae_6561_9211ad78e796 --> 26b975cb_9771_494c_1177_61d461583cdf
  eab2f8f4_2e4c_8e75_87d9_c7d9b524affb["constants.js"]
  d5e5a241_0d88_22ae_6561_9211ad78e796 --> eab2f8f4_2e4c_8e75_87d9_c7d9b524affb
  d0e34df5_54e0_bd63_7394_3bfe61a4c376["scrollState.js"]
  d5e5a241_0d88_22ae_6561_9211ad78e796 --> d0e34df5_54e0_bd63_7394_3bfe61a4c376
  f077803e_adfb_e522_43d4_7b720fa272fa["clampState"]
  d5e5a241_0d88_22ae_6561_9211ad78e796 --> f077803e_adfb_e522_43d4_7b720fa272fa
  73b69eb1_1def_ae18_854c_a93b29fe5e7d["moveStateToRange"]
  d5e5a241_0d88_22ae_6561_9211ad78e796 --> 73b69eb1_1def_ae18_854c_a93b29fe5e7d
  57dc23c0_c74d_e09e_ad1f_116cb590a38c["EventTooltip.js"]
  d5e5a241_0d88_22ae_6561_9211ad78e796 --> 57dc23c0_c74d_e09e_ad1f_116cb590a38c
  837ad1c5_fe7d_611e_754a_687cb02d2c1d["EventTooltip"]
  d5e5a241_0d88_22ae_6561_9211ad78e796 --> 837ad1c5_fe7d_611e_754a_687cb02d2c1d
  d587018b_e3d9_bf04_a734_058fe7e6a39c["constants.js"]
  d5e5a241_0d88_22ae_6561_9211ad78e796 --> d587018b_e3d9_bf04_a734_058fe7e6a39c
  f222957d_5161_94da_3126_e94f7f8ded93["TimelineSearchContext.js"]
  d5e5a241_0d88_22ae_6561_9211ad78e796 --> f222957d_5161_94da_3126_e94f7f8ded93
  7b213c28_1e91_ab50_3fbc_02eaee967af5["TimelineContext.js"]
  d5e5a241_0d88_22ae_6561_9211ad78e796 --> 7b213c28_1e91_ab50_3fbc_02eaee967af5
  e0a3b260_ea80_6b59_5c7d_18081c4333a6["CanvasPageContextMenu.js"]
  d5e5a241_0d88_22ae_6561_9211ad78e796 --> e0a3b260_ea80_6b59_5c7d_18081c4333a6
  1962c520_14de_6efa_4ec0_669c5452228e["CanvasPageContextMenu"]
  d5e5a241_0d88_22ae_6561_9211ad78e796 --> 1962c520_14de_6efa_4ec0_669c5452228e
  style d5e5a241_0d88_22ae_6561_9211ad78e796 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 {Interaction, Point} from './view-base';
import type {ReactEventInfo, TimelineData, ViewState} from './types';

import * as React from 'react';
import {
  Fragment,
  useContext,
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
  useCallback,
} from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';

import {
  HorizontalPanAndZoomView,
  ResizableView,
  VerticalScrollOverflowView,
  Surface,
  VerticalScrollView,
  View,
  useCanvasInteraction,
  verticallyStackedLayout,
  zeroPoint,
} from './view-base';
import {
  ComponentMeasuresView,
  FlamechartView,
  NativeEventsView,
  NetworkMeasuresView,
  ReactMeasuresView,
  SchedulingEventsView,
  SnapshotsView,
  SuspenseEventsView,
  ThrownErrorsView,
  TimeAxisMarkersView,
  UserTimingMarksView,
} from './content-views';
import {COLORS} from './content-views/constants';
import {clampState, moveStateToRange} from './view-base/utils/scrollState';
import EventTooltip from './EventTooltip';
import {MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL} from './view-base/constants';
import {TimelineSearchContext} from './TimelineSearchContext';
import {TimelineContext} from './TimelineContext';
import CanvasPageContextMenu from './CanvasPageContextMenu';

import type {ContextMenuRef} from 'react-devtools-shared/src/devtools/ContextMenu/types';

import styles from './CanvasPage.css';

// ... (669 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does CanvasPage.js do?
CanvasPage.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Validation subdomain.
What functions are defined in CanvasPage.js?
CanvasPage.js defines 2 function(s): AutoSizedCanvas, CanvasPage.
What does CanvasPage.js depend on?
CanvasPage.js imports 18 module(s): CanvasPage.css, CanvasPageContextMenu, CanvasPageContextMenu.js, EventTooltip, EventTooltip.js, TimelineContext.js, TimelineSearchContext.js, clampState, and 10 more.
What files import CanvasPage.js?
CanvasPage.js is imported by 1 file(s): Timeline.js.
Where is CanvasPage.js in the architecture?
CanvasPage.js is located at packages/react-devtools-timeline/src/CanvasPage.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-timeline/src).

Analyze Your Own Codebase

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

Try Supermodel Free