✨ feat: enhance mindmap update functionality in update_mindmap.js

2025-05-16 20:04:36 +01:00
parent 8e3c81fd06
commit 8c49e7396e
1 changed files with 153 additions and 1 deletions
--- a/static/js/update_mindmap.js
+++ b/static/js/update_mindmap.js
@@ -1755,4 +1755,156 @@ editingStyles.textContent = `
        opacity: 0.8;
    }
 `;
-document.head.appendChild(editingStyles); 
+document.head.appendChild(editingStyles);
+
+// Funktion zum Laden der Subthemen
+async function loadSubthemes(node) {
+    try {
+        const mindmapData = await loadMindmapData(node.id());
+        if (!mindmapData) return;
+
+        showUINotification('Lade Subthemen...', 'info');
+
+        const mindmapContainer = document.querySelector('.mindmap-container');
+        const newPage = document.createElement('div');
+        newPage.className = 'mindmap-page';
+        newPage.style.display = 'none';
+        
+        const header = document.createElement('div');
+        header.className = 'mindmap-header';
+        header.innerHTML = `
+            <button class="back-button" onclick="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">
+                    <path d="M19 12H5M12 19l-7-7 7-7"/>
+                </svg>
+            </button>
+            <h2 class="mindmap-title">${node.data('label')}</h2>
+        `;
+        
+        const newContainer = document.createElement('div');
+        newContainer.id = `cy-${node.id()}`;
+        newContainer.className = 'mindmap-view';
+        
+        newPage.appendChild(header);
+        newPage.appendChild(newContainer);
+        mindmapContainer.appendChild(newPage);
+        
+        // Speichere die Cytoscape-Instanz für eventuelle Referenzen
+        if (!window.subthemeCyInstances) {
+            window.subthemeCyInstances = {};
+        }
+        
+        const newCy = cytoscape({
+            container: newContainer,
+            elements: [
+                ...mindmapData.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: 16
+                    }
+                })),
+                ...mindmapData.edges.map(edge => ({
+                    data: {
+                        source: edge.source,
+                        target: edge.target,
+                        strength: edge.strength || 0.5
+                    }
+                }))
+            ],
+            style: cy.style(),
+            layout: mindmapStyles.layout.base
+        });
+        
+        // Speichere die Cytoscape-Instanz
+        window.subthemeCyInstances[node.id()] = 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';
+        
+        // Wende neuronales Design auf die neue Mindmap an
+        applyNeuralNetworkStyle(newCy);
+        
+        showUINotification('Subthemen erfolgreich geladen', 'success');
+        
+    } catch (error) {
+        console.error('Fehler beim Laden der Subthemen:', error);
+        showUINotification('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 Unterkategorien-Seite
+(function() {
+    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);
+        }
+    `;
+    document.head.appendChild(style);
+})();