Skip to content

neurobagel/ui

Repository files navigation

OpenNeuro upload User Interface


This is a React application, developed in TypeScript using a variety of tools including Vite, Cypress, and MUI.

Quickstart | Testing | License

Quickstart

To run the tool, you have two options:

  1. Use our docker image
  2. Do a manual install from the cloned git repo

but before proceeding with either you need to set the environment variables.

Mandatory configuration

Environment variable Type Required Default value if not set Example
NB_OPENNEURO_UPLOAD_API string Yes - http://127.0.0.1:8000/
NB_USERNAME string Yes - admin
NB_PASSWORD string Yes - admin

NB_OPENNEURO_UPLOAD_API

OpenNeuro upload API URL that the tool uses to send requests to upload the file.

NB_USERNAME and NB_PASSWORD

Username and password used by the OpenNeuro upload API.

Set the environment variables

To set environment variables, create a .env file in the root directory and add the environment variables there. If you're using the remote upload API, your .env file would look something like this:

NB_OPENNEURO_UPLOAD_API=http://upload.neurobagel.org/
NB_USERNAME=admin
NB_PASSWORD=admin

⚠️ The protocol matters here. If you wish to use the Neurobagel remote API, ensure your NB_OPENNEURO_UPLOAD_API uses https instead of http.

Docker installation

To obtain tool's docker image, simply run the following command in your terminal:

docker pull neurobagel/openneuro_upload_ui:latest

This Docker image includes the latest release of the query tool and a minimal http server to serve the static tool.

To launch the tool Docker container and pass in the .env file you have created, simply run

docker run -p 5173:5173 --env-file=.env neurobagel/openneuro_upload_ui:latest

Then you can access the ui at http://localhost:5173

Note: the tool is listening on port 5173 inside the docker container, replace port 5173 by the port you would like to expose to the host. For example if you'd like to run the tool on port 8000 of your machine you can run the following command:

docker run -p 8000:5173 --env-file=.env neurobagel/openneuro_upload_ui:latest

Manual installation

To install the tool directly, you'll need node package manager (npm) and Node.js. You can find the instructions on installing npm and node in the official documentation.

Once you have npm and node installed, you'll need to install the dependencies outlined in the package.json file. You can do so by running the following command:

npm install

To launch the tool in developer mode run the following command:

npm run dev

You can also build and then run the tool from (production) build of the application by running the following command:

npm run build && npm run preview

You can verify the tool is running by watching for the` info messages from Vite regarding environment, rendering, and what port the tool is running on in your terminal.

Testing

The tool utilizes Cypress framework for testing.

To run the tests execute the following command:

npx cypress open

License

This tool is released under the terms of the MIT License