Difference between revisions of "Embedding CoGe JBrowse in your website"

From CoGepedia
Jump to: navigation, search
m
 
(11 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
−
There are two ways to create a web page containing a CoGe JBrowse instance.  
+
CoGe JBrowse, also known as [[EPIC-CoGe]], is a genome browser with advanced functionality that you can embed in your website. There are two ways to create a web page that embeds EPIC-CoGe.  
 
# Embed the instance in an [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe IFRAME]
 
# Embed the instance in an [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe IFRAME]
−
# Install JBrowse on your server and connect to CoGe's JBrowse API to get the track data.
+
# Install EPIC-CoGe on your server and configure it to connect to CoGe's JBrowse API to get the track data.
  
 
==1: IFRAME method==
 
==1: IFRAME method==
−
start with the following HTML code:
+
Start with the following HTML code:
 
<pre>
 
<pre>
 
  <html>
 
  <html>
Line 14: Line 14:
 
</pre>
 
</pre>
  
−
JBrowse is put inside an IFRAME. The embed=1 parameter in the src URL tells CoGe to not display its normal page header and footer. Use whatever method you prefer (i.e. hard code or programmatically with javascript) to set the “gid” parameter. It is the CoGe genome id for the genome you wish to browse. Change the width and height styles if you have other HTML on your page and want the IFRAME to occupy less than the whole page.
+
EPIC-CoGe is put inside an IFRAME. The embed=1 parameter in the src URL tells CoGe to not display its normal page header and footer. Use whatever method you prefer (i.e. hard code or programmatically with javascript) to set the “gid” parameter. It is the CoGe genome id for the genome you wish to browse. Change the width and height styles if you have other HTML on your page and want the IFRAME to occupy less than the whole page.
  
 
Note that genome id for a genome can be found on the GenomeInfo page for the genome (https://genomevolution.org/coge/GenomeInfo.pl?gid=16911). Or by using CoGe’s API, https://genomevolution.org/wiki/index.php/Web_Services_RESTful_API
 
Note that genome id for a genome can be found on the GenomeInfo page for the genome (https://genomevolution.org/coge/GenomeInfo.pl?gid=16911). Or by using CoGe’s API, https://genomevolution.org/wiki/index.php/Web_Services_RESTful_API
  
−
==2y: Install JBrowse and using CoGe's API==
+
==2: Install EPIC-Coge and using CoGe's JBrowse API==
 
If you want to host most of the files on your own server:
 
If you want to host most of the files on your own server:
−
download the web/js/jbrowse directory from github (https://github.com/LyonsLab/coge)
+
# download the web/js/jbrowse directory from github (https://github.com/LyonsLab/coge)
−
put the files on your server to match the hrefs below (js/jbrowse…) or change the hrefs
+
# put the files on your server to match the hrefs below (js/jbrowse…) or change the hrefs
−
pass in the gid= parameter in the URL to your page, or modify the “var gid =..” line below
+
# pass in the gid= parameter in the URL to your page, or modify the “var gid =..” line below
 
<pre>
 
<pre>
 
<html>
 
<html>

Latest revision as of 12:18, 15 September 2016

CoGe JBrowse, also known as EPIC-CoGe, is a genome browser with advanced functionality that you can embed in your website. There are two ways to create a web page that embeds EPIC-CoGe.

  1. Embed the instance in an IFRAME
  2. Install EPIC-CoGe on your server and configure it to connect to CoGe's JBrowse API to get the track data.

1: IFRAME method

Start with the following HTML code: 

 <html>
  <body>
   <iframe src="https://genomevolution.org/coge/GenomeView.pl?gid=16911&embed=1" style="width:100%;height:100%"></iframe>
  </body>
 </html>

EPIC-CoGe is put inside an IFRAME. The embed=1 parameter in the src URL tells CoGe to not display its normal page header and footer. Use whatever method you prefer (i.e. hard code or programmatically with javascript) to set the “gid” parameter. It is the CoGe genome id for the genome you wish to browse. Change the width and height styles if you have other HTML on your page and want the IFRAME to occupy less than the whole page.

Note that genome id for a genome can be found on the GenomeInfo page for the genome (https://genomevolution.org/coge/GenomeInfo.pl?gid=16911). Or by using CoGe’s API, https://genomevolution.org/wiki/index.php/Web_Services_RESTful_API

2: Install EPIC-Coge and using CoGe's JBrowse API

If you want to host most of the files on your own server:

  1. download the web/js/jbrowse directory from github (https://github.com/LyonsLab/coge)
  2. put the files on your server to match the hrefs below (js/jbrowse…) or change the hrefs
  3. pass in the gid= parameter in the URL to your page, or modify the “var gid =..” line below
<html>
<head>
<link rel="stylesheet" type="text/css" href="js/jbrowse/genome.css" />
<script type="text/javascript" src="js/jbrowse/src/dojo/dojo.js" data-dojo-config="async: 1"></script>
<script type="text/javascript" src="js/jbrowse/src/JBrowse/init.js"></script>
<script type="text/javascript">
    window.onerror=function(msg){
        if( document.body )
            document.body.setAttribute("JSError",msg);
    }

    var JBrowse;
    function init_JBrowse(id, callback) {
	    require( { baseUrl: 'js/jbrowse/src',
	    		   packages: [ 'dojo', 'dijit', 'dojox', 'jszlib',
	    		               { name: 'lazyload', main: 'lazyload' },
	    		               'dgrid', 'xstyle', 'put-selector',
	    		               { name: 'jDataView', location: 'jDataView/src', main: 'jdataview' },
	    		               'JBrowse'
	    		             ]
	      		 },
	      	['JBrowse/Browser', 'dojo/io-query', 'dojo/json' ],
	        function (Browser,ioQuery,JSON) {
	      		var queryParams = ioQuery.queryToObject( window.location.search.slice(1) );
	            var gid = queryParams.gid || queryParams.dsgid || 22736;
	            //var dataRoot = queryParams.data || 'data';
	            var config = {
	                containerID: id,
	                browserRoot: 'js/jbrowse/',
	                refSeqs: 'https://genomevolution.org/services/JBrowse/service.pl/config/refseq/?gid='+gid,//refSeqs: dataRoot + "/seq/refSeqs.json",
	                baseUrl: '/',//'jbrowse/',//dataRoot+'/', // mdb changed 1/15/14 for JBrowse-1.11.1
	                include: ['https://genomevolution.org/services/JBrowse/service.pl/config/tracks/?gid='+gid],//include: ['jbrowse_conf.json', dataRoot + "/trackList.json"],
	                //nameUrl: dataRoot + "/names/root.json",
	                defaultTracks: "sequence",//"sequence,features"
	                queryParams: queryParams,
	                location: queryParams.loc || '1:1..150000',//queryParams.loc,
	                forceTracks: queryParams.tracks,
	                initialHighlight: queryParams.highlight,
	                datasets: null,
	                show_nav: 1,//queryParams.nav,
	                show_tracklist: 1,//queryParams.tracklist,
	                show_overview: 1,//queryParams.overview,
	                //stores: { url: { type: "JBrowse/Store/SeqFeature/FromConfig", features: [] } },
	                makeFullViewURL: function( browser ) {
	                    // the URL for the 'Full view' link
	                    // in embedded mode should be the current
	                    // view URL, except with 'nav', 'tracklist',
	                    // and 'overview' parameters forced to 1.
	                    return browser.makeCurrentViewURL({ nav: 1, tracklist: 1, overview: 1 });
	                },
	                updateBrowserURL: false
	            };

	            JBrowse = new Browser( config );
	            if (callback) callback(JBrowse);
	      	}
	    );
    }
</script>
</head>
<body>
<div id="jb" style="height:100%;width:100%;padding:0;">loading...</div>
<script>
    init_JBrowse('jb');
</script>
</body>
</html>

Examples

Retrieved from "https://genomevolution.org/wiki/index.php?title=Embedding_CoGe_JBrowse_in_your_website&oldid=8701"