Skip to content

Commit 5778524

Browse files
elainefan331elainefan331
committed
slide-in node info panel component structure completed
1 parent 7456be2 commit 5778524

File tree

5 files changed

+278
-8
lines changed

5 files changed

+278
-8
lines changed

‎package.json‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,7 @@
6565
]
6666
},
6767
"resolutions": {
68-
"postcss": "^8.4.31",
69-
"nth-check": "^2.0.1"
70-
}
71-
68+
"postcss": "^8.4.31",
69+
"nth-check": "^2.0.1"
70+
}
7271
}

‎src/components/NodeInfoPanel.tsx‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
import React from "react";
2+
import { Box, Typography, IconButton, Drawer, Grid, Card, CardContent, CardActions, Button } from "@mui/material";
3+
import CloseIcon from "@mui/icons-material/Close";
4+
import { NodeObject } from "modules/universe/NeuroJsonGraph";
5+
import { Colors} from "design/theme";
6+
7+
interface NodeInfoPanelProps {
8+
open: boolean;
9+
onClose: () => void;
10+
nodeData: NodeObject | null;
11+
}
12+
13+
const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({ open, onClose, nodeData }) => {
14+
console.log("nodeData:", nodeData);
15+
return (
16+
<Drawer
17+
anchor="right"
18+
// open={true}
19+
open={open}
20+
onClose={onClose}
21+
sx={{
22+
"& .MuiDrawer-paper": {
23+
width: "30%",
24+
padding: "1rem",
25+
backgroundColor: Colors.lightGray,
26+
boxShadow: "-2px 0 8px rgba(0, 0, 0, 0.2)",
27+
},
28+
}}
29+
>
30+
<Box>
31+
{nodeData? (
32+
<>
33+
{/* Close Button */}
34+
<Box display="flex" justifyContent="space-between" alignItems="center">
35+
<Typography variant="h6" sx={{color: Colors.primary.dark}}>{nodeData.name}</Typography>
36+
<IconButton onClick={onClose} sx={{color: Colors.primary.main}}>
37+
<CloseIcon />
38+
</IconButton>
39+
</Box>
40+
{/* Node Metadata */}
41+
<Grid container spacing={2}>
42+
<Grid item xs={12}>
43+
<Typography>Website</Typography>
44+
<Typography>
45+
<a href={nodeData.url} target="_blank">{nodeData.url}</a>
46+
</Typography>
47+
</Grid>
48+
49+
<Grid item xs={12}>
50+
<Typography>Number of Datasets</Typography>
51+
<Typography>{nodeData.datasets}</Typography>
52+
</Grid>
53+
54+
<Grid item xs={12}>
55+
<Typography>Data Types</Typography>
56+
<Typography>{nodeData.datatype.join(",")}</Typography>
57+
</Grid>
58+
59+
<Grid item xs={12}>
60+
<Typography>Data Standards</Typography>
61+
<Typography>{nodeData.standard.join(",")}</Typography>
62+
</Grid>
63+
64+
<Grid item xs={12}>
65+
<Typography>Upstream Contact</Typography>
66+
<Typography>{nodeData.support}</Typography>
67+
</Grid>
68+
69+
<Grid item xs={12}>
70+
<Typography>NeuroJSON-Cuated Datasets</Typography>
71+
</Grid>
72+
</Grid>
73+
{/*database info card*/}
74+
<Card sx={{ mt:2, backgroundColor: Colors.white }}>
75+
<CardContent>
76+
<Grid container spacing={1}>
77+
<Grid item xs={12}>
78+
<Typography>NeuroJSON.io Database Name</Typography>
79+
<Typography></Typography>
80+
</Grid>
81+
<Grid item xs={12}>
82+
<Typography>REST-API URL</Typography>
83+
<Typography></Typography>
84+
</Grid>
85+
<Grid item xs={12}>
86+
<Typography>Database Creation Time</Typography>
87+
<Typography></Typography>
88+
</Grid>
89+
<Grid item xs={12}>
90+
<Typography>Searchable Database Size</Typography>
91+
<Typography></Typography>
92+
</Grid>
93+
<Grid item xs={12}>
94+
<Typography>DatabaseDisk Size_compressed</Typography>
95+
<Typography></Typography>
96+
</Grid>
97+
</Grid>
98+
</CardContent>
99+
<CardActions>
100+
<Grid container direction="column" spacing={1}>
101+
<Grid item xs={12}>
102+
<Button
103+
variant="contained"
104+
fullWidth
105+
sx={{
106+
backgroundColor: Colors.primary.main,
107+
color: Colors.white,
108+
"&:hover": {
109+
backgroundColor: Colors.primary.dark,
110+
},
111+
}}
112+
>
113+
Browse Database
114+
</Button>
115+
</Grid>
116+
<Grid item xs={12}>
117+
<Button
118+
variant="contained"
119+
fullWidth
120+
sx={{
121+
backgroundColor: Colors.primary.main,
122+
color: Colors.white,
123+
"&:hover": {
124+
backgroundColor: Colors.primary.dark,
125+
},
126+
}}
127+
>
128+
Search Subjects
129+
</Button>
130+
</Grid>
131+
<Grid item xs={12}>
132+
<Button
133+
variant="contained"
134+
fullWidth
135+
sx={{
136+
backgroundColor: Colors.primary.main,
137+
color: Colors.white,
138+
"&:hover": {
139+
backgroundColor: Colors.primary.dark,
140+
},
141+
}}
142+
>
143+
Advanced Search
144+
</Button>
145+
</Grid>
146+
<Grid item xs={12}>
147+
<Button
148+
variant="contained"
149+
fullWidth
150+
sx={{
151+
backgroundColor: Colors.primary.main,
152+
color: Colors.white,
153+
"&:hover": {
154+
backgroundColor: Colors.primary.dark,
155+
},
156+
}}
157+
>
158+
DownLoad Database
159+
</Button>
160+
</Grid>
161+
</Grid>
162+
</CardActions>
163+
164+
</Card>
165+
{/* <Box display="flex" flexDirection="column">
166+
<Box>
167+
<Typography><strong>NeuroJSON.io Database Name</strong></Typography>
168+
<Typography><strong>REST-API URL</strong></Typography>
169+
<Typography><strong>Database Creation Time</strong></Typography>
170+
<Typography><strong>Searchable Database Size</strong></Typography>
171+
<Typography><strong>DatabaseDisk Size_compressed</strong></Typography>
172+
</Box>
173+
</Box> */}
174+
</>
175+
) : (
176+
<Typography>Select a node to see metadata.</Typography>
177+
)}
178+
</Box>
179+
</Drawer>
180+
)
181+
};
182+
183+
export default NodeInfoPanel;

