Skip to content

Commit 56e4550

Browse files
elainefan331elainefan331
committed
Resolve merge conflicts from CSS/aboutPag
2 parents 986b53b + 94fd7dd commit 56e4550

File tree

9 files changed

+203
-23
lines changed

9 files changed

+203
-23
lines changed

‎public/img/about_page/api.png‎

8.95 KB
Loading

‎public/img/about_page/download.png‎

7.07 KB
Loading

‎public/img/about_page/preview.png‎

7.81 KB
Loading

‎public/img/about_page/search.png‎

8.13 KB
Loading

‎public/img/about_page/search_icon.png‎

6.64 KB
Loading

‎src/components/DatasetDetailPage/LoadDatasetTabs.tsx‎

Lines changed: 48 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
2-
import { Tabs, Tab, Box, Typography, IconButton, Tooltip } from "@mui/material";
2+
import {
3+
Tabs,
4+
Tab,
5+
Box,
6+
Typography,
7+
IconButton,
8+
Tooltip,
9+
Link,
10+
} from "@mui/material";
311
import { Colors } from "design/theme";
412
import React from "react";
513
import { useState } from "react";
@@ -79,8 +87,15 @@ const LoadDatasetTabs: React.FC<LoadDatasetTabsProps> = ({
7987
const datasetName = datasetDesc?.Name?.includes(" - ")
8088
? datasetDesc.Name.split(" - ")[1]
8189
: datasetDesc?.Name || datasetDocument?._id || docname;
90+
console.log("datasetName", datasetName);
91+
console.log("dbname", dbname);
92+
console.log("pagename", pagename);
93+
console.log("onekey", onekey);
94+
// const datasetUrl = datasetName
95+
// ? `${serverUrl}${dbname}/${encodeURIComponent(datasetName)}/`
96+
// : `${serverUrl}${dbname}/`;
8297
const datasetUrl = datasetName
83-
? `${serverUrl}${dbname}/${encodeURIComponent(datasetName)}/`
98+
? `${serverUrl}${dbname}/${pagename}`
8499
: `${serverUrl}${dbname}/`;
85100

86101
const TabPanel = ({
@@ -212,7 +227,7 @@ data = jd.loadurl('${datasetUrl}')
212227
links = jd.jsonpath(data, '$.._DataLink_')
213228
214229
# Download & cache anatomical nii.gz data for sub-01/sub-02
215-
jd.jdlink(links, {'regex': 'anat/sub-0[12]_.*\\.nii'})`}
230+
jd.jdlink(links, {'regex': 'anat/sub-0[12]_.*\.nii'})`}
216231
language="python"
217232
/>
218233
</Box>
@@ -225,10 +240,20 @@ jd.jdlink(links, {'regex': 'anat/sub-0[12]_.*\\.nii'})`}
225240
Load by URL with REST-API in MATLAB
226241
</Typography>
227242
<Typography>Install:</Typography>
228-
<CopyableCodeBlock
243+
{/* <CopyableCodeBlock
229244
code={`Download and addpath to JSONLab`}
230245
language="text"
231-
/>
246+
/> */}
247+
<Typography>
248+
Download and addpath to{" "}
249+
<Link
250+
href="https://github.com/NeuroJSON/jsonlab"
251+
target="_blank"
252+
rel="noopener noreferrer"
253+
>
254+
JSONLab
255+
</Link>
256+
</Typography>
232257
<Typography>Load from URL:</Typography>
233258
<CopyableCodeBlock
234259
code={`data = loadjson('${datasetUrl}');
@@ -240,7 +265,7 @@ data = webread('${datasetUrl}');
240265
links = jsonpath(data, '$.._DataLink_');
241266
242267
% Download & cache anatomical nii.gz data for sub-01/sub-02
243-
niidata = jdlink(links, 'regex', 'anat/sub-0[12]_.*\\.nii');`}
268+
niidata = jdlink(links, 'regex', 'anat/sub-0[12]_.*\.nii');`}
244269
language="matlab"
245270
/>
246271
</Box>
@@ -254,7 +279,8 @@ niidata = jdlink(links, 'regex', 'anat/sub-0[12]_.*\\.nii');`}
254279
</Typography>
255280
<Typography>Load:</Typography>
256281
<CopyableCodeBlock
257-
code={`data = loadjd('${docname}.json');`}
282+
// code={`data = loadjd('${docname}.json');`}
283+
code={`data = loadjd('${pagename}.json');`}
258284
language="matlab"
259285
/>
260286
<Typography>Read value:</Typography>
@@ -274,7 +300,7 @@ niidata = jdlink(links, 'regex', 'anat/sub-0[12]_.*\\.nii');`}
274300
<Typography>Load:</Typography>
275301
<CopyableCodeBlock
276302
code={`import jdata as jd
277-
data = jd.load('${docname}.json')`}
303+
data = jd.load('${pagename}.json')`}
278304
language="python"
279305
/>
280306
<Typography>Read value:</Typography>
@@ -289,16 +315,26 @@ data = jd.load('${docname}.json')`}
289315
Use in C++
290316
</Typography>
291317
<Typography>Install:</Typography>
292-
<CopyableCodeBlock
318+
{/* <CopyableCodeBlock
293319
code={`Download JSON for Modern C++ json.hpp`}
294320
language="text"
295-
/>
321+
/> */}
322+
<Typography>
323+
Download{" "}
324+
<Link
325+
href="https://raw.githubusercontent.com/nlohmann/json/v3.11.3/single_include/nlohmann/json.hpp"
326+
target="_blank"
327+
rel="noopener noreferrer"
328+
>
329+
JSON for Modern C++ json.hpp
330+
</Link>
331+
</Typography>
296332
<Typography>Load:</Typography>
297333
<CopyableCodeBlock
298334
code={`#include "json.hpp"
299335
using json=nlohmann::ordered_json;
300336
301-
std::ifstream datafile("${docname}.json");
337+
std::ifstream datafile("${pagename}.json");
302338
json data(datafile);`}
303339
language="cpp"
304340
/>
@@ -327,7 +363,7 @@ json data(datafile);`}
327363
const jd = require("jda");
328364
global.atob = require("atob");
329365
330-
const fn = "${docname}.json";
366+
const fn = "${pagename}.json";
331367
var jstr = fs.readFileSync(fn).toString().replace(/\\n/g, "");
332368
var data = new jd(JSON.parse(jstr));
333369
data = data.decode();`}

