From c10e34f3b45d069ca192134202edf4718790d08a Mon Sep 17 00:00:00 2001
From: Antoine Jacquin <lidar@arkel.fr>
Date: Sun, 27 Sep 2026 20:27:20 +0200
Subject: [PATCH] =?UTF-8?q?Ajouter=20la=20l=C3=A9gende=20=C2=AB=20Comment?=
 =?UTF-8?q?=20lire=20=C2=BB=20tir=C3=A9e=20de=20VIZ=5FLEGENDS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 lidar_pipeline/tests/test_mapserve.py | 10 +++++++++
 lidar_pipeline/web/map.css            |  5 ++++-
 lidar_pipeline/web/map.html           |  5 ++++-
 lidar_pipeline/web/map.js             | 32 +++++++++++++++++++++++++--
 4 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/lidar_pipeline/tests/test_mapserve.py b/lidar_pipeline/tests/test_mapserve.py
index eae93c7..9473c70 100644
--- a/lidar_pipeline/tests/test_mapserve.py
+++ b/lidar_pipeline/tests/test_mapserve.py
@@ -520,6 +520,16 @@ def test_meta_serves_reading_text(tmp_path, monkeypatch):
     assert layers["densite_sol"]["reading"]
 
 
+def test_ui_reading_legend_from_meta():
+    """Légende « Comment lire » : phrases de META.layers[].reading, jamais
+    codées en dur dans l'interface (VIZ_LEGENDS reste la seule source)."""
+    from lidar_pipeline.mapui import _MAP_HTML, _MAP_JS
+    assert 'id="readingBlock"' in _MAP_HTML and 'id="readingList"' in _MAP_HTML
+    assert "<details" in _MAP_HTML and "Comment lire" in _MAP_HTML
+    assert "function renderReading(" in _MAP_JS and ".reading" in _MAP_JS
+    assert "aucun point sol" not in _MAP_JS and "aucun point sol" not in _MAP_HTML
+
+
 def test_ui_compare_mode_replaces_both():
     """Mode « Comparer » : une barre glissante sépare deux couches (relief,
     précision ou OSM seul) ; l'ancien mode « les deux » (produit) disparaît
diff --git a/lidar_pipeline/web/map.css b/lidar_pipeline/web/map.css
index 7cc4307..c861c15 100644
--- a/lidar_pipeline/web/map.css
+++ b/lidar_pipeline/web/map.css
@@ -141,7 +141,10 @@ input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border-radius
   border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
 .prec-ticks { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted);
   font-variant-numeric: tabular-nums; margin-top: 2px; }
-.prec-cap { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
+.reading summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
+.reading ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); }
+.reading li { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
+.reading li + li { margin-top: var(--sp-1); }
 .eye { width: 24px; height: 24px; padding: 0; border: none; background: none; color: var(--muted);
   display: flex; align-items: center; justify-content: center; }
 .eye.on { color: var(--accent); }
diff --git a/lidar_pipeline/web/map.html b/lidar_pipeline/web/map.html
index b767438..bd2ea9f 100644
--- a/lidar_pipeline/web/map.html
+++ b/lidar_pipeline/web/map.html
@@ -59,13 +59,16 @@
         <div class="prec-legend" id="precLegend" hidden>
           <div class="prec-bar" id="precBar"></div>
           <div class="prec-ticks"><span>≤ 0,35</span><span>4</span><span>≥ 45 pts/m²</span></div>
-          <div class="prec-cap">Points sol par m² : sombre = relief interpolé, noir = aucun point</div>
         </div>
       </div>
       <div class="legend" id="legendBlock" title="Relief orienté : la teinte donne l'orientation de la pente, la clarté le relief local">
         <canvas id="roseCanvas" width="96" height="96"></canvas>
         <div class="rose-cap">Pente orientée vers…<br><span>clair = bosse · sombre = creux</span></div>
       </div>
+      <details id="readingBlock" class="reading">
+        <summary>Comment lire la carte</summary>
+        <ul id="readingList"></ul>
+      </details>
     </section>
     <section id="tab-tile" role="tabpanel" hidden>
       <p class="hint" id="tileHint">Cliquez une dalle sur la carte pour la sélectionner.</p>
diff --git a/lidar_pipeline/web/map.js b/lidar_pipeline/web/map.js
index bdcc6fe..a4f2498 100644
--- a/lidar_pipeline/web/map.js
+++ b/lidar_pipeline/web/map.js
@@ -532,6 +532,25 @@ function renderPrecLegend() {
   }
 }
 
+// « Comment lire » : phrases de VIZ_LEGENDS (champ reading), servies par
+// /api/map/meta — même texte que la légende de la planche PDF.
+function renderReading() {
+  const mode = effectiveMode();
+  const keys = mode === 'precision' ? [precisionKey()]
+    : mode === 'compare' ? [sideLayerKey(STATE.compare.left), sideLayerKey(STATE.compare.right)]
+    : [STATE.main];
+  const seen = new Set();
+  const items = [];
+  for (const k of keys) {
+    if (!k || seen.has(k)) continue;
+    seen.add(k);
+    const info = META.layers.find(l => l.key === k);
+    for (const s of (info && info.reading) || []) items.push('<li>' + esc(s) + '</li>');
+  }
+  el('readingList').innerHTML = items.join('');
+  el('readingBlock').hidden = !items.length;
+}
+
 function renderPanel() {
   const labels = new Map(META.layers.map(l => [l.key, l]));
   const mains = mainKeys(META);
@@ -552,6 +571,7 @@ function renderPanel() {
   el('reliefIntensity').value = STATE.intensity;
   el('reliefIntensityVal').textContent = fmtIntensity(STATE.intensity);
   el('intensityRow').hidden = effectiveMode() === 'precision';
+  renderReading();
   if (!prec) return;
   renderPrecLegend();
   const mode = effectiveMode();
@@ -1310,9 +1330,10 @@ function _sanitizedPanelLS() {
   if (typeof s.tab === 'string') out.tab = s.tab;
   if (typeof s.collapsed === 'boolean') out.collapsed = s.collapsed;
   if (['closed', 'half', 'full'].includes(s.sheet)) out.sheet = s.sheet;
+  if (typeof s.reading === 'boolean') out.reading = s.reading;
   return out;
 }
-const PANEL = Object.assign({ tab: 'view', collapsed: false, sheet: 'half' }, _sanitizedPanelLS());
+const PANEL = Object.assign({ tab: 'view', collapsed: false, sheet: 'half', reading: false }, _sanitizedPanelLS());
 // want = onglet choisi (mémorisé) ; tab = onglet affiché. Génération encore
 // inconnue au démarrage (api/status) : Affichage en attendant, puis l'onglet
 // choisi revient dès qu'il est proposé.
@@ -1337,7 +1358,7 @@ function panelVisibleTab() {
   return PANEL.tab;
 }
 
-function panelSave() { lsSet(PANEL_LS, { tab: PANEL.want, collapsed: PANEL.collapsed, sheet: PANEL.sheet }); }
+function panelSave() { lsSet(PANEL_LS, { tab: PANEL.want, collapsed: PANEL.collapsed, sheet: PANEL.sheet, reading: PANEL.reading }); }
 
 function panelRender() {
   const tabs = panelTabs();
@@ -1389,6 +1410,13 @@ function setSheet(state) {
 el('panelTabs').querySelectorAll('button[data-tab]').forEach(b =>
   b.addEventListener('click', () => openTab(b.dataset.tab)));
 el('panelCollapse').addEventListener('click', () => setCollapsed(!PANEL.collapsed));
+// État ouvert/fermé du « Comment lire » mémorisé à part (indépendant de
+// l'onglet actif).
+el('readingBlock').open = !!PANEL.reading;
+el('readingBlock').addEventListener('toggle', () => {
+  PANEL.reading = el('readingBlock').open;
+  panelSave();
+});
 phoneQuery.addEventListener('change', panelRender);
 window.addEventListener('resize', panelRender);   // hauteur du volet en vh (rotation)