From ce3684314709ba7ada080f9179e1d3eb470fedea Mon Sep 17 00:00:00 2001
From: Thomas Teisberg <tteisberg@gmail.com>
Date: Fri, 15 May 2026 16:36:49 -0700
Subject: [PATCH] Add polygon region KDE histogram to viewer

Draw a polygon on the map (custom lightweight tool) to get a
seaborn-kdeplot-style panel: one unit-area Gaussian-KDE curve per
enabled season plus a bold white "All" curve, rendered with uPlot.
Point-in-polygon is tested in the map's projected CRS and the
in-region trace indices are cached so variable/season changes only
re-pull values. A fixed custom legend sits to the right (uPlot's
live legend reflowed and shifted the canvas under the cursor) and
highlights the entry matching the hovered line.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 claude_plans/20260515-region-histogram.md |  43 ++++++
 web/index.html                            | 114 ++++++++++++++
 web/package-lock.json                     |   7 +
 web/package.json                          |   1 +
 web/src/histogram.ts                      | 180 ++++++++++++++++++++++
 web/src/main.ts                           |  92 +++++++++++
 web/src/map.ts                            | 141 +++++++++++++++++
 7 files changed, 578 insertions(+)
 create mode 100644 claude_plans/20260515-region-histogram.md
 create mode 100644 web/src/histogram.ts

