Skip to content
Snippets Groups Projects

Interactive Atlas Viewer

Interactive Atlas Viewer is an frontend module wrapping around nehuba. It provides additional features, such as metadata integration, data visualisation and a robust plugin system.

Getting Started

A live version of the Interactive Atlas Viewer is available at https://kg.humanbrainproject.org/viewer/. This section is useful for developers who would like to develop this project.

General information

Interactive atlas viewer is built with Angular (v6.0), Bootstrap (v4), and fontawesome icons. Some other notable packages used are: ng2-charts for charts visualisation, ngx-bootstrap for UI and ngrx/store for state management.

Releases newer than v0.2.9 also uses a nodejs backend, which uses passportjs for user authentication, express as a http framework.

Prerequisites

  • node > 6
  • npm > 4

Develop Interactive Viewer

To run a dev server, run:

$ git clone https://github.com/HumanBrainProject/interactive-viewer
$ cd interactive-viewer
$ npm i
$ npm run dev

Develop Plugins

For releases newer than v0.2.9, Interactive Atlas Viewer attempts to fetch GET {BACKEND_URL}/plugins to retrieve a list of URLs. The interactive atlas viewer will then perform a GET request for each of the listed URLs, parsing them as manifests.

The backend reads the environment variable PLUGIN_URLS and separate the string with ; as a delimiter. In order to return a response akin to the following:

["http://localhost:3001/manifest.json","http://localhost:9001/manifest.json"]

Plugin developers may choose to do any of the following:

shell

set env var every time

$ PLUGIN_URLS=http://localhost:3001/manifest.json;http://localhost:9001/manifest.json npm run dev

dotenv

set a .env file in ./deploy/ once

$ echo `PLUGIN_URLS=http://localhost:3001/manifest.json;http://localhost:9001/manifest.json` > ./deploy/.env

then, simple start the dev process with

$ npm run dev

Plugin developers can start their own webserver, use interactive-viewer-plugin-template, or (coming soon) provide link to a github repository.

plugin readme

plugin api

plugin migration guide

Compilation

package.json provide with two ways of building the interactive atlas viewer, JIT or AOT compilation. In general, AOT compilation produces a smaller package and has better performance.

AOT compilation

npm run build-aot

JIT Compilation

npm run build

/* OR */

npm run build-min

Docker

The repository also provides a Dockerfile. Here are the environment variables used:

build time

  • BACKEND_URL : same as HOSTNAME during run time. Needed as root URL when fetching templates / datasets etc. If left empty, will fetch without hostname.

run time

  • SESSION_SECRET : needed for session
  • HOSTNAME : needed for OIDC redirect
  • HBP_CLIENTID : neded for OIDC authentication
  • HBP_CLIENTSECRET : needed for OIDC authentication
  • PLUGIN_URLS : optional. Allows plugins to be populated
  • REFRESH_TOKEN : needed for access of public data

Contributing

Feel free to raise an issue in this repo and/or file a PR.

Versioning

Commit history prior to v0.2.0 is available in the legacy-v0.2.0 branch. The repo was rewritten to remove its dependency on neuroglancer and nehuba. This allowed for simpler webpack config, faster build time and AOT compilation.

License

TO BE DECIDED