fix: resolve plot graph div for react-plotly.js v4 ref change#55
Merged
Conversation
react-plotly.js v4 became a forwardRef function component whose ref points directly at the Plotly graph div, dropping the v2 class-instance `.el` property. Every `plotRef.current.el` access silently became undefined, so the mousemove listener, coordinate readout, and the plotly_relayout zoom subscription never attached. Symptom: after loading a spectrum the crosshair (and coordinate readout / Reset Zoom enable) no longer appeared. Add getPlotEl() = `plotRef.current?.el ?? plotRef.current` (works on both v2 and v4) and route all 7 call sites through it. Verified via Playwright on vite dev with an OPUS file: - mousemove renders .crosshair-layer; readout shows "1.7255 μm" - Plotly.relayout to a zoomed range enables the Reset Zoom button - 44 unit tests pass Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BL1jdGKYgu4YKDQ8KJVGKX
|
✅ macOS build check passed |
|
✅ Windows build check passed |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
不具合
react-plotly.js 4.0.0（#53）へ上げた後、EXE でスペクトルを読み込んでもクロスヘアが表示されないとの報告。
原因
react-plotly.js v4 は
forwardRef関数コンポーネントになり、ref が Plotly のグラフ div を直接指すようになった。v2 のクラスインスタンス（.elに DOM を保持）とは異なる。App.jsx は全箇所で
plotRef.current.elを参照しており、v4 ではundefinedに化けるため:dataCoordの_fullLayout参照）が機能せずplotly_relayout直接購読が張れず → ズーム検知（Reset Zoom ボタン enable）が機能せず修正
getPlotEl()=plotRef.current?.el ?? plotRef.currentを追加し、v2/v4 両対応でグラフ div を取り出す。7箇所のplotRef.current.elを全て置換。検証（vite dev + Playwright）
OPUS ファイル読込後:
.crosshair-layer出現、座標表示 "1.7255 μm"Plotly.relayoutでズーム → "Reset Zoom" ボタンが enablednpm run test:run44 件 pass赤いクロスヘア + 座標表示（X: 3.5224 μm · Y: 0.3119）をローカルで目視確認済み。
🤖 Generated with Claude Code