Add a data source to BioDalliance server¶

Embed BioDalliance¶

1. source code repo: https://github.com/dasmoth/dalliance

2. make sure your html has a div to hold dalliance genome browser:

   <div id='dalliance-div-name'></div>
   

3. include the dalliance src:

   • src downloaded locally:

     <script language="javascript" src="../build/dalliance-all.js"></script>
     

   • or use src hosted on dalliance site:

     <script language="javascript" src="http://www.biodalliance.org/release-0.11/dalliance-compiled.js"></script>
     

4. embed dalliance as javascript code:

   var dbrowser = new Browser({
     chr:          '22',
     viewStart:    29890000,
     viewEnd:      30050000,
     cookieKey:    'human-grc_h37-fp',
   
     pageName:     'dalliance-div-name',
   
     coordSystem: {
      speciesName: 'Human',
      taxon: 9606,
      auth: 'GRCh',
      version: '37',
      ucscName: 'hg19',
     },
   
     chains: {
          hg18ToHg19: new Chainset('http://www.derkholm.net:8080/das/hg18ToHg19/', 'NCBI36', 'GRCh37',
                               {
                                   speciesName: 'Human',
                                   taxon: 9606,
                                   auth: 'NCBI',
                                   version: 36,
                                   ucscName: 'hg18'
                               })
     },
   
     sources:     [{name:                 'Genome',
                 twoBitURI:            'http://www.biodalliance.org/datasets/hg19.2bit',
                 tier_type: 'sequence'},
                {name: 'Genes',
                 desc: 'Gene structures from GENCODE 19',
                 bwgURI: 'http://www.biodalliance.org/datasets/gencode.bb',
                 stylesheet_uri: 'http://www.biodalliance.org/stylesheets/gencode.xml',
                 collapseSuperGroups: true,
                 trixURI: 'http://www.biodalliance.org/datasets/geneIndex.ix'},
   
                {name: 'DNase I', desc: 'GM12878 DNaseI signals from UW',
                 pennant: 'http://genome.ucsc.edu/images/encodeThumbnail.jpg',
                 bwgURI: 'http://ftp.ebi.ac.uk/pub/databases/ensembl/encode/integration_data_jan2011/byDataType/signal/jan2011/bigwig/wgEncodeUwDnaseGm12878Aln_2Reps.norm5.rawsignal.bw',
                 style: [{type: 'default', style: {glyph: 'HISTOGRAM', BGCOLOR: 'rgb(8,104,172)', HEIGHT: 30, id: 'style1'}}],
                 noDownsample: true},
                {name: 'H3K4me1', desc: 'GM12878 H3K4me1 signal from Broad',
                 pennant: 'http://genome.ucsc.edu/images/encodeThumbnail.jpg',
                 bwgURI: 'http://ftp.ebi.ac.uk/pub/databases/ensembl/encode/integration_data_jan2011/byDataType/signal/jan2011/bigwig/wgEncodeBroadHistoneGm12878H3k4me1StdAln_2Reps.norm5.rawsignal.bw',
                 style: [{type: 'default', style: {glyph: 'HISTOGRAM', BGCOLOR: 'rgb(166,71,71)', HEIGHT: 30, id: 'style1'}}],
                 noDownsample: true}],
   
   
     setDocumentTitle: true,
     uiPrefix: '../',
     fullScreen: true,
     hubs: [
          'http://www.biodalliance.org/datasets/testhub/hub.txt',
          'http://ftp.ebi.ac.uk/pub/databases/ensembl/encode/integration_data_jan2011/hub.txt',
          {url: 'http://vizhub.wustl.edu/VizHub/RoadmapReleaseAll.txt', label: 'Roadmap Epigenome'}
         ]
   });
   

5. UI options: Most of the UI can be disabled (it’s also possible to run the Dalliance track component without any UI, but that should probably be documented elsewhere).

   • noLeapButtons
   • noLocationField
   • noZoomSlider
   • noTitle
   • noTrackAdder
   • noTrackEditor
   • noExport
   • noOptions
   • noHelp
   • noClearHighlightsButton
   • disableDefaultFeaturePopup

Config the data source¶

1. Reference:

   • http://www.biodalliance.org/adding.html
   • http://www.biodalliance.org/config-source.html

2. Source entry config example:

   {name: 'DNase I', desc: 'GM12878 DNaseI signals from UW',
      pennant: 'http://genome.ucsc.edu/images/encodeThumbnail.jpg',
      bwgURI: 'http://ftp.ebi.ac.uk/pub/databases/ensembl/encode/integration_data_jan2011/byDataType/signal/jan2011/bigwig/wgEncodeUwDnaseGm12878Aln_2Reps.norm5.rawsignal.bw',
      style: [{type: 'default', style: {glyph: 'HISTOGRAM', BGCOLOR: 'rgb(8,104,172)', HEIGHT: 30, id: 'style1'}}],
      noDownsample: true
   },
   

3. Supported data formats:

   • DAS sources
   • indexed binary files (currently bigwig, bigbed and BAM, .2bit). Binary files can either be hosted on a web server or loaded from local disk.
   • DAS servers need to support the W3C CORS extension. The latest versions of Dazzle, Proserver and MyDAS should implement this by default.

How Dalliance work¶

1. Some useful browser methods:

   dbrowser.highlightRegion(chr, min, max)
   dbrowser.clearHighlights()
   dbrowser.setLocation(chr, min, max)
   dbrowser.addTier(source-config :ref:`data-source`)
   dbrowser.removeTier(source-config :ref:`data-source`)
   

2. Tiers, Sources

   • source: a data source object. attributes: name
   • tier: a dalliace wrapped object for each data source. attributes: currentSequence (for sequence source), currentFeatures (for feature source)

   var sources = dbrowser.sources;
   var tiers = dbrowser.tiers;
   

3. Data retrieval range:

   Dalliance browser only requests data from the server for the current view range (dbrowser.viewStart – dbrowser.viewEnd). This is done by sending a range header to HTTP server to retrieve data inside this range. This also means that the HTTP server can’t use the Accept-Encoding header, because once the data is encoded (compressed), read a partial compressed data inside a range will result in wrong data and can not be decoded. This is why you’ll get an error like this: Error 330 (net::ERR_CONTENT_DECODING_FAILED)

4. callbacks: http://www.biodalliance.org/interacting.html

• Add a callback function for the view range change event (for example, user zoom/pan from the interface):

  dbrowser.addViewListener(function(chr, min, max) {
     var link = document.getElementById('enslink');
     link.href = 'http://www.ensembl.org/Homo_sapiens/Location/View?r=' + chr + ':' + min + '-' + max;
  });
  

• Others callbacks:

  dbrowser.addTierListener(callback)
  dbrowser.addFeatureListener(callback)
  dbrowser.addFeatureHoverListener(callback)
  dbrowser.addInitListener(callback)
  

Network related tech issues¶

1. Using your browser as a dev tool to test HEAD requests: http://www.laurencegellert.com/2013/03/using-your-browser-as-a-dev-tool-to-test-head-requests/

   copy-paste code to your browser’s javascript console:

   testHEAD = function(url) {
     var xmlhttp = new XMLHttpRequest();
     //console.log(xmlhttp); //check withCredentials flag for CORS
     xmlhttp.open("HEAD", url, true);
   
     // https://xhr.spec.whatwg.org/
     // default request headers are set by browser, the simple ones are setable, the forbidden ones not
   
     xmlhttp.setRequestHeader ("Accept", "text/xml"); //values will be concatenated to existing ones
     xmlhttp.setRequestHeader("Accept-Encoding", "gzip"); //forbidden header, will not take effect
     // to see request headers, open chrome developer tool, under network tab, click the request name
     // (yes it's a link, took me sometime to realize that)
     // in the table, a detailed page will appear on the right side, with tabs such as "Headers", "Preview",
     // "Response", "Cookies", "Timing"
   
     xmlhttp.onreadystatechange=function() {
       if(xmlhttp.readyState==4) {
           console.log(xmlhttp.getAllResponseHeaders());
       }
     }
     xmlhttp.send(null);
   }
   
   testHEAD('icmBigWig-twist-hg19.bw')
   testHEAD('icmBigWig-tilt-hg19.bw')
   testHEAD('icmBigWig-roll-hg19.bw')
   

2. http request options: http://php.net/manual/en/http.request.options.php

3. Secure Hash Functions (MD4, MD5, SHA-1): http://jsres.blogspot.com/

4. base-64 encoding: http://en.wikipedia.org/wiki/Base64

5. Combine Range and Accept-Encoding HTTP headers: http://www.diveintopython.net/http_web_services/gzip_compression.html