✨ feat: implementiere Mindmap-Funktionalität mit dynamischer Datenladung und verbesserten Benutzeroberflächen-Elementen in mindmap.html und mindmap-init.js

templates/mindmap.html

@@ -110,6 +110,95 @@
     background-color: rgba(0, 0, 0, 0.05);
   }
   
+  /* Info-Panel */
+  .mindmap-info-panel {
+    position: absolute;
+    right: 1rem;
+    top: 5rem;
+    width: 280px;
+    background-color: rgba(15, 23, 42, 0.85);
+    border-radius: 8px;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    padding: 1rem;
+    color: #f1f5f9;
+    opacity: 0;
+    transform: translateX(20px);
+    transition: all 0.3s ease;
+    pointer-events: none;
+    z-index: 10;
+    backdrop-filter: blur(4px);
+  }
+  
+  .mindmap-info-panel.visible {
+    opacity: 1;
+    transform: translateX(0);
+    pointer-events: auto;
+  }
+  
+  .info-panel-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  .info-panel-description {
+    font-size: 0.875rem;
+    margin-bottom: 1rem;
+    line-height: 1.5;
+  }
+  
+  .node-navigation-title {
+    font-size: 0.9rem;
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+  }
+  
+  .node-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  
+  .node-link {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+    color: white;
+  }
+  
+  .node-link:hover {
+    transform: translateY(-2px);
+  }
+  
+  /* Mindmap-Toolbar-Buttons */
+  .mindmap-action-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.35rem 0.7rem;
+    font-size: 0.8rem;
+    border-radius: 0.25rem;
+    background-color: rgba(124, 58, 237, 0.1);
+    color: #8b5cf6;
+    border: 1px solid rgba(124, 58, 237, 0.2);
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  
+  .dark .mindmap-action-btn {
+    background-color: rgba(124, 58, 237, 0.15);
+    border-color: rgba(124, 58, 237, 0.3);
+  }
+  
+  .mindmap-action-btn:hover {
+    background-color: rgba(124, 58, 237, 0.2);
+  }
+  
   /* Zusätzliches Layout */
   .mindmap-section {
     display: grid;
@@ -252,14 +341,17 @@
 {% endblock %}
 
 {% block extra_js %}
+<!-- Cytoscape.js laden -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.24.0/cytoscape.min.js" integrity="sha512-Ck7jF/eLOvDZ9TpQtO5N0I45/yGNpFKQnHMKVXPQDmQKo4HnWWfGDV0JIeG+kqoGA0TOYCpPNnGQ1gusYv4PA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+<!-- Mindmap-Initialisierer laden -->
+<script src="/static/js/mindmap-init.js"></script>
+
 <script>
   // Sobald die Seite und die Scripte geladen sind, initialisiere die Mindmap
   document.addEventListener('DOMContentLoaded', function() {
-    if (window.MindMap && window.MindMap.pageInitializers && window.MindMap.pageInitializers.mindmap) {
-      window.MindMap.pageInitializers.mindmap();
-    } else {
-      console.error('Mindmap-Initialisierung konnte nicht gefunden werden!');
-    }
+    // Die Initialisierung wird jetzt direkt in mindmap-init.js ausgeführt
+    console.log('Mindmap-Seite geladen');
   });
 </script>
 {% endblock %}