Up and Running with MIQA in a Visual Studio Code Remote Container

Leave a Comment / How To / By

Warning

There are easier ways to get MIQA up and running than the instructions that follow. MIQA provides a Docker image one can use to quickly launch a MIQA instance. Use these instructions only if you are looking to use Visual Studio Code (VSC) with it’s Remote-Containers functionality.

Get the Code

This isn’t the latest MIQA (which runs on Django), it’s Phase 1 (which uses Girder). Grab MIQA Phase 1 from the GitHub Repository.

$ git clone https://github.com/OpenImaging/miqa-phase1.git

Open in VS Code

From the directory into which you cloned the MIQA project launch VS Code:

$ code .

Use Remote-Containers

View –> Command Palette (Ctrl+Shift+P) –> “Remote-Containers: Add Development Container Configuration Files” –> Select Python 3 –> 3.8 –> Leave Options –> OK

VSC will generate a .devcontainer directory with a devcontainer.json and a Dockerfile.

Click on Reopen in Container to launch.

VSC will take a few minutes to download the necessary containers and build up the desired docker container.

Basic Maintenance

Once VSC indicates the container is running select Terminal –> New Terminal (Ctrl+Shift+`).

$ sudo apt update
$ sudo apt upgrade
$ sudo apt install python3-pip

Installing MongoDB

MongoDB has various methods of installation – this is what worked for me:

# Import MongoDB public GPG Key
$ wget -qO - https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -
# Create the MongoDB sources.list.d file
$ echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.4.list
# Make sure you have the latest MongoDB package list
$ sudo apt update
# Install latest stable MongoDB
$ sudo apt install -y mongodb-org

Panic: The Missing DB!

If you attempt to run Mongo (mongod) now you will receive a “NonExistentPath: Data directory /data/db not found, terminating“. Basically Mongo is looking for but not finding a path to the database. Let’s create it:

# Create directory
$ sudo mkdir -p /data/db/
# Set permissions
$ sudo chown `id -u` /data/db
# Start MongoDB
$ mongod

Once you’ve started mongod, create a new terminal window so you can continue working…

Install Node

# First install Node Version Manager (nvm), it makes life easier
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
# Start a new bash session to utilize nvm:
$ bash
# Install node lts
$ nvm install --lts

Install, Fix, Build and Serve Girder

Girder is the back-end for MIQA.

# Install Girder
$ pip install -e server
# Girder needs access to /usr/share/girder but it doesn't exist, create it
$ sudo mkdir -p /usr/share/girder
# Set permissions
$ sudo chown `id -u` /usr/share/girder
# Build Girder
$ girder build
# Start Serving Girder
$ girder serve

You should now be able to access the Girder admin by visiting http://localhost:8080/girder. It is important you add the /girder to the URL.

Adding a Girder User and Resolving CORS Issue

Click on the Register link at the top right of the Girder admin page.

Enter a username (“login name”), email address, first and last names, and a password then click Register.

Log in to Girder and select Admin console in the left pane. Next select Server Configuration in the main pane, expand Advanced Settings, and under CORS Allowed Origins enter * (don’t do this on production!). This is necessary because girder is running on a different port (origin) than the web client.

Preparing for Data

From within Girder click on Collections in the left pane and then Create collection in the main pane. Name the collection “miqa” and click Create.

In the left pane select Admin Console then from the main pane select Assetstores. Within Assetstores, in the main pane, select Create new Filesystem assetstore. Choose a name (e.g. Sample Data) and set a root directory (see note below) then click Create.

Note: When setting the root directory you’ll need to factor in how Girder is reading the filesystem. Providing a path like /workspaces/miqa-phase1/sample_data_vs will not work, Girder won’t be able to locate this path. Perhaps the easiest way is to provide the full local path to the sample data, e.g. ~/my-projects/miqa-phase1/sample_data_vs. This will be auto converted into a path like /home/vscode/vscode/workspaces/miqaproj/miqa/sample_data_vs. Alternatively, you could enter all that yourself instead of allowing the auto conversion to occur.

Installing and Running the Client

The MIQA app front-end is built using Vue/Vuetify. You’ll need to start a new terminal and from within the root of your miqa project install and begin serving the MIQA frontend:

$ cd client
$ npm install
$ npm run serve

Because Girder is already running on http://localhost:8080 the web client will run on http://localhost:8081/

Importing Data

From the main web client page (http://localhost:8081) select in the top pane SETTINGS. Now provide the import and export paths, for example:

  • Import: /workspaces/miqa-phase1/sample_data/sample.json
  • Export: /workspaces/miqa-phase1/sample_data/sample_output.json

Click Save. This will return you to the main window of the web client.

Before you can actually import the records you’ll need to update the sample.json file in miqa-phase1/sample_data. In sample.json change the path from /miqa/sample_data to /workspaces/miqa-phase1/sample_data.

Click on Sessions in the top pane and then choose Import. Confirm that you want to import (and delete outdated records).

Viewing the Data

If you click on Sessions on the top pane of the web client you’ll see ID-1 with 1_type1 and 2_type1 under it and under ID-2 3_type2. Click on these to view, manipulate, and annotate the images.

Conclusion

If you’ve walked through this process step by step you should now have a MIQA instance – both front and back end up and running.

Leave a Reply