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

feat(viewer): bloc pipeline Mermaid + toggle overlay #btn-pipeline

Browse Source
This commit is contained in:
Flag
2026-04-27 14:18:08 +00:00
parent 07df61cbc4
commit 34e709b7c8
1 changed files with 96 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
viewer/index.html
View File

@@ -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; }
</style>
</head>
<body>
@@ -147,6 +179,53 @@
<button id="btn-today" onclick="datePickerToday()">Aujourd'hui</button>
<span id="mission-label" class="no-data">Chargement...</span>
<span id="load-status"></span>
<button id="btn-pipeline" onclick="togglePipeline()">Pipeline</button>
</div>
<!-- Pipeline overlay -->
<div id="pipeline-overlay" onclick="hidePipelineOnBackdrop(event)">
<div id="pipeline-box">
<button id="pipeline-close" onclick="togglePipeline()">✕</button>
<div id="pipeline-title">DATA PIPELINE — COSMA NAV VIEWER</div>
<div class="mermaid">
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
</div>
</div>
</div>
<!-- Row 1: Header -->
@@ -217,6 +296,7 @@
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<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>
@@ -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();
</script>