Merge branch 'zed/thermo-nuclear-code-quality-review'

Author: Flowm

README.md

@@ -77,7 +77,7 @@ The badge maps the result to one of three tiers — high (≥70 %, emerald), mid
 
 - **Vue 3** (`<script setup>`, Composition API) + **Vite** + **TypeScript** (strict)
 - **Tailwind CSS v4** via `@tailwindcss/vite`
-- **vue-echarts** (ECharts 5) for the charts
+- **vue-echarts** (ECharts 6) for the charts
 - **vue-router** for URL state, **@vueuse/core** for localStorage / debounce
 - **Erik Flowers' [weather-icons](https://github.com/erikflowers/weather-icons)** for the icon set
 - **Vitest** for unit tests
@@ -87,31 +87,32 @@ The badge maps the result to one of three tiers — high (≥70 %, emerald), mid
 ## Architecture
 
 ```
-            UI (Vue components)              Composables               Domain layer (pure TS)
-┌──────────────────────────────────┐   ┌──────────────────┐   ┌────────────────────────────────┐
-│  LocationBar  ─────┐             │   │  useLocation     │   │  models.ts                     │
-│  AggregateSummary  │             │   │   ─ URL sync     │   │   ─ registry + bboxes          │
-│  HourlyChart       │             │   │   ─ favourites   │   │  weighting.ts                  │
-│  DailyStrip ──────►│ ForecastView│◄──┤  useForecast     │◄──┤   ─ region bonus + decay       │
-│  ModelBreakdown    │             │   │   ─ fetch+aggreg.│   │  aggregate.ts                  │
-│  WeatherIcon       │             │   │  useUnits        │   │   ─ weighted mean / circ. mean │
-│  ConfidenceBadge ──┘             │   │   ─ formatters   │   │   ─ severity-weighted mode     │
-└──────────────────────────────────┘   └──────────────────┘   │  confidence.ts                 │
-                                                              │   ─ spread + model-count factor │
-                                                              │  weatherCodes.ts               │
-                                                              │   ─ WMO ↔ icon ↔ severity      │
-                                                              └────────────────────────────────┘
+        UI (Vue components)               Composables                Domain layer (pure TS)
+┌──────────────────────────────────┐  ┌──────────────────┐  ┌────────────────────────────────┐
+│  LocationBar                     │  │  useLocation     │  │  models.ts                     │
+│  AggregateSummary                │  │   ─ URL sync     │  │   ─ registry + bboxes          │
+│  HourlySeriesChart  (shared)     │  │   ─ favourites   │  │  weighting.ts                  │
+│  DailyStrip / DayCard            │  │  useForecast     │  │   ─ region bonus + decay       │
+│  VerificationDayCard            ►│◄─┤   ─ fetch+aggreg.│◄─┤  aggregate.ts                  │
+│  HitMissStrip                    │  │  useVerification │  │  aggregateVariables.ts (triad) │
+│  WeatherIcon / ConfidenceBadge   │  │   ─ fetch+score  │  │  confidence.ts                 │
+│                                  │  │  useUnits        │  │  verification.ts (bias/MAE …)  │
+│  ForecastView · VerificationView │  │   ─ formatters   │  │  weatherCodes.ts               │
+└──────────────────────────────────┘  └──────────────────┘  └────────────────────────────────┘
                                                                             ▲
                                                                             │
-                                                              ┌─────────────┴──────────────────┐
-                                                              │  api/openMeteo.ts              │
-                                                              │   ─ typed forecast client +    │
-                                                              │     30-min in-memory cache     │
-                                                              │  api/geocoding.ts              │
-                                                              └────────────────────────────────┘
+                                            ┌───────────────────────────────┴──────────────────┐
+                                            │  api/omForecast.ts      ─ live forecast client    │
+                                            │  api/omSingleRuns.ts    ─ historical model runs   │
+                                            │  api/omHistoricalWeather.ts ─ ERA5-Seamless truth │
+                                            │  api/geocoding.ts       ─ location search         │
+                                            │  (HTTP caching via the service worker, SWR)       │
+                                            └────────────────────────────────────────────────────┘
 ```
 
