Merge pull request #2439 from stakwork/feature/links-v2

feat: fixed links, improved behaviour on hover/select

src/components/Universe/Graph/Connections/LineComponent.tsx

@@ -1,43 +1,48 @@
 import { Line } from '@react-three/drei'
 import gsap from 'gsap'
-import { memo, useEffect, useRef } from 'react'
-import { Color, Vector3 } from 'three'
+import { forwardRef, memo, useEffect } from 'react'
+import { Vector3 } from 'three'
 import { Line2 } from 'three-stdlib'
+import { LinkPosition } from '..'
+import { LINE_WIDTH } from '../../constants'
 
 type LineComponentProps = {
   isSelected: boolean
-  lineWidth: number
-  visible: boolean
+  position: LinkPosition
 }
 
 const VECTOR = new Vector3(0, 0, 0)
 
 // eslint-disable-next-line no-underscore-dangle
-export const _LineComponent = (props: LineComponentProps) => {
-  const { isSelected, lineWidth, visible } = props
-  const ref = useRef<Line2>(null)
-
+const _LineComponent = forwardRef<Line2, LineComponentProps>(({ isSelected, position }, ref) => {
   useEffect(() => {
-    const line = (ref as React.MutableRefObject<Line2 | null>).current
+    if (ref && (ref as React.MutableRefObject<Line2 | null>).current) {
+      const line = (ref as React.MutableRefObject<Line2>).current
 
-    if (line) {
       gsap.fromTo(
         line.material,
-        { linewidth: 5 },
+        { linewidth: LINE_WIDTH * 5 },
         {
-          linewidth: isSelected ? 2 : lineWidth,
+          linewidth: LINE_WIDTH,
           duration: 1,
         },
       )
     }
-  }, [isSelected, lineWidth, ref])
-
-  const color = new Color(0xff0000)
+  }, [isSelected, ref])
 
   return (
-    <Line ref={ref} color={color} isLine2 lineWidth={2} opacity={0.5} points={[VECTOR, VECTOR]} visible={visible} />
+    <Line
+      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]
+      }
+    />
   )
-}
+})
 
 _LineComponent.displayName = 'LineComponent'
 

src/components/Universe/Graph/Connections/index.tsx

@@ -1,25 +1,73 @@
-import { memo } from 'react'
+import gsap from 'gsap'
+import { memo, useEffect, useRef } from 'react'
+import { Line2 } from 'three-stdlib'
 import { useDataStore } from '~/stores/useDataStore'
-import { useGraphStore, useSelectedNode } from '~/stores/useGraphStore'
+import { useGraphStore, useHoveredNode, useSelectedNode } from '~/stores/useGraphStore'
 import { Link } from '~/types'
+import { LinkPosition } from '..'
+import { LINE_WIDTH } from '../../constants'
 import { LineComponent } from './LineComponent'
 
-export const Connections = memo(() => {
+type Props = {
+  linksPosition: LinkPosition[]
+}
+
+const LINE_TRANSFORM_DURATION = 0.5
+
+export const Connections = memo(({ linksPosition }: Props) => {
   const data = useDataStore((s) => s.dataInitial)
   const { showSelectionGraph } = useGraphStore((s) => s)
   const selectedNode = useSelectedNode()
+  const hoveredNode = useHoveredNode()
+  const lineRefs = useRef<Line2[]>([])
+
+  useEffect(() => {
+    const activeNode = hoveredNode || selectedNode
+
+    if (!activeNode) {
+      lineRefs.current.forEach((line) => {
+        if (line) {
+          gsap.to(line.material, {
+            linewidth: LINE_WIDTH,
+            duration: LINE_TRANSFORM_DURATION,
+          })
+        }
+      })
+
+      return
+    }
 
-  console.log('connection')
+    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 {
+        gsap.to(line.material, {
+          linewidth: 0,
+          duration: LINE_TRANSFORM_DURATION,
+        })
+      }
+    })
+  }, [data?.links, hoveredNode, selectedNode])
 
   return (
-    <group name="simulation-3d-group__connections">
-      {data?.links.map((l: Link) => {
+    <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
 
-        const lineWidth = selectedNode ? 0 : 1
+        // eslint-disable-next-line no-nested-ternary
 
         return (
-          <LineComponent key={l.ref_id} isSelected={isSelected} lineWidth={lineWidth} visible={!showSelectionGraph} />
+          <LineComponent
+            key={l.ref_id}
+            ref={(el) => {
+              lineRefs.current[index] = el as Line2
+            }}
+            isSelected={isSelected}
+            position={linksPosition[index]}
+          />
         )
       })}
     </group>

src/components/Universe/Graph/index.tsx

@@ -110,6 +110,10 @@ export const Graph = () => {
           })
         }
 
+        if (simulation.alpha() > 1) {
+          return
+        }
+
         if (grConnections) {
           grConnections.children.forEach((r, i) => {
             const link = dataInitial?.links[i]
@@ -174,7 +178,7 @@ export const Graph = () => {
 
       {(isLoadingNew || isFetching) && <LoadingNodes />}
 
-      {graphStyle !== 'earth' && <Connections />}
+      {graphStyle !== 'earth' && <Connections linksPosition={linksPositionRef.current} />}
       <NodeDetailsPanel />
     </group>
   )

src/components/Universe/constants.ts

@@ -3,9 +3,11 @@ import { Guests, NodeExtended } from '~/types'
 
 export const variableVector3 = new Vector3(0, 0, 0)
 
+export const LINE_WIDTH = 0.5
+
 export const outlineEffectColor = 0xffffff
 
-export const maxChildrenDisplayed = 20
+export const maxChildrenDisplayed = 50
 
 export const nodesAreRelatives = (a: NodeExtended | null, b: NodeExtended | null) => {
   if (!a?.ref_id || !b?.ref_id) {