react Architecture Docs
Home / Function/ TooltipReactMeasure() — react Function Reference

TooltipReactMeasure() — react Function Reference

Architecture documentation for the TooltipReactMeasure() function in EventTooltip.js from the react codebase.

Function javascript BabelCompiler Validation calls 3

Entity Profile

Dependency Diagram

graph TD
  7ef4516a_35a9_e695_e0fd_ecf3c57ca13f["TooltipReactMeasure()"]
  57dc23c0_c74d_e09e_ad1f_116cb590a38c["EventTooltip.js"]
  7ef4516a_35a9_e695_e0fd_ecf3c57ca13f -->|defined in| 57dc23c0_c74d_e09e_ad1f_116cb590a38c
  91549cff_787c_c86b_7ff8_cd06a488d435["getReactMeasureLabel()"]
  7ef4516a_35a9_e695_e0fd_ecf3c57ca13f -->|calls| 91549cff_787c_c86b_7ff8_cd06a488d435
  5ec23e51_b01a_6d75_3953_f12a0c47408d["formatTimestamp()"]
  7ef4516a_35a9_e695_e0fd_ecf3c57ca13f -->|calls| 5ec23e51_b01a_6d75_3953_f12a0c47408d
  7a7bab2a_0762_eb64_07af_7551fee380d1["formatDuration()"]
  7ef4516a_35a9_e695_e0fd_ecf3c57ca13f -->|calls| 7a7bab2a_0762_eb64_07af_7551fee380d1
  style 7ef4516a_35a9_e695_e0fd_ecf3c57ca13f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/EventTooltip.js lines 425–473

const TooltipReactMeasure = ({
  data,
  measure,
}: {
  data: TimelineData,
  measure: ReactMeasure,
}) => {
  const label = getReactMeasureLabel(measure.type);
  if (!label) {
    if (__DEV__) {
      console.warn('Unexpected measure type "%s"', measure.type);
    }
    return null;
  }

  const {batchUID, duration, timestamp, lanes} = measure;
  const [startTime, stopTime] = getBatchRange(batchUID, data);

  const laneLabels = lanes.map(
    lane => ((data.laneToLabelMap.get(lane): any): string),
  );

  return (
    <div className={styles.TooltipSection}>
      <span className={styles.ReactMeasureLabel}>{label}</span>
      <div className={styles.Divider} />
      <div className={styles.DetailsGrid}>
        <div className={styles.DetailsGridLabel}>Timestamp:</div>
        <div>{formatTimestamp(timestamp)}</div>
        {measure.type !== 'render-idle' && (
          <>
            <div className={styles.DetailsGridLabel}>Duration:</div>
            <div>{formatDuration(duration)}</div>
          </>
        )}
        <div className={styles.DetailsGridLabel}>Batch duration:</div>
        <div>{formatDuration(stopTime - startTime)}</div>
        <div className={styles.DetailsGridLabel}>
          Lane{lanes.length === 1 ? '' : 's'}:
        </div>
        <div>
          {laneLabels.length > 0
            ? `${laneLabels.join(', ')} (${lanes.join(', ')})`
            : lanes.join(', ')}
        </div>
      </div>
    </div>
  );
};

Domain

Subdomains

Defined In

Calls

Source

Frequently Asked Questions

What does TooltipReactMeasure() do?
TooltipReactMeasure() is a function in the react codebase, defined in packages/react-devtools-timeline/src/EventTooltip.js.
Where is TooltipReactMeasure() defined?
TooltipReactMeasure() is defined in packages/react-devtools-timeline/src/EventTooltip.js at line 425.
What does TooltipReactMeasure() call?
TooltipReactMeasure() calls 3 function(s): formatDuration, formatTimestamp, getReactMeasureLabel.

Analyze Your Own Codebase

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

Try Supermodel Free