✨ feat(mindmap): füge Icons und Farben für Kategorien hinzu, verbessere das Layout und die Darstellung der Mindmap in update_mindmap.js

static/js/update_mindmap.js

@@ -101,16 +101,49 @@ const subthemesDatabase = {
     ]
 };
 
-// Initiale Mindmap-Daten (nur oberste Ebene)
+// Icon-Definitionen für Kategorien (FontAwesome oder SVG-URL)
+const categoryIcons = {
+  'Philosophie': 'fa-solid fa-lightbulb',
+  'Wissenschaft': 'fa-solid fa-atom',
+  'Technologie': 'fa-solid fa-microchip',
+  'Künste': 'fa-solid fa-palette',
+  'Psychologie': 'fa-solid fa-brain'
+};
+
+// Farben für Kategorien (wie im Bild)
+const categoryColors = {
+  'Philosophie': '#b71c1c', // Rot
+  'Wissenschaft': '#f4b400', // Gelb
+  'Technologie': '#0d47a1', // Blau
+  'Künste': '#c2185b', // Pink
+  'Psychologie': '#009688' // Türkis
+};
+
+// Initiale Mindmap-Daten (nur oberste Ebene, mit Icon und Farbe)
 const mindmapData = {
     nodes: [
+        {
+            id: 'center',
+            label: 'Wissenskarte',
+            isCenter: true,
+            color: '#f5f5f5',
+            icon: 'fa-solid fa-circle',
+            fontColor: '#222',
+            fontSize: 22
+        },
         {
             id: 'philosophy',
             label: 'Philosophie',
             category: 'Philosophie',
             description: 'Die Lehre vom Denken und der Erkenntnis',
             hasChildren: true,
-            expanded: false
+            expanded: false,
+            neuronSize: 8,
+            neuronActivity: 0.8,
+            color: categoryColors['Philosophie'],
+            icon: categoryIcons['Philosophie'],
+            fontColor: '#fff',
+            fontSize: 18
         },
         {
             id: 'science',
@@ -118,7 +151,13 @@ const mindmapData = {
             category: 'Wissenschaft',
             description: 'Systematische Erforschung der Natur und Gesellschaft',
             hasChildren: true,
-            expanded: false
+            expanded: false,
+            neuronSize: 8,
+            neuronActivity: 0.8,
+            color: categoryColors['Wissenschaft'],
+            icon: categoryIcons['Wissenschaft'],
+            fontColor: '#fff',
+            fontSize: 18
         },
         {
             id: 'technology',
@@ -126,7 +165,13 @@ const mindmapData = {
             category: 'Technologie',
             description: 'Anwendung wissenschaftlicher Erkenntnisse',
             hasChildren: true,
-            expanded: false
+            expanded: false,
+            neuronSize: 8,
+            neuronActivity: 0.8,
+            color: categoryColors['Technologie'],
+            icon: categoryIcons['Technologie'],
+            fontColor: '#fff',
+            fontSize: 18
         },
         {
             id: 'arts',
@@ -134,10 +179,21 @@ const mindmapData = {
             category: 'Künste',
             description: 'Kreativer Ausdruck und künstlerische Gestaltung',
             hasChildren: true,
-            expanded: false
+            expanded: false,
+            neuronSize: 8,
+            neuronActivity: 0.8,
+            color: categoryColors['Künste'],
+            icon: categoryIcons['Künste'],
+            fontColor: '#fff',
+            fontSize: 18
         }
     ],
-    edges: []
+    edges: [
+        { source: 'center', target: 'philosophy', strength: 0.9 },
+        { source: 'center', target: 'science', strength: 0.9 },
+        { source: 'center', target: 'technology', strength: 0.9 },
+        { source: 'center', target: 'arts', strength: 0.9 }
+    ]
 };
 
 // Warte bis DOM geladen ist
@@ -168,7 +224,15 @@ document.addEventListener('DOMContentLoaded', function() {
                 id: node.id,
                 label: node.label,
                 category: node.category,
-                description: node.description
+                description: node.description,
+                hasChildren: node.hasChildren,
+                expanded: node.expanded,
+                neuronSize: node.neuronSize,
+                neuronActivity: node.neuronActivity,
+                color: node.color,
+                icon: node.icon,
+                fontColor: node.fontColor,
+                fontSize: node.fontSize
             }
         })),
         // Kanten
@@ -176,14 +240,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 concentric/circle Layout und Icon-Overlay
     window.cy = cytoscape({
         container: cyContainer,
         elements: elements,
@@ -193,70 +258,104 @@ document.addEventListener('DOMContentLoaded', function() {
                 style: {
                     'background-color': 'data(color)',
                     'label': 'data(label)',
-                    'color': '#fff',
+                    'color': 'data(fontColor)',
-                    'text-background-color': '#222222',
-                    'text-background-opacity': 0.7,
-                    'text-background-padding': '4px',
                     'text-valign': 'center',
                     'text-halign': 'center',
-                    'font-size': 18,
+                    'font-size': 'data(fontSize)',
-                    'width': 40,
+                    'width': 'mapData(neuronSize, 3, 10, 60, 110)',
-                    'height': 40,
+                    'height': 'mapData(neuronSize, 3, 10, 60, 110)',
-                    'border-width': 2,
+                    'border-width': 4,
                     'border-color': '#fff',
+                    'border-opacity': 0.9,
                     'overlay-padding': 4,
-                    'z-index': 10
+                    'z-index': 10,
+                    'shape': 'ellipse',
+                    'background-opacity': 0.95,
+                    'shadow-blur': 20,
+                    'shadow-color': 'data(color)',
+                    'shadow-opacity': 0.7,
+                    'shadow-offset-x': 0,
+                    'shadow-offset-y': 0,
+                    'text-wrap': 'wrap',
+                    'text-max-width': 90
                 }
             },
             {
-                selector: 'node[!color]',
+                selector: 'node[isCenter]','style': {
-                style: {
+                    'background-color': '#f5f5f5',
-                    'background-color': '#60a5fa'
+                    'color': '#222',
+                    'font-size': 22,
+                    'border-width': 0,
+                    'width': 120,
+                    'height': 120
                 }
             },
             {
                 selector: 'node:selected',
                 style: {
                     'border-color': '#f59e42',
-                    'border-width': 4
+                    'border-width': 6,
+                    'shadow-blur': 30,
+                    'shadow-opacity': 0.9
                 }
             },
             {
                 selector: 'edge',
                 style: {
-                    'width': 3,
+                    'width': 'mapData(strength, 0.2, 1, 3, 7)',
-                    'line-color': '#a78bfa',
+                    'line-color': '#bdbdbd',
-                    'target-arrow-color': '#a78bfa',
+                    'line-opacity': 0.7,
-                    'target-arrow-shape': 'triangle',
                     'curve-style': 'bezier',
-                    'label': 'data(label)',
+                    'target-arrow-shape': 'none',
-                    'font-size': 12,
+                    'control-point-distances': [40, -40],
-                    'color': '#fff',
+                    'control-point-weights': [0.5, 0.5],
-                    'text-background-color': '#222222',
+                    'edge-distances': 'intersection',
-                    'text-background-opacity': 0.7,
-                    'text-background-padding': '2px',
-                    'opacity': 0.8,
                     'line-style': 'solid'
                 }
-            },
-            {
-                selector: 'edge:selected',
-                style: {
-                    'width': 5,
-                    'line-color': '#f59e42',
-                    'target-arrow-color': '#f59e42',
-                    'opacity': 1
-                }
             }
         ],
         layout: {
-            name: 'cose',
+            name: 'concentric',
-            animate: true
+            fit: true,
+            padding: 60,
+            animate: true,
+            concentric: function(node) {
+                return node.data('isCenter') ? 2 : 1;
+            },
+            levelWidth: function() { return 1; }
         }
     });
 
     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();
 
@@ -264,25 +363,114 @@ document.addEventListener('DOMContentLoaded', function() {
     document.dispatchEvent(new Event('mindmap-loaded'));
     console.log('mindmap-loaded Event ausgelöst');
 
-    // Event-Listener für Knoten-Klicks hinzufügen
+    // Event-Listener für Knoten-Klicks
     cy.on('tap', 'node', async function(evt) {
         const node = evt.target;
+        console.log('Node clicked:', node.id(), 'hasChildren:', node.data('hasChildren'), 'expanded:', node.data('expanded'));
+        
         if (node.data('hasChildren') && !node.data('expanded')) {
             await loadSubthemes(node);
         }
     });
+
+    // Nach dem Rendern: Icons als HTML-Overlay einfügen
+    setTimeout(() => {
+        cy.nodes().forEach(node => {
+            const icon = node.data('icon');
+            if (icon) {
+                const dom = cy.getElementById(node.id()).popperRef();
+                const iconDiv = document.createElement('div');
+                iconDiv.className = 'cy-node-icon';
+                iconDiv.innerHTML = `<i class="${icon}" style="font-size:2.2em;"></i>`;
+                document.body.appendChild(iconDiv);
+                // Positionierung mit Popper.js oder absolut über node.position()
+            }
+        });
+    }, 500);
 });
 
-// Kategorie-Farben definieren
+// Funktion zum Initialisieren des neuronalen Designs
-const categoryColors = {
+function initializeNeuralDesign(cy) {
-  'Philosophie': '#60a5fa',
+    // Füge neuronale Eigenschaften zu allen Knoten hinzu
-  'Wissenschaft': '#8b5cf6',
+    cy.nodes().forEach(node => {
-  'Technologie': '#10b981',
+        const data = node.data();
-  'Künste': '#f59e0b',
+        node.data({
-  'Psychologie': '#ef4444'
+            ...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'
+        });
+    });
 
-// Mindmap aktualisieren
+    // 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;
   
@@ -298,7 +486,14 @@ function updateMindmap() {
         label: node.label,
         category: node.category,
         description: node.description,
-        color: categoryColors[node.category] || '#60a5fa'
+                hasChildren: node.hasChildren,
+                expanded: node.expanded,
+                neuronSize: node.neuronSize,
+                neuronActivity: node.neuronActivity,
+                color: node.color,
+                icon: node.icon,
+                fontColor: node.fontColor,
+                fontSize: node.fontSize
       }
     });
   });
