Knowledge Graph

1"use client";
2 
3import {
4	forwardRef,
5	useCallback,
6	useEffect,
7	useImperativeHandle,
8	useRef,
9	useState,
10} from "react";
11import * as d3 from "d3";
12import { cn } from "@/lib/utils";
13 
14// ============================================================================
15// Types
16// ============================================================================
17 
18export interface GraphNode extends d3.SimulationNodeDatum {
19	/** Unique identifier for the node */
20	id: string;
21	/** Display label for the node */
22	label: string;
23	/** Node type/category (used for coloring) */
24	type: string;
25	/** Optional node size (default: 20) */
26	size?: number;
27	/** Optional custom color */
28	color?: string;
29	/** Optional additional data */
30	data?: unknown;
31}
32 
33export interface GraphLink extends d3.SimulationLinkDatum<GraphNode> {
34	/** Source node ID or node reference */
35	source: string | GraphNode;
36	/** Target node ID or node reference */
37	target: string | GraphNode;
38	/** Optional relationship label */
39	label?: string;
40	/** Optional link strength (default: 1) */
41	strength?: number;
42}
43 
44export interface KnowledgeGraphProps {
45	/** Array of nodes to display */
46	nodes: GraphNode[];
47	/** Array of links connecting nodes */
48	links: GraphLink[];
49	/** Callback when a node is clicked */
50	onNodeClick?: (node: GraphNode) => void;
51	/** Callback when a node is hovered */
52	onNodeHover?: (node: GraphNode | null) => void;
53	/** Show legend for node types */
54	showLegend?: boolean;
55	/** Show link labels */
56	showLinkLabels?: boolean;
57	/** Center node ID (will be positioned in center) */
58	centerNodeId?: string;
59	/** Additional CSS classes */
60	className?: string;
61}
62 
63export interface KnowledgeGraphHandle {
64	/** Export the graph as SVG */
65	exportAsSVG: () => void;
66	/** Export the graph as PNG */
67	exportAsPNG: () => void;
68	/** Reset zoom to default */
69	resetZoom: () => void;
70}
71 
72// ============================================================================
73// Utility Functions
74// ============================================================================
75 
76/** Generate a deterministic color from a string */
77const stringToColor = (str: string): string => {
78	let hash = 0;
79	for (let i = 0; i < str.length; i++) {
80		const char = str.charCodeAt(i);
81		hash = (hash << 5) - hash + char;
82		hash = hash & hash;
83	}
84	const hue = Math.abs(hash) % 360;
85	const saturation = 65 + (Math.abs(hash) % 20);
86	const lightness = 50 + (Math.abs(hash) % 15);
87	return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
88};
89 
90// … truncated