Merge pull request #2525 from stakwork/feature/normalize-nodes

feat: add normalized nodes, reduce rerenders, add particles

src/components/App/index.tsx

@@ -1,4 +1,3 @@
-import { Leva } from 'leva'
 import { lazy, Suspense, useCallback, useEffect, useRef } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { useSearchParams } from 'react-router-dom'
@@ -8,7 +7,6 @@ import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import { GlobalStyle } from '~/components/GlobalStyle'
 import { Overlay } from '~/components/Universe/Overlay' // Import Overlay directly
-import { isDevelopment } from '~/constants'
 import { useSocket } from '~/hooks/useSockets'
 import { useAiSummaryStore } from '~/stores/useAiSummaryStore'
 import { useAppStore } from '~/stores/useAppStore'
@@ -341,8 +339,6 @@ export const App = () => {
 
       <DeviceCompatibilityNotice />
 
-      <Leva hidden={!isDevelopment || true} isRoot />
-
       <Suspense fallback={<div>Loading...</div>}>
         {!splashDataLoading ? (
           <Wrapper direction="row">

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

@@ -1,19 +1,23 @@
 import { Billboard, Line, Text } from '@react-three/drei'
+import { useFrame } from '@react-three/fiber'
 import gsap from 'gsap'
 import { memo, useEffect, useRef } from 'react'
 import { Vector3 } from 'three'
 import { Line2 } from 'three-stdlib'
+import { useGraphStore } from '~/stores/useGraphStore'
 import { LinkPosition } from '..'
 import { LINE_WIDTH } from '../../constants'
 
 type LineComponentProps = {
   isSelected: boolean
   position: LinkPosition
   label: string
+  target: string
+  source: string
 }
 
 // eslint-disable-next-line no-underscore-dangle
-const _LineComponent = ({ isSelected, position, label }: LineComponentProps) => {
+const _LineComponent = ({ isSelected, position, label, target, source }: LineComponentProps) => {
   const lineRef = useRef<Line2 | null>(null)
 
   useEffect(() => {
@@ -31,6 +35,33 @@ const _LineComponent = ({ isSelected, position, label }: LineComponentProps) =>
     }
   }, [isSelected, lineRef])
 
+  useFrame(() => {
+    const { selectedNode, hoveredNode } = useGraphStore.getState()
+
+    if (lineRef.current) {
+      const line = lineRef.current
+      const activeNode = selectedNode || hoveredNode
+
+      if (activeNode?.ref_id === source || activeNode?.ref_id === target) {
+        line.visible = true
+
+        // Increase line width
+        gsap.to(line.material, {
+          linewidth: 6, // Target line width
+          duration: 0.5, // Smooth increase
+          ease: 'power1.out',
+        })
+      } else {
+        // Decrease line width back to default
+        gsap.to(line.material, {
+          linewidth: 1, // Default line width
+          duration: 0.5, // Smooth decrease
+          ease: 'power1.out',
+        })
+      }
+    }
+  })
+
   return (
     <group>
       <Line

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

@@ -28,7 +28,16 @@ export const Connections = memo(({ linksPosition }: Props) => {
           tz: 0,
         }
 
-        return <LineComponent key={l.ref_id} isSelected={isSelected} label={l.edge_type} position={position} />
+        return (
+          <LineComponent
+            key={l.ref_id}
+            isSelected={isSelected}
+            label={l.edge_type}
+            position={position}
+            source={l.source}
+            target={l.target}
+          />
+        )
       })}
     </group>
   )

src/components/Universe/Graph/Cubes/SelectionDataNodes/index.tsx

@@ -118,7 +118,7 @@ export const SelectionDataNodes = memo(() => {
       <group ref={groupRef} name="simulation-2d-group">
         {selectionGraphData?.nodes.map((node) => (
           <mesh key={node.ref_id}>
-            <TextNode key={node.ref_id || node.id} hide ignoreDistance node={node} />
+            <TextNode key={node.ref_id || node.id} color="white" hide ignoreDistance node={node} />
           </mesh>
         ))}
       </group>