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

CommitFlamegraphListItem.js — react Source File

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

File javascript BabelCompiler Validation 10 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  6d32cfc6_78ff_92b2_0a33_092cde10d395["CommitFlamegraphListItem.js"]
  f14bbaea_a3f1_245b_696c_0c4d0bd624c7["constants.js"]
  6d32cfc6_78ff_92b2_0a33_092cde10d395 --> f14bbaea_a3f1_245b_696c_0c4d0bd624c7
  0f941e70_3fdb_aa42_7939_2878d5d4125b["utils.js"]
  6d32cfc6_78ff_92b2_0a33_092cde10d395 --> 0f941e70_3fdb_aa42_7939_2878d5d4125b
  56bcba00_c929_183d_07ac_24aeb71afa91["ChartNode.js"]
  6d32cfc6_78ff_92b2_0a33_092cde10d395 --> 56bcba00_c929_183d_07ac_24aeb71afa91
  b359961f_cc11_89c8_9f4d_ba4c236458c1["ChartNode"]
  6d32cfc6_78ff_92b2_0a33_092cde10d395 --> b359961f_cc11_89c8_9f4d_ba4c236458c1
  5996f1e4_af81_a51b_84bc_175bfba4f818["SettingsContext.js"]
  6d32cfc6_78ff_92b2_0a33_092cde10d395 --> 5996f1e4_af81_a51b_84bc_175bfba4f818
  9d7f3d0b_1959_a3f3_e24e_821787aa2f54["FlamegraphChartBuilder.js"]
  6d32cfc6_78ff_92b2_0a33_092cde10d395 --> 9d7f3d0b_1959_a3f3_e24e_821787aa2f54
  54e7a598_e83a_4b14_3104_1fa62a034c31["CommitFlamegraph.js"]
  6d32cfc6_78ff_92b2_0a33_092cde10d395 --> 54e7a598_e83a_4b14_3104_1fa62a034c31
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  6d32cfc6_78ff_92b2_0a33_092cde10d395 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  74ef1e61_51ba_b12a_3785_620fbf571ab2["react-window"]
  6d32cfc6_78ff_92b2_0a33_092cde10d395 --> 74ef1e61_51ba_b12a_3785_620fbf571ab2
  ebb48597_9981_bb7d_08db_b9fe29a0f62e["SyntheticEvent"]
  6d32cfc6_78ff_92b2_0a33_092cde10d395 --> ebb48597_9981_bb7d_08db_b9fe29a0f62e
  54e7a598_e83a_4b14_3104_1fa62a034c31["CommitFlamegraph.js"]
  54e7a598_e83a_4b14_3104_1fa62a034c31 --> 6d32cfc6_78ff_92b2_0a33_092cde10d395
  style 6d32cfc6_78ff_92b2_0a33_092cde10d395 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, memo, useCallback, useContext} from 'react';
import {areEqual} from 'react-window';
import {barWidthThreshold} from './constants';
import {getGradientColor} from './utils';
import ChartNode from './ChartNode';
import {SettingsContext} from '../Settings/SettingsContext';

import type {ChartNode as ChartNodeType} from './FlamegraphChartBuilder';
import type {ItemData} from './CommitFlamegraph';
import typeof {SyntheticMouseEvent} from 'react-dom-bindings/src/events/SyntheticEvent';

type Props = {
  data: ItemData,
  index: number,
  style: Object,
  ...
};

function CommitFlamegraphListItem({data, index, style}: Props): React.Node {
  const {
    chartData,
    onElementMouseEnter,
    onElementMouseLeave,
    scaleX,
    selectedChartNode,
    selectedChartNodeIndex,
    selectFiber,
    width,
  } = data;
  const {renderPathNodes, maxSelfDuration, rows} = chartData;

  const {lineHeight} = useContext(SettingsContext);

  const handleClick = useCallback(
    (event: SyntheticMouseEvent, id: number, name: string) => {
      event.stopPropagation();
      selectFiber(id, name);
    },
    [selectFiber],
  );

  const handleMouseEnter = (nodeData: ChartNodeType) => {
    const {id, name} = nodeData;
    onElementMouseEnter({id, name});
  };

  const handleMouseLeave = () => {
    onElementMouseLeave();
  };

// ... (78 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does CommitFlamegraphListItem.js do?
CommitFlamegraphListItem.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 CommitFlamegraphListItem.js?
CommitFlamegraphListItem.js defines 1 function(s): CommitFlamegraphListItem.
What does CommitFlamegraphListItem.js depend on?
CommitFlamegraphListItem.js imports 10 module(s): ChartNode, ChartNode.js, CommitFlamegraph.js, FlamegraphChartBuilder.js, SettingsContext.js, SyntheticEvent, constants.js, react, and 2 more.
What files import CommitFlamegraphListItem.js?
CommitFlamegraphListItem.js is imported by 1 file(s): CommitFlamegraph.js.
Where is CommitFlamegraphListItem.js in the architecture?
CommitFlamegraphListItem.js is located at packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.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