[CI] Implemented deploy workflow (#119)

* Implemented deploy workflow * Test deploy workflow * Updated instructions * Made a hanful of UI changes * Removed the push trigger event * Renamed app and bumped its version
neurobagel · Oct 5, 2024 · 9091732 · 9091732
1 parent 1509ae4
commit 9091732
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 21 deletions.
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -0,0 +1,49 @@
+# Adapted from sample vite workflow file: https://vitejs.dev/guide/static-deploy#github-pages
+name: deploy
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    # See docs: https://docs.github.com/en/actions/deployment/targeting-different-environments/using-environments-for-deployment#using-an-environment
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          cache: 'npm'
+      - name: Create .env file
+        run: |
+          echo -e "NB_OPENNEURO_UPLOAD_API=https://upload.neurobagel.org/" > .env
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "react-query-tool",
+  "name": "ui",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

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,9 +43,11 @@ function instructions() {
           </li>
         </ul>
         <li>
-          Once you&apos;re done annotating the dataset, navigate to the upload tab, enter your
-          dataset ID, 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 ? (