From f83263771fdc240c339c297c674d2c3dec267bcd Mon Sep 17 00:00:00 2001
From: SOC Analyst <soc@dashboard.local>
Date: Thu, 19 Mar 2026 11:28:26 +0100
Subject: [PATCH] =?UTF-8?q?feat(clustering):=20animation=20de=20calcul=20+?=
 =?UTF-8?q?=20scroll=20ind=C3=A9pendant=20des=20colonnes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Layout fix (App.tsx):
- Création de MainContent avec useLocation pour layout adaptatif
- Route /clustering : main sans padding, overflow-hidden, height=calc(100vh-3.5rem)
  → ClusteringView remplit exactement la fenêtre, colonnes scrollables indépendamment
- Autres routes : comportement inchangé (px-6 py-5 overflow-auto)

Animation de calcul (ClusteringView.tsx):
- Overlay absolu z-20 sur le canvas pendant computing || loading
- 2 anneaux concentriques contra-rotatifs (accent-primary + blue-500)
- 8 noeuds orbitaux avec animate-ping colorés selon taxonomie menace
- Emoji 🔬 pulsant au centre
- Texte : 'Clustering en cours…' + détails (31 features, toutes les IPs)
- Mise à jour toutes les 3s (texte animé)

Scroll indépendant:
- Panneau gauche : style height:100% explicite
- Sidebar droite : style height:100% explicite
- Canvas : overflow-hidden ajouté
- La main a overflow-hidden → les colonnes scrollent sans bouger les voisines

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/src/App.tsx                       | 83 ++++++++++++++--------
 frontend/src/components/ClusteringView.tsx | 57 +++++++++++++--
 2 files changed, 103 insertions(+), 37 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 82784a6..4155bb7 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -321,6 +321,57 @@ function RouteTracker() {
   return null;
 }
 
