From b550f630052395107a52934c69acde66bdf7e80f Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Tue, 31 Mar 2026 17:48:39 -0500
Subject: [PATCH] Always show data timestamp in timeline bar, even with single
 time

---
 assets/js/propagation_map_hook.js | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/assets/js/propagation_map_hook.js b/assets/js/propagation_map_hook.js
index 7bffbb2f..ebebf9eb 100644
--- a/assets/js/propagation_map_hook.js
+++ b/assets/js/propagation_map_hook.js
@@ -688,16 +688,36 @@ export const PropagationMap = {
   },
 
   renderTimeline() {
-    if (!this.timelineEl || this.timelineData.length <= 1) {
+    if (!this.timelineEl || this.timelineData.length === 0) {
       if (this.timelineEl) this.timelineEl.style.display = "none"
       return
     }
 
+    // Single time: show as a simple data timestamp, no buttons
+    if (this.timelineData.length === 1) {
+      const dt = new Date(this.timelineData[0].time)
+      const utcLabel = `${dt.getUTCHours().toString().padStart(2, "0")}:00 UTC`
+      const dateLabel = `${dt.getUTCFullYear()}-${(dt.getUTCMonth() + 1).toString().padStart(2, "0")}-${dt.getUTCDate().toString().padStart(2, "0")}`
+      this.timelineEl.style.display = "block"
+      this.timelineEl.innerHTML = `
+        <div style="background:rgba(0,0,0,0.85);border-radius:12px;padding:6px 14px;display:flex;gap:8px;align-items:center;box-shadow:0 2px 12px rgba(0,0,0,0.4);font-size:11px;color:rgba(255,255,255,0.6);">
+          <span>Data: ${dateLabel} ${utcLabel}</span>
+        </div>`
+      return
+    }
+
     // Hide timeline if all times are within 1 hour (no real forecast spread)
     const firstDt = new Date(this.timelineData[0].time)
     const lastDt = new Date(this.timelineData[this.timelineData.length - 1].time)
     if (lastDt - firstDt < 3600000) {
-      this.timelineEl.style.display = "none"
+      const dt = firstDt
+      const utcLabel = `${dt.getUTCHours().toString().padStart(2, "0")}:00 UTC`
+      const dateLabel = `${dt.getUTCFullYear()}-${(dt.getUTCMonth() + 1).toString().padStart(2, "0")}-${dt.getUTCDate().toString().padStart(2, "0")}`
+      this.timelineEl.style.display = "block"
+      this.timelineEl.innerHTML = `
+        <div style="background:rgba(0,0,0,0.85);border-radius:12px;padding:6px 14px;display:flex;gap:8px;align-items:center;box-shadow:0 2px 12px rgba(0,0,0,0.4);font-size:11px;color:rgba(255,255,255,0.6);">
+          <span>Data: ${dateLabel} ${utcLabel}</span>
+        </div>`
       return
     }