Improved uo and added timerarraygam for testing
This commit is contained in:
Martino Ferrari
+179
-26
@@ -111,6 +111,7 @@ function connectWS() {
|
||||
if (msg.type === 'sources') onSources(msg);
|
||||
else if (msg.type === 'config') onConfig(msg);
|
||||
else if (msg.type === 'data') onData(msg);
|
||||
else if (msg.type === 'stats') onStats(msg);
|
||||
};
|
||||
}
|
||||
|
||||
@@ -745,6 +746,26 @@ function drawCursorLines(u, p) {
|
||||
drawLine(cursors.tB, 'rgba(249,226,175,0.85)', 'B');
|
||||
}
|
||||
|
||||
// Compute the rolling-window anchor ("newest common timestamp") for a plot.
|
||||
// Returns the min-of-max timestamp across all sources contributing traces to p,
|
||||
// so no source shows a blank right edge. Falls back to Date.now()/1000 if no data.
|
||||
function computePlotNow(p) {
|
||||
const sourceNewest = {};
|
||||
p.traces.forEach(key => {
|
||||
const colon = key.indexOf(':');
|
||||
if (colon < 0) return;
|
||||
const srcId = key.slice(0, colon);
|
||||
const buf = buffers[key];
|
||||
if (!buf || buf.size === 0) return;
|
||||
const t = buf.t[(buf.head - 1 + buf.cap) % buf.cap];
|
||||
if (sourceNewest[srcId] === undefined || t > sourceNewest[srcId]) sourceNewest[srcId] = t;
|
||||
});
|
||||
const srcVals = Object.values(sourceNewest);
|
||||
let now = srcVals.length > 0 ? Math.min(...srcVals) : -Infinity;
|
||||
if (!isFinite(now)) now = Date.now() / 1000;
|
||||
return now;
|
||||
}
|
||||
|
||||
// Build uPlot opts for a given plot object
|
||||
function makeUPlotOpts(p, inTrigMode) {
|
||||
const seriesArr = [{}]; // time (index 0)
|
||||
@@ -774,11 +795,16 @@ function makeUPlotOpts(p, inTrigMode) {
|
||||
},
|
||||
select: { show: true },
|
||||
scales: {
|
||||
x: {
|
||||
time: false, auto: false,
|
||||
min: p.xRange ? p.xRange[0] : 0,
|
||||
max: p.xRange ? p.xRange[1] : windowSec
|
||||
},
|
||||
x: (() => {
|
||||
let xMin, xMax;
|
||||
if (p.xRange) {
|
||||
xMin = p.xRange[0]; xMax = p.xRange[1];
|
||||
} else {
|
||||
const now = computePlotNow(p);
|
||||
xMin = now - windowSec; xMax = now;
|
||||
}
|
||||
return { time: false, auto: false, min: xMin, max: xMax };
|
||||
})(),
|
||||
y: { auto: true },
|
||||
},
|
||||
series: seriesArr,
|
||||
@@ -1005,16 +1031,8 @@ function resampleLinear(tSrc, vSrc, tDst) {
|
||||
function buildLiveData(p) {
|
||||
if (p.traces.length === 0) return [new Float64Array(0)];
|
||||
|
||||
// plotNow = newest timestamp across ALL traces
|
||||
let plotNow = -Infinity;
|
||||
p.traces.forEach(key => {
|
||||
const buf = buffers[key];
|
||||
if (buf && buf.size > 0) {
|
||||
const t = buf.t[(buf.head - 1 + buf.cap) % buf.cap];
|
||||
if (t > plotNow) plotNow = t;
|
||||
}
|
||||
});
|
||||
if (!isFinite(plotNow)) plotNow = Date.now() / 1000;
|
||||
// plotNow = min(newest per source) so no source shows a blank right edge.
|
||||
const plotNow = computePlotNow(p);
|
||||
|
||||
const t0 = p.xRange ? p.xRange[0] : plotNow - windowSec;
|
||||
const t1 = p.xRange ? p.xRange[1] : plotNow;
|
||||
@@ -1564,7 +1582,10 @@ function applyLayout(cls) {
|
||||
// Recreate all uPlot instances once the CSS grid has sized the cells.
|
||||
// This also updates axis visibility (which axes show labels depends on grid position).
|
||||
requestAnimationFrame(() => {
|
||||
plots.forEach(p => createUPlot(p));
|
||||
plots.forEach(p => {
|
||||
createUPlot(p);
|
||||
p.needsRedraw = true; // force immediate data+scale refresh so x/y ranges are preserved
|
||||
});
|
||||
setTimeout(() => plots.forEach(p => {
|
||||
if (p.uplot) p.uplot.setSize({ width: p.div.clientWidth, height: p.div.clientHeight });
|
||||
}), 60);
|
||||
@@ -1888,16 +1909,8 @@ function renderDirtyPlots() {
|
||||
// Zoomed: re-apply so scale is correct after setData
|
||||
p.uplot.setScale('x', { min: p.xRange[0], max: p.xRange[1] });
|
||||
} else {
|
||||
// Rolling window: compute plotNow fresh each frame (same anchor as buildLiveData)
|
||||
// and set the scale immediately after setData for correct alignment.
|
||||
let plotNow = -Infinity;
|
||||
p.traces.forEach(key => {
|
||||
const buf = buffers[key];
|
||||
if (!buf || buf.size === 0) return;
|
||||
const t = buf.t[(buf.head - 1 + buf.cap) % buf.cap];
|
||||
if (t > plotNow) plotNow = t;
|
||||
});
|
||||
if (!isFinite(plotNow)) plotNow = Date.now() / 1000;
|
||||
// Rolling window: use same anchor as buildLiveData (min-of-max per source).
|
||||
const plotNow = computePlotNow(p);
|
||||
p.uplot.setScale('x', { min: plotNow - windowSec, max: plotNow });
|
||||
}
|
||||
zoomGuard = false;
|
||||
@@ -1965,6 +1978,7 @@ function onSources(msg) {
|
||||
}
|
||||
});
|
||||
buildSidebar();
|
||||
if (statsOpen) _refreshStatsSelector();
|
||||
}
|
||||
|
||||
function addSourceWS(label, addr) {
|
||||
@@ -2110,6 +2124,139 @@ function initSignalMenu() {
|
||||
document.addEventListener('keydown', e => { if (e.key === 'Escape') hideSignalMenu(); });
|
||||
}
|
||||
|
||||
/* ════════════════════════════════════════════════════════════════
|
||||
Source Statistics panel
|
||||
════════════════════════════════════════════════════════════════ */
|
||||
const sourceStats = {}; // sourceId → StatInfo (from backend 1 Hz message)
|
||||
let statsOpen = false;
|
||||
let statsSelectedSrc = null; // currently displayed source id
|
||||
|
||||
function onStats(msg) {
|
||||
const incoming = msg.sources || {};
|
||||
Object.keys(incoming).forEach(id => { sourceStats[id] = incoming[id]; });
|
||||
if (statsOpen) renderStats();
|
||||
}
|
||||
|
||||
// Rebuild the source selector options; preserve selection when possible.
|
||||
function _refreshStatsSelector() {
|
||||
const sel = document.getElementById('stats-source-sel');
|
||||
if (!sel) return;
|
||||
const prev = statsSelectedSrc;
|
||||
sel.innerHTML = '';
|
||||
const srcs = Object.values(sourcesMap);
|
||||
srcs.forEach(src => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = src.id;
|
||||
opt.textContent = src.label || src.id;
|
||||
sel.appendChild(opt);
|
||||
});
|
||||
// Restore previous selection or default to first
|
||||
if (prev && sourcesMap[prev]) {
|
||||
sel.value = prev;
|
||||
} else if (srcs.length > 0) {
|
||||
sel.value = srcs[0].id;
|
||||
}
|
||||
statsSelectedSrc = sel.value || null;
|
||||
}
|
||||
|
||||
// Frontend latency for one source: wallNow − newest calibrated buffer timestamp.
|
||||
function sourceLatencyMs(srcId) {
|
||||
const prefix = srcId + ':';
|
||||
const wallNow = Date.now() / 1000;
|
||||
let best = null;
|
||||
Object.keys(buffers).forEach(key => {
|
||||
if (!key.startsWith(prefix)) return;
|
||||
const buf = buffers[key];
|
||||
if (!buf || buf.size === 0) return;
|
||||
const newest = buf.t[(buf.head - 1 + buf.cap) % buf.cap];
|
||||
const lag = (wallNow - newest) * 1000;
|
||||
if (best === null || lag < best) best = lag;
|
||||
});
|
||||
return best;
|
||||
}
|
||||
|
||||
function _fmtMs(v) { return v != null && isFinite(v) ? v.toFixed(2) + ' ms' : '—'; }
|
||||
function _fmtHz(v) { return v != null && isFinite(v) && v > 0 ? v.toFixed(2) + ' Hz' : '—'; }
|
||||
function _fmtKB(v) { return v != null && isFinite(v) ? (v / 1024).toFixed(2) + ' KB' : '—'; }
|
||||
|
||||
function _statsKV(label, value, cls) {
|
||||
return `<div class="stats-kv"><span class="stats-k">${label}</span><span class="stats-v${cls ? ' ' + cls : ''}">${value}</span></div>`;
|
||||
}
|
||||
|
||||
function _histHTML(si) {
|
||||
if (!si.cycleHist || !si.cycleHist.length) return '';
|
||||
const maxC = Math.max(...si.cycleHist, 1);
|
||||
const bars = si.cycleHist.map(c => {
|
||||
const pct = Math.max(Math.round((c / maxC) * 100), 1);
|
||||
return `<div class="hist-bar" style="height:${pct}%" title="${c} samples"></div>`;
|
||||
}).join('');
|
||||
return `<div class="stats-hist">
|
||||
<div class="hist-bars">${bars}</div>
|
||||
<div class="hist-labels"><span>${si.cycleHistMin.toFixed(3)}</span><span>${si.cycleHistMax.toFixed(3)} ms</span></div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function renderStats() {
|
||||
const body = document.getElementById('stats-body');
|
||||
if (!body) return;
|
||||
|
||||
const src = statsSelectedSrc ? sourcesMap[statsSelectedSrc] : null;
|
||||
if (!src) {
|
||||
body.innerHTML = '<span class="stats-empty">No source selected</span>';
|
||||
return;
|
||||
}
|
||||
|
||||
const si = sourceStats[src.id];
|
||||
const latMs = sourceLatencyMs(src.id);
|
||||
const lossColor = si && si.totalLost > 0 ? 'warn' : 'ok';
|
||||
const lossText = si ? `${si.totalLost} / ${si.totalReceived}` : '—';
|
||||
|
||||
body.innerHTML = `
|
||||
<div class="stats-section">
|
||||
<div class="stats-section-label">Connection</div>
|
||||
<div class="stats-row">
|
||||
${_statsKV('Address', src.addr)}
|
||||
${_statsKV('Latency', _fmtMs(latMs))}
|
||||
${_statsKV('Lost / Rx', lossText, lossColor)}
|
||||
${_statsKV('Loss %', si && si.totalReceived > 0 ? (si.totalLost / si.totalReceived * 100).toFixed(2) + ' %' : '—', si && si.totalLost > 0 ? 'warn' : 'ok')}
|
||||
</div>
|
||||
</div>
|
||||
<hr class="stats-sep">
|
||||
<div class="stats-section">
|
||||
<div class="stats-section-label">Cycle rate</div>
|
||||
<div class="stats-row">
|
||||
${_statsKV('avg', si ? _fmtHz(si.rateHz) : '—')}
|
||||
${_statsKV('± σ', si ? _fmtHz(si.rateStdHz) : '—')}
|
||||
${_statsKV('Pkts / cycle', si ? si.fragsPerCycle.toFixed(1) : '—')}
|
||||
${_statsKV('KB / cycle', si ? _fmtKB(si.bytesPerCycle) : '—')}
|
||||
</div>
|
||||
</div>
|
||||
<hr class="stats-sep">
|
||||
<div class="stats-section stats-section-grow">
|
||||
<div class="stats-section-label">Cycle time histogram</div>
|
||||
<div class="stats-row" style="margin-bottom:6px">
|
||||
${_statsKV('avg', si ? _fmtMs(si.cycleAvgMs) : '—')}
|
||||
${_statsKV('σ', si ? _fmtMs(si.cycleStdMs) : '—')}
|
||||
${_statsKV('min', si ? _fmtMs(si.cycleMinMs) : '—')}
|
||||
${_statsKV('max', si ? _fmtMs(si.cycleMaxMs) : '—')}
|
||||
</div>
|
||||
${si ? _histHTML(si) : '<span class="stats-empty">No data yet</span>'}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function toggleStats() {
|
||||
statsOpen = !statsOpen;
|
||||
document.getElementById('stats-panel').classList.toggle('open', statsOpen);
|
||||
document.getElementById('btn-stats').classList.toggle('active', statsOpen);
|
||||
if (statsOpen) {
|
||||
_refreshStatsSelector();
|
||||
renderStats();
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh latency and stats every second while panel is open.
|
||||
setInterval(() => { if (statsOpen) renderStats(); }, 1000);
|
||||
|
||||
/* ════════════════════════════════════════════════════════════════
|
||||
Init
|
||||
════════════════════════════════════════════════════════════════ */
|
||||
@@ -2118,6 +2265,12 @@ applyLayout('l1x1');
|
||||
buildSidebar(); // show "Add Source" section even before WS connection
|
||||
initSignalMenu();
|
||||
document.getElementById('btn-csv-all').addEventListener('click', exportAllCSV);
|
||||
document.getElementById('btn-stats').addEventListener('click', toggleStats);
|
||||
document.getElementById('btn-stats-close').addEventListener('click', toggleStats);
|
||||
document.getElementById('stats-source-sel').addEventListener('change', e => {
|
||||
statsSelectedSrc = e.target.value || null;
|
||||
renderStats();
|
||||
});
|
||||
connectWS();
|
||||
requestAnimationFrame(renderDirtyPlots);
|
||||
fetch('/version').then(r => r.text()).then(v => {
|
||||
|
||||
Reference in New Issue
Block a user