-The **domain layer** is pure TS, unit-tested with Vitest (21 tests). The UI sits on top of it via three composables. There is no global store — the URL is the source of truth for the location, and localStorage holds units, favourites, and recent searches.
+The **domain layer** is pure TS, unit-tested with Vitest. The UI sits on top of it via the
+composables. There is no global store — the URL is the source of truth for the location, and
+localStorage holds units, favourites, and recent searches.
 
 ## Develop
 
@@ -127,7 +128,7 @@ npm run dev          # Vite dev server
 npm run build        # type-check + production build to ./dist
 npm run preview      # serve ./dist locally
 
-npm test             # Vitest unit tests (21 cases)
+npm test             # Vitest unit tests
 npm run test:watch   # interactive
 
 npm run lint         # oxlint + oxfmt --check + vue-tsc (CI gate)

src/components/AggregateSummary.vue

@@ -5,6 +5,7 @@ import type { ForecastResponse } from "@/api/omForecast";
 import type { DailyAggregate } from "@/composables/useForecast";
 import { useLocation } from "@/composables/useLocation";
 import { useUnits } from "@/composables/useUnits";
+import { overallConfidence } from "@/domain/confidence";
 import { weatherLabel } from "@/domain/weatherCodes";
 
 import ConfidenceBadge from "./ConfidenceBadge.vue";
@@ -34,13 +35,9 @@ const currentIsDay = computed(() => (props.raw.current.is_day ?? 1) === 1);
 const todayHigh = computed(() => props.daily.series.temperature_2m_max[0]?.value ?? null);
 const todayLow = computed(() => props.daily.series.temperature_2m_min[0]?.value ?? null);
 const todayPrecipProb = computed(() => props.daily.series.precipitation_probability_max[0]?.value ?? null);
-const todayConfidence = computed(() => {
-  const vals = [props.daily.confidence.temperature_2m_max[0], props.daily.confidence.precipitation_sum[0], props.daily.confidence.weather_code[0]].filter((v): v is number =>
-    Number.isFinite(v),
-  );
-  if (vals.length === 0) return 0;
-  return vals.reduce((a, b) => a + b, 0) / vals.length;
-});
+const todayConfidence = computed(() =>
+  overallConfidence([props.daily.confidence.temperature_2m_max[0], props.daily.confidence.precipitation_sum[0], props.daily.confidence.weather_code[0]]),
+);
 const lastUpdated = computed(() => new Date(props.raw.current.time));
 
 const sunrise = computed(() => props.solar?.sunrise[0] ?? null);

src/components/DailyStrip.vue

@@ -2,6 +2,7 @@
 import { computed } from "vue";
 
 import type { DailyAggregate } from "@/composables/useForecast";
+import { overallConfidence } from "@/domain/confidence";
 import { MODELS } from "@/domain/models";
 
 import DayCard, { type ModelRow } from "./DayCard.vue";
