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

SidebarSelectedFiberInfo.js — react Source File

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

File javascript BabelCompiler Validation 13 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  05d8745f_e91f_f824_2d34_e3be3fd76a6c["SidebarSelectedFiberInfo.js"]
  5e16f57b_1380_519b_fff9_378869430fab["WhatChanged.js"]
  05d8745f_e91f_f824_2d34_e3be3fd76a6c --> 5e16f57b_1380_519b_fff9_378869430fab
  a8ba359b_010b_f4bf_4c0f_5d6da6d37ad9["WhatChanged"]
  05d8745f_e91f_f824_2d34_e3be3fd76a6c --> a8ba359b_010b_f4bf_4c0f_5d6da6d37ad9
  6c4f87a5_052e_5ad2_3388_1e4392b92a53["ProfilerContext.js"]
  05d8745f_e91f_f824_2d34_e3be3fd76a6c --> 6c4f87a5_052e_5ad2_3388_1e4392b92a53
  0f941e70_3fdb_aa42_7939_2878d5d4125b["utils.js"]
  05d8745f_e91f_f824_2d34_e3be3fd76a6c --> 0f941e70_3fdb_aa42_7939_2878d5d4125b
  913bb343_55ea_f1b8_08f5_b75cb0a92b76["context.js"]
  05d8745f_e91f_f824_2d34_e3be3fd76a6c --> 913bb343_55ea_f1b8_08f5_b75cb0a92b76
  f9049b08_60f8_abce_a6a6_153f88447124["Button.js"]
  05d8745f_e91f_f824_2d34_e3be3fd76a6c --> f9049b08_60f8_abce_a6a6_153f88447124
  f71ee326_17f0_7db4_4178_2763fb1c2ad1["Button"]
  05d8745f_e91f_f824_2d34_e3be3fd76a6c --> f71ee326_17f0_7db4_4178_2763fb1c2ad1
  9f39024f_b905_9b0f_2fc7_e24785732638["ButtonIcon.js"]
  05d8745f_e91f_f824_2d34_e3be3fd76a6c --> 9f39024f_b905_9b0f_2fc7_e24785732638
  4690d9c0_cb81_9593_7817_f9e61a49f9e7["ButtonIcon"]
  05d8745f_e91f_f824_2d34_e3be3fd76a6c --> 4690d9c0_cb81_9593_7817_f9e61a49f9e7
  d5989364_e16c_e349_6082_7c3e50da7772["InspectedElementBadges.js"]
  05d8745f_e91f_f824_2d34_e3be3fd76a6c --> d5989364_e16c_e349_6082_7c3e50da7772
  96fe9a6e_9e70_bef0_7ce0_b2431ac09b94["InspectedElementBadges"]
  05d8745f_e91f_f824_2d34_e3be3fd76a6c --> 96fe9a6e_9e70_bef0_7ce0_b2431ac09b94
  a73e4285_f1d5_57e0_d2b5_797ee5495b4f["SidebarSelectedFiberInfo.css"]
  05d8745f_e91f_f824_2d34_e3be3fd76a6c --> a73e4285_f1d5_57e0_d2b5_797ee5495b4f
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  05d8745f_e91f_f824_2d34_e3be3fd76a6c --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  2e59ff66_9c56_6e37_8843_8e474e6b0d70["Profiler.js"]
  2e59ff66_9c56_6e37_8843_8e474e6b0d70 --> 05d8745f_e91f_f824_2d34_e3be3fd76a6c
  style 05d8745f_e91f_f824_2d34_e3be3fd76a6c 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 * as React from 'react';
import {Fragment, useContext, useEffect, useRef} from 'react';

import WhatChanged from './WhatChanged';
import {ProfilerContext} from './ProfilerContext';
import {formatDuration, formatTime} from './utils';
import {StoreContext} from '../context';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import InspectedElementBadges from '../Components/InspectedElementBadges';

import styles from './SidebarSelectedFiberInfo.css';

export default function SidebarSelectedFiberInfo(): React.Node {
  const {profilerStore} = useContext(StoreContext);
  const {
    rootID,
    selectCommitIndex,
    selectedCommitIndex,
    selectedFiberID,
    selectedFiberName,
    selectFiber,
  } = useContext(ProfilerContext);
  const {profilingCache} = profilerStore;
  const selectedListItemRef = useRef<HTMLElement | null>(null);

  useEffect(() => {
    const selectedElement = selectedListItemRef.current;
    if (
      selectedElement !== null &&
      // $FlowFixMe[method-unbinding]
      typeof selectedElement.scrollIntoView === 'function'
    ) {
      selectedElement.scrollIntoView({block: 'nearest', inline: 'nearest'});
    }
  }, [selectedCommitIndex]);

  if (
    selectedFiberID === null ||
    rootID === null ||
    selectedCommitIndex === null
  ) {
    return null;
  }

  const commitIndices = profilingCache.getFiberCommits({
    fiberID: selectedFiberID,
    rootID: rootID,
  });

  const {nodes} = profilingCache.getCommitTree({
// ... (91 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does SidebarSelectedFiberInfo.js do?
SidebarSelectedFiberInfo.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 SidebarSelectedFiberInfo.js?
SidebarSelectedFiberInfo.js defines 1 function(s): SidebarSelectedFiberInfo.
What does SidebarSelectedFiberInfo.js depend on?
SidebarSelectedFiberInfo.js imports 13 module(s): Button, Button.js, ButtonIcon, ButtonIcon.js, InspectedElementBadges, InspectedElementBadges.js, ProfilerContext.js, SidebarSelectedFiberInfo.css, and 5 more.
What files import SidebarSelectedFiberInfo.js?
SidebarSelectedFiberInfo.js is imported by 1 file(s): Profiler.js.
Where is SidebarSelectedFiberInfo.js in the architecture?
SidebarSelectedFiberInfo.js is located at packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.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