feat: add DiagramEditor page assembling all panels with auto-save and AI generation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
432
frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx
Normal file
432
frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx
Normal file
@@ -0,0 +1,432 @@
|
||||
import { useState, useCallback, useEffect, useRef } from 'react'
|
||||
import { useParams, useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
ReactFlowProvider,
|
||||
useNodesState,
|
||||
useEdgesState,
|
||||
addEdge,
|
||||
useReactFlow,
|
||||
type Node,
|
||||
type Edge,
|
||||
type Connection,
|
||||
} from '@xyflow/react'
|
||||
import '@xyflow/react/dist/style.css'
|
||||
|
||||
import { NetworkCanvas } from '@/components/network/NetworkCanvas'
|
||||
import { DiagramHeader } from '@/components/network/DiagramHeader'
|
||||
import { DeviceToolbar } from '@/components/network/panels/DeviceToolbar'
|
||||
import { PropertiesPanel } from '@/components/network/panels/PropertiesPanel'
|
||||
import { AIAssistPanel } from '@/components/network/panels/AIAssistPanel'
|
||||
import { networkDiagramsApi, deviceTypesApi } from '@/api'
|
||||
import { toast } from '@/lib/toast'
|
||||
import type { DeviceTypeResponse, DeviceProperties, AIGenerateResponse, DiagramEdge } from '@/types'
|
||||
import type { DeviceNodeData } from '@/components/network/nodes/DeviceNode'
|
||||
|
||||
function DiagramEditorInner() {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
const navigate = useNavigate()
|
||||
const { getNodes, fitView } = useReactFlow()
|
||||
|
||||
const [diagramId, setDiagramId] = useState<string | null>(id || null)
|
||||
const [name, setName] = useState('Untitled Diagram')
|
||||
const [clientName, setClientName] = useState<string | null>(null)
|
||||
const [assetName, setAssetName] = useState<string | null>(null)
|
||||
const [description, setDescription] = useState<string | null>(null)
|
||||
|
||||
const [nodes, setNodes, onNodesChange] = useNodesState([])
|
||||
const [edges, setEdges, onEdgesChange] = useEdgesState([])
|
||||
|
||||
const [selectedNode, setSelectedNode] = useState<Node | null>(null)
|
||||
const [selectedEdge, setSelectedEdge] = useState<Edge | null>(null)
|
||||
|
||||
const [isDirty, setIsDirty] = useState(false)
|
||||
const [isSaving, setIsSaving] = useState(false)
|
||||
const [lastSavedAt, setLastSavedAt] = useState<Date | null>(null)
|
||||
const isDirtyRef = useRef(false)
|
||||
const diagramIdRef = useRef<string | null>(id || null)
|
||||
|
||||
const [deviceTypes, setDeviceTypes] = useState<DeviceTypeResponse[]>([])
|
||||
const [loading, setLoading] = useState(!!id)
|
||||
|
||||
useEffect(() => { isDirtyRef.current = isDirty }, [isDirty])
|
||||
useEffect(() => { diagramIdRef.current = diagramId }, [diagramId])
|
||||
|
||||
const handleNodesChange: typeof onNodesChange = useCallback((changes) => {
|
||||
onNodesChange(changes)
|
||||
const hasRealChange = changes.some(c => c.type !== 'select')
|
||||
if (hasRealChange) setIsDirty(true)
|
||||
}, [onNodesChange])
|
||||
|
||||
const handleEdgesChange: typeof onEdgesChange = useCallback((changes) => {
|
||||
onEdgesChange(changes)
|
||||
const hasRealChange = changes.some(c => c.type !== 'select')
|
||||
if (hasRealChange) setIsDirty(true)
|
||||
}, [onEdgesChange])
|
||||
|
||||
const loadDeviceTypes = useCallback(async () => {
|
||||
try {
|
||||
const types = await deviceTypesApi.list()
|
||||
setDeviceTypes(types)
|
||||
} catch { /* ignore */ }
|
||||
}, [])
|
||||
|
||||
useEffect(() => { loadDeviceTypes() }, [loadDeviceTypes])
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return
|
||||
let cancelled = false
|
||||
;(async () => {
|
||||
try {
|
||||
const diagram = await networkDiagramsApi.get(id)
|
||||
if (cancelled) return
|
||||
setName(diagram.name)
|
||||
setClientName(diagram.client_name)
|
||||
setAssetName(diagram.asset_name)
|
||||
setDescription(diagram.description)
|
||||
setNodes(
|
||||
diagram.nodes.map(n => ({
|
||||
id: n.id,
|
||||
type: 'device',
|
||||
position: n.position,
|
||||
data: {
|
||||
label: n.label,
|
||||
deviceType: n.type,
|
||||
properties: n.properties,
|
||||
} satisfies DeviceNodeData,
|
||||
}))
|
||||
)
|
||||
setEdges(
|
||||
diagram.edges.map(e => ({
|
||||
id: e.id,
|
||||
source: e.source,
|
||||
target: e.target,
|
||||
type: 'connection',
|
||||
label: e.label || undefined,
|
||||
data: {
|
||||
connectionType: e.connectionType,
|
||||
speed: e.speed,
|
||||
notes: e.notes,
|
||||
},
|
||||
}))
|
||||
)
|
||||
setLastSavedAt(new Date(diagram.updated_at))
|
||||
} catch {
|
||||
toast.error('Failed to load diagram')
|
||||
navigate('/network-diagrams')
|
||||
} finally {
|
||||
if (!cancelled) setLoading(false)
|
||||
}
|
||||
})()
|
||||
return () => { cancelled = true }
|
||||
}, [id, navigate, setNodes, setEdges])
|
||||
|
||||
const serializeNodes = useCallback(() => {
|
||||
return getNodes().map(n => {
|
||||
const data = n.data as unknown as DeviceNodeData
|
||||
return {
|
||||
id: n.id,
|
||||
type: data.deviceType,
|
||||
label: data.label,
|
||||
position: n.position,
|
||||
properties: data.properties,
|
||||
}
|
||||
})
|
||||
}, [getNodes])
|
||||
|
||||
const serializeEdges = useCallback((): DiagramEdge[] => {
|
||||
return edges.map(e => ({
|
||||
id: e.id,
|
||||
source: e.source,
|
||||
target: e.target,
|
||||
label: (e.label as string) || null,
|
||||
connectionType: (e.data as Record<string, unknown>)?.connectionType as string || 'ethernet',
|
||||
speed: (e.data as Record<string, unknown>)?.speed as string || null,
|
||||
notes: (e.data as Record<string, unknown>)?.notes as string || null,
|
||||
}))
|
||||
}, [edges])
|
||||
|
||||
const handleSave = useCallback(async () => {
|
||||
setIsSaving(true)
|
||||
try {
|
||||
const payload = {
|
||||
name,
|
||||
client_name: clientName,
|
||||
asset_name: assetName,
|
||||
description,
|
||||
nodes: serializeNodes(),
|
||||
edges: serializeEdges(),
|
||||
}
|
||||
if (diagramIdRef.current) {
|
||||
await networkDiagramsApi.update(diagramIdRef.current, payload)
|
||||
} else {
|
||||
const created = await networkDiagramsApi.create(payload)
|
||||
setDiagramId(created.id)
|
||||
navigate(`/network-diagrams/${created.id}`, { replace: true })
|
||||
}
|
||||
setIsDirty(false)
|
||||
setLastSavedAt(new Date())
|
||||
} catch {
|
||||
toast.error('Failed to save diagram')
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
}, [name, clientName, assetName, description, serializeNodes, serializeEdges, navigate])
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
if (isDirtyRef.current && diagramIdRef.current) {
|
||||
handleSave()
|
||||
}
|
||||
}, 30_000)
|
||||
return () => clearInterval(interval)
|
||||
}, [handleSave])
|
||||
|
||||
const onConnect = useCallback((connection: Connection) => {
|
||||
setEdges(eds => addEdge({
|
||||
...connection,
|
||||
type: 'connection',
|
||||
data: { connectionType: 'ethernet' },
|
||||
}, eds))
|
||||
setIsDirty(true)
|
||||
}, [setEdges])
|
||||
|
||||
const onDragOver = useCallback((event: React.DragEvent) => {
|
||||
event.preventDefault()
|
||||
event.dataTransfer.dropEffect = 'move'
|
||||
}, [])
|
||||
|
||||
const onDrop = useCallback((event: React.DragEvent) => {
|
||||
event.preventDefault()
|
||||
const raw = event.dataTransfer.getData('application/reactflow-device')
|
||||
if (!raw) return
|
||||
|
||||
const { slug, label, category } = JSON.parse(raw) as { slug: string; label: string; category: string }
|
||||
const reactFlowBounds = (event.target as HTMLElement).closest('.react-flow')?.getBoundingClientRect()
|
||||
if (!reactFlowBounds) return
|
||||
|
||||
const position = {
|
||||
x: event.clientX - reactFlowBounds.left,
|
||||
y: event.clientY - reactFlowBounds.top,
|
||||
}
|
||||
|
||||
const newNode: Node = {
|
||||
id: `device-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
|
||||
type: 'device',
|
||||
position,
|
||||
data: {
|
||||
label,
|
||||
deviceType: slug,
|
||||
category,
|
||||
properties: {
|
||||
hostname: null,
|
||||
ip: null,
|
||||
subnet: null,
|
||||
vendor: null,
|
||||
model: null,
|
||||
role: null,
|
||||
vlan: null,
|
||||
notes: null,
|
||||
status: 'unknown',
|
||||
} satisfies DeviceProperties,
|
||||
} satisfies DeviceNodeData,
|
||||
}
|
||||
setNodes(nds => [...nds, newNode])
|
||||
setIsDirty(true)
|
||||
}, [setNodes])
|
||||
|
||||
const handleNodeUpdate = useCallback((nodeId: string, updates: Partial<DeviceNodeData>) => {
|
||||
setNodes(nds => nds.map(n => {
|
||||
if (n.id !== nodeId) return n
|
||||
return { ...n, data: { ...n.data, ...updates } }
|
||||
}))
|
||||
setIsDirty(true)
|
||||
}, [setNodes])
|
||||
|
||||
const handleEdgeUpdate = useCallback((edgeId: string, updates: Partial<DiagramEdge>) => {
|
||||
setEdges(eds => eds.map(e => {
|
||||
if (e.id !== edgeId) return e
|
||||
return {
|
||||
...e,
|
||||
label: updates.label !== undefined ? (updates.label || undefined) : e.label,
|
||||
data: {
|
||||
...(e.data || {}),
|
||||
...(updates.connectionType !== undefined ? { connectionType: updates.connectionType } : {}),
|
||||
...(updates.speed !== undefined ? { speed: updates.speed } : {}),
|
||||
...(updates.notes !== undefined ? { notes: updates.notes } : {}),
|
||||
},
|
||||
}
|
||||
}))
|
||||
setSelectedEdge(prev => {
|
||||
if (!prev || prev.id !== edgeId) return prev
|
||||
return {
|
||||
...prev,
|
||||
label: updates.label !== undefined ? (updates.label || undefined) : prev.label,
|
||||
data: {
|
||||
...(prev.data || {}),
|
||||
...(updates.connectionType !== undefined ? { connectionType: updates.connectionType } : {}),
|
||||
...(updates.speed !== undefined ? { speed: updates.speed } : {}),
|
||||
...(updates.notes !== undefined ? { notes: updates.notes } : {}),
|
||||
},
|
||||
}
|
||||
})
|
||||
setIsDirty(true)
|
||||
}, [setEdges])
|
||||
|
||||
const handleDeleteNode = useCallback((nodeId: string) => {
|
||||
setNodes(nds => nds.filter(n => n.id !== nodeId))
|
||||
setEdges(eds => eds.filter(e => e.source !== nodeId && e.target !== nodeId))
|
||||
setSelectedNode(null)
|
||||
setIsDirty(true)
|
||||
}, [setNodes, setEdges])
|
||||
|
||||
const handleDeleteEdge = useCallback((edgeId: string) => {
|
||||
setEdges(eds => eds.filter(e => e.id !== edgeId))
|
||||
setSelectedEdge(null)
|
||||
setIsDirty(true)
|
||||
}, [setEdges])
|
||||
|
||||
const handleAIGenerate = useCallback((result: AIGenerateResponse, mode: 'replace' | 'merge') => {
|
||||
const newNodes: Node[] = result.nodes.map(n => ({
|
||||
id: n.id,
|
||||
type: 'device',
|
||||
position: n.position,
|
||||
data: {
|
||||
label: n.label,
|
||||
deviceType: n.type,
|
||||
properties: n.properties,
|
||||
} satisfies DeviceNodeData,
|
||||
}))
|
||||
|
||||
const newEdges: Edge[] = result.edges.map(e => ({
|
||||
id: e.id,
|
||||
source: e.source,
|
||||
target: e.target,
|
||||
type: 'connection',
|
||||
label: e.label || undefined,
|
||||
data: { connectionType: e.connectionType, speed: e.speed, notes: e.notes },
|
||||
}))
|
||||
|
||||
if (mode === 'replace') {
|
||||
setNodes(newNodes)
|
||||
setEdges(newEdges)
|
||||
} else {
|
||||
setNodes(nds => [...nds, ...newNodes])
|
||||
setEdges(eds => [...eds, ...newEdges])
|
||||
}
|
||||
|
||||
if (result.suggestedName && !diagramId) {
|
||||
setName(result.suggestedName)
|
||||
toast.success(`Generated: ${result.suggestedName}`)
|
||||
} else {
|
||||
toast.success('Diagram generated')
|
||||
}
|
||||
|
||||
if (result.notes) {
|
||||
toast.info(result.notes)
|
||||
}
|
||||
|
||||
setIsDirty(true)
|
||||
setTimeout(() => fitView({ padding: 0.2 }), 100)
|
||||
}, [setNodes, setEdges, diagramId, fitView])
|
||||
|
||||
const getExistingBounds = useCallback(() => {
|
||||
const currentNodes = getNodes()
|
||||
if (currentNodes.length === 0) return null
|
||||
let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity
|
||||
for (const n of currentNodes) {
|
||||
minX = Math.min(minX, n.position.x)
|
||||
maxX = Math.max(maxX, n.position.x + 120)
|
||||
minY = Math.min(minY, n.position.y)
|
||||
maxY = Math.max(maxY, n.position.y + 80)
|
||||
}
|
||||
return { minX, maxX, minY, maxY }
|
||||
}, [getNodes])
|
||||
|
||||
const handleExportPng = useCallback(() => {
|
||||
toast.info('PNG export — use your browser\'s screenshot tool or Print > Save as Image for now')
|
||||
}, [])
|
||||
|
||||
const handleExportPdf = useCallback(() => {
|
||||
window.print()
|
||||
}, [])
|
||||
|
||||
const handleExportJson = useCallback(async () => {
|
||||
if (!diagramId) return
|
||||
try {
|
||||
const data = await networkDiagramsApi.exportJson(diagramId)
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `${name.replace(/[^a-zA-Z0-9-_ ]/g, '')}.json`
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
} catch {
|
||||
toast.error('Failed to export diagram')
|
||||
}
|
||||
}, [diagramId, name])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<div className="h-6 w-6 animate-spin rounded-full border-2 border-accent border-t-transparent" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<DiagramHeader
|
||||
name={name}
|
||||
clientName={clientName}
|
||||
isSaving={isSaving}
|
||||
lastSavedAt={lastSavedAt}
|
||||
diagramId={diagramId}
|
||||
onNameChange={n => { setName(n); setIsDirty(true) }}
|
||||
onSave={handleSave}
|
||||
onExportPng={handleExportPng}
|
||||
onExportPdf={handleExportPdf}
|
||||
onExportJson={handleExportJson}
|
||||
/>
|
||||
<div className="flex flex-1 min-h-0">
|
||||
<DeviceToolbar deviceTypes={deviceTypes} onDeviceTypesChange={loadDeviceTypes} />
|
||||
<div className="flex flex-1 flex-col min-h-0">
|
||||
<div className="flex-1 min-h-0">
|
||||
<NetworkCanvas
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={handleNodesChange}
|
||||
onEdgesChange={handleEdgesChange}
|
||||
onConnect={onConnect}
|
||||
onNodeSelect={setSelectedNode}
|
||||
onEdgeSelect={setSelectedEdge}
|
||||
onDrop={onDrop}
|
||||
onDragOver={onDragOver}
|
||||
/>
|
||||
</div>
|
||||
<AIAssistPanel
|
||||
onGenerate={handleAIGenerate}
|
||||
getExistingBounds={getExistingBounds}
|
||||
hasNodes={nodes.length > 0}
|
||||
/>
|
||||
</div>
|
||||
<PropertiesPanel
|
||||
selectedNode={selectedNode}
|
||||
selectedEdge={selectedEdge}
|
||||
onNodeUpdate={handleNodeUpdate}
|
||||
onEdgeUpdate={handleEdgeUpdate}
|
||||
onDeleteNode={handleDeleteNode}
|
||||
onDeleteEdge={handleDeleteEdge}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function DiagramEditor() {
|
||||
return (
|
||||
<ReactFlowProvider>
|
||||
<DiagramEditorInner />
|
||||
</ReactFlowProvider>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user