Display node children (#506)

* ci: limiting the number of display children is partially working

* ci: working

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

@@ -4,7 +4,7 @@ import clsx from 'clsx'
 import { Fragment, memo, useEffect, useMemo, useRef } from 'react'
 import { Group, Vector3 } from 'three'
 import { getNodeColorByType } from '~/components/Universe/Graph/constant'
-import { nodesAreRelatives } from '~/components/Universe/constants'
+import { maxChildrenDisplayed, nodesAreRelatives } from '~/components/Universe/constants'
 import { Avatar } from '~/components/common/Avatar'
 import { TypeBadge } from '~/components/common/TypeBadge'
 import { useDataStore, useSelectedNode } from '~/stores/useDataStore'
@@ -104,25 +104,27 @@ export const RelevanceBadges = memo(() => {
   const nodeBadges = useMemo(() => {
     const nodes = showSelectionGraph ? selectionGraphData.nodes : data?.nodes || []
 
-    const badgesToRender = nodes
+    const childIds = nodes
       .filter((f) => selectedNodeRelativeIds.includes(f?.ref_id || '') || selectedNode?.ref_id === f?.ref_id)
-      .map((n) => {
-        const color = getNodeColorByType(n.node_type || '', true) as string
-        const position = new Vector3(n?.x || 0, n?.y || 0, n?.z || 0)
-
-        const relativeIds =
-          (data?.nodes || []).filter((f) => f.ref_id && nodesAreRelatives(f, n)).map((nd) => nd?.ref_id || '') || []
-
-        return (
-          <NodeBadge
-            key={`node-badge-${n.ref_id}`}
-            color={color}
-            position={position}
-            relativeIds={relativeIds}
-            userData={n}
-          />
-        )
-      })
+      .slice(0, maxChildrenDisplayed)
+
+    const badgesToRender = childIds.map((n) => {
+      const color = getNodeColorByType(n.node_type || '', true) as string
+      const position = new Vector3(n?.x || 0, n?.y || 0, n?.z || 0)
+
+      const relativeIds =
+        (data?.nodes || []).filter((f) => f.ref_id && nodesAreRelatives(f, n)).map((nd) => nd?.ref_id || '') || []
+
+      return (
+        <NodeBadge
+          key={`node-badge-${n.ref_id}`}
+          color={color}
+          position={position}
+          relativeIds={relativeIds}
+          userData={n}
+        />
+      )
+    })
 
     return badgesToRender
   }, [selectedNodeRelativeIds, data?.nodes, showSelectionGraph, selectionGraphData, selectedNode])

src/components/Universe/Graph/index.tsx

@@ -1,8 +1,10 @@
 import { Segments } from '@react-three/drei'
 import { useMemo } from 'react'
+import { Vector3 } from 'three'
 import { useGraphData } from '~/components/DataRetriever'
 import { useDataStore } from '~/stores/useDataStore'
-import { GraphData } from '~/types'
+import { Link } from '~/types'
+import { maxChildrenDisplayed } from '../constants'
 import { Cubes } from './Cubes'
 import { Earth } from './Earth'
 import { Particles } from './Particles'
@@ -14,6 +16,9 @@ export const Graph = () => {
   const isLoading = useDataStore((s) => s.isFetching)
   const graphStyle = useDataStore((s) => s.graphStyle)
   const showSelectionGraph = useDataStore((s) => s.showSelectionGraph)
+  const selectedNodeRelativeIds = useDataStore((s) => s.selectedNodeRelativeIds)
+  const selectionGraphData = useDataStore((s) => s.selectionGraphData)
+  const selectedNode = useDataStore((s) => s.selectedNode)
 
   const lineWidth = useMemo(() => {
     if (showSelectionGraph) {
@@ -27,6 +32,42 @@ export const Graph = () => {
     return 0.4
   }, [showSelectionGraph, graphStyle])
 
+  const nodeBadges = useMemo(() => {
+    const nodes = showSelectionGraph ? selectionGraphData.nodes : data?.nodes || []
+
+    const childIds = nodes
+      .filter((f) => selectedNodeRelativeIds.includes(f?.ref_id || '') || selectedNode?.ref_id === f?.ref_id)
+      .slice(0, maxChildrenDisplayed)
+
+    const badgesToRender = childIds.map((n) => {
+      // const relativeIds =
+      // (data?.nodes || []).filter((f) => f.ref_id && nodesAreRelatives(f, n)).map((nd) => nd?.ref_id || '') || []
+
+      const spos = new Vector3(selectedNode?.x, selectedNode?.y, selectedNode?.z)
+
+      const tpos = new Vector3(n.x, n.y, n.z)
+
+      const l: Link<string> = {
+        source: selectedNode?.id ? selectedNode.id : '',
+        target: n.id ? n.id : '',
+        targetRef: n.ref_id,
+        sourceRef: selectedNode?.ref_id,
+        sourcePosition: spos,
+        targetPosition: tpos,
+      }
+
+      return (
+        <Segment
+          // eslint-disable-next-line react/no-array-index-key
+          key={n.id}
+          link={l}
+        />
+      )
+    })
+
+    return badgesToRender
+  }, [selectedNodeRelativeIds, data?.nodes, showSelectionGraph, selectionGraphData, selectedNode])
+
   if (isLoading) {
     return null
   }
@@ -43,20 +84,14 @@ export const Graph = () => {
           /** NOTE: using the key in this way the segments re-mounts
            *  everytime the data.links count changes
            * */
-          key={`links-${data.links.length}-${graphStyle}`}
+          key={`links-${nodeBadges.length}-${graphStyle}`}
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore
           fog
-          limit={data.links.length}
+          limit={nodeBadges.length}
           lineWidth={lineWidth}
         >
-          {(data.links as unknown as GraphData['links']).map((link, index) => (
-            <Segment
-              // eslint-disable-next-line react/no-array-index-key
-              key={index.toString()}
-              link={link}
-            />
-          ))}
+          {nodeBadges}
         </Segments>
       )}
 

src/components/Universe/constants.ts

@@ -5,6 +5,8 @@ export const variableVector3 = new Vector3(0, 0, 0)
 
 export const outlineEffectColor = 0xffffff
 
+export const maxChildrenDisplayed = 20
+
 export const nodesAreRelatives = (a: NodeExtended | null, b: NodeExtended | null) => {
   if (!a?.ref_id || !b?.ref_id) {
     return false