Merge pull request #75 from NeuroJSON/dev-fan

Add .htaccess for routing, fix file size display, and enable download button in API tabs

Author: elainefan331

public/.htaccess

@@ -1,16 +1,9 @@
+RedirectMatch 404 /\.git
 <IfModule mod_rewrite.c>
-
-RewriteEngine on
-# RewriteBase /dev/dev-fan
-
-# Don't rewrite files or directories
-RewriteCond %{REQUEST_FILENAME} -f [OR]
-RewriteCond %{REQUEST_FILENAME} -d
-RewriteRule ^ - [L]
-
-# Rewrite everything else to index.html to allow html5 state links
-RewriteRule ^ /dev/dev-fan/index.html [L]
-
-#RewriteCond %{REQUEST_FILENAME} (.*)/databases/.*$
-#RewriteRule ^(.*)/databases/.*  $1/index.html [QSA,L]
-</IfModule>
+  RewriteEngine On 
+  RewriteBase / 
+  RewriteCond %{REQUEST_FILENAME} -f [OR] 
+  RewriteCond %{REQUEST_FILENAME} -d 
+  RewriteRule ^ - [L] 
+  RewriteRule ^ index.html [L]
+</IfModule>

public/img/about_page/api.png

@@ -1,5 +1,15 @@
+import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import { Tabs, Tab, Box, Typography, IconButton, Tooltip } from "@mui/material";
+import {
+  Tabs,
+  Tab,
+  Box,
+  Typography,
+  IconButton,
+  Tooltip,
+  Link,
+  Button,
+} from "@mui/material";
 import { Colors } from "design/theme";
 import React from "react";
 import { useState } from "react";
