From 6a3b3a81c179a91efb184c1dd3d77e1eba51c7fc Mon Sep 17 00:00:00 2001 From: marwin Date: Sat, 10 May 2025 21:19:54 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20verbessere=20neuronale=20Ne?= =?UTF-8?q?tzwerkdarstellung=20und=20Mindmap-Layout=20durch=20Anpassungen?= =?UTF-8?q?=20an=20Farben,=20Gr=C3=B6=C3=9Fen=20und=20Animationen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/js/update_mindmap.js | 261 +++++++++++------------ static/neural-network-background-full.js | 10 +- 2 files changed, 126 insertions(+), 145 deletions(-) diff --git a/static/js/update_mindmap.js b/static/js/update_mindmap.js index b589e45..aabc533 100644 --- a/static/js/update_mindmap.js +++ b/static/js/update_mindmap.js @@ -129,7 +129,9 @@ const mindmapData = { color: '#f5f5f5', icon: 'fa-solid fa-circle', fontColor: '#222', - fontSize: 22 + fontSize: 22, + neuronSize: 12, + neuronActivity: 1.0 }, { id: 'philosophy', @@ -248,7 +250,7 @@ document.addEventListener('DOMContentLoaded', function() { console.log('Initialisiere Cytoscape...'); - // Initialisiere Cytoscape mit concentric/circle Layout und Icon-Overlay + // Initialisiere Cytoscape mit einem schlichten, modernen Design window.cy = cytoscape({ container: cyContainer, elements: elements, @@ -262,62 +264,66 @@ document.addEventListener('DOMContentLoaded', function() { 'text-valign': 'center', 'text-halign': 'center', 'font-size': 'data(fontSize)', - 'width': 'mapData(neuronSize, 3, 10, 60, 110)', - 'height': 'mapData(neuronSize, 3, 10, 60, 110)', - 'border-width': 4, - 'border-color': '#fff', - 'border-opacity': 0.9, - 'overlay-padding': 4, - 'z-index': 10, + 'width': function(ele) { + return ele.data('isCenter') ? 100 : 80; + }, + 'height': function(ele) { + return ele.data('isCenter') ? 100 : 80; + }, + 'border-width': 2, + 'border-color': '#ffffff', + 'border-opacity': 0.8, 'shape': 'ellipse', - 'background-opacity': 0.95, - 'shadow-blur': 20, - 'shadow-color': 'data(color)', - 'shadow-opacity': 0.7, - 'shadow-offset-x': 0, - 'shadow-offset-y': 0, + 'background-opacity': 0.9, 'text-wrap': 'wrap', - 'text-max-width': 90 + 'text-max-width': 80, + 'transition-property': 'background-color, border-width', + 'transition-duration': '0.2s' } }, { - selector: 'node[isCenter]','style': { + selector: 'node[isCenter]', + style: { 'background-color': '#f5f5f5', 'color': '#222', - 'font-size': 22, - 'border-width': 0, - 'width': 120, - 'height': 120 + 'font-size': 20, + 'border-width': 3, + 'width': 100, + 'height': 100 } }, { selector: 'node:selected', style: { 'border-color': '#f59e42', - 'border-width': 6, - 'shadow-blur': 30, - 'shadow-opacity': 0.9 + 'border-width': 3, + 'background-opacity': 1 } }, { selector: 'edge', style: { - 'width': 'mapData(strength, 0.2, 1, 3, 7)', - 'line-color': '#bdbdbd', - 'line-opacity': 0.7, + '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': [40, -40], - 'control-point-weights': [0.5, 0.5], - 'edge-distances': 'intersection', - 'line-style': 'solid' + 'control-point-distances': [30, -30], + 'control-point-weights': [0.5, 0.5] } } ], layout: { name: 'concentric', fit: true, - padding: 60, + padding: 50, animate: true, concentric: function(node) { return node.data('isCenter') ? 2 : 1; @@ -373,20 +379,11 @@ document.addEventListener('DOMContentLoaded', function() { } }); - // Nach dem Rendern: Icons als HTML-Overlay einfügen + // Entferne den Icon-Overlay-Code setTimeout(() => { - cy.nodes().forEach(node => { - const icon = node.data('icon'); - if (icon) { - const dom = cy.getElementById(node.id()).popperRef(); - const iconDiv = document.createElement('div'); - iconDiv.className = 'cy-node-icon'; - iconDiv.innerHTML = ``; - document.body.appendChild(iconDiv); - // Positionierung mit Popper.js oder absolut über node.position() - } - }); - }, 500); + // Entferne alle existierenden Icon-Overlays + document.querySelectorAll('.cy-node-icon').forEach(icon => icon.remove()); + }, 0); }); // Funktion zum Initialisieren des neuronalen Designs @@ -620,49 +617,53 @@ function enhanceMindmap() { * @param {Object} cy - Cytoscape-Instanz */ function applyNeuralNetworkStyle(cy) { - // Wende erweiterte Stile für Neuronen und Synapsen an cy.style() .selector('node') .style({ 'label': 'data(label)', 'text-valign': 'center', 'text-halign': 'center', - 'color': '#ffffff', + 'color': 'data(fontColor)', 'text-outline-width': 2, 'text-outline-color': 'rgba(0,0,0,0.8)', 'text-outline-opacity': 0.9, - 'font-size': 14, + 'font-size': 'data(fontSize)', 'font-weight': '500', 'text-margin-y': 8, - 'width': 'mapData(neuronSize, 3, 10, 40, 80)', - 'height': 'mapData(neuronSize, 3, 10, 40, 80)', + 'width': function(ele) { + if (ele.data('isCenter')) return 120; + return ele.data('neuronSize') ? ele.data('neuronSize') * 10 : 80; + }, + 'height': function(ele) { + if (ele.data('isCenter')) return 120; + return ele.data('neuronSize') ? ele.data('neuronSize') * 10 : 80; + }, 'background-color': 'data(color)', 'background-opacity': 0.9, 'border-width': 2, 'border-color': '#ffffff', 'border-opacity': 0.8, 'shape': 'ellipse', - 'shadow-blur': 'mapData(neuronActivity, 0.3, 1, 15, 30)', - 'shadow-color': 'data(color)', - 'shadow-opacity': 0.8, - 'shadow-offset-x': 0, - 'shadow-offset-y': 0, - 'transition-property': 'background-color, shadow-blur, shadow-opacity, background-opacity', + 'transition-property': 'background-color, background-opacity, border-width', 'transition-duration': '0.3s', 'transition-timing-function': 'ease-in-out' }) .selector('edge') .style({ - 'width': 'mapData(strength, 0.2, 0.8, 1, 3)', + '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'); - const targetColor = ele.target().data('color'); - return `linear-gradient(to right, ${sourceColor}, ${targetColor})`; + return sourceColor || '#8a8aaa'; + }, + 'line-opacity': function(ele) { + return ele.data('strength') ? ele.data('strength') * 0.8 : 0.4; }, - 'line-opacity': 'mapData(strength, 0.2, 0.8, 0.4, 0.8)', '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'; @@ -674,31 +675,14 @@ function applyNeuralNetworkStyle(cy) { 'transition-duration': '0.3s', 'transition-timing-function': 'ease-in-out' }) - .selector('node[isRoot]') - .style({ - 'font-size': 18, - 'font-weight': 'bold', - 'width': 100, - 'height': 100, - 'background-color': '#6366f1', - 'shadow-blur': 30, - 'shadow-color': '#6366f1', - 'shadow-opacity': 0.9, - 'text-margin-y': 10, - 'border-width': 3 - }) .update(); } -/** - * Simuliert neuronale Aktivität in der Mindmap - * @param {Object} cy - Cytoscape-Instanz - */ +// Vereinfachte neuronale Aktivitätssimulation function startNeuralActivitySimulation(cy) { if (window.neuralInterval) clearInterval(window.neuralInterval); const nodes = cy.nodes(); - const edges = cy.edges(); let currentTime = Date.now(); function simulateNeuralActivity() { @@ -710,7 +694,7 @@ function startNeuralActivitySimulation(cy) { const timeSinceLastFire = currentTime - lastFired; if (timeSinceLastFire > data.refractionPeriod) { - if (Math.random() < data.neuronActivity * 0.15) { + if (Math.random() < data.neuronActivity * 0.1) { fireNeuron(node, true, currentTime); } } @@ -721,30 +705,15 @@ function startNeuralActivitySimulation(cy) { const data = node.data(); data.lastFired = currentTime; - // Verbesserte visuelle Effekte - node.animate({ - style: { - 'background-opacity': 1, - 'shadow-blur': 35, - 'shadow-opacity': 1, - 'border-width': 3, - 'border-color': '#ffffff' - }, - duration: 200, - easing: 'ease-in-out-cubic' + node.style({ + 'background-opacity': 1, + 'border-width': 3 }); setTimeout(() => { - node.animate({ - style: { - 'background-opacity': 0.9, - 'shadow-blur': 20, - 'shadow-opacity': 0.8, - 'border-width': 2, - 'border-color': 'rgba(255,255,255,0.8)' - }, - duration: 300, - easing: 'ease-out-cubic' + node.style({ + 'background-opacity': 0.9, + 'border-width': 2 }); }, 200); @@ -754,31 +723,22 @@ function startNeuralActivitySimulation(cy) { } function propagateSignal(sourceNode, currentTime) { - const outgoingEdges = sourceNode.connectedEdges('out'); + const outgoingEdges = sourceNode.connectedEdges(); outgoingEdges.forEach(edge => { const targetNode = edge.target(); const edgeData = edge.data(); const latency = edgeData.latency; - // Verbesserte Kanten-Animation - edge.animate({ - style: { - 'line-opacity': 1, - 'width': edgeData.strength * 4 - }, - duration: 200, - easing: 'ease-in-out-cubic' + edge.style({ + 'line-opacity': 0.8, + 'width': edgeData.strength * 3 }); setTimeout(() => { - edge.animate({ - style: { - 'line-opacity': edgeData.strength * 0.8, - 'width': edgeData.strength * 2 - }, - duration: 300, - easing: 'ease-out-cubic' + edge.style({ + 'line-opacity': edgeData.strength * 0.6, + 'width': edgeData.strength * 2 }); }, 200); @@ -845,7 +805,6 @@ async function loadSubthemes(node) { try { console.log('Loading subthemes for node:', node.id()); - // Simuliere Datenbankabfrage const subthemes = subthemesDatabase[node.id()]; if (!subthemes) { @@ -853,16 +812,13 @@ async function loadSubthemes(node) { return; } - // Animation starten showFlash('Lade Subthemen...', 'info'); - // Neue Seite erstellen const mindmapContainer = document.querySelector('.mindmap-container'); const newPage = document.createElement('div'); newPage.className = 'mindmap-page'; newPage.style.display = 'none'; - // Kopfzeile erstellen const header = document.createElement('div'); header.className = 'mindmap-header'; header.innerHTML = ` @@ -874,17 +830,14 @@ async function loadSubthemes(node) {

${node.data('label')}

`; - // Container für die neue Mindmap const newContainer = document.createElement('div'); newContainer.id = `cy-${node.id()}`; newContainer.className = 'mindmap-view'; - // Elemente zur Seite hinzufügen newPage.appendChild(header); newPage.appendChild(newContainer); mindmapContainer.appendChild(newPage); - // Neue Cytoscape-Instanz erstellen const newCy = cytoscape({ container: newContainer, elements: [], @@ -898,7 +851,14 @@ async function loadSubthemes(node) { padding: 30, nodeRepulsion: 4500, idealEdgeLength: 50, - edgeElasticity: 0.45 + edgeElasticity: 0.45, + randomize: true, + componentSpacing: 100, + nodeOverlap: 20, + gravity: 0.25, + initialTemp: 1000, + coolingFactor: 0.95, + minTemp: 1 } }); @@ -914,11 +874,28 @@ async function loadSubthemes(node) { hasChildren: subtheme.hasChildren, expanded: false, neuronSize: 6, - neuronActivity: 0.7 + neuronActivity: 0.7, + color: categoryColors[subtheme.category] || '#60a5fa', + fontColor: '#ffffff', + fontSize: 14 } }); }); + // Kanten zwischen den Subthemen erstellen + for (let i = 0; i < subthemes.length; i++) { + for (let j = i + 1; j < subthemes.length; j++) { + newCy.add({ + group: 'edges', + data: { + source: subthemes[i].id, + target: subthemes[j].id, + strength: Math.random() * 0.5 + 0.3 + } + }); + } + } + // Neuronales Design für die neue Mindmap initialisieren initializeNeuralDesign(newCy); @@ -935,25 +912,27 @@ async function loadSubthemes(node) { newPage.style.display = 'block'; // Layout ausführen - newCy.layout().run(); + newCy.layout({ + 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 + }).run(); - // Erfolgsmeldung anzeigen showFlash('Subthemen erfolgreich geladen', 'success'); - // Icons für Subthemen wie oben einfügen - setTimeout(() => { - newCy.nodes().forEach(node => { - const icon = node.data('icon'); - if (icon) { - const dom = newCy.getElementById(node.id()).popperRef(); - const iconDiv = document.createElement('div'); - iconDiv.className = 'cy-node-icon'; - iconDiv.innerHTML = ``; - document.body.appendChild(iconDiv); - } - }); - }, 500); - } catch (error) { console.error('Fehler beim Laden der Subthemen:', error); showFlash('Fehler beim Laden der Subthemen', 'error'); diff --git a/static/neural-network-background-full.js b/static/neural-network-background-full.js index bc0fedb..009eda6 100644 --- a/static/neural-network-background-full.js +++ b/static/neural-network-background-full.js @@ -1115,18 +1115,20 @@ function applyNeuralNetworkStyle(cy) { 'label': 'data(label)', 'text-valign': 'center', 'text-halign': 'center', - 'color': '#ffffff', + 'color': 'data(fontColor)', 'text-outline-width': 2, 'text-outline-color': 'rgba(0,0,0,0.8)', 'text-outline-opacity': 0.9, - 'font-size': 14, + 'font-size': 'data(fontSize)', 'font-weight': '500', 'text-margin-y': 8, 'width': function(ele) { - return ele.data('neuronSize') ? ele.data('neuronSize') * 8 : 60; + if (ele.data('isCenter')) return 120; + return ele.data('neuronSize') ? ele.data('neuronSize') * 10 : 80; }, 'height': function(ele) { - return ele.data('neuronSize') ? ele.data('neuronSize') * 8 : 60; + if (ele.data('isCenter')) return 120; + return ele.data('neuronSize') ? ele.data('neuronSize') * 10 : 80; }, 'background-color': 'data(color)', 'background-opacity': 0.9,