floppyrj45/cosma-nav-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(viewer): 4 bugs — Plotly resize, no-data overlay, fetch overkill, tab resize

Browse Source 
Bug1: populatePlotlyCharts now forces requestAnimationFrame Plotly.Plots.resize
      after react() so charts render correctly even after hidden/late init
Bug1b: switchTab(charts) triggers resize on all 4 chart divs
Bug2: loadSortieData calls showNoDataOverlay(false) when USV data loaded
Bug3: loadDate filters missions via availableDates cache before fetching
      all dives — avoids O(n*missions) requests when date entry known
This commit is contained in:
Poulpe
2026-04-27 23:03:21 +00:00
parent 7a5d442fbd
commit b45a5368ee
1 changed files with 27 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
viewer/index.html
View File

@@ -574,6 +574,13 @@ function populatePlotlyCharts() {
Plotly.react('chart-pwm-auv', pwmAuvTraces, { ...layout, showlegend: pwmAuvTraces.length > 1 }, PLOTLY_CONFIG);
Plotly.react('chart-pwm-usv', pwmUsvTraces, { ...layout, showlegend: pwmUsvTraces.length > 1 }, PLOTLY_CONFIG);
Plotly.react('chart-usbl', usblDistTraces, layout, PLOTLY_CONFIG);
// Force resize: Plotly can't compute size on hidden/zero-size divs at init time
requestAnimationFrame(() => {
['chart-depth','chart-pwm-auv','chart-pwm-usv','chart-usbl'].forEach(id => {
const el = document.getElementById(id);
if (el && el._fullLayout) Plotly.Plots.resize(el);
});
});
}
// Update cursor line on all Plotly charts
@@ -744,7 +751,16 @@ async function loadDate(date) {
const dateStr = date.replace(/-/g,''); // YYYYMMDD
const fetches = missions.map(async mission => {
// BUG3 FIX: filter missions using availableDates to avoid fetching all missions' dives
const dateEntry = availableDates.find(d => d.date === date);
const knownMissions = dateEntry && dateEntry.missions && dateEntry.missions.length
? dateEntry.missions
: null;
const missionsToFetch = knownMissions
? missions.filter(m => knownMissions.includes(m.id) || knownMissions.some(km => m.id.includes(km) || km.includes(m.id)))
: missions;
const fetches = (missionsToFetch.length > 0 ? missionsToFetch : missions).map(async mission => {
const dResp = await fetch(`${API}/api/missions/${mission.id}/dives`);
const dives = await dResp.json();
return { mission, dives: dives.filter(d => d.id.startsWith(dateStr)) };
@@ -1010,6 +1026,15 @@ function switchTab(name) {
const names = ['charts','usv','auv'];
btn.classList.toggle('active', names[i] === name);
});
// BUG1 FIX: resize Plotly charts when tab becomes visible
if (name === 'charts') {
requestAnimationFrame(() => {
['chart-depth','chart-pwm-auv','chart-pwm-usv','chart-usbl'].forEach(id => {
const el = document.getElementById(id);
if (el && el._fullLayout) Plotly.Plots.resize(el);
});
});
}
}
// == No-data overlay ==
@@ -1202,6 +1227,7 @@ async function loadSortieData(sortieId) {
if (usvResp.ok) {
const usvData = await usvResp.json();
renderUSV(usvData.signals);
showNoDataOverlay(false); // BUG2 FIX: hide overlay when data loaded
}
prog.textContent = 'Chargement AUV…';
await loadAuvTabs(sortieId);