[RealtimeGraph] - Flashing node edges

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

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,26 +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])
-
   return (
     <group name="simulation-3d-group__connections">
       {data?.links.map((l: Link, index) => {
@@ -54,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}
           />
         )