graham/prop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix timeline labels: only closest hour shows "Now", others show offset

Browse source
This commit is contained in:
Graham McIntire 2026-03-31 16:46:03 -05:00
parent e82e631135
commit 11af9b966f
No known key found for this signature in database
GPG key ID: F4ABF488E6029E59
1 changed files with 17 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
assets/js/propagation_map_hook.js
View file

@ -631,40 +631,39 @@ export const PropagationMap = {
} }
const now = new Date() const now = new Date()
const items = this.timelineData.map(t => { const items = this.timelineData.map((t, idx) => {
const dt = new Date(t.time) const dt = new Date(t.time)
const isSelected = t.time === this.selectedTime const isSelected = t.time === this.selectedTime
const isPast = dt < now const isPast = dt < new Date(now - 1800000) // 30min grace
const isNow = Math.abs(dt - now) < 3600000 // within 1 hour
const offsetH = Math.round((dt - now) / 3600000) const offsetH = Math.round((dt - now) / 3600000)
const label = isNow ? "Now" : (offsetH > 0 ? `+${offsetH}h` : `${offsetH}h`) return { ...t, dt, isSelected, isPast, offsetH, idx }
return { ...t, dt, isSelected, isPast, isNow, label, offsetH }
}) })
// Find trend: compare first (now) vs a few hours ahead // "Now" = the item closest to current time
const nowItem = items.find(i => i.isNow) || items[0] const closestIdx = items.reduce((best, item, i) =>
const futureItem = items.find(i => i.offsetH >= 3) || items[items.length - 1] Math.abs(item.dt - now) < Math.abs(items[best].dt - now) ? i : best, 0)
let trendHint = "" items.forEach((t, i) => {
if (nowItem && futureItem && this.gridLookup) { if (i === closestIdx) {
// Sample center of viewport t.label = "Now"
const center = this.map.getCenter() } else {
const nowScore = this.lookupPoint(center.lat, center.lng) const diff = t.offsetH
// Can't look up future scores client-side, so just show the time range t.label = diff > 0 ? `+${diff}h` : `${diff}h`
trendHint = "" }
} })
const buttons = items.map(t => { const buttons = items.map(t => {
const bg = t.isSelected ? "#00ffa3" : (t.isPast ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.15)") const bg = t.isSelected ? "#00ffa3" : (t.isPast ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.15)")
const fg = t.isSelected ? "#000" : (t.isPast ? "rgba(255,255,255,0.4)" : "#fff") const fg = t.isSelected ? "#000" : (t.isPast ? "rgba(255,255,255,0.4)" : "#fff")
const border = t.isSelected ? "2px solid #00ffa3" : "1px solid rgba(255,255,255,0.2)" const border = t.isSelected ? "2px solid #00ffa3" : "1px solid rgba(255,255,255,0.2)"
const weight = t.isSelected || t.isNow ? "700" : "400" const weight = t.isSelected ? "700" : "400"
const utcLabel = `${t.dt.getUTCHours().toString().padStart(2, "0")}:00`
return `<button data-time="${t.time}" style=" return `<button data-time="${t.time}" style="
padding:4px 8px;font-size:11px;font-weight:${weight}; padding:4px 8px;font-size:11px;font-weight:${weight};
background:${bg};color:${fg};border:${border};border-radius:6px; background:${bg};color:${fg};border:${border};border-radius:6px;
cursor:pointer;white-space:nowrap;min-width:38px; cursor:pointer;white-space:nowrap;min-width:38px;
transition:background 0.15s; transition:background 0.15s;
">${t.label}<br><span style="font-size:9px;opacity:0.7;">${t.dt.getUTCHours().toString().padStart(2, "0")}:00</span></button>` ">${t.label}<br><span style="font-size:9px;opacity:0.7;">${utcLabel}</span></button>`
}).join("") }).join("")
this.timelineEl.style.display = "block" this.timelineEl.style.display = "block"