Fix typos across codebase

Author: elainefan331

.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/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>

src/components/NodesFilter/ModalitiesFilter.tsx

@@ -11,22 +11,22 @@ import React, { useEffect, useState } from "react";
 
 interface ModalitiesFilterProps {
   onFilter: (selectedModalities: string[]) => void;
-  homeSeletedModalities: string[]; // add prop to receive parent state
+  homeSelectedModalities: string[]; // add prop to receive parent state
 }
 
 const modalitiesList = ["mri", "pet", "meg", "eeg", "ieeg", "dwi", "fnirs"];
 
 const ModalitiesFilter: React.FC<ModalitiesFilterProps> = ({
   onFilter,
-  homeSeletedModalities,
+  homeSelectedModalities,
 }) => {
   const [selectedModalities, setSelectedModalities] = useState<string[]>(
-    homeSeletedModalities
+    homeSelectedModalities
   );
 
   useEffect(() => {
-    setSelectedModalities(homeSeletedModalities);
-  }, [homeSeletedModalities]);
+    setSelectedModalities(homeSelectedModalities);
+  }, [homeSelectedModalities]);
 
   const handleModalityChange = (modality: string) => {
     const updatedModalities = selectedModalities.includes(modality)
@@ -36,7 +36,7 @@ const ModalitiesFilter: React.FC<ModalitiesFilterProps> = ({
     onFilter(updatedModalities);
   };
 
-  // reset function to clear all selected checkedboxes
+  // reset function to clear all selected checkboxes
   const handleReset = () => {
     setSelectedModalities([]); // clear the local state
     onFilter([]); // notify parent that selection is reset

src/components/SearchPage/DatabaseCard.tsx

@@ -46,7 +46,7 @@ const DatabaseCard: React.FC<Props> = ({
     }
   }, [dbId, dispatch]);
   const databaseLink = `${RoutesEnum.DATABASES}/${dbId}`;
-  // keyword hightlight functional component
+  // keyword highlight functional component
   const highlightKeyword = (text: string, keyword?: string) => {
     if (!keyword || !text?.toLowerCase().includes(keyword.toLowerCase())) {
       return text;

src/components/SearchPage/DatasetCard.tsx

@@ -122,7 +122,7 @@ const DatasetCard: React.FC<DatasetCardProps> = ({
     [parsedJson.value, keyword, visibleHasKeyword]
   );
 
-  // keyword hightlight functional component (only for visible fields)
+  // keyword highlight functional component (only for visible fields)
   const highlightKeyword = (text: string, keyword?: string) => {
     if (!keyword || !text?.toLowerCase().includes(keyword.toLowerCase())) {
       return text;

src/components/User/UserButton.tsx

@@ -138,7 +138,7 @@ const UserButton: React.FC<UserButtonProps> = ({
             </MenuItem>
           </>
         ) : (
-          // menu for lonin user
+          // menu for login user
           <>
             {userName && (
               <>

src/modules/universe/NeuroJsonGraph.tsx

@@ -23,7 +23,7 @@ export interface NodeObject {
 
 // Define the datatype to color mapping
 export const DATA_TYPE_COLORS: Record<string, [number, number, number]> = {
-  mri: [160, 138, 233], // soft laender
+  mri: [160, 138, 233],
   anat: [160, 138, 233],
   fmri: [152, 202, 32], // bright lime green
   func: [152, 202, 32],