From cbb1a26582dd04e77611be71ccf8ff012fb55890 Mon Sep 17 00:00:00 2001
From: nate <nate@forehead-gate.com>
Date: Wed, 18 Mar 2026 20:06:23 +0400
Subject: [PATCH] fix: trim chart runs in place and reduce to 25 to match SSR
 density

---
 apps/web/src/views/detail.ejs | 44 ++++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/apps/web/src/views/detail.ejs b/apps/web/src/views/detail.ejs
index fef6edf..26099de 100644
--- a/apps/web/src/views/detail.ejs
+++ b/apps/web/src/views/detail.ejs
@@ -179,25 +179,36 @@
       'us-west': '🇺🇸 US West', 'ap-southeast': '🇸🇬 AP Southeast'
     };
 
-    const MAX_RUNS = 50;
-    let chartPings = <%~ JSON.stringify(chartPings.map(p => ({
+    const MAX_RUNS = 25;
+    const chartPings = <%~ JSON.stringify(chartPings.map(p => ({
       latency_ms: p.latency_ms, region: p.region || '__none__',
       checked_at: p.checked_at, up: p.up, run_id: p.run_id || null,
       status_code: p.status_code
     }))) %>;
 
-    // Trim initial data to MAX_RUNS
-    (function() {
-      const seen = []; const s = new Set();
+    // Trim chartPings in place to keep only the newest MAX_RUNS runs
+    function trimChartRuns() {
+      // Collect runs sorted by avg time
+      const runAvg = {};
       for (const p of chartPings) {
         const rid = p.run_id || p.checked_at;
-        if (!s.has(rid)) { s.add(rid); seen.push(rid); }
+        if (!runAvg[rid]) runAvg[rid] = { sum: 0, n: 0 };
+        runAvg[rid].sum += new Date(p.checked_at).getTime();
+        runAvg[rid].n++;
       }
-      if (seen.length > MAX_RUNS) {
-        const stale = new Set(seen.slice(0, seen.length - MAX_RUNS));
-        chartPings = chartPings.filter(p => !stale.has(p.run_id || p.checked_at));
+      const sorted = Object.keys(runAvg).sort((a, b) =>
+        (runAvg[a].sum / runAvg[a].n) - (runAvg[b].sum / runAvg[b].n)
+      );
+      if (sorted.length <= MAX_RUNS) return;
+      const stale = new Set(sorted.slice(0, sorted.length - MAX_RUNS));
+      // Splice in place so all references see the change
+      for (let i = chartPings.length - 1; i >= 0; i--) {
+        if (stale.has(chartPings[i].run_id || chartPings[i].checked_at)) {
+          chartPings.splice(i, 1);
+        }
       }
-    })();
+    }
+    trimChartRuns();
 
     function renderChart() {
       const canvas = document.getElementById('chart-canvas');
@@ -480,22 +491,13 @@
         while (tbody.children.length > 100) tbody.removeChild(tbody.lastChild);
       }
 
-      // Chart — push new ping, evict oldest complete runs to cap at ~50 runs
+      // Chart — push new ping, trim oldest runs, re-render
       chartPings.push({
         latency_ms: ping.latency_ms, region: ping.region || '__none__',
         checked_at: ping.checked_at, up: ping.up, run_id: ping.run_id || null,
         status_code: ping.status_code
       });
-      // Count distinct runs and remove oldest runs as a group
-      const seen = []; const runSet = new Set();
-      for (const p of chartPings) {
-        const rid = p.run_id || p.checked_at;
-        if (!runSet.has(rid)) { runSet.add(rid); seen.push(rid); }
-      }
-      if (seen.length > MAX_RUNS) {
-        const stale = new Set(seen.slice(0, seen.length - MAX_RUNS));
-        chartPings = chartPings.filter(p => !stale.has(p.run_id || p.checked_at));
-      }
+      trimChartRuns();
       renderChart();
     });
   </script>