feat: expand rolling window controls

Author: indradhanush

index.html

@@ -443,6 +443,9 @@
       .card.chart .plot {
         flex: 1 1 0;
       }
+      .card.chart .plot.can-select-window {
+        cursor: pointer;
+      }
       /* Fixed so the strip's height never depends on whether its svg is present.
      Must match the height drawTrips() computes: PAD.t + 2 + barH + 26. */
       .card.strip .plot {

src/app.ts

@@ -154,10 +154,15 @@ interface Domain {
     if (Number.isInteger(day)) selectedWindowEnd = day;
   }
 
+  function syncRollingChartCursor(): void {
+    el("plot1").classList.toggle("can-select-window", selectedWindowEnd === null);
+  }
+
   function selectWindowEndingOn(end: number): void {
     if (!rollingHover || !rollingTooltip) return;
     keepAlive();
     selectedWindowEnd = rollingHover.clampDate(end);
+    syncRollingChartCursor();
     horizontalWheelRemainder = 0;
     saveSelectedWindow();
     rollingTooltip.innerHTML = rollingHover.show(selectedWindowEnd, true);
@@ -340,7 +345,7 @@ interface Domain {
       `<span class="muted">${over ? `${out - LIMIT} over the ${LIMIT}-day limit`
                                   : `${LIMIT - out} days of headroom`}</span>` +
       (selected
-        ? `<hr><span class="selection-help">ESC to dismiss selection; arrow keys to adjust window.</span>`
+        ? `<hr><span class="selection-help">ESC to dismiss selection; arrow keys or H/L adjust by day; hold Shift to adjust by week.</span>`
         : "");
   }
 
@@ -843,6 +848,7 @@ interface Domain {
     drawTrips(el("plot2"), el("tt2"), A, dom, rolling);
     rollingHover = rolling;
     rollingTooltip = el("tt1");
+    syncRollingChartCursor();
 
     // Redraws caused by edits or resizing keep an active selection visible.
     if (selectedWindowEnd !== null) {
@@ -862,6 +868,7 @@ interface Domain {
         ev.preventDefault();
         keepAlive();
         selectedWindowEnd = null;
+        syncRollingChartCursor();
         horizontalWheelRemainder = 0;
         lastTimelineTrip = null;
         nextTimelineAlignment = 0;
@@ -874,14 +881,19 @@ interface Domain {
         return;
       }
 
-      if (ev.key !== "ArrowLeft" && ev.key !== "ArrowRight") return;
+      if (ev.altKey || ev.ctrlKey || ev.metaKey) return;
+      const key = ev.key.toLowerCase();
+      const direction = key === "arrowleft" || key === "h"
+        ? -1
+        : key === "arrowright" || key === "l" ? 1 : 0;
+      if (direction === 0) return;
       if (ev.defaultPrevented) return;
       const target = ev.target as HTMLElement | null;
       if (target && (target.matches("input, textarea, select, button") || target.isContentEditable)) return;
 
       ev.preventDefault();
       keepAlive();
-      const delta = ev.key === "ArrowLeft" ? -1 : 1;
+      const delta = direction * (ev.shiftKey ? 7 : 1);
       moveSelectedWindowBy(delta);
     });
   }

test/app.test.js

@@ -29,10 +29,16 @@ test("date fields stay unrestricted while invalid ranges are corrected", () => {
 test("rolling chart selection locks hover and supports keyboard control", () => {
   assert.match(appSource, /host\.onclick = \(ev: MouseEvent\) => \{/);
   assert.match(appSource, /if \(selectedWindowEnd !== null\) return;/);
-  assert.match(appSource, /ev\.key === "ArrowLeft" \? -1 : 1/);
+  assert.match(appSource, /classList\.toggle\("can-select-window", selectedWindowEnd === null\)/);
+  assert.match(indexSource, /\.card\.chart \.plot\.can-select-window \{\s*cursor: pointer;/);
+  assert.match(appSource, /const key = ev\.key\.toLowerCase\(\);/);
+  assert.match(appSource, /if \(ev\.altKey \|\| ev\.ctrlKey \|\| ev\.metaKey\) return;/);
+  assert.match(appSource, /key === "arrowleft" \|\| key === "h"/);
+  assert.match(appSource, /key === "arrowright" \|\| key === "l"/);
+  assert.match(appSource, /const delta = direction \* \(ev\.shiftKey \? 7 : 1\);/);
   assert.match(appSource, /if \(ev\.key === "Escape"\) \{/);
   assert.match(appSource, /selectedWindowEnd = null;/);
-  assert.match(appSource, /ESC to dismiss selection; arrow keys to adjust window\./);
+  assert.match(appSource, /ESC to dismiss selection; arrow keys or H\/L adjust by day; hold Shift to adjust by week\./);
   assert.match(appSource, /rollingHover\.show\(selectedWindowEnd, true\)/);
   assert.match(indexSource, /\.tt \.selection-help \{[\s\S]*?white-space: normal;/);
   assert.match(appSource, /host\.onwheel = \(ev: WheelEvent\) => moveSelectedWindowFromWheel\(ev, host\);/);