Skip to content

Added zoom buttons to Compare Quality panes - #15

Merged
CodyCBakerPhD merged 2 commits into
mainfrom
claude/comparison-zoom-buttons-qcm1fz
Aug 12, 2026
Merged

CodyCBakerPhD merged 2 commits into
mainfrom
claude/comparison-zoom-buttons-qcm1fz

Conversation

@CodyCBakerPhD

Copy link
Copy Markdown
Member

Added − and + buttons to the zoom controls in the Compare Quality tab, making zoom functionality accessible without a scroll wheel or trackpad.

Key changes:

  • Added zoom out (−) and zoom in (+) buttons that step zoom by 1.5× around the pane center
  • Buttons disable themselves at zoom range limits (0.2× to 50×), matching wheel behavior
  • Refactored zoom logic into setScale() to support both wheel and button input
  • Added onChange callback to attachSyncedZoomPan() to sync button disabled states with zoom level
  • Updated help text to mention the new buttons
  • Fixed button hover styles to not apply when disabled
  • Added styling for square button footprint to keep − and + visually paired

Both panes continue moving in sync, and zoom behavior remains consistent across input methods.

https://claude.ai/code/session_01AmNHGwBMYHvL9YonLTMUti

Wheel zoom was the only way to change zoom level, which leaves out a plain
mouse without a wheel and touch devices. A - / + pair now steps the zoom by
1.5x around the middle of the pane, alongside the existing Fit and Actual
Size buttons, and each disables itself at the end of the zoom range.

The wheel handler now goes through the same setScale() helper, so the clamp
and the anchor math live in one place.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AmNHGwBMYHvL9YonLTMUti
@chromatic-com

chromatic-com Bot commented Aug 12, 2026 •

Copy link
Copy Markdown

Tip

All tests passed and all changes approved!

🟢 UI Tests: encoding-helper-playwright: 2 tests unchanged
🟢 UI Review: encoding-helper-playwright: 2 tests published -- no changes
Storybook icon Test suite publish: encoding-helper-playwright: 2 tests published

@chromatic-com

chromatic-com Bot commented Aug 12, 2026 •

Copy link
Copy Markdown

Tip

All tests passed and all changes approved!

🟢 UI Tests: encoding-helper-storybook: 7 tests unchanged
🟢 UI Review: encoding-helper-storybook: 7 stories published -- no changes
Storybook icon Storybook Publish: encoding-helper-storybook: 7 stories published

@github-actions

github-actions Bot commented Aug 12, 2026 •

Copy link
Copy Markdown
PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://brain-bbqs.github.io/encoding-helper/pr-preview/pr-15/

Built to branch gh-pages at 2026-08-12 15:31 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@codecov-commenter

codecov-commenter commented Aug 12, 2026 •

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 0% with 73 lines in your changes missing coverage. Please review.

Files with missing lines Patch % Lines
src/ui/compareTab.ts 0.00% 73 Missing ⚠️
Files with missing lines Coverage Δ
src/ui/compareTab.ts 0.00% <0.00%> (ø)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@CodyCBakerPhD CodyCBakerPhD self-assigned this Aug 12, 2026
Removed the paragraph of scroll/drag/scrub instructions under the panes and
put a Play button at the head of the controls row. It plays the test segment
through in real time and doubles as Pause; dragging the slider mid-playback
moves the playhead, and playing from the end starts the segment over.

Both panes are decoded per frame, so the loop is paced off the wall clock and
asks for whichever frame the elapsed time lands on: when decoding cannot keep
up it drops frames instead of drifting into slow motion. A frame that will not
decode ends playback rather than leaving the button stuck on "Pause", and
re-running the comparison stops the previous run's loop.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AmNHGwBMYHvL9YonLTMUti
@CodyCBakerPhD
CodyCBakerPhD merged commit 6765803 into main Aug 12, 2026
16 checks passed
@CodyCBakerPhD
CodyCBakerPhD deleted the claude/comparison-zoom-buttons-qcm1fz branch August 12, 2026 17:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants