✨ feat: enhance mindmap functionality and update UI components

static/js/update_mindmap.js

@@ -182,6 +182,322 @@ async function loadMindmapData(nodeId = null) {
     }
 }
 
+// Funktion zum Initialisieren der Mindmap
+async function initializeMindmap() {
+    try {
+        const data = await loadMindmapData();
+        if (!data || !data.nodes || !data.edges) {
+            throw new Error('Ungültiges Datenformat: Mindmap-Daten fehlen oder sind unvollständig');
+        }
+
+        const elements = [
+            // Knoten
+            ...data.nodes.map(node => ({
+                data: {
+                    id: node.id,
+                    label: node.name,
+                    category: node.category,
+                    description: node.description,
+                    hasChildren: node.has_children,
+                    expanded: false,
+                    color: node.color_code,
+                    fontColor: '#ffffff',
+                    fontSize: node.is_center ? 20 : 16
+                }
+            })),
+            // Kanten
+            ...data.edges.map(edge => ({
+                data: {
+                    source: edge.source,
+                    target: edge.target,
+                    strength: edge.strength || 0.5
+                }
+            }))
+        ];
+
+        // Bestehende Cytoscape-Instanz entfernen, falls vorhanden
+        if (window.cy && typeof window.cy.destroy === 'function') {
+            window.cy.destroy();
+        }
+
+        const cyContainer = document.getElementById('cy');
+        if (!cyContainer) {
+            throw new Error('Mindmap-Container #cy nicht gefunden!');
+        }
+
+        window.cy = cytoscape({
+            container: cyContainer,
+            elements: elements,
+            style: [
+                {
+                    selector: 'node',
+                    style: mindmapStyles.node.base
+                },
+                {
+                    selector: 'node[isCenter]',
+                    style: mindmapStyles.node.center
+                },
+                {
+                    selector: 'node:selected',
+                    style: mindmapStyles.node.selected
+                },
+                {
+                    selector: 'edge',
+                    style: mindmapStyles.edge.base
+                }
+            ],
+            layout: mindmapStyles.layout.base,
+            // Mausrad-Zooming deaktivieren
+            wheelSensitivity: 0,
+            minZoom: 0.2,
+            maxZoom: 2.5
+        });
+
+        // Füge neuronale Eigenschaften zu allen Knoten hinzu
+        cy.nodes().forEach(node => {
+            const data = node.data();
+            // Verwende mindmapConfig für Kategorie-Farben oder einen Standardwert
+            const categoryColor = data.category && mindmapConfig.categories[data.category] 
+                ? mindmapConfig.categories[data.category].color 
+                : '#60a5fa';
+            
+            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: data.color || categoryColor
+            });
+        });
+
+        // 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
+            });
+        });
+
+        // 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);
+            }
+        });
+
+        // Layout ausführen
+        cy.layout(mindmapStyles.layout.base).run();
+        
+        // Starte neuronale Aktivitätssimulation
+        startNeuralActivitySimulation(cy);
+        
+        // Mindmap mit echten Daten befüllen (Styles, Farben etc.)
+        updateMindmap();
+        
+        // Setze anfänglichen Zoom auf eine kleinere Stufe, damit mehr sichtbar ist
+        setTimeout(() => {
+            cy.zoom({
+                level: 0.7,
+                renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 }
+            });
+            cy.center();
+        }, 300);
+        
+        return true;
+    } catch (error) {
+        console.error('Fehler bei der Mindmap-Initialisierung:', error);
+/**
+ * Update Mindmap
+ * Dieses Skript fügt Knoten zur Mindmap hinzu und stellt sicher,
+ * dass sie im neuronalen Netzwerk-Design angezeigt werden.
+ * Implementiert Lazy Loading & Progressive Disclosure
+ */
+
+// Neue zentrale Konfiguration
+const mindmapConfig = {
+    categories: {
+        'Philosophie': {
+            icon: 'fa-solid fa-lightbulb',
+            color: '#b71c1c',
+            description: 'Die Lehre vom Denken und der Erkenntnis'
+        },
+        'Wissenschaft': {
+            icon: 'fa-solid fa-atom',
+            color: '#f4b400',
+            description: 'Systematische Erforschung der Natur und Gesellschaft'
+        },
+        'Technologie': {
+            icon: 'fa-solid fa-microchip',
+            color: '#0d47a1',
+            description: 'Anwendung wissenschaftlicher Erkenntnisse'
+        },
+        'Künste': {
+            icon: 'fa-solid fa-palette',
+            color: '#c2185b',
+            description: 'Kreativer Ausdruck und künstlerische Gestaltung'
+        }
+    },
+    defaultNodeStyle: {
+        fontSize: 18,
+        fontColor: '#fff',
+        neuronSize: 8,
+        neuronActivity: 0.8
+    },
+    centerNodeStyle: {
+        fontSize: 22,
+        fontColor: '#222',
+        neuronSize: 12,
+        neuronActivity: 1.0,
+        color: '#f5f5f5',
+        icon: 'fa-solid fa-circle'
+    }
+};
+
+// Zentrale Styling-Konfiguration
+const mindmapStyles = {
+    node: {
+        base: {
+            'background-color': 'data(color)',
+            'label': 'data(label)',
+            'color': '#ffffff',
+            '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': 40,
+            'height': 40,
+            'border-width': 2,
+            'border-color': '#ffffff',
+            'border-opacity': 0.8,
+            'shape': 'ellipse',
+            'background-opacity': 0.85
+        },
+        center: {
+            'background-color': '#f5f5f5',
+            'color': '#222',
+            'font-size': 20,
+            'border-width': 3,
+            'width': 100,
+            'height': 100
+        },
+        selected: {
+            'border-color': '#f59e42',
+            'border-width': 3,
+            'background-opacity': 1
+        }
+    },
+    edge: {
+        base: {
+            'width': function(ele) {
+                return ele.data('strength') ? ele.data('strength') * 2 : 1;
+            },
+            'line-color': function(ele) {
+                const sourceColor = ele.source().data('color');
+                return sourceColor || '#8a8aaa';
+            },
+            'line-opacity': function(ele) {
+                return ele.data('strength') ? ele.data('strength') * 0.6 : 0.4;
+            },
+            'curve-style': 'bezier',
+            'target-arrow-shape': 'none',
+            'control-point-distances': [30, -30],
+            'control-point-weights': [0.5, 0.5]
+        }
+    },
+    layout: {
+        base: {
+            name: 'cose',
+            animate: true,
+            animationDuration: 500,
+            refresh: 20,
+            fit: true,
+            padding: 30,
+            nodeRepulsion: 4500,
+            idealEdgeLength: 50,
+            edgeElasticity: 0.45,
+            randomize: true,
+            componentSpacing: 100,
+            nodeOverlap: 20,
+            gravity: 0.25,
+            initialTemp: 1000,
+            coolingFactor: 0.95,
+            minTemp: 1
+        }
+    }
+};
+
+// Globale Variable für die Mindmap-Daten
+let mindmapData = null;
+
+// Funktion zum Laden der Mindmap-Daten aus der Datenbank
+async function loadMindmapData(nodeId = null) {
+    try {
+        const apiUrl = nodeId ? `/api/mindmap/${nodeId}` : '/api/mindmap/root';
+        console.log('Lade Mindmap-Daten von:', apiUrl);
+        
+        const response = await fetch(apiUrl);
+        console.log('API-Antwort Status:', response.status);
+        
+        if (!response.ok) {
+            let errorData;
+            try {
+                errorData = await response.json();
+                console.log('API-Fehler Details:', errorData);
+            } catch (e) {
+                console.error('Fehler beim Parsen der Fehlerantwort:', e);
+                errorData = {
+                    error: `HTTP-Fehler ${response.status}: ${response.statusText}`
+                };
+            }
+            
+            // Fehlerobjekt für die Benachrichtigung erstellen
+            const errorMessage = errorData.error || 'Unbekannter Fehler';
+            
+            showUINotification(errorMessage, 'error');
+            throw new Error(errorMessage);
+        }
+        
+        const data = await response.json();
+        console.log('Geladene Mindmap-Daten:', data);
+        
+        if (!data.success) {
+            const errorMessage = data.error || 'Mindmap-Daten konnten nicht geladen werden';
+            showUINotification(errorMessage, 'error');
+            throw new Error(errorMessage);
+        }
+        
+        // Überprüfen, ob Nodes und Edges existieren
+        if (!data.nodes || !data.edges) {
+            const errorMessage = 'Ungültiges Datenformat: Nodes oder Edges fehlen';
+            showUINotification(errorMessage, 'error');
+            throw new Error(errorMessage);
+        }
+        
+        // Erfolgreiche Antwort
+        mindmapData = data; // Speichere die Daten in der globalen Variable
+        showUINotification('Mindmap-Daten erfolgreich geladen', 'success');
+        return data;
+    } catch (error) {
+        console.error('Fehler beim Laden der Mindmap-Daten:', error);
+        
+        // Stelle sicher, dass wir eine aussagekräftige Fehlermeldung haben
+        const errorMessage = error.message || 'Unbekannter Fehler beim Laden der Mindmap-Daten';
+        
+        showUINotification(errorMessage, 'error');
+        throw error;
+    }
+}
+
 // Funktion zum Initialisieren der Mindmap
 async function initializeMindmap() {
     try {

templates/mindmap.html

@@ -20,6 +20,46 @@
     background: transparent;
   }
 
+  /* Zoom-Toolbar */
+  .mindmap-toolbar {
+    position: absolute;
+    top: 80px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 8px;
+    padding: 8px;
+    background: rgba(30, 41, 59, 0.8);
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    z-index: 10;
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  .mindmap-toolbar button {
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  
+  .mindmap-toolbar button:hover {
+    background: rgba(139, 92, 246, 0.5);
+    transform: translateY(-2px);
+  }
+  
+  .mindmap-toolbar button i {
+    font-size: 16px;
+  }
+
   /* Header-Bereich */
   .mindmap-header {
     position: absolute;
@@ -369,115 +409,35 @@
 
 {% block content %}
 <div class="mindmap-container">
-  <!-- Header -->
-  <div class="mindmap-header">
-    <h1 class="mindmap-title">Interaktive Wissenslandkarte</h1>
-    
-    <!-- Aktionsmenü -->
-    <div class="mindmap-actions">
-      <button id="toggleEditMode" class="action-button primary">
-        <i class="fas fa-edit"></i>
-        <span>Bearbeiten</span>
-      </button>
-      <button id="saveChanges" class="action-button" style="display: none;">
-        <i class="fas fa-save"></i>
-        <span>Speichern</span>
-      </button>
-      <button id="cancelEdit" class="action-button danger" style="display: none;">
-        <i class="fas fa-times"></i>
-        <span>Abbrechen</span>
-      </button>
-    </div>
-  </div>
-
-  <!-- Ladeanzeige -->
-  <div id="loader" class="loader"></div>
-  
-  <!-- Status-Meldung -->
-  <div id="statusMessage" class="status-message" style="display: none;">Lade Mindmap...</div>
-  
-  <!-- Bearbeitungsmodus-Hinweis -->
-  <div id="editModeIndicator" class="edit-mode-indicator">
-    <i class="fas fa-pencil-alt"></i>
-    <span>Bearbeitungsmodus</span>
-  </div>
-
-  <!-- Hauptvisualisierung -->
   <div id="cy"></div>
-
-  <!-- Kontrollpanel -->
-  <div class="control-panel">
-    <button id="zoomIn" class="control-button">
-      <i class="fas fa-search-plus"></i>
-      <span>Vergrößern</span>
+  
+  <!-- Zoom-Toolbar für Hauptmindmap -->
+  <div class="mindmap-toolbar">
+    <button id="zoomIn" title="Vergrößern">
+      <i class="fas fa-plus"></i>
     </button>
-    <button id="zoomOut" class="control-button">
-      <i class="fas fa-search-minus"></i>
-      <span>Verkleinern</span>
+    <button id="zoomOut" title="Verkleinern">
+      <i class="fas fa-minus"></i>
     </button>
-    <button id="resetView" class="control-button">
-      <i class="fas fa-sync"></i>
-      <span>Zurücksetzen</span>
-    </button>
-    <button id="toggleLegend" class="control-button">
-      <i class="fas fa-layer-group"></i>
-      <span>Legende</span>
+    <button id="resetView" title="Ansicht zurücksetzen">
+      <i class="fas fa-expand"></i>
     </button>
   </div>
-
-  <!-- CRUD Buttons (anfänglich ausgeblendet) -->
-  <div id="crudPanel" class="crud-panel" style="display: none;">
-    <button id="createNode" class="crud-button create">
-      <i class="fas fa-plus-circle"></i>
-      <span>Knoten erstellen</span>
-    </button>
-    <button id="createEdge" class="crud-button create">
-      <i class="fas fa-link"></i>
-      <span>Verbindung</span>
-    </button>
-    <button id="editNode" class="crud-button edit" disabled>
-      <i class="fas fa-edit"></i>
-      <span>Bearbeiten</span>
-    </button>
-    <button id="deleteElement" class="crud-button delete" disabled>
-      <i class="fas fa-trash-alt"></i>
-      <span>Löschen</span>
-    </button>
-    <button id="saveMindmap" class="crud-button save">
-      <i class="fas fa-save"></i>
-      <span>Speichern</span>
-    </button>
-  </div>
-
-  <!-- Info-Panel -->
-  <div id="infoPanel" class="info-panel">
-    <h3 class="info-title">Knotendetails</h3>
-    <div class="info-content"></div>
-  </div>
-
-  <!-- Kategorie-Legende -->
-  <div id="categoryLegend" class="category-legend">
-    <div class="category-item">
-      <div class="category-color" style="background-color: #9F7AEA;"></div>
-      <span>Philosophie</span>
-    </div>
-    <div class="category-item">
-      <div class="category-color" style="background-color: #60A5FA;"></div>
-      <span>Wissenschaft</span>
-    </div>
-    <div class="category-item">
-      <div class="category-color" style="background-color: #10B981;"></div>
-      <span>Technologie</span>
-    </div>
-    <div class="category-item">
-      <div class="category-color" style="background-color: #F59E0B;"></div>
-      <span>Künste</span>
-    </div>
-    <div class="category-item">
-      <div class="category-color" style="background-color: #EF4444;"></div>
-      <span>Psychologie</span>
+  
+  <div class="mindmap-header">
+    <h1 class="mindmap-title">Wissenslandschaft</h1>
+    <div class="mindmap-actions">
+      <button class="action-button" id="toggleCategories">
+        <i class="fas fa-tags"></i> Kategorien
+      </button>
+      <button class="action-button primary" id="startEdit">
+        <i class="fas fa-edit"></i> Bearbeiten
+      </button>
     </div>
   </div>
+
+  <div id="infoPanel" class="info-panel"></div>
+  <div id="categoryLegend" class="category-legend"></div>
 </div>
 {% endblock %}
 
@@ -704,11 +664,6 @@ document.addEventListener('DOMContentLoaded', function() {
     if (window.cy) window.cy.fit();
   });
   
-  document.getElementById('toggleLegend').addEventListener('click', function() {
-    const legend = document.getElementById('categoryLegend');
-    legend.style.display = legend.style.display === 'none' ? 'flex' : 'none';
-  });
-  
   // Funktionen für Knoteninfo-Panel
   function showNodeInfo(node) {
     if (!node || !node.isNode()) return;