From 32e455783ab244ea5e8e49f162e5d54a49d1752c Mon Sep 17 00:00:00 2001
From: grabowski <berwn@buildfor.life>
Date: Sun, 9 Aug 2026 18:03:41 +0700
Subject: [PATCH] fix: harden loadHistory against race conditions and canvas
 reuse

---
 src/static/dashboard.html | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/static/dashboard.html b/src/static/dashboard.html
index 8590509..7d4b415 100644
--- a/src/static/dashboard.html
+++ b/src/static/dashboard.html
@@ -206,7 +206,7 @@
 <script>
 (function () {
     'use strict';
-    const state = { map: null, layers: [], markers: new Map(), hasFit: false, historyChart: null, selectedStation: null };
+    const state = { map: null, layers: [], markers: new Map(), hasFit: false, historyChart: null, selectedStation: null, historyRequestId: 0 };
     const $ = (id) => document.getElementById(id);
 
     function flowColor(flow) {
@@ -318,25 +318,26 @@
 
     async function loadHistory(stationCode) {
         state.selectedStation = stationCode;
+        state.historyRequestId++;
+        const reqId = state.historyRequestId;
         $('history-title').textContent = `${stationCode} · PostgreSQL history`;
         $('history-status').textContent = 'Loading historical measurements…';
-        if (state.historyChart) { state.historyChart.destroy(); state.historyChart = null; }
         try {
             const response = await fetch(`/measurements/history/${encodeURIComponent(stationCode)}?hours=${$('history-range').value}`);
             if (!response.ok) throw new Error((await response.json()).detail || `HTTP ${response.status}`);
             const rows = await response.json();
+            if (reqId !== state.historyRequestId) return;
 
             // Downsample to daily averages to prevent browser freezing with 50k+ points
             const downsample = (data) => {
                 const buckets = {};
-                data.forEach((row, i) => {
+                data.forEach((row) => {
                     const date = new Date(row.timestamp);
                     const key = `${date.getUTCFullYear()}-${date.getUTCMonth()}-${date.getUTCDate()}`;
-                    if (!buckets[key]) buckets[key] = { ts: row.timestamp, discharge: [], level: [], count: 0 };
+                    if (!buckets[key]) buckets[key] = { ts: row.timestamp, discharge: [], level: [] };
                     const b = buckets[key];
                     if (row.discharge != null) b.discharge.push(row.discharge);
                     if (row.water_level != null) b.level.push(row.water_level);
-                    b.count++;
                 });
                 return Object.values(buckets).map((b) => ({
                     timestamp: b.ts,
@@ -344,8 +345,14 @@
                     water_level: b.level.length ? b.level.reduce((a, c) => a + c, 0) / b.level.length : null,
                 }));
             };
-
             const sampled = rows.length > 2000 ? downsample(rows) : rows;
+
+            // Safely clear existing chart instance
+            if (state.historyChart) { state.historyChart.destroy(); state.historyChart = null; }
+            // Clear any orphan Chart.js instance on the canvas
+            const existingChart = Chart.getChart($('history-chart'));
+            if (existingChart) existingChart.destroy();
+
             state.historyChart = new Chart($('history-chart'), {
                 type: 'line',
                 data: {
@@ -365,7 +372,7 @@
                     },
                     plugins: [{
                         id: 'flood-bands',
-                        beforeDraw(chart, _args, options) {
+                        beforeDraw(chart) {
                             const levelScale = chart.scales?.level;
                             if (!levelScale || levelScale.min == null) return;
                             const zones = [