TooltipNetworkMeasure() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1

Entity Profile

BabelCompiler→ Validation→ TooltipNetworkMeasure() — react Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/react-devtools-timeline/src/EventTooltip.js lines 236–268

const TooltipNetworkMeasure = ({
  networkMeasure,
}: {
  networkMeasure: NetworkMeasure,
}) => {
  const {
    finishTimestamp,
    lastReceivedDataTimestamp,
    priority,
    sendRequestTimestamp,
    url,
  } = networkMeasure;

  let urlToDisplay = url;
  if (urlToDisplay.length > MAX_TOOLTIP_TEXT_LENGTH) {
    const half = Math.floor(MAX_TOOLTIP_TEXT_LENGTH / 2);
    urlToDisplay = url.slice(0, half) + '…' + url.slice(url.length - half);
  }

  const timestampBegin = sendRequestTimestamp;
  const timestampEnd = finishTimestamp || lastReceivedDataTimestamp;
  const duration =
    timestampEnd > 0
      ? formatDuration(finishTimestamp - timestampBegin)
      : '(incomplete)';

  return (
    <div className={styles.SingleLineTextSection}>
      {duration} <span className={styles.DimText}>{priority}</span>{' '}
      {urlToDisplay}
    </div>
  );
};