diff --git a/claude_plans/20260515-region-histogram.md b/claude_plans/20260515-region-histogram.md
new file mode 100644
index 0000000..9703bb6
--- /dev/null
+++ b/claude_plans/20260515-region-histogram.md
@@ -0,0 +1,43 @@
+# Region polygon → per-season KDE histogram (viewer)
+
+Status: done (2026-05-15) — implemented; custom right-side legend with
+hover focus-highlight (uPlot's live legend reflowed and was dropped).
+
+## Goal
+Let the user draw a polygon on the map; show a seaborn-`kdeplot`-style panel of
+the selected variable's distribution — one unit-area Gaussian-KDE curve per
+enabled season plus a bold "All" curve. Polygon persists across variable
+changes (only the curves recompute); honors the season on/off checkboxes.
+
+## Decisions
+- Draw tool: custom lightweight (no plugin).
+- Chart: `uplot` (new dep) + its CSS.
+- Curves: Gaussian KDE, Silverman bandwidth, normalized to unit area.
+- Season filter: chart respects the existing season checkboxes.
+
+## Pieces
+1. **map.ts** — polygon draw + point-in-polygon
+   - State: drawing flag, vertex latlngs, provisional polyline, final polygon.
+   - `startPolygonDraw()`, `clearPolygon()`, `hasPolygon()`, `onPolygonChange(cb)`.
+   - Click adds vertex; dblclick / Enter finishes; Esc cancels. Suppress
+     doubleClickZoom + hover tooltip while drawing.
+   - `tracesInPolygon(data)` → indices: project vertices + each trace via
+     `map.options.crs.project` (zoom-independent, pole-correct), ray-cast.
+   - Clear polygon on hemisphere rebuild / destroyMap.
+2. **histogram.ts** — KDE + uPlot
+   - `kde(values, gridX)` Gaussian, bw = 1.06·σ·n^(-1/5) (skip n<2 / σ=0),
+     trapezoidal renorm to area 1.
+   - Categorical season→color map (stable, chroma brewer), "All" = bold light.
+   - uPlot line chart in a floating panel; title = variable label/unit.
+3. **main.ts** — wiring
+   - Sidebar "Draw region" / "Clear region" buttons + `#region-panel`.
+   - onPolygonChange → cache in-polygon indices → updateRegionHistogram().
+   - updateRegionHistogram(): group cached∩qcPass∩!NaN indices by
+     frameCollection, keep enabled seasons; x-range = 2–98 pct of union;
+     KDE per season + All; render; show panel.
+   - Recompute on variable change (after ensureVariable) and season toggle;
+     polygon/index cache untouched. Clear on dataset switch.
+
+## Notes
+- Panel: bottom-left, above Leaflet scale control, dark-theme styled.
+- Seasons with <2 in-polygon points: no own curve but counted in "All".
diff --git a/web/index.html b/web/index.html
index edc2599..b4f7fce 100644
--- a/web/index.html
+++ b/web/index.html
@@ -240,6 +240,107 @@
       .leaflet-container {
         background: #1a1a2e;
       }
+
+      .region-buttons {
+        display: flex;
+        gap: 6px;
+      }
+
+      .region-buttons button {
+        flex: 1;
+        background: #0f3460;
+        color: #e6e6e6;
+        border: 1px solid #16527a;
+        border-radius: 4px;
+        padding: 6px 8px;
+        font-size: 12px;
+        cursor: pointer;
+      }
+
+      .region-buttons button:hover {
+        background: #16527a;
+      }
+
+      .region-buttons button:disabled {
+        opacity: 0.45;
+        cursor: default;
+      }
+
+      #region-panel {
+        position: absolute;
+        bottom: 30px;
+        left: 10px;
+        z-index: 999;
+        background: rgba(22, 33, 62, 0.94);
+        border: 1px solid #0f3460;
+        border-radius: 4px;
+        padding: 8px;
+      }
+
+      #region-panel[hidden] {
+        display: none;
+      }
+
+      #region-body {
+        display: flex;
+        align-items: flex-start;
+      }
+
+      #region-chart {
+        width: 460px;
+      }
+
+      #region-legend {
+        width: 150px;
+        margin-left: 8px;
+        padding-top: 22px;
+        font-size: 11px;
+        color: #ccc;
+      }
+
+      #region-legend .leg-row {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-bottom: 4px;
+        line-height: 1.2;
+        padding: 1px 4px;
+        border-radius: 3px;
+      }
+
+      #region-legend .leg-swatch {
+        flex: 0 0 auto;
+        width: 16px;
+        height: 0;
+        border-top-style: solid;
+      }
+
+      #region-legend .leg-row.leg-all {
+        font-weight: 700;
+        color: #fff;
+      }
+
+      #region-legend .leg-row.leg-hi {
+        background: rgba(255, 255, 255, 0.16);
+        color: #fff;
+      }
+
+      #region-chart .region-empty {
+        color: #aaa;
+        font-size: 12px;
+        padding: 24px 12px;
+        text-align: center;
+      }
+
+      .u-title {
+        font-size: 12px;
+        color: #ccc;
+      }
+
+      .u-legend {
+        font-size: 11px;
+        color: #ccc;
+      }
     </style>
   </head>
   <body>
@@ -265,6 +366,13 @@ <h2>Variable</h2>
           <option value="bed_twtt">Bed TWTT [µs]</option>
         </select>
       </div>
+      <div class="sidebar-section">
+        <h2>Region</h2>
+        <div class="region-buttons">
+          <button id="draw-region-btn">Draw region</button>
+          <button id="clear-region-btn" disabled>Clear region</button>
+        </div>
+      </div>
       <details class="sidebar-section" id="seasons-section" hidden>
         <summary>Seasons</summary>
         <div id="season-list"></div>
@@ -284,6 +392,12 @@ <h2>Variable</h2>
     <div id="map-container">
       <div id="map"></div>
       <div id="loading-overlay">Loading data from S3...</div>
+      <div id="region-panel" hidden>
+        <div id="region-body">
+          <div id="region-chart"></div>
+          <div id="region-legend"></div>
+        </div>
+      </div>
       <div id="velocity-legend" hidden>
         <div class="legend-title" id="velocity-legend-title"></div>
         <div class="legend-row">
diff --git a/web/package-lock.json b/web/package-lock.json
index 1224707..bfddaef 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -15,6 +15,7 @@
         "leaflet": "^1.9.4",
         "proj4": "^2.15.0",
         "proj4leaflet": "^1.0.2",
