noch nicht ganz

static/js/update_mindmap.js

@@ -186,7 +186,8 @@ document.addEventListener('DOMContentLoaded', function() {
                 description: node.description,
                 hasChildren: node.hasChildren,
                 expanded: node.expanded,
-                expanded: node.expanded
+                neuronSize: node.neuronSize,
+                neuronActivity: node.neuronActivity
             }
         })),
         // Kanten
@@ -194,14 +195,15 @@ document.addEventListener('DOMContentLoaded', function() {
             data: {
                 source: edge.source,
                 target: edge.target,
-                label: edge.label
+                label: edge.label,
+                strength: edge.strength
             }
         }))
     ];
 
     console.log('Initialisiere Cytoscape...');
     
-    // Initialisiere Cytoscape mit einfachem, stabilem Design
+    // Initialisiere Cytoscape mit neuronalem Design
     window.cy = cytoscape({
         container: cyContainer,
         elements: elements,
@@ -212,18 +214,26 @@ document.addEventListener('DOMContentLoaded', function() {
                     'background-color': 'data(color)',
                     'label': 'data(label)',
                     'color': '#fff',
-                    'text-background-color': '#222222',
+                    'text-background-color': 'rgba(0, 0, 0, 0.7)',
-                    'text-background-opacity': 0.7,
+                    'text-background-opacity': 0.8,
                     'text-background-padding': '4px',
                     'text-valign': 'center',
                     'text-halign': 'center',
-                    'font-size': 18,
+                    'font-size': 16,
-                    'width': 40,
+                    'width': 'mapData(neuronSize, 3, 10, 30, 60)',
-                    'height': 40,
+                    'height': 'mapData(neuronSize, 3, 10, 30, 60)',
                     'border-width': 2,
                     'border-color': '#fff',
+                    'border-opacity': 0.8,
                     'overlay-padding': 4,
-                    'z-index': 10
+                    'z-index': 10,
+                    'shape': 'ellipse',
+                    'background-opacity': 0.85,
+                    'shadow-blur': 'mapData(neuronActivity, 0.3, 1, 10, 20)',
+                    'shadow-color': 'data(color)',
+                    'shadow-opacity': 0.6,
+                    'shadow-offset-x': 0,
+                    'shadow-offset-y': 0
                 }
             },
             {
@@ -236,25 +246,31 @@ document.addEventListener('DOMContentLoaded', function() {
                 selector: 'node:selected',
                 style: {
                     'border-color': '#f59e42',
-                    'border-width': 4
+                    'border-width': 4,
+                    'shadow-blur': 30,
+                    'shadow-opacity': 0.8
                 }
             },
             {
                 selector: 'edge',
                 style: {
-                    'width': 3,
+                    'width': 'mapData(strength, 0.2, 1, 1, 3)',
                     'line-color': '#a78bfa',
+                    'line-opacity': 'mapData(strength, 0.2, 1, 0.4, 0.8)',
                     'target-arrow-color': '#a78bfa',
-                    'target-arrow-shape': 'triangle',
+                    'target-arrow-shape': 'none',
                     'curve-style': 'bezier',
-                    'label': 'data(label)',
+                    'control-point-distances': [20, -20],
-                    'font-size': 12,
+                    'control-point-weights': [0.5, 0.5],
-                    'color': '#fff',
+                    'edge-distances': 'intersection',
-                    'text-background-color': '#222222',
+                    'loop-direction': '-45deg',
-                    'text-background-opacity': 0.7,
+                    'loop-sweep': '-90deg',
-                    'text-background-padding': '2px',
+                    'line-style': function(ele) {
-                    'opacity': 0.8,
+                        const strength = ele.data('strength');
-                    'line-style': 'solid'
+                        if (strength <= 0.4) return 'dotted';
+                        if (strength <= 0.6) return 'dashed';
+                        return 'solid';
+                    }
                 }
             },
             {
@@ -263,18 +279,57 @@ document.addEventListener('DOMContentLoaded', function() {
                     'width': 5,
                     'line-color': '#f59e42',
                     'target-arrow-color': '#f59e42',
-                    'opacity': 1
+                    'opacity': 1,
+                    'line-style': 'solid'
                 }
             }
         ],
         layout: {
             name: 'cose',
+            animate: true,
+            animationDuration: 1000,
+            nodeDimensionsIncludeLabels: true,
+            padding: 100,
+            spacingFactor: 1.8,
+            randomize: false,
+            fit: true,
+            componentSpacing: 100,
+            nodeRepulsion: 8000,
+            edgeElasticity: 100,
             animate: true
         }
     });
 
     console.log('Cytoscape initialisiert');
 
+    // Füge neuronale Eigenschaften zu allen Knoten hinzu
+    cy.nodes().forEach(node => {
+        const data = node.data();
+        node.data({
+            ...data,
+            neuronSize: data.neuronSize || 8,
+            neuronActivity: data.neuronActivity || 0.8,
+            refractionPeriod: Math.random() * 300 + 700,
+            threshold: Math.random() * 0.3 + 0.6,
+            lastFired: 0,
+            color: categoryColors[data.category] || '#60a5fa'
+        });
+    });
+
+    // Füge synaptische Eigenschaften zu allen Kanten hinzu
+    cy.edges().forEach(edge => {
+        const data = edge.data();
+        edge.data({
+            ...data,
+            strength: data.strength || 0.5,
+            conductionVelocity: Math.random() * 0.5 + 0.3,
+            latency: Math.random() * 100 + 50
+        });
+    });
+
+    // Starte neuronale Aktivitätssimulation
+    startNeuralActivitySimulation(cy);
+
     // Mindmap mit echten Daten befüllen (Styles, Farben etc.)
     updateMindmap();
 
@@ -302,113 +357,142 @@ const categoryColors = {
   'Psychologie': '#ef4444'
 };
 
-// Mindmap aktualisieren
+// Funktion zum Initialisieren des neuronalen Designs
+function initializeNeuralDesign(cy) {
+    // Füge neuronale Eigenschaften zu allen Knoten hinzu
+    cy.nodes().forEach(node => {
+        const data = node.data();
+        node.data({
+            ...data,
+            neuronSize: data.neuronSize || 8,
+            neuronActivity: data.neuronActivity || 0.8,
+            refractionPeriod: Math.random() * 300 + 700,
+            threshold: Math.random() * 0.3 + 0.6,
+            lastFired: 0,
+            color: categoryColors[data.category] || '#60a5fa'
+        });
+    });
+
+    // Füge synaptische Eigenschaften zu allen Kanten hinzu
+    cy.edges().forEach(edge => {
+        const data = edge.data();
+        edge.data({
+            ...data,
+            strength: data.strength || 0.5,
+            conductionVelocity: Math.random() * 0.5 + 0.3,
+            latency: Math.random() * 100 + 50
+        });
+    });
+
+    // Wende neuronales Styling an
+    cy.style()
+        .selector('node')
+        .style({
+            'background-color': 'data(color)',
+            'label': 'data(label)',
+            'color': '#fff',
+            'text-background-color': 'rgba(0, 0, 0, 0.7)',
+            'text-background-opacity': 0.8,
+            'text-background-padding': '4px',
+            'text-valign': 'center',
+            'text-halign': 'center',
+            'font-size': 16,
+            'width': 'mapData(neuronSize, 3, 10, 30, 60)',
+            'height': 'mapData(neuronSize, 3, 10, 30, 60)',
+            'border-width': 2,
+            'border-color': '#fff',
+            'border-opacity': 0.8,
+            'overlay-padding': 4,
+            'z-index': 10,
+            'shape': 'ellipse',
+            'background-opacity': 0.85,
+            'shadow-blur': 'mapData(neuronActivity, 0.3, 1, 10, 20)',
+            'shadow-color': 'data(color)',
+            'shadow-opacity': 0.6,
+            'shadow-offset-x': 0,
+            'shadow-offset-y': 0
+        })
+        .selector('edge')
+        .style({
+            'width': 'mapData(strength, 0.2, 1, 1, 3)',
+            'line-color': '#a78bfa',
+            'line-opacity': 'mapData(strength, 0.2, 1, 0.4, 0.8)',
+            'target-arrow-color': '#a78bfa',
+            'target-arrow-shape': 'none',
+            'curve-style': 'bezier',
+            'control-point-distances': [20, -20],
+            'control-point-weights': [0.5, 0.5],
+            'edge-distances': 'intersection',
+            'loop-direction': '-45deg',
+            'loop-sweep': '-90deg',
+            'line-style': function(ele) {
+                const strength = ele.data('strength');
+                if (strength <= 0.4) return 'dotted';
+                if (strength <= 0.6) return 'dashed';
+                return 'solid';
+            }
+        })
+        .update();
+
+    // Starte neuronale Aktivitätssimulation
+    startNeuralActivitySimulation(cy);
+}
+
+// Modifiziere die updateMindmap Funktion
 function updateMindmap() {
-  if (!cy) return;
+    if (!cy) return;
     
-  // Bestehende Elemente entfernen
+    // Bestehende Elemente entfernen
-  cy.elements().remove();
+    cy.elements().remove();
     
-  // Neue Knoten hinzufügen
+    // Neue Knoten hinzufügen
-  mindmapData.nodes.forEach(node => {
+    mindmapData.nodes.forEach(node => {
-    cy.add({
+        cy.add({
-      group: 'nodes',
+            group: 'nodes',
-      data: {
+            data: {
-        id: node.id,
+                id: node.id,
-        label: node.label,
+                label: node.label,
-        category: node.category,
+                category: node.category,
-        description: node.description,
+                description: node.description,
-        color: categoryColors[node.category] || '#60a5fa',
+                hasChildren: node.hasChildren,
-        hasChildren: node.hasChildren,
+                expanded: node.expanded,
-        expanded: node.expanded
+                neuronSize: node.neuronSize,
-      }
+                neuronActivity: node.neuronActivity
+            }
+        });
     });
-  });
     
-  // Neue Kanten hinzufügen
+    // Neue Kanten hinzufügen
-  mindmapData.edges.forEach(edge => {
+    mindmapData.edges.forEach(edge => {
-    cy.add({
+        cy.add({
-      group: 'edges',
+            group: 'edges',
-      data: {
+            data: {
-        source: edge.source,
+                source: edge.source,
-        target: edge.target,
+                target: edge.target,
-        label: edge.label
+                strength: edge.strength
-      }
+            }
+        });
     });
-  });
     
-  // Nur einfaches, klares Styling - KEINE Schatten, KEIN Glow, KEINE dynamischen Styles!
+    // Neuronales Design initialisieren
-  cy.style([
+    initializeNeuralDesign(cy);
-    {
-      selector: 'node',
-      style: {
-        'label': 'data(label)',
-        'text-valign': 'center',
-        'text-halign': 'center',
-        'text-wrap': 'wrap',
-        'text-max-width': '100px',
-        'font-size': '14px',
-        'color': '#ffffff',
-        'text-outline-color': '#0a0e19',
-        'text-outline-width': 1.5,
-        'text-outline-opacity': 0.9,
-        'text-margin-y': 7,
-        'width': 40,
-        'height': 40,
-        'background-color': 'data(color)',
-        'background-opacity': 0.85,
-        'border-width': 2,
-        'shape': 'ellipse',
-        'text-background-color': 'rgba(24, 28, 45, 0.7)',
-        'text-background-opacity': 0.8,
-        'text-background-shape': 'roundrectangle',
-        'text-background-padding': '4px'
-      }
-    },
-    {
-      selector: 'edge',
-      style: {
-        'width': 3,
-        'curve-style': 'bezier',
-        'line-color': '#8a8aaa',
-        'line-opacity': 0.7,
-        'line-style': 'solid',
-        'target-arrow-shape': 'triangle',
-        'target-arrow-color': '#8a8aaa',
-        'label': 'data(label)',
-        'font-size': 12,
-        'color': '#fff',
-        'text-background-color': '#222222',
-        'text-background-opacity': 0.7,
-        'text-background-padding': '2px'
-      }
-    },
-    {
-      selector: 'node:selected',
-      style: {
-        'border-color': '#f59e42',
-        'border-width': 4
-      }
-    },
-    {
-      selector: 'edge:selected',
-      style: {
-        'width': 5,
-        'line-color': '#f59e42',
-        'target-arrow-color': '#f59e42',
-        'opacity': 1
-      }
-    }
-  ]);
     
-  // Layout anwenden
+    // Layout anwenden
-  cy.layout({
+    cy.layout({
-    name: 'cose',
+        name: 'cose',
-    animate: true,
+        animate: true,
-    animationDuration: 1800,
+        animationDuration: 1000,
-    nodeDimensionsIncludeLabels: true,
+        nodeDimensionsIncludeLabels: true,
-    padding: 100
+        padding: 100,
-  }).run();
+        spacingFactor: 1.8,
+        randomize: false,
+        fit: true,
+        componentSpacing: 100,
+        nodeRepulsion: 8000,
+        edgeElasticity: 100,
+        nestingFactor: 1.2,
+        gravity: 80
+    }).run();
 }
 
 /**
@@ -756,11 +840,15 @@ async function loadSubthemes(node) {
                     description: subtheme.description,
                     hasChildren: subtheme.hasChildren,
                     expanded: false,
-                    color: categoryColors[subtheme.category] || '#60a5fa'
+                    neuronSize: 6,
+                    neuronActivity: 0.7
                 }
             });
         });
         
+        // Neuronales Design für die neue Mindmap initialisieren
+        initializeNeuralDesign(newCy);
+        
         // Event-Listener für die neue Mindmap
         newCy.on('tap', 'node', async function(evt) {
             const clickedNode = evt.target;
@@ -841,5 +929,18 @@ style.textContent = `
         width: 100%;
         height: calc(100% - 4rem);
     }
+
+    /* Neuronale Effekte */
+    .cy-container {
+        background: linear-gradient(45deg, #1a1a1a, #2a2a2a);
+    }
+
+    .cy-container node {
+        transition: all 0.3s ease;
+    }
+
+    .cy-container node:hover {
+        filter: brightness(1.2);
+    }
 `;
 document.head.appendChild(style);