363 lines
13 KiB
JavaScript
363 lines
13 KiB
JavaScript
/**
|
|
* Update Mindmap
|
|
* Dieses Skript fügt Knoten zur Mindmap hinzu und stellt sicher,
|
|
* dass sie im neuronalen Netzwerk-Design angezeigt werden.
|
|
*/
|
|
|
|
// Warte bis DOM geladen ist
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Prüfe, ob wir auf der Mindmap-Seite sind
|
|
const cyContainer = document.getElementById('cy');
|
|
|
|
if (!cyContainer) {
|
|
console.log('Kein Mindmap-Container gefunden, überspringe Initialisierung.');
|
|
return;
|
|
}
|
|
|
|
// Auf das Laden der Mindmap warten
|
|
document.addEventListener('mindmap-loaded', function() {
|
|
console.log('Mindmap geladen, wende neuronales Netzwerk-Design an...');
|
|
enhanceMindmap();
|
|
});
|
|
});
|
|
|
|
/**
|
|
* Erweitert die Mindmap mit dem neuronalen Netzwerk-Design
|
|
*/
|
|
function enhanceMindmap() {
|
|
// Auf die bestehende Cytoscape-Instanz zugreifen
|
|
const cy = window.cy;
|
|
|
|
if (!cy) {
|
|
console.error('Keine Cytoscape-Instanz gefunden.');
|
|
return;
|
|
}
|
|
|
|
// Aktualisiere das Layout für eine bessere Verteilung
|
|
cy.layout({
|
|
name: 'cose',
|
|
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
|
|
}).run();
|
|
|
|
// Neuronen-Namen mit besserer Lesbarkeit umgestalten
|
|
cy.style()
|
|
.selector('node')
|
|
.style({
|
|
'text-background-color': 'rgba(10, 14, 25, 0.7)',
|
|
'text-background-opacity': 0.7,
|
|
'text-background-padding': '2px',
|
|
'text-border-opacity': 0.2,
|
|
'text-border-width': 1,
|
|
'text-border-color': '#8b5cf6'
|
|
})
|
|
.update();
|
|
|
|
// Sicherstellen, dass alle Knoten Neuronen-Eigenschaften haben
|
|
cy.nodes().forEach(node => {
|
|
if (!node.data('neuronSize')) {
|
|
const neuronSize = Math.floor(Math.random() * 8) + 3;
|
|
node.data('neuronSize', neuronSize);
|
|
}
|
|
|
|
if (!node.data('neuronActivity')) {
|
|
const neuronActivity = Math.random() * 0.7 + 0.3;
|
|
node.data('neuronActivity', neuronActivity);
|
|
}
|
|
|
|
// Zusätzliche Neuronale Eigenschaften
|
|
node.data('pulseFrequency', Math.random() * 4 + 2); // Pulsfrequenz (2-6 Hz)
|
|
node.data('refractionPeriod', Math.random() * 300 + 700); // Refraktionszeit (700-1000ms)
|
|
node.data('threshold', Math.random() * 0.3 + 0.6); // Aktivierungsschwelle (0.6-0.9)
|
|
});
|
|
|
|
// Sicherstellen, dass alle Kanten Synapse-Eigenschaften haben
|
|
cy.edges().forEach(edge => {
|
|
if (!edge.data('strength')) {
|
|
const strength = Math.random() * 0.6 + 0.2;
|
|
edge.data('strength', strength);
|
|
}
|
|
|
|
// Zusätzliche synaptische Eigenschaften
|
|
edge.data('conductionVelocity', Math.random() * 0.5 + 0.3); // Leitungsgeschwindigkeit (0.3-0.8)
|
|
edge.data('latency', Math.random() * 100 + 50); // Signalverzögerung (50-150ms)
|
|
});
|
|
|
|
// Neuronales Netzwerk-Stil anwenden
|
|
applyNeuralNetworkStyle(cy);
|
|
|
|
console.log('Mindmap wurde erfolgreich im neuronalen Netzwerk-Stil aktualisiert');
|
|
|
|
// Spezielle Effekte für das neuronale Netzwerk hinzufügen
|
|
startNeuralActivitySimulation(cy);
|
|
}
|
|
|
|
/**
|
|
* Wendet detaillierte neuronale Netzwerkstile auf die Mindmap an
|
|
* @param {Object} cy - Cytoscape-Instanz
|
|
*/
|
|
function applyNeuralNetworkStyle(cy) {
|
|
// Wende erweiterte Stile für Neuronen und Synapsen an
|
|
cy.style()
|
|
.selector('node')
|
|
.style({
|
|
'label': 'data(name)',
|
|
'text-valign': 'bottom',
|
|
'text-halign': 'center',
|
|
'color': '#ffffff',
|
|
'text-outline-width': 1.5,
|
|
'text-outline-color': '#0a0e19',
|
|
'text-outline-opacity': 0.9,
|
|
'font-size': 10,
|
|
'text-margin-y': 7,
|
|
'width': 'mapData(neuronSize, 3, 10, 15, 40)',
|
|
'height': 'mapData(neuronSize, 3, 10, 15, 40)',
|
|
'background-color': 'data(color)',
|
|
'background-opacity': 0.85,
|
|
'border-width': 0,
|
|
'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
|
|
})
|
|
.selector('edge')
|
|
.style({
|
|
'width': 'mapData(strength, 0.2, 0.8, 0.7, 2)',
|
|
'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%'
|
|
})
|
|
.selector('node[isRoot]')
|
|
.style({
|
|
'font-size': 12,
|
|
'font-weight': 'bold',
|
|
'width': 50,
|
|
'height': 50,
|
|
'background-color': '#6366f1',
|
|
'shadow-blur': 20,
|
|
'shadow-color': '#6366f1',
|
|
'shadow-opacity': 0.8,
|
|
'text-margin-y': 8
|
|
})
|
|
.update();
|
|
}
|
|
|
|
/**
|
|
* Simuliert neuronale Aktivität in der Mindmap
|
|
* @param {Object} cy - Cytoscape-Instanz
|
|
*/
|
|
function startNeuralActivitySimulation(cy) {
|
|
// Neuronen-Zustand für die Simulation
|
|
const neuronStates = new Map();
|
|
|
|
// Initialisieren aller Neuronen-Zustände
|
|
cy.nodes().forEach(node => {
|
|
neuronStates.set(node.id(), {
|
|
potential: Math.random() * 0.3, // Startpotential
|
|
lastFired: 0, // Zeitpunkt der letzten Aktivierung
|
|
isRefractory: false, // Refraktärphase
|
|
refractoryUntil: 0 // Ende der Refraktärphase
|
|
});
|
|
});
|
|
|
|
// Neuronale Aktivität simulieren
|
|
function simulateNeuralActivity() {
|
|
const currentTime = Date.now();
|
|
const nodes = cy.nodes().toArray();
|
|
|
|
// Zufällige Stimulation eines Neurons
|
|
if (Math.random() > 0.7) {
|
|
const randomNodeIndex = Math.floor(Math.random() * nodes.length);
|
|
const randomNode = nodes[randomNodeIndex];
|
|
|
|
const state = neuronStates.get(randomNode.id());
|
|
if (state && !state.isRefractory) {
|
|
state.potential += 0.5; // Erhöhe das Potential durch externe Stimulation
|
|
}
|
|
}
|
|
|
|
// Neuronen aktualisieren
|
|
nodes.forEach(node => {
|
|
const nodeId = node.id();
|
|
const state = neuronStates.get(nodeId);
|
|
const threshold = node.data('threshold') || 0.7;
|
|
const refractoryPeriod = node.data('refractionPeriod') || 1000;
|
|
|
|
// Überprüfen, ob die Refraktärphase beendet ist
|
|
if (state.isRefractory && currentTime >= state.refractoryUntil) {
|
|
state.isRefractory = false;
|
|
state.potential = 0.1; // Ruhepotential nach Refraktärphase
|
|
}
|
|
|
|
// Wenn nicht in Refraktärphase und Potential über Schwelle
|
|
if (!state.isRefractory && state.potential >= threshold) {
|
|
// Neuron feuert
|
|
fireNeuron(node, state, currentTime);
|
|
} else if (!state.isRefractory) {
|
|
// Potential langsam verlieren, wenn nicht gefeuert wird
|
|
state.potential *= 0.95;
|
|
}
|
|
});
|
|
|
|
// Simulation fortsetzen
|
|
requestAnimationFrame(simulateNeuralActivity);
|
|
}
|
|
|
|
// Neuron "feuern" lassen
|
|
function fireNeuron(node, state, currentTime) {
|
|
// Neuron aktivieren
|
|
node.animate({
|
|
style: {
|
|
'background-opacity': 1,
|
|
'shadow-opacity': 1,
|
|
'shadow-blur': 25
|
|
},
|
|
duration: 300,
|
|
easing: 'ease-in-cubic',
|
|
complete: function() {
|
|
// Zurück zum normalen Zustand
|
|
node.animate({
|
|
style: {
|
|
'background-opacity': 0.85,
|
|
'shadow-opacity': 0.6,
|
|
'shadow-blur': 'mapData(neuronActivity, 0.3, 1, 5, 15)'
|
|
},
|
|
duration: 600,
|
|
easing: 'ease-out-cubic'
|
|
});
|
|
}
|
|
});
|
|
|
|
// Refraktärphase setzen
|
|
state.isRefractory = true;
|
|
state.lastFired = currentTime;
|
|
state.refractoryPeriod = node.data('refractionPeriod') || 1000;
|
|
state.refractoryUntil = currentTime + state.refractoryPeriod;
|
|
state.potential = 0; // Potential zurücksetzen
|
|
|
|
// Signal über verbundene Synapsen weiterleiten
|
|
propagateSignal(node, currentTime);
|
|
}
|
|
|
|
// Signal über Synapsen propagieren
|
|
function propagateSignal(sourceNode, currentTime) {
|
|
// Verbundene Kanten auswählen
|
|
const edges = sourceNode.connectedEdges().filter(edge =>
|
|
edge.source().id() === sourceNode.id() // Nur ausgehende Kanten
|
|
);
|
|
|
|
// Durch alle Kanten iterieren
|
|
edges.forEach(edge => {
|
|
// Signalverzögerung basierend auf synaptischen Eigenschaften
|
|
const latency = edge.data('latency') || 100;
|
|
const strength = edge.data('strength') || 0.5;
|
|
|
|
// Signal entlang der Kante senden
|
|
setTimeout(() => {
|
|
edge.animate({
|
|
style: {
|
|
'line-color': '#a78bfa',
|
|
'line-opacity': 0.9,
|
|
'width': 2.5
|
|
},
|
|
duration: 200,
|
|
easing: 'ease-in',
|
|
complete: function() {
|
|
// Kante zurücksetzen
|
|
edge.animate({
|
|
style: {
|
|
'line-color': '#8a8aaa',
|
|
'line-opacity': 'mapData(strength, 0.2, 0.8, 0.4, 0.7)',
|
|
'width': 'mapData(strength, 0.2, 0.8, 0.7, 2)'
|
|
},
|
|
duration: 400,
|
|
easing: 'ease-out'
|
|
});
|
|
|
|
// Zielknoten potenzial erhöhen
|
|
const targetNode = edge.target();
|
|
const targetState = neuronStates.get(targetNode.id());
|
|
|
|
if (targetState && !targetState.isRefractory) {
|
|
// Potentialzunahme basierend auf synaptischer Stärke
|
|
targetState.potential += strength * 0.4;
|
|
|
|
// Subtile Anzeige der Potenzialänderung
|
|
targetNode.animate({
|
|
style: {
|
|
'background-opacity': Math.min(1, 0.85 + (strength * 0.2)),
|
|
'shadow-opacity': Math.min(1, 0.6 + (strength * 0.3)),
|
|
'shadow-blur': Math.min(25, 10 + (strength * 15))
|
|
},
|
|
duration: 300,
|
|
easing: 'ease-in-out'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}, latency);
|
|
});
|
|
}
|
|
|
|
// Starte die Simulation
|
|
simulateNeuralActivity();
|
|
}
|
|
|
|
// Hilfe-Funktion zum Hinzufügen eines Flash-Hinweises
|
|
function showFlash(message, type = 'info') {
|
|
const flashContainer = document.getElementById('flash-messages') || createFlashContainer();
|
|
|
|
const flashMsg = document.createElement('div');
|
|
flashMsg.className = `flash-message flash-${type} mb-2 p-3 rounded`;
|
|
flashMsg.innerHTML = `
|
|
<div class="flex items-center justify-between">
|
|
<div>${message}</div>
|
|
<button class="close-flash ml-2">×</button>
|
|
</div>
|
|
`;
|
|
|
|
flashContainer.appendChild(flashMsg);
|
|
|
|
// Nach 5 Sekunden automatisch ausblenden
|
|
setTimeout(() => {
|
|
flashMsg.style.opacity = '0';
|
|
setTimeout(() => flashMsg.remove(), 300);
|
|
}, 5000);
|
|
|
|
// Close-Button
|
|
const closeBtn = flashMsg.querySelector('.close-flash');
|
|
closeBtn.addEventListener('click', () => {
|
|
flashMsg.style.opacity = '0';
|
|
setTimeout(() => flashMsg.remove(), 300);
|
|
});
|
|
}
|
|
|
|
// Hilfsfunktion zum Erstellen eines Flash-Containers, falls keiner existiert
|
|
function createFlashContainer() {
|
|
const container = document.createElement('div');
|
|
container.id = 'flash-messages';
|
|
container.className = 'fixed top-4 right-4 z-50 w-64';
|
|
document.body.appendChild(container);
|
|
return container;
|
|
}
|