+        "uplot": "^1.6.32",
         "zarrita": "^0.5.0"
       },
       "devDependencies": {
@@ -6988,6 +6989,12 @@
         "yarn": "*"
       }
     },
+    "node_modules/uplot": {
+      "version": "1.6.32",
+      "resolved": "https://registry.npmjs.org/uplot/-/uplot-1.6.32.tgz",
+      "integrity": "sha512-KIMVnG68zvu5XXUbC4LQEPnhwOxBuLyW1AHtpm6IKTXImkbLgkMy+jabjLgSLMasNuGGzQm/ep3tOkyTxpiQIw==",
+      "license": "MIT"
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
diff --git a/web/package.json b/web/package.json
index d16e749..b5cd46d 100644
--- a/web/package.json
+++ b/web/package.json
@@ -16,6 +16,7 @@
     "leaflet": "^1.9.4",
     "proj4": "^2.15.0",
     "proj4leaflet": "^1.0.2",
+    "uplot": "^1.6.32",
     "zarrita": "^0.5.0"
   },
   "devDependencies": {
diff --git a/web/src/histogram.ts b/web/src/histogram.ts
new file mode 100644
index 0000000..2447150
--- /dev/null
+++ b/web/src/histogram.ts
@@ -0,0 +1,180 @@
+import uPlot from "uplot";
+import "uplot/dist/uPlot.min.css";
+import chroma from "chroma-js";
+
+// Stable categorical season -> color. Sorted so the same season always gets
+// the same color regardless of which subset is currently shown.
+const SEASON_PALETTE = chroma.brewer.Set2.concat(chroma.brewer.Set1);
+const ALL_COLOR = "#e8e8e8";
+
+export function seasonColors(seasons: string[]): Map<string, string> {
+  const sorted = Array.from(new Set(seasons)).sort();
+  const m = new Map<string, string>();
+  sorted.forEach((s, i) => m.set(s, SEASON_PALETTE[i % SEASON_PALETTE.length]));
+  return m;
+}
+
+const GRID_N = 256;
+
+function percentile(sorted: number[], p: number): number {
+  const i = Math.min(sorted.length - 1, Math.max(0, Math.floor(sorted.length * p)));
+  return sorted[i];
+}
+
+// Gaussian KDE over `grid`, normalized to unit area across the grid so curve
+// shapes are comparable regardless of sample size.
+function kde(values: number[], grid: number[]): number[] {
+  const n = values.length;
+  const out = new Array(grid.length).fill(0);
+  if (n < 2) return out;
+  const mean = values.reduce((a, b) => a + b, 0) / n;
+  let varSum = 0;
+  for (const v of values) varSum += (v - mean) ** 2;
+  const std = Math.sqrt(varSum / (n - 1));
+  if (std === 0) return out;
+  const bw = 1.06 * std * Math.pow(n, -0.2);
+  const inv = 1 / (bw * Math.sqrt(2 * Math.PI));
+  for (let g = 0; g < grid.length; g++) {
+    let s = 0;
+    const x = grid[g];
+    for (let i = 0; i < n; i++) {
+      const z = (x - values[i]) / bw;
+      s += Math.exp(-0.5 * z * z);
+    }
+    out[g] = (s * inv) / n;
+  }
+  // Trapezoidal renormalization to unit area over the plotted range.
+  let area = 0;
+  for (let g = 1; g < grid.length; g++) {
+    area += ((out[g] + out[g - 1]) / 2) * (grid[g] - grid[g - 1]);
+  }
+  if (area > 0) for (let g = 0; g < out.length; g++) out[g] /= area;
+  return out;
+}
+
+export interface HistSeries {
+  label: string;
+  color: string;
+  values: number[];
+}
+
+let plot: uPlot | null = null;
+
+export function clearHistogram(legendEl?: HTMLElement): void {
+  if (plot) {
+    plot.destroy();
+    plot = null;
+  }
+  if (legendEl) legendEl.replaceChildren();
+}
+
+// Returns the row elements in series order so the chart's focus hook can
+// highlight the matching entry on hover.
+function buildLegend(legendEl: HTMLElement, series: HistSeries[]): HTMLElement[] {
+  legendEl.replaceChildren();
+  const rows: HTMLElement[] = [];
+  for (const s of series) {
+    const isAll = s.label === "All";
+    const row = document.createElement("div");
+    row.className = isAll ? "leg-row leg-all" : "leg-row";
+    const sw = document.createElement("span");
+    sw.className = "leg-swatch";
+    sw.style.borderTopColor = isAll ? ALL_COLOR : s.color;
+    sw.style.borderTopWidth = isAll ? "3px" : "2px";
+    row.appendChild(sw);
+    row.append(s.label);
+    legendEl.appendChild(row);
+    rows.push(row);
+  }
+  return rows;
+}
+
+// Rebuild the chart. `series` order is drawn as given; pass the cumulative
+// "All" series last so it sits on top. A custom fixed legend is rendered into
+// `legendEl` (uPlot's own legend is disabled because its live values reflow
+// and shift the canvas under the cursor).
+export function renderHistogram(
+  container: HTMLElement,
+  legendEl: HTMLElement,
+  title: string,
+  series: HistSeries[],
+): void {
+  clearHistogram(legendEl);
+  container.replaceChildren();
+
+  // "All" is the union of the shown seasons; use it for the axis range so a
+  // single-season store (no per-season series) still works.
+  const allSeries = series.find((s) => s.label === "All") ?? series[series.length - 1];
+  const usable = (allSeries?.values ?? []).filter((v) => !isNaN(v));
+  if (usable.length < 2) {
+    const msg = document.createElement("div");
+    msg.className = "region-empty";
+    msg.textContent = "No data for the selected seasons in this region.";
+    container.appendChild(msg);
+    return;
+  }
+
+  usable.sort((a, b) => a - b);
+  const lo = percentile(usable, 0.02);
+  const hi = percentile(usable, 0.98);
+  const xmin = lo;
+  const xmax = hi === lo ? lo + 1 : hi;
+  const step = (xmax - xmin) / (GRID_N - 1);
+  const grid = Array.from({ length: GRID_N }, (_, i) => xmin + i * step);
+
+  const data: uPlot.AlignedData = [
+    grid,
+    ...series.map((s) => kde(s.values.filter((v) => !isNaN(v)), grid)),
+  ];
+
+  const uSeries: uPlot.Series[] = [
+    {},
+    ...series.map((s) => {
+      const isAll = s.label === "All";
+      return {
+        label: s.label,
+        stroke: isAll ? ALL_COLOR : s.color,
+        width: isAll ? 3 : 1.5,
+        points: { show: false },
+      };
+    }),
+  ];
+
+  const legRows = buildLegend(legendEl, series);
+
+  const w = container.clientWidth || 460;
+  const h = 260;
+  plot = new uPlot(
+    {
+      title,
+      width: w,
+      height: h,
+      // Custom legend (see buildLegend); focus dims other series on hover.
+      cursor: { drag: { x: false, y: false }, focus: { prox: 24 } },
+      focus: { alpha: 0.25 },
+      legend: { show: false },
+      hooks: {
+        setSeries: [
+          (_u, sIdx) => {
+            legRows.forEach((r, i) =>
+              r.classList.toggle("leg-hi", sIdx != null && i === sIdx - 1),
+            );
+          },
+        ],
+      },
+      scales: { x: { time: false } },
+      axes: [
+        { stroke: "#aaa", grid: { stroke: "rgba(255,255,255,0.08)" }, ticks: { stroke: "rgba(255,255,255,0.15)" } },
+        {
+          stroke: "#aaa",
+          grid: { stroke: "rgba(255,255,255,0.08)" },
+          ticks: { stroke: "rgba(255,255,255,0.15)" },
+          size: 50,
+        },
+      ],
+      series: uSeries,
+    },
+    data,
+    container,
+  );
+}
diff --git a/web/src/main.ts b/web/src/main.ts
index bb6fee5..16ded40 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -16,7 +16,18 @@ import {
   VELOCITY_BASEMAP,
   VELOCITY_LEGEND,
   velocityColorForFraction,
+  startPolygonDraw,
+  clearPolygon,
+  hasPolygon,
+  tracesInPolygon,
+  setOnPolygonChange,
 } from "./map";
+import {
+  renderHistogram,
+  clearHistogram,
+  seasonColors,
+  HistSeries,
+} from "./histogram";
 import { openStore, loadEssentials, loadVariables, StoreData } from "./store";
 
 const datasetSelect = document.getElementById(
@@ -49,6 +60,15 @@ const velocityLegendMax = document.getElementById("velocity-legend-max") as HTML
 const velocityLegendMid = document.getElementById("velocity-legend-mid") as HTMLSpanElement;
 const velocityLegendMin = document.getElementById("velocity-legend-min") as HTMLSpanElement;
 let velocityLegendDrawn = false;
+const drawRegionBtn = document.getElementById("draw-region-btn") as HTMLButtonElement;
+const clearRegionBtn = document.getElementById("clear-region-btn") as HTMLButtonElement;
+const regionPanel = document.getElementById("region-panel") as HTMLDivElement;
+const regionChart = document.getElementById("region-chart") as HTMLDivElement;
+const regionLegend = document.getElementById("region-legend") as HTMLDivElement;
+
+// Trace indices inside the drawn polygon, cached so a variable/season change
+// only re-pulls values (the polygon itself is unchanged).
+let regionIndices: number[] | null = null;
 
 let currentData: StoreData | null = null;
 let currentStore: IcechunkStore | null = null;
@@ -89,6 +109,7 @@ function buildSeasonState(data: StoreData): void {
       if (cb.checked) enabledSeasons.add(season);
       else enabledSeasons.delete(season);
       renderCurrentVariable();
+      if (hasPolygon()) updateRegionHistogram();
     });
     label.appendChild(cb);
     label.append(` ${season}`);
@@ -152,6 +173,70 @@ function syncVelocityLegend() {
   velocityLegend.hidden = !show;
 }
 
+function updateRegionHistogram(): void {
+  if (!currentData || !regionIndices || !hasPolygon()) return;
+  const variableName = variableSelect.value;
+  const varInfo = VARIABLES[variableName];
+  const values = currentData.variables[variableName];
+  if (!varInfo || !values) return;
+  const scale = varInfo.displayScale ?? 1;
+  const seasons = currentData.frameCollection;
+  const qc = currentData.qcPass;
+
+  const groups = new Map<string, number[]>();
+  const all: number[] = [];
+  for (const idx of regionIndices) {
+    if (qc && !qc[idx]) continue;
+    const v = values[idx];
+    if (isNaN(v)) continue;
+    const sv = v * scale;
+    if (seasons) {
+      const s = seasons[idx];
+      // Respect the season on/off checkboxes (enabledSeasons).
+      if (!enabledSeasons.has(s)) continue;
+      let g = groups.get(s);
+      if (!g) groups.set(s, (g = []));
+      g.push(sv);
+    }
+    all.push(sv);
+  }
+
+  const colorMap = seasonColors(seasons ? Array.from(seasons) : []);
+  const series: HistSeries[] = [];
+  for (const s of Array.from(groups.keys()).sort()) {
+    series.push({ label: s, color: colorMap.get(s) ?? "#888", values: groups.get(s)! });
+  }
+  series.push({ label: "All", color: "#e8e8e8", values: all });
+
+  regionPanel.hidden = false;
+  renderHistogram(regionChart, regionLegend, `${varInfo.label} [${varInfo.unit}]`, series);
+}
+
+function onPolygonChanged(): void {
+  const present = hasPolygon();
+  clearRegionBtn.disabled = !present;
+  drawRegionBtn.textContent = "Draw region";
+  if (present && currentData) {
+    regionIndices = tracesInPolygon(currentData);
+    updateRegionHistogram();
+  } else {
+    regionIndices = null;
+    regionPanel.hidden = true;
+    clearHistogram(regionLegend);
+  }
+}
+
+// Drop any region when the underlying dataset/snapshot changes (trace indices
+// would otherwise be stale against the new data arrays).
+function resetRegion(): void {
+  regionIndices = null;
+  regionPanel.hidden = true;
+  clearHistogram(regionLegend);
+  clearPolygon();
+  clearRegionBtn.disabled = true;
+  drawRegionBtn.textContent = "Draw region";
+}
+
 function renderCurrentVariable() {
   if (!currentData) return;
   const variableName = variableSelect.value;
@@ -197,6 +282,8 @@ async function loadSnapshot(snapshotId?: string) {
   currentSnapshotId = snapshotId;
   currentData = null;
   currentStore = null;
+  // New data arrays invalidate any cached in-polygon indices.
+  resetRegion();
 
   try {
     currentStore = await openStore(STORES[currentStoreIndex].url, snapshotId);
@@ -280,6 +367,7 @@ async function init() {
   populateDatasetSelect();
   initMap("map", STORES[currentStoreIndex].hemisphere);
   populateBasemapSelect();
+  setOnPolygonChange(onPolygonChanged);
 
   // Browsers autofill checkbox state across reloads but do not fire the change
   // event for the restored value, so sync onViewChange manually before any
@@ -338,6 +426,9 @@ async function init() {
 
   showCheckpointsCb.addEventListener("change", renderHistoryList);
 
+  drawRegionBtn.addEventListener("click", () => startPolygonDraw());
+  clearRegionBtn.addEventListener("click", () => clearPolygon());
+
   variableSelect.addEventListener("change", async () => {
     if (!currentData || !currentStore) return;
     const variableName = variableSelect.value;
@@ -347,6 +438,7 @@ async function init() {
       hideLoading();
     }
     renderCurrentVariable();
+    if (hasPolygon()) updateRegionHistogram();
   });
 }
 
diff --git a/web/src/map.ts b/web/src/map.ts
index 23fd526..858038c 100644
--- a/web/src/map.ts
+++ b/web/src/map.ts
@@ -149,6 +149,106 @@ let currentVarInfo: VariableInfo | null = null;
 let tooltipEl: HTMLDivElement | null = null;
 const HOVER_THRESHOLD_PX = 12;
 
+// Polygon region-select state.
+let drawing = false;
+let drawVerts: L.LatLng[] = [];
+let drawLine: L.Polyline | null = null;
+let regionPolygon: L.Polygon | null = null;
+let polygonChangeCb: (() => void) | null = null;
+let keyHandler: ((e: KeyboardEvent) => void) | null = null;
+
+export function setOnPolygonChange(cb: (() => void) | null): void {
+  polygonChangeCb = cb;
+}
+
+export function hasPolygon(): boolean {
+  return regionPolygon !== null;
+}
+
+function setDrawCursor(on: boolean) {
+  if (map) map.getContainer().style.cursor = on ? "crosshair" : "";
+}
+
+export function startPolygonDraw(): void {
+  removeRegion();
+  drawing = true;
+  drawVerts = [];
+  map.doubleClickZoom.disable();
+  setDrawCursor(true);
+}
+
+function cancelDraw() {
+  drawing = false;
+  drawVerts = [];
+  if (drawLine) {
+    map.removeLayer(drawLine);
+    drawLine = null;
+  }
+  map.doubleClickZoom.enable();
+  setDrawCursor(false);
+}
+
+function finishDraw() {
+  if (drawVerts.length < 3) {
+    cancelDraw();
+    return;
+  }
+  const verts = drawVerts.slice();
+  cancelDraw();
+  regionPolygon = L.polygon(verts, {
+    color: "#ffd166",
+    weight: 2,
+    fillOpacity: 0.08,
+  }).addTo(map);
+  if (polygonChangeCb) polygonChangeCb();
+}
+
+// Remove the committed polygon without firing the change callback.
+function removeRegion() {
+  if (regionPolygon) {
+    map.removeLayer(regionPolygon);
+    regionPolygon = null;
+  }
+}
+
+export function clearPolygon(): void {
+  cancelDraw();
+  removeRegion();
+  if (polygonChangeCb) polygonChangeCb();
+}
+
+// Trace indices whose lat/lon fall inside the committed polygon. Tested in
+// the map's projected CRS (zoom-independent, correct at the poles).
+export function tracesInPolygon(data: StoreData): number[] {
+  if (!regionPolygon || !map.options.crs) return [];
+  const crs = map.options.crs;
+  const ring = regionPolygon.getLatLngs()[0] as L.LatLng[];
+  const poly = ring.map((ll) => crs.project(ll));
+  const n = poly.length;
+  const out: number[] = [];
+  for (let i = 0; i < data.numTraces; i++) {
+    const la = data.latitude[i];
+    const lo = data.longitude[i];
+    if (isNaN(la) || isNaN(lo)) continue;
+    const p = crs.project(L.latLng(la, lo));
+    let inside = false;
+    for (let a = 0, b = n - 1; a < n; b = a++) {
+      const xa = poly[a].x;
+      const ya = poly[a].y;
+      const xb = poly[b].x;
+      const yb = poly[b].y;
+      if (
+        ya > p.y !== yb > p.y &&
+        p.x < ((xb - xa) * (p.y - ya)) / (yb - ya) + xa
+      ) {
+        inside = !inside;
+      }
+    }
+    if (inside) out.push(i);
+  }
+  return out;
+}
+
 export function formatScaledValue(value: number, info: VariableInfo): string {
   const scaled = (info.displayScale ?? 1) * value;
   return scaled.toPrecision(4);
@@ -204,7 +304,39 @@ export function initMap(containerId: string, hemisphere: Hemisphere): L.Map {
     if (onViewChange) onViewChange();
   });
 
+  map.on("click", (e: L.LeafletMouseEvent) => {
+    if (!drawing) return;
+    drawVerts.push(e.latlng);
+    if (!drawLine) {
+      drawLine = L.polyline(drawVerts, {
+        color: "#ffd166",
+        weight: 2,
+        dashArray: "4 4",
+      }).addTo(map);
+    } else {
+      drawLine.setLatLngs(drawVerts);
+    }
+  });
+
+  map.on("dblclick", () => {
+    if (!drawing) return;
+    finishDraw();
+  });
+
+  keyHandler = (e: KeyboardEvent) => {
+    if (!drawing) return;
+    if (e.key === "Escape") cancelDraw();
+    else if (e.key === "Enter") finishDraw();
+  };
+  document.addEventListener("keydown", keyHandler);
+
   map.on("mousemove", (e: L.LeafletMouseEvent) => {
+    if (drawing) {
+      if (drawLine && drawVerts.length > 0) {
+        drawLine.setLatLngs([...drawVerts, e.latlng]);
+      }
+      return;
+    }
     if (renderedPoints.length === 0) return;
     const tooltip = getOrCreateTooltip();
     const containerPt = e.containerPoint;
@@ -269,6 +401,15 @@ export function destroyMap(): void {
     map.removeLayer(canvasOverlay);
     canvasOverlay = null;
   }
+  // Polygon state is per-map; reset silently (caller refreshes region UI).
+  drawing = false;
+  drawVerts = [];
+  drawLine = null;
+  regionPolygon = null;
+  if (keyHandler) {
+    document.removeEventListener("keydown", keyHandler);
+    keyHandler = null;
+  }
   renderedPoints = [];
   currentFrameIds = null;
   currentValues = null;