+// ─── MainContent : layout adaptatif selon la route ───────────────────────────
+// Les vues "canvas" ont besoin d'une hauteur fixe sans padding
+// pour que leurs colonnes scroll indépendamment.
+const FULLHEIGHT_ROUTES = ['/clustering'];
+
+function MainContent({ counts: _counts }: { counts: AlertCounts | null }) {
+  const location = useLocation();
+  const isFullHeight = FULLHEIGHT_ROUTES.some(r => location.pathname.startsWith(r));
+
+  if (isFullHeight) {
+    return (
+      <main className="mt-14 overflow-hidden" style={{ height: 'calc(100vh - 3.5rem)' }}>
+        <Routes>
+          <Route path="/clustering" element={<ClusteringView />} />
+        </Routes>
+      </main>
+    );
+  }
+
+  return (
+    <main className="flex-1 px-6 py-5 mt-14 overflow-auto">
+      <Routes>
+        <Route path="/" element={<IncidentsView />} />
+        <Route path="/incidents" element={<IncidentsView />} />
+        <Route path="/pivot" element={<PivotView />} />
+        <Route path="/fingerprints" element={<FingerprintsView />} />
+        <Route path="/campaigns" element={<CampaignsView />} />
+        <Route path="/threat-intel" element={<ThreatIntelView />} />
+        <Route path="/bruteforce" element={<BruteForceView />} />
+        <Route path="/tcp-spoofing" element={<TcpSpoofingView />} />
+        <Route path="/headers" element={<HeaderFingerprintView />} />
+        <Route path="/heatmap" element={<Navigate to="/" replace />} />
+        <Route path="/botnets" element={<Navigate to="/campaigns" replace />} />
+        <Route path="/rotation" element={<Navigate to="/fingerprints" replace />} />
+        <Route path="/ml-features" element={<MLFeaturesView />} />
+        <Route path="/detections" element={<DetectionsList />} />
+        <Route path="/detections/:type/:value" element={<DetailsView />} />
+        <Route path="/investigate" element={<DetectionsList />} />
+        <Route path="/investigate/:type/:value" element={<InvestigateRoute />} />
+        <Route path="/investigation/ja4/:ja4" element={<JA4InvestigationView />} />
+        <Route path="/investigation/:ip" element={<InvestigationView />} />
+        <Route path="/entities/subnet/:subnet" element={<SubnetInvestigation />} />
+        <Route path="/entities/:type/:value" element={<EntityInvestigationView />} />
+        <Route path="/bulk-classify" element={<BulkClassificationRoute />} />
+        <Route path="/tools/correlation-graph/:ip" element={<CorrelationGraphRoute />} />
+        <Route path="/tools/timeline/:ip?" element={<TimelineRoute />} />
+      </Routes>
+    </main>
+  );
+}
+
 // ─── App ──────────────────────────────────────────────────────────────────────
 
 export default function App() {
@@ -362,36 +413,8 @@ export default function App() {
           {/* Fixed top header */}
           <TopHeader counts={counts} />
 
-          {/* Scrollable page content */}
-          <main className="flex-1 px-6 py-5 mt-14 overflow-auto">
-            <Routes>
-              <Route path="/" element={<IncidentsView />} />
-              <Route path="/incidents" element={<IncidentsView />} />
-              <Route path="/pivot" element={<PivotView />} />
-              <Route path="/fingerprints" element={<FingerprintsView />} />
-              <Route path="/campaigns" element={<CampaignsView />} />
-              <Route path="/threat-intel" element={<ThreatIntelView />} />
-              <Route path="/bruteforce" element={<BruteForceView />} />
-              <Route path="/tcp-spoofing" element={<TcpSpoofingView />} />
-              <Route path="/clustering" element={<ClusteringView />} />
-              <Route path="/headers" element={<HeaderFingerprintView />} />
-              <Route path="/heatmap" element={<Navigate to="/" replace />} />
-              <Route path="/botnets" element={<Navigate to="/campaigns" replace />} />
-              <Route path="/rotation" element={<Navigate to="/fingerprints" replace />} />
-              <Route path="/ml-features" element={<MLFeaturesView />} />
-              <Route path="/detections" element={<DetectionsList />} />
-              <Route path="/detections/:type/:value" element={<DetailsView />} />
-              <Route path="/investigate" element={<DetectionsList />} />
-              <Route path="/investigate/:type/:value" element={<InvestigateRoute />} />
-              <Route path="/investigation/ja4/:ja4" element={<JA4InvestigationView />} />
-              <Route path="/investigation/:ip" element={<InvestigationView />} />
-              <Route path="/entities/subnet/:subnet" element={<SubnetInvestigation />} />
-              <Route path="/entities/:type/:value" element={<EntityInvestigationView />} />
-              <Route path="/bulk-classify" element={<BulkClassificationRoute />} />
-              <Route path="/tools/correlation-graph/:ip" element={<CorrelationGraphRoute />} />
-              <Route path="/tools/timeline/:ip?" element={<TimelineRoute />} />
-            </Routes>
-          </main>
+          {/* Page content — full-height sans padding pour les vues canvas */}
+          <MainContent counts={counts} />
         </div>
       </div>
     </BrowserRouter>
diff --git a/frontend/src/components/ClusteringView.tsx b/frontend/src/components/ClusteringView.tsx
index ccadef6..3b9bebe 100644
--- a/frontend/src/components/ClusteringView.tsx
+++ b/frontend/src/components/ClusteringView.tsx
@@ -330,8 +330,8 @@ export default function ClusteringView() {
 
   return (
     <div className="flex h-full overflow-hidden bg-background text-text-primary">
-      {/* ── Panneau gauche ── */}
-      <div className="flex flex-col w-72 flex-shrink-0 border-r border-gray-700 overflow-y-auto p-4 gap-4 z-10">
+      {/* ── Panneau gauche (scroll indépendant) ── */}
+      <div className="flex flex-col w-72 flex-shrink-0 border-r border-gray-700 overflow-y-auto p-4 gap-4 z-10" style={{ height: '100%' }}>
         <div>
           <h2 className="text-lg font-bold mb-1">🔬 Clustering IPs</h2>
           <p className="text-xs text-text-secondary">Rendu WebGL · K-means++ sur toutes les IPs</p>
@@ -440,12 +440,55 @@ export default function ClusteringView() {
       </div>
 
       {/* ── Canvas WebGL (deck.gl) ── */}
-      <div className="flex-1 relative">
-        {!data && !loading && !computing && (
-          <div className="absolute inset-0 flex items-center justify-center text-text-secondary">
-            Cliquez sur <strong className="mx-1 text-white">Recalculer</strong> pour démarrer
+      <div className="flex-1 relative overflow-hidden">
+
+        {/* Animation de calcul — remplace le canvas pendant le traitement */}
+        {(computing || loading) && (
+          <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-background">
+            {/* Noeuds pulsants animés */}
+            <div className="relative w-56 h-56 mb-2">
+              {/* Anneau tournant */}
+              <div className="absolute inset-0 flex items-center justify-center">
+                <div className="w-32 h-32 rounded-full border-2 border-accent-primary/20 border-t-accent-primary animate-spin" style={{ animationDuration: '1.4s' }} />
+              </div>
+              <div className="absolute inset-0 flex items-center justify-center">
+                <div className="w-20 h-20 rounded-full border-2 border-blue-500/20 border-b-blue-500/80 animate-spin" style={{ animationDuration: '2.1s', animationDirection: 'reverse' }} />
+              </div>
+              {/* Noeuds orbitaux représentant les clusters */}
+              {([0,1,2,3,4,5,6,7] as const).map((i) => {
+                const angle = (i / 8) * 2 * Math.PI;
+                const r = 88;
+                const x = 50 + (r / 1.12) * Math.cos(angle);
+                const y = 50 + (r / 1.12) * Math.sin(angle);
+                const colors = ['#dc2626','#f97316','#eab308','#22c55e','#3b82f6','#8b5cf6','#ec4899','#14b8a6'];
+                return (
+                  <div key={i} className="absolute w-3 h-3 rounded-full animate-ping"
+                    style={{
+                      left: `${x}%`, top: `${y}%`, transform: 'translate(-50%,-50%)',
+                      background: colors[i], opacity: 0.75,
+                      animationDelay: `${i * 0.18}s`, animationDuration: '1.6s',
+                    }} />
+                );
+              })}
+              {/* Centre */}
+              <div className="absolute inset-0 flex items-center justify-center">
+                <div className="text-2xl select-none animate-pulse">🔬</div>
+              </div>
+            </div>
+            <p className="text-white font-semibold text-lg tracking-wide">Clustering en cours…</p>
+            <p className="text-text-secondary text-sm mt-1">K-means++ · 31 features · toutes les IPs</p>
+            <p className="text-text-disabled text-xs mt-2 animate-pulse">Mise à jour automatique toutes les 3 secondes</p>
           </div>
         )}
+
+        {/* Message état vide */}
+        {!data && !loading && !computing && (
+          <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 text-text-secondary">
+            <span className="text-4xl">🔬</span>
+            <span>Cliquez sur <strong className="text-white">Recalculer</strong> pour démarrer</span>
+          </div>
+        )}
+
         <DeckGL
           views={new OrthographicView({ id: 'ortho', controller: true })}
           viewState={viewState}
@@ -528,7 +571,7 @@ function ClusterSidebar({ node, ipDetails, ipTotal, ipPage, clusterPoints, onClo
   };
 
   return (
-    <div className="w-96 flex-shrink-0 border-l border-gray-700 bg-background-secondary flex flex-col overflow-hidden">
+    <div className="w-96 flex-shrink-0 border-l border-gray-700 bg-background-secondary flex flex-col overflow-hidden" style={{ height: '100%' }}>
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-3 border-b border-gray-700">
         <div>