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

SnapshotCommitList.js — react Source File

Architecture documentation for SnapshotCommitList.js, a javascript file in the react codebase. 11 imports, 2 dependents.

File javascript BabelCompiler Validation 11 imports 2 dependents 7 functions

Entity Profile

Dependency Diagram

graph LR
  76384bd4_08c7_de17_1f91_2937028def49["SnapshotCommitList.js"]
  98e7cbed_f4b4_9f35_838e_6e7cf3e5edcf["types.js"]
  76384bd4_08c7_de17_1f91_2937028def49 --> 98e7cbed_f4b4_9f35_838e_6e7cf3e5edcf
  f9d9b314_a982_02a0_eb8d_ad21d4bcbd3b["SnapshotCommitListItem.js"]
  76384bd4_08c7_de17_1f91_2937028def49 --> f9d9b314_a982_02a0_eb8d_ad21d4bcbd3b
  054078d9_66dc_847e_7622_7206154b8c56["SnapshotCommitListItem"]
  76384bd4_08c7_de17_1f91_2937028def49 --> 054078d9_66dc_847e_7622_7206154b8c56
  f14bbaea_a3f1_245b_696c_0c4d0bd624c7["constants.js"]
  76384bd4_08c7_de17_1f91_2937028def49 --> f14bbaea_a3f1_245b_696c_0c4d0bd624c7
  0f941e70_3fdb_aa42_7939_2878d5d4125b["utils.js"]
  76384bd4_08c7_de17_1f91_2937028def49 --> 0f941e70_3fdb_aa42_7939_2878d5d4125b
  67a53ff5_5364_e0e2_039c_5bb44dfc1bd6["Tooltip.js"]
  76384bd4_08c7_de17_1f91_2937028def49 --> 67a53ff5_5364_e0e2_039c_5bb44dfc1bd6
  18091250_4636_e404_3b72_076fbd80ff67["Tooltip"]
  76384bd4_08c7_de17_1f91_2937028def49 --> 18091250_4636_e404_3b72_076fbd80ff67
  c4b620a4_5bc4_bc19_7b72_97f9634c38f9["SnapshotCommitList.css"]
  76384bd4_08c7_de17_1f91_2937028def49 --> c4b620a4_5bc4_bc19_7b72_97f9634c38f9
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  76384bd4_08c7_de17_1f91_2937028def49 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  f65546dc_ff92_b2ac_782f_ea5ecec76804["react-virtualized-auto-sizer"]
  76384bd4_08c7_de17_1f91_2937028def49 --> f65546dc_ff92_b2ac_782f_ea5ecec76804
  74ef1e61_51ba_b12a_3785_620fbf571ab2["react-window"]
  76384bd4_08c7_de17_1f91_2937028def49 --> 74ef1e61_51ba_b12a_3785_620fbf571ab2
  f9d9b314_a982_02a0_eb8d_ad21d4bcbd3b["SnapshotCommitListItem.js"]
  f9d9b314_a982_02a0_eb8d_ad21d4bcbd3b --> 76384bd4_08c7_de17_1f91_2937028def49
  b350cf53_cbc3_d273_ad6c_5485a91ef713["SnapshotSelector.js"]
  b350cf53_cbc3_d273_ad6c_5485a91ef713 --> 76384bd4_08c7_de17_1f91_2937028def49
  style 76384bd4_08c7_de17_1f91_2937028def49 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 {CommitDataFrontend} from './types';

import * as React from 'react';
import {useEffect, useMemo, useRef, useState} from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import {FixedSizeList} from 'react-window';
import SnapshotCommitListItem from './SnapshotCommitListItem';
import {minBarWidth} from './constants';
import {formatDuration, formatTime} from './utils';
import Tooltip from './Tooltip';

import styles from './SnapshotCommitList.css';

export type ItemData = {
  commitTimes: Array<number>,
  filteredCommitIndices: Array<number>,
  maxDuration: number,
  selectedCommitIndex: number | null,
  selectedFilteredCommitIndex: number | null,
  selectCommitIndex: (index: number) => void,
  setHoveredCommitIndex: (index: number) => void,
  startCommitDrag: (newDragState: DragState) => void,
  totalDurations: Array<number>,
};

type Props = {
  commitData: $ReadOnlyArray<CommitDataFrontend>,
  commitTimes: Array<number>,
  filteredCommitIndices: Array<number>,
  selectedCommitIndex: number | null,
  selectedFilteredCommitIndex: number | null,
  selectCommitIndex: (index: number) => void,
  totalDurations: Array<number>,
};

export default function SnapshotCommitList({
  commitData,
  commitTimes,
  filteredCommitIndices,
  selectedCommitIndex,
  selectedFilteredCommitIndex,
  selectCommitIndex,
  totalDurations,
}: Props): React.Node {
  return (
    <AutoSizer>
      {({height, width}) => (
        <List
          commitData={commitData}
          commitTimes={commitTimes}
          height={height}
// ... (243 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does SnapshotCommitList.js do?
SnapshotCommitList.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 SnapshotCommitList.js?
SnapshotCommitList.js defines 7 function(s): ItemData.selectCommitIndex, ItemData.setHoveredCommitIndex, ItemData.startCommitDrag, List, ListProps.selectCommitIndex, SnapshotCommitList, type.selectCommitIndex.
What does SnapshotCommitList.js depend on?
SnapshotCommitList.js imports 11 module(s): SnapshotCommitList.css, SnapshotCommitListItem, SnapshotCommitListItem.js, Tooltip, Tooltip.js, constants.js, react, react-virtualized-auto-sizer, and 3 more.
What files import SnapshotCommitList.js?
SnapshotCommitList.js is imported by 2 file(s): SnapshotCommitListItem.js, SnapshotSelector.js.
Where is SnapshotCommitList.js in the architecture?
SnapshotCommitList.js is located at packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.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