Phase 2 (1/5): touch support for the vote map's district tooltip - #458
Open
JeffreyBLewis wants to merge 1 commit into
Open
Phase 2 (1/5): touch support for the vote map's district tooltip#458JeffreyBLewis wants to merge 1 commit into
JeffreyBLewis wants to merge 1 commit into
Conversation
…f 5) Phase 2 of the mobile UI plan (#449): chart tooltips bound only to mouseover/mouseout/mousemove are invisible on touch devices, which have no hover. Starting with the vote page's map tooltip since it's the most visible case and I already know this file well from the chart-sizing work. Refactored the three anonymous mouseover/mouseout/mousemove handlers into named local functions (showDistrictTooltip/hideDistrictTooltip/ positionDistrictTooltip) so they can be reused for touch, with no behavior change for mouse users. Added addTouchTooltip(selection, showFn, hideFn), gated on matchMedia('(pointer: coarse)'). Initially tried just adding a click binding alongside the existing hover ones, but headless-Chromium testing caught a real problem: touch devices synthesize a mouseover/mousemove/ click sequence for a tap, but unreliably -- a synthetic mouseout consistently fired right after the tap (apparently once the resulting filter change redraws the chart), which hid the tooltip the instant it appeared. So for coarse-pointer devices this drops the hover bindings entirely instead, and drives the tooltip purely from taps: show on tap, hide on a tap anywhere outside the map. Verified with headless Chromium (Playwright), added as permanent checks in the scratch verification suite: - Desktop (mouse): hover still shows/hides exactly as before - Touch (iPhone 13 emulation): tapping a state shows the tooltip with correct content AND still applies the existing tap-to-filter behavior; tapping elsewhere dismisses it; no page errors - Full existing 36-check suite from the prior three commits still passes Remaining Phase 2 sites (party.js x2, committee.js, personIdeology.js, district.js) to follow as separate, similarly-verified changes rather than one large batch, given today's lesson about over-broad changes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013KJMYfgTNsxrmjHZpZKAHT
4 tasks
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.
Summary
Stacks on #457 so this diff only shows the new commit, `6a6e4cd`.
First of the 5 tooltip sites from #449 (Phase 2 of the mobile UI plan). Chart tooltips bound only to `mouseover`/`mouseout`/`mousemove` are invisible on touch devices. Starting with the vote page's map tooltip, the most visible case.
Refactored the three anonymous mouseover/mouseout/mousemove handlers into named local functions so they can be reused for touch, with no behavior change for mouse users. Added `addTouchTooltip(selection, showFn, hideFn)`, gated on `matchMedia('(pointer: coarse)')`.
A real bug caught by testing, not by inspection: my first attempt just added a click binding alongside the existing hover ones. Headless-Chromium testing showed the tooltip appearing and then immediately disappearing on a real tap. Traced it to a synthetic `mouseout` event that reliably fires right after a tap (apparently once the resulting filter change redraws the chart) -- touch-to-mouse-event synthesis on tap is real but not reliable enough to layer tap handling on top of. Fixed by dropping the hover bindings entirely on coarse-pointer devices and driving the tooltip purely from taps: show on tap, hide on a tap anywhere outside the map.
Test plan
Verified with headless Chromium (Playwright):
Remaining Phase 2 sites (`party.js` x2, `committee.js`, `personIdeology.js`, `district.js`) will follow as separate, similarly-verified PRs rather than one large batch.
🤖 Generated with Claude Code
https://claude.ai/code/session_013KJMYfgTNsxrmjHZpZKAHT