From 5e5fa9583afe234233fe2f72f9c6700775d90bbd Mon Sep 17 00:00:00 2001
From: Shoaibdev7 <shoaibdev7@gmail.com>
Date: Wed, 2 Oct 2024 18:52:51 +0500
Subject: [PATCH 1/2] fix(graph): flashing graph

---
 .../Universe/Graph/Connections/index.tsx      | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/components/Universe/Graph/Connections/index.tsx b/src/components/Universe/Graph/Connections/index.tsx
index f4091f123..024930422 100644
--- a/src/components/Universe/Graph/Connections/index.tsx
+++ b/src/components/Universe/Graph/Connections/index.tsx
@@ -39,6 +39,25 @@ export const Connections = memo(({ linksPositions }: Props) => {
     })
   }, [data, selectedNode])
 
+  useEffect(() => {
+    const newLinks = linksPositions.slice(lineRefs.current.length)
+
+    newLinks.forEach((_, index) => {
+      const line = lineRefs.current[lineRefs.current.length - newLinks.length + index]
+
+      if (line) {
+        gsap.fromTo(
+          line.material,
+          { linewidth: 5 },
+          {
+            linewidth: 2,
+            duration: 1,
+          },
+        )
+      }
+    })
+  }, [linksPositions])
+
   return (
     <group name="simulation-3d-group__connections">
       {data?.links.map((l: Link, index) => {

From 17231f2b21dc3605a14c8a3cb36519a8f692bd2b Mon Sep 17 00:00:00 2001
From: Shoaibdev7 <shoaibdev7@gmail.com>
Date: Wed, 2 Oct 2024 22:13:26 +0500
Subject: [PATCH 2/2] fix(graph): flashing graph

---
 .../Graph/Connections/LineComponent.tsx       | 49 +++++++++++++++
 .../Universe/Graph/Connections/index.tsx      | 60 ++++---------------
 2 files changed, 60 insertions(+), 49 deletions(-)
 create mode 100644 src/components/Universe/Graph/Connections/LineComponent.tsx

diff --git a/src/components/Universe/Graph/Connections/LineComponent.tsx b/src/components/Universe/Graph/Connections/LineComponent.tsx
new file mode 100644
index 000000000..027ff1da7
--- /dev/null
+++ b/src/components/Universe/Graph/Connections/LineComponent.tsx
@@ -0,0 +1,49 @@
+import { Line } from '@react-three/drei'
+import gsap from 'gsap'
+import { forwardRef, useEffect } from 'react'
+import { Vector3 } from 'three'
+import { Line2 } from 'three-stdlib'
+
+type LineComponentProps = {
+  source: Vector3
+  target: Vector3
+  isSelected: boolean
+  lineWidth: number
+  visible: boolean
+}
+
+const LineComponent = forwardRef<Line2, LineComponentProps>(
+  ({ source, target, isSelected, lineWidth, visible }, ref) => {
+    useEffect(() => {
+      const line = (ref as React.MutableRefObject<Line2 | null>).current
+
+      if (line) {
+        gsap.fromTo(
+          line.material,
+          { linewidth: 5 },
+          {
+            linewidth: isSelected ? 2 : lineWidth,
+            duration: 1,
+          },
+        )
+      }
+    }, [isSelected, lineWidth, ref])
+
+    return (
+      <Line
+        ref={ref}
+        color="rgba(136, 136, 136, 1)"
+        isLine2
+        lineWidth={1}
+        opacity={1}
+        points={[source, target]}
+        transparent
+        visible={visible}
+      />
+    )
+  },
+)
+
+LineComponent.displayName = 'LineComponent'
+
+export default LineComponent
diff --git a/src/components/Universe/Graph/Connections/index.tsx b/src/components/Universe/Graph/Connections/index.tsx
index 024930422..5d2b06930 100644
--- a/src/components/Universe/Graph/Connections/index.tsx
+++ b/src/components/Universe/Graph/Connections/index.tsx
@@ -1,12 +1,11 @@
-import { Line } from '@react-three/drei'
-import gsap from 'gsap'
-import { memo, useEffect, useRef } from 'react'
+import { memo, useRef } from 'react'
 import { Vector3 } from 'three'
 import { Line2 } from 'three-stdlib'
 import { useDataStore } from '~/stores/useDataStore'
 import { useGraphStore, useSelectedNode } from '~/stores/useGraphStore'
 import { Link } from '~/types'
 import { LinkPosition } from '..'
+import LineComponent from './LineComponent'
 
 type Props = {
   linksPositions: LinkPosition[]
@@ -19,45 +18,6 @@ export const Connections = memo(({ linksPositions }: Props) => {
 
   const lineRefs = useRef<Line2[]>([])
 
-  useEffect(() => {
-    lineRefs.current.forEach((line, index) => {
-      if (line) {
-        const lineWidth = selectedNode ? 0 : 0.5
-
-        const isSelected =
-          selectedNode?.ref_id === data?.links[index].source || selectedNode?.ref_id === data?.links[index].target
-
-        gsap.fromTo(
-          line.material,
-          { linewidth: 5 },
-          {
-            linewidth: isSelected ? 2 : lineWidth,
-            duration: 1,
-          },
-        )
-      }
-    })
-  }, [data, selectedNode])
-
-  useEffect(() => {
-    const newLinks = linksPositions.slice(lineRefs.current.length)
-
-    newLinks.forEach((_, index) => {
-      const line = lineRefs.current[lineRefs.current.length - newLinks.length + index]
-
-      if (line) {
-        gsap.fromTo(
-          line.material,
-          { linewidth: 5 },
-          {
-            linewidth: 2,
-            duration: 1,
-          },
-        )
-      }
-    })
-  }, [linksPositions])
-
   return (
     <group name="simulation-3d-group__connections">
       {data?.links.map((l: Link, index) => {
@@ -73,18 +33,20 @@ export const Connections = memo(({ linksPositions }: Props) => {
           linksPositions[index]?.tz || 0,
         )
 
+        const isSelected = selectedNode?.ref_id === l.source || selectedNode?.ref_id === l.target
+
+        const lineWidth = selectedNode ? 0 : 0.5
+
         return (
-          <Line
+          <LineComponent
             key={l.ref_id}
             ref={(el) => {
               lineRefs.current[index] = el as Line2
             }}
-            color="rgba(136, 136, 136, 1)"
-            isLine2
-            lineWidth={1}
-            opacity={1}
-            points={[source, target]}
-            transparent
+            isSelected={isSelected}
+            lineWidth={lineWidth}
+            source={source}
+            target={target}
             visible={!showSelectionGraph}
           />
         )