From a9fc20cef44d1ca9c46bac6400faa37fed02db32 Mon Sep 17 00:00:00 2001
From: Nate Emmert <nmemmert@gmail.com>
Date: Thu, 15 Oct 2026 13:09:19 -0400
Subject: [PATCH] Let the mouse wheel scroll the page over charts and the
 embedded radar

Chart zoom now needs Ctrl+scroll (or pinch); the embedded radar uses cooperative gestures.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 app/public/app.js         | 3 +++
 app/public/dashboard.html | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/public/app.js b/app/public/app.js
index ea71ddc..2cfb03d 100644
--- a/app/public/app.js
+++ b/app/public/app.js
@@ -892,6 +892,9 @@ function createRadar(mapEl, timelineEl, playBtn, tsEl, layerBtn) {
     center: [-98.35, 39.5],
     zoom: 4,
     attributionControl: false,
+    // The embedded radar sits in a scrolling page: plain wheel / one-finger drag scroll the page,
+    // Ctrl+wheel / two fingers move the map.
+    cooperativeGestures: mapEl?.id === 'radar-embed',
   });
 
   let radarFrames = [];
diff --git a/app/public/dashboard.html b/app/public/dashboard.html
index 2b2f888..3fbe434 100644
--- a/app/public/dashboard.html
+++ b/app/public/dashboard.html
@@ -648,7 +648,7 @@ function makeChart(canvasId, type, datasets, labels, yLabel, opts = {}) {
     interaction: { mode: 'index', intersect: false },
     plugins: {
       zoom: {
-        zoom: { wheel: { enabled: true }, pinch: { enabled: true }, mode: 'x', onZoomComplete: ({ chart }) => markZoomed(chart) },
+        zoom: { wheel: { enabled: true, modifierKey: 'ctrl' }, pinch: { enabled: true }, mode: 'x', onZoomComplete: ({ chart }) => markZoomed(chart) },
         pan: { enabled: true, mode: 'x', threshold: 10, onPanComplete: ({ chart }) => markZoomed(chart) },
       },
       legend: { display: datasets.length > 1, labels: { color: c.inkLight, font: { size: 11 }, boxWidth: 10 } },
@@ -1080,7 +1080,7 @@ async function loadHistory(range) {
     const line = document.getElementById('updatedLine');
     if (line) {
       const next = new Date(Date.now() + 120000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-      line.textContent = `${data.length}${data.some(d => d.n) ? ' time buckets' : ' readings'} · pinch / scroll to zoom · double-tap to reset · updated ${new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} · next refresh ${next}`;
+      line.textContent = `${data.length}${data.some(d => d.n) ? ' time buckets' : ' readings'} · pinch or Ctrl+scroll to zoom · double-click to reset · updated ${new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} · next refresh ${next}`;
     }
   } catch (e) {
     area.innerHTML = `<div class="status error">Failed to load station history. ${e.message}</div>`;