File size: 1,701 Bytes
5e1dfdc |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!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> |