[DRAFT][Feature][Graph Render]Nodes and initial render implementation (#2)

* [Feature][Graph Render]Nodes and initial render implementation

* [Fix][Validation]

* [Fix][Validation]

* [Fix][Validation]

* [Fix][Validation]

* [Fix][Validation]

* [Feature] Links Render

Author: MarSH-Up

package.json

@@ -65,7 +65,8 @@
     ]
   },
   "resolutions": {
-    "postcss": "^8.4.31",
-    "nth-check": "^2.0.1"
-  }
+  "postcss": "^8.4.31",
+  "nth-check": "^2.0.1"
+}
+
 }

src/design/Layouts/FullScreen.tsx

@@ -206,7 +206,7 @@ const FullScreen = () => {
 					minHeight: "calc(100vh - 6rem)", // Ensure full height minus the AppBar height (6rem)
 					boxSizing: "border-box",
 					marginTop: "6rem",
-					background: Colors.primary.light,
+					background: "#f0f0f0",
 				}}
 			>
 				<Outlet />

src/modules/universe/NeuroJsonGraph.tsx

@@ -1,4 +1,5 @@
-import ForceGraph3D, { ForceGraph3DInstance } from "3d-force-graph";
+import ForceGraph3D from "3d-force-graph";
+import { Colors } from "design/theme";
 import React, { useEffect, useRef } from "react";
 import * as THREE from "three";
 import {
@@ -16,15 +17,18 @@ interface NodeObject {
 	datatype: string[];
 	support: string;
 	url: string;
+	datasets: number;
 }
 
 const NeuroJsonGraph: React.FC<{ registry: Database[] }> = ({ registry }) => {
 	const graphRef = useRef<HTMLDivElement>(null);
 
-	// Debug log for registry data
-	useEffect(() => {
-		console.log("From NeuroJsonGraph, registry:", registry);
-	}, [registry]);
+	// Function to determine color and size based on node size
+	const size2colorAndSize = (size: number) => {
+		if (size > 32) return { color: Colors.primary.dark, size: 10 };
+		if (size > 3) return { color: Colors.primary.main, size: 7 };
+		return { color: Colors.primary.light, size: 5 };
+	};
 
 	useEffect(() => {
 		// Ensure registry and graphRef are properly initialized
@@ -40,40 +44,61 @@ const NeuroJsonGraph: React.FC<{ registry: Database[] }> = ({ registry }) => {
 
 		// Prepare graph data
 		const graphData = {
-			nodes: registry.map((db) => ({
-				id: db.id,
-				name: db.fullname || db.name,
-				dbname: db.name,
-				color: "rgba(255,255,255,1)", // White color for nodes
-				datatype: db.datatype,
-				support: db.support,
-				url: db.url,
-			})),
-			links: [], // Add links if needed
+			nodes: registry.map((db) => {
+				const { color, size } = size2colorAndSize(db.datasets);
+				return {
+					id: db.id,
+					name: db.fullname || db.name,
+					dbname: db.name,
+					color: color,
+					datatype: db.datatype,
+					support: db.support,
+					url: db.url,
+					datasets: db.datasets,
+					size: size,
+				};
+			}),
+			links: registry.flatMap((db, index) => {
+				const connections = [];
+				const nextIndex = (index + 1) % registry.length;
+				const { color } = size2colorAndSize(db.datasets);
+				connections.push({
+					source: db.id,
+					target: registry[nextIndex].id,
+					color: color,
+					visible: true,
+				});
+				return connections;
+			}),
 		};
 
 		// Initialize 3D Force Graph
-		const Graph: ForceGraph3DInstance = new ForceGraph3D(graphRef.current)
+		const Graph = new ForceGraph3D(graphRef.current)
 			.graphData(graphData)
 			.nodeRelSize(2)
-			.nodeColor((node) => (node as NodeObject).color || "rgba(255,255,255,1)") // White nodes
+			.nodeColor((node) => (node as NodeObject).color)
+			.linkWidth(2) // Set the thickness of the links
 			.backgroundColor("rgba(0,0,0,0)") // Transparent background
 			.nodeLabel("name")
 			.nodeThreeObject((node) => {
 				const castNode = node as NodeObject;
 
 				// Create a 3D sphere for the node
-				const sphereGeometry = new THREE.SphereGeometry(5, 16, 16); // Radius 5
+				const sphereGeometry = new THREE.SphereGeometry(
+					(castNode as any).size,
+					16,
+					16
+				); // Dynamic radius
 				const sphereMaterial = new THREE.MeshBasicMaterial({
-					color: "white",
+					color: (castNode as any).color,
 				});
 				const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
 
 				// Add label as CSS2DObject
 				const label = new CSS2DObject(document.createElement("div"));
 				label.element.textContent = castNode.dbname || "Unnamed";
-				label.element.style.color = "white";
-				label.element.style.fontSize = "10px";
+				label.element.style.color = Colors.primary.main;
+				label.element.style.fontSize = "12px";
 				label.element.style.pointerEvents = "none"; // Prevent interaction
 				label.position.set(0, 10, 0); // Position label above the node
 				sphere.add(label);
@@ -86,7 +111,7 @@ const NeuroJsonGraph: React.FC<{ registry: Database[] }> = ({ registry }) => {
 		labelRenderer.setSize(window.innerWidth, window.innerHeight);
 		labelRenderer.domElement.style.position = "absolute";
 		labelRenderer.domElement.style.top = "0px";
-		labelRenderer.domElement.style.pointerEvents = "none"; // Prevent interaction
+		labelRenderer.domElement.style.pointerEvents = "none";
 		graphRef.current?.appendChild(labelRenderer.domElement);
 
 		// Animate label rendering

src/pages/Home.tsx

@@ -3,7 +3,6 @@ import { useAppDispatch } from "hooks/useAppDispatch";
 import { useAppSelector } from "hooks/useAppSelector";
 import NeuroJsonGraph from "modules/universe/NeuroJsonGraph";
 import React, { useEffect } from "react";
-import { Link } from "react-router-dom";
 import { fetchRegistry } from "redux/neurojson/neurojson.action";
 import { NeurojsonSelector } from "redux/neurojson/neurojson.selector";
 
@@ -13,33 +12,15 @@ const Home: React.FC = () => {
 
 	useEffect(() => {
 		dispatch(fetchRegistry());
-		console.log(registry);
 	}, [dispatch]);
-	return (
-		<Container>
-			{registry && <NeuroJsonGraph registry={registry} />}
-
-			<Box sx={{ padding: 4, maxHeight: "100%", maxWidth: "30%" }}>
-				{/* Header Section */}
-				<Typography variant="h3" gutterBottom>
-					Welcome to NeuroJSON IO
-				</Typography>
-				<Typography variant="body1">
-					Manage and explore your CouchDB databases and datasets effortlessly.
-				</Typography>
 
-				{/* Navigation to Database Page */}
-				<Box mt={4}>
-					<Button
-						variant="contained"
-						color="primary"
-						component={Link}
-						to="/databases"
-					>
-						View Databases
-					</Button>
-				</Box>
-			</Box>
+	return (
+		<Container style={{ width: "100%", height: "100vh", padding: 0 }}>
+			{registry && registry.length > 0 ? (
+				<NeuroJsonGraph registry={registry} />
+			) : (
+				<div>No data available to display</div>
+			)}
 		</Container>
 	);
 };

src/redux/neurojson/neurojson.action.ts

@@ -11,7 +11,6 @@ export const fetchRegistry = createAsyncThunk(
 	"neurojson/fetchRegistry",
 	async () => {
 		const response = await NeurojsonService.getRegistry();
-		console.log(response);
 		return response.database;
 	}
 );

src/redux/neurojson/neurojson.slice.ts

@@ -1,5 +1,6 @@
 import {
 	fetchDocumentDetails,
+	fetchRegistry,
 	loadAllDocuments,
 	loadPaginatedData,
 } from "./neurojson.action";
@@ -96,6 +97,17 @@ const neurojsonSlice = createSlice({
 			.addCase(fetchDocumentDetails.rejected, (state, action) => {
 				state.loading = false;
 				state.error = action.payload as string;
+			})
+			.addCase(fetchRegistry.fulfilled, (state, action: PayloadAction<any>) => {
+				state.registry = action.payload;
+			})
+			.addCase(fetchRegistry.rejected, (state, action) => {
+				state.registry = null;
+				state.error = action.payload as string;
+			})
+			.addCase(fetchRegistry.pending, (state) => {
+				state.loading = true;
+				state.error = null;
 			});
 	},
 });