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

FlamechartView.js — react Source File

Architecture documentation for FlamechartView.js, a javascript file in the react codebase. 15 imports, 0 dependents.

File javascript BabelCompiler Validation 15 imports 3 functions 1 classes

Entity Profile

Dependency Diagram

graph LR
  d08702f1_e022_2394_00ee_ac0a9c33e2de["FlamechartView.js"]
  20cc2065_4b5b_fd6b_be12_28f36b0ff4cf["types.js"]
  d08702f1_e022_2394_00ee_ac0a9c33e2de --> 20cc2065_4b5b_fd6b_be12_28f36b0ff4cf
  bbc225e1_d450_ae58_6679_9240ebe54628["index.js"]
  d08702f1_e022_2394_00ee_ac0a9c33e2de --> bbc225e1_d450_ae58_6679_9240ebe54628
  efac6299_4c18_f347_3941_cc54822e7b6f["moduleFilters.js"]
  d08702f1_e022_2394_00ee_ac0a9c33e2de --> efac6299_4c18_f347_3941_cc54822e7b6f
  4b8ff33d_f91f_6a04_31db_7d18423189ad["isInternalModule"]
  d08702f1_e022_2394_00ee_ac0a9c33e2de --> 4b8ff33d_f91f_6a04_31db_7d18423189ad
  e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3["positioning.js"]
  d08702f1_e022_2394_00ee_ac0a9c33e2de --> e39a99ae_faf3_afd9_4fc8_fa9a6210f1d3
  6743acc7_a552_31bd_d8df_67b4ec27ba6d["durationToWidth"]
  d08702f1_e022_2394_00ee_ac0a9c33e2de --> 6743acc7_a552_31bd_d8df_67b4ec27ba6d
  6fe722ba_3051_6ecf_abe3_62a190c3ad25["positioningScaleFactor"]
  d08702f1_e022_2394_00ee_ac0a9c33e2de --> 6fe722ba_3051_6ecf_abe3_62a190c3ad25
  83465e3e_5308_9ddc_a12b_a84d78f1c10a["timestampToPosition"]
  d08702f1_e022_2394_00ee_ac0a9c33e2de --> 83465e3e_5308_9ddc_a12b_a84d78f1c10a
  021281ec_8833_1644_b4c0_b06b07634697["text.js"]
  d08702f1_e022_2394_00ee_ac0a9c33e2de --> 021281ec_8833_1644_b4c0_b06b07634697
  1d4e7b93_85d0_def6_42c9_e20824e49731["drawText"]
  d08702f1_e022_2394_00ee_ac0a9c33e2de --> 1d4e7b93_85d0_def6_42c9_e20824e49731
  eab2f8f4_2e4c_8e75_87d9_c7d9b524affb["constants.js"]
  d08702f1_e022_2394_00ee_ac0a9c33e2de --> eab2f8f4_2e4c_8e75_87d9_c7d9b524affb
  e8b75ea1_4270_75d6_defb_16c2f1811aef["colors.js"]
  d08702f1_e022_2394_00ee_ac0a9c33e2de --> e8b75ea1_4270_75d6_defb_16c2f1811aef
  8dce7fa7_d4a5_40fd_6aca_a2ba5fa2692a["ColorGenerator"]
  d08702f1_e022_2394_00ee_ac0a9c33e2de --> 8dce7fa7_d4a5_40fd_6aca_a2ba5fa2692a
  9d0a0842_1d90_d4fe_53ab_4de526a1dc17["dimmedColor"]
  d08702f1_e022_2394_00ee_ac0a9c33e2de --> 9d0a0842_1d90_d4fe_53ab_4de526a1dc17
  style d08702f1_e022_2394_00ee_ac0a9c33e2de 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 {
  Flamechart,
  FlamechartStackFrame,
  FlamechartStackLayer,
  InternalModuleSourceToRanges,
} from '../types';
import type {
  Interaction,
  MouseMoveInteraction,
  Rect,
  Size,
  ViewRefs,
} from '../view-base';

import {
  BackgroundColorView,
  Surface,
  View,
  layeredLayout,
  rectContainsPoint,
  intersectionOfRects,
  rectIntersectsRect,
  verticallyStackedLayout,
} from '../view-base';
import {isInternalModule} from './utils/moduleFilters';
import {
  durationToWidth,
  positioningScaleFactor,
  timestampToPosition,
} from './utils/positioning';
import {drawText} from './utils/text';
import {
  COLORS,
  FLAMECHART_FRAME_HEIGHT,
  COLOR_HOVER_DIM_DELTA,
  BORDER_SIZE,
} from './constants';
import {ColorGenerator, dimmedColor, hslaColorToString} from './utils/colors';

// Source: https://source.chromium.org/chromium/chromium/src/+/master:out/Debug/gen/devtools/timeline/TimelineUIUtils.js;l=2109;drc=fb32e928d79707a693351b806b8710b2f6b7d399
const colorGenerator = new ColorGenerator(
  {min: 30, max: 330},
  {min: 50, max: 80, count: 3},
  85,
);
colorGenerator.setColorForID('', {h: 43.6, s: 45.8, l: 90.6, a: 100});

function defaultHslaColorForStackFrame({scriptUrl}: FlamechartStackFrame) {
  return colorGenerator.colorForID(scriptUrl ?? '');
}

// ... (324 more lines)

Domain

Subdomains

Functions

Classes

Dependencies

Source

Frequently Asked Questions

What does FlamechartView.js do?
FlamechartView.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 FlamechartView.js?
FlamechartView.js defines 3 function(s): defaultColorForStackFrame, defaultHslaColorForStackFrame, hoverColorForStackFrame.
What does FlamechartView.js depend on?
FlamechartView.js imports 15 module(s): ColorGenerator, colors.js, constants.js, dimmedColor, drawText, durationToWidth, hslaColorToString, index.js, and 7 more.
Where is FlamechartView.js in the architecture?
FlamechartView.js is located at packages/react-devtools-timeline/src/content-views/FlamechartView.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-timeline/src/content-views).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free