Knowledge Graph

import { KnowledgeGraph } from "@/components/ui/knowledge-graph";

const nodes = [
  { id: "1", label: "React", type: "framework" },
  { id: "2", label: "JavaScript", type: "language" },
  { id: "3", label: "TypeScript", type: "language" },
  { id: "4", label: "Next.js", type: "framework" },
];

const links = [
  { source: "1", target: "2", label: "uses" },
  { source: "4", target: "1", label: "built on" },
  { source: "1", target: "3", label: "supports" },
];

export default function Example() {
  return (
    <div className="h-[600px] w-full">
      <KnowledgeGraph 
        nodes={nodes} 
        links={links}
        onNodeClick={(node) => console.log('Clicked:', node)}
      />
    </div>
  );
}

import { useRef } from "react";
import { KnowledgeGraph, KnowledgeGraphHandle } from "@/components/ui/knowledge-graph";

export default function Example() {
  const graphRef = useRef<KnowledgeGraphHandle>(null);

  return (
    <>
      <div className="flex gap-2 mb-4">
        <button onClick={() => graphRef.current?.exportAsSVG()}>
          Export as SVG
        </button>
        <button onClick={() => graphRef.current?.exportAsPNG()}>
          Export as PNG
        </button>
        <button onClick={() => graphRef.current?.resetZoom()}>
          Reset Zoom
        </button>
      </div>
      <KnowledgeGraph ref={graphRef} nodes={nodes} links={links} />
    </>
  );
}

<KnowledgeGraph 
  nodes={nodes} 
  links={links}
  centerNodeId="main-concept"
/>

const nodes = [
  { 
    id: "1", 
    label: "Important", 
    type: "main",
    size: 30,  // Larger node
    color: "#ef4444"  // Custom color
  },
  { 
    id: "2", 
    label: "Detail", 
    type: "secondary",
    size: 15  // Smaller node
  },
];

const links = [
  { 
    source: "1", 
    target: "2", 
    label: "contains",
    strength: 0.5  // Weaker connection
  },
];

interface GraphNode {
  id: string;           // Unique identifier
  label: string;        // Display name
  type: string;         // Category (affects color)
  size?: number;        // Node radius (default: 20)
  color?: string;       // Custom color override
  data?: unknown;       // Additional metadata
}

interface GraphLink {
  source: string;       // Source node ID
  target: string;       // Target node ID
  label?: string;       // Relationship label
  strength?: number;    // Connection strength (default: 1)
}