Node Graph

1'use client'
2 
3import * as React from 'react'
4import { cn } from '@/lib/utils'
5 
6export type NodeGraphVariant = 'DEFAULT' | 'ACTIVE' | 'WARNING' | 'CRITICAL'
7export type NodeStatus = 'ACTIVE' | 'OFFLINE' | 'WARNING' | 'CRITICAL' | 'NEUTRAL'
8 
9export interface NodeGraphNode {
10  id: string
11  label: string
12  x: number       // 0–100 coordinate space
13  y: number
14  status?: NodeStatus
15  sublabel?: string
16}
17 
18export interface NodeGraphEdge {
19  from: string
20  to: string
21  label?: string
22  animated?: boolean
23}
24 
25export interface NodeGraphProps extends React.HTMLAttributes<HTMLDivElement> {
26  nodes: NodeGraphNode[]
27  edges: NodeGraphEdge[]
28  variant?: NodeGraphVariant
29  title?: string
30  height?: number
31  directed?: boolean
32}
33 
34const VARIANT_COLORS: Record<NodeGraphVariant, string> = {
35  DEFAULT:  'var(--text-secondary)',
36  ACTIVE:   'var(--color-green)',
37  WARNING:  'var(--color-amber)',
38  CRITICAL: 'var(--color-red)',
39}
40 
41const STATUS_COLOR: Record<NodeStatus, string> = {
42  ACTIVE:   'var(--color-green)',
43  OFFLINE:  'var(--border)',
44  WARNING:  'var(--color-amber)',
45  CRITICAL: 'var(--color-red)',
46  NEUTRAL:  'var(--text-muted)',
47}
48 
49const NODE_W = 100
50const NODE_H = 36
51 
52const NodeGraph = React.forwardRef<HTMLDivElement, NodeGraphProps>(
53  (
54    {
55      className,
56      nodes,
57      edges,
58      variant  = 'ACTIVE',
59      title,
60      height   = 320,
61      directed = false,
62      style,
63      ...props
64    },
65    ref
66  ) => {
67    const containerRef = React.useRef<HTMLDivElement>(null)
68    const [svgW, setSvgW] = React.useState(600)
69    const [hovered, setHovered] = React.useState<string | null>(null)
70 
71    React.useEffect(() => {
72      if (!containerRef.current) return
73      const ro = new ResizeObserver(entries => {
74        setSvgW(entries[0].contentRect.width)
75      })
76      ro.observe(containerRef.current)
77      return () => ro.disconnect()
78    }, [])
79 
80    const color = VARIANT_COLORS[variant]
81    const markerId = `arrow-${variant}`
82 
83    function nodePx(node: NodeGraphNode) {
84      return (node.x / 100) * svgW
85    }
86 
87    function nodePy(node: NodeGraphNode) {
88      return (node.y / 100) * height
89    }
90 
91    function edgeEndpoints(fromNode: NodeGraphNode, toNode: NodeGraphNode) {
92      const fx = nodePx(fromNode)
93      const fy = nodePy(fromNode)
94      const tx = nodePx(toNode)
95      const ty = nodePy(toNode)
96      const dx = tx - fx
97      const dy = ty - fy
98      const dist = Math.sqrt(dx * dx + dy * dy)
99      if (dist < 1) return { x1: fx, y1: fy, x2: tx, y2: ty }
100 
101// … truncated