fix: fixed selection view overlap issue

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

@@ -1,15 +1,15 @@
 import { Segments } from '@react-three/drei'
+import { forceCollide, forceLink, forceSimulation } from 'd3-force-3d'
 import { memo, useEffect, useRef, useState } from 'react'
 import { Group } from 'three'
 import { useShallow } from 'zustand/react/shallow'
 import { usePrevious } from '~/hooks/usePrevious'
 import { useDataStore } from '~/stores/useDataStore'
 import { useGraphStore, useSelectedNode, useSelectedNodeRelativeIds } from '~/stores/useGraphStore'
-import { ForceSimulation, runForceSimulation } from '~/transformers/forceSimulation'
+import { ForceSimulation } from '~/transformers/forceSimulation'
 import { GraphData, Link, NodeExtended } from '~/types'
 import { Segment } from '../../Segment'
 import { PathwayBadges } from '../../Segment/LinkBadge'
-import { Cube } from '../Cube'
 import { TextNode } from '../Text'
 
 export const SelectionDataNodes = memo(() => {
@@ -61,13 +61,25 @@ export const SelectionDataNodes = memo(() => {
 
     const structuredLinks = structuredClone(selectionGraphData.links)
 
-    const simulation = runForceSimulation(selectionGraphData.nodes, structuredLinks as unknown as Link[], {
-      numDimensions: 2,
-      forceLinkStrength: 0.01,
-      forceCenterStrength: 0.85,
-      forceChargeStrength: -20,
-      velocityDecay: 0.9,
-    })
+    const simulation = forceSimulation([])
+      .numDimensions(2)
+      .stop()
+      .nodes(selectionGraphData.nodes)
+      .force(
+        'link',
+        forceLink()
+          .links(structuredLinks)
+          .id((d: NodeExtended) => d.ref_id),
+      )
+      .force(
+        'collide',
+        forceCollide()
+          .radius(() => 150)
+          .strength(1)
+          .iterations(1),
+      )
+      .alpha(1)
+      .restart()
 
     setSimulation2D(simulation)
 
@@ -101,18 +113,12 @@ export const SelectionDataNodes = memo(() => {
     })
   }, [simulation2d])
 
-  console.log(selectionGraphData.nodes)
-
   return (
     <>
       <group ref={groupRef} name="simulation-2d-group">
         {selectionGraphData?.nodes.map((node) => (
           <mesh key={node.ref_id}>
-            {node.name ? (
-              <TextNode key={node.ref_id || node.id} hide isHovered={false} node={node} />
-            ) : (
-              <Cube key={node.ref_id || node.id} hide node={node} />
-            )}
+            <TextNode key={node.ref_id || node.id} hide ignoreDistance isHovered={false} node={node} />
           </mesh>
         ))}
       </group>

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

@@ -47,6 +47,7 @@ type Props = {
   node: NodeExtended
   hide?: boolean
   isHovered: boolean
+  ignoreDistance: boolean
 }
 
 function splitStringIntoThreeParts(text: string): string {
@@ -67,7 +68,7 @@ function splitStringIntoThreeParts(text: string): string {
   return `${firstPart}\n${secondPart}\n${thirdPart}`
 }
 
-export const TextNode = memo(({ node, hide, isHovered }: Props) => {
+export const TextNode = memo(({ node, hide, isHovered, ignoreDistance }: Props) => {
   const svgRef = useRef<Mesh | null>(null)
   const ringRef = useRef<Mesh | null>(null)
   const circleRef = useRef<Mesh | null>(null)
@@ -88,7 +89,7 @@ export const TextNode = memo(({ node, hide, isHovered }: Props) => {
       const nodePosition = nodePositionRef.current.setFromMatrixPosition(ringRef.current!.matrixWorld)
 
       if (ringRef.current) {
-        ringRef.current.visible = nodePosition.distanceTo(camera.position) < 2500
+        ringRef.current.visible = ignoreDistance ? true : nodePosition.distanceTo(camera.position) < 2500
       }
 
       // Set visibility based on distance

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

@@ -120,18 +120,18 @@ export const Cubes = memo(() => {
               <TextNode
                 key={node.ref_id || node.id}
                 hide={hideUniverse || hide}
+                ignoreDistance={false}
                 isHovered={!!hoveredNode && hoveredNode.ref_id === node.ref_id}
                 node={node}
               />
             </mesh>
           )
         })}
       </group>
-      {true && (
-        <group name="simulation-3d-group__node-points">
-          <NodePoints />
-        </group>
-      )}
+
+      <group name="simulation-3d-group__node-points">
+        <NodePoints />
+      </group>
       {hideUniverse && <SelectionDataNodes />}
     </Select>
   )