Skip to content
Snippets Groups Projects
README.md 3.4 KiB
Newer Older
Xiao Gui's avatar
Xiao Gui committed
# Interactive Atlas Viewer

Interactive Atlas Viewer is an frontend module wrapping around [nehuba](https://github.com/HumanBrainProject/nehuba). It provides additional features, such as metadata integration, data visualisation and a robust plugin system.

## Getting Started

Xiao Gui's avatar
Xiao Gui committed
A live version of the Interactive Atlas Viewer is available at [https://interactive-viewer.apps.hbp.eu](https://interactive-viewer.apps.hbp.eu). This section is useful for developers who would like to develop this project.
Xiao Gui's avatar
Xiao Gui committed

### General information
Xiao Gui's avatar
Xiao Gui committed
Interactive atlas viewer is built with [Angular (v9.0)](https://angular.io/), [Bootstrap (v4)](http://getbootstrap.com/), and [fontawesome icons](https://fontawesome.com/). Some other notable packages used are [ngrx/store](https://github.com/ngrx/platform) for state management. 
Xiao Gui's avatar
Xiao Gui committed

Xiao Gui's avatar
Xiao Gui committed
Releases newer than [v0.2.9](https://github.com/HumanBrainProject/interactive-viewer/tree/v0.2.9) also uses a nodejs backend, which uses [passportjs](http://www.passportjs.org/) for user authentication, [express](https://expressjs.com/) as a http framework.

Xiao Gui's avatar
Xiao Gui committed

#### Prerequisites
Xiao Gui's avatar
Xiao Gui committed

Xiao Gui's avatar
Xiao Gui committed
- node >= 12
Xiao Gui's avatar
Xiao Gui committed

Xiao Gui's avatar
Xiao Gui committed

It is recommended to manage your environments with `.env` file.

##### Buildtime environments
Xiao Gui's avatar
Xiao Gui committed

Please see [build_env.md](build_env.md)
Xiao Gui's avatar
Xiao Gui committed

##### Deploy environments
Xiao Gui's avatar
Xiao Gui committed

Please see [deploy_env.md](deploy_env.md)
Xiao Gui's avatar
Xiao Gui committed

##### e2e test environments

Please see [e2e_env.md](e2e_env.md)
Xiao Gui's avatar
Xiao Gui committed
#### Start dev server
Xiao Gui's avatar
Xiao Gui committed

Xiao Gui's avatar
Xiao Gui committed

Xiao Gui's avatar
Xiao Gui committed
```bash
Xiao Gui's avatar
Xiao Gui committed
$ git clone https://github.com/HumanBrainProject/interactive-viewer
$ cd interactive-viewer
$ npm i
Xiao Gui's avatar
Xiao Gui committed
$ npm run dev-server
Xiao Gui's avatar
Xiao Gui committed
```

Xiao Gui's avatar
Xiao Gui committed
Start backend (in a separate terminal):
Xiao Gui's avatar
Xiao Gui committed

Xiao Gui's avatar
Xiao Gui committed
```bash
$ cd deploy
$ node server.js
Xiao Gui's avatar
Xiao Gui committed
```

Xiao Gui's avatar
Xiao Gui committed
#### Build
Xiao Gui's avatar
Xiao Gui committed

```bash
Xiao Gui's avatar
Xiao Gui committed
$ npm run build-aot
Xiao Gui's avatar
Xiao Gui committed
```
Xiao Gui's avatar
Xiao Gui committed
### Develop plugins
Xiao Gui's avatar
Xiao Gui committed
Below demonstrates an example workflow for developing plugins:
Xiao Gui's avatar
Xiao Gui committed

```bash

Xiao Gui's avatar
Xiao Gui committed
$ # build aot version of the atlas viewer
$ npm run build-aot
$ cd deploy
$ # run server with PLUGIN_URLS
$ PLUGIN_URLS=http://localhost:3333/manifest.json;http://localhost:3334/manifest.json node server.js
Xiao Gui's avatar
Xiao Gui committed
```

Xiao Gui's avatar
Xiao Gui committed
Interactive Atlas Viewer attempts to fetch list of manifests:
Xiao Gui's avatar
Xiao Gui committed
```
GET {BACKEND_URL}/plugins
```
Xiao Gui's avatar
Xiao Gui committed
The response from this endpoint will be:
Xiao Gui's avatar
Xiao Gui committed

Xiao Gui's avatar
Xiao Gui committed
```json
[
  "http://localhost:3333/manifest.json",
  "http://localhost:3334/manifest.json"
]
```
Xiao Gui's avatar
Xiao Gui committed

Xiao Gui's avatar
Xiao Gui committed
When user launches the viewer, the atlas viewer will attempt to fetch the metadata of the plugins:
Xiao Gui's avatar
Xiao Gui committed
```
Xiao Gui's avatar
Xiao Gui committed
GET http://localhost:3333/manifest.json
GET http://localhost:3334/manifest.json
Xiao Gui's avatar
Xiao Gui committed
```

Xiao Gui's avatar
Xiao Gui committed
The response from these endpoints are expected to adhere to [manifests](src/plugin_examples/README.md#Manifest%20JSON).
Xiao Gui's avatar
Xiao Gui committed

Xiao Gui's avatar
Xiao Gui committed
When the user launches the plugin, the viewer will fetch `templateUrl` and `scriptUrl`, if necessary.
Xiao Gui's avatar
Xiao Gui committed

Xiao Gui's avatar
Xiao Gui committed
Plugin developers can start their own webserver, use [interactive-viewer-plugin-template](https://github.com/HumanBrainProject/interactive-viewer-plugin-template), or (coming soon) provide link to a github repository.
Xiao Gui's avatar
Xiao Gui committed
[plugin readme](src/plugin_examples/README.md)
Xiao Gui's avatar
Xiao Gui committed

Xiao Gui's avatar
Xiao Gui committed
[plugin api](src/plugin_examples/plugin_api.md)
Xiao Gui's avatar
Xiao Gui committed

Xiao Gui's avatar
Xiao Gui committed
[plugin migration guide](src/plugin_examples/migrationGuide.md)
Xiao Gui's avatar
Xiao Gui committed

## 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](https://github.com/HumanBrainProject/interactive-viewer/tree/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

Apache-2.0