Allelic Variation Explorer

The Allelic Variation Explorer (AVE) is a web application to visualize (clustered) single-nucleotide variants across genomes.

This repository contains the front end for the ave-rest-service back end. The front end runs in the users web browser and communicates with the back end running on a web server somewhere. The front end is the user interface and the back end is the service serving the variant, annotation and genomic data.

The web application uses pileup.js to render genomic regions.

This project was bootstrapped with Create React App using scripts package @nlesc/react-scripts.

Installation

The build archive of the latest commit on the master branch can be downloaded from https://bintray.com/nlesc-ave/ave/ave-app#files, it is automatically build on Travis-CI.

See https://github.com/nlesc-ave/ave-rest-service#deployment how to combine the build archive or build directory of this repo to a deployment which can be used by end-users.

Develop

Below are instructions how to get a development version of the application up and running.

Requirements:

• caddy with http.cors plugin, https://caddyserver.com, static file server to proxy example api files
• Node.js, https://nodejs.org/, JavaScript runtime version 8 or higher
• yarn, https://yarnpkg.com/, Node.js packagage manager

Clone repo and then

yarn install

To develop you need some data to visualize, this repo includes an example Tomato dataset (http://bioviz.org/quickload/S_lycopersicum_May_2012/) in the /api directory. The variants, gene/feature seach are artificial, that is they always return the same results. The variants are hardcoded at the first 500 bp of any chromosome. The dataset is missing the genome sequence (2bit) and gene annotations (bigbed), because of their large size. The 2bit and bigbed must be downloaded/converted by running the fill-api.sh script:

./fill-api.sh

Start development server

yarn start

This will open the web application in a web browser on http://localhost:3000. It will also start an api web service using caddy with example api files. Any changes made to files in src/ directory will recompile the application and reload the page in the web browser.

Format

To keep the formatting consistent, this repo uses the Prettier code formatter.

To format files in src/ run

yarn prettier

See https://prettier.io/ how to setup your editor.

Build

The source code is written in TypeScript which must be compiled so the web browser can run it.

The application can be build using

yarn build

This will generate a build directory which must be served from the root of a web server. It expects ave-rest-service running on /api path of the web server.