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

SidebarEventInfo.js — react Source File

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

File javascript BabelCompiler Validation 14 imports 1 dependents 3 functions

Entity Profile

Dependency Diagram

graph LR
  8a53e3b1_7d98_d6cb_d776_c4171cd9ac5f["SidebarEventInfo.js"]
  f9049b08_60f8_abce_a6a6_153f88447124["Button.js"]
  8a53e3b1_7d98_d6cb_d776_c4171cd9ac5f --> f9049b08_60f8_abce_a6a6_153f88447124
  f71ee326_17f0_7db4_4178_2763fb1c2ad1["Button"]
  8a53e3b1_7d98_d6cb_d776_c4171cd9ac5f --> f71ee326_17f0_7db4_4178_2763fb1c2ad1
  9f39024f_b905_9b0f_2fc7_e24785732638["ButtonIcon.js"]
  8a53e3b1_7d98_d6cb_d776_c4171cd9ac5f --> 9f39024f_b905_9b0f_2fc7_e24785732638
  4690d9c0_cb81_9593_7817_f9e61a49f9e7["ButtonIcon"]
  8a53e3b1_7d98_d6cb_d776_c4171cd9ac5f --> 4690d9c0_cb81_9593_7817_f9e61a49f9e7
  4d6a124e_fdc4_9da9_8ac7_85f75cd106fe["useOpenResource.js"]
  8a53e3b1_7d98_d6cb_d776_c4171cd9ac5f --> 4d6a124e_fdc4_9da9_8ac7_85f75cd106fe
  9f1b7477_10ba_b32d_5da0_ee90208bfb18["SidebarEventInfo.css"]
  8a53e3b1_7d98_d6cb_d776_c4171cd9ac5f --> 9f1b7477_10ba_b32d_5da0_ee90208bfb18
  68abd97e_17ac_d8a8_2d83_de72fc71c4a8["types"]
  8a53e3b1_7d98_d6cb_d776_c4171cd9ac5f --> 68abd97e_17ac_d8a8_2d83_de72fc71c4a8
  d8f20c67_f5fa_0f0a_c967_c41fd9ffce07["ReactTypes"]
  8a53e3b1_7d98_d6cb_d776_c4171cd9ac5f --> d8f20c67_f5fa_0f0a_c967_c41fd9ffce07
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  8a53e3b1_7d98_d6cb_d776_c4171cd9ac5f --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  02511792_3032_82be_67ac_e8a3f9d19220["TimelineContext"]
  8a53e3b1_7d98_d6cb_d776_c4171cd9ac5f --> 02511792_3032_82be_67ac_e8a3f9d19220
  8be67402_c895_7940_6b5a_b679e8174832["formatting"]
  8a53e3b1_7d98_d6cb_d776_c4171cd9ac5f --> 8be67402_c895_7940_6b5a_b679e8174832
  15ddbedd_95dc_5545_807f_882c0a98271f["utils"]
  8a53e3b1_7d98_d6cb_d776_c4171cd9ac5f --> 15ddbedd_95dc_5545_807f_882c0a98271f
  1e290487_2c6f_fbaf_7be9_e14d5df52457["clipboard-js"]
  8a53e3b1_7d98_d6cb_d776_c4171cd9ac5f --> 1e290487_2c6f_fbaf_7be9_e14d5df52457
  b69d8d17_a331_bd78_20f6_a9cb90ca08bf["withPermissionsCheck"]
  8a53e3b1_7d98_d6cb_d776_c4171cd9ac5f --> b69d8d17_a331_bd78_20f6_a9cb90ca08bf
  style 8a53e3b1_7d98_d6cb_d776_c4171cd9ac5f 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 {SchedulingEvent} from 'react-devtools-timeline/src/types';
import type {ReactFunctionLocation} from 'shared/ReactTypes';

import * as React from 'react';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import {useContext} from 'react';
import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
import {
  formatTimestamp,
  getSchedulingEventLabel,
} from 'react-devtools-timeline/src/utils/formatting';
import {stackToComponentLocations} from 'react-devtools-shared/src/devtools/utils';
import {copy} from 'clipboard-js';
import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';
import useOpenResource from '../useOpenResource';

import styles from './SidebarEventInfo.css';

export type Props = {};

type FunctionLocationProps = {
  location: ReactFunctionLocation,
  displayName: string,
};
function FunctionLocation({location, displayName}: FunctionLocationProps) {
  // TODO: We should support symbolication here as well, but
  // symbolicating the whole stack can be expensive
  const [canViewSource, viewSource] = useOpenResource(location, null);
  return (
    <li>
      <Button
        className={
          canViewSource ? styles.ClickableSource : styles.UnclickableSource
        }
        disabled={!canViewSource}
        onClick={viewSource}>
        {displayName}
      </Button>
    </li>
  );
}

type SchedulingEventProps = {
  eventInfo: SchedulingEvent,
};

function SchedulingEventInfo({eventInfo}: SchedulingEventProps) {
  const {componentName, timestamp} = eventInfo;
  const componentStack = eventInfo.componentStack || null;

// ... (67 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does SidebarEventInfo.js do?
SidebarEventInfo.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 SidebarEventInfo.js?
SidebarEventInfo.js defines 3 function(s): FunctionLocation, SchedulingEventInfo, SidebarEventInfo.
What does SidebarEventInfo.js depend on?
SidebarEventInfo.js imports 14 module(s): Button, Button.js, ButtonIcon, ButtonIcon.js, ReactTypes, SidebarEventInfo.css, TimelineContext, clipboard-js, and 6 more.
What files import SidebarEventInfo.js?
SidebarEventInfo.js is imported by 1 file(s): Profiler.js.
Where is SidebarEventInfo.js in the architecture?
SidebarEventInfo.js is located at packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-shared/src/devtools/views/Profiler).

Analyze Your Own Codebase

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

Try Supermodel Free