Adjust 3d graph node spacing for better spatial distribution

Author: elainefan331

src/components/NodeInfoPanel.tsx

@@ -40,9 +40,6 @@ const formatSize = (bytes?: number): string => {
     return `${bytes} Bytes`;
   }
 };
-// 1 Kilobyte (KB)  = 1,024 Bytes
-// 1 Megabyte (MB)  = 1,024 KB      = 1,048,576 Bytes (1024*1024)
-// 1 Gigabyte (GB)  = 1,024 MB      = 1,073,741,824 Bytes (1024*1024*1024)
 
 // convert the date format
 const dateCoverter = (date?: string): string => {

src/modules/universe/NeuroJsonGraph.tsx

@@ -179,7 +179,7 @@ const NeuroJsonGraph: React.FC<{
       .graphData(graphData)
       .nodeRelSize(1)
       .nodeColor((node) => (node as NodeObject).color)
-      .linkWidth(1)
+      .linkWidth(0.5)
       .backgroundColor("rgba(0,0,0,0)")
       .nodeLabel("name")
       .onNodeHover((node) => {
@@ -284,7 +284,6 @@ const NeuroJsonGraph: React.FC<{
       ref={graphRef}
       style={{
         width: "100%",
-        marginLeft: "5%",
         maxHeight: "99%",
         backgroundColor: "transparent",
         position: "relative",

src/pages/Home.tsx

@@ -7,8 +7,6 @@ import {
   CircularProgress,
 } from "@mui/material";
 import NodeInfoPanel from "components/NodeInfoPanel";
-// import KeywordFilter from "components/NodesFilter/KeywordFilter";
-// import ModalitiesFilter from "components/NodesFilter/ModalitiesFilter";
 import FilterMenu from "components/NodesFilter/FilterMenu";
 import { Colors } from "design/theme";
 import { useAppDispatch } from "hooks/useAppDispatch";
@@ -90,25 +88,10 @@ const Home: React.FC = () => {
         overflow: "hidden",
         position: "relative",
         minHeight: "500px", // make sure the view databases card won't be cut when no nodes showing
+        // display: "flex",
+        // flexDirection: "column",
       }}
     >
-      {/* <Box sx={{ position: "absolute", top: 20, right: 20, zIndex: 10 }}>
-        <KeywordFilter onFilter={(query: string) => setFilterKeyword(query)} />
-      </Box>
-      <Box
-        sx={{
-          position: "absolute",
-          top: 100,
-          right: 20,
-          zIndex: 10,
-          backgroundColor: "white",
-          p: 2,
-          borderRadius: 2,
-        }}
-      >
-        <ModalitiesFilter onFilter={handleModalitiesFilter} />
-      </Box> */}
-
       {/* Filter Menu Button */}
       <Box sx={{ position: "absolute", top: 20, right: 20, zIndex: 10 }}>
         <FilterMenu
@@ -148,14 +131,14 @@ const Home: React.FC = () => {
         sx={{
           overflow: "hidden",
           maxWidth: "35%",
+          // border: "2px yellow solid",
+          // width: "100%",
           zIndex: "3",
           position: "absolute",
-          top: "6%",
+          top: "10%",
           left: "1%",
           backgroundColor: "rgba(97, 109, 243, 0.4)",
           // backgroundColor: "rgba(160, 165, 194, 0.4)",
-          // backgroundColor: Colors.primary.dark,
-
           backdropFilter: "blur(10px)",
           // boxShadow: `2px 2px 5px ${Colors.lightGray}`,
           padding: "1.5rem",