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:
@ -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);
|
||||
});
|
||||
Reference in New Issue
Block a user