_drawSingleReactMeasure() — react Function Reference

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

Function javascript BabelCompiler Validation calls 4 called by 1

Entity Profile

BabelCompiler→ Validation→ _drawSingleReactMeasure() — react Function Reference

Dependency Diagram

graph TD
  af21523b_b0f3_6208_d571_52ad547b495c["_drawSingleReactMeasure()"]
  ef3af242_6989_01f2_141b_b5ae3fce4bc5["ReactMeasuresView"]
  af21523b_b0f3_6208_d571_52ad547b495c -->|defined in| ef3af242_6989_01f2_141b_b5ae3fce4bc5
  7898c7fb_c4a8_d5bd_a78e_878f99079dcc["draw()"]
  7898c7fb_c4a8_d5bd_a78e_878f99079dcc -->|calls| af21523b_b0f3_6208_d571_52ad547b495c
  6743acc7_a552_31bd_d8df_67b4ec27ba6d["durationToWidth()"]
  af21523b_b0f3_6208_d571_52ad547b495c -->|calls| 6743acc7_a552_31bd_d8df_67b4ec27ba6d
  83465e3e_5308_9ddc_a12b_a84d78f1c10a["timestampToPosition()"]
  af21523b_b0f3_6208_d571_52ad547b495c -->|calls| 83465e3e_5308_9ddc_a12b_a84d78f1c10a
  1d4e7b93_85d0_def6_42c9_e20824e49731["drawText()"]
  af21523b_b0f3_6208_d571_52ad547b495c -->|calls| 1d4e7b93_85d0_def6_42c9_e20824e49731
  7a7bab2a_0762_eb64_07af_7551fee380d1["formatDuration()"]
  af21523b_b0f3_6208_d571_52ad547b495c -->|calls| 7a7bab2a_0762_eb64_07af_7551fee380d1
  style af21523b_b0f3_6208_d571_52ad547b495c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js lines 89–203

  _drawSingleReactMeasure(
    context: CanvasRenderingContext2D,
    rect: Rect,
    measure: ReactMeasure,
    nextMeasure: ReactMeasure | null,
    baseY: number,
    scaleFactor: number,
    showGroupHighlight: boolean,
    showHoverHighlight: boolean,
  ): void {
    const {frame, visibleArea} = this;
    const {timestamp, type, duration} = measure;

    let fillStyle = null;
    let hoveredFillStyle = null;
    let groupSelectedFillStyle = null;
    let textFillStyle = null;

    // We could change the max to 0 and just skip over rendering anything that small,
    // but this has the effect of making the chart look very empty when zoomed out.
    // So long as perf is okay- it might be best to err on the side of showing things.
    const width = durationToWidth(duration, scaleFactor);
    if (width <= 0) {
      return; // Too small to render at this zoom level
    }

    const x = timestampToPosition(timestamp, scaleFactor, frame);
    const measureRect: Rect = {
      origin: {x, y: baseY},
      size: {width, height: REACT_MEASURE_HEIGHT},
    };
    if (!rectIntersectsRect(measureRect, rect)) {
      return; // Not in view
    }

    const drawableRect = intersectionOfRects(measureRect, rect);
    let textRect = measureRect;

    switch (type) {
      case 'commit':
        fillStyle = COLORS.REACT_COMMIT;
        hoveredFillStyle = COLORS.REACT_COMMIT_HOVER;
        groupSelectedFillStyle = COLORS.REACT_COMMIT_HOVER;
        textFillStyle = COLORS.REACT_COMMIT_TEXT;

        // Commit phase rects are overlapped by layout and passive rects,
        // and it looks bad if text flows underneath/behind these overlayed rects.
        if (nextMeasure != null) {
          // This clipping shouldn't apply for measures that don't overlap though,
          // like passive effects that are processed after a delay,
          // or if there are now layout or passive effects and the next measure is render or idle.
          if (nextMeasure.timestamp < measure.timestamp + measure.duration) {
            textRect = {
              ...measureRect,
              size: {
                width:
                  timestampToPosition(
                    nextMeasure.timestamp,
                    scaleFactor,
                    frame,
                  ) - x,
                height: REACT_MEASURE_HEIGHT,
              },
            };
          }
        }
        break;
      case 'render-idle':
        // We could render idle time as diagonal hashes.
        // This looks nicer when zoomed in, but not so nice when zoomed out.
        // color = context.createPattern(getIdlePattern(), 'repeat');
        fillStyle = COLORS.REACT_IDLE;
        hoveredFillStyle = COLORS.REACT_IDLE_HOVER;
        groupSelectedFillStyle = COLORS.REACT_IDLE_HOVER;
        break;
      case 'render':
        fillStyle = COLORS.REACT_RENDER;
        hoveredFillStyle = COLORS.REACT_RENDER_HOVER;
        groupSelectedFillStyle = COLORS.REACT_RENDER_HOVER;
        textFillStyle = COLORS.REACT_RENDER_TEXT;
        break;