Add environment-based CORS configuration and improve navigation menu

.github/workflows/build-deploy-neurojsonio.yml

@@ -27,6 +27,7 @@ jobs:
           # PUBLIC_URL="/" yarn build
           export PUBLIC_URL="/"
           export REACT_APP_API_URL="/api/v1"
+          export REACT_APP_USE_CORS=false
           yarn build
 
       - name: Copy JS libraries

.github/workflows/build-deploy-zodiac.yml

@@ -36,6 +36,7 @@ jobs:
           # PUBLIC_URL="/dev/${{ env.BRANCH_NAME }}/" yarn build
           export PUBLIC_URL="/dev/${{ env.BRANCH_NAME }}/"
           export REACT_APP_API_URL="/dev/${{ env.BRANCH_NAME }}/api/v1"
+          export REACT_APP_USE_CORS=true
           yarn build
 
       - name: Copy JS libraries (jdata, bjdata etc.)

.gitignore

@@ -5,6 +5,7 @@
 node_modules
 .DS_Store
 package-lock.json
+cspell.json
 
 build
 

backend/src/controllers/activity.controller.js

@@ -360,7 +360,7 @@ const trackView = async (req, res) => {
   }
 };
 
-// get most viewd datasets
+// get most viewed datasets
 const getMostViewedDatasets = async (req, res) => {
   try {
     const limit = parseInt(req.query.limit) || 10;

package.json

@@ -61,6 +61,7 @@
     "@types/pako": "^2.0.3",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
     "@typescript-eslint/parser": "^5.31.0",
+    "cspell": "7",
     "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^7.0.1",
@@ -76,7 +77,8 @@
     "build": "craco build || react-scripts build",
     "test": "craco test || react-scripts test",
     "eject": "craco eject || react-scripts eject",
-    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}' --ext .js,.jsx,.ts,.tsx"
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}' --ext .js,.jsx,.ts,.tsx",
+    "spellcheck": "cspell ."
   },
   "browserslist": {
     "production": [

src/components/NavBar/NavItems.tsx

@@ -1,4 +1,14 @@
-import { Toolbar, Grid, Button, Typography, Box, Tooltip } from "@mui/material";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import {
+  Toolbar,
+  Grid,
+  Button,
+  Typography,
+  Box,
+  Tooltip,
+  Menu,
+  MenuItem,
+} from "@mui/material";
 import UserButton from "components/User/UserButton";
 import UserLogin from "components/User/UserLogin";
 import UserSignup from "components/User/UserSignup";
@@ -24,21 +34,66 @@ const NavItems: React.FC = () => {
   const [loginOpen, setLoginOpen] = useState(false);
   const [signupOpen, setSignupOpen] = useState(false);
 
+  // Resources dropdown state
+  const [resourcesAnchor, setResourcesAnchor] = useState<null | HTMLElement>(
+    null
+  );
+  const resourcesOpen = Boolean(resourcesAnchor);
+
   const handleLogout = () => {
     dispatch(logoutUser());
     navigate("/");
   };
 
+  const handleResourcesClick = (event: React.MouseEvent<HTMLElement>) => {
+    setResourcesAnchor(event.currentTarget);
+  };
+
+  const handleResourcesClose = () => {
+    setResourcesAnchor(null);
+  };
+
+  const resourcesMenu = [
+    {
+      category: "Converter",
+      items: [
+        {
+          text: "neuroj for Python",
+          url: "https://neurojson.org/Page/python-jdata",
+        },
+        { text: "neuroj for shell", url: "https://neurojson.org/Page/neuroj" },
+      ],
+    },
+    {
+      category: "MATLAB/Octave",
+      items: [
+        { text: "jsonlab", url: "" },
+        { text: "jdict", url: "" },
+        { text: "jnifty", url: "" },
+        { text: "jsnirfy", url: "" },
+      ],
+    },
+    {
+      category: "Python",
+      items: [
+        { text: "jdata", url: "https://neurojson.org/Page/python-jdata" },
+        { text: "bjdata", url: "https://neurojson.org/Page/python-bjdata" },
+      ],
+    },
+    {
+      category: "Format Specifications",
+      items: [
+        { text: "JData", url: "" },
+        { text: "BJData", url: "" },
+        { text: "JNIfTI", url: "" },
+        { text: "JSNIRF", url: "" },
+        { text: "JMesh", url: "" },
+        { text: "JGIFTI", url: "" },
+      ],
+    },
+  ];
+
   return (
-    // <Toolbar sx={{ marginTop: "0.5rem" }}>
-    //   <Grid
-    //     container
-    //     alignItems="center"
-    //     sx={{
-    //       maxWidth: "100%",
-    //     }}
-    //   >
-    //     <Grid item xs={12} sm={12} md={5} lg={5}>
     <>
       <Toolbar
         sx={{
@@ -145,7 +200,7 @@ const NavItems: React.FC = () => {
             textAlign: "center",
           }}
         >
-          {[
+          {/* {[
             { text: "About", url: RoutesEnum.ABOUT },
             { text: "Wiki", url: "https://neurojson.org/Wiki" },
             { text: "Search", url: RoutesEnum.SEARCH },
@@ -255,7 +310,113 @@ const NavItems: React.FC = () => {
                 </Link>
               )}
             </Grid>
+          ))} */}
+
+          {[
+            { text: "About", url: RoutesEnum.ABOUT },
+            { text: "Wiki", url: "https://neurojson.org/Wiki" },
+            { text: "Search", url: RoutesEnum.SEARCH },
+            { text: "Databases", url: RoutesEnum.DATABASES },
+          ].map(({ text, url }) => (
+            <Grid item key={text}>
+              {url?.startsWith("https") ? (
+                <a
+                  href={url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{ textDecoration: "none" }}
+                >
+                  <Typography
+                    align="center"
+                    fontWeight={600}
+                    lineHeight={"1.5rem"}
+                    letterSpacing={"0.05rem"}
+                    sx={{
+                      fontSize: {
+                        xs: "0.8rem",
+                        sm: "1rem",
+                      },
+                      color: Colors.white,
+                      transition: "color 0.3s ease, transform 0.3s ease",
+                      textTransform: "uppercase",
+                      "&:hover": {
+                        transform: "scale(1.2)",
+                        cursor: "pointer",
+                      },
+                    }}
+                  >
+                    {text}
+                  </Typography>
+                </a>
+              ) : (
+                <Link to={url} style={{ textDecoration: "none" }}>
+                  <Typography
+                    align="center"
+                    fontWeight={600}
+                    lineHeight={"1.5rem"}
+                    letterSpacing={"0.05rem"}
+                    sx={{
+                      fontSize: {
+                        xs: "0.8rem",
+                        sm: "1rem",
+                      },
+                      color: Colors.white,
+                      transition: "color 0.3s ease, transform 0.3s ease",
+                      textTransform: "uppercase",
+                      "&:hover": {
+                        transform: "scale(1.2)",
+                        cursor: "pointer",
+                      },
+                    }}
+                  >
+                    {text}
+                  </Typography>
+                </Link>
+              )}
+            </Grid>
           ))}
+
+          {/* Resources Dropdown */}
+          <Grid item>
+            <Box
+              onClick={handleResourcesClick}
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: 0.5,
+                cursor: "pointer",
+              }}
+            >
+              <Typography
+                align="center"
+                fontWeight={600}
+                lineHeight={"1.5rem"}
+                letterSpacing={"0.05rem"}
+                sx={{
+                  fontSize: {
+                    xs: "0.8rem",
+                    sm: "1rem",
+                  },
+                  color: Colors.white,
+                  transition: "color 0.3s ease, transform 0.3s ease",
+                  textTransform: "uppercase",
+                  "&:hover": {
+                    transform: "scale(1.2)",
+                  },
+                }}
+              >
+                Resources
+              </Typography>
+              <KeyboardArrowDownIcon
+                sx={{
+                  color: Colors.white,
+                  fontSize: "1.2rem",
+                  transition: "transform 0.3s ease",
+                  transform: resourcesOpen ? "rotate(180deg)" : "rotate(0deg)",
+                }}
+              />
+            </Box>
+          </Grid>
         </Box>
 
         {/* User Button */}
@@ -281,6 +442,73 @@ const NavItems: React.FC = () => {
         {/* </Grid> */}
         {/* </Grid> */}
       </Toolbar>
+
+      {/* Resources Dropdown Menu */}
+      <Menu
+        anchorEl={resourcesAnchor}
+        open={resourcesOpen}
+        onClose={handleResourcesClose}
+        PaperProps={{
+          sx: {
+            bgcolor: Colors.darkPurple,
+            color: Colors.white,
+            minWidth: "280px",
+            maxHeight: "500px",
+            mt: 1,
+          },
+        }}
+      >
+        {resourcesMenu.map((section, sectionIndex) => (
+          <Box key={section.category}>
+            {sectionIndex > 0 && (
+              <Box
+                sx={{
+                  borderTop: `1px solid ${Colors.lightGray}40`,
+                  mx: 1,
+                  my: 0.5,
+                }}
+              />
+            )}
+            <MenuItem
+              disabled
+              sx={{
+                color: Colors.green,
+                fontWeight: 700,
+                fontSize: "0.85rem",
+                opacity: "1 !important",
+                "&.Mui-disabled": {
+                  opacity: 1,
+                },
+              }}
+            >
+              {section.category}
+            </MenuItem>
+            {section.items.map((item) => (
+              <MenuItem
+                key={item.text}
+                onClick={() => {
+                  if (item.url) {
+                    window.open(item.url, "_blank");
+                    handleResourcesClose();
+                  }
+                }}
+                sx={{
+                  pl: 3,
+                  fontSize: "0.9rem",
+                  color: item.url ? Colors.white : Colors.lightGray,
+                  cursor: item.url ? "pointer" : "default",
+                  "&:hover": {
+                    bgcolor: item.url ? Colors.purpleGrey : "transparent",
+                    color: item.url ? Colors.darkPurple : Colors.lightGray,
+                  },
+                }}
+              >
+                {item.text}
+              </MenuItem>
+            ))}
+          </Box>
+        ))}
+      </Menu>
       <UserLogin
         open={loginOpen}
         onClose={() => setLoginOpen(false)}

src/components/NodeInfoPanel.tsx

@@ -41,7 +41,7 @@ const formatSize = (bytes?: number): string => {
 };
 
 // convert the date format
-const dateCoverter = (date?: string): string => {
+const dateConverter = (date?: string): string => {
   if (date === undefined) return "N/A";
   const newDate = new Date(Number(date) * 1000);
   const result = new Intl.DateTimeFormat("en-US", {
@@ -189,7 +189,7 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
 
               <Grid item xs={12}>
                 <Typography sx={{ color: Colors.green, fontWeight: "Bold" }}>
-                  NeuroJSON-Cuated Datasets
+                  NeuroJSON-Curated Datasets
                 </Typography>
                 {dbInfo ? (
                   <Typography sx={{ color: Colors.lightGray }}>
@@ -245,7 +245,7 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
                         Database Creation Time
                       </Typography>
                       <Typography>
-                        {dateCoverter(dbInfo.instance_start_time)}
+                        {dateConverter(dbInfo.instance_start_time)}
                       </Typography>
                     </Grid>
                     <Grid item xs={12}>

src/components/NodesFilter/FilterMenu.tsx

@@ -144,7 +144,7 @@ const FilterMenu: React.FC<FilterMenuProps> = ({
             </Typography>
             <ModalitiesFilter
               onFilter={onModalitiesFilter}
-              homeSeletedModalities={homeSelectedModalities}
+              homeSelectedModalities={homeSelectedModalities}
             />
           </Box>
         </Box>