feat: unify DB and live waveform views with inline modal overlay
- Extract _buildWaveformCharts() shared renderer used by both live Events
tab and new DB history modal (no duplicate chart-building code)
- Replace window.open(waveform_viewer.html) with openDbWaveformModal()
that renders an inline overlay with full peaks bar, debug panel, and
4-channel charts — same rendering path as the live device view
- Fix timestamp display for DB blobs (ISO string vs {display:...} object)
- Normalize old blob peak_values keys (tran/vert/long → tran_in_s etc.)
for backward compat with pre-fix ACH blobs
- Close modal via × button, Esc key, or backdrop click; destroy Chart.js
instances on close to free canvas memory
- Fix onclick UUID quoting in History table (UUIDs need quoted string arg)
- Fix ach_server.py peak_values key names to match viewer expectations
- Extract _fillDebugPanel() so same debug content works in both contexts
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+1
-6
@@ -25,9 +25,4 @@ Thumbs.db
|
||||
|
||||
# Analyzer outputs
|
||||
*.report
|
||||
claude_export_*.md
|
||||
|
||||
# Frame database
|
||||
*.db
|
||||
*.db-wal
|
||||
*.db-shm
|
||||
claude_exp
|
||||
@@ -263,6 +263,4 @@ Use **com0com** or **VSPD** to create the virtual COM pair on Windows.
|
||||
- [x] SQLite persistence — events, monitor log, and session history in `seismo_relay.db`
|
||||
- [x] SFM REST API — device control + DB query endpoints, live device cache
|
||||
- [ ] Terra-view integration — seismo-relay router, unit detail page, VISON-style event listing
|
||||
- [ ] Vibration summary reports — highest legit PPV per project → Word doc (false trigger filtering first)
|
||||
- [ ] Compliance config encoder — build raw write payloads from a `ComplianceConfig` object
|
||||
- [ ] Modem manager — push RV50/RV55 configs via Sierra Wireless API
|
||||
- [ ] Vibra
|
||||
+228
-28
@@ -782,6 +782,12 @@
|
||||
<button class="btn btn-ghost" id="load-btn" onclick="loadWaveform()" disabled>Load Waveform</button>
|
||||
<button class="btn btn-ghost" id="prev-btn" onclick="stepEvent(-1)" disabled>◀</button>
|
||||
<button class="btn btn-ghost" id="next-btn" onclick="stepEvent(+1)" disabled>▶</button>
|
||||
<label style="display:flex;align-items:center;gap:5px;font-size:12px;color:var(--fg-muted);cursor:pointer;margin-left:4px"
|
||||
title="Bypass server cache and re-download from device. Checking this auto-reloads if a waveform is already displayed.">
|
||||
<input type="checkbox" id="force-reload" style="accent-color:#1f6feb"
|
||||
onchange="if(this.checked && lastWaveformData !== null) loadWaveform()" />
|
||||
Force reload
|
||||
</label>
|
||||
<div class="event-chips" id="event-chips"></div>
|
||||
</div>
|
||||
|
||||
@@ -793,6 +799,14 @@
|
||||
<div class="pk"><div class="pk-label">PVS</div><div class="pk-value pk-pvs" id="pk-pvs">—</div></div>
|
||||
</div>
|
||||
|
||||
<!-- Debug panel: raw ADC sample readout for diagnosing decode issues -->
|
||||
<div id="debug-panel" style="display:none; background:#0d1117; border-bottom:1px solid #21262d;
|
||||
padding:5px 16px; font-family:monospace; font-size:11px; color:#6e7681; line-height:1.8">
|
||||
<span style="float:right; cursor:pointer; color:#484f58; text-decoration:underline"
|
||||
onclick="document.getElementById('debug-panel').style.display='none'">hide</span>
|
||||
<div id="debug-content"></div>
|
||||
</div>
|
||||
|
||||
<div id="waveform-area" style="flex:1; overflow-y:auto;">
|
||||
<div id="empty-state">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
@@ -1051,6 +1065,7 @@ let eventList = [];
|
||||
let currentEvent = 0;
|
||||
let charts = {};
|
||||
let geoRange = 6.206;
|
||||
let lastWaveformData = null; // last successfully rendered waveform payload
|
||||
const DBL_REF = 2.9e-9; // 20 µPa in psi — reference pressure for dBL
|
||||
const CHANNEL_COLORS = { Tran:'#58a6ff', Vert:'#3fb950', Long:'#d29922', Mic:'#bc8cff' };
|
||||
|
||||
@@ -1513,12 +1528,13 @@ function updatePeaksBar(ev) {
|
||||
async function loadWaveform() {
|
||||
if (!devHost()) { setStatus('Enter device host first.', 'error'); return; }
|
||||
const idx = currentEvent;
|
||||
const force = document.getElementById('force-reload')?.checked ? '&force=true' : '';
|
||||
document.getElementById('load-btn').disabled = true;
|
||||
setStatus('Fetching waveform…', 'loading');
|
||||
|
||||
let data;
|
||||
try {
|
||||
const r = await fetch(`${api()}/device/event/${idx}/waveform?${deviceParams()}`);
|
||||
const r = await fetch(`${api()}/device/event/${idx}/waveform?${deviceParams()}${force}`);
|
||||
if (!r.ok) { const e = await r.json().catch(()=>({})); throw new Error(e.detail || r.statusText); }
|
||||
data = await r.json();
|
||||
} catch(e) {
|
||||
@@ -1527,46 +1543,41 @@ async function loadWaveform() {
|
||||
return;
|
||||
}
|
||||
|
||||
lastWaveformData = data;
|
||||
renderWaveform(data);
|
||||
document.getElementById('load-btn').disabled = false;
|
||||
}
|
||||
|
||||
function renderWaveform(data) {
|
||||
// ── Shared waveform chart builder ──────────────────────────────────────────────
|
||||
// Renders waveform channel charts into chartsEl, destroys+replaces instances in
|
||||
// chartsStore. emptyEl (optional) is shown/hidden based on decoded sample count.
|
||||
function _buildWaveformCharts(data, chartsEl, emptyEl, chartsStore) {
|
||||
const sr = data.sample_rate || 1024;
|
||||
const pretrig = data.pretrig_samples || 0;
|
||||
const decoded = data.samples_decoded || 0;
|
||||
const total = data.total_samples || decoded;
|
||||
const channels = data.channels || {};
|
||||
|
||||
// Status bar
|
||||
const bar = document.getElementById('status-bar');
|
||||
bar.innerHTML = '';
|
||||
bar.className = 'ok';
|
||||
const ts = data.timestamp;
|
||||
bar.textContent = ts ? `Event #${data.index} — ${ts.display} ` : `Event #${data.index} `;
|
||||
addPill(`${data.record_type || '?'}`);
|
||||
addPill(`${sr} sps`);
|
||||
addPill(`${decoded.toLocaleString()} / ${total.toLocaleString()} samples`);
|
||||
addPill(`pretrig ${pretrig}`);
|
||||
addPill(`${data.rectime_seconds ?? '?'} s`);
|
||||
// Destroy old chart instances
|
||||
Object.values(chartsStore).forEach(c => c.destroy());
|
||||
for (const k in chartsStore) delete chartsStore[k];
|
||||
|
||||
if (decoded === 0) {
|
||||
document.getElementById('empty-state').style.display = 'flex';
|
||||
document.getElementById('empty-state').querySelector('p').textContent =
|
||||
data.record_type === 'Waveform'
|
||||
if (emptyEl) {
|
||||
emptyEl.style.display = 'flex';
|
||||
const p = emptyEl.querySelector('p');
|
||||
if (p) p.textContent = data.record_type === 'Waveform'
|
||||
? 'No samples decoded — check server logs'
|
||||
: `Record type "${data.record_type}" — waveform not supported yet`;
|
||||
document.getElementById('charts').style.display = 'none';
|
||||
Object.values(charts).forEach(c => c.destroy()); charts = {};
|
||||
}
|
||||
chartsEl.style.display = 'none';
|
||||
chartsEl.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
const times = Array.from({length: decoded}, (_, i) => ((i - pretrig) / sr * 1000).toFixed(2));
|
||||
document.getElementById('empty-state').style.display = 'none';
|
||||
const chartsDiv = document.getElementById('charts');
|
||||
chartsDiv.style.display = 'flex';
|
||||
chartsDiv.innerHTML = '';
|
||||
Object.values(charts).forEach(c => c.destroy()); charts = {};
|
||||
if (emptyEl) emptyEl.style.display = 'none';
|
||||
chartsEl.style.display = 'flex';
|
||||
chartsEl.innerHTML = '';
|
||||
|
||||
const micPeakPsi = data.peak_values?.micl_psi ?? null;
|
||||
|
||||
@@ -1618,9 +1629,9 @@ function renderWaveform(data) {
|
||||
const cw = document.createElement('div');
|
||||
cw.className = 'chart-canvas-wrap';
|
||||
const canvas = document.createElement('canvas');
|
||||
cw.appendChild(canvas); wrap.appendChild(cw); chartsDiv.appendChild(wrap);
|
||||
cw.appendChild(canvas); wrap.appendChild(cw); chartsEl.appendChild(wrap);
|
||||
|
||||
charts[ch] = new Chart(canvas, {
|
||||
chartsStore[ch] = new Chart(canvas, {
|
||||
type: 'line',
|
||||
data: { labels: rTimes, datasets: [{ data: rData, borderColor: color, borderWidth: 1, pointRadius: 0, tension: 0 }] },
|
||||
options: {
|
||||
@@ -1655,6 +1666,64 @@ function renderWaveform(data) {
|
||||
}
|
||||
}
|
||||
|
||||
function renderWaveform(data) {
|
||||
const sr = data.sample_rate || 1024;
|
||||
const pretrig = data.pretrig_samples || 0;
|
||||
const decoded = data.samples_decoded || 0;
|
||||
const total = data.total_samples || decoded;
|
||||
lastWaveformData = data;
|
||||
|
||||
// Status bar
|
||||
const bar = document.getElementById('status-bar');
|
||||
bar.innerHTML = '';
|
||||
bar.className = 'ok';
|
||||
const ts = data.timestamp;
|
||||
bar.textContent = ts ? `Event #${data.index} — ${ts.display} ` : `Event #${data.index} `;
|
||||
addPill(`${data.record_type || '?'}`);
|
||||
addPill(`${sr} sps`);
|
||||
addPill(`${decoded.toLocaleString()} / ${total.toLocaleString()} samples`);
|
||||
addPill(`pretrig ${pretrig}`);
|
||||
addPill(`${data.rectime_seconds ?? '?'} s`);
|
||||
|
||||
_buildWaveformCharts(data, document.getElementById('charts'), document.getElementById('empty-state'), charts);
|
||||
updateDebugPanel(data);
|
||||
}
|
||||
|
||||
// ── Debug panel population ─────────────────────────────────────────────────────
|
||||
function _fillDebugPanel(data, dbg, cont) {
|
||||
if (!dbg || !cont) return;
|
||||
const channels = data.channels || {};
|
||||
const pv = data.peak_values || {};
|
||||
const scale = geoRange / 32767;
|
||||
const geoChans = ['Tran', 'Vert', 'Long'];
|
||||
|
||||
let html = '<div style="display:flex;gap:24px;flex-wrap:wrap;">';
|
||||
for (const ch of [...geoChans, 'Mic']) {
|
||||
const raw = (channels[ch] || []).slice(0, 8);
|
||||
if (raw.length === 0) continue;
|
||||
const maxAbs = Math.max(...raw.map(Math.abs));
|
||||
const keyMap = { Tran:'tran_in_s', Vert:'vert_in_s', Long:'long_in_s' };
|
||||
const p0c = ch !== 'Mic' ? (pv[keyMap[ch]] ?? null) : null;
|
||||
const src = p0c !== null ? `<span style="color:#3fb950">0C=${p0c.toFixed(4)}</span>`
|
||||
: `<span style="color:#e3b341">Math.max≈${(maxAbs*scale).toFixed(4)}</span>`;
|
||||
html += `<div><span style="color:#8b949e">${ch} raw[0:8]:</span> <span style="color:#c9d1d9">${raw.join(', ')}</span> peak: ${src}</div>`;
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
const nullPeaks = geoChans.filter(ch => (pv[{ Tran:'tran_in_s', Vert:'vert_in_s', Long:'long_in_s' }[ch]] ?? null) === null);
|
||||
if (nullPeaks.length > 0) {
|
||||
html += `<div style="color:#e3b341;margin-top:2px">⚠ peak0C null for: ${nullPeaks.join(', ')} — peaks shown are Math.max of waveform samples, not 0C record</div>`;
|
||||
}
|
||||
html += `<div style="color:#484f58;margin-top:2px">decoded=${data.samples_decoded} total=${data.total_samples} pretrig=${data.pretrig_samples} sr=${data.sample_rate} geoRange=${geoRange.toFixed(3)}</div>`;
|
||||
|
||||
cont.innerHTML = html;
|
||||
dbg.style.display = 'block';
|
||||
}
|
||||
|
||||
function updateDebugPanel(data) {
|
||||
_fillDebugPanel(data, document.getElementById('debug-panel'), document.getElementById('debug-content'));
|
||||
}
|
||||
|
||||
// ── DB tabs ────────────────────────────────────────────────────────────────────
|
||||
let histLoaded = false;
|
||||
let unitsLoaded = false;
|
||||
@@ -1757,9 +1826,8 @@ async function loadHistory() {
|
||||
const tr = document.createElement('tr');
|
||||
const pvs = ev.peak_vector_sum;
|
||||
const maxPPV = Math.max(ev.tran_ppv ?? 0, ev.vert_ppv ?? 0, ev.long_ppv ?? 0);
|
||||
const waveformUrl = `${api()}/waveform?db_id=${encodeURIComponent(ev.id)}&api_base=${encodeURIComponent(api())}`;
|
||||
tr.innerHTML = `
|
||||
<td><button class="wf-btn" onclick="window.open('${waveformUrl}','_blank')" title="View waveform">〜</button></td>
|
||||
<td><button class="wf-btn" onclick="openDbWaveformModal('${ev.id}')" title="View waveform">〜</button></td>
|
||||
<td>${_fmtTs(ev.timestamp)}</td>
|
||||
<td class="td-key">${ev.serial ?? '—'}</td>
|
||||
<td class="${_ppvClass(ev.tran_ppv)}">${_ppvFmt(ev.tran_ppv)}</td>
|
||||
@@ -1934,9 +2002,86 @@ async function loadSessions() {
|
||||
}
|
||||
}
|
||||
|
||||
// ── DB waveform modal ─────────────────────────────────────────────────────────
|
||||
let modalCharts = {};
|
||||
|
||||
async function openDbWaveformModal(id) {
|
||||
const modal = document.getElementById('wf-modal');
|
||||
const titleEl = document.getElementById('wf-modal-title');
|
||||
const chartsEl = document.getElementById('wf-modal-charts');
|
||||
const emptyEl = document.getElementById('wf-modal-empty');
|
||||
const peaksEl = document.getElementById('wf-modal-peaks');
|
||||
const debugEl = document.getElementById('wf-modal-debug');
|
||||
|
||||
// Show modal in loading state
|
||||
titleEl.textContent = 'Loading…';
|
||||
peaksEl.classList.remove('visible');
|
||||
if (debugEl) debugEl.style.display = 'none';
|
||||
chartsEl.style.display = 'none';
|
||||
chartsEl.innerHTML = '';
|
||||
emptyEl.style.display = 'flex';
|
||||
emptyEl.querySelector('p').textContent = 'Loading waveform…';
|
||||
modal.style.display = 'flex';
|
||||
|
||||
let data;
|
||||
try {
|
||||
const r = await fetch(`${api()}/db/events/${encodeURIComponent(id)}/waveform`);
|
||||
if (!r.ok) { const e = await r.json().catch(()=>({})); throw new Error(e.detail || r.statusText); }
|
||||
data = await r.json();
|
||||
} catch(e) {
|
||||
emptyEl.querySelector('p').textContent = `Error: ${e.message}`;
|
||||
return;
|
||||
}
|
||||
|
||||
// Normalize old blob peak_values keys (pre-fix ACH blobs used tran/vert/long without _in_s)
|
||||
if (data.peak_values) {
|
||||
const pv = data.peak_values;
|
||||
if (pv.tran_in_s == null && pv.tran != null) pv.tran_in_s = pv.tran;
|
||||
if (pv.vert_in_s == null && pv.vert != null) pv.vert_in_s = pv.vert;
|
||||
if (pv.long_in_s == null && pv.long != null) pv.long_in_s = pv.long;
|
||||
}
|
||||
|
||||
// Header — DB blobs have timestamp as ISO string; live device returns {display:...}
|
||||
const sr = data.sample_rate || 1024;
|
||||
const decoded = data.samples_decoded || 0;
|
||||
const total = data.total_samples || decoded;
|
||||
const pretrig = data.pretrig_samples || 0;
|
||||
let tsStr = '';
|
||||
if (data.timestamp) {
|
||||
const tsDisplay = typeof data.timestamp === 'object'
|
||||
? (data.timestamp.display || String(data.timestamp))
|
||||
: new Date(data.timestamp).toLocaleString();
|
||||
tsStr = `<strong style="color:var(--text)">${tsDisplay}</strong> `;
|
||||
}
|
||||
titleEl.innerHTML = `${tsStr}<span style="color:var(--text-dim)">${data.record_type || '?'} · ${sr} sps · ${decoded.toLocaleString()} / ${total.toLocaleString()} samples · pretrig ${pretrig} · ${data.rectime_seconds ?? '?'} s</span>`;
|
||||
|
||||
// Peaks bar
|
||||
const pv = data.peak_values || {};
|
||||
const micDbl = pv.micl_psi != null && pv.micl_psi > 0 ? 20 * Math.log10(pv.micl_psi / DBL_REF) : null;
|
||||
document.getElementById('wf-mpk-tran').textContent = pv.tran_in_s != null ? `${pv.tran_in_s.toFixed(5)} in/s` : '—';
|
||||
document.getElementById('wf-mpk-vert').textContent = pv.vert_in_s != null ? `${pv.vert_in_s.toFixed(5)} in/s` : '—';
|
||||
document.getElementById('wf-mpk-long').textContent = pv.long_in_s != null ? `${pv.long_in_s.toFixed(5)} in/s` : '—';
|
||||
document.getElementById('wf-mpk-mic').textContent = micDbl != null ? `${micDbl.toFixed(1)} dBL` : '—';
|
||||
document.getElementById('wf-mpk-pvs').textContent = pv.peak_vector_sum != null ? `${pv.peak_vector_sum.toFixed(5)} in/s` : '—';
|
||||
peaksEl.classList.add('visible');
|
||||
|
||||
_buildWaveformCharts(data, chartsEl, emptyEl, modalCharts);
|
||||
_fillDebugPanel(data, debugEl, document.getElementById('wf-modal-debug-content'));
|
||||
}
|
||||
|
||||
function closeWfModal() {
|
||||
const modal = document.getElementById('wf-modal');
|
||||
if (!modal || modal.style.display === 'none') return;
|
||||
modal.style.display = 'none';
|
||||
// Destroy chart instances to free canvas memory
|
||||
Object.values(modalCharts).forEach(c => c.destroy());
|
||||
for (const k in modalCharts) delete modalCharts[k];
|
||||
}
|
||||
|
||||
// ── Keyboard shortcuts ─────────────────────────────────────────────────────────
|
||||
document.addEventListener('keydown', e => {
|
||||
if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
|
||||
if (e.key === 'Escape') { closeWfModal(); return; }
|
||||
if (e.key === 'ArrowLeft') { stepEvent(-1); e.preventDefault(); }
|
||||
if (e.key === 'ArrowRight') { stepEvent(+1); e.preventDefault(); }
|
||||
});
|
||||
@@ -1950,5 +2095,60 @@ document.getElementById('api-base').value = window.location.origin;
|
||||
document.getElementById(id)?.addEventListener('keydown', e => { if (e.key === 'Enter') connectUnit(); });
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- ── Waveform Modal (DB history view) ──────────────────────────────────────
|
||||
Opened by openDbWaveformModal(id). Click outside or press Esc to close. -->
|
||||
<div id="wf-modal"
|
||||
style="display:none; position:fixed; inset:0; z-index:1000;
|
||||
background:rgba(1,4,9,0.88); align-items:flex-start;
|
||||
justify-content:center; padding:24px; overflow:auto;"
|
||||
onclick="if(event.target===this)closeWfModal()">
|
||||
<div style="background:var(--surface); border:1px solid var(--border);
|
||||
border-radius:8px; width:100%; max-width:1100px;
|
||||
display:flex; flex-direction:column; max-height:calc(100vh - 48px);">
|
||||
|
||||
<!-- Header row -->
|
||||
<div style="display:flex; align-items:center; padding:10px 16px;
|
||||
border-bottom:1px solid var(--border); flex-shrink:0; gap:10px;">
|
||||
<div id="wf-modal-title"
|
||||
style="flex:1; font-size:12px; color:var(--text-dim); font-family:monospace; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
|
||||
—
|
||||
</div>
|
||||
<button onclick="closeWfModal()"
|
||||
style="background:none; border:none; color:var(--text-dim); cursor:pointer;
|
||||
font-size:20px; line-height:1; padding:0 2px; flex-shrink:0;"
|
||||
title="Close (Esc)">×</button>
|
||||
</div>
|
||||
|
||||
<!-- Peaks bar — reuses .peaks-bar styles from live Events tab -->
|
||||
<div class="peaks-bar" id="wf-modal-peaks">
|
||||
<div class="pk"><div class="pk-label">Tran</div><div class="pk-value pk-tran" id="wf-mpk-tran">—</div></div>
|
||||
<div class="pk"><div class="pk-label">Vert</div><div class="pk-value pk-vert" id="wf-mpk-vert">—</div></div>
|
||||
<div class="pk"><div class="pk-label">Long</div><div class="pk-value pk-long" id="wf-mpk-long">—</div></div>
|
||||
<div class="pk"><div class="pk-label">MicL</div><div class="pk-value pk-mic" id="wf-mpk-mic">—</div></div>
|
||||
<div class="pk"><div class="pk-label">PVS</div><div class="pk-value pk-pvs" id="wf-mpk-pvs">—</div></div>
|
||||
</div>
|
||||
|
||||
<!-- Debug panel (same as live debug panel, hidden by default) -->
|
||||
<div id="wf-modal-debug"
|
||||
style="display:none; background:#0d1117; border-bottom:1px solid #21262d;
|
||||
padding:5px 16px; font-family:monospace; font-size:11px; color:#6e7681; line-height:1.8">
|
||||
<span style="float:right; cursor:pointer; color:#484f58; text-decoration:underline"
|
||||
onclick="document.getElementById('wf-modal-debug').style.display='none'">hide</span>
|
||||
<div id="wf-modal-debug-content"></div>
|
||||
</div>
|
||||
|
||||
<!-- Waveform area -->
|
||||
<div style="flex:1; overflow-y:auto; min-height:200px;">
|
||||
<div id="wf-modal-empty"
|
||||
style="display:flex; flex-direction:column; align-items:center;
|
||||
justify-content:center; padding:60px 20px; color:var(--text-dim); gap:12px;">
|
||||
<p>Loading…</p>
|
||||
</div>
|
||||
<div id="wf-modal-charts" style="display:none;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user