marwinm/website
3
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mindmap): improve performance of mind map rendering logic

Browse Source
This commit is contained in:
Marwin
2025-05-09 19:28:00 +01:00
parent 653b3abe91
commit dd172d8596
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
static/js/mindmap.js
View File

@@ -3,6 +3,7 @@
* - Event-Listener und Interaktionslogik * - Event-Listener und Interaktionslogik
* - Fetch API für REST-Zugriffe * - Fetch API für REST-Zugriffe
* - Socket.IO für Echtzeit-Synchronisation * - Socket.IO für Echtzeit-Synchronisation
* - Lazy Loading & Progressive Disclosure
*/ */
(async () => { (async () => {
@@ -209,19 +210,16 @@ function handleContextMenuAction(action, node) {
/* 4. Daten laden und Rendering */ /* 4. Daten laden und Rendering */
const loadMindmap = async () => { const loadMindmap = async () => {
try { try {
// Nodes und Beziehungen parallel laden // Initial nur die oberste Ebene laden
const [nodes, relationships] = await Promise.all([ const rootNodes = await get('/api/mind_map_nodes?level=root');
get('/api/mind_map_nodes'),
get('/api/node_relationships')
]);
// Graph leeren (für Reload-Fälle) // Graph leeren (für Reload-Fälle)
cy.elements().remove(); cy.elements().remove();
// Überprüfen, ob nodes ein Array ist, wenn nicht, setze es auf ein leeres Array // Überprüfen, ob nodes ein Array ist, wenn nicht, setze es auf ein leeres Array
const nodesArray = Array.isArray(nodes) ? nodes : []; const nodesArray = Array.isArray(rootNodes) ? rootNodes : [];
// Knoten zum Graph hinzufügen // Root-Knoten zum Graph hinzufügen
cy.add( cy.add(
nodesArray.map(node => { nodesArray.map(node => {
// Kategorie-Informationen für Styling abrufen // Kategorie-Informationen für Styling abrufen
@@ -234,7 +232,9 @@ function handleContextMenuAction(action, node) {
description: node.description, description: node.description,
color: node.color_code || category.color_code || '#6b7280', color: node.color_code || category.color_code || '#6b7280',
icon: node.icon || category.icon, icon: node.icon || category.icon,
category_id: node.category_id category_id: node.category_id,
hasChildren: node.has_children || false, // Neue Eigenschaft
expanded: false // Neue Eigenschaft für den Expansionsstatus
}, },
position: node.x && node.y ? { x: node.x, y: node.y } : undefined position: node.x && node.y ? { x: node.x, y: node.y } : undefined
}; };