fix(viewer): 4 bugs — Plotly resize, no-data overlay, fetch overkill, tab resize
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:
@@ -574,6 +574,13 @@ function populatePlotlyCharts() {
|
|||||||
Plotly.react('chart-pwm-auv', pwmAuvTraces, { ...layout, showlegend: pwmAuvTraces.length > 1 }, PLOTLY_CONFIG);
|
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-pwm-usv', pwmUsvTraces, { ...layout, showlegend: pwmUsvTraces.length > 1 }, PLOTLY_CONFIG);
|
||||||
Plotly.react('chart-usbl', usblDistTraces, layout, 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
|
// Update cursor line on all Plotly charts
|
||||||
@@ -744,7 +751,16 @@ async function loadDate(date) {
|
|||||||
|
|
||||||
const dateStr = date.replace(/-/g,''); // YYYYMMDD
|
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 dResp = await fetch(`${API}/api/missions/${mission.id}/dives`);
|
||||||
const dives = await dResp.json();
|
const dives = await dResp.json();
|
||||||
return { mission, dives: dives.filter(d => d.id.startsWith(dateStr)) };
|
return { mission, dives: dives.filter(d => d.id.startsWith(dateStr)) };
|
||||||
@@ -1010,6 +1026,15 @@ function switchTab(name) {
|
|||||||
const names = ['charts','usv','auv'];
|
const names = ['charts','usv','auv'];
|
||||||
btn.classList.toggle('active', names[i] === name);
|
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 ==
|
// == No-data overlay ==
|
||||||
@@ -1202,6 +1227,7 @@ async function loadSortieData(sortieId) {
|
|||||||
if (usvResp.ok) {
|
if (usvResp.ok) {
|
||||||
const usvData = await usvResp.json();
|
const usvData = await usvResp.json();
|
||||||
renderUSV(usvData.signals);
|
renderUSV(usvData.signals);
|
||||||
|
showNoDataOverlay(false); // BUG2 FIX: hide overlay when data loaded
|
||||||
}
|
}
|
||||||
prog.textContent = 'Chargement AUV…';
|
prog.textContent = 'Chargement AUV…';
|
||||||
await loadAuvTabs(sortieId);
|
await loadAuvTabs(sortieId);
|
||||||
|
|||||||
Reference in New Issue
Block a user