Home / File/ CommitFlamegraph.js — react Source File

CommitFlamegraph.js — react Source File

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

File javascript BabelCompiler Validation 19 imports 2 dependents 5 functions

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

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