diff --git a/static/js/update_mindmap.js b/static/js/update_mindmap.js index 3468c07..b832a8a 100644 --- a/static/js/update_mindmap.js +++ b/static/js/update_mindmap.js @@ -47,12 +47,11 @@ document.addEventListener('DOMContentLoaded', function() { console.log('Initialisiere Cytoscape...'); - // Initialisiere Cytoscape mit großen Daten + // Initialisiere Cytoscape mit einfachem, stabilem Design window.cy = cytoscape({ container: cyContainer, elements: elements, style: [ - // Neuron Soma: Glow, Pulsieren, Schatten { selector: 'node', style: { @@ -65,56 +64,25 @@ document.addEventListener('DOMContentLoaded', function() { 'text-valign': 'center', 'text-halign': 'center', 'font-size': 18, - 'width': 48, - 'height': 48, - 'border-width': 6, + 'width': 40, + 'height': 40, + 'border-width': 2, 'border-color': '#fff', - 'overlay-padding': 8, - 'z-index': 10, - 'shadow-blur': 24, - 'shadow-color': 'data(color)', - 'shadow-opacity': 0.8, - 'transition-property': 'background-color, border-color, width, height, shadow-blur', - 'transition-duration': '0.4s', + 'overlay-padding': 4, + 'z-index': 10 } }, - // Pulsieren (aktive Klasse) - { - selector: 'node.pulsing', - style: { - 'width': 60, - 'height': 60, - 'shadow-blur': 40, - 'border-color': '#fbbf24', - } - }, - // Hover-Effekt - { - selector: 'node:hover', - style: { - 'border-color': '#fbbf24', - 'border-width': 10, - 'shadow-blur': 48, - 'shadow-color': '#fbbf24', - 'background-color': '#fff', - 'color': '#fbbf24', - } - }, - // Selektierter Knoten { selector: 'node:selected', style: { 'border-color': '#f59e42', - 'border-width': 12, - 'shadow-blur': 60, - 'shadow-color': '#f59e42', + 'border-width': 4 } }, - // Dendriten (normale Kanten) { selector: 'edge', style: { - 'width': 4, + 'width': 3, 'line-color': '#a78bfa', 'target-arrow-color': '#a78bfa', 'target-arrow-shape': 'triangle', @@ -126,40 +94,16 @@ document.addEventListener('DOMContentLoaded', function() { 'text-background-opacity': 0.7, 'text-background-padding': '2px', 'opacity': 0.8, - 'line-style': 'solid', - 'transition-property': 'width, line-color, opacity', - 'transition-duration': '0.3s', + 'line-style': 'solid' } }, - // Axone (stärkere Kanten, z.B. wenn label "beeinflusst" oder "inspiriert") - { - selector: 'edge[label = "beeinflusst"], edge[label = "inspiriert"]', - style: { - 'width': 8, - 'line-color': '#f59e42', - 'target-arrow-color': '#f59e42', - 'opacity': 1, - 'line-style': 'dashed', - } - }, - // Hover-Effekt für Kanten - { - selector: 'edge:hover', - style: { - 'width': 12, - 'line-color': '#fbbf24', - 'target-arrow-color': '#fbbf24', - 'opacity': 1, - } - }, - // Selektierte Kante { selector: 'edge:selected', style: { - 'width': 14, + 'width': 5, 'line-color': '#f59e42', 'target-arrow-color': '#f59e42', - 'opacity': 1, + 'opacity': 1 } } ], @@ -341,12 +285,7 @@ function updateMindmap() { label: node.label, category: node.category, description: node.description, - color: categoryColors[node.category] || '#60a5fa', - neuronSize: Math.floor(Math.random() * 8) + 3, - neuronActivity: Math.random() * 0.7 + 0.3, - pulseFrequency: Math.random() * 4 + 2, - refractionPeriod: Math.random() * 300 + 700, - threshold: Math.random() * 0.3 + 0.6 + color: categoryColors[node.category] || '#60a5fa' } }); }); @@ -358,15 +297,12 @@ function updateMindmap() { data: { source: edge.source, target: edge.target, - label: edge.label, - strength: Math.random() * 0.6 + 0.2, - conductionVelocity: Math.random() * 0.5 + 0.3, - latency: Math.random() * 100 + 50 + label: edge.label } }); }); - // Neuronales Netzwerk-Styling anwenden + // Nur einfaches, klares Styling - KEINE Schatten, KEIN Glow, KEINE dynamischen Styles! cy.style([ { selector: 'node', @@ -382,67 +318,50 @@ function updateMindmap() { 'text-outline-width': 1.5, 'text-outline-opacity': 0.9, 'text-margin-y': 7, - 'width': 'mapData(neuronSize, 3, 10, 15, 40)', - 'height': 'mapData(neuronSize, 3, 10, 15, 40)', + 'width': 40, + 'height': 40, 'background-color': 'data(color)', 'background-opacity': 0.85, - 'border-width': 0, + 'border-width': 2, 'shape': 'ellipse', - 'shadow-blur': 'mapData(neuronActivity, 0.3, 1, 5, 15)', - 'shadow-color': 'data(color)', - 'shadow-opacity': 0.6, - 'shadow-offset-x': 0, - 'shadow-offset-y': 0, 'text-background-color': 'rgba(24, 28, 45, 0.7)', 'text-background-opacity': 0.8, 'text-background-shape': 'roundrectangle', - 'text-background-padding': '4px', - 'transition-property': 'background-color, shadow-blur, shadow-opacity, background-opacity', - 'transition-duration': '0.5s' + 'text-background-padding': '4px' } }, { selector: 'edge', style: { - 'width': 'mapData(strength, 0.2, 0.8, 0.7, 2)', + 'width': 3, 'curve-style': 'bezier', 'line-color': '#8a8aaa', - 'line-opacity': 'mapData(strength, 0.2, 0.8, 0.4, 0.7)', - 'line-style': function(ele) { - const strength = ele.data('strength'); - if (strength <= 0.4) return 'dotted'; - if (strength <= 0.6) return 'dashed'; - return 'solid'; - }, - 'target-arrow-shape': 'none', - 'source-endpoint': '0% 50%', - 'target-endpoint': '100% 50%', - 'transition-property': 'line-color, width, line-style, line-opacity', - 'transition-duration': '0.4s' + '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': '#222a', + 'text-background-opacity': 0.7, + 'text-background-padding': '2px' } }, { - selector: ':selected', + selector: 'node:selected', style: { - 'background-color': '#f59e0b', - 'shadow-blur': 32, - 'shadow-color': '#f59e0b', - 'shadow-opacity': 1, - 'border-width': 4, - 'border-color': '#fff' + 'border-color': '#f59e42', + 'border-width': 4 } }, { - selector: '.highlighted', + selector: 'edge:selected', style: { - 'background-color': '#10b981', - 'shadow-blur': 28, - 'shadow-color': '#10b981', - 'shadow-opacity': 1, - 'line-color': '#10b981', - 'target-arrow-color': '#10b981', - 'transition-property': 'background-color, shadow-blur, shadow-opacity, line-color', - 'transition-duration': '0.3s' + 'width': 5, + 'line-color': '#f59e42', + 'target-arrow-color': '#f59e42', + 'opacity': 1 } } ]); @@ -453,31 +372,8 @@ function updateMindmap() { animate: true, animationDuration: 1800, nodeDimensionsIncludeLabels: true, - padding: 100, - spacingFactor: 1.8, - randomize: false, - fit: true, - componentSpacing: 100, - nodeRepulsion: 8000, - edgeElasticity: 100, - nestingFactor: 1.2, - gravity: 80 + padding: 100 }).run(); - - // Pulsierende Soma-Effekte starten - if (window.pulseInterval) clearInterval(window.pulseInterval); - window.pulseInterval = setInterval(() => { - cy.nodes().forEach(node => { - const baseBlur = 18; - const pulse = 0.7 + 0.3 * Math.sin(Date.now() / 400 + node.id().charCodeAt(0)); - node.style('shadow-blur', baseBlur * pulse); - node.style('shadow-opacity', 0.6 + 0.3 * pulse); - node.style('background-opacity', 0.85 + 0.1 * pulse); - }); - }, 80); - - // Neuronale Aktivität simulieren - startNeuralActivitySimulation(cy); } /** @@ -750,24 +646,4 @@ function createFlashContainer() { container.className = 'fixed top-4 right-4 z-50 w-64'; document.body.appendChild(container); return container; -} - -// Interaktive Effekte: Pulsieren -function pulseNode(node) { - node.addClass('pulsing'); - setTimeout(() => node.removeClass('pulsing'), 600); -} -cy.nodes().forEach(node => { - setInterval(() => pulseNode(node), 2000 + Math.random() * 2000); -}); - -// Klick-Interaktion: Pulsieren und Glow verstärken -cy.on('tap', 'node', function(evt){ - const node = evt.target; - pulseNode(node); - node.select(); -}); -// Klick auf Hintergrund: Auswahl zurücksetzen -cy.on('tap', function(evt){ - if(evt.target === cy) cy.nodes().unselect(); -}); \ No newline at end of file +} \ No newline at end of file