diff --git a/viewer/index.html b/viewer/index.html index 529c78f..f8de954 100644 --- a/viewer/index.html +++ b/viewer/index.html @@ -137,6 +137,38 @@ .chart-title { font-size: 10px; color: #a0c4ff; margin-bottom: 2px; flex-shrink: 0; } .chart-wrap .plotly-wrap { flex: 1; min-height: 0; position: relative; } .chart-wrap .plotly-wrap > div { width: 100% !important; height: 100% !important; } + + /* Pipeline overlay */ + #pipeline-overlay { + display: none; + position: fixed; inset: 0; z-index: 9000; + background: rgba(10,10,26,0.92); + backdrop-filter: blur(4px); + align-items: center; justify-content: center; + } + #pipeline-overlay.visible { display: flex; } + #pipeline-box { + background: #12122a; border: 1px solid #0f3460; + padding: 20px 24px; border-radius: 4px; + max-width: 95vw; max-height: 90vh; + overflow: auto; position: relative; + min-width: 320px; + } + #pipeline-close { + position: absolute; top: 8px; right: 10px; + background: none; border: none; color: #e94560; + font-size: 18px; cursor: pointer; font-family: monospace; line-height: 1; + } + #pipeline-title { + font-size: 12px; color: #a0c4ff; margin-bottom: 14px; + font-family: monospace; letter-spacing: 1px; + } + #btn-pipeline { + background: #0f3460; border: 1px solid #a855f7; color: #a855f7; + padding: 2px 9px; cursor: pointer; font-family: monospace; font-size: 11px; + border-radius: 2px; flex-shrink: 0; + } + #btn-pipeline:hover { background: #a855f7; color: #1a1a2e; } @@ -147,6 +179,53 @@ Chargement... + + + + +
+
+ +
DATA PIPELINE — COSMA NAV VIEWER
+
+flowchart LR + subgraph SOURCES + MCAP["USV/AUV .mcap files\nROS2 bags post-Monaco"] + CSV["USV/AUV .csv files\npré-Monaco sans ROS2"] + end + + subgraph PARSING + MCAP_R["MCAP Reader\nextract topics"] + CSV_R["pandas read_csv"] + end + + subgraph CACHE + PQ["Parquet cache\n/cache/*.parquet"] + end + + subgraph API["FastAPI 8766"] + A1["/api/data-dates/"] + A2["/api/missions/"] + A3["/api/ship/.../track/"] + A4["/api/sub/.../series/"] + A5["/api/sub/.../usbl_track/"] + end + + subgraph VIEWER["NAV Viewer 8765"] + MAP["Leaflet map\nUSV arrow + AUV USBL"] + CHARTS["Plotly 4 charts\ndepth/PWM/USBL"] + SLIDER["Slider 24h cursor"] + end + + MCAP --> MCAP_R --> PQ + CSV --> CSV_R --> PQ + PQ --> A1 & A2 & A3 & A4 & A5 + A1 --> SLIDER + A3 --> MAP + A4 --> CHARTS + A5 --> MAP +
+
@@ -217,6 +296,7 @@ + @@ -777,7 +857,23 @@ function datePickerToday() { loadDate(today); } +// == Pipeline overlay == +let _pipelineRendered = false; +function togglePipeline() { + const ov = document.getElementById('pipeline-overlay'); + ov.classList.toggle('visible'); + if (ov.classList.contains('visible') && !_pipelineRendered) { + mermaid.run({ nodes: document.querySelectorAll('#pipeline-overlay .mermaid') }); + _pipelineRendered = true; + } +} +function hidePipelineOnBackdrop(e) { + if (e.target === document.getElementById('pipeline-overlay')) togglePipeline(); +} +document.addEventListener('keydown', e => { if (e.key === 'Escape') { const ov = document.getElementById('pipeline-overlay'); if (ov.classList.contains('visible')) togglePipeline(); } }); + // == Init == +mermaid.initialize({ startOnLoad: false, theme: 'dark' }); initCharts(); initDatebar();