review · segments
Fix top-10 chart vanishing on row expand in Hunger Games leaderboard
claude 68 events 1 segments ux-design
segment 1 of 1
Diagnose and fix the top-10 chart vanishing on row expand
Read the spec, Livewire component, and Blade view to understand the bug. Identified root cause: Livewire's morphdom strips runtime width/height/style from the canvas when syncing back to empty server markup, resetting the drawing buffer. Applied wire:ignore to both the top-10 chart canvas and the per-row sparkline canvas to prevent morph from touching them. Ran tests (8 passing), verified page renders 200 with wire:ignore present, committed as dce388d, and wrote findings to scratchpad 923.
outcome
Commit dce388d on branch ux-design with wire:ignore on both chart canvases; tests pass; todo 541 completed as READY FOR REVIEW.
next steps
- Browser-verify the fix: expand/collapse a row, expand two rows for sparkline, sort, loadMore — chart must not blank, no console errors.
key decisions
- Used wire:ignore on the canvas elements rather than moving Chart.js off Alpine reactive this.* or adding more JS guards, because the root cause was morphdom attribute-stripping, not node replacement or timing.
- Applied wire:ignore to both the top-10 chart and the per-row sparkline canvas since both suffer the same morphdom blanking when a second row is toggled while one is open.
- Kept data-chart on the non-ignored outer div so broadcasts still feed fresh data through build() — no feature loss.
open questions
—
2 weeks ago → 2 weeks ago