‎src/components/HomePageComponents/Section3.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import ArrowCircleDownIcon from "@mui/icons-material/ArrowCircleDown";
22
import CloseIcon from "@mui/icons-material/Close";
33
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
4-
import { Typography, Box, Button, IconButton, Dialog } from "@mui/material";
4+
import { Typography, Box, IconButton, Dialog } from "@mui/material";
55
import { Colors } from "design/theme";
66
import React from "react";
77
import { useState } from "react";
@@ -119,7 +119,10 @@ const Section3: React.FC<Section3Props> = ({ scrollToNext }) => {
119119
src="https://neurojson.org/tutorials/overview/neurojsonio_volume_render_short.mp4"
120120
type="video/mp4"
121121
/> */}
122-
<source src="/video/preview_video.mp4" type="video/mp4" />
122+
<source
123+
src="https://neurojson.io/video/preview_video.mp4"
124+
type="video/mp4"
125+
/>
123126
Your browser does not support the video tag.
124127
</video>
125128
</Box>

‎src/pages/AboutPage.tsx‎

Lines changed: 102 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,77 @@
11
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
2-
import { Box, Typography, Container, Button, Grid } from "@mui/material";
2+
import {
3+
Box,
4+
Typography,
5+
Container,
6+
Button,
7+
Grid,
8+
Tooltip,
9+
} from "@mui/material";
310
import { Colors } from "design/theme";
4-
import React from "react";
11+
import React, { useRef } from "react";
12+
13+
const videoData = [
14+
{
15+
src: "search.png",
16+
alt: "search icon",
17+
tip: "Search tutotial video",
18+
video: "preview_video.mp4",
19+
// ref: searchVideoRef,
20+
},
21+
{ src: "preview.png", alt: "preview icon", tip: "Preview tutotial video" },
22+
{ src: "download.png", alt: "download icon", tip: "Download tutotial video" },
23+
{ src: "api.png", alt: "api icon", tip: "Restful API tutotial video" },
24+
];
525

