From 6a2248ddcdf3ba50fa15694504724efb56831c57 Mon Sep 17 00:00:00 2001
From: Dom <dom@rpa-vision-v3.local>
Date: Mon, 20 Apr 2026 18:26:05 +0200
Subject: [PATCH] =?UTF-8?q?feat(dashboard):=20clic=20plein=20=C3=A9cran=20?=
 =?UTF-8?q?sur=20les=20images=20cartographie?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Modale fullscreen au clic sur les diagrammes BPMN/DFG.
Fermeture par clic ou Échap. Les images sont illisibles en miniature.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web_dashboard/templates/process_mining.html | 29 ++++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/web_dashboard/templates/process_mining.html b/web_dashboard/templates/process_mining.html
index 059b31b0c..188e0465d 100644
--- a/web_dashboard/templates/process_mining.html
+++ b/web_dashboard/templates/process_mining.html
@@ -219,12 +219,18 @@
                 <button class="toggle-btn" onclick="switchView('dfg', this)">Vue flux</button>
             </div>
             <div id="bpmnView" class="process-image-container">
-                <img id="bpmnImage" src="" alt="Cartographie des processus" />
-                <p class="image-legend">Chaque rectangle represente une etape du processus observe. Les fleches indiquent l'ordre des actions.</p>
+                <img id="bpmnImage" src="" alt="Cartographie des processus" style="cursor:pointer" onclick="openFullscreen(this)" title="Cliquer pour agrandir" />
+                <p class="image-legend">Cliquer sur l'image pour l'agrandir. Chaque rectangle represente une etape du processus observe.</p>
             </div>
             <div id="dfgView" class="process-image-container" style="display:none;">
-                <img id="dfgImage" src="" alt="Graphe de flux" />
-                <p class="image-legend">Chaque noeud represente une action. Les chiffres sur les fleches indiquent la frequence de passage.</p>
+                <img id="dfgImage" src="" alt="Graphe de flux" style="cursor:pointer" onclick="openFullscreen(this)" title="Cliquer pour agrandir" />
+                <p class="image-legend">Cliquer sur l'image pour l'agrandir. Les chiffres sur les fleches indiquent la frequence de passage.</p>
+            </div>
+
+            <!-- Modale plein écran -->
+            <div id="fullscreenModal" onclick="closeFullscreen()" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.95); z-index:9999; cursor:zoom-out; overflow:auto;">
+                <div style="position:absolute; top:10px; right:20px; color:white; font-size:24px; cursor:pointer; z-index:10000;">✕ Fermer</div>
+                <img id="fullscreenImg" src="" style="display:block; margin:20px auto; max-width:95vw; max-height:95vh; object-fit:contain;" />
             </div>
         </div>
 
@@ -420,6 +426,21 @@ function renderResults(data) {
 // ========================================================================
 // Toggle vue BPMN / DFG
 // ========================================================================
+function openFullscreen(img) {
+    document.getElementById('fullscreenImg').src = img.src;
+    document.getElementById('fullscreenModal').style.display = 'block';
+    document.body.style.overflow = 'hidden';
+}
+
+function closeFullscreen() {
+    document.getElementById('fullscreenModal').style.display = 'none';
+    document.body.style.overflow = 'auto';
+}
+
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') closeFullscreen();
+});
+
 function switchView(view, btn) {
     document.querySelectorAll('.view-toggle .toggle-btn').forEach(b => b.classList.remove('active'));
     btn.classList.add('active');