diff --git a/CLAUDE.md b/CLAUDE.md index 749e5fe..46ea2de 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -30,12 +30,12 @@ plus the monthly `water-monitor-retrain.timer` (Python, `.venv`, uv-managed). Up - No `git add -A`: zero-byte shell-accident files (`#`, `$(wc`, ...) have been committed before. Stage files by name. - Do not add Co-Authored-By trailers. -- The dashboard is a single file, `src/static/dashboard.html`, EN + TH via the `t()` - table: every user-visible string needs both languages. Every path it fetches must be - a route in `rust/collector/src/web/mod.rs` (tests/test_dashboard.py checks). Its - replacement, the console (`src/static/console.html`, preview at /static/console.html, - plan in docs/DASHBOARD_REDESIGN.md), follows the same rules plus no emoji - (tests/test_console.py); preview it with `uv run python scripts/dev_proxy.py`. +- The dashboard is a single file, `src/static/dashboard.html` (design and rules in + docs/DASHBOARD_REDESIGN.md), EN + TH via the `t()` table: every user-visible string + needs both languages, Thai is the default, no emoji. Every path it fetches must be a + route in `rust/collector/src/web/mod.rs` (tests/test_dashboard.py checks). A replay or + a simulation must never be shown as live data. Preview it against production with + `uv run python scripts/dev_proxy.py`; the server reads it at start (restart). - Rust (`rust/`, see rust/README.md): `cargo fmt --all`, `cargo clippy --all-targets -- -D warnings`, `cargo test`; minimum version 1.88 (`CARGO_TARGET_DIR=target/msrv cargo +1.88 check --all-targets --locked`). Read diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 1593e94..f374354 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -29,7 +29,8 @@ Without `TEST_DATABASE_URL` the database tests are skipped, the rest still run. - One logical change per commit, imperative subject (`fix(collector): ...`, `feat(web): ...`, `docs: ...`). - Dashboard changes (`src/static/dashboard.html`): every visible string in English - and Thai (`t()` table); a screenshot in the merge request. + and Thai (`t()` table), no emoji; screenshots (light and dark, phone and desktop) + in the merge request. Preview with `uv run python scripts/dev_proxy.py`. - API changes: keep existing fields and formats; external clients read them. New parameters go into the route's declaration in `rust/collector/src/web/params.rs`, which also documents them at `/docs`. diff --git a/README.md b/README.md index 476b6c3..3c52078 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,8 @@ a gauge crosses its warning or danger level. after the [October 2024 flood](https://buildfor.life/blog/chiang-mai-flood-2024/) — background in [Teaching a Model to See the Ping River Rise 13 Hours Early](https://buildfor.life/blog/ping-river-monitor/). +![The dashboard: Chiang Mai's flood verdict and the gauges in the top bar, the gauge list, the map and the panel for P.1 Nawarat Bridge with its history and forecast](docs/img/dashboard.jpg) + [![CI](https://git.b4l.co.th/B4L/Northern-Thailand-Ping-River-Monitor/actions/workflows/ci.yml/badge.svg)](https://git.b4l.co.th/B4L/Northern-Thailand-Ping-River-Monitor/actions) [![Rust](https://git.b4l.co.th/B4L/Northern-Thailand-Ping-River-Monitor/actions/workflows/rust.yml/badge.svg)](https://git.b4l.co.th/B4L/Northern-Thailand-Ping-River-Monitor/actions) [![Security](https://git.b4l.co.th/B4L/Northern-Thailand-Ping-River-Monitor/actions/workflows/security.yml/badge.svg)](https://git.b4l.co.th/B4L/Northern-Thailand-Ping-River-Monitor/actions) @@ -35,9 +37,11 @@ background in [Teaching a Model to See the Ping River Rise 13 Hours Early](https data through August 2024, the first alert came **13 hours before** P.1 crossed 3.70 m. Everything about the model, including what did not work: [docs/FLOOD_FORECASTING.md](docs/FLOOD_FORECASTING.md). -- **Shows it.** A Leaflet map with the river drawn as OSM geometry and styled by live - discharge, rain gauges, the Chiang Mai inundation zones, per-station history, the - forecast card, a replay of the 2024 flood, English/Thai, light/dark. +- **Shows it.** One screen: Chiang Mai's flood verdict, the gauges with their status + and trend, a self-hosted map of the basin with rain and the city's inundation + zones, and a panel per station with its history since 2018, the forecast and how + accurate it has been. ThaiWater's basin stations, a replay of the 2024 flood, + Thai/English, dark/light. - **Notifies.** Public push alerts over a self-hosted [ntfy](https://ntfy.sh): one message when a gauge crosses its warning or danger level, one all-clear on the way down, an opt-in early-warning topic from the model, nothing in between. @@ -176,7 +180,7 @@ models/ trained bundles (gitignored) and evaluation results - [docs/MATRIX_QUICK_START.md](docs/MATRIX_QUICK_START.md) — the same alerts in a Matrix room - [rust/README.md](rust/README.md) — the service: commands, configuration, develop, deploy - [docs/RUST_REWRITE.md](docs/RUST_REWRITE.md) — why and how it moved from Python to Rust -- [docs/DASHBOARD_REDESIGN.md](docs/DASHBOARD_REDESIGN.md) — the new console dashboard (preview at `/static/console.html`): layout, rules, phases +- [docs/DASHBOARD_REDESIGN.md](docs/DASHBOARD_REDESIGN.md) — the dashboard: layout, rules, how it replaced the old page - [docs/references/NOTABLE_DOCUMENTS.md](docs/references/NOTABLE_DOCUMENTS.md) — official Thai government resources - Public overview: [buildfor.life/docs/tooling/ping-river-monitor](https://buildfor.life/docs/tooling/ping-river-monitor/) diff --git a/docs/DASHBOARD_REDESIGN.md b/docs/DASHBOARD_REDESIGN.md index 8906c80..2b1e068 100644 --- a/docs/DASHBOARD_REDESIGN.md +++ b/docs/DASHBOARD_REDESIGN.md @@ -1,19 +1,19 @@ # Dashboard redesign: the console -Status: **phase 3 done** (2026-10-19). The new dashboard is built next to the current -one and replaces it in phase 4. +Status: **phase 4 done** (2026-10-20). The console is the dashboard: it replaced the +old page at `/` (`src/static/dashboard.html`; the server reads it at start, so a +change needs a restart). Phase 5 (polish) is open. -- **Preview:** , after `git pull` on the - server (static files are read per request, no restart). It is not indexed - (`noindex`) and links back to the current dashboard. -- **Locally:** `uv run python scripts/dev_proxy.py 8765`, then - . The API is proxied to production. -- **Rules:** the same as for `dashboard.html`, plus no emoji (`tests/test_console.py`): +- **Locally:** `uv run python scripts/dev_proxy.py 8765`, then . + The API is proxied to production. +- **Rules** (`tests/test_dashboard.py`): - every path it fetches is a Rust route; - every string exists in EN and TH, and Thai is the default; - - timestamps are Bangkok wall-clock time. + - no emoji; + - timestamps are Bangkok wall-clock time; + - a replay or a simulation is never shown as live data. -## Why: the current page +## Why: the old page Observed on 2026-10-19 at 1440 px and on a 390 px phone. @@ -69,7 +69,7 @@ One screen, no page scroll on a desktop: ## Where every current element goes -| Current (`dashboard.html` id) | Console | Phase | +| Old page (`dashboard.html` id) | Console | Phase | |---|---|---| | `flood-verdict`, `verdict-*` | Verdict in the top bar | 1 | | `station-count`, `last-updated`, `data-age`, `live-pill` | Top-bar KPIs (reporting, data age) | 1 | @@ -91,7 +91,7 @@ One screen, no page scroll on a desktop: ## Design rules - **Type:** Inter (Latin) and Noto Sans Thai, self-hosted in `src/static/fonts/` (75 KB, OFL). Numbers use tabular figures. -- **Colours:** CSS variables for light and dark, with dark the default; a saved choice wins (`ping-river-theme`, shared with the current dashboard). +- **Colours:** CSS variables for light and dark, with dark the default; a saved choice wins (`ping-river-theme`, the old dashboard's key, so the choice carried over). - **Accent:** `#1d6fd6` light, `#4c9bf0` dark. - **Status:** colours are used only for status, each with an `-ink` variant for text (WCAG AA on white). - **One status rule** (`statusOf`) for the map, list and panel. It is display-only; the notifier keeps its own transitions. @@ -104,14 +104,16 @@ One screen, no page scroll on a desktop: | Danger | level ≥ `threshold_danger` | | No data | no reading for 24 h | -- **City verdict:** the current dashboard's rule — flooding from P.1 ≥ 3.70 m; "likely" at danger ≥ 50 % or warning ≥ 70 %; watch at warning ≥ 20 % or level ≥ 3.20 m. +- **City verdict:** the old dashboard's rule — flooding from P.1 ≥ 3.70 m; "likely" at danger ≥ 50 % or warning ≥ 70 %; watch at warning ≥ 20 % or level ≥ 3.20 m. - **Data age:** "feed stale" after 3 h, except during RID's overnight pause (21:00 to 09:00 with an evening reading). The pause shows as "overnight pause", the same rule as the notifier's `FEED_NIGHT_UNTIL_HOUR`. - **Discharge:** comes with RID's report. When the newest hour is a level-only reading, the panel shows the last RID discharge with its time ("at 14:00"). - **Rain layer:** off by default unless any station has heavy rain (> 35 mm / 24 h); an explicit choice is remembered. - **Flood zones:** shown automatically while P.1 is at or above a stage, unless hidden by the user. - **Basin stations:** ThaiWater's classes for the level as a share of the bank height (critically low ≤ 10 %, low ≤ 30 %, normal ≤ 70 %, high ≤ 100 %, over the bank). On the map and in the list over the bank is danger, high is watch, the rest normal; no data after 24 h. Gauges RID already lists are shown once, as RID gauges. The layer is off until the list is opened or the button pressed. -- **History:** above 2,500 readings (30 d and longer for most gauges) the chart shows the daily mean with the daily low–high band, so a flood peak is not averaged away; gaps longer than 3.5 h (2.5 days when daily) break the line rather than bridging RID's nightly pause. Short ranges reload with every refresh, long ones at most hourly. "All" asks for `limit=100000`: `/measurements/history` returns the oldest rows first and stops at its 50,000 default, which made the current dashboard's "All time" for P.1 end in October 2024 (fixed there too). +- **History:** above 2,500 readings (30 d and longer for most gauges) the chart shows the daily mean with the daily low–high band, so a flood peak is not averaged away; gaps longer than 3.5 h (2.5 days when daily) break the line rather than bridging RID's nightly pause. Short ranges reload with every refresh, long ones at most hourly. "All" asks for `limit=100000`: `/measurements/history` returns the oldest rows first and stops at its 50,000 default, which made the old dashboard's "All time" for P.1 end in October 2024. - **Forecast accuracy:** loaded when the section is opened (a cold `/api/forecast/skill` query takes up to 20 s), cached for 15 minutes; bias and persistence error are in each row's tooltip. +- **Replay of October 2024:** `src/static/flood-2024-all.json` (hourly readings of the 16 gauges, 15 September – 12 October 2024, and the 24 h warning chance and peak of a model trained on data before 1 September 2024). The page's clock, verdict, list, markers, flood zones and panel follow the replay; the panel's chart shows the season on fixed axes up to the replay hour. It plays hour by hour while the model alerts or P.1 is above 3.50 m, faster through quiet days, and can be paused and dragged. Rain, the basin stations and the 5-minute refresh are off during the replay, since they are today's data. A violet bar (REPLAY, date, P.1 level, the model's message) and the top bar's "Replay time" replace the live data age. +- **Simulation:** `?demo_level=4.4` pins P.1 at 4.40 m; `?demo_rise=1` raises it by 5 cm every 0.7 s from the real level to the 2024 record (5.30 m). An amber SIMULATION bar names the real level; the top bar and the P.1 panel say "simulated". Only P.1 is simulated: the forecasts and other gauges stay live. - **Basemap:** `src/static/basemap/ping-basin.pmtiles`, a Protomaps extract (bbox 97.85–99.95 E, 16.85–20.2 N, zoom 0–12, 15 MB, OpenStreetMap data), drawn by protomaps-leaflet 5.1.0 in its `light`/`dark` style with `name:th`/`name:en` labels. Refresh instructions in `src/static/basemap/README.md`. The map cannot be panned far outside the basin. OSM raster tiles are the fallback if the renderer does not load. ## Phases @@ -124,7 +126,7 @@ Each phase is one commit, checked with screenshots: 1440, 1100 and 390 px; light - Map with status markers, rain and flood-zone layers. - Station panel (readings, scale, 72 h chart, forecast table, P.1 stages). - Alerts drawer (ntfy topics); URL selection; 5-minute refresh. - - `tests/test_console.py`; `dev_proxy.py` serves `src/static` with proper content types. + - `tests/test_console.py` (now `tests/test_dashboard.py`); `dev_proxy.py` serves `src/static` with proper content types. 2. **Done — Map and basin.** - **Basemap:** the self-hosted Protomaps extract replaces the dimmed OSM raster tiles, whose baked-in labels were the noisiest part of the screen. Labels follow the page language; light and dark styles. - **Server:** ServeDir answers HTTP range requests (checked: 206); `dev_proxy.py` now does too. @@ -134,10 +136,10 @@ Each phase is one commit, checked with screenshots: 1440, 1100 and 390 px; light - **History in the panel** (inline SVG, no chart library): ranges and dates, level and discharge, issued 24 h forecasts overlaid, warning/danger bands, hover/touch values. - **P.1 forecast accuracy** as a collapsible panel section, from `/api/forecast/skill`. - **Data statistics:** a status-bar popover, from `/api/stats`. -4. **Modes and the swap.** +4. **Done — Modes and the swap.** - **October 2024 replay:** banner, clock, markers and verdict follow the replay; zones auto-show. - **Demo hooks:** `?demo_level=`, `?demo_rise=`. A mode pill (LIVE / REPLAY / SIMULATION) never relabels a replay or simulation as live. - - **The swap:** `console.html` becomes `dashboard.html`; the old file and its tests go. `tests/test_console.py` absorbs the remaining checks of `tests/test_dashboard.py` (one P.1 level, SEO tags; the robots `noindex` is removed). + - **The swap:** `console.html` became `dashboard.html`, with the old page's title, description, Open Graph and JSON-LD tags; the robots `noindex` is gone. `tests/test_dashboard.py` is the console's tests plus the old ones that still apply (one P.1 level, SEO and indexing files). - **Docs:** README screenshot and the CLAUDE.md rule. 5. **Polish.** - Phone layout pass. @@ -149,5 +151,5 @@ Each phase is one commit, checked with screenshots: 1440, 1100 and 390 px; light ## Data notes from building phase 1 - **Negative levels.** P.4A (−1.28 m) and P.67 (−0.59 m) report negative levels: gauge datums, not errors. The panel's scale starts at the lowest of 0 and the station's 72 h readings. -- **P.1 discharge disagrees between endpoints.** At 15:00 on 2026-10-19, `/measurements/latest` had level 1.30 m with no discharge, while `/measurements/history` had 26.0 m³/s with no capacity. RID's 14:00 report said 53.9 m³/s. The console shows the last RID discharge. Worth checking where the 26.0 comes from. +- **P.1 discharge disagrees between endpoints.** At 15:00 on 2026-10-19, `/measurements/latest` had level 1.30 m with no discharge, while `/measurements/history` had 26.0 m³/s with no capacity. RID's 14:00 report said 53.9 m³/s. The rows without capacity (`discharge_percent`) are ThaiWater's copy of the gauge, which fills hours RID has not published yet (its night hours); their discharge comes from a different rating, about half of RID's at P.1. The panel shows the last RID discharge, and the history chart drops the discharge of those rows for gauges RID reports discharge for. - **P.84 spike.** A one-hour spike at 13:00 the same day: 0.73 → 1.05 → 0.78 m. diff --git a/docs/FLOOD_FORECASTING.md b/docs/FLOOD_FORECASTING.md index 0bb1c0a..8d7e528 100644 --- a/docs/FLOOD_FORECASTING.md +++ b/docs/FLOOD_FORECASTING.md @@ -639,17 +639,24 @@ and `scripts/install.sh` does that on every install. ### Dashboard -The "Flood risk outlook" panel (`src/static/dashboard.html`, `loadForecasts()`) -loads non-blocking after the map renders and **stays hidden unless `/forecast` -returns a non-empty array** — a non-OK response, an empty array, or a thrown -fetch all just leave the panel hidden, and the rest of the dashboard is -unaffected. Per the note above, this means the panel appears with heuristic-only -content once data is flowing but before any model is trained; the per-chip -tooltip is what tells you so. Stations are sorted worst-risk first, each showing -three chips (6/12/24 h) coloured by risk band, with the tooltip carrying the exact -warning and danger percentages, the predicted peak level, and a "heuristic -fallback" note when the row did not come from a model. The panel is labelled -*experimental*. +The dashboard (`src/static/dashboard.html`) loads `/forecast` with the gauges; if +it fails or is empty, the page works without forecasts. Where the model shows: + +- **Top bar.** Chiang Mai's verdict from P.1: flooding at ≥ 3.70 m; "likely" at a + 24 h danger chance ≥ 50 % or warning chance ≥ 70 %; "watch" at a warning chance + ≥ 20 % or a level ≥ 3.20 m. Next to it, the highest 24 h warning chance of any gauge. +- **Gauge list and map.** A gauge is "watch" from a 24 h warning chance of 25 %. +- **Station panel.** Per horizon (6/12/24 h) the predicted peak and the warning and + danger chances, the model version and when it was trained, or "Simple estimate" when + the row came from the heuristic fallback. For P.1 the chance of reaching each of the + seven inundation stages. The history chart overlays the 24 h peaks as they were + issued (`/api/forecast/history`), and "How accurate is the forecast?" loads + `/api/forecast/skill`. +- **Replay.** "Replay the October 2024 flood" plays `src/static/flood-2024-all.json`: + the gauge readings of 2024 with what a model trained only on data before + 1 September 2024 said at each hour. + +The page labels the forecast experimental. ### Training on the server diff --git a/docs/img/dashboard-dark-forecast.png b/docs/img/dashboard-dark-forecast.png deleted file mode 100644 index 76707db..0000000 Binary files a/docs/img/dashboard-dark-forecast.png and /dev/null differ diff --git a/docs/img/dashboard-dark.png b/docs/img/dashboard-dark.png deleted file mode 100644 index 941b031..0000000 Binary files a/docs/img/dashboard-dark.png and /dev/null differ diff --git a/docs/img/dashboard.jpg b/docs/img/dashboard.jpg new file mode 100644 index 0000000..ee58d23 Binary files /dev/null and b/docs/img/dashboard.jpg differ diff --git a/scripts/dev_proxy.py b/scripts/dev_proxy.py index d7f5f7d..9b541f5 100644 --- a/scripts/dev_proxy.py +++ b/scripts/dev_proxy.py @@ -2,8 +2,9 @@ live server, so browser-side changes can be checked against real data before deploy. Usage: python scripts/dev_proxy.py [port] -/ is src/static/dashboard.html, /static/... any file in src/static (e.g. the -console preview at /static/console.html), everything else the live server.""" +/ is src/static/dashboard.html, /static/... any file in src/static (with HTTP +range requests, which the map's PMTiles basemap needs), everything else the +live server.""" import http.server import mimetypes diff --git a/src/static/basemap/README.md b/src/static/basemap/README.md index ff36e66..e681c3a 100644 --- a/src/static/basemap/README.md +++ b/src/static/basemap/README.md @@ -1,6 +1,6 @@ # Basemap -`ping-basin.pmtiles` is the map under the console (`console.html`): a +`ping-basin.pmtiles` is the map under the dashboard (`dashboard.html`): a [Protomaps](https://protomaps.com) vector extract of the Ping basin, zoom 0-12 (drawn larger beyond that), 15 MB. The site serves it like any static file; the browser reads it in pieces with HTTP range requests (ServeDir answers them, diff --git a/src/static/console.html b/src/static/console.html deleted file mode 100644 index 79ed960..0000000 --- a/src/static/console.html +++ /dev/null @@ -1,2120 +0,0 @@ - - - - - - Ping River Monitor · Chiang Mai water levels and flood outlook - - - - - - - - - - - - - - -
-
- -
Ping River MonitorChiang Mai · Northern Thailand
-
- -
-
-
- - -
- - -
-
- -
-
-
-
- - -
- -
- - - -
- -
-
Loading gauges…
- -
- Normal - Within 0.5 m - Warning - Danger - No data -
-
- -
-
-
- - - -
-
-
- Ping River - Tributaries - Gauge · colour = status -
- - - -
-

-
- - -
- - - - - - -
- - - - - - diff --git a/src/static/dashboard.html b/src/static/dashboard.html index dde444f..aa2c38c 100644 --- a/src/static/dashboard.html +++ b/src/static/dashboard.html @@ -1,13 +1,13 @@ - + Ping River Live Monitor · Chiang Mai Water Levels & Flood Forecast - - + + @@ -16,618 +16,603 @@ + - + -
-
-
-
≋
-
-

Ping River Live Monitor

-

Current water level and discharge across Northern Thailand

+
+
+ +
Ping River Live MonitorChiang Mai · Northern Thailand
+
+ +
+
+
+ + +
+ + +
+
+ + + +
+
+
+
+ + +
+ +
+ + + +
+
-
-
LIVE DATA
- - - - - +
Loading gauges…
+ -
+
+ Normal + Within 0.5 m + Warning + Danger + No data +
+ - - - - -
-
Reporting stations
—
RID gauges with current readings
-
Chiang Mai river flow
—
P.1 Nawarat Bridge · m³/s
-
Most stressed gauge
—
Awaiting station data
-
Last updated
—
Loading latest readings
-
- -
-
-
-
-
Station flow mapRiver width, colour & dash speed follow live discharge
-
- -
-
Flow status
-
Low < 25 m³/s
-
Moderate 25–100
-
High 100–250
-
Very high > 250
-
River · no nearby gauge
-
River · gauge colour, dashes = flow
-
Rainfall · 24 h - -
-
Light 0.1–10 mm
-
Moderate 10–35
-
Heavy 35–90
-
Very heavy 90–150
-
Extreme > 150
-
Other markers
-
Gauge · no recent data
-
+ Water-level sensor · colour = % of bank height
-
-
-
-
Loading river conditions…
-
Map data could not be loaded.
-
—
-
- - -
- - - -
-
-

Station history

Select a station to load the last 7 days

-
- - - – - -
-
-
Click any station on the map or in the list to see its history
-
- - - - -
+ Web (no install)

+

Unofficial community service, best effort. For official warnings follow ThaiWater / TMD / your district office.

+ + +
- + diff --git a/src/static/fonts/README.md b/src/static/fonts/README.md index b53835e..6e8b00c 100644 --- a/src/static/fonts/README.md +++ b/src/static/fonts/README.md @@ -10,4 +10,4 @@ SIL Open Font License 1.1 (`*-OFL.txt` next to them). Both files are Google Fonts' woff2 subsets (`fonts.googleapis.com/css2?family=Inter:wght@400..700` and `family=Noto+Sans+Thai:wght@400..700`, fetched with a woff2-capable user agent). -The `unicode-range` of each `@font-face` in `console.html` matches its subset. +The `unicode-range` of each `@font-face` in `dashboard.html` matches its subset. diff --git a/tests/test_console.py b/tests/test_console.py deleted file mode 100644 index 79a82ae..0000000 --- a/tests/test_console.py +++ /dev/null @@ -1,130 +0,0 @@ -"""The console dashboard (src/static/console.html, docs/DASHBOARD_REDESIGN.md). - -Served at /static/console.html while it is built; it replaces dashboard.html -once it covers every feature. The rules are the dashboard's: every fetched -path is routed, every string has EN and TH, no emoji in the interface. -""" - -import re -from pathlib import Path - -STATIC = Path(__file__).parents[1] / "src" / "static" -CONSOLE = STATIC / "console.html" -ROUTER = Path(__file__).parents[1] / "rust" / "collector" / "src" / "web" / "mod.rs" - - -def _html() -> str: - return CONSOLE.read_text(encoding="utf-8") - - -def _body(html: str) -> str: - return html[html.index("") : html.index("