mjasin/Nexus.Reader
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement dynamic knowledge graph updates and state management services

Browse Source
This commit is contained in:
Marek Jaisński
2026-04-26 14:53:48 +02:00
parent 412320980f
commit 7859c9806f
30 changed files with 668 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/NexusReader.UI.Shared/wwwroot/js/knowledgeGraph.js
+138 -79
View File
@@ -4,12 +4,15 @@ let simulation;
let zoomBehavior;
let svgElement;
let node, link, rootGroup, badge, width, height, currentDotNetHelper;
export function mount(containerId, data, dotNetHelper) {
const container = document.getElementById(containerId);
if (!container) return;
const width = container.clientWidth || 400;
const height = container.clientHeight || 400;
currentDotNetHelper = dotNetHelper;
width = container.clientWidth || 400;
height = container.clientHeight || 400;
// Create SVG
svgElement = d3.select(container).append("svg")
@@ -28,12 +31,17 @@ export function mount(containerId, data, dotNetHelper) {
radialGradient.append("stop").attr("offset", "100%").attr("stop-color", "var(--nexus-neon)").attr("stop-opacity", 0);
// Root Group for Zoom
const rootGroup = svgElement.append("g").attr("class", "zoom-containment");
rootGroup = svgElement.append("g").attr("class", "zoom-containment");
// Container groups for links and nodes to keep order (links below nodes)
rootGroup.append("g").attr("class", "links-layer");
rootGroup.append("g").attr("class", "nodes-layer");
// Badge Element (TU JESTEŚ)
const badge = rootGroup.append("g")
badge = rootGroup.append("g")
.attr("class", "active-badge")
.style("display", "none");
.style("display", "none")
.style("pointer-events", "none");
badge.append("rect")
.attr("x", -35)
@@ -53,92 +61,120 @@ export function mount(containerId, data, dotNetHelper) {
// Attach Zoom Behavior
zoomBehavior = d3.zoom()
.scaleExtent([0.5, 4])
.scaleExtent([0.3, 4])
.on("zoom", (e) => rootGroup.attr("transform", e.transform));
// Apply zoom but disable wheel interaction
svgElement.call(zoomBehavior)
.on("wheel.zoom", null);
svgElement.call(zoomBehavior).on("wheel.zoom", null);
// Subtle Link Distance & Charge
simulation = d3.forceSimulation(data.nodes)
.force("link", d3.forceLink(data.links).id(d => d.id).distance(100))
.force("charge", d3.forceManyBody().strength(-300))
simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(d => d.id).distance(120))
.force("charge", d3.forceManyBody().strength(-400))
.force("center", d3.forceCenter(width / 2, height / 2))
.force("collide", d3.forceCollide().radius(40));
// Links
const link = rootGroup.append("g")
.selectAll("path")
.data(data.links)
.join("path")
.attr("stroke", "rgba(255,255,255,0.1)")
.attr("fill", "none")
.attr("stroke-width", 1.5);
// Nodes
const node = rootGroup.append("g")
.selectAll("g")
.data(data.nodes)
.join("g")
.style("cursor", "pointer")
.on("click", (e, d) => {
// Remove active state from all, add to clicked
node.selectAll(".node-pill").classed("nexus-node-active", false);
d3.select(e.currentTarget).select(".node-pill").classed("nexus-node-active", true);
// Show badge
badge.style("display", "block").datum(d);
dotNetHelper.invokeMethodAsync('OnNodeClicked', d.id);
})
.call(drag(simulation));
// Outer glow for nodes
node.append("circle")
.attr("r", 30)
.attr("fill", "url(#nebulaGlow)")
.attr("opacity", d => d.id === 'root' ? 0.6 : 0.2);
// Pill shape
node.append("rect")
.attr("class", "node-pill")
.attr("x", d => -(d.label.length * 4 + 10))
.attr("y", -12)
.attr("width", d => d.label.length * 8 + 20)
.attr("height", 24)
.attr("rx", 12)
.attr("fill", "rgba(30, 30, 30, 0.8)")
.attr("stroke", "rgba(255, 255, 255, 0.1)")
.attr("stroke-width", 1);
// Labels
node.append("text")
.text(d => d.label)
.attr("text-anchor", "middle")
.attr("y", 4)
.attr("fill", "#ccc")
.attr("font-family", "var(--nexus-font-sans)")
.attr("font-size", "0.8rem");
.force("collide", d3.forceCollide().radius(50));
simulation.on("tick", () => {
link.attr("d", d => {
const dx = d.target.x - d.source.x;
const dy = d.target.y - d.source.y;
const dr = Math.sqrt(dx * dx + dy * dy);
return `M${d.source.x},${d.source.y}A${dr},${dr} 0 0,1 ${d.target.x},${d.target.y}`;
});
if (link) {
link.attr("d", d => {
const dx = d.target.x - d.source.x;
const dy = d.target.y - d.source.y;
const dr = Math.sqrt(dx * dx + dy * dy);
return `M${d.source.x},${d.source.y}A${dr},${dr} 0 0,1 ${d.target.x},${d.target.y}`;
});
}
node.attr("transform", d => `translate(${d.x},${d.y})`);
if (node) {
node.attr("transform", d => `translate(${d.x},${d.y})`);
}
const activeData = badge.datum();
if (activeData) {
badge.attr("transform", `translate(${activeData.x},${activeData.y})`);
if (badge && badge.style("display") !== "none") {
const activeData = badge.datum();
if (activeData) {
badge.attr("transform", `translate(${activeData.x},${activeData.y})`);
}
}
});
updateData(data);
}
export function updateData(data) {
if (!simulation || !rootGroup) return;
// Keep existing node positions if they match by ID
const oldNodes = new Map(simulation.nodes().map(d => [d.id, d]));
data.nodes.forEach(d => {
if (oldNodes.has(d.id)) {
const old = oldNodes.get(d.id);
d.x = old.x;
d.y = old.y;
d.vx = old.vx;
d.vy = old.vy;
}
});
// Update Links
link = rootGroup.select(".links-layer")
.selectAll("path")
.data(data.links, d => d.source + "-" + d.target)
.join(
enter => enter.append("path")
.attr("stroke", "rgba(255,255,255,0.05)")
.attr("fill", "none")
.attr("stroke-width", 1.5)
.call(e => e.transition().duration(500).attr("stroke", "rgba(255,255,255,0.1)")),
update => update,
exit => exit.remove()
);
// Update Nodes
node = rootGroup.select(".nodes-layer")
.selectAll("g.node-group")
.data(data.nodes, d => d.id)
.join(
enter => {
const g = enter.append("g")
.attr("class", "node-group")
.style("cursor", "pointer")
.on("click", (e, d) => {
currentDotNetHelper.invokeMethodAsync('OnNodeClicked', d.id);
setActiveNode(d.id);
})
.call(drag(simulation));
g.append("circle")
.attr("r", 30)
.attr("fill", "url(#nebulaGlow)")
.attr("opacity", 0)
.transition().duration(1000).attr("opacity", d => d.group === 'current' ? 0.6 : 0.2);
g.append("rect")
.attr("class", "node-pill")
.attr("x", d => -(d.label.length * 4 + 10))
.attr("y", -12)
.attr("width", d => d.label.length * 8 + 20)
.attr("height", 24)
.attr("rx", 12)
.attr("fill", "rgba(20, 20, 20, 0.9)")
.attr("stroke", "rgba(255, 255, 255, 0.1)")
.attr("stroke-width", 1);
g.append("text")
.text(d => d.label)
.attr("text-anchor", "middle")
.attr("y", 4)
.attr("fill", "#ccc")
.attr("font-size", "0.8rem");
return g;
},
update => update,
exit => exit.remove()
);
simulation.nodes(data.nodes);
simulation.force("link").links(data.links);
simulation.alpha(0.5).restart();
}
function drag(simulation) {
function dragstarted(event) {
@@ -161,6 +197,29 @@ function drag(simulation) {
.on("end", dragended);
}
export function setActiveNode(nodeId) {
if (!svgElement || !node) return;
const targetNode = node.filter(d => d.id === nodeId);
if (targetNode.empty()) return;
const d = targetNode.datum();
// Reset all active classes
rootGroup.selectAll(".node-pill").classed("nexus-node-active", false);
targetNode.select(".node-pill").classed("nexus-node-active", true);
// Position badge
badge.style("display", "block").datum(d);
badge.attr("transform", `translate(${d.x},${d.y})`);
// Smooth transition
svgElement.transition().duration(1000).call(
zoomBehavior.transform,
d3.zoomIdentity.translate(width / 2, height / 2).scale(1.2).translate(-d.x, -d.y)
);
}
export function unmount(containerId) {
if (simulation) {
simulation.stop();