Skip to content

Commit dd0aed4

Browse files
elainefan331elainefan331
authored
Merge pull request #31 from NeuroJSON/dev-fan
Merge dev-fan into staging
2 parents 0b08372 + ccba17d commit dd0aed4

File tree

12 files changed

+694
-405
lines changed

12 files changed

+694
-405
lines changed

‎public/.htaccess‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<IfModule mod_rewrite.c>
2+
3+
RewriteEngine on
4+
# RewriteBase /dev/dev-fan
5+
6+
# Don't rewrite files or directories
7+
RewriteCond %{REQUEST_FILENAME} -f [OR]
8+
RewriteCond %{REQUEST_FILENAME} -d
9+
RewriteRule ^ - [L]
10+
11+
# Rewrite everything else to index.html to allow html5 state links
12+
RewriteRule ^ /dev/dev-fan/index.html [L]
13+
14+
#RewriteCond %{REQUEST_FILENAME} (.*)/databases/.*$
15+
#RewriteRule ^(.*)/databases/.*  $1/index.html [QSA,L]
16+
</IfModule>

‎public/index.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="es">
2+
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="io_fav.png" />
@@ -44,6 +44,11 @@
4444
rel="stylesheet"
4545
/>
4646

47+
<!-- <link
48+
rel="stylesheet"
49+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
50+
/> -->
51+
4752
<title>NeuroJSON.io - Free Data Worth Sharing</title>
4853
</head>
4954
<body>

‎src/components/NodeInfoPanel.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,6 @@ const formatSize = (bytes?: number): string => {
4040
return `${bytes} Bytes`;
4141
}
4242
};
43-
// 1 Kilobyte (KB) = 1,024 Bytes
44-
// 1 Megabyte (MB) = 1,024 KB = 1,048,576 Bytes (1024*1024)
45-
// 1 Gigabyte (GB) = 1,024 MB = 1,073,741,824 Bytes (1024*1024*1024)
4643

