✨ feat: enhance mindmap update functionality in update_mindmap.js

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,
                 }
             }
         ],
@@ -678,3 +751,23 @@ function createFlashContainer() {
     document.body.appendChild(container);
     return container;
 }
+
+// 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();
+});