EventTooltip() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ EventTooltip() — react Function Reference

Dependency Diagram

graph TD
  837ad1c5_fe7d_611e_754a_687cb02d2c1d["EventTooltip()"]
  57dc23c0_c74d_e09e_ad1f_116cb590a38c["EventTooltip.js"]
  837ad1c5_fe7d_611e_754a_687cb02d2c1d -->|defined in| 57dc23c0_c74d_e09e_ad1f_116cb590a38c
  style 837ad1c5_fe7d_611e_754a_687cb02d2c1d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/EventTooltip.js lines 66–135

export default function EventTooltip({
  canvasRef,
  data,
  height,
  hoveredEvent,
  origin,
  width,
}: Props): React.Node {
  const ref = useSmartTooltip({
    canvasRef,
    mouseX: origin.x,
    mouseY: origin.y,
  });

  if (hoveredEvent === null) {
    return null;
  }

  const {
    componentMeasure,
    flamechartStackFrame,
    measure,
    nativeEvent,
    networkMeasure,
    schedulingEvent,
    snapshot,
    suspenseEvent,
    thrownError,
    userTimingMark,
  } = hoveredEvent;

  let content = null;
  if (componentMeasure !== null) {
    content = (
      <TooltipReactComponentMeasure componentMeasure={componentMeasure} />
    );
  } else if (nativeEvent !== null) {
    content = <TooltipNativeEvent nativeEvent={nativeEvent} />;
  } else if (networkMeasure !== null) {
    content = <TooltipNetworkMeasure networkMeasure={networkMeasure} />;
  } else if (schedulingEvent !== null) {
    content = (
      <TooltipSchedulingEvent data={data} schedulingEvent={schedulingEvent} />
    );
  } else if (snapshot !== null) {
    content = (
      <TooltipSnapshot height={height} snapshot={snapshot} width={width} />
    );
  } else if (suspenseEvent !== null) {
    content = <TooltipSuspenseEvent suspenseEvent={suspenseEvent} />;
  } else if (measure !== null) {
    content = <TooltipReactMeasure data={data} measure={measure} />;
  } else if (flamechartStackFrame !== null) {
    content = <TooltipFlamechartNode stackFrame={flamechartStackFrame} />;
  } else if (userTimingMark !== null) {
    content = <TooltipUserTimingMark mark={userTimingMark} />;
  } else if (thrownError !== null) {
    content = <TooltipThrownError thrownError={thrownError} />;
  }

  if (content !== null) {
    return (
      <div className={styles.Tooltip} ref={ref}>
        {content}
      </div>
    );
  } else {
    return null;
  }
}