Dash web: crosshair, zoom/pan X, scale log/lin, continuum extraction, background resume

- Tooltip entier (intersect:false) + ligne verticale crosshair sur tous les graphes
- Zoom molette/pinch sur l'axe X, pan souris, limites clamped 30-3000 keV
- Toggle échelle log/linéaire onglet Background
- Extraction continuum détecteur (isotope peaks subtracted + Gaussian smoothing)
- Reprise snapshot précédent au démarrage capture_background.py
- Suppression refs "Théorique" et "Bruit capteur" de l'interface
- Plugin chartjs-plugin-zoom + hammerjs via CDN
- Fix Chart constructor spread operator

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Jacquin Antoine
2026-05-19 23:26:28 +02:00
parent 0f2417bf88
commit c764a5c264
15 changed files with 975 additions and 221 deletions

View File

@ -17,34 +17,83 @@ async function refreshSpectrum() {
function updateSpectrumChart(data) {
const logScale = document.getElementById('log-scale').checked;
const showLines = document.getElementById('show-isotope-lines').checked;
const detectedOnly = document.getElementById('lines-detected-only').checked;
const showBgOverlay = document.getElementById('show-bg-overlay').checked;
const ctx = document.getElementById('spectrum-chart').getContext('2d');
const chartData = {
labels: data.energy_kev,
datasets: [{
label: data.background_subtracted ? 'Spectre (background soustrait)' : 'Spectre cumulé',
data: data.counts,
borderColor: '#4fc3f7',
backgroundColor: 'rgba(79, 195, 247, 0.1)',
const datasets = [{
label: data.background_subtracted ? 'Spectre (background soustrait)' : 'Spectre cumulé',
data: data.counts,
borderColor: '#4fc3f7',
backgroundColor: 'rgba(79, 195, 247, 0.1)',
borderWidth: 1,
pointRadius: 0,
fill: true,
tension: 0.1,
}];
// Overlay background if requested and available
if (showBgOverlay && bgOverlayData) {
datasets.push({
label: 'Background',
data: bgOverlayData.counts,
borderColor: 'rgba(255, 152, 0, 0.6)',
backgroundColor: 'rgba(255, 152, 0, 0.05)',
borderWidth: 1,
pointRadius: 0,
fill: true,
}]
tension: 0.1,
});
}
const chartData = {
labels: data.energy_kev,
datasets: datasets,
};
// Annotations
let annotations = {};
if (showLines) {
annotations = buildIsotopeAnnotations(detectedOnly, (data.isotopes_detected || []).map(i => i.isotope));
}
const options = {
responsive: true,
maintainAspectRatio: false,
animation: { duration: 300 },
interaction: { mode: 'index', intersect: false },
plugins: {
legend: { labels: { color: '#e0e0e0' } },
tooltip: {
enabled: true,
mode: 'index',
intersect: false,
filter: (item) => item.raw != null,
callbacks: {
title: (items) => {
const idx = items[0].dataIndex;
return `${data.energy_kev[idx]} keV`;
},
label: (item) => `${item.raw.toFixed(1)} counts`
label: (item) => `${item.dataset.label}: ${item.raw.toFixed(1)} counts`
}
},
annotation: {
annotations: annotations
},
zoom: {
pan: {
enabled: true,
mode: 'x',
modifierKey: null,
},
zoom: {
wheel: { enabled: true },
pinch: { enabled: true },
drag: { enabled: false },
mode: 'x',
limits: { x: { min: 30, max: 3000 } },
onZoom: () => { document.getElementById('reset-zoom-spectrum').style.display = 'inline-block'; }
}
}
},
@ -57,7 +106,8 @@ function updateSpectrumChart(data) {
},
y: {
type: logScale ? 'logarithmic' : 'linear',
title: { display: true, text: 'Comptages', color: '#888' },
title: { display: true, text: logScale ? 'Comptages (log)' : 'Comptages', color: '#888' },
min: logScale ? 0.9 : undefined,
ticks: { color: '#888' },
grid: { color: '#333' },
}
@ -69,7 +119,7 @@ function updateSpectrumChart(data) {
spectrumChart.options = options;
spectrumChart.update();
} else {
spectrumChart = new Chart(ctx, { type: 'line', data: chartData, options });
spectrumChart = new Chart(ctx, { type: 'line', data: chartData, ...options });
}
}
@ -92,6 +142,48 @@ function updateIsotopesTable(isotopes) {
container.innerHTML = html;
}
let bgOverlayData = null;
async function loadBgOverlay() {
if (bgOverlayData) return;
try {
const resp = await fetch(`${API_BASE}/api/background/spectrum`);
if (!resp.ok) return;
bgOverlayData = await resp.json();
} catch {}
}
// Event listeners
document.getElementById('show-difference').addEventListener('change', refreshSpectrum);
document.getElementById('log-scale').addEventListener('change', refreshSpectrum);
document.getElementById('log-scale').addEventListener('change', refreshSpectrum);
document.getElementById('show-isotope-lines').addEventListener('change', refreshSpectrum);
document.getElementById('lines-detected-only').addEventListener('change', refreshSpectrum);
document.getElementById('show-bg-overlay').addEventListener('change', async (e) => {
if (e.target.checked) await loadBgOverlay();
refreshSpectrum();
});
// Reset zoom
document.getElementById('reset-zoom-spectrum')?.addEventListener('click', () => {
if (spectrumChart) {
spectrumChart.resetZoom();
document.getElementById('reset-zoom-spectrum').style.display = 'none';
}
});
// Download CSV
document.getElementById('download-csv').addEventListener('click', () => {
if (!currentSpectrumData) return;
const header = 'energy_keV,counts';
const rows = currentSpectrumData.energy_kev.map((e, i) =>
`${e},${currentSpectrumData.counts[i]}`
);
const csv = [header, ...rows].join('\n');
const blob = new Blob([csv], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `spectrum_${new Date().toISOString().slice(0, 19).replace(/[T:]/g, '-')}.csv`;
a.click();
URL.revokeObjectURL(url);
});