feat(viewer): v6 - date-picker fonctionnel + Plotly charts depuis API 8766

- Date picker onChange charge toutes sessions du jour - Mini-graphs Plotly: depth AUV, motors AUV, motors USV, USBL distance - Slider 24h + cursor line Plotly synchronisé - Map v5 intacte (Leaflet USV arrow + AUV USBL + panel) - API: /api/missions -> /dives -> /sessions -> track/series/usbl_track
2026-04-27 14:14:57 +00:00
parent 8a5ed6174c
commit 07df61cbc4
1 changed files with 421 additions and 160 deletions
--- a/viewer/index.html
+++ b/viewer/index.html
@@ -2,17 +2,41 @@
 <html lang="fr">
 <head>
 <meta charset="utf-8">
-<title>COSMA — NAV Viewer v5</title>
+<title>COSMA — NAV Viewer v6</title>
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nouislider@15.8.1/dist/nouislider.min.css"/>
 <style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    height: 100vh; overflow: hidden;
    font-family: monospace; background: #1a1a2e; color: #e0e0e0;
    display: grid;
-    grid-template-rows: 40px 1fr 54px 1fr;
+    grid-template-rows: 36px 40px 1fr 54px 1fr;
  }
+  /* Row 0: datebar */
+  #datebar {
+    background: #0d0d20; border-bottom: 1px solid #0f3460;
+    display: flex; align-items: center; gap: 8px; padding: 0 14px;
+    flex-shrink: 0; height: 36px; overflow: hidden;
+  }
+  #date-picker {
+    background: #0f3460; border: 1px solid #00b4d8; color: #e0e0e0;
+    font-family: monospace; font-size: 11px; padding: 2px 6px; border-radius: 2px;
+    cursor: pointer;
+  }
+  #date-picker::-webkit-calendar-picker-indicator { filter: invert(0.8); cursor: pointer; }
+  #btn-today {
+    background: #0f3460; border: 1px solid #00b4d8; color: #00b4d8;
+    padding: 2px 9px; cursor: pointer; font-family: monospace; font-size: 11px;
+    border-radius: 2px;
+  }
+  #btn-today:hover { background: #00b4d8; color: #1a1a2e; }
+  #mission-label { font-size: 11px; font-family: monospace; padding: 2px 8px; }
+  #mission-label.has-data { color: #06d6a0; }
+  #mission-label.no-data  { color: #555; }
+  #load-status { font-size: 10px; color: #888; flex: 1; }
+
  /* Row 1: header */
  #header {
    background: #12122a; border-bottom: 1px solid #0f3460;
@@ -90,8 +114,6 @@
    border-radius: 2px;
  }
  #btn-viewall:hover, #btn-play:hover { background: #00b4d8; color: #1a1a2e; }
