/molgenis-app-biobank-explorer

Vue application for the biobank explorer; A card detail view on BBMRI biobank - collection data

Primary LanguageJavaScriptGNU Lesser General Public License v3.0LGPL-3.0

codecov

BBMRI-ERIC Biobank Explorer Version 2

Vue CLI 4 application for the biobank explorer; A card detail view on BBMRI-ERIC biobank / collection data

Preparing your MOLGENIS instance

The biobank explorer is built on a specific data model. This is the BBMRI-ERIC model and consists of the following tables:

  • eu_bbmri_eric_biobanks
  • eu_bbmri_eric_collections
  • eu_bbmri_eric_material_types
  • eu_bbmri_eric_disease_types
  • eu_bbmri_eric_lab_standards

Test model + data can be found in the 'sample-data' folder of this repository. Upload the data via the Advanced data import

Configure the Biobank Explorer

You can configure 2 main settings in the Biobank Explorer.

  • Google Analytics
  • Negotiator

Enable Google Analytics

We use the Vue Analytics library to connect to Google Analytics. As administrator go to the application settings (/menu/admin/settings/sys_set_app)

Scroll down to Tracking and fill in the fields and add the GA_KEY to:

Google analytics tracking ID

Configuring Negotiator

This version of the biobank explorer is compatible with the Negotiator API in MOLGENIS version 8.3.10.

Pre-selection a country

The country facet can removed from the list of facets and a country filter can be set by default. This setting can be toggled using the runtimeOptions section in the webpack.prod.conf.js or at runtime using the config entity

runtimeOptions.showCountryFacet should contain a boolean value indicating if the country facet needs to be shown.

"appOptions": {
    "showCountryFacet": true
  }

Contributing

There are 2 ways to test and develop in apps for MOLGENIS.

  • locally without MOLGENIS
  • locally with MOLGENIS

Test locally without a running MOLGENIS instance

For local testing you can execute the following commands:

# To install the application
yarn install

# To run develop mode
yarn serve

It will render a local version of the core variable catalogue.

Run unit tests

You can run unit tests by executing this command:

# Run once
yarn test:unit

# Run in watch-mode
yarn debug

Run end-to-end tests

You can run end-to-end test locally by running the following command:

yarn test:e2e

Test with a running MOLGENIS instance

For local testing with a running MOLGENIS instance you have to alter the config of the app:

Comment in the following block

config/index.js

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // Beginning of block
    proxyTable: {
      '/login': {
        target: 'http://localhost:8080'
      },
      '/plugin/directory/export': {
        target: 'http://localhost:8080'
      },
      '/api': {
        target: 'http://localhost:8080'
      }
    },
    // End of block

And comment out this block in the same file.

/**
 * GET and POST interceptors
 * Removes the need for a running backend during development
 */
No mock data available

That is it. Run a molgenis instance on localhost:8080 and start the core variable catalogue with:

yarn dev

Build your MOLGENIS app

See: App developement documentation

You can now create a working application that can be imported in MOLGENIS directly, by executing:

yarn build

You can find the zip-file in the dist/molgenis-app-biobank-explorer_v2.zip.

Customize configuration

See Configuration Reference.

Create a docker image | Molgenis Dev Team

To make a standalone docker image that can be run from the Rancher Cluster perform the following steps:

yarn build:preview

Then build the image with Docker (you have to have Docker running) with the following (tag is required):

docker build -t {tag} .

Then login to the registry

docker login {registry-adress}:{port}

Create a registry tag for the image

docker tag {tag} {registry-adress}:{port}/{imagename}:{optional tag}

Then upload the image to the registry (now you need the tag)

docker push {registry-adress}:{port}/{imagename}:{optional tag}

Now it's available from Rancher.

Go to Rancher, select correct cluster

  • workloads > deploy

  • Name > name for your workload

  • image > {registry-adress}/{imagename}:{optional tag}

  • select correct namespace

  • Add port > portname: http, publish port: 80, as a: cluster-ip

  • env variable: API {molgenis instance you want e.g. molgenis1}

  • launch

  • workloads > loadbalancing

  • add ingress

  • website name {description}

  • specify hostname: {logicalname}.dev.molgenis.org

  • path /, target your created workload, port 80

  • save

Done!