@@ -310,82 +505,29 @@ function updateMindmap() {
       data: {
         source: edge.source,
         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
   cy.layout({
     name: 'cose',
     animate: true,
-    animationDuration: 1800,
+        animationDuration: 1000,
     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();
 }
 
@@ -664,53 +806,199 @@ function createFlashContainer() {
 // Funktion zum Laden der Subthemen
 async function loadSubthemes(node) {
     try {
-        // Simuliere Datenbankabfrage (später durch echte API ersetzen)
+        console.log('Loading subthemes for node:', node.id());
+        
+        // Simuliere Datenbankabfrage
         const subthemes = subthemesDatabase[node.id()];
         
-        if (!subthemes) return;
+        if (!subthemes) {
+            console.log('No subthemes found for node:', node.id());
+            return;
+        }
 
         // Animation starten
         showFlash('Lade Subthemen...', 'info');
 
-        // Neue Knoten hinzufügen
+        // Neue Seite erstellen
-        subthemes.forEach(subtheme => {
+        const mindmapContainer = document.querySelector('.mindmap-container');
-            cy.add({
+        const newPage = document.createElement('div');
-                group: 'nodes',
+        newPage.className = 'mindmap-page';
-                data: {
+        newPage.style.display = 'none';
-                    ...subtheme,
-                    expanded: false
-                }
-            });
         
-            // Kante zum Elternknoten hinzufügen
+        // Kopfzeile erstellen
-            cy.add({
+        const header = document.createElement('div');
-                group: 'edges',
+        header.className = 'mindmap-header';
-                data: {
+        header.innerHTML = `
-                    id: `${node.id()}_${subtheme.id}`,
+            <button class="back-button" onclick="goBack()">
-                    source: node.id(),
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    target: subtheme.id
+                    <path d="M19 12H5M12 19l-7-7 7-7"/>
-                }
+                </svg>
-            });
+            </button>
-        });
+            <h2 class="mindmap-title">${node.data('label')}</h2>
+        `;
         
-        // Node als expandiert markieren
+        // Container für die neue Mindmap
-        node.data('expanded', true);
+        const newContainer = document.createElement('div');
+        newContainer.id = `cy-${node.id()}`;
+        newContainer.className = 'mindmap-view';
         
-        // Layout neu berechnen mit Animation
+        // Elemente zur Seite hinzufügen
-        cy.layout({
+        newPage.appendChild(header);
+        newPage.appendChild(newContainer);
+        mindmapContainer.appendChild(newPage);
+        
+        // Neue Cytoscape-Instanz erstellen
+        const newCy = cytoscape({
+            container: newContainer,
+            elements: [],
+            style: cy.style(),
+            layout: {
                 name: 'cose',
                 animate: true,
                 animationDuration: 500,
                 refresh: 20,
                 fit: true,
-            padding: 30
+                padding: 30,
-        }).run();
+                nodeRepulsion: 4500,
+                idealEdgeLength: 50,
+                edgeElasticity: 0.45
+            }
+        });
+        
+        // Neue Knoten hinzufügen
+        subthemes.forEach(subtheme => {
+            newCy.add({
+                group: 'nodes',
+                data: {
+                    id: subtheme.id,
+                    label: subtheme.label,
+                    category: subtheme.category,
+                    description: subtheme.description,
+                    hasChildren: subtheme.hasChildren,
+                    expanded: false,
+                    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;
+            if (clickedNode.data('hasChildren') && !clickedNode.data('expanded')) {
+                await loadSubthemes(clickedNode);
+            }
+        });
+        
+        // Alte Seite ausblenden und neue anzeigen
+        cy.container().style.display = 'none';
+        newPage.style.display = 'block';
+        
+        // Layout ausführen
+        newCy.layout().run();
         
         // Erfolgsmeldung anzeigen
         showFlash('Subthemen erfolgreich geladen', 'success');
         
+        // Icons für Subthemen wie oben einfügen
+        setTimeout(() => {
+            newCy.nodes().forEach(node => {
+                const icon = node.data('icon');
+                if (icon) {
+                    const dom = newCy.getElementById(node.id()).popperRef();
+                    const iconDiv = document.createElement('div');
+                    iconDiv.className = 'cy-node-icon';
+                    iconDiv.innerHTML = `<i class="${icon}" style="font-size:2em;"></i>`;
+                    document.body.appendChild(iconDiv);
+                }
+            });
+        }, 500);
+        
     } catch (error) {
         console.error('Fehler beim Laden der Subthemen:', error);
         showFlash('Fehler beim Laden der Subthemen', 'error');
     }
 }
+
+// Funktion zum Zurücknavigieren
+function goBack() {
+    const currentPage = document.querySelector('.mindmap-page:not([style*="display: none"])');
+    if (currentPage) {
+        currentPage.style.display = 'none';
+        cy.container().style.display = 'block';
+    }
+}
+
+// CSS-Styles für die neue Seite
+const style = document.createElement('style');
+style.textContent = `
+    .mindmap-page {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: var(--bg-color, #1a1a1a);
+        z-index: 1000;
+    }
+    
+    .mindmap-header {
+        display: flex;
+        align-items: center;
+        padding: 1rem;
+        background: rgba(0, 0, 0, 0.2);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    
+    .back-button {
+        background: none;
+        border: none;
+        color: #fff;
+        cursor: pointer;
+        padding: 0.5rem;
+        margin-right: 1rem;
+        border-radius: 50%;
+        transition: background-color 0.3s;
+    }
+    
+    .back-button:hover {
+        background: rgba(255, 255, 255, 0.1);
+    }
+    
+    .mindmap-title {
+        color: #fff;
+        font-size: 1.5rem;
+        font-weight: 600;
+        margin: 0;
+    }
+    
+    .mindmap-view {
+        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);
+    }
+
+    .cy-node-icon {
+        position: absolute;
+        pointer-events: none;
+        z-index: 1001;
+        color: #fff;
+        text-shadow: 0 2px 8px rgba(0,0,0,0.25);
+    }
+`;
+document.head.appendChild(style);