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

TooltipSuspenseEvent() — react Function Reference

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

Function javascript BabelCompiler Validation calls 3

Entity Profile

Dependency Diagram

graph TD
  f81f7df6_e90c_4ffc_9c02_dc47ecf37b47["TooltipSuspenseEvent()"]
  57dc23c0_c74d_e09e_ad1f_116cb590a38c["EventTooltip.js"]
  f81f7df6_e90c_4ffc_9c02_dc47ecf37b47 -->|defined in| 57dc23c0_c74d_e09e_ad1f_116cb590a38c
  9b5bb02f_1f54_393f_07e9_6f895ce3958a["trimString()"]
  f81f7df6_e90c_4ffc_9c02_dc47ecf37b47 -->|calls| 9b5bb02f_1f54_393f_07e9_6f895ce3958a
  5ec23e51_b01a_6d75_3953_f12a0c47408d["formatTimestamp()"]
  f81f7df6_e90c_4ffc_9c02_dc47ecf37b47 -->|calls| 5ec23e51_b01a_6d75_3953_f12a0c47408d
  7a7bab2a_0762_eb64_07af_7551fee380d1["formatDuration()"]
  f81f7df6_e90c_4ffc_9c02_dc47ecf37b47 -->|calls| 7a7bab2a_0762_eb64_07af_7551fee380d1
  style f81f7df6_e90c_4ffc_9c02_dc47ecf37b47 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/EventTooltip.js lines 367–423

const TooltipSuspenseEvent = ({
  suspenseEvent,
}: {
  suspenseEvent: SuspenseEvent,
}) => {
  const {
    componentName,
    duration,
    phase,
    promiseName,
    resolution,
    timestamp,
    warning,
  } = suspenseEvent;

  let label = 'suspended';
  if (phase !== null) {
    label += ` during ${phase}`;
  }

  return (
    <>
      <div className={styles.TooltipSection}>
        {componentName && (
          <span className={styles.ComponentName}>
            {trimString(componentName, 100)}
          </span>
        )}
        {label}
        <div className={styles.Divider} />
        <div className={styles.DetailsGrid}>
          {promiseName !== null && (
            <>
              <div className={styles.DetailsGridLabel}>Resource:</div>
              <div className={styles.DetailsGridLongValue}>{promiseName}</div>
            </>
          )}
          <div className={styles.DetailsGridLabel}>Status:</div>
          <div>{resolution}</div>
          <div className={styles.DetailsGridLabel}>Timestamp:</div>
          <div>{formatTimestamp(timestamp)}</div>
          {duration !== null && (
            <>
              <div className={styles.DetailsGridLabel}>Duration:</div>
              <div>{formatDuration(duration)}</div>
            </>
          )}
        </div>
      </div>
      {warning !== null && (
        <div className={styles.TooltipWarningSection}>
          <div className={styles.WarningText}>{warning}</div>
        </div>
      )}
    </>
  );
};

Domain

Subdomains

Defined In

Calls

Source

Frequently Asked Questions

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

Analyze Your Own Codebase

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

Try Supermodel Free