104 lines
3.0 KiB
HTML
104 lines
3.0 KiB
HTML
|
|
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1 class="h2">// MEMORY_VISUALIZATION: {{ query or 'Recent' }}</h1>
|
|
<a href="/memory" class="btn btn-sm mc-btn-secondary">Back to Browser</a>
|
|
</div>
|
|
|
|
<div class="mc-card p-0" style="height: 70vh; position: relative; overflow: hidden;">
|
|
<svg id="memory-graph" style="width: 100%; height: 100%;"></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
<script>
|
|
const data = {
|
|
nodes: {{ nodes | tojson }},
|
|
links: {{ links | tojson }}
|
|
};
|
|
|
|
const svg = d3.select("#memory-graph");
|
|
const width = svg.node().getBoundingClientRect().width;
|
|
const height = svg.node().getBoundingClientRect().height;
|
|
|
|
const simulation = d3.forceSimulation(data.nodes)
|
|
.force("link", d3.forceLink(data.links).id(d => d.id).distance(100))
|
|
.force("charge", d3.forceManyBody().strength(-200))
|
|
.force("center", d3.forceCenter(width / 2, height / 2));
|
|
|
|
const link = svg.append("g")
|
|
.attr("stroke", "var(--border-color)")
|
|
.attr("stroke-opacity", 0.6)
|
|
.selectAll("line")
|
|
.data(data.links)
|
|
.join("line")
|
|
.attr("stroke-width", 1);
|
|
|
|
const node = svg.append("g")
|
|
.attr("stroke", "#fff")
|
|
.attr("stroke-width", 1.5)
|
|
.selectAll("circle")
|
|
.data(data.nodes)
|
|
.join("circle")
|
|
.attr("r", 8)
|
|
.attr("fill", d => d.type === 'fact' ? 'var(--accent-primary)' : 'var(--text-dim)')
|
|
.call(drag(simulation));
|
|
|
|
node.append("title")
|
|
.text(d => d.text);
|
|
|
|
const label = svg.append("g")
|
|
.selectAll("text")
|
|
.data(data.nodes)
|
|
.join("text")
|
|
.text(d => d.text.substring(0, 20))
|
|
.attr("font-size", "10px")
|
|
.attr("fill", "var(--text-bright)")
|
|
.attr("dx", 12)
|
|
.attr("dy", 4);
|
|
|
|
simulation.on("tick", () => {
|
|
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);
|
|
|
|
node
|
|
.attr("cx", d => d.x)
|
|
.attr("cy", d => d.y);
|
|
|
|
label
|
|
.attr("x", d => d.x)
|
|
.attr("y", d => d.y);
|
|
});
|
|
|
|
function drag(simulation) {
|
|
function dragstarted(event) {
|
|
if (!event.active) simulation.alphaTarget(0.3).restart();
|
|
event.subject.fx = event.subject.x;
|
|
event.subject.fy = event.subject.y;
|
|
}
|
|
|
|
function dragged(event) {
|
|
event.subject.fx = event.x;
|
|
event.subject.fy = event.y;
|
|
}
|
|
|
|
function dragended(event) {
|
|
if (!event.active) simulation.alphaTarget(0);
|
|
event.subject.fx = null;
|
|
event.subject.fy = null;
|
|
}
|
|
|
|
return d3.drag()
|
|
.on("start", dragstarted)
|
|
.on("drag", dragged)
|
|
.on("end", dragended);
|
|
}
|
|
</script>
|
|
{% endblock %}
|