Spaces:
Sleeping
Sleeping
| /** | |
| * TelemetryUI Module | |
| * Synchronizes scientific metrics with the dashboard. | |
| */ | |
| export class TelemetryUI { | |
| constructor() { | |
| this.els = { | |
| kpi: { | |
| step: document.getElementById('kpi-step'), | |
| reward: document.getElementById('kpi-reward'), | |
| best: document.getElementById('kpi-best'), | |
| orderIndex: document.getElementById('kpi-order'), | |
| atoms: document.getElementById('kpi-atoms'), | |
| cost: document.getElementById('kpi-cost'), | |
| episodeId: document.getElementById('episode-id') | |
| }, | |
| log: document.getElementById('log-box'), | |
| statusText: document.getElementById('status-text'), | |
| statusDot: document.getElementById('status-dot') | |
| }; | |
| } | |
| updateKPIs(obs, reward, bestReward) { | |
| const { kpi } = this.els; | |
| if (!kpi.step) return; | |
| kpi.step.textContent = `${obs.step_number} / ${obs.max_steps}`; | |
| kpi.reward.textContent = (reward ?? 0).toFixed(4); | |
| kpi.best.textContent = bestReward.toFixed(4); | |
| kpi.cost.textContent = `${Math.round(obs.total_cost)} / ${Math.round(obs.cost_budget)}`; | |
| kpi.atoms.textContent = obs.grid.flat().filter(c => c !== '.').length; | |
| if (kpi.orderIndex) { | |
| const orderIdx = obs.score_breakdown?.lattice_order_index ?? 0; | |
| kpi.orderIndex.textContent = orderIdx.toFixed(3); | |
| } | |
| if (obs.metadata && kpi.episodeId) { | |
| kpi.episodeId.textContent = `Scenario: ${obs.metadata.scenario_name} | Difficulty: ${obs.metadata.difficulty}`; | |
| } | |
| } | |
| updatePropertyBars(obs) { | |
| ['hardness', 'conductivity', 'thermal_resistance', 'elasticity'].forEach(p => { | |
| const valText = document.getElementById(`pv-${p}`); | |
| const fillBar = document.getElementById(`pb-${p}`); | |
| const targetMarker = document.getElementById(`pt-${p}`); | |
| if (!valText || !fillBar) return; | |
| const curr = obs.current_properties[p] ?? 0; | |
| const tgt = obs.target[p] ?? 0; | |
| valText.textContent = `${curr.toFixed(0)} / ${tgt.toFixed(0)}`; | |
| fillBar.style.width = Math.min(curr, 100) + '%'; | |
| if (targetMarker) targetMarker.style.left = Math.min(tgt, 100) + '%'; | |
| }); | |
| const sb = obs.score_breakdown || {}; | |
| const stabText = document.getElementById('sc-stability'); | |
| const orderText = document.getElementById('sc-order'); | |
| if (stabText) stabText.textContent = (sb.structural_stability ?? 0).toFixed(3); | |
| if (orderText) orderText.textContent = (sb.lattice_order_index ?? 0).toFixed(3); | |
| const stabFill = document.getElementById('sb-stability'); | |
| const orderFill = document.getElementById('sb-order'); | |
| if (stabFill) stabFill.style.width = ((sb.structural_stability ?? 0) * 100) + '%'; | |
| if (orderFill) orderFill.style.width = ((sb.lattice_order_index ?? 0) * 100) + '%'; | |
| } | |
| setStatus(online) { | |
| if (this.els.statusText) { | |
| this.els.statusText.textContent = online ? 'LIVE' : 'OFFLINE'; | |
| } | |
| if (this.els.statusDot) { | |
| this.els.statusDot.classList.toggle('offline', !online); | |
| } | |
| } | |
| log(msg, type = 'info') { | |
| if (!this.els.log) return; | |
| const entry = document.createElement('div'); | |
| entry.className = `log-line ${type}`; /* changed to match playground.css line 86 */ | |
| const ts = new Date().toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' }); | |
| entry.innerHTML = `<span style="opacity:0.4">[${ts}]</span> <span>${msg}</span>`; | |
| this.els.log.prepend(entry); | |
| } | |
| } | |