TooltipSchedulingEvent() — react Function Reference

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

Function javascript BabelCompiler Validation calls 2

Entity Profile

BabelCompiler→ Validation→ TooltipSchedulingEvent() — react Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/react-devtools-timeline/src/EventTooltip.js lines 270–333

const TooltipSchedulingEvent = ({
  data,
  schedulingEvent,
}: {
  data: TimelineData,
  schedulingEvent: SchedulingEvent,
}) => {
  const label = getSchedulingEventLabel(schedulingEvent);
  if (!label) {
    if (__DEV__) {
      console.warn(
        'Unexpected schedulingEvent type "%s"',
        schedulingEvent.type,
      );
    }
    return null;
  }

  let laneLabels = null;
  let lanes = null;
  switch (schedulingEvent.type) {
    case 'schedule-render':
    case 'schedule-state-update':
    case 'schedule-force-update':
      lanes = schedulingEvent.lanes;
      laneLabels = lanes.map(
        lane => ((data.laneToLabelMap.get(lane): any): string),
      );
      break;
  }

  const {componentName, timestamp, warning} = schedulingEvent;

  return (
    <>
      <div className={styles.TooltipSection}>
        {componentName && (
          <span className={styles.ComponentName}>
            {trimString(componentName, 100)}
          </span>
        )}
        {label}
        <div className={styles.Divider} />
        <div className={styles.DetailsGrid}>
          {laneLabels !== null && lanes !== null && (
            <>
              <div className={styles.DetailsGridLabel}>Lanes:</div>
              <div>
                {laneLabels.join(', ')} ({lanes.join(', ')})
              </div>
            </>
          )}
          <div className={styles.DetailsGridLabel}>Timestamp:</div>
          <div>{formatTimestamp(timestamp)}</div>
        </div>
      </div>
      {warning !== null && (
        <div className={styles.TooltipWarningSection}>
          <div className={styles.WarningText}>{warning}</div>
        </div>
      )}
    </>
  );
};