TooltipFlamechartNode() — react Function Reference

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

Function javascript BabelCompiler Validation calls 2

Entity Profile

BabelCompiler→ Validation→ TooltipFlamechartNode() — react Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/react-devtools-timeline/src/EventTooltip.js lines 184–209

const TooltipFlamechartNode = ({
  stackFrame,
}: {
  stackFrame: FlamechartStackFrame,
}) => {
  const {name, timestamp, duration, locationLine, locationColumn} = stackFrame;
  return (
    <div className={styles.TooltipSection}>
      <span className={styles.FlamechartStackFrameName}>{name}</span>
      <div className={styles.DetailsGrid}>
        <div className={styles.DetailsGridLabel}>Timestamp:</div>
        <div>{formatTimestamp(timestamp)}</div>
        <div className={styles.DetailsGridLabel}>Duration:</div>
        <div>{formatDuration(duration)}</div>
        {(locationLine !== undefined || locationColumn !== undefined) && (
          <>
            <div className={styles.DetailsGridLabel}>Location:</div>
            <div>
              line {locationLine}, column {locationColumn}
            </div>
          </>
        )}
      </div>
    </div>
  );
};