From b7679bb3847860a6ee1a7bb77321219b8372dc6a Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Thu, 28 May 2026 16:46:23 +0100
Subject: [PATCH] fix(admin/system): clear the "no samples" overlay once live
 data arrives
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The metric detail page showed the empty overlay ("No samples in this
range yet — check back in a minute") whenever the initial history fetch
returned zero points, but nothing ever hid it again. Live ticks then
pushed samples in, drew the chart and filled the now/peak/avg/min stats
— while the overlay stayed up, contradicting the visible data.

Make _renderChart the single authority for the overlay: hidden whenever
there are points, shown only when there are none. Live data clears it as
soon as the first sample lands; switching to a genuinely empty range
brings it back.

Signed-off-by: librelad <librelad@digitalangels.vip>
---
 .../js/components/admin/system-metric-page.js       | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/containers/libreportal/frontend/js/components/admin/system-metric-page.js b/containers/libreportal/frontend/js/components/admin/system-metric-page.js
index 165d016..33d706b 100644
--- a/containers/libreportal/frontend/js/components/admin/system-metric-page.js
+++ b/containers/libreportal/frontend/js/components/admin/system-metric-page.js
@@ -203,7 +203,6 @@ class SystemMetricPage {
             this.points = [];
         }
         if (loading) loading.hidden = true;
-        if (this.points.length === 0 && empty) empty.hidden = false;
         this._renderChart();
         this._renderStats();
         this._renderFootMeta();
@@ -307,7 +306,17 @@ class SystemMetricPage {
         svg.setAttribute('viewBox', `0 0 ${W} ${H}`);
         svg.setAttribute('width', W);
         svg.setAttribute('height', H);
-        if (!this.points.length) { svg.innerHTML = ''; return; }
+        // Single source of truth for the empty overlay: it tracks whether we
+        // actually have points. Without this the "no samples" message, shown
+        // by _loadRange when history came back empty, never cleared once live
+        // ticks started filling the chart + stats — a confusing contradiction.
+        const empty = root.querySelector('.sys-detail-empty');
+        if (!this.points.length) {
+            svg.innerHTML = '';
+            if (empty) empty.hidden = false;
+            return;
+        }
+        if (empty) empty.hidden = true;
         const padL = 64, padR = 24, padT = 18, padB = 36;
         const innerW = Math.max(1, W - padL - padR);
         const innerH = Math.max(1, H - padT - padB);