ich bin dran !

static/js/update_mindmap.js

@@ -24,18 +24,30 @@ document.addEventListener('DOMContentLoaded', function() {
     }
     console.log('Cytoscape ist verfügbar');
 
-    // Beispiel-Daten (kannst du später ersetzen)
+    // Beispiel-Daten entfernt, stattdessen große Mindmap-Daten verwenden
     const elements = [
-        { data: { id: 'a', label: 'Neuron A' } },
-        { data: { id: 'b', label: 'Neuron B' } },
-        { data: { id: 'c', label: 'Neuron C' } },
-        { data: { source: 'a', target: 'b' } },
-        { data: { source: 'a', target: 'c' } }
+        // Knoten
+        ...mindmapData.nodes.map(node => ({
+            data: {
+                id: node.id,
+                label: node.label,
+                category: node.category,
+                description: node.description
+            }
+        })),
+        // Kanten
+        ...mindmapData.edges.map(edge => ({
+            data: {
+                source: edge.source,
+                target: edge.target,
+                label: edge.label
+            }
+        }))
     ];
 
     console.log('Initialisiere Cytoscape...');
     
-    // Initialisiere Cytoscape
+    // Initialisiere Cytoscape mit großen Daten
     window.cy = cytoscape({
         container: cyContainer,
         elements: elements,
@@ -43,7 +55,7 @@ document.addEventListener('DOMContentLoaded', function() {
             {
                 selector: 'node',
                 style: {
-                    'background-color': '#60a5fa',
+                    'background-color': 'data(color)',
                     'label': 'data(label)',
                     'color': '#fff',
                     'text-background-color': '#222a',
@@ -68,7 +80,13 @@ document.addEventListener('DOMContentLoaded', function() {
                     'line-color': '#a78bfa',
                     'target-arrow-color': '#a78bfa',
                     'target-arrow-shape': 'triangle',
-                    'curve-style': 'bezier'
+                    'curve-style': 'bezier',
+                    'label': 'data(label)',
+                    'font-size': 12,
+                    'color': '#fff',
+                    'text-background-color': '#222a',
+                    'text-background-opacity': 0.7,
+                    'text-background-padding': '2px',
                 }
             }
         ],
@@ -80,6 +98,9 @@ document.addEventListener('DOMContentLoaded', function() {
 
     console.log('Cytoscape initialisiert');
 
+    // Mindmap mit echten Daten befüllen (Styles, Farben etc.)
+    updateMindmap();
+
     // Event auslösen, damit andere Scripte reagieren können
     document.dispatchEvent(new Event('mindmap-loaded'));
     console.log('mindmap-loaded Event ausgelöst');