| <!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> |
