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

SidebarCommitInfo.js — react Source File

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

File javascript BabelCompiler Validation 8 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  a1b99932_7927_263d_aa52_4f1dbce5079e["SidebarCommitInfo.js"]
  6c4f87a5_052e_5ad2_3388_1e4392b92a53["ProfilerContext.js"]
  a1b99932_7927_263d_aa52_4f1dbce5079e --> 6c4f87a5_052e_5ad2_3388_1e4392b92a53
  d6e62301_2363_364e_b031_c314353bac29["Updaters.js"]
  a1b99932_7927_263d_aa52_4f1dbce5079e --> d6e62301_2363_364e_b031_c314353bac29
  1df7dc91_6c23_7791_ded3_c6102c720a3d["Updaters"]
  a1b99932_7927_263d_aa52_4f1dbce5079e --> 1df7dc91_6c23_7791_ded3_c6102c720a3d
  0f941e70_3fdb_aa42_7939_2878d5d4125b["utils.js"]
  a1b99932_7927_263d_aa52_4f1dbce5079e --> 0f941e70_3fdb_aa42_7939_2878d5d4125b
  913bb343_55ea_f1b8_08f5_b75cb0a92b76["context.js"]
  a1b99932_7927_263d_aa52_4f1dbce5079e --> 913bb343_55ea_f1b8_08f5_b75cb0a92b76
  9a35328e_d36f_c6be_c574_b617a15cc7b2["CommitTreeBuilder.js"]
  a1b99932_7927_263d_aa52_4f1dbce5079e --> 9a35328e_d36f_c6be_c574_b617a15cc7b2
  65055237_22b2_2e5c_75a8_fcabd25cc676["SidebarCommitInfo.css"]
  a1b99932_7927_263d_aa52_4f1dbce5079e --> 65055237_22b2_2e5c_75a8_fcabd25cc676
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  a1b99932_7927_263d_aa52_4f1dbce5079e --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  2e59ff66_9c56_6e37_8843_8e474e6b0d70["Profiler.js"]
  2e59ff66_9c56_6e37_8843_8e474e6b0d70 --> a1b99932_7927_263d_aa52_4f1dbce5079e
  style a1b99932_7927_263d_aa52_4f1dbce5079e 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} from 'react';
import {ProfilerContext} from './ProfilerContext';
import Updaters from './Updaters';
import {formatDuration, formatTime} from './utils';
import {StoreContext} from '../context';
import {getCommitTree} from './CommitTreeBuilder';

import styles from './SidebarCommitInfo.css';

export type Props = {};

export default function SidebarCommitInfo(_: Props): React.Node {
  const {selectedCommitIndex, rootID} = useContext(ProfilerContext);

  const {profilerStore} = useContext(StoreContext);

  if (rootID === null || selectedCommitIndex === null) {
    return <div className={styles.NothingSelected}>Nothing selected</div>;
  }

  const {
    duration,
    effectDuration,
    passiveEffectDuration,
    priorityLevel,
    timestamp,
    updaters,
  } = profilerStore.getCommitData(rootID, selectedCommitIndex);

  const hasCommitPhaseDurations =
    effectDuration !== null || passiveEffectDuration !== null;

  const commitTree =
    updaters !== null
      ? getCommitTree({
          commitIndex: selectedCommitIndex,
          profilerStore,
          rootID,
        })
      : null;

  return (
    <Fragment>
      <div className={styles.Toolbar}>Commit information</div>
      <div className={styles.Content}>
        <ul className={styles.List}>
          {priorityLevel !== null && (
            <li className={styles.ListItem}>
              <label className={styles.Label}>Priority</label>:{' '}
              <span className={styles.Value}>{priorityLevel}</span>
            </li>
          )}
          <li className={styles.ListItem}>
            <label className={styles.Label}>Committed at</label>:{' '}
            <span className={styles.Value}>{formatTime(timestamp)}s</span>
          </li>

          {!hasCommitPhaseDurations && (
            <li className={styles.ListItem}>
              <label className={styles.Label}>Render duration</label>:{' '}
              <span className={styles.Value}>{formatDuration(duration)}ms</span>
            </li>
          )}

          {hasCommitPhaseDurations && (
            <li className={styles.ListItem}>
              <label className={styles.Label}>Durations</label>
              <ul className={styles.DurationsList}>
                <li className={styles.DurationsListItem}>
                  <label className={styles.Label}>Render</label>:{' '}
                  <span className={styles.Value}>
                    {formatDuration(duration)}ms
                  </span>
                </li>
                {effectDuration !== null && (
                  <li className={styles.DurationsListItem}>
                    <label className={styles.Label}>Layout effects</label>:{' '}
                    <span className={styles.Value}>
                      {formatDuration(effectDuration)}ms
                    </span>
                  </li>
                )}
                {passiveEffectDuration !== null && (
                  <li className={styles.DurationsListItem}>
                    <label className={styles.Label}>Passive effects</label>:{' '}
                    <span className={styles.Value}>
                      {formatDuration(passiveEffectDuration)}ms
                    </span>
                  </li>
                )}
              </ul>
            </li>
          )}

          {updaters !== null && commitTree !== null && (
            <li className={styles.ListItem}>
              <label className={styles.Label}>What caused this update</label>?
              <Updaters commitTree={commitTree} updaters={updaters} />
            </li>
          )}
        </ul>
      </div>
    </Fragment>
  );
}

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does SidebarCommitInfo.js do?
SidebarCommitInfo.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 SidebarCommitInfo.js?
SidebarCommitInfo.js defines 1 function(s): SidebarCommitInfo.
What does SidebarCommitInfo.js depend on?
SidebarCommitInfo.js imports 8 module(s): CommitTreeBuilder.js, ProfilerContext.js, SidebarCommitInfo.css, Updaters, Updaters.js, context.js, react, utils.js.
What files import SidebarCommitInfo.js?
SidebarCommitInfo.js is imported by 1 file(s): Profiler.js.
Where is SidebarCommitInfo.js in the architecture?
SidebarCommitInfo.js is located at packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.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