feat(#72): implement interactive graph visualization component

- Create KnowledgeGraphViewer component with @xyflow/react
- Implement three layout types: force-directed, hierarchical (ELK), circular
- Add node sizing based on connection count (40px-120px range)
- Apply PDA-friendly status colors (green=published, blue=draft, gray=archived)
- Highlight orphan nodes with distinct color
- Add interactive features: zoom, pan, click-to-navigate
- Implement filters: status, tags, show/hide orphans
- Add statistics display and legend panel
- Create comprehensive test suite (16 tests, all passing)
- Add fetchKnowledgeGraph API function
- Create /knowledge/graph page
- Performance tested with 500+ nodes
- All quality gates passed (tests, typecheck, lint)

Refs #72

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Jason Woltje
2026-02-02 15:38:16 -06:00
parent 5d348526de
commit 0e64dc8525
28 changed files with 1590 additions and 0 deletions

View File

@@ -0,0 +1,5 @@
import { KnowledgeGraphViewer } from "@/components/knowledge/KnowledgeGraphViewer";
export default function KnowledgeGraphPage(): React.JSX.Element {
return <KnowledgeGraphViewer />;
}