CommitFlamegraph.js — react Source File
Architecture documentation for CommitFlamegraph.js, a javascript file in the react codebase. 19 imports, 2 dependents.
Entity Profile
Dependency Diagram
graph LR 54e7a598_e83a_4b14_3104_1fa62a034c31["CommitFlamegraph.js"] 6c4f87a5_052e_5ad2_3388_1e4392b92a53["ProfilerContext.js"] 54e7a598_e83a_4b14_3104_1fa62a034c31 --> 6c4f87a5_052e_5ad2_3388_1e4392b92a53 c15c0dcd_3042_bfe0_e269_e206def64f45["NoCommitData.js"] 54e7a598_e83a_4b14_3104_1fa62a034c31 --> c15c0dcd_3042_bfe0_e269_e206def64f45 30159f77_ec92_2e22_ad1c_4d1ec303aaff["NoCommitData"] 54e7a598_e83a_4b14_3104_1fa62a034c31 --> 30159f77_ec92_2e22_ad1c_4d1ec303aaff 6d32cfc6_78ff_92b2_0a33_092cde10d395["CommitFlamegraphListItem.js"] 54e7a598_e83a_4b14_3104_1fa62a034c31 --> 6d32cfc6_78ff_92b2_0a33_092cde10d395 8159aab7_7fe7_acb7_ac62_f220ff6da653["CommitFlamegraphListItem"] 54e7a598_e83a_4b14_3104_1fa62a034c31 --> 8159aab7_7fe7_acb7_ac62_f220ff6da653 38d38257_86b3_3154_4c21_7fbaf41be1cb["HoveredFiberInfo.js"] 54e7a598_e83a_4b14_3104_1fa62a034c31 --> 38d38257_86b3_3154_4c21_7fbaf41be1cb 26286214_bfec_a4fc_1a0f_5f10283eb543["HoveredFiberInfo"] 54e7a598_e83a_4b14_3104_1fa62a034c31 --> 26286214_bfec_a4fc_1a0f_5f10283eb543 0f941e70_3fdb_aa42_7939_2878d5d4125b["utils.js"] 54e7a598_e83a_4b14_3104_1fa62a034c31 --> 0f941e70_3fdb_aa42_7939_2878d5d4125b 315baf50_1028_51ca_a9c1_679c6a17ed98["hooks.js"] 54e7a598_e83a_4b14_3104_1fa62a034c31 --> 315baf50_1028_51ca_a9c1_679c6a17ed98 913bb343_55ea_f1b8_08f5_b75cb0a92b76["context.js"] 54e7a598_e83a_4b14_3104_1fa62a034c31 --> 913bb343_55ea_f1b8_08f5_b75cb0a92b76 5996f1e4_af81_a51b_84bc_175bfba4f818["SettingsContext.js"] 54e7a598_e83a_4b14_3104_1fa62a034c31 --> 5996f1e4_af81_a51b_84bc_175bfba4f818 67a53ff5_5364_e0e2_039c_5bb44dfc1bd6["Tooltip.js"] 54e7a598_e83a_4b14_3104_1fa62a034c31 --> 67a53ff5_5364_e0e2_039c_5bb44dfc1bd6 18091250_4636_e404_3b72_076fbd80ff67["Tooltip"] 54e7a598_e83a_4b14_3104_1fa62a034c31 --> 18091250_4636_e404_3b72_076fbd80ff67 d59b12b9_5476_73e9_d3ff_bb23162f8cd3["CommitFlamegraph.css"] 54e7a598_e83a_4b14_3104_1fa62a034c31 --> d59b12b9_5476_73e9_d3ff_bb23162f8cd3 style 54e7a598_e83a_4b14_3104_1fa62a034c31 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 {forwardRef, useCallback, useContext, useMemo, useState} from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import {FixedSizeList} from 'react-window';
import {ProfilerContext} from './ProfilerContext';
import NoCommitData from './NoCommitData';
import CommitFlamegraphListItem from './CommitFlamegraphListItem';
import HoveredFiberInfo from './HoveredFiberInfo';
import {scale} from './utils';
import {useHighlightHostInstance} from '../hooks';
import {StoreContext} from '../context';
import {SettingsContext} from '../Settings/SettingsContext';
import Tooltip from './Tooltip';
import styles from './CommitFlamegraph.css';
import type {TooltipFiberData} from './HoveredFiberInfo';
import type {ChartData, ChartNode} from './FlamegraphChartBuilder';
import type {CommitTree} from './types';
export type ItemData = {
chartData: ChartData,
onElementMouseEnter: (fiberData: TooltipFiberData) => void,
onElementMouseLeave: () => void,
scaleX: (value: number, fallbackValue: number) => number,
selectedChartNode: ChartNode | null,
selectedChartNodeIndex: number,
selectFiber: (id: number | null, name: string | null) => void,
width: number,
};
export default function CommitFlamegraphAutoSizer(_: {}): React.Node {
const {profilerStore} = useContext(StoreContext);
const {rootID, selectedCommitIndex, selectFiber} =
useContext(ProfilerContext);
const {profilingCache} = profilerStore;
const deselectCurrentFiber = useCallback(
(event: $FlowFixMe) => {
event.stopPropagation();
selectFiber(null, null);
},
[selectFiber],
);
let commitTree: CommitTree | null = null;
let chartData: ChartData | null = null;
if (selectedCommitIndex !== null) {
commitTree = profilingCache.getCommitTree({
commitIndex: selectedCommitIndex,
rootID: ((rootID: any): number),
// ... (151 more lines)
Domain
Subdomains
Functions
Dependencies
Imported By
Source
Frequently Asked Questions
What does CommitFlamegraph.js do?
CommitFlamegraph.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 CommitFlamegraph.js?
CommitFlamegraph.js defines 5 function(s): CommitFlamegraph, CommitFlamegraphAutoSizer, InnerElementType, ItemData.onElementMouseEnter, ItemData.onElementMouseLeave.
What does CommitFlamegraph.js depend on?
CommitFlamegraph.js imports 19 module(s): CommitFlamegraph.css, CommitFlamegraphListItem, CommitFlamegraphListItem.js, FlamegraphChartBuilder.js, HoveredFiberInfo, HoveredFiberInfo.js, NoCommitData, NoCommitData.js, and 11 more.
What files import CommitFlamegraph.js?
CommitFlamegraph.js is imported by 2 file(s): CommitFlamegraphListItem.js, Profiler.js.
Where is CommitFlamegraph.js in the architecture?
CommitFlamegraph.js is located at packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.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