626
const AboutPage: React.FC = () => {
27+
const searchVideoRef = useRef<HTMLVideoElement | null>(null);
28+
const previewVideoRef = useRef<HTMLVideoElement | null>(null);
29+
const downloadVideoRef = useRef<HTMLVideoElement | null>(null);
30+
const apiVideoRef = useRef<HTMLVideoElement | null>(null);
31+
32+
const videoData = [
33+
{
34+
src: "search.png",
35+
alt: "search icon",
36+
tip: "Search tutotial video",
37+
video: "preview_video.mp4",
38+
ref: searchVideoRef,
39+
},
40+
{
41+
src: "preview.png",
42+
alt: "preview icon",
43+
tip: "Preview tutotial video",
44+
video: "preview_video.mp4",
45+
ref: previewVideoRef,
46+
},
47+
{
48+
src: "download.png",
49+
alt: "download icon",
50+
tip: "Download tutotial video",
51+
video: "preview_video.mp4",
52+
ref: downloadVideoRef,
53+
},
54+
{
55+
src: "api.png",
56+
alt: "api icon",
57+
tip: "Restful API tutotial video",
58+
video: "preview_video.mp4",
59+
ref: searchVideoRef,
60+
},
61+
];
62+
763
return (
8-
<Box>
64+
<Box
65+
// sx={{
66+
// position: "relative",
67+
// }}
68+
>
69+
{/*section 1 */}
970
<Box
1071
sx={{
1172
padding: 3,
73+
paddingBottom: 10,
74+
position: "relative",
1275
}}
1376
>
1477
<Container maxWidth="lg">
@@ -93,12 +156,47 @@ const AboutPage: React.FC = () => {
93156
</Grid>
94157
</Grid>
95158
</Container>
159+
{/* icons */}
160+
<Box
161+
sx={{
162+
position: "absolute",
163+
top: "100%",
164+
left: "50%",
165+
transform: "translate(-50%, -50%)",
166+
display: "flex",
167+
flexDirection: "row",
168+
gap: 4,
169+
justifyContent: "center",
170+
}}
171+
>
172+
{videoData.map(({ src, alt, tip }) => (
173+
<Tooltip title={tip} arrow key={src}>
174+
<Box
175+
component="img"
176+
src={`${process.env.PUBLIC_URL}/img/about_page/${src}`}
177+
alt={alt}
178+
sx={{
179+
width: {
180+
xs: "25%",
181+
sm: "25%",
182+
md: "15%",
183+
},
184+
height: "auto",
185+
cursor: "pointer",
186+
transition: "transform 0.3s",
187+
"&:hover": { transform: "scale(1.1)" },
188+
}}
189+
/>
190+
</Tooltip>
191+
))}
192+
</Box>
96193
</Box>
97194

195+
{/* section 2*/}
98196
<Box
99197
sx={{
100198
backgroundColor: Colors.white,
101-
paddingTop: 5,
199+
paddingTop: 10,
102200
paddingBottom: 10,
103201
}}
104202
>

‎src/pages/DatasetDetailPage.tsx‎

Lines changed: 48 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,9 @@ const DatasetDetailPage: React.FC = () => {
143143
const [matches, setMatches] = useState<HTMLElement[]>([]);
144144
const [highlightedIndex, setHighlightedIndex] = useState(-1);
145145
const [downloadScript, setDownloadScript] = useState<string>("");
146+
const [downloadScriptSize, setDownloadScriptSize] = useState<number>(0);
147+
const [totalFileSize, setTotalFileSize] = useState<number>(0);
148+
146149
const [previewIsInternal, setPreviewIsInternal] = useState(false);
147150
const [isExternalExpanded, setIsExternalExpanded] = useState(true);
148151
const [expandedPaths, setExpandedPaths] = useState<string[]>([]);
@@ -166,11 +169,24 @@ const DatasetDetailPage: React.FC = () => {
166169
// };
167170

168171
// Dataset download button size calculation function
172+
// const formatSize = (sizeInBytes: number): string => {
173+
// if (sizeInBytes < 1024 * 1024) {
174+
// return `${(sizeInBytes / 1024).toFixed(1)} KB`;
175+
// }
176+
// return `${(sizeInBytes / 1024 / 1024).toFixed(2)} MB`;
177+
// };
169178
const formatSize = (sizeInBytes: number): string => {
170-
if (sizeInBytes < 1024 * 1024) {
179+
if (sizeInBytes < 1024) {
180+
return `${sizeInBytes} Bytes`;
181+
} else if (sizeInBytes < 1024 * 1024) {
171182
return `${(sizeInBytes / 1024).toFixed(1)} KB`;
183+
} else if (sizeInBytes < 1024 * 1024 * 1024) {
184+
return `${(sizeInBytes / (1024 * 1024)).toFixed(2)} MB`;
185+
} else if (sizeInBytes < 1024 * 1024 * 1024 * 1024) {
186+
return `${(sizeInBytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
187+
} else {
188+
return `${(sizeInBytes / (1024 * 1024 * 1024 * 1024)).toFixed(2)} TB`;
172189
}
173-
return `${(sizeInBytes / 1024 / 1024).toFixed(2)} MB`;
174190
};
175191

176192
// Recursive function to find `_DataLink_`
@@ -335,6 +351,16 @@ const DatasetDetailPage: React.FC = () => {
335351
const transformed = transformJsonForDisplay(datasetDocument);
336352
setTransformedDataset(transformed);
337353

354+
// Calculate total file size from size= query param
355+
let total = 0;
356+
links.forEach((link) => {
357+
const sizeMatch = link.url.match(/(?:[?&]size=)(\d+)/);
358+
if (sizeMatch && sizeMatch[1]) {
359+
total += parseInt(sizeMatch[1], 10);
360+
}
361+
});
362+
setTotalFileSize(total);
363+
338364
let totalSize = 0;
339365

340366
// 1️⃣ Sum external link sizes (from URL like ...?size=12345678)
@@ -401,6 +427,9 @@ const DatasetDetailPage: React.FC = () => {
401427
script += `curl -L --create-dirs "${url}" -o "${outputPath}"\n`;
402428
});
403429
setDownloadScript(script);
430+
// ✅ Calculate and set script size
431+
const scriptBlob = new Blob([script], { type: "text/plain" });
432+
setDownloadScriptSize(scriptBlob.size);
404433
}
405434
}, [datasetDocument]);
406435

@@ -754,6 +783,14 @@ const DatasetDetailPage: React.FC = () => {
754783
</Box>
755784
);
756785
}
786+
console.log("datasetDocument", datasetDocument);
787+
const onekey = datasetDocument
788+
? datasetDocument.hasOwnProperty("README")
789+
? "README"
790+
: datasetDocument.hasOwnProperty("dataset_description.json")
791+
? "dataset_description.json"
792+
: "_id"
793+
: "_id";
757794

758795
return (
759796
<>
@@ -937,8 +974,13 @@ const DatasetDetailPage: React.FC = () => {
937974
"&:hover": { backgroundColor: Colors.secondaryPurple },
938975
}}
939976
>
940-
Script to Download All Files ({downloadScript.length} Bytes)
941-
(links: {externalLinks.length})
977+
{/* Script to Download All Files ({downloadScript.length} Bytes) */}
978+
Script to Download All Files ({formatSize(downloadScriptSize)})
979+
{/* (links: {externalLinks.length}) */}
980+
{externalLinks.length > 0 &&
981+
` (links: ${externalLinks.length}, total: ${formatSize(
982+
totalFileSize
983+
)})`}
942984
</Button>
943985

944986
<Box display="flex" alignItems="center" gap={1} sx={{ ml: "auto" }}>
@@ -1297,7 +1339,8 @@ const DatasetDetailPage: React.FC = () => {
12971339
dbname={dbName || ""}
12981340
serverUrl={"https://neurojson.io:7777/"}
12991341
datasetDocument={datasetDocument}
1300-
onekey={"dataset_description.json"}
1342+
// onekey={"dataset_description.json"}
1343+
onekey={onekey}
13011344
/>
13021345

13031346
{/* Global spinner while loading (before modal mounts) */}

0 commit comments

Comments
 (0)