|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="utf-8"> |
|
|
<title>Agentic MindMap</title> |
|
|
<style> |
|
|
body { background: url('/static/agentic_brain_background.png') center center no-repeat; background-size: cover; } |
|
|
body { margin: 0; } |
|
|
svg { width: 100vw; height: 100vh; background: #f5f5f5; } |
|
|
.node circle { fill: #6baed6; stroke: #2171b5; stroke-width: 1.5px; } |
|
|
.node text { font: 14px sans-serif; } |
|
|
.link { fill: none; stroke: #aaa; stroke-width: 1.5px; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<script src="https://d3js.org/d3.v7.min.js"></script> |
|
|
<script> |
|
|
const width = window.innerWidth, height = window.innerHeight; |
|
|
const svg = d3.select("body").append("svg").attr("viewBox", [0, 0, width, height]); |
|
|
|
|
|
d3.json("/api/agents/mindmap").then(data => { |
|
|
const root = d3.hierarchy(data); |
|
|
const treeLayout = d3.tree().size([width - 100, height - 100]); |
|
|
treeLayout(root); |
|
|
|
|
|
svg.selectAll('.link') |
|
|
.data(root.links()) |
|
|
.join('line') |
|
|
.attr('class', 'link') |
|
|
.attr('x1', d => d.source.x) |
|
|
.attr('y1', d => d.source.y) |
|
|
.attr('x2', d => d.target.x) |
|
|
.attr('y2', d => d.target.y); |
|
|
|
|
|
const node = svg.selectAll('.node') |
|
|
.data(root.descendants()) |
|
|
.join('g') |
|
|
.attr('class', 'node') |
|
|
.attr('transform', d => `translate(${d.x},${d.y})`) |
|
|
.on("click", d => alert("Trigger: " + d.data.name)); |
|
|
|
|
|
node.append('circle').attr('r', 25); |
|
|
node.append('text') |
|
|
.attr('dy', 5) |
|
|
.attr('text-anchor', 'middle') |
|
|
.text(d => d.data.name); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