‎src/modules/universe/NeuroJsonGraph.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,10 @@ export interface NodeObject {
1818
support: string;
1919
url: string;
2020
datasets: number;
21+
standard: string[]; // define type of standard property
2122
}
2223

23-
const NeuroJsonGraph: React.FC<{ registry: Database[] }> = ({ registry }) => {
24+
const NeuroJsonGraph: React.FC<{ registry: Database[], onNodeClick?: (node: NodeObject) => void }> = ({ registry, onNodeClick }) => {
2425
const navigate = useNavigate();
2526
const graphRef = useRef<HTMLDivElement>(null);
2627

@@ -57,6 +58,7 @@ const NeuroJsonGraph: React.FC<{ registry: Database[] }> = ({ registry }) => {
5758
url: db.url,
5859
datasets: db.datasets,
5960
size: size,
61+
standard: db.standard || [],// add standard property
6062
};
6163
}),
6264
links: registry.flatMap((db, index) => {
@@ -87,7 +89,10 @@ const NeuroJsonGraph: React.FC<{ registry: Database[] }> = ({ registry }) => {
8789
})
8890
.onNodeClick((node) => {
8991
const castNode = node as NodeObject;
90-
navigate(`/databases/${castNode.id}`);
92+
if (onNodeClick) {
93+
onNodeClick(castNode);
94+
}
95+
// navigate(`/databases/${castNode.id}`);
9196
})
9297
.nodeThreeObject((node) => {
9398
const castNode = node as NodeObject;

‎src/pages/Home.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,32 @@ import { Colors } from "design/theme";
1010
import { useAppDispatch } from "hooks/useAppDispatch";
1111
import { useAppSelector } from "hooks/useAppSelector";
1212
import NeuroJsonGraph from "modules/universe/NeuroJsonGraph";
13-
import React, { useEffect } from "react";
13+
import React, { useEffect, useState } from "react";
1414
import { useNavigate } from "react-router-dom";
1515
import { fetchRegistry } from "redux/neurojson/neurojson.action";
1616
import { NeurojsonSelector } from "redux/neurojson/neurojson.selector";
17+
import NodeInfoPanel from "components/NodeInfoPanel";
18+
import { NodeObject } from "modules/universe/NeuroJsonGraph";
1719

1820
const Home: React.FC = () => {
1921
const navigate = useNavigate();
2022
const dispatch = useAppDispatch();
2123
const { registry, loading } = useAppSelector(NeurojsonSelector);
2224

25+
// State for selected node and panel visibility
26+
const [selectedNode, setSelectedNode] = useState<NodeObject | null>(null);
27+
const [panelOpen, setPanelOpen] = useState(false);
28+
2329
useEffect(() => {
2430
dispatch(fetchRegistry());
2531
}, [dispatch]);
2632

33+
// Handle node click: Set selected node and open panel
34+
const handleNodeClick = (node: NodeObject) => {
35+
setSelectedNode(node);
36+
setPanelOpen(true);
37+
};
38+
2739
return (
2840
<Container
2941
style={{
@@ -47,7 +59,7 @@ const Home: React.FC = () => {
4759
<CircularProgress sx={{ color: Colors.primary.main }} />
4860
</Box>
4961
) : registry && registry.length > 0 ? (
50-
<NeuroJsonGraph registry={registry} />
62+
<NeuroJsonGraph registry={registry} onNodeClick={handleNodeClick} />
5163
) : (
5264
<Box sx={{ textAlign: "center", mt: 4 }}>
5365
<Typography variant="h6" color={Colors.textSecondary}>
@@ -101,6 +113,8 @@ const Home: React.FC = () => {
101113
</Button>
102114
</Box>
103115
</Box>
116+
117+
<NodeInfoPanel open={panelOpen} onClose={() => setPanelOpen(false)} nodeData={selectedNode} />
104118
</Container>
105119
);
106120
};

0 commit comments

Comments
 (0)