diff --git a/static/js/update_mindmap.js b/static/js/update_mindmap.js
index ceb1dbc..08e6063 100644
--- a/static/js/update_mindmap.js
+++ b/static/js/update_mindmap.js
@@ -101,9 +101,36 @@ const subthemesDatabase = {
]
};
-// Initiale Mindmap-Daten (nur oberste Ebene)
+// Icon-Definitionen für Kategorien (FontAwesome oder SVG-URL)
+const categoryIcons = {
+ 'Philosophie': 'fa-solid fa-lightbulb',
+ 'Wissenschaft': 'fa-solid fa-atom',
+ 'Technologie': 'fa-solid fa-microchip',
+ 'Künste': 'fa-solid fa-palette',
+ 'Psychologie': 'fa-solid fa-brain'
+};
+
+// Farben für Kategorien (wie im Bild)
+const categoryColors = {
+ 'Philosophie': '#b71c1c', // Rot
+ 'Wissenschaft': '#f4b400', // Gelb
+ 'Technologie': '#0d47a1', // Blau
+ 'Künste': '#c2185b', // Pink
+ 'Psychologie': '#009688' // Türkis
+};
+
+// Initiale Mindmap-Daten (nur oberste Ebene, mit Icon und Farbe)
const mindmapData = {
nodes: [
+ {
+ id: 'center',
+ label: 'Wissenskarte',
+ isCenter: true,
+ color: '#f5f5f5',
+ icon: 'fa-solid fa-circle',
+ fontColor: '#222',
+ fontSize: 22
+ },
{
id: 'philosophy',
label: 'Philosophie',
@@ -112,7 +139,11 @@ const mindmapData = {
hasChildren: true,
expanded: false,
neuronSize: 8,
- neuronActivity: 0.8
+ neuronActivity: 0.8,
+ color: categoryColors['Philosophie'],
+ icon: categoryIcons['Philosophie'],
+ fontColor: '#fff',
+ fontSize: 18
},
{
id: 'science',
@@ -122,7 +153,11 @@ const mindmapData = {
hasChildren: true,
expanded: false,
neuronSize: 8,
- neuronActivity: 0.8
+ neuronActivity: 0.8,
+ color: categoryColors['Wissenschaft'],
+ icon: categoryIcons['Wissenschaft'],
+ fontColor: '#fff',
+ fontSize: 18
},
{
id: 'technology',
@@ -132,7 +167,11 @@ const mindmapData = {
hasChildren: true,
expanded: false,
neuronSize: 8,
- neuronActivity: 0.8
+ neuronActivity: 0.8,
+ color: categoryColors['Technologie'],
+ icon: categoryIcons['Technologie'],
+ fontColor: '#fff',
+ fontSize: 18
},
{
id: 'arts',
@@ -142,16 +181,18 @@ const mindmapData = {
hasChildren: true,
expanded: false,
neuronSize: 8,
- neuronActivity: 0.8
+ neuronActivity: 0.8,
+ color: categoryColors['Künste'],
+ icon: categoryIcons['Künste'],
+ fontColor: '#fff',
+ fontSize: 18
}
],
edges: [
- { source: 'philosophy', target: 'science', strength: 0.8 },
- { source: 'science', target: 'technology', strength: 0.8 },
- { source: 'technology', target: 'arts', strength: 0.6 },
- { source: 'arts', target: 'philosophy', strength: 0.6 },
- { source: 'philosophy', target: 'technology', strength: 0.4 },
- { source: 'science', target: 'arts', strength: 0.4 }
+ { source: 'center', target: 'philosophy', strength: 0.9 },
+ { source: 'center', target: 'science', strength: 0.9 },
+ { source: 'center', target: 'technology', strength: 0.9 },
+ { source: 'center', target: 'arts', strength: 0.9 }
]
};
@@ -187,7 +228,11 @@ document.addEventListener('DOMContentLoaded', function() {
hasChildren: node.hasChildren,
expanded: node.expanded,
neuronSize: node.neuronSize,
- neuronActivity: node.neuronActivity
+ neuronActivity: node.neuronActivity,
+ color: node.color,
+ icon: node.icon,
+ fontColor: node.fontColor,
+ fontSize: node.fontSize
}
})),
// Kanten
@@ -203,7 +248,7 @@ document.addEventListener('DOMContentLoaded', function() {
console.log('Initialisiere Cytoscape...');
- // Initialisiere Cytoscape mit neuronalem Design
+ // Initialisiere Cytoscape mit concentric/circle Layout und Icon-Overlay
window.cy = cytoscape({
container: cyContainer,
elements: elements,
@@ -213,90 +258,71 @@ document.addEventListener('DOMContentLoaded', function() {
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',
+ 'color': 'data(fontColor)',
'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,
+ '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.8,
+ 'border-opacity': 0.9,
'overlay-padding': 4,
'z-index': 10,
'shape': 'ellipse',
- 'background-opacity': 0.85,
- 'shadow-blur': 'mapData(neuronActivity, 0.3, 1, 10, 20)',
+ 'background-opacity': 0.95,
+ 'shadow-blur': 20,
'shadow-color': 'data(color)',
- 'shadow-opacity': 0.6,
+ 'shadow-opacity': 0.7,
'shadow-offset-x': 0,
- 'shadow-offset-y': 0
+ 'shadow-offset-y': 0,
+ 'text-wrap': 'wrap',
+ 'text-max-width': 90
}
},
{
- selector: 'node[!color]',
- style: {
- 'background-color': '#60a5fa'
+ selector: 'node[isCenter]','style': {
+ 'background-color': '#f5f5f5',
+ 'color': '#222',
+ 'font-size': 22,
+ 'border-width': 0,
+ 'width': 120,
+ 'height': 120
}
},
{
selector: 'node:selected',
style: {
'border-color': '#f59e42',
- 'border-width': 4,
+ 'border-width': 6,
'shadow-blur': 30,
- 'shadow-opacity': 0.8
+ 'shadow-opacity': 0.9
}
},
{
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',
+ 'width': 'mapData(strength, 0.2, 1, 3, 7)',
+ 'line-color': '#bdbdbd',
+ 'line-opacity': 0.7,
'curve-style': 'bezier',
- 'control-point-distances': [20, -20],
+ 'target-arrow-shape': 'none',
+ 'control-point-distances': [40, -40],
'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';
- }
- }
- },
- {
- selector: 'edge:selected',
- style: {
- 'width': 5,
- 'line-color': '#f59e42',
- 'target-arrow-color': '#f59e42',
- 'opacity': 1,
'line-style': 'solid'
}
}
],
layout: {
- name: 'cose',
- animate: true,
- animationDuration: 1000,
- nodeDimensionsIncludeLabels: true,
- padding: 100,
- spacingFactor: 1.8,
- randomize: false,
+ name: 'concentric',
fit: true,
- componentSpacing: 100,
- nodeRepulsion: 8000,
- edgeElasticity: 100,
- animate: true
+ padding: 60,
+ animate: true,
+ concentric: function(node) {
+ return node.data('isCenter') ? 2 : 1;
+ },
+ levelWidth: function() { return 1; }
}
});
@@ -346,16 +372,22 @@ document.addEventListener('DOMContentLoaded', function() {
await loadSubthemes(node);
}
});
-});
-// Kategorie-Farben definieren
-const categoryColors = {
- 'Philosophie': '#60a5fa',
- 'Wissenschaft': '#8b5cf6',
- 'Technologie': '#10b981',
- 'Künste': '#f59e0b',
- 'Psychologie': '#ef4444'
-};
+ // Nach dem Rendern: Icons als HTML-Overlay einfügen
+ 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);
+});
// Funktion zum Initialisieren des neuronalen Designs
function initializeNeuralDesign(cy) {
@@ -440,49 +472,53 @@ function initializeNeuralDesign(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,
+ 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
- }
- });
+ neuronActivity: node.neuronActivity,
+ color: node.color,
+ icon: node.icon,
+ fontColor: node.fontColor,
+ fontSize: node.fontSize
+ }
});
-
- // Neue Kanten hinzufügen
- mindmapData.edges.forEach(edge => {
- cy.add({
- group: 'edges',
- data: {
- source: edge.source,
- target: edge.target,
+ });
+
+ // Neue Kanten hinzufügen
+ mindmapData.edges.forEach(edge => {
+ cy.add({
+ group: 'edges',
+ data: {
+ source: edge.source,
+ target: edge.target,
strength: edge.strength
- }
- });
+ }
});
-
+ });
+
// Neuronales Design initialisieren
initializeNeuralDesign(cy);
-
- // Layout anwenden
- cy.layout({
- name: 'cose',
- animate: true,
+
+ // Layout anwenden
+ cy.layout({
+ name: 'cose',
+ animate: true,
animationDuration: 1000,
- nodeDimensionsIncludeLabels: true,
+ nodeDimensionsIncludeLabels: true,
padding: 100,
spacingFactor: 1.8,
randomize: false,
@@ -492,7 +528,7 @@ function updateMindmap() {
edgeElasticity: 100,
nestingFactor: 1.2,
gravity: 80
- }).run();
+ }).run();
}
/**
@@ -765,7 +801,7 @@ function createFlashContainer() {
container.className = 'fixed top-4 right-4 z-50 w-64';
document.body.appendChild(container);
return container;
-}
+}
// Funktion zum Laden der Subthemen
async function loadSubthemes(node) {
@@ -867,6 +903,20 @@ async function loadSubthemes(node) {
// 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');
@@ -942,5 +992,13 @@ style.textContent = `
.cy-container node:hover {
filter: brightness(1.2);
}
+
+ .cy-node-icon {
+ position: absolute;
+ pointer-events: none;
+ z-index: 1001;
+ color: #fff;
+ text-shadow: 0 2px 8px rgba(0,0,0,0.25);
+ }
`;
document.head.appendChild(style);
\ No newline at end of file