Made a hanful of UI changes

neurobagel · Oct 4, 2024 · c657f76 · c657f76
1 parent 7b18b38
commit c657f76
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 16 deletions.
diff --git a/src/components/CardContainer.tsx b/src/components/CardContainer.tsx
@@ -55,7 +55,7 @@ function CardContainer({
               return repo.tsv_exists;
             case 'has participants.json':
               return repo.json_exists;
-            case 'not annotated':
+            case 'not annotated using Neurobagel':
               return !repo.annotated;
             default:
               return true;

diff --git a/src/components/Download.tsx b/src/components/Download.tsx
@@ -5,7 +5,11 @@ import repos from '../assets/repos.json';
 import CardContainer from './CardContainer';
 
 function Download({ onSomeEvent }: { onSomeEvent: (error: string, variant: VariantType) => void }) {
-  const statusOptions = ['has participants.tsv', 'has participants.json', 'not annotated'];
+  const statusOptions = [
+    'has participants.tsv',
+    'has participants.json',
+    'not annotated using Neurobagel',
+  ];
   const [nameFilters, setNameFilters] = useState<string[]>([]);
   const [statusFilters, setStatusFilters] = useState<string[]>([]);
 

diff --git a/src/components/Instructions.tsx b/src/components/Instructions.tsx
@@ -1,4 +1,6 @@
 import DialogContentText from '@mui/material/DialogContentText';
+import DownloadIcon from '@mui/icons-material/Download';
+import CheckCircleSharpIcon from '@mui/icons-material/CheckCircleSharp';
 
 function instructions() {
   return (
@@ -8,13 +10,19 @@ function instructions() {
         <li>Find the repository for the dataset you&apos;d like to work on</li>
         <ul>
           <li>
-            You can filter through the datasets using the name or status dataset and availability of
-            the files
+            You can filter through the datasets by their name and file availability/annotation
+            status
           </li>
         </ul>
-        <li>Download the participant.tsv and/or the participants.json files</li>
+        <li>Download the participants.tsv and/or the participants.json files</li>
         <ul>
-          <li>You can do so by simply clicking on them in the repository card</li>
+          <li>
+            You can do so by simply clicking on the download icon <DownloadIcon color="primary" />{' '}
+            in the repository card
+          </li>
+          <li>
+            Available files have a green checkmark <CheckCircleSharpIcon color="success" />{' '}
+          </li>
         </ul>
         <li>
           Once you have the files downloaded locally, head over to the{' '}
@@ -35,10 +43,11 @@ function instructions() {
           </li>
         </ul>
         <li>
-          Once you&apos;re done annotating the dataset, use the upload button for your dataset,
-          enter your information in the form, upload your newly annotated participant.json file, and
-          submit
+          Once you&apos;re done annotating the dataset, return to this site, use the upload button
+          for your dataset, enter your information in the form, upload your newly annotated
+          participant.json file, and submit
         </li>
+        <li>If the upload was successful, a pull request will be created for the dataset</li>
       </ol>
     </DialogContentText>
   );

diff --git a/src/components/RepoCard.tsx b/src/components/RepoCard.tsx
@@ -7,6 +7,7 @@ import CheckCircleSharpIcon from '@mui/icons-material/CheckCircleSharp';
 import CancelSharpIcon from '@mui/icons-material/CancelSharp';
 import DownloadIcon from '@mui/icons-material/Download';
 import UploadIcon from '@mui/icons-material/Upload';
+import LaunchIcon from '@mui/icons-material/Launch';
 import axios from 'axios';
 import { VariantType } from 'notistack';
 import NBDialog from './NBDialog';
@@ -72,14 +73,21 @@ const RepoCard = memo(
             <div className="grid grid-cols-4 items-center justify-items-center">
               <div>
                 <Typography variant="h5">
-                  <Button className="text-xl" href={`${ORGURL}${repoName}`} target="_blank">
+                  <Button
+                    className="text-xl"
+                    href={`${ORGURL}${repoName}`}
+                    target="_blank"
+                    sx={{ textTransform: 'none' }}
+                    endIcon={<LaunchIcon />}
+                  >
                     {repoName}
                   </Button>
                 </Typography>
                 <Button
                   data-cy={`upload-${repoName}-button`}
                   endIcon={<UploadIcon />}
                   onClick={() => setUploadDialog(true)}
+                  sx={{ textTransform: 'none' }}
                 >
                   Upload
                 </Button>
@@ -90,11 +98,15 @@ const RepoCard = memo(
                     <Button
                       href={`${ORGURL}${repoName}/tree/master/participants.tsv`}
                       target="_blank"
+                      sx={{ textTransform: 'none' }}
+                      endIcon={<LaunchIcon />}
                     >
-                      Participants.tsv
+                      participants.tsv
                     </Button>
                   ) : (
-                    <Button disabled>Participants.tsv</Button>
+                    <Button disabled sx={{ textTransform: 'none' }}>
+                      participants.tsv
+                    </Button>
                   )}
                 </Typography>
                 {tsvExists ? (
@@ -119,11 +131,15 @@ const RepoCard = memo(
                     <Button
                       href={`${ORGURL}${repoName}/tree/master/participants.json`}
                       target="_blank"
+                      sx={{ textTransform: 'none' }}
+                      endIcon={<LaunchIcon />}
                     >
-                      Participants.json
+                      participants.json
                     </Button>
                   ) : (
-                    <Button disabled>Participants.json</Button>
+                    <Button disabled sx={{ textTransform: 'none' }}>
+                      participants.json
+                    </Button>
                   )}
                 </Typography>
                 {jsonExists ? (
@@ -148,11 +164,15 @@ const RepoCard = memo(
                     <Button
                       href={`https://github.com/neurobagel/openneuro-annotations/tree/main/${repoName}.jsonld`}
                       target="_blank"
+                      sx={{ textTransform: 'none' }}
+                      endIcon={<LaunchIcon />}
                     >
-                      Annotated
+                      annotated
                     </Button>
                   ) : (
-                    <Button disabled>Annotated</Button>
+                    <Button disabled sx={{ textTransform: 'none' }}>
+                      annotated
+                    </Button>
                   )}
                 </Typography>
                 {annotated ? (