feat: update selection view data fetch

aliraza556 · Dec 23, 2024 · 9eb306d · 9eb306d
1 parent 878cee5
commit 9eb306d
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 46 deletions.
diff --git a/src/components/Universe/Controls/CameraAnimations/index.ts b/src/components/Universe/Controls/CameraAnimations/index.ts
@@ -24,7 +24,7 @@ export const useCameraAnimations = (
 
   const isUserDragging = useControlStore((s) => s.isUserDragging)
 
-  const { graphStyle, graphRadius, disableCameraRotation } = useGraphStore((s) => s)
+  const { graphRadius, disableCameraRotation } = useGraphStore((s) => s)
 
   useEffect(() => {
     if (!enabled) {
@@ -33,22 +33,24 @@ export const useCameraAnimations = (
     }
   }, [enabled])
 
-  useEffect(() => {
-    if (cameraControlsRef.current && graphRadius) {
-      if (graphStyle === 'sphere') {
-        cameraControlsRef.current.maxDistance = 8000
-        cameraControlsRef.current.minDistance = 200
-        cameraControlsRef.current.setTarget(0, 0, 500, true)
-      } else {
-        cameraControlsRef.current.maxDistance = cameraControlsRef.current.getDistanceToFitSphere(graphRadius + 200)
-        cameraControlsRef.current.minDistance = 100
-      }
-    }
-  }, [graphRadius, graphStyle, cameraControlsRef])
+  // useEffect(() => {
+  //   if (cameraControlsRef.current && graphRadius) {
+  //     cameraControlsRef.current.maxDistance = cameraControlsRef.current.getDistanceToFitSphere(graphRadius + 200)
+  //     cameraControlsRef.current.minDistance = 100
+  //   }
+  // }, [graphRadius, cameraControlsRef])
 
   useEffect(() => {
     if (!selectedNode && cameraControlsRef.current) {
-      cameraControlsRef.current.setLookAt(initialCameraPosition.x, initialCameraPosition.y, graphRadius, 0, 0, 0, true)
+      cameraControlsRef.current.setLookAt(
+        initialCameraPosition.x,
+        initialCameraPosition.y,
+        graphRadius + 200,
+        0,
+        0,
+        0,
+        true,
+      )
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedNode, graphRadius])

diff --git a/src/components/Universe/Graph/Connections/LineComponent.tsx b/src/components/Universe/Graph/Connections/LineComponent.tsx
@@ -5,6 +5,7 @@ import { memo, useEffect, useRef } from 'react'
 import { Line2 } from 'three-stdlib'
 import { useGraphStore } from '~/stores/useGraphStore'
 import { LINE_WIDTH } from '../../constants'
+import { fontProps } from '../Cubes/Text/constants'
 
 type LineComponentProps = {
   label: string
@@ -78,8 +79,8 @@ const _LineComponent = (props: LineComponentProps) => {
         points={[sourceX, sourceY, sourceZ, targetX, targetY, targetZ]}
       />
       <Billboard>
-        <Text anchorX="center" anchorY="middle" color="white" fontSize={10}>
-          {label}1
+        <Text anchorX="center" anchorY="middle" color="white" {...fontProps} fontSize={10}>
+          {label}
         </Text>
       </Billboard>
     </group>

diff --git a/src/components/Universe/Graph/Cubes/SelectionDataNodes/Connections/Connection/index.tsx b/src/components/Universe/Graph/Cubes/SelectionDataNodes/Connections/Connection/index.tsx
@@ -1,6 +1,7 @@
 import { Line, Text } from '@react-three/drei'
 import { memo, useRef } from 'react'
 import { Line2 } from 'three-stdlib'
+import { fontProps } from '../../../Text/constants'
 
 type LineComponentProps = {
   label: string
@@ -31,7 +32,7 @@ const _Connection = (props: LineComponentProps) => {
       <mesh>
         <planeGeometry args={[label.length * 6, 12]} />
         <meshBasicMaterial color="black" />
-        <Text anchorX="center" anchorY="middle" color="white" fontSize={8}>
+        <Text anchorX="center" anchorY="middle" color="white" {...fontProps} fontSize={6}>
           {label}
         </Text>
       </mesh>

diff --git a/src/components/Universe/Graph/Cubes/SelectionDataNodes/Node/index.tsx b/src/components/Universe/Graph/Cubes/SelectionDataNodes/Node/index.tsx
@@ -57,7 +57,9 @@ export const Node = ({ onClick, node, selected, rounded = true }: Props) => {
   )
 }
 
-const Wrapper = styled(Flex)``
+const Wrapper = styled(Flex)`
+  background: black;
+`
 
 const Text = styled(Flex)`
   color: ${colors.white};

diff --git a/src/components/Universe/Graph/Cubes/SelectionDataNodes/index.tsx b/src/components/Universe/Graph/Cubes/SelectionDataNodes/index.tsx
@@ -55,21 +55,30 @@ export const SelectionDataNodes = memo(() => {
           const data = await fetchNodeEdges(selectedNode.ref_id, 0, 5)
 
           if (data) {
-            const graphNodes: NodeExtended[] = data.nodes
-              .filter((node) => node.ref_id !== selectedNode.ref_id)
-              .map((node: Node) => ({ ...node, x: 0, y: 0, z: 0 }))
+            const filteredNodes: NodeExtended[] = data.nodes.filter(
+              (node, index) => node.ref_id !== selectedNode.ref_id && index < 7,
+            )
+
+            const graphNodes = filteredNodes.map((node: Node) => ({ ...node, x: 0, y: 0, z: 0 }))
 
             const nodes: NodeExtended[] = [
               ...graphNodes,
               { ...selectedNode, x: 0, y: 0, z: 0, fx: 0, fy: 0, fz: 0 } as NodeExtended,
             ]
 
-            setSelectionData({ nodes, links: data.edges as unknown as GraphData['links'] })
+            const links = data.edges.filter(
+              (link: Link) =>
+                nodes.some((node: NodeExtended) => node.ref_id === link.target) &&
+                nodes.some((node: NodeExtended) => node.ref_id === link.source),
+            )
+
+            setSelectionData({ nodes, links: links as unknown as GraphData['links'] })
             setSimulation2D(null)
             linksPositionRef.current = new Map()
+
             //
 
-            addNewNode(data)
+            addNewNode({ nodes: filteredNodes, edges: links })
           }
         } catch (error) {
           console.error(error)
@@ -197,7 +206,7 @@ export const SelectionDataNodes = memo(() => {
 
             const midPoint = new Vector3((sx + tx) / 2, (sy + ty) / 2, 0)
 
-            text.position.set(midPoint.x, midPoint.y, 2)
+            text.position.set(midPoint.x, midPoint.y, 1)
 
             let angle = Math.atan2(ty - sy, tx - sx)
 

diff --git a/src/components/Universe/Graph/Cubes/index.tsx b/src/components/Universe/Graph/Cubes/index.tsx
@@ -120,7 +120,7 @@ export const Cubes = memo(() => {
                 index={index}
                 node={node}
                 scale={node.scale || 1}
-                stopFrames={hideUniverse}
+                stopFrames={false}
               />
             )
           })}

diff --git a/src/components/Universe/Graph/index.tsx b/src/components/Universe/Graph/index.tsx
@@ -24,7 +24,6 @@ export type LinkPosition = {
 export const Graph = () => {
   const { dataInitial, isLoadingNew, isFetching, dataNew, resetDataNew } = useDataStore((s) => s)
   const groupRef = useRef<Group>(null)
-  const cameraSettled = useRef<boolean>(false)
   const { normalizedSchemasByType } = useSchemaStore((s) => s)
 
   const linksPositionRef = useRef(new Map<string, LinkPosition>())
@@ -78,25 +77,6 @@ export const Graph = () => {
       return
     }
 
-    simulation.on('tick', () => {
-      if (!cameraSettled.current && simulation.alpha() < 0.1) {
-        const nodesVector = simulation.nodes().map((i: NodeExtended) => new Vector3(i.x, i.y, i.z))
-
-        const boundingBox = new Box3().setFromPoints(nodesVector)
-
-        const boundingSphere = new Sphere()
-
-        boundingBox.getBoundingSphere(boundingSphere)
-
-        const sphereRadius = Math.min(5000, boundingSphere.radius)
-
-        if (false) {
-          setGraphRadius(sphereRadius)
-          cameraSettled.current = true
-        }
-      }
-    })
-
     simulation.on('end', () => {
       const nodesVector = simulation.nodes().map((i: NodeExtended) => {
         // eslint-disable-next-line no-param-reassign
@@ -182,7 +162,15 @@ export const Graph = () => {
 
       const boundingBox = new Box3().setFromPoints(nodesVector)
 
-      console.log(boundingBox)
+      const boundingSphere = new Sphere()
+
+      boundingBox.getBoundingSphere(boundingSphere)
+
+      const sphereRadius = Math.min(5000, boundingSphere.radius)
+
+      console.log(sphereRadius)
+
+      setGraphRadius(sphereRadius)
     })
   }, [dataInitial, simulation, setGraphRadius, normalizedSchemasByType])