Merge pull request #57 from NeuroJSON/dev-fan

elainefan331 · web-flow · commit ff5af0bf4421 · 2025-06-02T12:37:14.000-04:00
refactor: adjust layout and styles on Dataset Detail page
diff --git a/src/components/DatasetDetailPage/LoadDatasetTabs.tsx b/src/components/DatasetDetailPage/LoadDatasetTabs.tsx
@@ -1,4 +1,5 @@
-import { Tabs, Tab, Box, Typography } from "@mui/material";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { Tabs, Tab, Box, Typography, IconButton, Tooltip } from "@mui/material";
 import { Colors } from "design/theme";
 import React from "react";
 import { useState } from "react";
@@ -57,7 +58,9 @@ const LoadDatasetTabs: React.FC<LoadDatasetTabsProps> = ({
   const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
     setTabIndex(newValue);
   };
+  console.log("datasetDocument", datasetDocument);
   const datasetDesc = datasetDocument?.["dataset_description.json"];
+  console.log("datasetDesc", datasetDesc);
   const datasetName = datasetDesc?.Name?.includes(" - ")
     ? datasetDesc.Name.split(" - ")[1]
     : datasetDesc?.Name || datasetDocument?._id || docname;
@@ -81,6 +84,26 @@ const LoadDatasetTabs: React.FC<LoadDatasetTabsProps> = ({
     );
   };
 
+  const CopyableCodeBlock = ({ code }: { code: string }) => {
+    const handleCopy = () => {
+      navigator.clipboard.writeText(code);
+    };
+    return (
+      <Box sx={{ position: "relative" }}>
+        <IconButton
+          onClick={handleCopy}
+          size="small"
+          sx={{ position: "absolute", top: 5, right: 5 }}
+        >
+          <Tooltip title="Copy to clipboard">
+            <ContentCopyIcon fontSize="small" />
+          </Tooltip>
+        </IconButton>
+        <code style={flashcardStyles.codeBlock}>{code}</code>
+      </Box>
+    );
+  };
+
   return (
     <>
       <Tabs
@@ -118,20 +141,18 @@ const LoadDatasetTabs: React.FC<LoadDatasetTabsProps> = ({
             Load by URL with REST-API in Python
           </Typography>
           <Typography>Install:</Typography>
-          <code style={flashcardStyles.codeBlock}>
-            pip install jdata bjdata numpy
-          </code>
+          <CopyableCodeBlock code={`pip install jdata bjdata numpy`} />
           <Typography>Load from URL:</Typography>
-          <code style={flashcardStyles.codeBlock}>
-            {`import jdata as jd
+          <CopyableCodeBlock
+            code={`import jdata as jd
 data = jd.loadurl('${datasetUrl}')  
 
 # List all externally linked files
 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'})`}
-          </code>
+          />
         </Box>
       </TabPanel>
 
@@ -142,12 +163,10 @@ jd.jdlink(links, {'regex': 'anat/sub-0[12]_.*\\.nii'})`}
             Load by URL with REST-API in MATLAB
           </Typography>
           <Typography>Install:</Typography>
-          <code style={flashcardStyles.codeBlock}>
-            Download and addpath to JSONLab
-          </code>
+          <CopyableCodeBlock code={`Download and addpath to JSONLab`} />
           <Typography>Load from URL:</Typography>
-          <code style={flashcardStyles.codeBlock}>
-            {`data = loadjson('${datasetUrl}');
+          <CopyableCodeBlock
+            code={`data = loadjson('${datasetUrl}');
 
 % or without JSONLab (webread cannot decode JData annotations)
 data = webread('${datasetUrl}');
@@ -157,7 +176,7 @@ links = jsonpath(data, '$.._DataLink_');
 
 % Download & cache anatomical nii.gz data for sub-01/sub-02
 niidata = jdlink(links, 'regex', 'anat/sub-0[12]_.*\\.nii');`}
-          </code>
+          />
         </Box>
       </TabPanel>
 
@@ -168,13 +187,9 @@ niidata = jdlink(links, 'regex', 'anat/sub-0[12]_.*\\.nii');`}
             Use in MATLAB/Octave
           </Typography>
           <Typography>Load:</Typography>
-          <code
-            style={flashcardStyles.codeBlock}
-          >{`data = loadjd('${docname}.json');`}</code>
+          <CopyableCodeBlock code={`data = loadjd('${docname}.json');`} />
           <Typography>Read value:</Typography>
-          <code
-            style={flashcardStyles.codeBlock}
-          >{`data.(encodevarname('${onekey}'))`}</code>
+          <CopyableCodeBlock code={`data.(encodevarname('${onekey}'))`} />
         </Box>
       </TabPanel>
 
@@ -185,12 +200,12 @@ niidata = jdlink(links, 'regex', 'anat/sub-0[12]_.*\\.nii');`}
             Use in Python
           </Typography>
           <Typography>Load:</Typography>
-          <code style={flashcardStyles.codeBlock}>
-            {`import jdata as jd
+          <CopyableCodeBlock
+            code={`import jdata as jd
 data = jd.load('${docname}.json')`}
-          </code>
+          />
           <Typography>Read value:</Typography>
-          <code style={flashcardStyles.codeBlock}>{`data["${onekey}"]`}</code>
+          <CopyableCodeBlock code={`data["${onekey}"]`} />
         </Box>
       </TabPanel>
 
@@ -201,21 +216,17 @@ data = jd.load('${docname}.json')`}
             Use in C++
           </Typography>
           <Typography>Install:</Typography>
-          <code style={flashcardStyles.codeBlock}>
-            Download JSON for Modern C++ json.hpp
-          </code>
+          <CopyableCodeBlock code={`Download JSON for Modern C++ json.hpp`} />
           <Typography>Load:</Typography>
-          <code style={flashcardStyles.codeBlock}>
-            {`#include "json.hpp"
-        using json=nlohmann::ordered_json;
-        
-        std::ifstream datafile("${docname}.json");
-        json data(datafile);`}
-          </code>
+          <CopyableCodeBlock
+            code={`#include "json.hpp"
+using json=nlohmann::ordered_json;
+
+std::ifstream datafile("${docname}.json");
+json data(datafile);`}
+          />
           <Typography>Read value:</Typography>
-          <code
-            style={flashcardStyles.codeBlock}
-          >{`std::cout << data["${onekey}"];`}</code>
+          <CopyableCodeBlock code={`std::cout << data["${onekey}"];`} />
         </Box>
       </TabPanel>
 
@@ -226,24 +237,20 @@ data = jd.load('${docname}.json')`}
             Use in JS/Node.js
           </Typography>
           <Typography>Install:</Typography>
-          <code style={flashcardStyles.codeBlock}>
-            npm install jda numjs pako atob
-          </code>
+          <CopyableCodeBlock code={`npm install jda numjs pako atob`} />
           <Typography>Load:</Typography>
-          <code style={flashcardStyles.codeBlock}>
-            {`const fs = require("fs");
-        const jd = require("jda");
-        global.atob = require("atob");
+          <CopyableCodeBlock
+            code={`const fs = require("fs");
+const jd = require("jda");
+global.atob = require("atob");
         
-        const fn = "${docname}.json";
-        var jstr = fs.readFileSync(fn).toString().replace(/\\n/g, "");
-        var data = new jd(JSON.parse(jstr));
-        data = data.decode();`}
-          </code>
+const fn = "${docname}.json";
+var jstr = fs.readFileSync(fn).toString().replace(/\\n/g, "");
+var data = new jd(JSON.parse(jstr));
+data = data.decode();`}
+          />
           <Typography>Read value:</Typography>
-          <code
-            style={flashcardStyles.codeBlock}
-          >{`console.log(data.data["${onekey}"]);`}</code>
+          <CopyableCodeBlock code={`console.log(data.data["${onekey}"]);`} />
         </Box>
       </TabPanel>
     </>
diff --git a/src/components/DatasetPageCard.tsx b/src/components/DatasetPageCard.tsx
@@ -98,7 +98,10 @@ const DatasetPageCard: React.FC<DatasetPageCardProps> = ({
                 <Chip
                   label={`${doc.value.subj.length} subjects`}
                   size="small"
-                  sx={{ backgroundColor: Colors.purple, color: Colors.white }}
+                  sx={{
+                    backgroundColor: Colors.darkOrange,
+                    color: Colors.white,
+                  }}
                 />
               )}
               {doc.value.modality &&
@@ -108,7 +111,7 @@ const DatasetPageCard: React.FC<DatasetPageCardProps> = ({
                     label={mod}
                     size="small"
                     sx={{
-                      backgroundColor: Colors.purpleGrey,
+                      backgroundColor: Colors.purple,
                       color: Colors.white,
                     }}
                   />
diff --git a/src/pages/DatasetDetailPage.tsx b/src/pages/DatasetDetailPage.tsx
@@ -242,9 +242,19 @@ const DatasetDetailPage: React.FC = () => {
       externalLinks.forEach((link) => {
         const url = link.url;
         const match = url.match(/file=([^&]+)/);
+        // const filename = match
+        //   ? decodeURIComponent(match[1])
+        //   : `file-${link.index}`;
         const filename = match
-          ? decodeURIComponent(match[1])
+          ? (() => {
+              try {
+                return decodeURIComponent(match[1]);
+              } catch {
+                return match[1]; // fallback if decode fails
+              }
+            })()
           : `file-${link.index}`;
+
         const outputPath = `$HOME/.neurojson/io/${dbName}/${docId}/${filename}`;
 
         script += `curl -L --create-dirs "${url}" -o "${outputPath}"\n`;
@@ -519,9 +529,17 @@ const DatasetDetailPage: React.FC = () => {
       </style>
       <Box sx={{ padding: 4 }}>
         <Button
-          variant="contained"
+          variant="text"
           onClick={() => navigate(-1)}
-          sx={{ marginBottom: 2, backgroundColor: Colors.primary.main }}
+          sx={{
+            marginBottom: 2,
+            color: Colors.white,
+            "&:hover": {
+              transform: "scale(1.05)",
+              backgroundColor: "transparent",
+              textDecoration: "underline",
+            },
+          }}
         >
           Back
         </Button>
@@ -540,7 +558,7 @@ const DatasetDetailPage: React.FC = () => {
           {/* ✅ Dataset Title (From dataset_description.json) */}
           <Typography
             variant="h4"
-            color={Colors.primary.main}
+            color={Colors.darkPurple}
             sx={{ fontWeight: "bold", mb: 1 }}
           >
             {datasetDocument?.["dataset_description.json"]?.Name ??
@@ -579,7 +597,15 @@ const DatasetDetailPage: React.FC = () => {
                 "&:hover": { backgroundColor: "transparent" },
               }}
             >
-              <HomeIcon sx={{ color: Colors.primary.main }} />
+              <HomeIcon
+                sx={{
+                  color: Colors.darkPurple,
+                  "&:hover": {
+                    transform: "scale(1.1)",
+                    backgroundColor: "transparent",
+                  },
+                }}
+              />
             </Button>
 
             <Typography variant="h5" sx={{ marginX: 1, fontWeight: "bold" }}>
@@ -593,7 +619,11 @@ const DatasetDetailPage: React.FC = () => {
                 textTransform: "none",
                 fontSize: "1.2rem",
                 fontWeight: "bold",
-                color: Colors.primary.dark,
+                color: Colors.darkPurple,
+                "&:hover": {
+                  transform: "scale(1.05)",
+                  backgroundColor: "transparent",
+                },
               }}
             >
               {dbName?.toLowerCase()}
@@ -608,7 +638,7 @@ const DatasetDetailPage: React.FC = () => {
               variant="h5"
               sx={{
                 fontWeight: "bold",
-                color: Colors.textPrimary,
+                color: Colors.darkPurple,
                 fontSize: "1.2rem",
               }}
             >
@@ -633,9 +663,9 @@ const DatasetDetailPage: React.FC = () => {
               startIcon={<CloudDownloadIcon />}
               onClick={handleDownloadDataset}
               sx={{
-                backgroundColor: "#ffb300",
-                color: "black",
-                "&:hover": { backgroundColor: "#ff9100" },
+                backgroundColor: Colors.purple,
+                color: Colors.lightGray,
+                "&:hover": { backgroundColor: Colors.secondaryPurple },
               }}
             >
               {/* Download Dataset (1 Mb) */}
@@ -647,9 +677,9 @@ const DatasetDetailPage: React.FC = () => {
               startIcon={<DescriptionIcon />}
               onClick={handleDownloadScript}
               sx={{
-                backgroundColor: "#ffb300",
-                color: "black",
-                "&:hover": { backgroundColor: "#ff9100" },
+                backgroundColor: Colors.purple,
+                color: Colors.lightGray,
+                "&:hover": { backgroundColor: Colors.secondaryPurple },
               }}
             >
               Script to Download All Files ({downloadScript.length} Bytes)
@@ -682,6 +712,8 @@ const DatasetDetailPage: React.FC = () => {
             gap: 2,
             alignItems: "flex-start",
             marginTop: 2,
+            height: "960px", // fixed height container
+            // border: "2px solid red",
           }}
         >
           {/* ✅ JSON Viewer (left panel) */}
@@ -692,6 +724,8 @@ const DatasetDetailPage: React.FC = () => {
               padding: 2,
               borderRadius: "8px",
               overflowX: "auto",
+              height: "100%",
+              // border: "2px solid yellow",
             }}
           >
             <ReactJson
@@ -713,14 +747,19 @@ const DatasetDetailPage: React.FC = () => {
               display: "flex",
               flexDirection: "column",
               gap: 2,
+              height: "100%",
+              // border: "2px solid green",
             }}
           >
             <Box
               sx={{
-                backgroundColor: "#cdddf6",
+                backgroundColor: Colors.lightBlue,
                 padding: 2,
                 borderRadius: "8px",
-                marginTop: 4,
+                // marginTop: 4,
+                // border: "2px solid orange",
+                flex: 1,
+                // overflowY: "auto",
               }}
             >
               {/* ✅ Collapsible header */}
@@ -745,7 +784,7 @@ const DatasetDetailPage: React.FC = () => {
                   sx={{
                     maxHeight: "400px",
                     overflowY: "auto",
-                    marginTop: 2,
+                    // marginTop: 2,
                     paddingRight: 1,
                     "&::-webkit-scrollbar": {
                       width: "6px",
@@ -824,7 +863,10 @@ const DatasetDetailPage: React.FC = () => {
                 backgroundColor: "#eaeaea",
                 padding: 2,
                 borderRadius: "8px",
-                marginTop: 4,
+                // marginTop: 4,
+                flex: 1,
+                // overflowY: "auto",
+                // border: "2px solid blue",
               }}
             >
               {/* ✅ Header with toggle */}
@@ -849,7 +891,7 @@ const DatasetDetailPage: React.FC = () => {
                   sx={{
                     maxHeight: "400px",
                     overflowY: "auto",
-                    marginTop: 2,
+                    // marginTop: 2,
                     paddingRight: 1,
                     "&::-webkit-scrollbar": {
                       width: "6px",
