diff --git a/frontend/src/GraphView.jsx b/frontend/src/GraphView.jsx index 9f0efa9..913befb 100644 --- a/frontend/src/GraphView.jsx +++ b/frontend/src/GraphView.jsx @@ -118,6 +118,31 @@ function GraphView({ servers, connections, onCreateConnection }) { setNodes(initialNodesData); }, [initialNodesData, setNodes]); + // Подсветка связей: вычисляем какие связи связаны с выделенным/выбранным узлом + // ВАЖНО: должно быть ПЕРЕД initialEdgesData, чтобы использоваться там + const highlightedEdges = useMemo(() => { + const nodeId = selectedNodeId || highlightedNodeId; + if (!nodeId) return new Set(); + const related = new Set(); + (connections || []).forEach((c, idx) => { + if (String(c.from) === nodeId || String(c.to) === nodeId) { + related.add(`${c.from}-${c.to}-${idx}`); + } + }); + return related; + }, [selectedNodeId, highlightedNodeId, connections]); + + // Счётчик связей для каждого сервера + // ВАЖНО: должно быть ПЕРЕД nodeTypes, чтобы использоваться там + const connectionCounts = useMemo(() => { + const counts = {}; + (servers || []).forEach((s) => { + const ip = String(s.ip); + counts[ip] = (connections || []).filter((c) => String(c.from) === ip || String(c.to) === ip).length; + }); + return counts; + }, [servers, connections]); + const initialEdgesData = useMemo(() => { return (connections || []).map((c, idx) => { const style = getTunnelStyle(c.tunnelType); @@ -159,29 +184,6 @@ function GraphView({ servers, connections, onCreateConnection }) { setEdges(initialEdgesData); }, [initialEdgesData, setEdges]); - // Подсветка связей: вычисляем какие связи связаны с выделенным/выбранным узлом - const highlightedEdges = useMemo(() => { - const nodeId = selectedNodeId || highlightedNodeId; - if (!nodeId) return new Set(); - const related = new Set(); - (connections || []).forEach((c, idx) => { - if (String(c.from) === nodeId || String(c.to) === nodeId) { - related.add(`${c.from}-${c.to}-${idx}`); - } - }); - return related; - }, [selectedNodeId, highlightedNodeId, connections]); - - // Счётчик связей для каждого сервера - const connectionCounts = useMemo(() => { - const counts = {}; - (servers || []).forEach((s) => { - const ip = String(s.ip); - counts[ip] = (connections || []).filter((c) => String(c.from) === ip || String(c.to) === ip).length; - }); - return counts; - }, [servers, connections]); - // Поиск сервера: фильтруем по IP, DNS, провайдеру const searchResults = useMemo(() => { if (!searchTerm.trim()) return [];