Skip to content

Commit 126f6fd

Browse files
MarSH-UpMarSH-Up
authored
Feature/neurojson cors (#6)
* [Feature] Cors handle * [Feature] Cors handle * [Feature] Full Data access * [Feature] Full Data access * [Feature] Full Data access
1 parent a504164 commit 126f6fd

File tree

14 files changed

+874
-447
lines changed

14 files changed

+874
-447
lines changed

‎.github/workflows/netlify-deploy.yml‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
name: Deploy to Netlify (dev branch)
2+
3+
on:
4+
push:
5+
branches:
6+
- dev # Trigger only on pushes to the 'dev' branch
7+
8+
jobs:
9+
deploy:
10+
runs-on: ubuntu-latest
11+
12+
steps:
13+
- name: Checkout code
14+
uses: actions/checkout@v3
15+
16+
- name: Install Node.js
17+
uses: actions/setup-node@v3
18+
with:
19+
node-version: "22"
20+
21+
- name: Install dependencies
22+
run: npm install
23+
24+
- name: Build project
25+
run: npm run build # Update this command if your build script is different
26+
27+
- name: Deploy to Netlify
28+
uses: netlify/actions-cli@v3
29+
with:
30+
auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
31+
site-id: ${{ secrets.NETLIFY_SITE_ID }}
32+
deploy-dir: build # Adjust this if your build output folder is different

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
.env
22
node_modules
33
.DS_Store
4-
package-lock.json
4+
package-lock.json
5+
6+
build

‎src/components/Routes.tsx‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,34 @@
1-
import React from "react";
21
import FullScreen from "design/Layouts/FullScreen";
3-
import Home from "pages/Home";
42
import DatabasePage from "pages/DatabasePage";
5-
import DatasetPage from "pages/DatasetPage";
63
import DatasetDetailPage from "pages/DatasetDetailPage";
4+
import DatasetPage from "pages/DatasetPage";
5+
import Home from "pages/Home";
6+
import React from "react";
77
import { Navigate, Route, Routes as RouterRoutes } from "react-router-dom";
88
import RoutesEnum from "types/routes.enum";
99

1010
const Routes = () => (
11-
<RouterRoutes>
12-
{/* FullScreen Layout */}
13-
<Route element={<FullScreen />}>
14-
{/* Home Page */}
15-
<Route path={RoutesEnum.HOME} element={<Home />} />
16-
17-
{/* Databases Page */}
18-
<Route path={RoutesEnum.DATABASES} element={<DatabasePage />} />
11+
<RouterRoutes>
12+
{/* FullScreen Layout */}
13+
<Route element={<FullScreen />}>
14+
{/* Home Page */}
15+
<Route path={RoutesEnum.HOME} element={<Home />} />
16+
{/* Databases Page */}
17+
<Route path={RoutesEnum.DATABASES} element={<DatabasePage />} />
1918

20-
{/* Dataset List Page */}
21-
<Route path={`${RoutesEnum.DATABASES}/:dbName`} element={<DatasetPage />} />
19+
{/* Dataset List Page */}
20+
<Route
21+
path={`${RoutesEnum.DATABASES}/:dbName`}
22+
element={<DatasetPage />}
23+
/>
2224

23-
{/* Dataset Details Page */}
24-
<Route path={`${RoutesEnum.DATABASES}/:dbName/:docId`} element={<DatasetDetailPage />} />
25-
</Route>
26-
27-
{/* Fallback Route */}
28-
<Route path="*" element={<Navigate to={RoutesEnum.HOME} />} />
29-
</RouterRoutes>
25+
{/* Dataset Details Page */}
26+
<Route
27+
path={`${RoutesEnum.DATABASES}/:dbName/:docId`}
28+
element={<DatasetDetailPage />}
29+
/>
30+
</Route>
31+
</RouterRoutes>
3032
);
3133

3234
export default Routes;
33-

‎src/design/Layouts/FullScreen.tsx‎

Lines changed: 63 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AppBar, Box, Grid, Toolbar, Typography } from "@mui/material";
1+
import { AppBar, Box, Button, Grid, Toolbar, Typography } from "@mui/material";
22
import { Colors } from "design/theme";
33
import useIsLargeScreen from "hooks/useIsLargeScreen";
44
import { Outlet, useNavigate } from "react-router-dom";
@@ -33,47 +33,83 @@ const FullScreen = () => {
3333
sx={{ maxWidth: "100%" }}
3434
>
3535
<Grid item sm={12} md={12} lg={5}>
36-
<Box
36+
<Button
3737
sx={{
3838
display: "flex",
3939
alignItems: "center",
4040
justifyContent: "center",
4141
flexDirection: "column",
4242
}}
43+
onClick={() => navigate("/")}
4344
>
4445
<Typography variant="h1" sx={{ color: Colors.white }}>
4546
NeuroJSON.io
4647
</Typography>
4748
<Typography variant="h2">Free Data Worth Sharing</Typography>
48-
</Box>
49+
</Button>
4950
</Grid>
5051

5152
{[
52-
"Mission",
53-
"Get Started",
54-
"Contribute",
55-
"Tools",
56-
"Search",
57-
"Forum",
58-
"About",
59-
].map((text) => (
53+
{ text: "Mission", url: "https://neurojson.org/Doc/Start" },
54+
{
55+
text: "Get Started",
56+
url: "https://neurojson.org/Doc/Start/User",
57+
},
58+
{
59+
text: "Contribute",
60+
url: "https://neurojson.org/Doc/Start/Contributor",
61+
},
62+
{ text: "Tools", url: "https://neurojson.org/#software" },
63+
{ text: "Search", url: null },
64+
{
65+
text: "Forum",
66+
url: "https://github.com/orgs/NeuroJSON/discussions",
67+
},
68+
{ text: "About", url: "https://neurojson.org/#people" },
69+
].map(({ text, url }) => (
6070
<Grid item sm={3} md={2} lg={1} key={text} mt={"3rem"}>
61-
<Typography
62-
align="center"
63-
fontWeight={600}
64-
lineHeight={"1.5rem"}
65-
letterSpacing={"0.05rem"}
66-
sx={{
67-
transition: "color 0.3s ease, transform 0.3s ease",
68-
"&:hover": {
69-
color: Colors.white,
70-
transform: "scale(1.05)",
71-
cursor: "pointer",
72-
},
73-
}}
74-
>
75-
{text}
76-
</Typography>
71+
{url ? (
72+
<a
73+
href={url}
74+
target="_blank"
75+
rel="noopener noreferrer"
76+
style={{ textDecoration: "none" }}
77+
>
78+
<Typography
79+
align="center"
80+
fontWeight={600}
81+
lineHeight={"1.5rem"}
82+
letterSpacing={"0.05rem"}
83+
sx={{
84+
transition: "color 0.3s ease, transform 0.3s ease",
85+
"&:hover": {
86+
color: Colors.white,
87+
transform: "scale(1.05)",
88+
cursor: "pointer",
89+
},
90+
}}
91+
>
92+
{text}
93+
</Typography>
94+
</a>
95+
) : (
96+
<Typography
97+
align="center"
98+
fontWeight={600}
99+
lineHeight={"1.5rem"}
100+
letterSpacing={"0.05rem"}
101+
sx={{
102+
transition: "color 0.3s ease, transform 0.3s ease",
103+
"&:hover": {
104+
color: Colors.white,
105+
transform: "scale(1.05)",
106+
cursor: "pointer",
107+
},
108+
}}
109+
>
110+
{text}
111+
</Typography>
112+
)}
77113
</Grid>
78114
))}
79115
</Grid>

‎src/modules/universe/NeuroJsonGraph.tsx‎

Lines changed: 44 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import ForceGraph3D from "3d-force-graph";
22
import { Colors } from "design/theme";
33
import React, { useEffect, useRef } from "react";
4+
import { useNavigate } from "react-router-dom";
45
import * as THREE from "three";
56
import {
67
CSS2DObject,
78
CSS2DRenderer,
89
} from "three/examples/jsm/renderers/CSS2DRenderer";
910
import { Database } from "types/responses/registry.interface";
1011

11-
// Define the interface for NodeObject
12-
interface NodeObject {
12+
export interface NodeObject {
1313
id: string;
1414
name: string;
1515
dbname: string;
@@ -21,6 +21,7 @@ interface NodeObject {
2121
}
2222

2323
const NeuroJsonGraph: React.FC<{ registry: Database[] }> = ({ registry }) => {
24+
const navigate = useNavigate();
2425
const graphRef = useRef<HTMLDivElement>(null);
2526

2627
// Function to determine color and size based on node size
@@ -77,33 +78,67 @@ const NeuroJsonGraph: React.FC<{ registry: Database[] }> = ({ registry }) => {
7778
.graphData(graphData)
7879
.nodeRelSize(2)
7980
.nodeColor((node) => (node as NodeObject).color)
80-
.linkWidth(2) // Set the thickness of the links
81-
.backgroundColor("rgba(0,0,0,0)") // Transparent background
81+
.linkWidth(2)
82+
.backgroundColor("rgba(0,0,0,0)")
8283
.nodeLabel("name")
84+
.onNodeHover((node) => {
85+
// Change cursor on hover
86+
graphRef.current!.style.cursor = node ? "pointer" : "default";
87+
})
88+
.onNodeClick((node) => {
89+
const castNode = node as NodeObject;
90+
navigate(`/databases/${castNode.id}`);
91+
})
8392
.nodeThreeObject((node) => {
8493
const castNode = node as NodeObject;
8594

95+
// Create a group to hold sphere and glow
96+
const group = new THREE.Group();
97+
8698
// Create a 3D sphere for the node
8799
const sphereGeometry = new THREE.SphereGeometry(
88100
(castNode as any).size,
89101
16,
90102
16
91-
); // Dynamic radius
103+
);
92104
const sphereMaterial = new THREE.MeshBasicMaterial({
93105
color: (castNode as any).color,
94106
});
95107
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
108+
group.add(sphere);
109+
110+
// Create glow effect
111+
const glowGeometry = new THREE.SphereGeometry(
112+
(castNode as any).size * 1.2,
113+
16,
114+
16
115+
);
116+
const glowMaterial = new THREE.MeshBasicMaterial({
117+
color: (castNode as any).color,
118+
transparent: true,
119+
opacity: 0.2,
120+
});
121+
const glow = new THREE.Mesh(glowGeometry, glowMaterial);
122+
123+
// Animate glow
124+
const animate = () => {
125+
glow.scale.setScalar(1 + Math.sin(Date.now() * 0.003) * 0.1);
126+
requestAnimationFrame(animate);
127+
};
128+
animate();
129+
130+
group.add(glow);
96131

97132
// Add label as CSS2DObject
98133
const label = new CSS2DObject(document.createElement("div"));
99134
label.element.textContent = castNode.dbname || "Unnamed";
100135
label.element.style.color = Colors.primary.main;
101136
label.element.style.fontSize = "12px";
102-
label.element.style.pointerEvents = "none"; // Prevent interaction
103-
label.position.set(0, 10, 0); // Position label above the node
104-
sphere.add(label);
137+
label.element.style.pointerEvents = "none";
138+
label.position.set(0, 10, 0);
139+
group.add(label);
105140

106-
return sphere;
141+
return group;
107142
});
108143

109144
// Initialize CSS2DRenderer for 2D labels

0 commit comments

Comments
 (0)