From 7935ac542bea1ea3108e0c47235cb8287136b880 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?=
 <rasul.sahibjanli@gmail.com>
Date: Mon, 28 Oct 2024 19:55:37 +0300
Subject: [PATCH] feat: adjusted split force layout, added size based on
 nodecount

---
 src/components/Universe/Graph/Connections/index.tsx        | 2 +-
 .../Universe/Graph/Cubes/NodePoints/Point/index.tsx        | 5 +++--
 src/components/Universe/Graph/Cubes/NodePoints/index.tsx   | 2 +-
 src/components/Universe/Graph/Cubes/index.tsx              | 2 +-
 src/components/Universe/Graph/index.tsx                    | 2 +-
 src/stores/useGraphStore/index.ts                          | 7 ++++++-
 6 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/Universe/Graph/Connections/index.tsx b/src/components/Universe/Graph/Connections/index.tsx
index 4c4f47a3f..626308e72 100644
--- 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
index b824f2c98..49e592427 100644
--- 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
index aa02e94a5..2a2fac254 100644
--- 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
index b547af67d..844ccff98 100644
--- 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
index 728e611f0..a9ca224d6 100644
--- 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
index 378bff6ff..d2c062aa7 100644
--- 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),
         )
     },