_handleMouseMove() — react Function Reference

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

Function javascript BabelCompiler Validation calls 3 called by 1

Entity Profile

BabelCompiler→ Validation→ _handleMouseMove() — react Function Reference

Dependency Diagram

graph TD
  2048ceb7_6a90_62bc_935c_4b6ddcb44285["_handleMouseMove()"]
  1c41caa2_9be5_5d0b_7a2d_ee4e7e896fab["FlamechartStackLayerView"]
  2048ceb7_6a90_62bc_935c_4b6ddcb44285 -->|defined in| 1c41caa2_9be5_5d0b_7a2d_ee4e7e896fab
  29bdc2a3_2ebc_c032_b444_98a10af67b95["handleInteraction()"]
  29bdc2a3_2ebc_c032_b444_98a10af67b95 -->|calls| 2048ceb7_6a90_62bc_935c_4b6ddcb44285
  6fe722ba_3051_6ecf_abe3_62a190c3ad25["positioningScaleFactor()"]
  2048ceb7_6a90_62bc_935c_4b6ddcb44285 -->|calls| 6fe722ba_3051_6ecf_abe3_62a190c3ad25
  83465e3e_5308_9ddc_a12b_a84d78f1c10a["timestampToPosition()"]
  2048ceb7_6a90_62bc_935c_4b6ddcb44285 -->|calls| 83465e3e_5308_9ddc_a12b_a84d78f1c10a
  6743acc7_a552_31bd_d8df_67b4ec27ba6d["durationToWidth()"]
  2048ceb7_6a90_62bc_935c_4b6ddcb44285 -->|calls| 6743acc7_a552_31bd_d8df_67b4ec27ba6d
  style 2048ceb7_6a90_62bc_935c_4b6ddcb44285 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/content-views/FlamechartView.js lines 222–259

  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
    const {_stackLayer, frame, _intrinsicSize, _onHover, visibleArea} = this;
    const {location} = interaction.payload;
    if (!_onHover || !rectContainsPoint(location, visibleArea)) {
      return;
    }

    // Find the node being hovered over.
    const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);
    let startIndex = 0;
    let stopIndex = _stackLayer.length - 1;
    while (startIndex <= stopIndex) {
      const currentIndex = Math.floor((startIndex + stopIndex) / 2);
      const flamechartStackFrame = _stackLayer[currentIndex];
      const {timestamp, duration} = flamechartStackFrame;

      const x = Math.floor(timestampToPosition(timestamp, scaleFactor, frame));
      const width = durationToWidth(duration, scaleFactor);

      // Don't show tooltips for nodes that are too small to render at this zoom level.
      if (Math.floor(width - BORDER_SIZE) >= 1) {
        if (x <= location.x && x + width >= location.x) {
          this.currentCursor = 'context-menu';
          viewRefs.hoveredView = this;
          _onHover(flamechartStackFrame);
          return;
        }
      }

      if (x > location.x) {
        stopIndex = currentIndex - 1;
      } else {
        startIndex = currentIndex + 1;
      }
    }

    _onHover(null);
  }