feat(viewer): bloc pipeline Mermaid + toggle overlay #btn-pipeline
This commit is contained in:
Flag
@@ -137,6 +137,38 @@
|
|||||||
.chart-title { font-size: 10px; color: #a0c4ff; margin-bottom: 2px; flex-shrink: 0; }
|
.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 { flex: 1; min-height: 0; position: relative; }
|
||||||
.chart-wrap .plotly-wrap > div { width: 100% !important; height: 100% !important; }
|
.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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -147,6 +179,53 @@
|
|||||||
<button id="btn-today" onclick="datePickerToday()">Aujourd'hui</button>
|
<button id="btn-today" onclick="datePickerToday()">Aujourd'hui</button>
|
||||||
<span id="mission-label" class="no-data">Chargement...</span>
|
<span id="mission-label" class="no-data">Chargement...</span>
|
||||||
<span id="load-status"></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>
|
</div>
|
||||||
|
|
||||||
<!-- Row 1: Header -->
|
<!-- Row 1: Header -->
|
||||||
@@ -217,6 +296,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</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://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.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 src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
|
||||||
@@ -777,7 +857,23 @@ function datePickerToday() {
|
|||||||
loadDate(today);
|
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 ==
|
// == Init ==
|
||||||
|
mermaid.initialize({ startOnLoad: false, theme: 'dark' });
|
||||||
initCharts();
|
initCharts();
|
||||||
initDatebar();
|
initDatebar();
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user