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

✨ feat: Erweiterung der Mindmap-Funktionalität durch Hinzufügen von Hover-Events für Knoten und Verbesserung der Zoom-Steuerung; Info-Panel für Knotendetails implementiert.

Browse Source
This commit is contained in:
Marwin
2025-05-16 20:40:53 +01:00
parent bb3211ab3d
commit 302d5213ef
2 changed files with 129 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

433
static/js/update_mindmap.js
View File

@@ -286,13 +286,23 @@ async function initializeMindmap() {
// Event-Listener für Knoten-Klicks
cy.on('tap', 'node', async function(evt) {
const node = evt.target;
console.log('Node clicked:', node.id(), 'hasChildren:', node.data('hasChildren'), 'expanded:', node.data('expanded'));
console.log('Node clicked:', node.id(), 'hasChildren:', node.data('hasChildren') || node.data('has_children'), 'expanded:', node.data('expanded'));
if (node.data('hasChildren') && !node.data('expanded')) {
if ((node.data('hasChildren') || node.data('has_children')) && !node.data('expanded')) {
await loadSubthemes(node);
}
});
// Event-Listener für Hover über Knoten (für Info-Panel)
cy.on('mouseover', 'node', function(evt) {
const node = evt.target;
showNodeInfo(node);
});
cy.on('mouseout', 'node', function() {
hideNodeInfo();
});
// Layout ausführen
cy.layout(mindmapStyles.layout.base).run();
@@ -311,309 +321,6 @@ async function initializeMindmap() {
cy.center();
}, 300);
return true;
} catch (error) {
console.error('Fehler bei der Mindmap-Initialisierung:', error);
/**
* Update Mindmap
* Dieses Skript fügt Knoten zur Mindmap hinzu und stellt sicher,
* dass sie im neuronalen Netzwerk-Design angezeigt werden.
* Implementiert Lazy Loading & Progressive Disclosure
*/
// Neue zentrale Konfiguration
const mindmapConfig = {
categories: {
'Philosophie': {
icon: 'fa-solid fa-lightbulb',
color: '#b71c1c',
description: 'Die Lehre vom Denken und der Erkenntnis'
},
'Wissenschaft': {
icon: 'fa-solid fa-atom',
color: '#f4b400',
description: 'Systematische Erforschung der Natur und Gesellschaft'
},
'Technologie': {
icon: 'fa-solid fa-microchip',
color: '#0d47a1',
description: 'Anwendung wissenschaftlicher Erkenntnisse'
},
'Künste': {
icon: 'fa-solid fa-palette',
color: '#c2185b',
description: 'Kreativer Ausdruck und künstlerische Gestaltung'
}
},
defaultNodeStyle: {
fontSize: 18,
fontColor: '#fff',
neuronSize: 8,
neuronActivity: 0.8
},
centerNodeStyle: {
fontSize: 22,
fontColor: '#222',
neuronSize: 12,
neuronActivity: 1.0,
color: '#f5f5f5',
icon: 'fa-solid fa-circle'
}
};
// Zentrale Styling-Konfiguration
const mindmapStyles = {
node: {
base: {
'background-color': 'data(color)',
'label': 'data(label)',
'color': '#ffffff',
'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': 40,
'height': 40,
'border-width': 2,
'border-color': '#ffffff',
'border-opacity': 0.8,
'shape': 'ellipse',
'background-opacity': 0.85
},
center: {
'background-color': '#f5f5f5',
'color': '#222',
'font-size': 20,
'border-width': 3,
'width': 100,
'height': 100
},
selected: {
'border-color': '#f59e42',
'border-width': 3,
'background-opacity': 1
}
},
edge: {
base: {
'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': [30, -30],
'control-point-weights': [0.5, 0.5]
}
},
layout: {
base: {
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
}
}
};
// Globale Variable für die Mindmap-Daten
let mindmapData = null;
// Funktion zum Laden der Mindmap-Daten aus der Datenbank
async function loadMindmapData(nodeId = null) {
try {
const apiUrl = nodeId ? `/api/mindmap/${nodeId}` : '/api/mindmap/root';
console.log('Lade Mindmap-Daten von:', apiUrl);
const response = await fetch(apiUrl);
console.log('API-Antwort Status:', response.status);
if (!response.ok) {
let errorData;
try {
errorData = await response.json();
console.log('API-Fehler Details:', errorData);
} catch (e) {
console.error('Fehler beim Parsen der Fehlerantwort:', e);
errorData = {
error: `HTTP-Fehler ${response.status}: ${response.statusText}`
};
}
// Fehlerobjekt für die Benachrichtigung erstellen
const errorMessage = errorData.error || 'Unbekannter Fehler';
showUINotification(errorMessage, 'error');
throw new Error(errorMessage);
}
const data = await response.json();
console.log('Geladene Mindmap-Daten:', data);
if (!data.success) {
const errorMessage = data.error || 'Mindmap-Daten konnten nicht geladen werden';
showUINotification(errorMessage, 'error');
throw new Error(errorMessage);
}
// Überprüfen, ob Nodes und Edges existieren
if (!data.nodes || !data.edges) {
const errorMessage = 'Ungültiges Datenformat: Nodes oder Edges fehlen';
showUINotification(errorMessage, 'error');
throw new Error(errorMessage);
}
// Erfolgreiche Antwort
mindmapData = data; // Speichere die Daten in der globalen Variable
showUINotification('Mindmap-Daten erfolgreich geladen', 'success');
return data;
} catch (error) {
console.error('Fehler beim Laden der Mindmap-Daten:', error);
// Stelle sicher, dass wir eine aussagekräftige Fehlermeldung haben
const errorMessage = error.message || 'Unbekannter Fehler beim Laden der Mindmap-Daten';
showUINotification(errorMessage, 'error');
throw error;
}
}
// Funktion zum Initialisieren der Mindmap
async function initializeMindmap() {
try {
const data = await loadMindmapData();
if (!data || !data.nodes || !data.edges) {
throw new Error('Ungültiges Datenformat: Mindmap-Daten fehlen oder sind unvollständig');
}
const elements = [
// Knoten
...data.nodes.map(node => ({
data: {
id: node.id,
label: node.name,
category: node.category,
description: node.description,
hasChildren: node.has_children,
expanded: false,
color: node.color_code,
fontColor: '#ffffff',
fontSize: node.is_center ? 20 : 16
}
})),
// Kanten
...data.edges.map(edge => ({
data: {
source: edge.source,
target: edge.target,
strength: edge.strength || 0.5
}
}))
];
// Bestehende Cytoscape-Instanz entfernen, falls vorhanden
if (window.cy && typeof window.cy.destroy === 'function') {
window.cy.destroy();
}
const cyContainer = document.getElementById('cy');
if (!cyContainer) {
throw new Error('Mindmap-Container #cy nicht gefunden!');
}
window.cy = cytoscape({
container: cyContainer,
elements: elements,
style: [
{
selector: 'node',
style: mindmapStyles.node.base
},
{
selector: 'node[isCenter]',
style: mindmapStyles.node.center
},
{
selector: 'node:selected',
style: mindmapStyles.node.selected
},
{
selector: 'edge',
style: mindmapStyles.edge.base
}
],
layout: mindmapStyles.layout.base
});
// Füge neuronale Eigenschaften zu allen Knoten hinzu
cy.nodes().forEach(node => {
const data = node.data();
// Verwende mindmapConfig für Kategorie-Farben oder einen Standardwert
const categoryColor = data.category && mindmapConfig.categories[data.category]
? mindmapConfig.categories[data.category].color
: '#60a5fa';
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: data.color || categoryColor
});
});
// 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
});
});
// Event-Listener für Knoten-Klicks
cy.on('tap', 'node', async function(evt) {
const node = evt.target;
console.log('Node clicked:', node.id(), 'hasChildren:', node.data('hasChildren'), 'expanded:', node.data('expanded'));
if (node.data('hasChildren') && !node.data('expanded')) {
await loadSubthemes(node);
}
});
// Layout ausführen
cy.layout(mindmapStyles.layout.base).run();
// Starte neuronale Aktivitätssimulation
startNeuralActivitySimulation(cy);
// Mindmap mit echten Daten befüllen (Styles, Farben etc.)
updateMindmap();
return true;
} catch (error) {
console.error('Fehler bei der Mindmap-Initialisierung:', error);
@@ -775,7 +482,8 @@ function updateMindmap() {
label: node.name,
category: node.category,
description: node.description,
hasChildren: node.has_children,
has_children: node.has_children,
hasChildren: node.has_children, // Doppelte Eigenschaft für Kompatibilität
expanded: false,
color: node.color_code || mindmapConfig.categories[node.category]?.color || '#60a5fa',
icon: node.icon || mindmapConfig.categories[node.category]?.icon || 'fa-solid fa-circle'
@@ -2384,7 +2092,10 @@ async function loadSubthemes(node) {
coolingFactor: 0.95,
minTemp: 1
},
wheelSensitivity: 0.3
// Mausrad-Zooming deaktivieren
wheelSensitivity: 0,
minZoom: 0.2,
maxZoom: 2.5
});
// Speichere die Instanz
@@ -2451,24 +2162,31 @@ async function loadSubthemes(node) {
// Zoom-Controls für die Unterkategorien
document.getElementById(`zoomIn-${node.id()}`)?.addEventListener('click', () => {
newCy.zoom({
level: newCy.zoom() * 1.2,
level: newCy.zoom() * 1.3,
renderedPosition: { x: newCy.width() / 2, y: newCy.height() / 2 }
});
});
document.getElementById(`zoomOut-${node.id()}`)?.addEventListener('click', () => {
newCy.zoom({
level: newCy.zoom() / 1.2,
level: newCy.zoom() / 1.3,
renderedPosition: { x: newCy.width() / 2, y: newCy.height() / 2 }
});
});
document.getElementById(`resetView-${node.id()}`)?.addEventListener('click', () => {
newCy.fit();
// Auswahl zurücksetzen
newCy.nodes().forEach(n => {
n.removeStyle();
n.connectedEdges().removeStyle();
});
// Zoom auf eine angenehme Stufe setzen und zentrieren
newCy.zoom({
level: 0.7,
renderedPosition: { x: newCy.width() / 2, y: newCy.height() / 2 }
});
newCy.center();
});
// Hervorhebe den zentralen Knoten
@@ -2486,6 +2204,15 @@ async function loadSubthemes(node) {
// Wende neuronale Simulationen an
startNeuralActivitySimulation(newCy);
// Setze anfänglichen Zoom auf eine kleinere Stufe, damit mehr sichtbar ist
setTimeout(() => {
newCy.zoom({
level: 0.7,
renderedPosition: { x: newCy.width() / 2, y: newCy.height() / 2 }
});
newCy.center();
}, 300);
// Erfolgsbenachrichtigung
showUINotification('Subthemen erfolgreich geladen', 'success');
@@ -2551,4 +2278,88 @@ function goBack() {
}
// Funktion global verfügbar machen
window.goBack = goBack;
window.goBack = goBack;
// Verbesserte Zoom-Funktionalität für die Hauptmindmap
document.addEventListener('DOMContentLoaded', function() {
// Warte bis die Mindmap geladen ist
document.addEventListener('mindmap-loaded', function() {
// Zoom-Buttons für die Hauptmindmap
document.getElementById('zoomIn')?.addEventListener('click', function() {
if (!window.cy) return;
cy.zoom({
level: cy.zoom() * 1.3,
renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 }
});
});
document.getElementById('zoomOut')?.addEventListener('click', function() {
if (!window.cy) return;
cy.zoom({
level: cy.zoom() / 1.3,
renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 }
});
});
document.getElementById('resetView')?.addEventListener('click', function() {
if (!window.cy) return;
// Auswahl zurücksetzen
cy.nodes().forEach(node => {
node.removeStyle();
node.connectedEdges().removeStyle();
});
// Zoom auf eine angenehme Stufe setzen und zentrieren
cy.zoom({
level: 0.7,
renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 }
});
cy.center();
});
});
});
// Funktionen für Knoteninfo-Panel
function showNodeInfo(node) {
if (!node || !node.isNode()) return;
const infoPanel = document.getElementById('infoPanel');
if (!infoPanel) return;
// Stelle sicher, dass das Info-Panel die notwendigen Elemente enthält
if (!infoPanel.querySelector('.info-title')) {
infoPanel.innerHTML = `
<h3 class="info-title"></h3>
<div class="info-content"></div>
`;
}
const infoTitle = infoPanel.querySelector('.info-title');
const infoContent = infoPanel.querySelector('.info-content');
const data = node.data();
infoTitle.textContent = data.label || 'Knotendetails';
let contentHTML = `
<p><strong>Kategorie:</strong> ${data.category || 'Nicht kategorisiert'}</p>
<p><strong>Beschreibung:</strong> ${data.description || 'Keine Beschreibung verfügbar'}</p>
`;
if (data.hasChildren || data.has_children) {
contentHTML += `<p><i class="fas fa-sitemap"></i> Hat Unterknoten</p>`;
}
infoContent.innerHTML = contentHTML;
infoPanel.classList.add('visible');
}
function hideNodeInfo() {
const infoPanel = document.getElementById('infoPanel');
if (infoPanel) {
infoPanel.classList.remove('visible');
}
}