Branch: master
Clone or download
Latest commit 2c0096f Feb 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css session and svg modal input exceeds modal body (#79) Jan 24, 2019
img Reduce dead space. Responsive header/footer. (#65) Nov 30, 2018
js remove filter on encode bigbed files Feb 3, 2019
resources genomes.json. changed http: to https: Feb 12, 2019
test Testapp (#67) Jan 12, 2019
.gitignore update gitignore Jan 21, 2019
Gruntfile.js Update build scripts. Fix bug. (#82) Feb 14, 2019
LICENSE Fix Firefox dropbox / google button bug. Update igv.js version Oct 27, 2018
README.md
favicon.ico add favicon May 22, 2018
igv-webapp.iml IDE artifacts May 18, 2018
igvwebConfig.js . Jan 12, 2019
index.html update igv.js link (#83) Feb 14, 2019
package-lock.json Update build scripts. Fix bug. (#82) Feb 14, 2019
package.json
webpack.config.js Update build scripts. Fix bug. (#82) Feb 14, 2019

README.md

IGV Web App

igv-webapp is a pure-client "genome browser" application based igv.js. It is developed by the Integrative Genomics Viewer (IGV) team.

Requirements

  • Node >= v8.11.4
  • NPM >= v5.6.0

Supported Browsers

igv-webapp and igv.js require a modern web browser with support for Javascript ECMAScript 2015. We test on the latest versions of Chrome, Safari, Firefox, and Edge. Internet Explorer (IE) is not supported.

Installation

  • Clone this repository
git clone git@github.com:igvteam/igv-webapp.git
  • Change directories to project
cd ./igv-webapp
  • Install
npm install
grunt

Run the app

npm start
  • Open a browser and enter the follow url to run the app
localhost:8080

Configuration

The webapp is configured with the global igvwebConfig defined in igvwebConfig.js. The following properties are customizable.

  • genomes - url to a file containing a list of genome configuration objects. This list populates the Genomes pulldown menu. See the igv.js wiki for a description of the genome configuration object. For an example see the default genome list in resources/genomes.

  • trackRegistryFile - url to a file configurating the Track pulldown. Use this to define custom load menus. The file contains a json object with genomeIDs as keys and an array of URLs to json files defining menu entries in the Load Tracks pulldown. For an example see the default configuration at resources/tracks/trackRegistry.json. Further details on the track menu configuration are available below.

  • igvConfg - an igv.js configuration object. See the igv.js wiki for details. The property apiKey is optional. Setting a value will enable access to public Google resources. See Google Support for instructions on obtaining an API key.

  • clientId - a Google clientId, used to enable OAuth for the Google picker and access to protected Google resources. See Google Support for instructions on obtaining a clienId. OAuth requests from igv.js will include the following scopes.

            'https://www.googleapis.com/auth/cloud-platform',
            'https://www.googleapis.com/auth/genomics',
            'https://www.googleapis.com/auth/devstorage.read_only',
            'https://www.googleapis.com/auth/userinfo.profile',
            'https://www.googleapis.com/auth/drive.readonly'
  • urlShortener - an object or function defining a URL shortener to shorten links created by the Share button. This is optional, if not provided the links are not shortened, and the "Twitter" option is disabled. The value of this property can be a function, taking a single argument (the long URL) and returning the shortened url, or an Object. Objects define a provider and an apiKey to be used with the provider service. Currently 2 providers are recognized, bitly and google.

Default configuration

var igvwebConfig = {

    genomes: "https://s3.amazonaws.com/igv.org.genomes/genomes.json",

    trackRegistryFile: "resources/tracks/trackRegistry.json",

    igvConfig:
        {
            queryParametersSupported: true,
            showChromosomeWidget: true,
            genome: "hg19",
            apiKey: "API_KEY"
        },

    clientId: "CLIENT_ID",

    urlShortener: {
        provider: "bitly",
        apiKey: "BITLY_TOKEN"
    }

    // urlShortener: {
    //     provider: "google",
    //     apiKey: "API_KEY"
    // }

}

`

Track Registry

The registry consists of a map linking genome ID to a list of track configuration files. Each track configuration file defines a menu in the "Tracks" pulldown. For example, the registry below defines 2 menus for genome hg19, and a single menu for hg38.

{
  "hg19" : [
    "resources/tracks/hg19_annotations.json",
    "resources/tracks/hg19_platinum_genomes.json"
  ],

  "hg38" : [
    "resources/tracks/hg38_annotations.json"
  ]
}

Menu files specify a label for the menu, an optional description of the menu, and a list of tracks configurations or a type property. The example below defines a menu labeled "Annotations" with a single entry, a bed file of gene annotations. For a complete description of track configuration objects see the igv.js wiki.

{
  "label": "Annotations",
  "description": "Annotations - source <a href=http://hgdownload.soe.ucsc.edu/downloads.html target=_blank>UCSC Genome Browser</a>",
  "tracks": [
	{
	  "type": "bed",
	  "url": "https://s3.amazonaws.com/igv.org.test/data/gencode.v18.collapsed.bed",
	  "indexURL": "https://s3.amazonaws.com/igv.org.test/data/gencode.v18.collapsed.bed.idx",
	  "name": "Gencode V18"
	}]
}
	

The type property can be used in lieu of a track list to trigger pre-defined lists of tracks for special data sources. Currently the only recognized value is "ENCODE". This property can be used to populate an ENCODE load widget for any genome assembly with data hosted by the ENCODE project. Currently this includes assemblies for human (hg19, GRCh38), mouse (mm10), worm (ce11), and fly (dm6).

{
  "label": "ENCODE",
  "type": "ENCODE",
  "description": "<a href=hhttps://www.encodeproject.org/ target=_blank>Encylopedia of Genomic Elements</a>",
  "genomeID": "hg19"
}

License

IGV Web App is MIT licensed.