diff --git a/static/js/update_mindmap.js b/static/js/update_mindmap.js index 2a6c7d2..ceb1dbc 100644 --- a/static/js/update_mindmap.js +++ b/static/js/update_mindmap.js @@ -186,7 +186,8 @@ document.addEventListener('DOMContentLoaded', function() { description: node.description, hasChildren: node.hasChildren, expanded: node.expanded, - expanded: node.expanded + neuronSize: node.neuronSize, + neuronActivity: node.neuronActivity } })), // Kanten @@ -194,14 +195,15 @@ document.addEventListener('DOMContentLoaded', function() { data: { source: edge.source, target: edge.target, - label: edge.label + label: edge.label, + strength: edge.strength } })) ]; console.log('Initialisiere Cytoscape...'); - // Initialisiere Cytoscape mit einfachem, stabilem Design + // Initialisiere Cytoscape mit neuronalem Design window.cy = cytoscape({ container: cyContainer, elements: elements, @@ -212,18 +214,26 @@ document.addEventListener('DOMContentLoaded', function() { 'background-color': 'data(color)', 'label': 'data(label)', 'color': '#fff', - 'text-background-color': '#222222', - 'text-background-opacity': 0.7, + 'text-background-color': 'rgba(0, 0, 0, 0.7)', + 'text-background-opacity': 0.8, 'text-background-padding': '4px', 'text-valign': 'center', 'text-halign': 'center', - 'font-size': 18, - 'width': 40, - 'height': 40, + 'font-size': 16, + 'width': 'mapData(neuronSize, 3, 10, 30, 60)', + 'height': 'mapData(neuronSize, 3, 10, 30, 60)', 'border-width': 2, 'border-color': '#fff', + 'border-opacity': 0.8, 'overlay-padding': 4, - 'z-index': 10 + 'z-index': 10, + 'shape': 'ellipse', + 'background-opacity': 0.85, + 'shadow-blur': 'mapData(neuronActivity, 0.3, 1, 10, 20)', + 'shadow-color': 'data(color)', + 'shadow-opacity': 0.6, + 'shadow-offset-x': 0, + 'shadow-offset-y': 0 } }, { @@ -236,25 +246,31 @@ document.addEventListener('DOMContentLoaded', function() { selector: 'node:selected', style: { 'border-color': '#f59e42', - 'border-width': 4 + 'border-width': 4, + 'shadow-blur': 30, + 'shadow-opacity': 0.8 } }, { selector: 'edge', style: { - 'width': 3, + 'width': 'mapData(strength, 0.2, 1, 1, 3)', 'line-color': '#a78bfa', + 'line-opacity': 'mapData(strength, 0.2, 1, 0.4, 0.8)', 'target-arrow-color': '#a78bfa', - 'target-arrow-shape': 'triangle', + 'target-arrow-shape': 'none', 'curve-style': 'bezier', - 'label': 'data(label)', - 'font-size': 12, - 'color': '#fff', - 'text-background-color': '#222222', - 'text-background-opacity': 0.7, - 'text-background-padding': '2px', - 'opacity': 0.8, - 'line-style': 'solid' + 'control-point-distances': [20, -20], + 'control-point-weights': [0.5, 0.5], + 'edge-distances': 'intersection', + 'loop-direction': '-45deg', + 'loop-sweep': '-90deg', + 'line-style': function(ele) { + const strength = ele.data('strength'); + if (strength <= 0.4) return 'dotted'; + if (strength <= 0.6) return 'dashed'; + return 'solid'; + } } }, { @@ -263,18 +279,57 @@ document.addEventListener('DOMContentLoaded', function() { 'width': 5, 'line-color': '#f59e42', 'target-arrow-color': '#f59e42', - 'opacity': 1 + 'opacity': 1, + 'line-style': 'solid' } } ], layout: { name: 'cose', + animate: true, + animationDuration: 1000, + nodeDimensionsIncludeLabels: true, + padding: 100, + spacingFactor: 1.8, + randomize: false, + fit: true, + componentSpacing: 100, + nodeRepulsion: 8000, + edgeElasticity: 100, animate: true } }); console.log('Cytoscape initialisiert'); + // Füge neuronale Eigenschaften zu allen Knoten hinzu + cy.nodes().forEach(node => { + const data = node.data(); + node.data({ + ...data, + neuronSize: data.neuronSize || 8, + neuronActivity: data.neuronActivity || 0.8, + refractionPeriod: Math.random() * 300 + 700, + threshold: Math.random() * 0.3 + 0.6, + lastFired: 0, + color: categoryColors[data.category] || '#60a5fa' + }); + }); + + // Füge synaptische Eigenschaften zu allen Kanten hinzu + cy.edges().forEach(edge => { + const data = edge.data(); + edge.data({ + ...data, + strength: data.strength || 0.5, + conductionVelocity: Math.random() * 0.5 + 0.3, + latency: Math.random() * 100 + 50 + }); + }); + + // Starte neuronale Aktivitätssimulation + startNeuralActivitySimulation(cy); + // Mindmap mit echten Daten befüllen (Styles, Farben etc.) updateMindmap(); @@ -302,113 +357,142 @@ const categoryColors = { 'Psychologie': '#ef4444' }; -// Mindmap aktualisieren +// Funktion zum Initialisieren des neuronalen Designs +function initializeNeuralDesign(cy) { + // Füge neuronale Eigenschaften zu allen Knoten hinzu + cy.nodes().forEach(node => { + const data = node.data(); + node.data({ + ...data, + neuronSize: data.neuronSize || 8, + neuronActivity: data.neuronActivity || 0.8, + refractionPeriod: Math.random() * 300 + 700, + threshold: Math.random() * 0.3 + 0.6, + lastFired: 0, + color: categoryColors[data.category] || '#60a5fa' + }); + }); + + // Füge synaptische Eigenschaften zu allen Kanten hinzu + cy.edges().forEach(edge => { + const data = edge.data(); + edge.data({ + ...data, + strength: data.strength || 0.5, + conductionVelocity: Math.random() * 0.5 + 0.3, + latency: Math.random() * 100 + 50 + }); + }); + + // Wende neuronales Styling an + cy.style() + .selector('node') + .style({ + 'background-color': 'data(color)', + 'label': 'data(label)', + 'color': '#fff', + 'text-background-color': 'rgba(0, 0, 0, 0.7)', + 'text-background-opacity': 0.8, + 'text-background-padding': '4px', + 'text-valign': 'center', + 'text-halign': 'center', + 'font-size': 16, + 'width': 'mapData(neuronSize, 3, 10, 30, 60)', + 'height': 'mapData(neuronSize, 3, 10, 30, 60)', + 'border-width': 2, + 'border-color': '#fff', + 'border-opacity': 0.8, + 'overlay-padding': 4, + 'z-index': 10, + 'shape': 'ellipse', + 'background-opacity': 0.85, + 'shadow-blur': 'mapData(neuronActivity, 0.3, 1, 10, 20)', + 'shadow-color': 'data(color)', + 'shadow-opacity': 0.6, + 'shadow-offset-x': 0, + 'shadow-offset-y': 0 + }) + .selector('edge') + .style({ + 'width': 'mapData(strength, 0.2, 1, 1, 3)', + 'line-color': '#a78bfa', + 'line-opacity': 'mapData(strength, 0.2, 1, 0.4, 0.8)', + 'target-arrow-color': '#a78bfa', + 'target-arrow-shape': 'none', + 'curve-style': 'bezier', + 'control-point-distances': [20, -20], + 'control-point-weights': [0.5, 0.5], + 'edge-distances': 'intersection', + 'loop-direction': '-45deg', + 'loop-sweep': '-90deg', + 'line-style': function(ele) { + const strength = ele.data('strength'); + if (strength <= 0.4) return 'dotted'; + if (strength <= 0.6) return 'dashed'; + return 'solid'; + } + }) + .update(); + + // Starte neuronale Aktivitätssimulation + startNeuralActivitySimulation(cy); +} + +// Modifiziere die updateMindmap Funktion function updateMindmap() { - if (!cy) return; - - // Bestehende Elemente entfernen - cy.elements().remove(); - - // Neue Knoten hinzufügen - mindmapData.nodes.forEach(node => { - cy.add({ - group: 'nodes', - data: { - id: node.id, - label: node.label, - category: node.category, - description: node.description, - color: categoryColors[node.category] || '#60a5fa', - hasChildren: node.hasChildren, - expanded: node.expanded - } + if (!cy) return; + + // Bestehende Elemente entfernen + cy.elements().remove(); + + // Neue Knoten hinzufügen + mindmapData.nodes.forEach(node => { + cy.add({ + group: 'nodes', + data: { + id: node.id, + label: node.label, + category: node.category, + description: node.description, + hasChildren: node.hasChildren, + expanded: node.expanded, + neuronSize: node.neuronSize, + neuronActivity: node.neuronActivity + } + }); }); - }); - - // Neue Kanten hinzufügen - mindmapData.edges.forEach(edge => { - cy.add({ - group: 'edges', - data: { - source: edge.source, - target: edge.target, - label: edge.label - } + + // Neue Kanten hinzufügen + mindmapData.edges.forEach(edge => { + cy.add({ + group: 'edges', + data: { + source: edge.source, + target: edge.target, + strength: edge.strength + } + }); }); - }); - - // Nur einfaches, klares Styling - KEINE Schatten, KEIN Glow, KEINE dynamischen Styles! - cy.style([ - { - selector: 'node', - style: { - 'label': 'data(label)', - 'text-valign': 'center', - 'text-halign': 'center', - 'text-wrap': 'wrap', - 'text-max-width': '100px', - 'font-size': '14px', - 'color': '#ffffff', - 'text-outline-color': '#0a0e19', - 'text-outline-width': 1.5, - 'text-outline-opacity': 0.9, - 'text-margin-y': 7, - 'width': 40, - 'height': 40, - 'background-color': 'data(color)', - 'background-opacity': 0.85, - 'border-width': 2, - 'shape': 'ellipse', - 'text-background-color': 'rgba(24, 28, 45, 0.7)', - 'text-background-opacity': 0.8, - 'text-background-shape': 'roundrectangle', - 'text-background-padding': '4px' - } - }, - { - selector: 'edge', - style: { - 'width': 3, - 'curve-style': 'bezier', - 'line-color': '#8a8aaa', - 'line-opacity': 0.7, - 'line-style': 'solid', - 'target-arrow-shape': 'triangle', - 'target-arrow-color': '#8a8aaa', - 'label': 'data(label)', - 'font-size': 12, - 'color': '#fff', - 'text-background-color': '#222222', - 'text-background-opacity': 0.7, - 'text-background-padding': '2px' - } - }, - { - selector: 'node:selected', - style: { - 'border-color': '#f59e42', - 'border-width': 4 - } - }, - { - selector: 'edge:selected', - style: { - 'width': 5, - 'line-color': '#f59e42', - 'target-arrow-color': '#f59e42', - 'opacity': 1 - } - } - ]); - - // Layout anwenden - cy.layout({ - name: 'cose', - animate: true, - animationDuration: 1800, - nodeDimensionsIncludeLabels: true, - padding: 100 - }).run(); + + // Neuronales Design initialisieren + initializeNeuralDesign(cy); + + // Layout anwenden + cy.layout({ + name: 'cose', + animate: true, + animationDuration: 1000, + nodeDimensionsIncludeLabels: true, + padding: 100, + spacingFactor: 1.8, + randomize: false, + fit: true, + componentSpacing: 100, + nodeRepulsion: 8000, + edgeElasticity: 100, + nestingFactor: 1.2, + gravity: 80 + }).run(); } /** @@ -756,11 +840,15 @@ async function loadSubthemes(node) { description: subtheme.description, hasChildren: subtheme.hasChildren, expanded: false, - color: categoryColors[subtheme.category] || '#60a5fa' + neuronSize: 6, + neuronActivity: 0.7 } }); }); + // Neuronales Design für die neue Mindmap initialisieren + initializeNeuralDesign(newCy); + // Event-Listener für die neue Mindmap newCy.on('tap', 'node', async function(evt) { const clickedNode = evt.target; @@ -841,5 +929,18 @@ style.textContent = ` width: 100%; height: calc(100% - 4rem); } + + /* Neuronale Effekte */ + .cy-container { + background: linear-gradient(45deg, #1a1a1a, #2a2a2a); + } + + .cy-container node { + transition: all 0.3s ease; + } + + .cy-container node:hover { + filter: brightness(1.2); + } `; document.head.appendChild(style); \ No newline at end of file