From 1b00718938d8f4b5dd667ef3e3f373790358b679 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?=
 <rasul.sahibjanli@gmail.com>
Date: Wed, 6 Nov 2024 21:03:52 +0300
Subject: [PATCH] feat: set links in Map

---
 .../Graph/Connections/LineComponent.tsx       |  8 +---
 .../Universe/Graph/Connections/index.tsx      | 39 ++++++++++++-------
 src/components/Universe/Graph/index.tsx       |  9 +++--
 3 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/src/components/Universe/Graph/Connections/LineComponent.tsx b/src/components/Universe/Graph/Connections/LineComponent.tsx
index e563f6524..a26270268 100644
--- a/src/components/Universe/Graph/Connections/LineComponent.tsx
+++ b/src/components/Universe/Graph/Connections/LineComponent.tsx
@@ -11,8 +11,6 @@ type LineComponentProps = {
   position: LinkPosition
 }
 
-const VECTOR = new Vector3(0, 0, 0)
-
 // eslint-disable-next-line no-underscore-dangle
 const _LineComponent = forwardRef<Line2, LineComponentProps>(({ isSelected, position }, ref) => {
   useEffect(() => {
@@ -35,11 +33,7 @@ const _LineComponent = forwardRef<Line2, LineComponentProps>(({ isSelected, posi
       ref={ref}
       isLine2
       opacity={0.5}
-      points={
-        position
-          ? [new Vector3(position.sx, position.sy, position.sz), new Vector3(position.tx, position.ty, position.tz)]
-          : [VECTOR, VECTOR]
-      }
+      points={[new Vector3(position.sx, position.sy, position.sz), new Vector3(position.tx, position.ty, position.tz)]}
     />
   )
 })
diff --git a/src/components/Universe/Graph/Connections/index.tsx b/src/components/Universe/Graph/Connections/index.tsx
index 277552f21..a0553e3f6 100644
--- a/src/components/Universe/Graph/Connections/index.tsx
+++ b/src/components/Universe/Graph/Connections/index.tsx
@@ -9,7 +9,7 @@ import { LINE_WIDTH } from '../../constants'
 import { LineComponent } from './LineComponent'
 
 type Props = {
-  linksPosition: LinkPosition[]
+  linksPosition: Map<string, LinkPosition>
 }
 
 const LINE_TRANSFORM_DURATION = 0.5
@@ -19,7 +19,7 @@ export const Connections = memo(({ linksPosition }: Props) => {
   const { showSelectionGraph } = useGraphStore((s) => s)
   const selectedNode = useSelectedNode()
   const hoveredNode = useHoveredNode()
-  const lineRefs = useRef<Line2[]>([])
+  const lineRefs = useRef(new Map<string, Line2 | null>())
 
   useEffect(() => {
     const activeNode = hoveredNode || selectedNode
@@ -37,15 +37,13 @@ export const Connections = memo(({ linksPosition }: Props) => {
       return
     }
 
-    lineRefs.current.forEach((line, index) => {
-      if (data?.links[index].source === activeNode?.ref_id || data?.links[index].target === activeNode?.ref_id) {
-        gsap.to(line.material, {
-          linewidth: LINE_WIDTH * 2,
-          duration: LINE_TRANSFORM_DURATION,
-        })
-      } else {
+    lineRefs.current.forEach((line, refId) => {
+      if (line) {
+        const link = data?.links.find((l) => l.ref_id === refId)
+        const isActive = link && (link.source === activeNode.ref_id || link.target === activeNode.ref_id)
+
         gsap.to(line.material, {
-          linewidth: 0,
+          linewidth: isActive ? LINE_WIDTH * 2 : 0,
           duration: LINE_TRANSFORM_DURATION,
         })
       }
@@ -54,19 +52,30 @@ export const Connections = memo(({ linksPosition }: Props) => {
 
   return (
     <group name="simulation-3d-group__connections" visible={!showSelectionGraph || true}>
-      {data?.links.map((l: Link, index: number) => {
-        const isSelected = selectedNode?.ref_id === l.source || selectedNode?.ref_id === l.target
+      {data?.links.map((l: Link) => {
+        const isSelected = selectedNode?.ref_id === l.source || selectedNode?.ref_id === l.target // Adjust to match link with its position
 
-        // eslint-disable-next-line no-nested-ternary
+        const position = linksPosition.get(l.ref_id) || {
+          sx: 0,
+          sy: 0,
+          sz: 0,
+          tx: 0,
+          ty: 0,
+          tz: 0,
+        }
 
         return (
           <LineComponent
             key={l.ref_id}
             ref={(el) => {
-              lineRefs.current[index] = el as Line2
+              if (el) {
+                lineRefs.current.set(l.ref_id, el as Line2)
+              } else {
+                lineRefs.current.delete(l.ref_id)
+              }
             }}
             isSelected={isSelected}
-            position={linksPosition[index]}
+            position={position}
           />
         )
       })}
diff --git a/src/components/Universe/Graph/index.tsx b/src/components/Universe/Graph/index.tsx
index 7a9776abe..44388d71d 100644
--- a/src/components/Universe/Graph/index.tsx
+++ b/src/components/Universe/Graph/index.tsx
@@ -25,9 +25,10 @@ export const Graph = () => {
   const { dataInitial, isLoadingNew, isFetching, dataNew, resetDataNew } = useDataStore((s) => s)
   const groupRef = useRef<Group>(null)
   const cameraSettled = useRef<boolean>(false)
-  const linksPositionRef = useRef<LinkPosition[]>([])
   const { normalizedSchemasByType } = useSchemaStore((s) => s)
 
+  const linksPositionRef = useRef(new Map<string, LinkPosition>())
+
   const { setData, simulation, simulationCreate, simulationHelpers, graphStyle, setGraphRadius } = useGraphStore(
     (s) => s,
   )
@@ -115,6 +116,8 @@ export const Graph = () => {
         }
 
         if (grConnections) {
+          linksPositionRef.current.clear()
+
           grConnections.children.forEach((r, i) => {
             const link = dataInitial?.links[i]
             const Line = r as Line2
@@ -126,14 +129,14 @@ export const Graph = () => {
               const { x: sx, y: sy, z: sz } = sourceNode
               const { x: tx, y: ty, z: tz } = targetNode
 
-              linksPositionRef.current[i] = {
+              linksPositionRef.current.set(link.ref_id, {
                 sx,
                 sy,
                 sz,
                 tx,
                 ty,
                 tz,
-              }
+              })
 
               const lineColor = normalizedSchemasByType[sourceNode.node_type]?.primary_color || 'white'