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

utils.js — react Source File

Architecture documentation for utils.js, a javascript file in the react codebase. 5 imports, 13 dependents.

File javascript BabelCompiler 5 imports 13 dependents

Entity Profile

Dependency Diagram

graph LR
  0f941e70_3fdb_aa42_7939_2878d5d4125b["utils.js"]
  98e7cbed_f4b4_9f35_838e_6e7cf3e5edcf["types.js"]
  0f941e70_3fdb_aa42_7939_2878d5d4125b --> 98e7cbed_f4b4_9f35_838e_6e7cf3e5edcf
  55d27179_f566_db64_927b_e95655abee00["constants"]
  0f941e70_3fdb_aa42_7939_2878d5d4125b --> 55d27179_f566_db64_927b_e95655abee00
  627bb742_21aa_b4fd_fe2d_4a963a1f9278["utils"]
  0f941e70_3fdb_aa42_7939_2878d5d4125b --> 627bb742_21aa_b4fd_fe2d_4a963a1f9278
  40bf6909_04ae_bfb6_965f_14cfe98b94de["types"]
  0f941e70_3fdb_aa42_7939_2878d5d4125b --> 40bf6909_04ae_bfb6_965f_14cfe98b94de
  68abd97e_17ac_d8a8_2d83_de72fc71c4a8["types"]
  0f941e70_3fdb_aa42_7939_2878d5d4125b --> 68abd97e_17ac_d8a8_2d83_de72fc71c4a8
  85373914_42ee_ed07_c5b1_5dac4e356a82["ProfilerStore.js"]
  85373914_42ee_ed07_c5b1_5dac4e356a82 --> 0f941e70_3fdb_aa42_7939_2878d5d4125b
  54e7a598_e83a_4b14_3104_1fa62a034c31["CommitFlamegraph.js"]
  54e7a598_e83a_4b14_3104_1fa62a034c31 --> 0f941e70_3fdb_aa42_7939_2878d5d4125b
  6d32cfc6_78ff_92b2_0a33_092cde10d395["CommitFlamegraphListItem.js"]
  6d32cfc6_78ff_92b2_0a33_092cde10d395 --> 0f941e70_3fdb_aa42_7939_2878d5d4125b
  0ad6c6d5_5d6d_2d8a_d957_e1433af66ea0["CommitRanked.js"]
  0ad6c6d5_5d6d_2d8a_d957_e1433af66ea0 --> 0f941e70_3fdb_aa42_7939_2878d5d4125b
  89b916c8_640c_20f1_5b9e_9022ade373b8["CommitRankedListItem.js"]
  89b916c8_640c_20f1_5b9e_9022ade373b8 --> 0f941e70_3fdb_aa42_7939_2878d5d4125b
  9d7f3d0b_1959_a3f3_e24e_821787aa2f54["FlamegraphChartBuilder.js"]
  9d7f3d0b_1959_a3f3_e24e_821787aa2f54 --> 0f941e70_3fdb_aa42_7939_2878d5d4125b
  38d38257_86b3_3154_4c21_7fbaf41be1cb["HoveredFiberInfo.js"]
  38d38257_86b3_3154_4c21_7fbaf41be1cb --> 0f941e70_3fdb_aa42_7939_2878d5d4125b
  b191034a_a94e_84c8_d9bb_fcdcfa226cc1["ProfilingImportExportButtons.js"]
  b191034a_a94e_84c8_d9bb_fcdcfa226cc1 --> 0f941e70_3fdb_aa42_7939_2878d5d4125b
  2c3a67b8_4c71_e64d_dc53_5096af434452["RankedChartBuilder.js"]
  2c3a67b8_4c71_e64d_dc53_5096af434452 --> 0f941e70_3fdb_aa42_7939_2878d5d4125b
  style 0f941e70_3fdb_aa42_7939_2878d5d4125b 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 {PROFILER_EXPORT_VERSION} from 'react-devtools-shared/src/constants';
import {backendToFrontendSerializedElementMapper} from 'react-devtools-shared/src/utils';

import type {ProfilingDataBackend} from 'react-devtools-shared/src/backend/types';
import type {
  ProfilingDataExport,
  ProfilingDataForRootExport,
  ProfilingDataForRootFrontend,
  ProfilingDataFrontend,
  SnapshotNode,
} from './types';
import type {
  TimelineData,
  TimelineDataExport,
} from 'react-devtools-timeline/src/types';

const commitGradient = [
  'var(--color-commit-gradient-0)',
  'var(--color-commit-gradient-1)',
  'var(--color-commit-gradient-2)',
  'var(--color-commit-gradient-3)',
  'var(--color-commit-gradient-4)',
  'var(--color-commit-gradient-5)',
  'var(--color-commit-gradient-6)',
  'var(--color-commit-gradient-7)',
  'var(--color-commit-gradient-8)',
  'var(--color-commit-gradient-9)',
];

// Combines info from the Store (frontend) and renderer interfaces (backend) into the format required by the Profiler UI.
// This format can then be quickly exported (and re-imported).
export function prepareProfilingDataFrontendFromBackendAndStore(
  dataBackends: Array<ProfilingDataBackend>,
  operationsByRootID: Map<number, Array<Array<number>>>,
  snapshotsByRootID: Map<number, Map<number, SnapshotNode>>,
): ProfilingDataFrontend {
  const dataForRoots: Map<number, ProfilingDataForRootFrontend> = new Map();

  const timelineDataArray = [];

  dataBackends.forEach(dataBackend => {
    const {timelineData} = dataBackend;
    if (timelineData != null) {
      const {
        batchUIDToMeasuresKeyValueArray,
        internalModuleSourceToRanges,
        laneToLabelKeyValueArray,
        laneToReactMeasureKeyValueArray,
        ...rest
      } = timelineData;

// ... (317 more lines)

Domain

Dependencies

Imported By

Source

Frequently Asked Questions

What does utils.js do?
utils.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain.
What does utils.js depend on?
utils.js imports 5 module(s): constants, types, types, types.js, utils.
What files import utils.js?
utils.js is imported by 13 file(s): CommitFlamegraph.js, CommitFlamegraphListItem.js, CommitRanked.js, CommitRankedListItem.js, FlamegraphChartBuilder.js, HoveredFiberInfo.js, ProfilerStore.js, ProfilingImportExportButtons.js, and 5 more.
Where is utils.js in the architecture?
utils.js is located at packages/react-devtools-shared/src/devtools/views/Profiler/utils.js (domain: BabelCompiler, 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