4744
// convert the date format
4845
const dateCoverter = (date?: string): string => {

‎src/components/StatisticsBanner.tsx‎

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
import ContentPasteSearchIcon from "@mui/icons-material/ContentPasteSearch";
2+
import DatasetLinkedIcon from "@mui/icons-material/DatasetLinked";
3+
import PeopleAltIcon from "@mui/icons-material/PeopleAlt";
4+
import StorageIcon from "@mui/icons-material/Storage";
5+
import TopicIcon from "@mui/icons-material/Topic";
6+
import { Box, Typography } from "@mui/material";
7+
import { Colors } from "design/theme";
8+
import { useAppDispatch } from "hooks/useAppDispatch";
9+
import { useAppSelector } from "hooks/useAppSelector";
10+
import React, { useEffect } from "react";
11+
import { fetchDbStats } from "redux/neurojson/neurojson.action";
12+
import { DbStatsItem } from "redux/neurojson/types/neurojson.interface";
13+
import { RootState } from "redux/store";
14+
15+
// function for calculate links and size
16+
const calculateLinksAndSize = (dbStats: DbStatsItem[] | null) => {
17+
if (!dbStats) return { totalLinks: 0, totalSizeTB: "0.00" };
18+
19+
const filtered = dbStats.filter(
20+
(item) => item.view !== "dbinfo" && item.view !== "subjects"
21+
);
22+
23+
const totalLinks = filtered.reduce((acc, item) => acc + item.num, 0);
24+
const totalSizeBytes = filtered.reduce((acc, item) => acc + item.size, 0);
25+
const totalSizeTB = Math.floor(totalSizeBytes / 1024 ** 4);
26+
return { totalLinks, totalSizeTB };
27+
};
28+
29+
const StatisticsBanner: React.FC = () => {
30+
const dispatch = useAppDispatch();
31+
const dbstats = useAppSelector((state: RootState) => state.neurojson.dbStats);
32+
const registry = useAppSelector(
33+
(state: RootState) => state.neurojson.registry
34+
);
35+
36+
const databaseCount = registry?.length ?? "-";
37+
const datasetStat = dbstats?.find((item) => item.view === "dbinfo");
38+
const subjectStat = dbstats?.find((item) => item.view === "subjects");
39+
const { totalLinks, totalSizeTB } = calculateLinksAndSize(dbstats);
40+
41+
// format numbers with commas
42+
const formatNumber = (num: number | undefined) =>
43+
num?.toLocaleString() ?? "—";
44+
45+
useEffect(() => {
46+
dispatch(fetchDbStats());
47+
}, [dispatch]);
48+
49+
return (
50+
<Box
51+
sx={{
52+
backgroundColor: "rgba(0, 0, 0, 0.5)",
53+
backdropFilter: "blur(15px)",
54+
borderRadius: "8px",
55+
zIndex: 100,
56+
padding: "1rem",
57+
position: "absolute",
58+
// top: "2%",
59+
// top: "20%",
60+
// left: "8%",
61+
bottom: "13%",
62+
left: "50%",
63+
transform: "translateX(-50%)",
64+
display: "flex",
65+
// flexDirection: "column",
66+
// flexWrap: "wrap",
67+
gap: "2rem",
68+
}}
69+
>
70+
{/* Databases */}
71+
<Box
72+
sx={{
73+
display: "flex",
74+
flexDirection: "row",
75+
alignItems: "center",
76+
}}
77+
>
78+
<StorageIcon
79+
sx={{
80+
marginRight: 1,
81+
verticalAlign: "middle",
82+
color: Colors.lightGray,
83+
// color: Colors.darkPurple,
84+
fontSize: "2.5rem",
85+
}}
86+
/>
87+
<Box>
88+
<Typography
89+
sx={{
90+
// color: Colors.darkPurple,
91+
color: Colors.green,
92+
fontWeight: "bold",
93+
textAlign: "center",
94+
fontSize: "1.4rem",
95+
}}
96+
>
97+
{databaseCount.toLocaleString()}
98+
</Typography>
99+
<Typography
100+
sx={{
101+
// color: Colors.darkPurple,
102+
color: Colors.lightGray,
103+
fontWeight: "medium",
104+
fontSize: "0.9rem",
105+
textAlign: "center",
106+
}}
107+
>
108+
Databases
109+
</Typography>
110+
</Box>
111+
</Box>
112+
113+
{/* Datasets */}
114+
<Box sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
115+
<ContentPasteSearchIcon
116+
sx={{
117+
marginRight: 1,
118+
verticalAlign: "middle",
119+
// color: Colors.darkPurple,
120+
color: Colors.lightGray,
121+
fontSize: "2.5rem",
122+
}}
123+
/>
124+
<Box>
125+
<Typography
126+
sx={{
127+
// color: Colors.darkPurple,
128+
color: Colors.green,
129+
fontWeight: "bold",
130+
textAlign: "center",
131+
fontSize: "1.4rem",
132+
}}
133+
>
134+
{formatNumber(datasetStat?.num)}
135+
</Typography>
136+
<Typography
137+
sx={{
138+
// color: Colors.darkPurple,
139+
color: Colors.lightGray,
140+
fontWeight: "medium",
141+
fontSize: "0.9rem",
142+
textAlign: "center",
143+
}}
144+
>
145+
Datasets
146+
</Typography>
147+
</Box>
148+
</Box>
149+
{/* Subjects */}
150+
<Box sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
151+
<PeopleAltIcon
152+
sx={{
153+
marginRight: 1,
154+
verticalAlign: "middle",
155+
// color: Colors.darkPurple,
156+
color: Colors.lightGray,
157+
fontSize: "2.5rem",
158+
}}
159+
/>
160+
<Box>
161+
<Typography
162+
sx={{
163+
// color: Colors.darkPurple,
164+
color: Colors.green,
165+
fontWeight: "bold",
166+
textAlign: "center",
167+
fontSize: "1.4rem",
168+
}}
169+
>
170+
{formatNumber(subjectStat?.num)}
171+
</Typography>
172+
<Typography
173+
sx={{
174+
// color: Colors.darkPurple,
175+
color: Colors.lightGray,
176+
fontWeight: "medium",
177+
fontSize: "0.9rem",
178+
textAlign: "center",
179+
}}
180+
>
181+
Subjects
182+
</Typography>
183+
</Box>
184+
</Box>
185+
{/* Links */}
186+
<Box sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
187+
<DatasetLinkedIcon
188+
sx={{
189+
marginRight: 1,
190+
verticalAlign: "middle",
191+
// color: Colors.darkPurple,
192+
color: Colors.lightGray,
193+
fontSize: "2.5rem",
194+
}}
195+
/>
196+
<Box>
197+
<Typography
198+
sx={{
199+
// color: Colors.darkPurple,
200+
color: Colors.green,
201+
fontWeight: "bold",
202+
textAlign: "center",
203+
fontSize: "1.4rem",
204+
}}
205+
>
206+
{totalLinks.toLocaleString() ?? "-"}
207+
</Typography>
208+
<Typography
209+
sx={{
210+
// color: Colors.darkPurple,
211+
color: Colors.lightGray,
212+
fontWeight: "medium",
213+
fontSize: "0.9rem",
214+
textAlign: "center",
215+
}}
216+
>
217+
Links
218+
</Typography>
219+
</Box>
220+
</Box>
221+
{/* Size */}
222+
<Box sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
223+
<TopicIcon
224+
sx={{
225+
marginRight: 1,
226+
verticalAlign: "middle",
227+
// color: Colors.darkPurple,
228+
color: Colors.lightGray,
229+
fontSize: "2.5rem",
230+
}}
231+
/>
232+
<Box>
233+
<Typography
234+
sx={{
235+
// color: Colors.darkPurple,
236+
color: Colors.green,
237+
fontWeight: "bold",
238+
textAlign: "center",
239+
fontSize: "1.4rem",
240+
}}
241+
>
242+
{totalSizeTB ?? "-"}&nbsp;TB
243+
</Typography>
244+
<Typography
245+
sx={{
246+
// color: Colors.darkPurple,
247+
color: Colors.lightGray,
248+
fontWeight: "medium",
249+
fontSize: "0.9rem",
250+
textAlign: "center",
251+
}}
252+
>
253+
Size
254+
</Typography>
255+
</Box>
256+
</Box>
257+
</Box>
258+
);
259+
};
260+
261+
export default StatisticsBanner;

‎src/design/Layouts/FullScreen.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const FullScreen = () => {
2626
borderBottom: `2px solid ${Colors.primary.dark}`,
2727
boxShadow: `0px 0px 10px ${Colors.lightGray}`,
2828
left: "0",
29-
height: "6rem",
29+
minHeight: "6rem",
3030
}}
3131
>
3232
<Toolbar sx={{ marginTop: "0.5rem" }}>
@@ -36,7 +36,7 @@ const FullScreen = () => {
3636
justifyContent={justifyContentValue}
3737
sx={{ maxWidth: "100%" }}
3838
>
39-
<Grid item sm={12} md={12} lg={5}>
39+
<Grid item sm={12} md={5} lg={5}>
4040
<Button
4141
sx={{
4242
display: "flex",
@@ -65,8 +65,13 @@ const FullScreen = () => {
6565
</Button>
6666
</Grid>
6767
{/* Navigation links*/}
68-
<Grid item>
69-
<Grid container spacing={3} justifyContent="flex-end">
68+
<Grid item paddingLeft="2rem">
69+
<Grid
70+
container
71+
spacing={3}
72+
justifyContent="center"
73+
// border="2px solid red"
74+
>
7075
{[
7176
{ text: "ABOUT", url: "https://neurojson.org/Doc/Start" },
7277
{ text: "WIKI", url: "https://neurojson.org/Wiki" },
@@ -134,6 +139,7 @@ const FullScreen = () => {
134139
sx={{
135140
width: "100%",
136141
height: "calc(100vh - 6rem)",
142+
// minHeight: "calc(100vh - 6rem)",
137143
boxSizing: "border-box",
138144
marginTop: "6rem",
139145
// backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23282C56'/%3E%3Cstop offset='1' stop-color='%235865F2'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%234049a4'/%3E%3Cstop offset='1' stop-color='%235865F2'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='translate(400 0)'%3E%3Cg %3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(-273.6 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.61' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,

‎src/design/theme.ts‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -37,37 +37,30 @@ export const Colors = {
3737

3838
const theme = createTheme({
3939
typography: {
40-
fontFamily: [
41-
"Raleway",
42-
"Ubuntu",
43-
'"IBM Plex Sans"',
44-
"-apple-system",
45-
"BlinkMacSystemFont",
46-
'"Segoe UI"',
47-
"Roboto",
48-
'"Helvetica Neue"',
49-
"Arial",
50-
"sans-serif",
51-
].join(","),
40+
fontFamily: ["Raleway", "Ubuntu"].join(","),
5241
h1: {
5342
fontFamily: "Raleway",
5443
fontWeight: 700,
55-
fontSize: "2rem",
44+
// fontSize: "2rem",
45+
fontSize: "2.5rem",
5646
textTransform: "none",
5747
},
5848
h2: {
5949
fontWeight: 600,
60-
fontSize: "1.75rem",
50+
// fontSize: "1.75rem",
51+
fontSize: "1.2rem",
6152
textTransform: "none",
6253
color: Colors.secondary.main,
6354
},
6455
body1: {
6556
fontSize: "1rem",
6657
color: Colors.textPrimary,
58+
fontFamily: "Ubuntu",
6759
},
6860
body2: {
6961
fontSize: "0.875rem",
7062
color: Colors.textSecondary,
63+
fontFamily: "Ubuntu",
7164
},
7265
},
7366
});

0 commit comments

Comments
 (0)