✨ feat: Verbesserung der Mindmap-Funktionalität durch Einführung von Unterseiten und Anpassung des Designs in update_mindmap.js; Protokollaktualisierungen und Cache-Optimierungen vorgenommen.

logs/app.log

@@ -527,3 +527,30 @@ werkzeug.exceptions.NotFound: 404 Not Found: The requested URL was not found on
 2025-05-16 20:14:28,029 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
 2025-05-16 20:14:30,609 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
 2025-05-16 20:14:30,609 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:15:06,513 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:15:06,751 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:15:06,849 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:15:09,681 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:15:09,681 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:15:10,012 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:15:10,012 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:15:10,051 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:15:10,051 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:19:27,010 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:19:28,824 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:19:28,824 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:19:34,972 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:19:36,623 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:19:36,623 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:24:40,544 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:24:42,585 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:24:42,585 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:24:49,486 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:24:51,109 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:24:51,109 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:28:41,079 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:28:43,040 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:28:43,040 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:28:49,108 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:28:50,916 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]
+2025-05-16 20:28:50,916 INFO: Anwendung gestartet [in C:\Users\firem\Desktop\111\Systades\website\app.py:77]

static/js/update_mindmap.js

@@ -1761,79 +1761,107 @@ document.head.appendChild(editingStyles);
 (function() {
     const style = document.createElement('style');
     style.textContent = `
-        .mindmap-page {
+        .mindmap-subpage {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: linear-gradient(135deg, #1a1f2e 0%, #0f172a 100%);
             z-index: 1000;
             display: flex;
             flex-direction: column;
+            background: var(--bg-primary, linear-gradient(135deg, #1a1f2e 0%, #0f172a 100%));
         }
         
-        .mindmap-page .mindmap-header {
+        .mindmap-subpage .subpage-header {
-            position: relative;
             display: flex;
             align-items: center;
-            padding: 1rem;
+            gap: 12px;
-            background: rgba(15, 23, 42, 0.8);
+            padding: 16px;
+            background: rgba(15, 23, 42, 0.9);
             backdrop-filter: blur(10px);
             border-bottom: 1px solid rgba(255, 255, 255, 0.1);
             z-index: 10;
-            height: 64px;
         }
         
-        .mindmap-page .back-button {
+        .mindmap-subpage .back-button {
-            background: none;
+            background: rgba(255, 255, 255, 0.1);
             border: none;
-            color: #fff;
+            color: white;
-            cursor: pointer;
+            width: 40px;
-            padding: 0.5rem;
+            height: 40px;
-            margin-right: 1rem;
             border-radius: 50%;
-            transition: background-color 0.3s;
             display: flex;
             align-items: center;
             justify-content: center;
-            width: 36px;
+            cursor: pointer;
-            height: 36px;
+            transition: all 0.2s ease;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
         }
         
-        .mindmap-page .back-button:hover {
+        .mindmap-subpage .back-button:hover {
-            background: rgba(255, 255, 255, 0.1);
+            background: rgba(255, 255, 255, 0.2);
+            transform: translateY(-2px);
         }
         
-        .mindmap-page .back-button svg {
+        .mindmap-subpage .subpage-title {
-            width: 20px;
-            height: 20px;
-        }
-        
-        .mindmap-page .mindmap-title {
-            color: #fff;
             font-size: 1.5rem;
             font-weight: 600;
+            color: white;
             margin: 0;
             background: linear-gradient(90deg, #60a5fa, #8b5cf6);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
         
-        .mindmap-view {
+        .mindmap-subpage .subpage-cy-container {
+            flex: 1;
             width: 100%;
-            height: calc(100% - 64px);
+            height: calc(100% - 72px);
             position: relative;
         }
         
-        /* Fix für den Cytoscape Container */
+        .mindmap-subpage .mindmap-toolbar {
-        .mindmap-view > div {
-            width: 100%;
-            height: 100%;
-            background: transparent;
             position: absolute;
-            top: 0;
+            top: 20px;
-            left: 0;
+            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-subpage .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-subpage .mindmap-toolbar button:hover {
+            background: rgba(139, 92, 246, 0.5);
+            transform: translateY(-2px);
+        }
+        
+        .mindmap-subpage .mindmap-toolbar button i {
+            font-size: 16px;
+        }
+        
+        .dark .mindmap-subpage {
+            background: linear-gradient(135deg, #0f172a 0%, #0c1221 100%);
         }
     `;
     document.head.appendChild(style);
@@ -1856,93 +1884,293 @@ async function loadSubthemes(node) {
         }
 
         // Erstelle eine neue Seite für die Unterkategorien
-        const newPage = document.createElement('div');
+        const subpage = document.createElement('div');
-        newPage.className = 'mindmap-page';
+        subpage.className = 'mindmap-subpage';
-        newPage.style.display = 'none';
         
+        // Erstelle den Header mit Zurück-Button und Titel
         const header = document.createElement('div');
-        header.className = 'mindmap-header';
+        header.className = 'subpage-header';
         header.innerHTML = `
             <button class="back-button" onclick="window.goBack()">
-                <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">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <path d="M19 12H5M12 19l-7-7 7-7"/>
                 </svg>
             </button>
-            <h2 class="mindmap-title">${node.data('label')}</h2>
+            <h2 class="subpage-title">${node.data('label') || node.data('name')}</h2>
         `;
         
-        const newContainer = document.createElement('div');
+        // Erstelle den Container für die Cytoscape-Instanz
-        newContainer.id = `cy-${node.id()}`;
+        const cyContainer = document.createElement('div');
-        newContainer.className = 'mindmap-view';
+        cyContainer.className = 'subpage-cy-container';
+        cyContainer.id = `cy-${node.id()}`;
         
-        // Füge die Elemente zur DOM-Struktur hinzu
+        // Erstelle die Toolbar
-        newPage.appendChild(header);
+        const toolbar = document.createElement('div');
-        newPage.appendChild(newContainer);
+        toolbar.className = 'mindmap-toolbar';
-        mindmapContainer.appendChild(newPage);
+        toolbar.innerHTML = `
+            <button id="zoomIn-${node.id()}" title="Vergrößern">
+                <i class="fas fa-plus"></i>
+            </button>
+            <button id="zoomOut-${node.id()}" title="Verkleinern">
+                <i class="fas fa-minus"></i>
+            </button>
+            <button id="resetView-${node.id()}" title="Ansicht zurücksetzen">
+                <i class="fas fa-expand"></i>
+            </button>
+        `;
+        
+        // Füge alle Elemente zum DOM hinzu
+        cyContainer.appendChild(toolbar);
+        subpage.appendChild(header);
+        subpage.appendChild(cyContainer);
+        mindmapContainer.appendChild(subpage);
         
         // Warte, bis der DOM aktualisiert ist
-        await new Promise(resolve => setTimeout(resolve, 50));
+        await new Promise(resolve => setTimeout(resolve, 10));
+        
+        // Verstecke die Hauptseite und zeige die Unterseite an
+        cy.container().style.display = 'none';
         
         // Speichere die Cytoscape-Instanz für eventuelle Referenzen
         if (!window.subthemeCyInstances) {
             window.subthemeCyInstances = {};
         }
         
-        // Überprüfe, ob der Container jetzt im DOM existiert
+        // Erstelle ein Array mit den Knoten-Elementen
-        const containerElement = document.getElementById(`cy-${node.id()}`);
+        const elements = [];
-        if (!containerElement) {
-            console.error(`Container #cy-${node.id()} nicht gefunden`);
-            showUINotification(`Fehler: Container #cy-${node.id()} nicht gefunden`, 'error');
-            return;
-        }
         
-        // Erstelle die Cytoscape-Instanz
+        // Knoten mit angepassten Daten für neuronale Eigenschaften
-        const newCy = cytoscape({
+        mindmapData.nodes.forEach(node => {
-            container: containerElement,
+            const isCenter = node.is_center || false;
-            elements: [
+            elements.push({
-                ...mindmapData.nodes.map(node => ({
+                group: 'nodes',
-                    data: {
+                data: {
-                        id: node.id,
+                    id: node.id,
-                        label: node.name,
+                    label: node.name,
-                        category: node.category,
+                    category: node.category,
-                        description: node.description,
+                    description: node.description,
-                        hasChildren: node.has_children,
+                    hasChildren: node.has_children,
-                        expanded: false,
+                    expanded: false,
-                        color: node.color_code,
+                    color: node.color_code,
-                        fontColor: '#ffffff',
+                    fontColor: '#ffffff',
-                        fontSize: 16
+                    fontSize: isCenter ? 20 : 16,
-                    }
+                    isCenter: isCenter,
-                })),
+                    neuronSize: isCenter ? 12 : 8,
-                ...mindmapData.edges.map(edge => ({
+                    neuronActivity: isCenter ? 1.0 : 0.8,
-                    data: {
+                    refractionPeriod: Math.random() * 300 + 700,
-                        source: edge.source,
+                    threshold: Math.random() * 0.3 + 0.6,
-                        target: edge.target,
+                    lastFired: 0
-                        strength: edge.strength || 0.5
+                }
-                    }
+            });
-                }))
-            ],
-            style: cy.style(),
-            layout: mindmapStyles.layout.base
         });
         
-        // Speichere die Cytoscape-Instanz
+        // Kanten mit angepassten Daten für neuronale Eigenschaften
+        mindmapData.edges.forEach(edge => {
+            elements.push({
+                group: 'edges',
+                data: {
+                    source: edge.source,
+                    target: edge.target,
+                    strength: edge.strength || 0.5,
+                    conductionVelocity: Math.random() * 0.5 + 0.3,
+                    latency: Math.random() * 100 + 50
+                }
+            });
+        });
+        
+        // Erstelle die neue Cytoscape-Instanz
+        const newCy = cytoscape({
+            container: document.getElementById(`cy-${node.id()}`),
+            elements: elements,
+            style: [
+                {
+                    selector: 'node',
+                    style: {
+                        'label': 'data(label)',
+                        'text-valign': 'center',
+                        'text-halign': 'center',
+                        'color': 'data(fontColor)',
+                        'text-outline-width': 2,
+                        'text-outline-color': 'rgba(0,0,0,0.8)',
+                        'text-outline-opacity': 0.9,
+                        'font-size': 'data(fontSize)',
+                        'font-weight': '500',
+                        'text-margin-y': 8,
+                        'width': function(ele) {
+                            if (ele.data('isCenter')) return 120;
+                            return 80;
+                        },
+                        'height': function(ele) {
+                            if (ele.data('isCenter')) return 120;
+                            return 80;
+                        },
+                        'background-color': 'data(color)',
+                        'background-opacity': 0.9,
+                        'border-width': 2,
+                        'border-color': '#ffffff',
+                        'border-opacity': 0.8,
+                        'shape': 'ellipse',
+                        'shadow-blur': 15,
+                        'shadow-color': 'data(color)',
+                        'shadow-opacity': 0.6,
+                        'shadow-offset-x': 0,
+                        'shadow-offset-y': 0,
+                        'transition-property': 'background-color, background-opacity, border-width, shadow-opacity',
+                        'transition-duration': '0.3s',
+                        'transition-timing-function': 'ease-in-out'
+                    }
+                },
+                {
+                    selector: 'edge',
+                    style: {
+                        'width': function(ele) {
+                            return ele.data('strength') ? ele.data('strength') * 3 : 1;
+                        },
+                        'curve-style': 'bezier',
+                        '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.8 : 0.4;
+                        },
+                        'line-style': function(ele) {
+                            const strength = ele.data('strength');
+                            if (!strength) return 'solid';
+                            if (strength <= 0.4) return 'dotted';
+                            if (strength <= 0.6) return 'dashed';
+                            return 'solid';
+                        },
+                        'target-arrow-shape': 'none',
+                        'source-endpoint': '0% 50%',
+                        'target-endpoint': '100% 50%',
+                        'transition-property': 'line-opacity, width',
+                        'transition-duration': '0.3s',
+                        'transition-timing-function': 'ease-in-out'
+                    }
+                }
+            ],
+            layout: {
+                name: 'cose',
+                animate: true,
+                animationDuration: 800,
+                refresh: 20,
+                fit: true,
+                padding: 50,
+                nodeRepulsion: 8000,
+                idealEdgeLength: 75,
+                edgeElasticity: 0.45,
+                randomize: false,
+                componentSpacing: 120,
+                nodeOverlap: 20,
+                gravity: 0.4,
+                initialTemp: 800,
+                coolingFactor: 0.95,
+                minTemp: 1
+            },
+            wheelSensitivity: 0.3
+        });
+        
+        // Speichere die Instanz
         window.subthemeCyInstances[node.id()] = newCy;
         
-        // Event-Listener für die neue Mindmap
+        // Zeige die Subpage an
+        subpage.style.display = 'flex';
+        
+        // Event-Listener für Knoten hinzufügen
         newCy.on('tap', 'node', async function(evt) {
             const clickedNode = evt.target;
+            
+            // Alle vorherigen Hervorhebungen zurücksetzen
+            newCy.nodes().forEach(n => {
+                n.removeStyle();
+                n.connectedEdges().removeStyle();
+            });
+            
+            // Aktiviere leuchtenden Effekt
+            clickedNode.style({
+                'background-opacity': 1,
+                'background-color': clickedNode.data('color'),
+                'shadow-color': clickedNode.data('color'),
+                'shadow-opacity': 1,
+                'shadow-blur': 15,
+                'shadow-offset-x': 0,
+                'shadow-offset-y': 0
+            });
+            
+            // Verbundene Kanten und Knoten hervorheben
+            const connectedEdges = clickedNode.connectedEdges();
+            const connectedNodes = clickedNode.neighborhood('node');
+            
+            connectedEdges.style({
+                'line-color': '#a78bfa',
+                'target-arrow-color': '#a78bfa',
+                'source-arrow-color': '#a78bfa',
+                'line-opacity': 0.8,
+                'width': 2
+            });
+            
+            connectedNodes.style({
+                'shadow-opacity': 0.7,
+                'shadow-blur': 10,
+                'shadow-color': '#a78bfa'
+            });
+            
+            // Wenn der Knoten Unterkategorien hat und nicht erweitert ist, lade die Unterkategorien
             if (clickedNode.data('hasChildren') && !clickedNode.data('expanded')) {
                 await loadSubthemes(clickedNode);
             }
         });
         
-        // Alte Seite ausblenden und neue anzeigen
+        // Klick auf Hintergrund - Auswahl zurücksetzen
-        cy.container().style.display = 'none';
+        newCy.on('tap', function(evt) {
-        newPage.style.display = 'block';
+            if (evt.target === newCy) {
+                newCy.nodes().forEach(n => {
+                    n.removeStyle();
+                    n.connectedEdges().removeStyle();
+                });
+            }
+        });
         
-        // Wende neuronales Design auf die neue Mindmap an
+        // Zoom-Controls für die Unterkategorien
-        applyNeuralNetworkStyle(newCy);
+        document.getElementById(`zoomIn-${node.id()}`)?.addEventListener('click', () => {
+            newCy.zoom({
+                level: newCy.zoom() * 1.2,
+                renderedPosition: { x: newCy.width() / 2, y: newCy.height() / 2 }
+            });
+        });
         
+        document.getElementById(`zoomOut-${node.id()}`)?.addEventListener('click', () => {
+            newCy.zoom({
+                level: newCy.zoom() / 1.2,
+                renderedPosition: { x: newCy.width() / 2, y: newCy.height() / 2 }
+            });
+        });
+        
+        document.getElementById(`resetView-${node.id()}`)?.addEventListener('click', () => {
+            newCy.fit();
+            newCy.nodes().forEach(n => {
+                n.removeStyle();
+                n.connectedEdges().removeStyle();
+            });
+        });
+        
+        // Hervorhebe den zentralen Knoten
+        newCy.nodes().forEach(node => {
+            if (node.data('isCenter')) {
+                node.style({
+                    'background-opacity': 1,
+                    'border-width': 3,
+                    'shadow-blur': 20,
+                    'shadow-opacity': 0.8
+                });
+            }
+        });
+        
+        // Wende neuronale Simulationen an
+        startNeuralActivitySimulation(newCy);
+        
+        // Erfolgsbenachrichtigung
         showUINotification('Subthemen erfolgreich geladen', 'success');
         
     } catch (error) {
@@ -1955,27 +2183,50 @@ async function loadSubthemes(node) {
 function goBack() {
     try {
         console.log('goBack Funktion aufgerufen');
-        const currentPage = document.querySelector('.mindmap-page:not([style*="display: none"])');
+        const subpage = document.querySelector('.mindmap-subpage');
-        if (currentPage) {
+        if (subpage) {
-            console.log('Aktuelle Seite gefunden:', currentPage);
+            console.log('Unterseite gefunden:', subpage);
-            currentPage.style.display = 'none';
             
-            // Stelle sicher, dass die Haupt-Cytoscape-Instanz existiert
+            // Entferne die Unterseite mit Animation
-            if (window.cy && window.cy.container()) {
+            subpage.style.opacity = '0';
-                console.log('Zeige Haupt-Cytoscape-Container an');
+            subpage.style.transform = 'translateY(20px)';
-                window.cy.container().style.display = 'block';
+            
+            setTimeout(() => {
+                if (subpage.parentNode) {
+                    subpage.parentNode.removeChild(subpage);
+                }
                 
-                // Aktualisiere das Layout
+                // Stelle sicher, dass die Haupt-Cytoscape-Instanz existiert
-                setTimeout(() => {
+                if (window.cy && window.cy.container()) {
-                    window.cy.resize();
+                    console.log('Zeige Haupt-Cytoscape-Container an');
-                    window.cy.fit();
+                    window.cy.container().style.display = 'block';
-                }, 100);
+                    
-            } else {
+                    // Aktualisiere das Layout
-                console.error('Haupt-Cytoscape-Instanz oder Container nicht gefunden');
+                    setTimeout(() => {
-                showUINotification('Fehler: Hauptmindmap konnte nicht angezeigt werden', 'error');
+                        window.cy.resize();
-            }
+                        window.cy.fit();
+                    }, 100);
+                } else {
+                    console.error('Haupt-Cytoscape-Instanz oder Container nicht gefunden');
+                    showUINotification('Fehler: Hauptmindmap konnte nicht angezeigt werden', 'error');
+                }
+            }, 200);
         } else {
             console.warn('Keine aktuelle Unterseite gefunden');
+            
+            // Fallback: Versuche die alte mindmap-page zu finden
+            const oldPage = document.querySelector('.mindmap-page');
+            if (oldPage) {
+                oldPage.style.display = 'none';
+                
+                if (window.cy && window.cy.container()) {
+                    window.cy.container().style.display = 'block';
+                    setTimeout(() => {
+                        window.cy.resize();
+                        window.cy.fit();
+                    }, 100);
+                }
+            }
         }
     } catch (error) {
         console.error('Fehler in goBack Funktion:', error);