From b18c681552a9ebf6ce8ba7a2d5e58a89a63f1468 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Mon, 1 Dec 2025 23:22:53 +0700
Subject: [PATCH] feat: Refactor GraphView to include highlighted edges and
 connection counts for improved visualization and user interaction, enhancing
 the overall graph experience.

---
 frontend/src/GraphView.jsx | 48 ++++++++++++++++++++------------------
 1 file changed, 25 insertions(+), 23 deletions(-)

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 [];