es wird spät

static/js/update_mindmap.js

@@ -47,12 +47,11 @@ document.addEventListener('DOMContentLoaded', function() {
 
     console.log('Initialisiere Cytoscape...');
     
-    // Initialisiere Cytoscape mit großen Daten
+    // Initialisiere Cytoscape mit einfachem, stabilem Design
     window.cy = cytoscape({
         container: cyContainer,
         elements: elements,
         style: [
-            // Neuron Soma: Glow, Pulsieren, Schatten
             {
                 selector: 'node',
                 style: {
@@ -65,56 +64,25 @@ document.addEventListener('DOMContentLoaded', function() {
                     'text-valign': 'center',
                     'text-halign': 'center',
                     'font-size': 18,
-                    'width': 48,
+                    'width': 40,
-                    'height': 48,
+                    'height': 40,
-                    'border-width': 6,
+                    'border-width': 2,
                     'border-color': '#fff',
-                    'overlay-padding': 8,
+                    'overlay-padding': 4,
-                    'z-index': 10,
+                    '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,
+                    'border-width': 4
-                    'shadow-blur': 60,
-                    'shadow-color': '#f59e42',
                 }
             },
-            // Dendriten (normale Kanten)
             {
                 selector: 'edge',
                 style: {
-                    'width': 4,
+                    'width': 3,
                     'line-color': '#a78bfa',
                     'target-arrow-color': '#a78bfa',
                     'target-arrow-shape': 'triangle',
@@ -126,40 +94,16 @@ document.addEventListener('DOMContentLoaded', function() {
                     'text-background-opacity': 0.7,
                     'text-background-padding': '2px',
                     'opacity': 0.8,
-                    'line-style': 'solid',
+                    '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,
+                    'width': 5,
                     'line-color': '#f59e42',
                     'target-arrow-color': '#f59e42',
-                    'opacity': 1,
+                    'opacity': 1
                 }
             }
         ],
@@ -341,12 +285,7 @@ function updateMindmap() {
         label: node.label,
         category: node.category,
         description: node.description,
-        color: categoryColors[node.category] || '#60a5fa',
+        color: categoryColors[node.category] || '#60a5fa'
-        neuronSize: Math.floor(Math.random() * 8) + 3,
-        neuronActivity: Math.random() * 0.7 + 0.3,
-        pulseFrequency: Math.random() * 4 + 2,
-        refractionPeriod: Math.random() * 300 + 700,
-        threshold: Math.random() * 0.3 + 0.6
       }
     });
   });
@@ -358,15 +297,12 @@ function updateMindmap() {
       data: {
         source: edge.source,
         target: edge.target,
-        label: edge.label,
+        label: edge.label
-        strength: Math.random() * 0.6 + 0.2,
-        conductionVelocity: Math.random() * 0.5 + 0.3,
-        latency: Math.random() * 100 + 50
       }
     });
   });
   
-  // Neuronales Netzwerk-Styling anwenden
+  // Nur einfaches, klares Styling - KEINE Schatten, KEIN Glow, KEINE dynamischen Styles!
   cy.style([
     {
       selector: 'node',
@@ -382,67 +318,50 @@ function updateMindmap() {
         'text-outline-width': 1.5,
         'text-outline-opacity': 0.9,
         'text-margin-y': 7,
-        'width': 'mapData(neuronSize, 3, 10, 15, 40)',
+        'width': 40,
-        'height': 'mapData(neuronSize, 3, 10, 15, 40)',
+        'height': 40,
         'background-color': 'data(color)',
         'background-opacity': 0.85,
-        'border-width': 0,
+        'border-width': 2,
         'shape': 'ellipse',
-        'shadow-blur': 'mapData(neuronActivity, 0.3, 1, 5, 15)',
-        'shadow-color': 'data(color)',
-        'shadow-opacity': 0.6,
-        'shadow-offset-x': 0,
-        'shadow-offset-y': 0,
         'text-background-color': 'rgba(24, 28, 45, 0.7)',
         'text-background-opacity': 0.8,
         'text-background-shape': 'roundrectangle',
-        'text-background-padding': '4px',
+        'text-background-padding': '4px'
-        'transition-property': 'background-color, shadow-blur, shadow-opacity, background-opacity',
-        'transition-duration': '0.5s'
       }
     },
     {
       selector: 'edge',
       style: {
-        'width': 'mapData(strength, 0.2, 0.8, 0.7, 2)',
+        'width': 3,
         'curve-style': 'bezier',
         'line-color': '#8a8aaa',
-        'line-opacity': 'mapData(strength, 0.2, 0.8, 0.4, 0.7)',
+        'line-opacity': 0.7,
-        'line-style': function(ele) {
+        'line-style': 'solid',
-          const strength = ele.data('strength');
+        'target-arrow-shape': 'triangle',
-          if (strength <= 0.4) return 'dotted';
+        'target-arrow-color': '#8a8aaa',
-          if (strength <= 0.6) return 'dashed';
+        'label': 'data(label)',
-          return 'solid';
+        'font-size': 12,
-        },
+        'color': '#fff',
-        'target-arrow-shape': 'none',
+        'text-background-color': '#222a',
-        'source-endpoint': '0% 50%',
+        'text-background-opacity': 0.7,
-        'target-endpoint': '100% 50%',
+        'text-background-padding': '2px'
-        'transition-property': 'line-color, width, line-style, line-opacity',
-        'transition-duration': '0.4s'
       }
     },
     {
-      selector: ':selected',
+      selector: 'node:selected',
       style: {
-        'background-color': '#f59e0b',
+        'border-color': '#f59e42',
-        'shadow-blur': 32,
+        'border-width': 4
-        'shadow-color': '#f59e0b',
-        'shadow-opacity': 1,
-        'border-width': 4,
-        'border-color': '#fff'
       }
     },
     {
-      selector: '.highlighted',
+      selector: 'edge:selected',
       style: {
-        'background-color': '#10b981',
+        'width': 5,
-        'shadow-blur': 28,
+        'line-color': '#f59e42',
-        'shadow-color': '#10b981',
+        'target-arrow-color': '#f59e42',
-        'shadow-opacity': 1,
+        'opacity': 1
-        'line-color': '#10b981',
-        'target-arrow-color': '#10b981',
-        'transition-property': 'background-color, shadow-blur, shadow-opacity, line-color',
-        'transition-duration': '0.3s'
       }
     }
   ]);
@@ -453,31 +372,8 @@ function updateMindmap() {
     animate: true,
     animationDuration: 1800,
     nodeDimensionsIncludeLabels: true,
-    padding: 100,
+    padding: 100
-    spacingFactor: 1.8,
-    randomize: false,
-    fit: true,
-    componentSpacing: 100,
-    nodeRepulsion: 8000,
-    edgeElasticity: 100,
-    nestingFactor: 1.2,
-    gravity: 80
   }).run();
-  
-  // Pulsierende Soma-Effekte starten
-  if (window.pulseInterval) clearInterval(window.pulseInterval);
-  window.pulseInterval = setInterval(() => {
-    cy.nodes().forEach(node => {
-      const baseBlur = 18;
-      const pulse = 0.7 + 0.3 * Math.sin(Date.now() / 400 + node.id().charCodeAt(0));
-      node.style('shadow-blur', baseBlur * pulse);
-      node.style('shadow-opacity', 0.6 + 0.3 * pulse);
-      node.style('background-opacity', 0.85 + 0.1 * pulse);
-    });
-  }, 80);
-  
-  // Neuronale Aktivität simulieren
-  startNeuralActivitySimulation(cy);
 }
 
 /**
@@ -751,23 +647,3 @@ 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();
-});