From c888dcc4528304beabcc3e6caba576010a6e2dca Mon Sep 17 00:00:00 2001
From: marwin <medczinski.marw@gmail.com>
Date: Tue, 6 May 2025 22:26:28 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20enhance=20mindmap=20update?=
 =?UTF-8?q?=20functionality=20in=20update=5Fmindmap.js?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/js/update_mindmap.js | 109 +++++++++++++++++++++++++++++++++---
 1 file changed, 101 insertions(+), 8 deletions(-)

diff --git a/static/js/update_mindmap.js b/static/js/update_mindmap.js
index 837e0f8..3468c07 100644
--- a/static/js/update_mindmap.js
+++ b/static/js/update_mindmap.js
@@ -52,6 +52,7 @@ document.addEventListener('DOMContentLoaded', function() {
         container: cyContainer,
         elements: elements,
         style: [
+            // Neuron Soma: Glow, Pulsieren, Schatten
             {
                 selector: 'node',
                 style: {
@@ -64,15 +65,52 @@ document.addEventListener('DOMContentLoaded', function() {
                     'text-valign': 'center',
                     'text-halign': 'center',
                     'font-size': 18,
-                    'width': 40,
-                    'height': 40,
-                    'border-width': 4,
-                    'border-color': '#a78bfa',
-                    'shadow-blur': 20,
-                    'shadow-color': '#a78bfa',
-                    'shadow-opacity': 0.7,
+                    'width': 48,
+                    'height': 48,
+                    'border-width': 6,
+                    'border-color': '#fff',
+                    'overlay-padding': 8,
+                    'z-index': 10,
+                    'shadow-blur': 24,
+                    'shadow-color': 'data(color)',
+                    'shadow-opacity': 0.8,
+                    'transition-property': 'background-color, border-color, width, height, shadow-blur',
+                    'transition-duration': '0.4s',
                 }
             },
+            // Pulsieren (aktive Klasse)
+            {
+                selector: 'node.pulsing',
+                style: {
+                    'width': 60,
+                    'height': 60,
+                    'shadow-blur': 40,
+                    'border-color': '#fbbf24',
+                }
+            },
+            // Hover-Effekt
+            {
+                selector: 'node:hover',
+                style: {
+                    'border-color': '#fbbf24',
+                    'border-width': 10,
+                    'shadow-blur': 48,
+                    'shadow-color': '#fbbf24',
+                    'background-color': '#fff',
+                    'color': '#fbbf24',
+                }
+            },
+            // Selektierter Knoten
+            {
+                selector: 'node:selected',
+                style: {
+                    'border-color': '#f59e42',
+                    'border-width': 12,
+                    'shadow-blur': 60,
+                    'shadow-color': '#f59e42',
+                }
+            },
+            // Dendriten (normale Kanten)
             {
                 selector: 'edge',
                 style: {
@@ -87,6 +125,41 @@ document.addEventListener('DOMContentLoaded', function() {
                     'text-background-color': '#222a',
                     'text-background-opacity': 0.7,
                     'text-background-padding': '2px',
+                    'opacity': 0.8,
+                    'line-style': 'solid',
+                    'transition-property': 'width, line-color, opacity',
+                    'transition-duration': '0.3s',
+                }
+            },
+            // Axone (stärkere Kanten, z.B. wenn label "beeinflusst" oder "inspiriert")
+            {
+                selector: 'edge[label = "beeinflusst"], edge[label = "inspiriert"]',
+                style: {
+                    'width': 8,
+                    'line-color': '#f59e42',
+                    'target-arrow-color': '#f59e42',
+                    'opacity': 1,
+                    'line-style': 'dashed',
+                }
+            },
+            // Hover-Effekt für Kanten
+            {
+                selector: 'edge:hover',
+                style: {
+                    'width': 12,
+                    'line-color': '#fbbf24',
+                    'target-arrow-color': '#fbbf24',
+                    'opacity': 1,
+                }
+            },
+            // Selektierte Kante
+            {
+                selector: 'edge:selected',
+                style: {
+                    'width': 14,
+                    'line-color': '#f59e42',
+                    'target-arrow-color': '#f59e42',
+                    'opacity': 1,
                 }
             }
         ],
@@ -677,4 +750,24 @@ function createFlashContainer() {
     container.className = 'fixed top-4 right-4 z-50 w-64';
     document.body.appendChild(container);
     return container;
-} 
\ No newline at end of file
+}
+
+// Interaktive Effekte: Pulsieren
+function pulseNode(node) {
+    node.addClass('pulsing');
+    setTimeout(() => node.removeClass('pulsing'), 600);
+}
+cy.nodes().forEach(node => {
+    setInterval(() => pulseNode(node), 2000 + Math.random() * 2000);
+});
+
+// Klick-Interaktion: Pulsieren und Glow verstärken
+cy.on('tap', 'node', function(evt){
+    const node = evt.target;
+    pulseNode(node);
+    node.select();
+});
+// Klick auf Hintergrund: Auswahl zurücksetzen
+cy.on('tap', function(evt){
+    if(evt.target === cy) cy.nodes().unselect();
+}); 
\ No newline at end of file