Skip to content

Commit ddc288e

Browse files
elainefan331elainefan331
committed
refactor: extract section2 into dedicated component; refs #50 
1 parent 48335eb commit ddc288e

File tree

4 files changed

+236
-313
lines changed

4 files changed

+236
-313
lines changed

‎public/3dgraphClick.png‎

-269 KB
Binary file not shown.

src/components/HomePageComponents/SearchBar.tsx renamed to src/components/HomePageComponents/Section1.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import pako from "pako";
66
import React, { useState } from "react";
77
import { useNavigate } from "react-router-dom";
88

9-
const SearchBar: React.FC = () => {
9+
const Section1: React.FC = () => {
1010
const [keyword, setKeyword] = useState("");
1111
const navigate = useNavigate();
1212

@@ -38,7 +38,7 @@ const SearchBar: React.FC = () => {
3838
spacing={4}
3939
sx={{ mt: "10rem", width: "100%" }}
4040
>
41-
{/* landing page text */}
41+
{/* first row: logo and text */}
4242
<Grid item sx={{ width: "60%" }}>
4343
<Box
4444
sx={{
@@ -53,16 +53,13 @@ const SearchBar: React.FC = () => {
5353
width="30%"
5454
height="auto"
5555
></img>
56-
{/* <Box sx={{ display: "flex", flexDirection: "column" }}> */}
57-
5856
<Typography
5957
variant="h4"
6058
sx={{ color: Colors.lightGray, fontWeight: "bold" }}
6159
>
6260
Efficiently manage and explore your databases and datasets with
6361
ease.
6462
</Typography>
65-
{/* </Box> */}
6663
</Box>
6764
</Grid>
6865

@@ -127,4 +124,4 @@ const SearchBar: React.FC = () => {
127124
);
128125
};
129126

130-
export default SearchBar;
127+
export default Section1;

‎src/components/HomePageComponents/Section2.tsx‎

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
import ArrowForwardOutlinedIcon from "@mui/icons-material/ArrowForwardOutlined";
2+
import { Typography, Box, Button, CircularProgress } from "@mui/material";
3+
import FilterMenu from "components/NodesFilter/FilterMenu";
4+
import { Colors } from "design/theme";
5+
import NeuroJsonGraph from "modules/universe/NeuroJsonGraph";
6+
import { NodeObject } from "modules/universe/NeuroJsonGraph";
7+
import React from "react";
8+
import { useNavigate } from "react-router-dom";
9+
10+
interface Section2Props {
11+
registry: any[] | null;
12+
filteredRegistry: any[];
13+
filterKeyword: string;
14+
selectedModalities: string[];
15+
setFilterKeyword: (keyword: string) => void;
16+
setSelectedModalities: (modalities: string[]) => void;
17+
onNodeClick: (node: NodeObject) => void;
18+
}
19+
20+
const Section2: React.FC<Section2Props> = ({
21+
registry,
22+
filteredRegistry,
23+
filterKeyword,
24+
selectedModalities,
25+
setFilterKeyword,
26+
setSelectedModalities,
27+
onNodeClick,
28+
}) => {
29+
const navigate = useNavigate();
30+
31+
return (
32+
<Box // white background
33+
sx={{
34+
zIndex: "2",
35+
position: "relative",
36+
width: "100%",
37+
backgroundColor: Colors.white,
38+
padding: "5rem 7rem",
39+
}}
40+
>
41+
<Box // tri-colors card
42+
sx={{
43+
zIndex: "3",
44+
position: "relative",
45+
width: "100%",
46+
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2371feed'/%3E%3Cstop offset='1' stop-color='%2371feed' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23abb2f9'/%3E%3Cstop offset='1' stop-color='%23abb2f9' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231fa0f6'/%3E%3Cstop offset='1' stop-color='%231fa0f6' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2302DEC4'/%3E%3Cstop offset='1' stop-color='%2302DEC4' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%235865F2'/%3E%3Cstop offset='1' stop-color='%235865F2' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E")`,
47+
backgroundAttachment: "fixed",
48+
backgroundSize: "cover",
49+
overflow: "auto",
50+
borderRadius: "20px",
51+
}}
52+
>
53+
{/* Filter Menu Button */}
54+
<Box sx={{ position: "absolute", top: 20, left: 20, zIndex: 100 }}>
55+
<FilterMenu
56+
onKeywordFilter={setFilterKeyword}
57+
onModalitiesFilter={setSelectedModalities}
58+
filterKeyword={filterKeyword}
59+
homeSelectedModalities={selectedModalities}
60+
/>
61+
</Box>
62+
63+
{/* title, text and buttons */}
64+
<Box
65+
sx={{
66+
position: { xs: "relative", md: "absolute" },
67+
top: { md: 80 },
68+
left: { md: 20 },
69+
padding: { xs: "80px 20px 0", md: 0 },
70+
}}
71+
>
72+
{/* title and text */}
73+
<Box
74+
sx={{
75+
display: "flex",
76+
flexDirection: "column",
77+
gap: 3,
78+
}}
79+
>
80+
<Typography
81+
variant="h3"
82+
sx={{
83+
color: Colors.purple,
84+
fontWeight: "bold",
85+
}}
86+
>
87+
Discover and Explore
88+
</Typography>
89+
<Typography
90+
variant="h6"
91+
sx={{
92+
color: Colors.purple,
93+
width: "30%",
94+
display: { xs: "none", sm: "none", md: "none", lg: "block" },
95+
}}
96+
>
97+
Dive into our interactive 3D graph to explore neuroimaging
98+
databases. Visualize meaningful connections, filter by modality,
99+
and access rich metadata instantly
100+
</Typography>
101+
</Box>
102+
103+
{/* top buttons: show only on large screens */}
104+
<Box
105+
sx={{
106+
display: { xs: "none", md: "none", lg: "flex" },
107+
flexDirection: "column",
108+
width: { xs: "100%", sm: "50%", md: "30%", lg: "15%" },
109+
maxWidth: "200px",
110+
mb: 2,
111+
position: { xs: "relative", md: "absolute" },
112+
zIndex: 10, // Higher than text and graph
113+
}}
114+
>
115+
<Button
116+
variant="outlined"
117+
sx={{
118+
color: Colors.purple,
119+
borderColor: Colors.purple,
120+
transition: "all 0.3s ease",
121+
marginTop: 5,
122+
"&:hover": {
123+
transform: "scale(1.05)",
124+
borderColor: Colors.purple,
125+
},
126+
}}
127+
>
128+
Start exploring
129+
<ArrowForwardOutlinedIcon />
130+
</Button>
131+
<Button
132+
variant="outlined"
133+
sx={{
134+
color: Colors.purple,
135+
borderColor: Colors.purple,
136+
transition: "all 0.3s ease",
137+
marginTop: 4,
138+
"&:hover": {
139+
transform: "scale(1.05)",
140+
borderColor: Colors.purple,
141+
},
142+
}}
143+
onClick={() => navigate("/databases")}
144+
>
145+
View All Databases
146+
</Button>
147+
</Box>
148+
</Box>
149+
150+
{/* 3d-graph */}
151+
<Box sx={{ minHeight: "400px" }}>
152+
{!registry ? (
153+
<Box sx={{ display: "flex", justifyContent: "center", mt: 4 }}>
154+
<CircularProgress sx={{ color: Colors.primary.main }} />
155+
</Box>
156+
) : filteredRegistry.length > 0 ? (
157+
<NeuroJsonGraph
158+
registry={filteredRegistry}
159+
onNodeClick={onNodeClick}
160+
/>
161+
) : (
162+
<Box sx={{ textAlign: "center", mt: 25, ml: 30 }}>
163+
<Typography variant="h6" color={Colors.darkPurple}>
164+
No matching nodes found
165+
</Typography>
166+
</Box>
167+
)}
168+
</Box>
169+
170+
{/* Bottom Buttons - Show only on smaller screens */}
171+
<Box
172+
sx={{
173+
display: { xs: "flex", md: "flex", lg: "none" },
174+
justifyContent: "center",
175+
flexDirection: "column",
176+
alignItems: "center",
177+
padding: "20px 0",
178+
width: "100%",
179+
}}
180+
>
181+
<Button
182+
variant="outlined"
183+
sx={{
184+
color: Colors.purple,
185+
borderColor: Colors.purple,
186+
transition: "all 0.3s ease",
187+
marginBottom: 2,
188+
width: "200px",
189+
"&:hover": {
190+
transform: "scale(1.05)",
191+
borderColor: Colors.purple,
192+
},
193+
}}
194+
>
195+
Start exploring
196+
<ArrowForwardOutlinedIcon />
197+
</Button>
198+
<Button
199+
variant="outlined"
200+
sx={{
201+
color: Colors.purple,
202+
borderColor: Colors.purple,
203+
transition: "all 0.3s ease",
204+
width: "200px",
205+
"&:hover": {
206+
transform: "scale(1.05)",
207+
borderColor: Colors.purple,
208+
},
209+
}}
210+
onClick={() => navigate("/databases")}
211+
>
212+
View All Databases
213+
</Button>
214+
</Box>
215+
</Box>
216+
</Box>
217+
);
218+
};
219+
220+
export default Section2;

0 commit comments

Comments
 (0)