Import source: app/src/components/knowledge-graph

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.

app/src/components/knowledge-graph.jsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useRef } from 'react';
+import * as d3 from 'd3';
+
+export function KnowledgeGraph({ data, width = 800, height = 600 }) {
+  const svgRef = useRef(null);
+
+  useEffect(() => {
+    if (!data || !svgRef.current) return;
+
+    const svg = d3.select(svgRef.current);
+    svg.selectAll("*").remove(); // clear previous graph
+
+    const simulation = d3.forceSimulation(data.nodes)
+      .force("link", d3.forceLink(data.links).id(d => d.id).distance(100))
+      .force("charge", d3.forceManyBody().strength(-300))
+      .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", Math.sqrt(2));
+
+    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.group === 1 ? "var(--primary-color)" : "var(--brand-muted)")
+      .call(drag(simulation));
+
+    const label = svg.append("g")
+      .attr("class", "labels")
+      .selectAll("text")
+      .data(data.nodes)
+      .join("text")
+      .attr("dy", -12)
+      .attr("dx", 0)
+      .attr("text-anchor", "middle")
+      .text(d => d.name)
+      .attr("font-size", "12px")
+      .attr("fill", "var(--text-color)");
+
+    node.append("title")
+      .text(d => d.name);
+
+    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);
+    }
+  }, [data, width, height]);
+
+  return (
+    <div style={{ overflow: 'hidden', borderRadius: '12px', border: '1px solid var(--border-color)', backgroundColor: 'var(--bg-surface)' }}>
+      <svg ref={svgRef} width={width} height={height} style={{ width: '100%', height: 'auto', display: 'block' }} viewBox={`0 0 ${width} ${height}`} />
+    </div>
+  );
+}