feat(dashboard): console phase 4 - 2024 replay, simulation, replaces the old page
The console is now the dashboard at / (src/static/dashboard.html); the old page and console.html are gone. - Replay of the October 2024 flood (flood-2024-all.json): the page's clock, verdict, list, markers, flood zones and panel follow the replay; the panel charts the season on fixed axes with the 2024 model's 24 h peak. Hourly while the model alerts or P.1 is above 3.50 m, faster through quiet days; pause and drag. Rain, basin stations and the 5-minute refresh are off during the replay (today's data). - ?demo_level= and ?demo_rise= simulate P.1. A violet REPLAY / amber SIMULATION bar, the top bar's KPI and the P.1 panel say so; the mode is drawn from state.mode alone, so a refresh or language switch cannot relabel either as live. - History: rows without discharge_percent are ThaiWater's copy of the gauge (night hours RID publishes late), with a different rating (P.1: 26 against RID's 54 m3/s); their discharge is not drawn for gauges with RID discharge. The discharge strip has headroom so its label stays clear of the line. - Swap: the old page's title, description, Open Graph and JSON-LD tags; no noindex; tests/test_dashboard.py = console tests + the old checks that still apply (one P.1 level, SEO files) + a replay/simulation labelling test. - Docs: README screenshot (docs/img/dashboard.jpg, replacing two unused images), CLAUDE.md, CONTRIBUTING.md, FLOOD_FORECASTING.md (where the model shows), DASHBOARD_REDESIGN.md (phase 4 done, mode rules). Deploy needs a restart: the server reads dashboard.html at start.
This commit is contained in:
grabowski committed
1 parent
ffd3030352
commit
cf10f2e4c8
15 files changed
+2487
-4667
No files matched your search
@@ -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
|
||||
|
||||
+2
-1
@@ -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`.
|
||||
|
||||
@@ -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/).
|
||||
|
||||
|
||||
|
||||
[](https://git.b4l.co.th/B4L/Northern-Thailand-Ping-River-Monitor/actions)
|
||||
[](https://git.b4l.co.th/B4L/Northern-Thailand-Ping-River-Monitor/actions)
|
||||
[](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/)
|
||||
|
||||
|
||||
+20
-18
@@ -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:** <https://water.buildfor.life/static/console.html>, 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
|
||||
<http://localhost:8765/static/console.html>. 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 <http://localhost:8765/>.
|
||||
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.
|
||||
+18
-11
@@ -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
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 522 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 201 KiB |
@@ -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
|
||||
|
||||
@@ -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,
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
+2279
-2186
File diff suppressed because it is too large.
Load diff
@@ -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.
|
||||
@@ -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("<body>") : html.index("<script src=")]
|
||||
|
||||
|
||||
def _tables(html: str) -> dict:
|
||||
start = html.index("const STRINGS = {")
|
||||
end = html.index("// Thai unless the visitor's browser", start)
|
||||
block = html[start:end]
|
||||
tables = {}
|
||||
for lang in ("en", "th"):
|
||||
section = re.search(rf"\n {lang}: {{\n(.*?)\n }},\n", block, re.S)
|
||||
assert section, f"{lang} table not found in STRINGS"
|
||||
tables[lang] = set(re.findall(r"^\s{12}'([^']+)':", section.group(1), re.M))
|
||||
return tables
|
||||
|
||||
|
||||
def test_every_fetched_path_is_routed():
|
||||
routes = set(re.findall(r'\.route\(\s*"([^"]+)"', ROUTER.read_text("utf-8")))
|
||||
patterns = [
|
||||
re.compile("^" + re.sub(r"\\\{[^}]+\\\}", "[^/]+", re.escape(r)) + "$")
|
||||
for r in routes
|
||||
]
|
||||
fetched = set(re.findall(r"fetch\(\s*[`'\"](/[^`'\"?$]*)", _html()))
|
||||
assert {"/stations", "/forecast", "/api/notifications"} <= fetched
|
||||
missing = [
|
||||
p
|
||||
for p in fetched
|
||||
if not p.startswith("/static/")
|
||||
and not any(r.match(p.rstrip("/") or "/") for r in patterns)
|
||||
and not any(r.startswith(p) for r in routes)
|
||||
]
|
||||
assert not missing, f"console fetches paths the server does not route: {missing}"
|
||||
|
||||
|
||||
def test_static_files_it_loads_exist():
|
||||
for path in re.findall(
|
||||
r"/static/([\w./-]+\.(?:geojson|json|woff2|pmtiles))", _html()
|
||||
):
|
||||
assert (STATIC / path).is_file(), path
|
||||
|
||||
|
||||
def test_translations_cover_both_languages():
|
||||
tables = _tables(_html())
|
||||
assert len(tables["en"]) > 100
|
||||
assert not tables["en"] - tables["th"], sorted(tables["en"] - tables["th"])
|
||||
assert not tables["th"] - tables["en"], sorted(tables["th"] - tables["en"])
|
||||
|
||||
|
||||
def test_markup_keys_exist():
|
||||
html = _html()
|
||||
used = set(re.findall(r'data-i18n(?:-placeholder|-title|-aria)?="([^"]+)"', html))
|
||||
assert not used - _tables(html)["en"], sorted(used - _tables(html)["en"])
|
||||
|
||||
|
||||
def test_aria_labels_are_translated():
|
||||
for match in re.finditer(r'<[^>]*\saria-label="[^"]+"[^>]*>', _body(_html())):
|
||||
assert "data-i18n-aria" in match.group(0), match.group(0)[:120]
|
||||
|
||||
|
||||
def test_no_emoji_in_the_interface():
|
||||
emoji = re.compile("[\U0001f000-\U0001faff\u2600-\u27bf\u2b00-\u2bff\ufe0f]")
|
||||
found = sorted(set(emoji.findall(_html())))
|
||||
assert not found, f"emoji in console.html: {found}"
|
||||
|
||||
|
||||
def test_thai_first_and_river_time():
|
||||
html = _html()
|
||||
assert "if (code.startsWith('th')) return 'th';" in html
|
||||
assert "const TZ = 'Asia/Bangkok';" in html
|
||||
assert "'+07:00'" in html # naive API timestamps are pinned to Bangkok
|
||||
|
||||
|
||||
def test_fonts_are_self_hosted_with_their_licence():
|
||||
html = _html()
|
||||
assert "fonts.googleapis.com" not in html
|
||||
for name in ("inter-latin.woff2", "noto-sans-thai-thai.woff2"):
|
||||
assert f"/static/fonts/{name}" in html
|
||||
assert (STATIC / "fonts" / "inter-OFL.txt").is_file()
|
||||
assert (STATIC / "fonts" / "noto-sans-thai-OFL.txt").is_file()
|
||||
|
||||
|
||||
def test_basemap_is_self_hosted():
|
||||
html = _html()
|
||||
assert "/static/basemap/ping-basin.pmtiles" in html
|
||||
assert "protomaps-leaflet@5.1.0" in html and 'integrity="sha384-' in html
|
||||
# the attribution OpenStreetMap's licence requires
|
||||
assert "openstreetmap.org/copyright" in html
|
||||
|
||||
|
||||
def test_basin_stations_have_a_fallback_feed():
|
||||
html = _html()
|
||||
assert "fetch('/api/hii/waterlevel/latest')" in html
|
||||
assert "fetch('/sensors/thaiwater')" in html
|
||||
|
||||
|
||||
def test_history_reaches_today():
|
||||
"""/measurements/history returns the oldest rows first and stops at its
|
||||
limit (50,000 by default): "All" must ask for more, or P.1 ends in 2024."""
|
||||
assert "hours=${hours}&limit=100000" in _html()
|
||||
dashboard = (STATIC / "dashboard.html").read_text(encoding="utf-8")
|
||||
assert "&limit=100000" in dashboard
|
||||
|
||||
|
||||
def test_skill_loads_only_when_opened():
|
||||
html = _html()
|
||||
assert "fetch('/api/forecast/skill?station_code=P.1&horizon=24')" in html
|
||||
assert "sk.addEventListener('toggle'" in html
|
||||
|
||||
|
||||
def test_preview_is_not_indexed():
|
||||
assert '<meta name="robots" content="noindex">' in _html()
|
||||
+149
-187
@@ -1,47 +1,20 @@
|
||||
"""The dashboard served at / (src/static/dashboard.html, docs/DASHBOARD_REDESIGN.md).
|
||||
|
||||
Rules: every fetched path is routed, every string has EN and TH (Thai first),
|
||||
no emoji in the interface, and a replay or a simulation is never shown as
|
||||
live data.
|
||||
"""
|
||||
|
||||
import re
|
||||
from pathlib import Path
|
||||
|
||||
DASHBOARD_PATH = Path(__file__).parents[1] / "src" / "static" / "dashboard.html"
|
||||
ROUTER_PATH = (
|
||||
Path(__file__).parents[1] / "rust" / "collector" / "src" / "web" / "mod.rs"
|
||||
)
|
||||
STATIC = Path(__file__).parents[1] / "src" / "static"
|
||||
DASHBOARD = STATIC / "dashboard.html"
|
||||
ROUTER = Path(__file__).parents[1] / "rust" / "collector" / "src" / "web" / "mod.rs"
|
||||
|
||||
|
||||
def _rust_routes() -> set:
|
||||
"""Paths the website serves (ping-collector's axum router)."""
|
||||
source = ROUTER_PATH.read_text(encoding="utf-8")
|
||||
return set(re.findall(r'\.route\(\s*"([^"]+)"', source))
|
||||
|
||||
|
||||
def test_every_api_path_the_dashboard_fetches_is_served():
|
||||
html = DASHBOARD_PATH.read_text(encoding="utf-8")
|
||||
routes = _rust_routes()
|
||||
patterns = [
|
||||
re.compile("^" + re.sub(r"\\\{[^}]+\\\}", "[^/]+", re.escape(r)) + "$")
|
||||
for r in routes
|
||||
]
|
||||
fetched = set(re.findall(r"fetch\(\s*[`'\"](/[^`'\"?$]*)", html))
|
||||
assert fetched, "no fetch() calls found"
|
||||
missing = [
|
||||
path
|
||||
for path in fetched
|
||||
if not path.startswith("/static/")
|
||||
and not any(p.match(path.rstrip("/") or "/") for p in patterns)
|
||||
and not any(r.startswith(path) for r in routes)
|
||||
]
|
||||
assert not missing, f"dashboard fetches paths the server does not route: {missing}"
|
||||
|
||||
|
||||
def test_dashboard_contains_live_map_and_flow_visualization():
|
||||
html = DASHBOARD_PATH.read_text(encoding="utf-8")
|
||||
|
||||
assert 'id="station-map"' in html
|
||||
assert 'id="river-flow"' in html
|
||||
assert "fetch('/stations')" in html or 'fetch("/stations")' in html
|
||||
assert (
|
||||
"fetch('/measurements/latest" in html or 'fetch("/measurements/latest' in html
|
||||
)
|
||||
assert "leaflet" in html.lower()
|
||||
def _html() -> str:
|
||||
return DASHBOARD.read_text(encoding="utf-8")
|
||||
|
||||
|
||||
def _body(html: str) -> str:
|
||||
@@ -50,92 +23,15 @@ def _body(html: str) -> str:
|
||||
return html[html.index("<body>") : html.index("<script src=")]
|
||||
|
||||
|
||||
def test_dashboard_explains_flow_legend_and_refresh():
|
||||
body = _body(DASHBOARD_PATH.read_text(encoding="utf-8"))
|
||||
|
||||
assert 'data-i18n="legend.flow"' in body
|
||||
assert 'data-i18n="stat.updated"' in body
|
||||
assert 'data-i18n="action.refresh"' in body
|
||||
def _routes() -> set:
|
||||
"""Paths the website serves (ping-collector's axum router)."""
|
||||
return set(re.findall(r'\.route\(\s*"([^"]+)"', ROUTER.read_text("utf-8")))
|
||||
|
||||
|
||||
def test_dashboard_uses_mapped_river_network_instead_of_station_connections():
|
||||
html = DASHBOARD_PATH.read_text(encoding="utf-8")
|
||||
river_network = DASHBOARD_PATH.with_name("ping-river-network.geojson")
|
||||
|
||||
assert river_network.exists()
|
||||
assert "fetch('/static/ping-river-network.geojson')" in html
|
||||
assert "mainBasin.map" not in html
|
||||
|
||||
|
||||
def test_dashboard_loads_additional_thaiwater_sensors():
|
||||
html = DASHBOARD_PATH.read_text(encoding="utf-8")
|
||||
|
||||
assert "fetch('/sensors/thaiwater')" in html
|
||||
assert 'data-i18n="sensors.title"' in _body(html)
|
||||
assert 'id="station-search"' in html
|
||||
assert "applyStationSearch" in html
|
||||
|
||||
|
||||
def test_dashboard_has_seo_and_indexing_files():
|
||||
html = DASHBOARD_PATH.read_text(encoding="utf-8")
|
||||
static_dir = DASHBOARD_PATH.parent
|
||||
|
||||
assert '<meta name="description"' in html
|
||||
assert '<link rel="canonical" href="https://water.buildfor.life/">' in html
|
||||
assert 'property="og:title"' in html
|
||||
assert 'rel="icon"' in html
|
||||
|
||||
robots = (static_dir / "robots.txt").read_text(encoding="utf-8")
|
||||
assert "Sitemap: https://water.buildfor.life/sitemap.xml" in robots
|
||||
assert "<loc>https://water.buildfor.life/</loc>" in (
|
||||
static_dir / "sitemap.xml"
|
||||
).read_text(encoding="utf-8")
|
||||
assert "Ping River Live Monitor" in (static_dir / "llms.txt").read_text(
|
||||
encoding="utf-8"
|
||||
)
|
||||
|
||||
assert {"/robots.txt", "/llms.txt", "/sitemap.xml"} <= _rust_routes()
|
||||
|
||||
|
||||
def test_dashboard_shows_hii_rainfall_layer():
|
||||
html = DASHBOARD_PATH.read_text(encoding="utf-8")
|
||||
|
||||
assert "fetch('/api/hii/rainfall/latest')" in html
|
||||
assert "fetch('/api/hii/waterlevel/latest')" in html
|
||||
assert "renderRainLayer" in html
|
||||
assert "rain-toggle" in html
|
||||
body = _body(html)
|
||||
assert 'data-i18n="legend.rain"' in body
|
||||
# TMD rain classes on the legend
|
||||
assert 'data-i18n="legend.rain.heavy"' in body
|
||||
assert 'data-i18n="legend.rain.extreme"' in body
|
||||
|
||||
|
||||
def test_dashboard_loads_station_history_chart():
|
||||
html = DASHBOARD_PATH.read_text(encoding="utf-8")
|
||||
|
||||
assert 'id="history-card"' in html
|
||||
assert "/api/forecast/history/" in html
|
||||
assert "'chart.model'" in html
|
||||
assert "PostgreSQL" not in html
|
||||
assert "/measurements/history/" in html
|
||||
assert "history-chart" in html
|
||||
# Date-range picker alongside the quick-range dropdown
|
||||
assert 'id="history-start"' in html
|
||||
assert 'id="history-end"' in html
|
||||
assert 'data-i18n="range.7d"' in _body(html)
|
||||
assert 'data-i18n="range.90d"' in _body(html)
|
||||
|
||||
|
||||
def _extract_lang_tables(html: str) -> dict:
|
||||
"""Pull the `en:` / `th:` key sets out of the STRINGS literal.
|
||||
|
||||
Parsing the JS with a regex is crude, but it is enough to catch the failure
|
||||
that matters: a key added to one language and forgotten in the other, which
|
||||
silently falls back to English for Thai readers.
|
||||
"""
|
||||
import re
|
||||
|
||||
def _tables(html: str) -> dict:
|
||||
"""The `en:` / `th:` key sets of the STRINGS literal. Crude, but it
|
||||
catches a key added to one language and forgotten in the other, which
|
||||
silently falls back to English for Thai readers."""
|
||||
start = html.index("const STRINGS = {")
|
||||
end = html.index("// Thai unless the visitor's browser", start)
|
||||
block = html[start:end]
|
||||
@@ -147,86 +43,152 @@ def _extract_lang_tables(html: str) -> dict:
|
||||
return tables
|
||||
|
||||
|
||||
def test_dashboard_translations_cover_both_languages():
|
||||
html = DASHBOARD_PATH.read_text(encoding="utf-8")
|
||||
tables = _extract_lang_tables(html)
|
||||
|
||||
assert len(tables["en"]) > 100, "expected the full English string table"
|
||||
missing_th = tables["en"] - tables["th"]
|
||||
missing_en = tables["th"] - tables["en"]
|
||||
assert not missing_th, f"keys missing a Thai translation: {sorted(missing_th)}"
|
||||
assert (
|
||||
not missing_en
|
||||
), f"Thai-only keys with no English fallback: {sorted(missing_en)}"
|
||||
def test_every_fetched_path_is_routed():
|
||||
routes = _routes()
|
||||
patterns = [
|
||||
re.compile("^" + re.sub(r"\\\{[^}]+\\\}", "[^/]+", re.escape(r)) + "$")
|
||||
for r in routes
|
||||
]
|
||||
fetched = set(re.findall(r"fetch\(\s*[`'\"](/[^`'\"?$]*)", _html()))
|
||||
assert {"/stations", "/forecast", "/api/notifications"} <= fetched
|
||||
missing = [
|
||||
p
|
||||
for p in fetched
|
||||
if not p.startswith("/static/")
|
||||
and not any(r.match(p.rstrip("/") or "/") for r in patterns)
|
||||
and not any(r.startswith(p) for r in routes)
|
||||
]
|
||||
assert not missing, f"dashboard fetches paths the server does not route: {missing}"
|
||||
|
||||
|
||||
def test_dashboard_i18n_markup_keys_exist():
|
||||
"""Every data-i18n attribute must resolve to a real string key."""
|
||||
import re
|
||||
def test_static_files_it_loads_exist():
|
||||
paths = re.findall(r"/static/([\w./-]+\.(?:geojson|json|woff2|pmtiles))", _html())
|
||||
assert "ping-river-network.geojson" in paths # mapped rivers, not lines
|
||||
assert "flood-2024-all.json" in paths
|
||||
for path in paths:
|
||||
assert (STATIC / path).is_file(), path
|
||||
|
||||
html = DASHBOARD_PATH.read_text(encoding="utf-8")
|
||||
keys = _extract_lang_tables(html)["en"]
|
||||
|
||||
def test_translations_cover_both_languages():
|
||||
tables = _tables(_html())
|
||||
assert len(tables["en"]) > 100
|
||||
assert not tables["en"] - tables["th"], sorted(tables["en"] - tables["th"])
|
||||
assert not tables["th"] - tables["en"], sorted(tables["th"] - tables["en"])
|
||||
|
||||
|
||||
def test_markup_keys_exist():
|
||||
html = _html()
|
||||
used = set(re.findall(r'data-i18n(?:-placeholder|-title|-aria)?="([^"]+)"', html))
|
||||
unknown = used - keys
|
||||
assert not unknown, f"markup references undefined string keys: {sorted(unknown)}"
|
||||
assert not used - _tables(html)["en"], sorted(used - _tables(html)["en"])
|
||||
|
||||
|
||||
def test_dashboard_is_mobile_portrait_safe():
|
||||
html = DASHBOARD_PATH.read_text(encoding="utf-8")
|
||||
|
||||
# The header row overflowed a 412 px Android viewport by 64 px until it wrapped
|
||||
assert "flex-wrap: wrap" in html
|
||||
assert "overflow-x: hidden" in html
|
||||
assert 'id="lang-toggle"' in html
|
||||
assert "ping-monitor-lang" in html # remembered language choice
|
||||
|
||||
|
||||
def test_dashboard_translates_user_visible_aria_labels():
|
||||
def test_aria_labels_are_translated():
|
||||
"""A Thai page must not hand screen-reader users English landmarks."""
|
||||
import re
|
||||
|
||||
html = DASHBOARD_PATH.read_text(encoding="utf-8")
|
||||
body = _body(html)
|
||||
for match in re.finditer(r'<[^>]*\saria-label="[^"]+"[^>]*>', body):
|
||||
tag = match.group(0)
|
||||
if "data-i18n-aria" in tag or 'id="lang-toggle"' in tag:
|
||||
continue # the toggle sets its own label per language in JS
|
||||
raise AssertionError(f"aria-label without a translation key: {tag[:120]}")
|
||||
for match in re.finditer(r'<[^>]*\saria-label="[^"]+"[^>]*>', _body(_html())):
|
||||
assert "data-i18n-aria" in match.group(0), match.group(0)[:120]
|
||||
|
||||
|
||||
def test_dashboard_keeps_simulation_and_replay_labels_on_language_switch():
|
||||
"""Relabelling a pinned simulation as LIVE would present fake flood data as real."""
|
||||
html = DASHBOARD_PATH.read_text(encoding="utf-8")
|
||||
|
||||
assert "setLiveIndicator(state.liveMode || 'live', state.liveLabelKey)" in html
|
||||
assert "if (!state.replayTimer) setLiveIndicator('live');" not in html
|
||||
def test_no_emoji_in_the_interface():
|
||||
emoji = re.compile("[\U0001f000-\U0001faff\u2600-\u27bf\u2b00-\u2bff\ufe0f]")
|
||||
found = sorted(set(emoji.findall(_html())))
|
||||
assert not found, f"emoji in dashboard.html: {found}"
|
||||
|
||||
|
||||
def test_dashboard_default_language_respects_browser_order():
|
||||
"""navigator.languages = ['th-TH','en-US'] must resolve to Thai, not English."""
|
||||
html = DASHBOARD_PATH.read_text(encoding="utf-8")
|
||||
|
||||
assert "langs.some" not in html # the old any-English-wins test
|
||||
def test_thai_first_and_river_time():
|
||||
"""navigator.languages = ['th-TH','en-US'] must resolve to Thai."""
|
||||
html = _html()
|
||||
assert "if (code.startsWith('th')) return 'th';" in html
|
||||
assert "ping-monitor-lang" in html # remembered language choice
|
||||
assert "const TZ = 'Asia/Bangkok';" in html
|
||||
assert "'+07:00'" in html # naive API timestamps are pinned to Bangkok
|
||||
|
||||
|
||||
def test_dashboard_shows_one_current_river_level():
|
||||
"""The verdict banner and the P.1 outlook must not disagree about "now".
|
||||
def test_phone_safe():
|
||||
html = _html()
|
||||
assert "overflow-x: hidden" in html
|
||||
assert 'name="viewport"' in html
|
||||
|
||||
Production served 1.66 m in the banner and 1.52 m in the outlook at the
|
||||
same moment: the banner used the latest measurement, the outlook used the
|
||||
forecast payload's current_level from an older as_of.
|
||||
|
||||
def test_fonts_are_self_hosted_with_their_licence():
|
||||
html = _html()
|
||||
assert "fonts.googleapis.com" not in html
|
||||
for name in ("inter-latin.woff2", "noto-sans-thai-thai.woff2"):
|
||||
assert f"/static/fonts/{name}" in html
|
||||
assert (STATIC / "fonts" / "inter-OFL.txt").is_file()
|
||||
assert (STATIC / "fonts" / "noto-sans-thai-OFL.txt").is_file()
|
||||
|
||||
|
||||
def test_basemap_is_self_hosted():
|
||||
html = _html()
|
||||
assert "/static/basemap/ping-basin.pmtiles" in html
|
||||
assert "protomaps-leaflet@5.1.0" in html and 'integrity="sha384-' in html
|
||||
# the attribution OpenStreetMap's licence requires
|
||||
assert "openstreetmap.org/copyright" in html
|
||||
|
||||
|
||||
def test_basin_stations_and_rain_have_their_feeds():
|
||||
html = _html()
|
||||
assert "fetch('/api/hii/waterlevel/latest')" in html
|
||||
assert "fetch('/sensors/thaiwater')" in html # fallback feed
|
||||
assert "fetch('/api/hii/rainfall/latest')" in html
|
||||
|
||||
|
||||
def test_history_reaches_today():
|
||||
"""/measurements/history returns the oldest rows first and stops at its
|
||||
limit (50,000 by default): "All" must ask for more, or P.1 ends in 2024."""
|
||||
html = _html()
|
||||
assert "hours=${hours}&limit=100000" in html
|
||||
assert "/api/forecast/history/" in html
|
||||
|
||||
|
||||
def test_skill_loads_only_when_opened():
|
||||
html = _html()
|
||||
assert "fetch('/api/forecast/skill?station_code=P.1&horizon=24')" in html
|
||||
assert "sk.addEventListener('toggle'" in html
|
||||
|
||||
|
||||
def test_one_current_river_level():
|
||||
"""The verdict and the P.1 outlook must not disagree about "now".
|
||||
|
||||
The old dashboard once showed 1.66 m in the banner and 1.52 m in the
|
||||
outlook: the outlook used the forecast payload's current_level from an
|
||||
older as_of. Every view reads the gauge's level from one station record.
|
||||
"""
|
||||
html = DASHBOARD_PATH.read_text(encoding="utf-8")
|
||||
html = _html()
|
||||
assert "current_level" not in html
|
||||
assert "const p1 = state.byCode.get('P.1');" in html
|
||||
|
||||
# One arbitrated writer, freshest-wins
|
||||
assert "function setP1Level(" in html
|
||||
assert "state.p1NowAt" in html
|
||||
|
||||
# Neither feed may assign the level directly any more
|
||||
assert "state.p1Now = Number(p1.water_level)" not in html
|
||||
assert "state.p1Now = row.current_level" not in html
|
||||
def test_replay_and_simulation_are_never_shown_as_live():
|
||||
"""Relabelling a replay or a pinned simulation as live would present
|
||||
2024 or invented flood data as today's."""
|
||||
html = _html()
|
||||
# the mode bar and the data-age KPI are drawn from state.mode alone, and
|
||||
# redrawn on a language switch
|
||||
assert "bar.hidden = state.mode === 'live';" in html
|
||||
assert "if (newest && state.mode === 'live') {" in html
|
||||
assert "renderStats();\n renderModebar();\n }" in html
|
||||
# the 5-minute refresh would replace the replay frame with today's data
|
||||
assert "if (state.mode !== 'replay') { load(); loadStats(); }" in html
|
||||
# the demo hooks
|
||||
assert "params.get('demo_level')" in html and "params.has('demo_rise')" in html
|
||||
for key in ("mode.replay", "mode.sim", "sim.pinned", "sim.rising"):
|
||||
assert f"'{key}':" in html
|
||||
|
||||
# The outlook renders the arbitrated level, and never a peak below it
|
||||
assert "const shownNow = state.p1Now != null" in html
|
||||
assert "Math.max(Number(row.predicted_max_level), shownNow)" in html
|
||||
|
||||
def test_seo_and_indexing_files():
|
||||
html = _html()
|
||||
assert '<meta name="description"' in html
|
||||
assert '<link rel="canonical" href="https://water.buildfor.life/">' in html
|
||||
assert 'property="og:title"' in html
|
||||
assert "application/ld+json" in html
|
||||
assert 'rel="icon"' in html
|
||||
assert "noindex" not in html
|
||||
|
||||
robots = (STATIC / "robots.txt").read_text(encoding="utf-8")
|
||||
assert "Sitemap: https://water.buildfor.life/sitemap.xml" in robots
|
||||
sitemap = (STATIC / "sitemap.xml").read_text(encoding="utf-8")
|
||||
assert "<loc>https://water.buildfor.life/</loc>" in sitemap
|
||||
llms = (STATIC / "llms.txt").read_text(encoding="utf-8")
|
||||
assert "Ping River Live Monitor" in llms
|
||||
assert {"/robots.txt", "/llms.txt", "/sitemap.xml"} <= _routes()
|
||||
Reference in new issue
Block a user