Phase 3: touch-friendly region selection on the scatter plot - #463
Open
JeffreyBLewis wants to merge 1 commit into
Open
Phase 3: touch-friendly region selection on the scatter plot#463JeffreyBLewis wants to merge 1 commit into
JeffreyBLewis wants to merge 1 commit into
Conversation
Member selection on the DW-NOMINATE scatter plot is normally a drag- rectangle brush, which has no touch equivalent (D3 v3's brush stack is mouse-only). Before writing anything new, checked what already works on touch: tapping a single point to select it already works fine, since a tap synthesizes a click event the same as a mouse would, and the existing click-to-select-one-point handler (in both congress.js and voteCharts.js) just uses d3.mouse() on that click, which behaves identically regardless of input device. That's not what needed fixing. What's missing is a way to select an arbitrary rectangle of multiple members, which does need a genuine drag gesture. Added a "Select region" toggle button (visible only on coarse-pointer devices via a `(pointer: coarse)` media query -- mouse/trackpad users already have drag) that arms a two-tap mode: tap once for a corner, tap again for the opposite corner, and the code computes the same min/max rectangle a drag would have produced and applies it via the chart's own `.brush().extent(...).event(scb)` call, identical to what the existing single-point path already does. Tapping the toggle again while armed cancels without completing a selection. Applied identically to congress.js/congress.tpl (whole-chamber roster) and voteCharts.js/vote.tpl (single-vote breakdown), since both duplicate the same click-to-select scatter code. Verified with headless Chromium (Playwright), added as permanent checks: - Region-select via two taps produces the *exact same* member selection (by data-count) as a real mouse drag-brush between the same two NOMINATE coordinates, on both congress.js and voteCharts.js -- 178/178 and 100/100 members matched exactly - The toggle is hidden on desktop (pointer:fine) and visible on touch (iPhone 13 emulation) - Canceling mid-selection resets the button and doesn't apply a selection; a normal tap-to-select-one-point still works immediately afterward - Existing single-tap-select and mouse drag-brush behavior confirmed unchanged - Full existing 41-check suite still passes Also fixed a markup slip from an earlier edit pass on vote.tpl: the button insertion had replaced the `<h4>` heading's closing tag instead of preserving it. Caught in review before commit -- browsers auto-close an unclosed `<h4>` so it had no visible/functional effect (confirmed: every test above passed against the broken markup too), but it was still wrong and is fixed here. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013KJMYfgTNsxrmjHZpZKAHT
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 #462 so this diff only shows the new commit, `df6382d`. Implements Phase 3 (#450).
Member selection on the DW-NOMINATE scatter plot is normally a drag-rectangle brush, which has no touch equivalent. Before writing anything new, checked what already works: tapping a single point to select it already works fine on touch, since a tap synthesizes a click event and the existing click-to-select handler just uses `d3.mouse()`, which works the same regardless of input device. That didn't need fixing.
What's actually missing is selecting an arbitrary rectangle of multiple members, which needs a genuine drag gesture. Added a "Select region" toggle (visible only on `(pointer: coarse)` devices -- mouse/trackpad users keep dragging) that arms a two-tap mode: tap one corner, tap the opposite corner, and the code computes the same min/max rectangle a drag would produce and applies it through the chart's own existing `.brush().extent(...).event(scb)` call -- same mechanism the single-point path already uses. Tapping the toggle again while armed cancels.
Applied identically to `congress.js`/`congress.tpl` and `voteCharts.js`/`vote.tpl`, since both duplicate the same click-to-select scatter code.
Test plan
Verified with headless Chromium (Playwright), added as permanent checks in the scratch suite:
Also fixed in review before committing: a markup slip from an earlier edit on `vote.tpl` had replaced the `
` closing tag instead of preserving it. Browsers auto-close an unclosed `
`, so it had no functional effect (every test above passed against the broken markup too), but it was still wrong and is fixed here.
🤖 Generated with Claude Code
https://claude.ai/code/session_013KJMYfgTNsxrmjHZpZKAHT