feat: adjusted split force layout, added size based on nodecount

stakwork · Oct 28, 2024 · 7935ac5 · 7935ac5
1 parent 18dfac7
commit 7935ac5
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 7 deletions.
diff --git a/src/components/Universe/Graph/Connections/index.tsx b/src/components/Universe/Graph/Connections/index.tsx
@@ -16,7 +16,7 @@ export const Connections = memo(() => {
       {data?.links.map((l: Link) => {
         const isSelected = selectedNode?.ref_id === l.source || selectedNode?.ref_id === l.target
 
-        const lineWidth = selectedNode ? 0 : 0.5
+        const lineWidth = selectedNode ? 0 : 1
 
         return (
           <LineComponent key={l.ref_id} isSelected={isSelected} lineWidth={lineWidth} visible={!showSelectionGraph} />

diff --git a/src/components/Universe/Graph/Cubes/NodePoints/Point/index.tsx b/src/components/Universe/Graph/Cubes/NodePoints/Point/index.tsx
@@ -2,12 +2,13 @@ import { Billboard, Instance } from '@react-three/drei'
 
 type Props = {
   color: string
+  scale: number
 }
 
-export const Point = ({ color }: Props) => (
+export const Point = ({ color, scale }: Props) => (
   <>
     <Billboard follow lockX={false} lockY={false} lockZ={false}>
-      <Instance color={color} />
+      <Instance color={color} scale={scale} />
     </Billboard>
   </>
 )
diff --git a/src/components/Universe/Graph/Cubes/NodePoints/index.tsx b/src/components/Universe/Graph/Cubes/NodePoints/index.tsx
@@ -59,7 +59,7 @@ const _NodePoints = () => {
           const primaryColor = normalizedSchemasByType[node.node_type]?.primary_color
           const color = primaryColor ?? (COLORS_MAP[nodeTypes.indexOf(node.node_type)] || colors.white)
 
-          return <Point key={node.ref_id} color={color} />
+          return <Point key={node.ref_id} color={color} scale={node.edge_count || 1} />
         })}
       </Instances>
     </>

diff --git a/src/components/Universe/Graph/Cubes/index.tsx b/src/components/Universe/Graph/Cubes/index.tsx
@@ -114,7 +114,7 @@ export const Cubes = memo(() => {
           const hide = !!selectedNode && (relativeIds.includes(node.ref_id) || selectedNode.ref_id === node.ref_id)
 
           return (
-            <mesh key={node.ref_id} name="wr2" userData={node}>
+            <mesh key={node.ref_id} name="wr2" scale={node.edge_count || 1} userData={node}>
               <boxGeometry args={[40, 40, 40]} />
               <meshStandardMaterial opacity={0} transparent />
               <TextNode

diff --git a/src/components/Universe/Graph/index.tsx b/src/components/Universe/Graph/index.tsx
@@ -139,7 +139,7 @@ export const Graph = () => {
 
               material.color = new Color(lineColor)
               material.transparent = true
-              material.opacity = 0.2
+              material.opacity = 1
             }
           })
         }

diff --git a/src/stores/useGraphStore/index.ts b/src/stores/useGraphStore/index.ts
@@ -262,7 +262,12 @@ export const useGraphStore = create<GraphStore>()((set, get) => ({
         .force(
           'y',
           forceY()
-            .y((node: NodeExtended) => nodeTypes.indexOf(node.node_type) * 400)
+            .y((node: NodeExtended) => {
+              const index = nodeTypes.indexOf(node.node_type)
+              const yOffset = Math.floor(index / 2) * 400
+
+              return index % 2 === 0 ? yOffset : -yOffset
+            })
             .strength(10),
         )
     },