Add a data source to BioDalliance server

Dalliance website:

Embed BioDalliance

  1. source code repo:

  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=""></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('', 'NCBI36', 'GRCh37',
                                    speciesName: 'Human',
                                    taxon: 9606,
                                    auth: 'NCBI',
                                    version: 36,
                                    ucscName: 'hg18'
      sources:     [{name:                 'Genome',
                  twoBitURI:            '',
                  tier_type: 'sequence'},
                 {name: 'Genes',
                  desc: 'Gene structures from GENCODE 19',
                  bwgURI: '',
                  stylesheet_uri: '',
                  collapseSuperGroups: true,
                  trixURI: ''},
                 {name: 'DNase I', desc: 'GM12878 DNaseI signals from UW',
                  pennant: '',
                  bwgURI: '',
                  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: '',
                  bwgURI: '',
                  style: [{type: 'default', style: {glyph: 'HISTOGRAM', BGCOLOR: 'rgb(166,71,71)', HEIGHT: 30, id: 'style1'}}],
                  noDownsample: true}],
      setDocumentTitle: true,
      uiPrefix: '../',
      fullScreen: true,
      hubs: [
           {url: '', 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:

  2. Source entry config example:

    {name: 'DNase I', desc: 'GM12878 DNaseI signals from UW',
       pennant: '',
       bwgURI: '',
       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.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:

  • 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 = '' + chr + ':' + min + '-' + max;
  • Others callbacks: