igv-webapp is a pure-client "genome browser" application based igv.js. It is developed by the Integrative Genomics Viewer (IGV) team.
- Node >= v8.11.4
- NPM >= v5.6.0
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.
- Clone this repository
git clone [email protected]:igvteam/igv-webapp.git
- Change directories to project
cd ./igv-webapp
- Install
npm install
grunt
npm start
- Open a browser and enter the follow url to run the app
localhost:8080
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.
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"
// }
}
`
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"
}
IGV Web App is MIT licensed.