@@ -23,7 +24,6 @@ interface DayRow {
 
 const days = computed<DayRow[]>(() =>
   props.daily.times.map((date, i) => {
-    const conf = [props.daily.confidence.temperature_2m_max[i] ?? 0, props.daily.confidence.weather_code[i] ?? 0, props.daily.confidence.precipitation_sum[i] ?? 0];
     const models: ModelRow[] = MODELS.map((m) => ({
       id: m.id,
       label: m.label,
@@ -40,7 +40,7 @@ const days = computed<DayRow[]>(() =>
       precipSum: props.daily.series.precipitation_sum[i]?.value ?? null,
       windSpeed: props.daily.series.wind_speed_10m_max[i]?.value ?? null,
       windDirection: props.daily.series.wind_direction_10m_dominant[i]?.value ?? null,
-      confidence: conf.reduce((a, b) => a + b, 0) / conf.length,
+      confidence: overallConfidence([props.daily.confidence.temperature_2m_max[i], props.daily.confidence.precipitation_sum[i], props.daily.confidence.weather_code[i]]),
       models,
     };
   }),

src/components/HourlySeriesChart.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { onClickOutside } from "@vueuse/core";
 import type { EChartsOption } from "echarts";
+import type { ECharts } from "echarts/core";
 import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue";
 import VChart from "vue-echarts";
 
 import type { DataVarId, HourlySeries } from "@/composables/hourlySeries";
 import { useUnits } from "@/composables/useUnits";
 import { MODELS, type ModelDef } from "@/domain/models";
 
-import { CHART_VIEWS, convertVar, type ChartViewId, type UnitPrefs } from "./chartHelpers";
+import { CHART_VIEWS, convertVar, isVarActive as isVarActiveFor, nextCombinableView, type ChartViewId, type UnitPrefs } from "./chartHelpers";
 import { AGG_COLOR, BAND_SWATCH, buildHourlyChartOption, paletteFor, TRUTH_COLOR, visibilityPatches } from "./chartOption";
 
 const props = withDefaults(
@@ -64,8 +65,8 @@ const showTruth = ref(true);
 const enabledModels = ref<Set<string>>(new Set());
 
 // Direct handle to the ECharts instance for no-redraw merge patches.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const chartRef = ref<any>(null);
+// vue-echarts exposes the underlying instance as `.chart` on its component ref.
+const chartRef = ref<{ chart?: ECharts } | null>(null);
 
 const hasTruth = computed(() => !!props.data.truth);
 
@@ -94,36 +95,15 @@ onClickOutside(varRoot, () => (varOpen.value = false));
 /** Whether a picker entry reads as "active". Temperature and precipitation are
  *  a combinable pair on the forecast page: either is active in the composite. */
 function isVarActive(vid: ChartViewId): boolean {
-  if (canCombineTempPrecip) {
-    if (vid === "temperature_2m") return view.value === "temp_precip" || view.value === "temperature_2m";
-    if (vid === "precipitation") return view.value === "temp_precip" || view.value === "precipitation";
-  }
-  return view.value === vid;
+  return isVarActiveFor(view.value, vid, canCombineTempPrecip);
 }
 
 function selectVariable(vid: ChartViewId): void {
-  // Temperature & precipitation toggle independently (dual-axis), so the two
-  // can be shown together — that combination *is* the composite view. The
-  // remaining variables are exclusive single-axis views.
+  // Temperature & precipitation toggle independently (dual-axis) into the
+  // composite; every other variable is an exclusive single-axis view. The set
+  // arithmetic for the combinable pair lives in chartHelpers.nextCombinableView.
   if (canCombineTempPrecip && (vid === "temperature_2m" || vid === "precipitation")) {
-    const inPair = view.value === "temp_precip" || view.value === "temperature_2m" || view.value === "precipitation";
-    let tempOn = view.value === "temp_precip" || view.value === "temperature_2m";
-    let precipOn = view.value === "temp_precip" || view.value === "precipitation";
-    if (!inPair) {
-      // Coming from an exclusive view (wind / cloud / prob) → focus the click.
-      tempOn = vid === "temperature_2m";
-      precipOn = vid === "precipitation";
-    } else if (vid === "temperature_2m") {
-      tempOn = !tempOn;
-    } else {
-      precipOn = !precipOn;
-    }
-    // Never leave the pair empty: toggling off the last one is a no-op.
-    if (!tempOn && !precipOn) {
-      tempOn = vid === "temperature_2m";
-      precipOn = vid === "precipitation";
-    }
-    selectView(tempOn && precipOn ? "temp_precip" : tempOn ? "temperature_2m" : "precipitation");
+    selectView(nextCombinableView(view.value, vid));
   } else {
     selectView(vid);
   }
@@ -180,7 +160,6 @@ watch(
 // area-fill) live in the builder's `toggles`; visibilityPatches() maps those +
 // the current toggle state to the patches.
 function applyVisibility(): void {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const chart = chartRef.value?.chart;
   if (!chart) return;
   const patches = visibilityPatches(toggles.value, {
@@ -189,7 +168,6 @@ function applyVisibility(): void {
     showTruth: showTruth.value,
     enabledModels: enabledModels.value,
   });
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
   if (patches.length) chart.setOption({ series: patches }, false);
 }
 
@@ -244,35 +222,27 @@ const spaghettiAxis = computed(() => (activeVar.value === "precipitation" ? 1 :
 
 let detachCursor: (() => void) | null = null;
 watch(
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
   () => chartRef.value?.chart,
   (chart) => {
     detachCursor?.();
     detachCursor = null;
     if (!chart) return;
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
     const zr = chart.getZr();
     const onMove = (e: { offsetX: number; offsetY: number }): void => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
       if (!chart.containPixel("grid", [e.offsetX, e.offsetY])) {
         cursorValue.value = null;
         return;
       }
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-      const v = chart.convertFromPixel({ yAxisIndex: spaghettiAxis.value }, e.offsetY) as unknown;
+      const v = chart.convertFromPixel({ yAxisIndex: spaghettiAxis.value }, e.offsetY);
       cursorValue.value = typeof v === "number" ? v : null;
     };
     const onOut = (): void => {
       cursorValue.value = null;
     };
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
     zr.on("mousemove", onMove);
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
     zr.on("globalout", onOut);
     detachCursor = (): void => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
       zr.off("mousemove", onMove);
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
       zr.off("globalout", onOut);
     };
   },

src/components/chartHelpers.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+
+import { isVarActive, nextCombinableView } from "./chartHelpers";
+
+describe("nextCombinableView", () => {
+  it("adds the second variable to form the composite", () => {
+    expect(nextCombinableView("temperature_2m", "precipitation")).toBe("temp_precip");
+    expect(nextCombinableView("precipitation", "temperature_2m")).toBe("temp_precip");
+  });
+
+  it("toggling one half of the composite drops back to the other single view", () => {
+    expect(nextCombinableView("temp_precip", "precipitation")).toBe("temperature_2m");
+    expect(nextCombinableView("temp_precip", "temperature_2m")).toBe("precipitation");
+  });
+
+  it("toggling off the last remaining variable is a no-op (never empties)", () => {
+    expect(nextCombinableView("temperature_2m", "temperature_2m")).toBe("temperature_2m");
+    expect(nextCombinableView("precipitation", "precipitation")).toBe("precipitation");
+  });
+
+  it("focuses the click when coming from an exclusive view", () => {
+    expect(nextCombinableView("wind_speed_10m", "temperature_2m")).toBe("temperature_2m");
+    expect(nextCombinableView("cloud_cover", "precipitation")).toBe("precipitation");
+  });
+});
+
+describe("isVarActive", () => {
+  it("treats either half of the composite as active when combinable", () => {
+    expect(isVarActive("temp_precip", "temperature_2m", true)).toBe(true);
+    expect(isVarActive("temp_precip", "precipitation", true)).toBe(true);
+    expect(isVarActive("temperature_2m", "temperature_2m", true)).toBe(true);
+    expect(isVarActive("temperature_2m", "precipitation", true)).toBe(false);
+  });
+
+  it("falls back to exact-match when not combinable", () => {
+    expect(isVarActive("temperature_2m", "temperature_2m", false)).toBe(true);
+    expect(isVarActive("temp_precip", "temperature_2m", false)).toBe(false);
+  });
+
+  it("matches exclusive views exactly regardless of combinability", () => {
+    expect(isVarActive("wind_speed_10m", "wind_speed_10m", true)).toBe(true);
+    expect(isVarActive("wind_speed_10m", "cloud_cover", true)).toBe(false);
+  });
+});