Merge pull request #2589 from stakwork/feature/disable-rotation-appea…

…rence

feat: disable node appearence from left, graph rotation

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

@@ -1,92 +1,19 @@
-import { useFrame } from '@react-three/fiber'
-import gsap from 'gsap'
-import { memo, useRef } from 'react'
-import { Mesh, Vector3 } from 'three'
-import { useGraphStore } from '~/stores/useGraphStore'
+import { memo } from 'react'
 import { NodeExtended } from '~/types'
 import { TextNode } from '../Text/index'
 
 type Props = {
   node: NodeExtended
   color: string
   scale: number
-  index: number
-  stopFrames: boolean
 }
 
-const offset = { x: 20, y: 20 }
-
 export const NodeWrapper = memo(
   (props: Props) => {
-    const { node, color, index, stopFrames } = props
-    const simulation = useGraphStore((s) => s.simulation)
-
-    const finishedSimulationCircle = useRef<boolean>(false)
-
-    const wrapperRef = useRef<Mesh | null>(null)
-
-    useFrame(({ camera, size }) => {
-      if (stopFrames) {
-        return
-      }
-
-      if (wrapperRef.current && simulation) {
-        const simulationNode = simulation.nodes()[index]
-
-        if (!simulationNode) {
-          return
-        }
-
-        if (!finishedSimulationCircle.current) {
-          // Define the NDC coordinates for the fixed position
-          const ndc = new Vector3(
-            -1 + (offset.x * 2) / size.width, // Adjust for left offset
-            1 - (offset.y * 2) / size.height, // Adjust for top offset
-            0, // Near clipping plane
-          )
-
-          // Convert NDC to world space
-          const worldPosition = ndc.unproject(camera)
-
-          // Maintain a fixed distance from the camera
-          const distanceFromCamera = 5
-          const direction = worldPosition.sub(camera.position).normalize()
-          const fixedPosition = camera.position.clone().add(direction.multiplyScalar(distanceFromCamera))
-
-          wrapperRef.current.position.copy(fixedPosition)
-
-          // Store the largest dimension as the "size" of the mesh
-
-          wrapperRef.current.scale.set(0.1, 0.1, 0.1)
-
-          wrapperRef.current.visible = false
-        }
-
-        if (simulationNode.fx && !finishedSimulationCircle.current) {
-          wrapperRef.current.visible = true
-          finishedSimulationCircle.current = true
-
-          gsap.to(wrapperRef.current.position, {
-            x: simulationNode.fx, // Destination X coordinate
-            y: simulationNode.fy, // Destination Y coordinate
-            z: simulationNode.fz, // Destination Z coordinate
-            duration: 4, // Animation duration in seconds
-            ease: 'power2.in', // Easing function
-          })
-
-          gsap.to(wrapperRef.current.scale, {
-            x: 1, // Destination X coordinate
-            y: 1, // Destination Y coordinate
-            z: 1, // Destination Z coordinate
-            duration: 4.5, // Animation duration in seconds
-            ease: 'power2.in', // Easing function
-          })
-        }
-      }
-    })
+    const { node, color } = props
 
     return (
-      <mesh key={node.ref_id} ref={wrapperRef} name="wr2" scale={node.scale || 1} userData={node}>
+      <mesh key={node.ref_id} name="wr2" scale={node.scale || 1} userData={node}>
         <boxGeometry args={[40, 40, 40]} />
         <meshStandardMaterial opacity={0} transparent />
         <TextNode key={node.ref_id} color={color} ignoreDistance={false} node={node} scale={node.scale || 1} />

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

@@ -110,19 +110,10 @@ export const Cubes = memo(() => {
         onPointerOver={onPointerIn}
       >
         <group name="simulation-3d-group__nodes" visible={!hideUniverse}>
-          {data?.nodes.map((node: NodeExtended, index: number) => {
+          {data?.nodes.map((node: NodeExtended) => {
             const color = COLORS_MAP[nodeTypes.indexOf(node.node_type)] || colors.white
 
-            return (
-              <NodeWrapper
-                key={node.ref_id}
-                color={color}
-                index={index}
-                node={node}
-                scale={node.scale || 1}
-                stopFrames={false}
-              />
-            )
+            return <NodeWrapper key={node.ref_id} color={color} node={node} scale={node.scale || 1} />
           })}
         </group>
 

src/components/Universe/Graph/index.tsx

@@ -77,6 +77,90 @@ export const Graph = () => {
       return
     }
 
+    simulation.on('tick', () => {
+      if (groupRef.current) {
+        const gr = groupRef.current.getObjectByName('simulation-3d-group__nodes') as Group
+        const grPoints = groupRef.current.getObjectByName('simulation-3d-group__node-points') as Group
+        const grConnections = groupRef.current.getObjectByName('simulation-3d-group__connections') as Group
+
+        if (gr) {
+          gr.children.forEach((mesh, index) => {
+            const simulationNode = simulation.nodes()[index]
+
+            if (simulationNode) {
+              mesh.position.set(simulationNode.x, simulationNode.y, simulationNode.z)
+            }
+          })
+        }
+
+        if (grPoints) {
+          grPoints.children[0].children.forEach((mesh, index) => {
+            const simulationNode = simulation.nodes()[index]
+
+            if (simulationNode) {
+              mesh.position.set(simulationNode.x, simulationNode.y, simulationNode.z)
+            }
+          })
+        }
+
+        if (simulation.alpha() > 1) {
+          return
+        }
+
+        grConnections.children.forEach((g, i) => {
+          const r = g.children[0] // Assuming Line is the first child
+          const text = g.children[1] // Assuming Text is the second child
+
+          if (r instanceof Line2) {
+            // Ensure you have both Line and Text
+            const Line = r as Line2
+            const link = dataInitial?.links[i]
+
+            if (link) {
+              const sourceNode = simulation.nodes().find((n: NodeExtended) => n.ref_id === link.source)
+              const targetNode = simulation.nodes().find((n: NodeExtended) => n.ref_id === link.target)
+
+              if (!sourceNode || !targetNode) {
+                console.warn(`Missing source or target node for link: ${link?.ref_id}`)
+
+                return
+              }
+
+              const { x: sx, y: sy, z: sz } = sourceNode
+              const { x: tx, y: ty, z: tz } = targetNode
+
+              // Set positions for the link
+              linksPositionRef.current.set(link.ref_id, {
+                sx,
+                sy,
+                sz,
+                tx,
+                ty,
+                tz,
+              })
+
+              // Calculate midpoint for the text position
+              const midPoint = new Vector3((sx + tx) / 2, (sy + ty) / 2, (sz + tz) / 2)
+
+              // Set text position and rotation
+              text.position.set(midPoint.x, midPoint.y, midPoint.z)
+
+              // Set line color and properties
+              const lineColor = normalizedSchemasByType[sourceNode.node_type]?.primary_color || 'white'
+
+              Line.geometry.setPositions([sx, sy, sz, tx, ty, tz])
+
+              const { material } = Line
+
+              material.color = new Color(lineColor)
+              material.transparent = true
+              material.opacity = 0.3
+            }
+          }
+        })
+      }
+    })
+
     simulation.on('end', () => {
       const nodesVector = simulation.nodes().map((i: NodeExtended) => {
         // eslint-disable-next-line no-param-reassign
@@ -90,9 +174,20 @@ export const Graph = () => {
       })
 
       if (groupRef.current) {
+        const gr = groupRef.current.getObjectByName('simulation-3d-group__nodes') as Group
         const grPoints = groupRef.current.getObjectByName('simulation-3d-group__node-points') as Group
         const grConnections = groupRef.current.getObjectByName('simulation-3d-group__connections') as Group
 
+        if (gr) {
+          gr.children.forEach((mesh, index) => {
+            const simulationNode = simulation.nodes()[index]
+
+            if (simulationNode) {
+              mesh.position.set(simulationNode.x, simulationNode.y, simulationNode.z)
+            }
+          })
+        }
+
         if (grPoints) {
           grPoints.children[0].children.forEach((mesh, index) => {
             const simulationNode = simulation.nodes()[index]

src/components/mindset/index.tsx

@@ -172,7 +172,7 @@ export const MindSet = () => {
 
             const [matchingLinks, remainingLinks] = edges.reduce<[Link[], Link[]]>(
               ([matches, remaining], link) => {
-                if (link?.properties?.start !== undefined && (link?.properties?.start as number) < currentTime + 5) {
+                if (link?.properties?.start !== undefined && (link?.properties?.start as number) < currentTime + 1) {
                   matches.push(link)
                 } else {
                   remaining.push(link)

src/stores/useGraphStore/index.ts

@@ -128,7 +128,7 @@ const defaultData: Omit<
   data: null,
   simulation: null,
   selectionGraphData: { nodes: [], links: [] },
-  disableCameraRotation: false,
+  disableCameraRotation: true,
   scrollEventsDisabled: false,
   graphRadius: 1500, // calculated from initial load
   selectionGraphRadius: 200, // calculated from initial load
@@ -151,7 +151,7 @@ export const useGraphStore = create<GraphStore>()((set, get) => ({
   },
   setSelectionData: (selectionGraphData) => set({ selectionGraphData }),
   setScrollEventsDisabled: (scrollEventsDisabled) => set({ scrollEventsDisabled }),
-  setDisableCameraRotation: (rotation) => set({ disableCameraRotation: rotation }),
+  setDisableCameraRotation: (rotation) => set({ disableCameraRotation: true || rotation }),
   setIsHovering: (isHovering) => set({ isHovering }),
   setGraphRadius: (graphRadius) => set({ graphRadius }),
   setSelectionGraphRadius: (selectionGraphRadius) => set({ selectionGraphRadius }),
@@ -244,7 +244,7 @@ export const useGraphStore = create<GraphStore>()((set, get) => ({
         .force(
           'collide',
           forceCollide()
-            .radius(() => 250)
+            .radius(() => 150)
             .strength(1)
             .iterations(1),
         )