Restore mouse-wheel zoom on React match-results and encounter image viewers

[JasonWildMe]

Problem

A researcher reported she can no longer mouse-wheel to zoom on the React match-results page images and has to use the icon buttons. Confirmed: there is no wheel/onWheel listener anywhere in the React frontend — wheel-to-zoom existed in the older viewer and was never ported into the React rewrite.

Fix

Restore wheel-zoom and standardize it behind a small shared hook so the three (currently divergent) zoom/pan viewers can share one implementation.

• New frontend/src/hooks/useWheelZoom.js — attaches a native, non-passive wheel listener to a target element. A native listener is required because React's synthetic onWheel is registered passively and cannot preventDefault(), so the page would scroll behind the zoom. The hook owns no zoom state: callers pass onZoom(direction) (+1 in / -1 out) and keep their own zoom/pan/clamp semantics. A latest-callback ref avoids re-subscribing the listener every render.
• AnnotationOverlay.jsx (match-results viewer, the reported regression) — wheel zoom mirrors the existing zoomIn/zoomOut imperative handle (clampZoom + clampPan + zoomStep), gated on imageLoaded, attached to the existing outerContainerRef.
• ImageModal.jsx (encounter-page modal) — wheel zoom matches its buttons (step 0.25, range 1..3); pan re-centers via the existing [zoom, safeIndex] effect. Listener attached to a new ref on #image-modal-image-container. Also moved the if (!assets…) return null guard below the hooks (it previously sat above all hooks — a latent Rules-of-Hooks violation) and normalized the assets prop to an array so the hooks are null-safe.

Behavior decisions

• One zoom step per wheel notch, centered — matches what the icon buttons already do. Zoom-to-cursor is deliberately left as a future enhancement: the two viewers use different transformOrigin (top-left vs center) and pan models (clamped vs reset-on-zoom), so cursor-anchoring would reintroduce per-component divergence.
• preventDefault() stops the page from scrolling while zooming. The listener is scoped to the image container only.
• No change to the zoom buttons, imperative handle, pan-drag, annotation rendering, or zoom bounds.

Scope / follow-up

• ImageGalleryModal.jsx is intentionally excluded. Its zoom/pan comes from the still-open Gallery View Zooming and Panning Feature #1596 (no zoom on main); adding wheel-zoom there now would conflict. It gets the same useWheelZoom hook in a quick follow-up once Gallery View Zooming and Panning Feature #1596 merges.
• Trackpads emit many small wheel events, so wheel-zoom can feel fast on a trackpad; acceptable for restoring the mouse-wheel behavior and bounded by the zoom clamps. A delta-accumulation throttle is a possible future refinement.

Testing

• Babel parse OK; ESLint clean (project flat config) on all three files; LF; git diff --check clean.
• Design and implementation each reviewed by a second-opinion pass (caught and fixed the ImageModal hook-ordering + null-safety issues).
• Manual (after build/deploy): on /react/match-results, wheel up/down over an image zooms in/out within bounds, the page doesn't scroll, annotation rects stay aligned, and the buttons still work. Same on the encounter-page image modal.

🤖 Generated with Claude Code