@@ -26,6 +36,7 @@ interface LoadDatasetTabsProps {
   serverUrl: string;
   datasetDocument?: any;
   onekey: string;
+  handleDownloadDataset: () => void;
 }
 
 const flashcardStyles = {
@@ -68,6 +79,7 @@ const LoadDatasetTabs: React.FC<LoadDatasetTabsProps> = ({
   serverUrl,
   datasetDocument,
   onekey,
+  handleDownloadDataset,
 }) => {
   const [tabIndex, setTabIndex] = useState(0);
   const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
@@ -79,8 +91,15 @@ const LoadDatasetTabs: React.FC<LoadDatasetTabsProps> = ({
   const datasetName = datasetDesc?.Name?.includes(" - ")
     ? datasetDesc.Name.split(" - ")[1]
     : datasetDesc?.Name || datasetDocument?._id || docname;
+  console.log("datasetName", datasetName);
+  console.log("dbname", dbname);
+  console.log("pagename", pagename);
+  console.log("onekey", onekey);
+  // const datasetUrl = datasetName
+  //   ? `${serverUrl}${dbname}/${encodeURIComponent(datasetName)}/`
+  //   : `${serverUrl}${dbname}/`;
   const datasetUrl = datasetName
-    ? `${serverUrl}${dbname}/${encodeURIComponent(datasetName)}/`
+    ? `${serverUrl}${dbname}/${pagename}`
     : `${serverUrl}${dbname}/`;
 
   const TabPanel = ({
@@ -186,8 +205,8 @@ const LoadDatasetTabs: React.FC<LoadDatasetTabsProps> = ({
       >
         <Tab label="Python (REST API)" />
         <Tab label="MATLAB (REST API)" />
-        <Tab label="MATLAB/Octave (Local)" />
         <Tab label="Python (Local)" />
+        <Tab label="MATLAB/Octave (Local)" />
         <Tab label="C++" />
         <Tab label="Node.js" />
       </Tabs>
@@ -212,7 +231,7 @@ data = jd.loadurl('${datasetUrl}')
 links = jd.jsonpath(data, '$.._DataLink_')
 
 # Download & cache anatomical nii.gz data for sub-01/sub-02
-jd.jdlink(links, {'regex': 'anat/sub-0[12]_.*\\.nii'})`}
+jd.jdlink(links, {'regex': 'anat/sub-0[12]_.*\.nii'})`}
             language="python"
           />
         </Box>
@@ -225,10 +244,16 @@ jd.jdlink(links, {'regex': 'anat/sub-0[12]_.*\\.nii'})`}
             Load by URL with REST-API in MATLAB
           </Typography>
           <Typography>Install:</Typography>
-          <CopyableCodeBlock
-            code={`Download and addpath to JSONLab`}
-            language="text"
-          />
+          <Typography>
+            Download and addpath to{" "}
+            <Link
+              href="https://github.com/NeuroJSON/jsonlab"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              JSONLab
+            </Link>
+          </Typography>
           <Typography>Load from URL:</Typography>
           <CopyableCodeBlock
             code={`data = loadjson('${datasetUrl}');
@@ -240,45 +265,79 @@ data = webread('${datasetUrl}');
 links = jsonpath(data, '$.._DataLink_');
 
 % Download & cache anatomical nii.gz data for sub-01/sub-02
-niidata = jdlink(links, 'regex', 'anat/sub-0[12]_.*\\.nii');`}
+niidata = jdlink(links, 'regex', 'anat/sub-0[12]_.*\.nii');`}
             language="matlab"
           />
         </Box>
       </TabPanel>
 
-      {/* FLASHCARD 3: MATLAB/Octave */}
+      {/* FLASHCARD 3: Python Local */}
       <TabPanel value={tabIndex} index={2}>
         <Box style={flashcardStyles.flashcard}>
           <Typography variant="h6" style={flashcardStyles.flashcardTitle}>
-            Use in MATLAB/Octave
+            Use in Python
           </Typography>
+
+          <Typography sx={{ marginBottom: 1 }}>Download dataset</Typography>
+          <Button
+            variant="contained"
+            startIcon={<CloudDownloadIcon />}
+            onClick={handleDownloadDataset}
+            sx={{
+              backgroundColor: Colors.purple,
+              color: Colors.lightGray,
+              mb: 2,
+              "&:hover": {
+                backgroundColor: Colors.secondaryPurple,
+              },
+            }}
+          >
+            Download Metadata
+          </Button>
           <Typography>Load:</Typography>
           <CopyableCodeBlock
-            code={`data = loadjd('${docname}.json');`}
-            language="matlab"
+            code={`import jdata as jd
+data = jd.load('${pagename}.json')`}
+            language="python"
           />
           <Typography>Read value:</Typography>
-          <CopyableCodeBlock
-            code={`data.(encodevarname('${onekey}'))`}
-            language="matlab"
-          />
+          <CopyableCodeBlock code={`data["${onekey}"]`} language="python" />
         </Box>
       </TabPanel>
 
-      {/* FLASHCARD 4: Python Local */}
+      {/* FLASHCARD 4: MATLAB/Octave */}
       <TabPanel value={tabIndex} index={3}>
         <Box style={flashcardStyles.flashcard}>
           <Typography variant="h6" style={flashcardStyles.flashcardTitle}>
-            Use in Python
+            Use in MATLAB/Octave
           </Typography>
+          <Typography sx={{ marginBottom: 1 }}>Download dataset</Typography>
+          <Button
+            variant="contained"
+            startIcon={<CloudDownloadIcon />}
+            onClick={handleDownloadDataset}
+            sx={{
+              backgroundColor: Colors.purple,
+              color: Colors.lightGray,
+              mb: 2,
+              "&:hover": {
+                backgroundColor: Colors.secondaryPurple,
+              },
+            }}
+          >
+            Download Metadata
+          </Button>
           <Typography>Load:</Typography>
           <CopyableCodeBlock
-            code={`import jdata as jd
-data = jd.load('${docname}.json')`}
-            language="python"
+            // code={`data = loadjd('${docname}.json');`}
+            code={`data = loadjd('${pagename}.json');`}
+            language="matlab"
           />
           <Typography>Read value:</Typography>
-          <CopyableCodeBlock code={`data["${onekey}"]`} language="python" />
+          <CopyableCodeBlock
+            code={`data.(encodevarname('${onekey}'))`}
+            language="matlab"
+          />
         </Box>
       </TabPanel>
 
@@ -289,16 +348,26 @@ data = jd.load('${docname}.json')`}
             Use in C++
           </Typography>
           <Typography>Install:</Typography>
-          <CopyableCodeBlock
+          {/* <CopyableCodeBlock
             code={`Download JSON for Modern C++ json.hpp`}
             language="text"
-          />
+          /> */}
+          <Typography>
+            Download{" "}
+            <Link
+              href="https://raw.githubusercontent.com/nlohmann/json/v3.11.3/single_include/nlohmann/json.hpp"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              JSON for Modern C++ json.hpp
+            </Link>
+          </Typography>
           <Typography>Load:</Typography>
           <CopyableCodeBlock
             code={`#include "json.hpp"
 using json=nlohmann::ordered_json;
 
-std::ifstream datafile("${docname}.json");
+std::ifstream datafile("${pagename}.json");
 json data(datafile);`}
             language="cpp"
           />
@@ -327,7 +396,7 @@ json data(datafile);`}
 const jd = require("jda");
 global.atob = require("atob");
         
-const fn = "${docname}.json";
+const fn = "${pagename}.json";
 var jstr = fs.readFileSync(fn).toString().replace(/\\n/g, "");
 var data = new jd(JSON.parse(jstr));
 data = data.decode();`}

public/img/about_page/download.png

@@ -115,11 +115,10 @@ const Section3: React.FC<Section3Props> = ({ scrollToNext }) => {
           </IconButton>
 
           <video controls style={{ width: "100%", borderRadius: "4px" }}>
-            {/* <source
-              src="https://neurojson.org/tutorials/overview/neurojsonio_volume_render_short.mp4"
+            <source
+              src="https://neurojson.io/video/preview_video.mp4"
               type="video/mp4"
-            /> */}
-            <source src="/video/preview_video.mp4" type="video/mp4" />
+            />
             Your browser does not support the video tag.
           </video>
         </Box>