-  #ctrl-labels { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #666; }
-  label[for="trail-select"] { font-size: 10px; color: #666; }

  /* Row 4: 2×2 charts grid */
  #graphs-section {
@@ -110,18 +132,26 @@
    padding: 4px 8px 3px;
    min-height: 0;
    overflow: hidden;
+    position: relative;
  }
  .chart-title { font-size: 10px; color: #a0c4ff; margin-bottom: 2px; flex-shrink: 0; }
-  .chart-wrap canvas { flex: 1; min-height: 0; display: block; }
+  .chart-wrap .plotly-wrap { flex: 1; min-height: 0; position: relative; }
+  .chart-wrap .plotly-wrap > div { width: 100% !important; height: 100% !important; }
 </style>
-<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3/dist/chartjs-plugin-annotation.min.js"></script>
 </head>
 <body>

+<!-- Row 0: Datebar -->
+<div id="datebar">
+  <input type="date" id="date-picker">
+  <button id="btn-today" onclick="datePickerToday()">Aujourd'hui</button>
+  <span id="mission-label" class="no-data">Chargement...</span>
+  <span id="load-status"></span>
+</div>
+
 <!-- Row 1: Header -->
 <div id="header">
-  <span id="title">COSMA NAV v5</span>
+  <span id="title">COSMA NAV v6</span>
  <span id="stats">Chargement...</span>
  <div id="layer-toggles">
    <button class="layer-btn active" id="btn-usv"  onclick="toggleLayer('usv')">USV</button>
@@ -167,23 +197,48 @@
  </div>
 </div>

-<!-- Row 4: 2×2 Charts -->
+<!-- Row 4: 2×2 Plotly charts -->
 <div id="graphs-section">
-  <div class="chart-wrap"><div class="chart-title">Profondeur AUV (m)</div><canvas id="chart-depth"></canvas></div>
-  <div class="chart-wrap"><div class="chart-title">PWM AUV (canaux)</div><canvas id="chart-pwm-auv"></canvas></div>
-  <div class="chart-wrap"><div class="chart-title">PWM USV (M1-M8)</div><canvas id="chart-pwm-usv"></canvas></div>
-  <div class="chart-wrap"><div class="chart-title">USBL Distance (m)</div><canvas id="chart-usbl"></canvas></div>
+  <div class="chart-wrap">
+    <div class="chart-title">Depth AUV (m)</div>
+    <div class="plotly-wrap"><div id="chart-depth"></div></div>
+  </div>
+  <div class="chart-wrap">
+    <div class="chart-title">Motors AUV (PWM)</div>
+    <div class="plotly-wrap"><div id="chart-pwm-auv"></div></div>
+  </div>
+  <div class="chart-wrap">
+    <div class="chart-title">Motors USV (PWM)</div>
+    <div class="plotly-wrap"><div id="chart-pwm-usv"></div></div>
+  </div>
+  <div class="chart-wrap">
+    <div class="chart-title">USBL Distance (m)</div>
+    <div class="plotly-wrap"><div id="chart-usbl"></div></div>
+  </div>
 </div>

 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css"/>
+<script src="https://cdn.jsdelivr.net/npm/nouislider@15.8.1/dist/nouislider.min.js"></script>
+<script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
 <script>
 // == Constants ==
-const COLORS = ['#00b4d8','#e94560','#06d6a0','#ffd166','#a855f7','#f97316'];
+const API = 'http://192.168.0.83:8766';
+const COLORS = ['#00b4d8','#06d6a0','#ffd166','#e94560','#a855f7','#ff8800','#7dc8e0','#b8f0d4'];
 const AUV_COLOR = '#ff8800';
-const PWM_COLORS_AUV = ['#ff8800','#ffd166','#06d6a0','#00b4d8','#a855f7','#f97316','#e94560','#88c0d0'];
-const PWM_COLORS_USV = ['#00b4d8','#0096b4','#0077a0','#005f8c','#ffd166','#e6b800','#c49a00','#a07d00'];
+const PLOTLY_LAYOUT = {
+  paper_bgcolor: '#12122a',
+  plot_bgcolor: '#12122a',
+  margin: { t: 2, r: 8, b: 24, l: 42 },
+  font: { color: '#a0c4ff', size: 9, family: 'monospace' },
+  xaxis: {
+    gridcolor: '#1a1a3e', zerolinecolor: '#1a1a3e',
+    tickformat: '%H:%M:%S', color: '#666'
+  },
+  yaxis: { gridcolor: '#1a1a3e', zerolinecolor: '#1a1a3e', color: '#666' },
+  showlegend: false,
+  autosize: true,
+};
+const PLOTLY_CONFIG = { responsive: true, displayModeBar: false };

 // == Map init ==
 const map = L.map('map', { zoomControl: true });
@@ -242,17 +297,27 @@ function fmtDur(ms) {
  const s = Math.floor(ms/1000), h = Math.floor(s/3600), m = Math.floor((s%3600)/60), sc = s%60;
  return h>0 ? `${h}h${String(m).padStart(2,'0')}m` : `${m}m${String(sc).padStart(2,'0')}s`;
 }
+// Convert ISO timestamp string to ms
+function isoToMs(t) { return new Date(t).getTime(); }
+// Convert Unix seconds to ms
+function unixToMs(t) { return t * 1000; }

 // == State ==
-let allPoints=[], usblPoints=[], manifest=null, usblMeta=null;
-let mcapSignals=null, usvPwm=null;
-let tMin=0, tMax=0;
-let tNow=0;
+let allPoints = [];   // {t_ms, lat, lon, heading, source}
+let usblPoints = [];  // {t_ms, auv_lat, auv_lon, dist, az, elev, snr}
+let sessionsMeta = []; // loaded session metadata
+let tMin = 0, tMax = 0, tNow = 0;
 let trailMs = 60000;
-let charts={};
 let trackLayers = [], auvTrackLayer = null, cursorMarker = null, auvMarker = null, usblVector = null;
 const layerVis = { usv: true, auv: true, vec: true, panel: true };
 let playTimer = null;
+let cursorSlider = null;
+
+// Plotly chart data state
+let depthTraces = [];
+let pwmAuvTraces = [];
+let pwmUsvTraces = [];
+let usblDistTraces = [];

 // == Layer toggles ==
 function toggleLayer(name) {
@@ -266,7 +331,7 @@ function toggleLayer(name) {
    if (auvMarker)     layerVis.auv ? map.addLayer(auvMarker)     : map.removeLayer(auvMarker);
  }
  if (name==='vec' && usblVector) layerVis.vec ? map.addLayer(usblVector) : map.removeLayer(usblVector);
-  if (name==='panel') document.getElementById('usbl-panel').style.display = layerVis.panel ? 'block' : 'none';
+  if (name==='panel') document.getElementById('usbl-panel').style.display = layerVis.panel && usblPoints.length ? 'block' : 'none';
 }

 // == View All ==
@@ -276,54 +341,37 @@ function viewAll() {
  applyTrailAndCursor();
 }

-// == Charts ==
-function makeChartOptions() {
-  return {
-    animation: false, parsing: false, responsive: true, maintainAspectRatio: false,
-    plugins: {
-      legend: { display: false, labels: { color:'#a0c4ff', font:{size:9,family:'monospace'}, boxWidth:12 } },
-      annotation: { annotations: {} }
-    },
-    scales: {
-      x: { type:'linear', ticks:{ color:'#666', font:{size:9,family:'monospace'}, maxTicksLimit:6,
-        callback:(v)=>new Date(v).toISOString().substr(11,8) }, grid:{color:'#1a1a3e'} },
-      y: { ticks:{ color:'#666', font:{size:9,family:'monospace'}, maxTicksLimit:5 }, grid:{color:'#1a1a3e'} }
-    }
-  };
-}
+// == Plotly charts init ==
 function initCharts() {
-  const mkDs = (lbl, col) => ({ label:lbl, data:[], borderColor:col, borderWidth:1.5, pointRadius:0, tension:0 });
-  charts.depth  = new Chart(document.getElementById('chart-depth'),    { type:'line', data:{datasets:[mkDs('depth','#06d6a0')]}, options:makeChartOptions() });
-  charts.pwmAuv = new Chart(document.getElementById('chart-pwm-auv'), { type:'line', data:{datasets:[]}, options:makeChartOptions() });
-  charts.pwmUsv = new Chart(document.getElementById('chart-pwm-usv'), { type:'line', data:{datasets:[]}, options:makeChartOptions() });
-  charts.usbl   = new Chart(document.getElementById('chart-usbl'),    { type:'line', data:{datasets:[mkDs('dist','#a855f7')]}, options:makeChartOptions() });
+  const base = JSON.parse(JSON.stringify(PLOTLY_LAYOUT));
+  Plotly.newPlot('chart-depth',   [], { ...base, yaxis: { ...base.yaxis, autorange: 'reversed' } }, PLOTLY_CONFIG);
+  Plotly.newPlot('chart-pwm-auv', [], { ...base }, PLOTLY_CONFIG);
+  Plotly.newPlot('chart-pwm-usv', [], { ...base }, PLOTLY_CONFIG);
+  Plotly.newPlot('chart-usbl',    [], { ...base }, PLOTLY_CONFIG);
 }
-function populateCharts() {
-  if (mcapSignals) {
-    if (mcapSignals.depth) { charts.depth.data.datasets[0].data = mcapSignals.depth.map(p=>({x:p.t,y:p.v})); charts.depth.update('none'); }
-    if (mcapSignals.pwm_auv) {
-      const {channels,samples} = mcapSignals.pwm_auv;
-      charts.pwmAuv.data.datasets = channels.map((ch,i)=>({
-        label:'Ch'+ch, data:samples.map(s=>({x:s.t,y:s.v[i]})),
-        borderColor:PWM_COLORS_AUV[i%8], borderWidth:1, pointRadius:0, tension:0
-      }));
-      charts.pwmAuv.options.plugins.legend.display = channels.length>1;
-      charts.pwmAuv.update('none');
-    }
-  }
-  if (usvPwm && usvPwm.M) {
-    const keys = Object.keys(usvPwm.M).sort();
-    charts.pwmUsv.data.datasets = keys.map((k,i)=>({
-      label:k, data:usvPwm.M[k].map(p=>({x:p.t,y:p.v})),
-      borderColor:PWM_COLORS_USV[i%8], borderWidth:1, pointRadius:0, tension:0
-    }));
-    charts.pwmUsv.options.plugins.legend.display = keys.length>1;
-    charts.pwmUsv.update('none');
-  }
-  if (usblPoints && usblPoints.length) {
-    charts.usbl.data.datasets[0].data = usblPoints.map(p=>({x:p.t_ms,y:p.dist!==undefined?p.dist:p.distance}));
-    charts.usbl.update('none');
+
+function populatePlotlyCharts() {
+  const layout = JSON.parse(JSON.stringify(PLOTLY_LAYOUT));
+  const depthLayout = { ...layout, yaxis: { ...layout.yaxis, autorange: 'reversed' } };
+
+  Plotly.react('chart-depth',   depthTraces,   depthLayout,   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-usbl',    usblDistTraces, layout,        PLOTLY_CONFIG);
 }
+
+// Update cursor line on all Plotly charts
+function updateChartsCursor() {
+  if (!tMin || !tMax) return;
+  const tNowDate = new Date(tNow);
+  const t0Date = new Date(trailMs === 0 ? tMin : Math.max(tMin, tNow - trailMs));
+  const t1Date = new Date(trailMs === 0 ? tMax : tNow);
+  const shapeBase = { type: 'line', x0: tNowDate, x1: tNowDate, y0: 0, y1: 1, yref: 'paper',
+    line: { color: '#e94560', width: 1.5, dash: 'dot' } };
+  const rangeUpdate = { 'xaxis.range': [t0Date, t1Date] };
+  ['chart-depth','chart-pwm-auv','chart-pwm-usv','chart-usbl'].forEach(id => {
+    Plotly.relayout(id, { ...rangeUpdate, shapes: [shapeBase] });
+  });
 }

 // == Apply trail + cursor ==
@@ -333,35 +381,22 @@ function applyTrailAndCursor() {
  const t0 = trailMs===0 ? tMin : Math.max(tMin, tNow - trailMs);
  const t1 = tNow;

-  // Update chart x-window
-  const ann = { type:'line', xMin:tNow, xMax:tNow, borderColor:'#e94560', borderWidth:1.5, borderDash:[4,2] };
-  const chartT0 = trailMs===0 ? tMin : t0;
-  const chartT1 = trailMs===0 ? tMax : Math.max(t1, tMin+1);
-  for (const c of Object.values(charts)) {
-    c.options.scales.x.min = chartT0;
-    c.options.scales.x.max = chartT1;
-    c.options.plugins.annotation.annotations = { cursor: ann };
-    c.update('none');
-  }
-
-  // Trail track on map
  const trailPtsUsv  = filterWindow(allPoints, t0, t1);
  const trailPtsUsbl = filterWindow(usblPoints, t0, t1);

  // Rebuild USV trail layers
  trackLayers.forEach(l => map.removeLayer(l));
  trackLayers = [];
-  if (manifest) {
+  const sourceNames = [...new Set(allPoints.map(p => p.source))];
  const groups = {};
  trailPtsUsv.forEach(p => { if (!groups[p.source]) groups[p.source]=[]; groups[p.source].push(p); });
-    manifest.sessions.forEach((sess, i) => {
-      const pts = groups[sess.source_name]||[];
+  sourceNames.forEach((src, i) => {
+    const pts = groups[src] || [];
    if (pts.length < 2) return;
    const layer = L.polyline(pts.map(p=>[p.lat,p.lon]), { color:COLORS[i%COLORS.length], weight:2.5, opacity:0.85 });
    trackLayers.push(layer);
    if (layerVis.usv) layer.addTo(map);
  });
-  }

  // Rebuild AUV trail layer
  if (auvTrackLayer) { map.removeLayer(auvTrackLayer); auvTrackLayer=null; }
@@ -373,8 +408,8 @@ function applyTrailAndCursor() {
  // USV cursor marker at tNow
  const pUsv = findNearest(allPoints, tNow);
  if (pUsv) {
-    const sessIdx = manifest ? manifest.sessions.findIndex(s=>s.source_name===pUsv.source) : 0;
-    const color = COLORS[Math.max(0,sessIdx)%COLORS.length];
+    const srcIdx = sourceNames.indexOf(pUsv.source);
+    const color = COLORS[Math.max(0, srcIdx) % COLORS.length];
    if (!cursorMarker) {
      cursorMarker = L.marker([pUsv.lat,pUsv.lon], { icon:makeArrowIcon(pUsv.heading||0,color), zIndexOffset:1000 }).addTo(map);
    } else {
@@ -382,7 +417,7 @@ function applyTrailAndCursor() {
      cursorMarker.setIcon(makeArrowIcon(pUsv.heading||0,color));
    }
    document.getElementById('cursor-info').textContent =
-      `${pUsv.t}  |  ${pUsv.lat.toFixed(6)}, ${pUsv.lon.toFixed(6)}  |  cap: ${pUsv.heading!==null&&pUsv.heading!==undefined?pUsv.heading.toFixed(1):'N/A'}  |  ${pUsv.source}`;
+      `${fmtMs(pUsv.t_ms)}  |  ${pUsv.lat.toFixed(6)}, ${pUsv.lon.toFixed(6)}  |  cap: ${pUsv.heading!=null?pUsv.heading.toFixed(1):'N/A'}  |  ${pUsv.source}`;
  }

  // AUV + USBL at tNow
@@ -396,7 +431,7 @@ function applyTrailAndCursor() {
        auvMarker.setLatLng([pUsbl.auv_lat,pUsbl.auv_lon]);
      }
    }
-    const usvPos = pUsv ? [pUsv.lat,pUsv.lon] : [pUsbl.usv_lat,pUsbl.usv_lon];
+    const usvPos = pUsv ? [pUsv.lat,pUsv.lon] : [pUsbl.auv_lat,pUsbl.auv_lon];
    if (layerVis.vec) {
      if (!usblVector) {
        usblVector = L.polyline([usvPos,[pUsbl.auv_lat,pUsbl.auv_lon]], { color:'#888', weight:1.5, dashArray:'6,4', opacity:0.9 }).addTo(map);
@@ -405,27 +440,28 @@ function applyTrailAndCursor() {
        usblVector.setLatLngs([usvPos,[pUsbl.auv_lat,pUsbl.auv_lon]]);
      }
    }
-    if (layerVis.panel) {
+    if (layerVis.panel && pUsbl.dist != null) {
      document.getElementById('usbl-panel').style.display = 'block';
      document.getElementById('up-dist').textContent = `${pUsbl.dist.toFixed(2)} m`;
-      document.getElementById('up-az').textContent   = `${pUsbl.az.toFixed(1)} deg`;
-      document.getElementById('up-elev').textContent = `${pUsbl.elev.toFixed(1)} deg`;
-      document.getElementById('up-snr').textContent  = `${pUsbl.snr.toFixed(1)}`;
+      document.getElementById('up-az').textContent   = `${(pUsbl.az||0).toFixed(1)} deg`;
+      document.getElementById('up-elev').textContent = `${(pUsbl.elev||0).toFixed(1)} deg`;
+      document.getElementById('up-snr').textContent  = `${(pUsbl.snr||0).toFixed(1)}`;
    }
  }

-  // stats
-  const dur = tNow - (trailMs===0?tMin:t0);
  document.getElementById('stats').textContent =
-    `trail: ${fmtMs(tNow)} | USV ${trailPtsUsv.length} pts | AUV ${trailPtsUsbl.length} pts | total ${fmtDur(tMax-tMin)}`;
+    `t: ${fmtMs(tNow)} | USV ${trailPtsUsv.length} pts | AUV ${trailPtsUsbl.length} pts | total ${fmtDur(tMax-tMin)}`;
+
+  updateChartsCursor();
 }

 // == Cursor slider ==
-let cursorSlider = null;
 function initCursorSlider() {
-  cursorSlider = noUiSlider.create(document.getElementById('cursor-slider'), {
+  if (cursorSlider) { cursorSlider.destroy(); cursorSlider = null; }
+  const el = document.getElementById('cursor-slider');
+  cursorSlider = noUiSlider.create(el, {
    start: [tMin],
-    range: { min: tMin, max: tMax },
+    range: { min: tMin, max: tMax > tMin ? tMax : tMin + 1000 },
    step: 1000,
  });
  cursorSlider.on('update', (values) => {
@@ -433,7 +469,6 @@ function initCursorSlider() {
    document.getElementById('cursor-time').textContent = fmtMs(tNow);
    applyTrailAndCursor();
  });
-  // trail select
  document.getElementById('trail-select').addEventListener('change', () => applyTrailAndCursor());
 }

@@ -449,76 +484,302 @@ document.getElementById('btn-play').addEventListener('click', () => {
 });

 // == Legend ==
-function buildLegend() {
+function buildLegend(sourceNames) {
  let html = '';
-  if (manifest) {
-    manifest.sessions.forEach((s,i) => {
-      const name = s.source_name.replace('_navigation_log','').replace('.csv','');
+  sourceNames.forEach((src, i) => {
+    const name = src.replace(/_navigation_log|\.csv/g,'');
    html += `<div class="legend-item"><div class="legend-dot" style="background:${COLORS[i%COLORS.length]}"></div><span>USV ${name}</span></div>`;
  });
-  }
  html += `<div class="legend-item"><div class="legend-dot" style="background:${AUV_COLOR}"></div><span>AUV (USBL proj.)</span></div>`;
  html += `<div class="legend-item"><div class="legend-dashed"></div><span>Vecteur USBL</span></div>`;
  document.getElementById('legend').innerHTML = html;
 }

-// == Load ==
-async function loadData() {
-  try {
-    const [trackResp, pointsResp, manifestResp, usblResp] = await Promise.all([
-      fetch('data/track.geojson'), fetch('data/points.json'),
-      fetch('data/manifest.json'), fetch('data/usbl.json'),
-    ]);
-    if (!trackResp.ok) throw new Error('track.geojson not found');
-    if (!pointsResp.ok) throw new Error('points.json not found');
-    if (!manifestResp.ok) throw new Error('manifest.json not found');
-    if (!usblResp.ok) throw new Error('usbl.json not found');
-
-    const trackGeo = await trackResp.json();
-    allPoints = await pointsResp.json();
-    manifest  = await manifestResp.json();
-    usblMeta  = await usblResp.json();
-    usblPoints = usblMeta.points.sort((a,b)=>a.t_ms-b.t_ms);
-
-    // Static faded USV track background
-    L.geoJSON(trackGeo, { style:(f)=>({ color:f.properties.color||'#00b4d8', weight:2, opacity:0.3 }) }).addTo(map);
-
-    if (allPoints.length > 0) {
-      const lats=allPoints.map(p=>p.lat), lons=allPoints.map(p=>p.lon);
-      map.fitBounds([[Math.min(...lats),Math.min(...lons)],[Math.max(...lats),Math.max(...lons)]], {padding:[40,40]});
+// == Clear map layers ==
+function clearMapLayers() {
+  trackLayers.forEach(l => map.removeLayer(l));
+  trackLayers = [];
+  if (auvTrackLayer) { map.removeLayer(auvTrackLayer); auvTrackLayer=null; }
+  if (cursorMarker)  { map.removeLayer(cursorMarker);  cursorMarker=null; }
+  if (auvMarker)     { map.removeLayer(auvMarker);     auvMarker=null; }
+  if (usblVector)    { map.removeLayer(usblVector);    usblVector=null; }
 }

-    tMin = manifest.t_min_ms || Math.min(...allPoints.map(p=>p.t_ms||Infinity));
-    tMax = manifest.t_max_ms || Math.max(...allPoints.map(p=>p.t_ms||-Infinity));
-    if (tMin===tMax) tMax=tMin+1000;
+// == Load data for a given date ==
+async function loadDate(date) {
+  setStatus('Chargement...');
+  clearMapLayers();
+  allPoints = [];
+  usblPoints = [];
+  depthTraces = [];
+  pwmAuvTraces = [];
+  pwmUsvTraces = [];
+  usblDistTraces = [];
+
+  // Find which missions/dives match this date
+  try {
+    const mResp = await fetch(`${API}/api/missions`);
+    const missions = await mResp.json();
+
+    const dateStr = date.replace(/-/g,''); // YYYYMMDD
+
+    const fetches = 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)) };
+    });
+
+    const missionDives = (await Promise.all(fetches)).filter(md => md.dives.length > 0);
+
+    if (!missionDives.length) {
+      setStatus('Aucune donnée pour cette date');
+      document.getElementById('stats').textContent = 'Aucune donnée';
+      return;
+    }
+
+    // Fetch all sessions for matching dives
+    let totalShip = 0, totalSub = 0;
+    const allFetches = [];
+
+    for (const { mission, dives } of missionDives) {
+      for (const dive of dives) {
+        allFetches.push(loadDiveData(mission.id, dive.id));
+        totalShip += dive.ship_session_count || 0;
+        totalSub  += dive.sub_session_count || 0;
+      }
+    }
+    await Promise.all(allFetches);
+
+    // Sort
+    allPoints.sort((a,b)=>a.t_ms-b.t_ms);
+    usblPoints.sort((a,b)=>a.t_ms-b.t_ms);
+
+    if (!allPoints.length && !usblPoints.length) {
+      setStatus('Pas de points pour cette date');
+      return;
+    }
+
+    const allTimes = [
+      ...allPoints.map(p=>p.t_ms),
+      ...usblPoints.map(p=>p.t_ms)
+    ];
+    tMin = Math.min(...allTimes);
+    tMax = Math.max(...allTimes);
    tNow = tMin;

-    document.getElementById('title').textContent =
-      `COSMA v5 — USV ${manifest.n_sessions} sess. ${manifest.n_points_sampled} pts | AUV ${usblMeta.n_points} pts`;
+    // Fit map
+    const allLats = [
+      ...allPoints.map(p=>p.lat),
+      ...usblPoints.map(p=>p.auv_lat)
+    ].filter(Boolean);
+    const allLons = [
+      ...allPoints.map(p=>p.lon),
+      ...usblPoints.map(p=>p.auv_lon)
+    ].filter(Boolean);
+    if (allLats.length) {
+      map.fitBounds([
+        [Math.min(...allLats), Math.min(...allLons)],
+        [Math.max(...allLats), Math.max(...allLons)]
+      ], { padding: [40,40] });
+    }

-    buildLegend();
+    // Static faded USV track background
+    const sourceNames = [...new Set(allPoints.map(p=>p.source))];
+    const groups = {};
+    allPoints.forEach(p => { if (!groups[p.source]) groups[p.source]=[]; groups[p.source].push(p); });
+    sourceNames.forEach((src,i) => {
+      const pts = groups[src]||[];
+      if (pts.length < 2) return;
+      L.polyline(pts.map(p=>[p.lat,p.lon]), { color:COLORS[i%COLORS.length], weight:1.5, opacity:0.2 }).addTo(map);
+    });
+
+    buildLegend(sourceNames);
+    populatePlotlyCharts();
    initCursorSlider();
    applyTrailAndCursor();
+
+    document.getElementById('title').textContent = `COSMA v6 — ${date}`;
+    setStatus(`${totalShip} USV sess. | ${totalSub} AUV sess. | ${allPoints.length} pts USV | ${usblPoints.length} pts USBL`);
+
  } catch(e) {
-    document.getElementById('stats').textContent = 'Erreur: '+e.message;
+    setStatus('Erreur: ' + e.message);
    console.error(e);
  }
 }

-async function loadGraphData() {
-  initCharts();
+async function loadDiveData(missionId, diveId) {
  try {
-    const [mcapResp, usvPwmResp] = await Promise.allSettled([
-      fetch('data/mcap_signals.json'), fetch('data/usv_pwm.json'),
-    ]);
-    if (mcapResp.status==='fulfilled' && mcapResp.value.ok) mcapSignals = await mcapResp.value.json();
-    if (usvPwmResp.status==='fulfilled' && usvPwmResp.value.ok) usvPwm = await usvPwmResp.value.json();
-    populateCharts();
-  } catch(e) { console.warn('Graph data error:',e); }
+    const sResp = await fetch(`${API}/api/dives/${missionId}/${diveId}/sessions`);
+    const sessions = await sResp.json();
+    const sessionFetches = [];
+
+    // Ship sessions
+    if (sessions.ship) {
+      sessions.ship.forEach(sess => {
+        sessionFetches.push(loadShipSession(missionId, diveId, sess.id));
+      });
+    }
+    // Sub sessions
+    if (sessions.sub) {
+      sessions.sub.forEach(sess => {
+        sessionFetches.push(loadSubSession(missionId, diveId, sess.id));
+      });
+    }
+    await Promise.all(sessionFetches);
+  } catch(e) { console.warn('loadDiveData error', diveId, e); }
 }

-loadData();
-loadGraphData();
+async function loadShipSession(missionId, diveId, sessionId) {
+  try {
+    const [trackResp, seriesResp] = await Promise.all([
+      fetch(`${API}/api/ship/${missionId}/${diveId}/${sessionId}/track`),
+      fetch(`${API}/api/ship/${missionId}/${diveId}/${sessionId}/series`),
+    ]);
+    if (trackResp.ok) {
+      const d = await trackResp.json();
+      const pts = (d.points||[]).map(p => ({
+        t_ms: isoToMs(p.t), lat: p.lat, lon: p.lon,
+        heading: p.heading || null, source: sessionId
+      }));
+      allPoints.push(...pts);
+    }
+    if (seriesResp.ok) {
+      const d = await seriesResp.json();
+      // USV PWM: M1..M8
+      const motorKeys = Object.keys(d).filter(k => /^M\d+$/.test(k));
+      motorKeys.forEach((k, i) => {
+        const pts = d[k];
+        if (!pts || !pts.length) return;
+        pwmUsvTraces.push({
+          x: pts.map(p => new Date(isoToMs(p.t))),
+          y: pts.map(p => p.v),
+          name: k,
+          type: 'scatter', mode: 'lines',
+          line: { color: COLORS[i % COLORS.length], width: 1 },
+        });
+      });
+    }
+  } catch(e) { console.warn('loadShipSession error', sessionId, e); }
+}
+
+async function loadSubSession(missionId, diveId, sessionId) {
+  try {
+    const [seriesResp, usblResp] = await Promise.all([
+      fetch(`${API}/api/sub/${missionId}/${diveId}/${sessionId}/series`),
+      fetch(`${API}/api/sub/${missionId}/${diveId}/${sessionId}/usbl_track`),
+    ]);
+    if (seriesResp.ok) {
+      const d = await seriesResp.json();
+      // Depth trace
+      if (d.depth && d.depth.length) {
+        depthTraces.push({
+          x: d.depth.map(p => new Date(unixToMs(p.t))),
+          y: d.depth.map(p => p.v),
+          name: sessionId,
+          type: 'scatter', mode: 'lines',
+          line: { color: '#06d6a0', width: 1.5 },
+        });
+      }
+      // AUV motors: m1..m8
+      const motorKeys = Object.keys(d).filter(k => /^m\d+$/.test(k));
+      motorKeys.forEach((k, i) => {
+        const pts = d[k];
+        if (!pts || !pts.length) return;
+        pwmAuvTraces.push({
+          x: pts.map(p => new Date(unixToMs(p.t))),
+          y: pts.map(p => p.v),
+          name: k,
+          type: 'scatter', mode: 'lines',
+          line: { color: COLORS[(i + 4) % COLORS.length], width: 1 },
+        });
+      });
+    }
+    if (usblResp.ok) {
+      const d = await usblResp.json();
+      const pts = (d.points||[]);
+      if (pts.length) {
+        // Build usblPoints — API fields: t(unix s), lat/lon(AUV), usv_lat/usv_lon, distance_m, azimuth_deg, snr
+        usblPoints.push(...pts.map(p => ({
+          t_ms: unixToMs(p.t),
+          auv_lat: p.lat, auv_lon: p.lon,
+          dist: p.distance_m, az: p.azimuth_deg, elev: p.elevation_deg || 0, snr: p.snr,
+        })));
+        // USBL distance trace
+        usblDistTraces.push({
+          x: pts.map(p => new Date(unixToMs(p.t))),
+          y: pts.map(p => p.distance_m),
+          name: sessionId,
+          type: 'scatter', mode: 'lines',
+          line: { color: '#a855f7', width: 1.5 },
+        });
+      }
+    }
+  } catch(e) { console.warn('loadSubSession error', sessionId, e); }
+}
+
+function setStatus(msg) {
+  document.getElementById('load-status').textContent = msg;
+}
+
+// == Datebar ==
+let availableDates = [];
+
+async function initDatebar() {
+  const label = document.getElementById('mission-label');
+  const picker = document.getElementById('date-picker');
+  try {
+    const resp = await fetch(`${API}/api/data-dates`);
+    if (!resp.ok) throw new Error('HTTP ' + resp.status);
+    const data = await resp.json();
+    availableDates = data.dates || [];
+    if (!availableDates.length) {
+      label.textContent = 'Aucune donnée';
+      label.className = 'no-data';
+      return;
+    }
+    const dates = availableDates.map(d => d.date).sort();
+    picker.min = dates[0];
+    picker.max = dates[dates.length-1];
+    picker.value = dates[dates.length-1];
+    updateMissionLabel(picker.value);
+    picker.addEventListener('change', () => {
+      updateMissionLabel(picker.value);
+      loadDate(picker.value);
+    });
+    loadDate(picker.value);
+  } catch(e) {
+    label.textContent = 'API indisponible';
+    label.className = 'no-data';
+    setStatus('API 8766 inaccessible');
+    console.warn(e);
+  }
+}
+
+function updateMissionLabel(date) {
+  const label = document.getElementById('mission-label');
+  const entry = availableDates.find(d => d.date === date);
+  if (!entry) {
+    label.textContent = 'Aucune donnée';
+    label.className = 'no-data';
+    return;
+  }
+  const mission = entry.missions && entry.missions.length ? entry.missions[0] : '?';
+  const n = entry.session_count || 0;
+  label.textContent = `${mission} (${n} session${n>1?'s':''})`;
+  label.className = 'has-data';
+}
+
+function datePickerToday() {
+  const today = new Date().toISOString().slice(0,10);
+  const picker = document.getElementById('date-picker');
+  picker.value = today;
+  updateMissionLabel(today);
+  loadDate(today);
+}
+
+// == Init ==
+initCharts();
+initDatebar();
 </script>
 </body>
 </html>