Skip to content

Instantly share code, notes, and snippets.

@cmdcolin cmdcolin/jbrowse-gwas.html
Last active Feb 21, 2018

Embed
What would you like to do?
render a GWAS dataset with jbrowse
<html>
<head>
<title>JBrowse render GWAS</title>
<link rel="stylesheet" type="text/css" href="css/genome.css">
<script type="text/javascript" src="src/dojo/dojo.js" data-dojo-config="async: 1, baseUrl: './src'"></script>
<script type="text/javascript" src="src/JBrowse/init.js"></script>
<script>
require({
"packages": [
{
"name": "GWASViewer",
"location": "../plugins/GWASViewer/js"
}
]
}, [
'dojo/_base/array',
'dojo/dom',
'dojo/dom-construct',
'dojo/io-query',
'dojo/request',
'dijit/Destroyable',
'JBrowse/Browser',
'JBrowse/Store/SeqFeature/BEDTabix',
'GWASViewer/View/Track/VariantPlotter',
'JBrowse/View/GranularRectLayout'
],
function (
array,
dom,
domConstruct,
ioQuery,
request,
Destroyable,
Browser,
BEDTabix,
VariantPlotter,
Layout
) {
var queryParams = ioQuery.queryToObject( window.location.search.slice(1) );
var dataRoot = queryParams.data || "data";
var width = queryParams.width || 1800;
var file = queryParams.urlTemplate || "GIANT_WHRadjBMI_Heid2010.bed.gz";
var trackConfig = {
baseUrl: dataRoot,
urlTemplate: dataRoot+"/"+file,
storeClass: "JBrowse/Store/SeqFeatre/BEDTabix",
type: "JBrowse/View/Track/CanvasFeatures",
useYAxis: false,
chunkSizeLimit: 10000000,
label: "BMI",
heightScaler: 5,
maxHeight: 400,
style: {
height: 2
},
maxFeatureScreenDensity: 6000,
displayMode: "collapsed",
scoreType: "maxScore"
};
var browser = new Browser({ unitTestMode: true, dataRoot: dataRoot });
browser.view = {
minVisible: function() { return 0; },
maxVisible: function() { return 100000000; }
};
var store = new BEDTabix({
browser: browser,
urlTemplate: trackConfig.urlTemplate,
config: trackConfig,
chunkSizeLimit: trackConfig.chunkSizeLimit
});
dom.byId('label').innerHTML = file;
var renderBlock = function(chrom, len, left, container, finishCallback) {
store.refSeq = chrom;
var node = domConstruct.create('div', {
id: 'display-'+chrom.name,
style: {
position: "absolute",
width: len+'px',
left: left+'px',
height: trackConfig.maxHeight+'px',
border: "1px solid black"
}
}, container);
var label = domConstruct.create('div', {
id: 'display-'+chrom.name+'-label',
style: {
position: "absolute",
width: len+'px',
left: left+'px',
margin: '2px'
},
innerHTML: '<a href="/jbrowse/?data='+dataRoot+'&loc='+chrom.name+'">'+chrom.name+'</a>'
}, container);
var block = new Destroyable();
block.featureLayout= new Layout(0, chrom.length);
block.featureNodes= [];
block.startBase = 0;
block.endBase = chrom.length;
block.scale = len/chrom.length;
block.domNode = node;
block.bpToX = function(x) { return len*x/chrom.length; }
var track = new VariantPlotter({
config: trackConfig,
browser: browser,
store: store
});
track.blocks = [block];
track.blockHeights = [100];
track.refSeq = { name: name };
track.label = dom.byId('label') || {};
track.heightUpdateCallback = function() { "update height" };
track.filterFeature = function() { return true; };
track.fillBlock({
blockIndex: 0,
block: block,
scale: block.scale,
leftBase: 0,
rightBase: length,
finishCallback: finishCallback
});
}
request( browser.config.dataRoot+'/seq/refSeqs.json',{ handleAs: 'json' }).then(function(chroms) {
chroms.sort(function(a, b) { return b.length - a.length });
var totalbase = 0;
var leftpos = 0;
chroms = chroms.slice(0,24);
array.forEach(chroms, function(chrom) { totalbase += chrom.length; });
var renderNextBlock = function(index) {
if(index>=chroms.length) return;
var len = width/totalbase * chroms[index].length;
renderBlock(chroms[index], len, leftpos, dom.byId('container'), function() { leftpos+=len;renderNextBlock(index+1); });
};
renderNextBlock(0);
});
});
</script>
</head>
<body style="margin: 30px">
<div id="label"></div>
<div id="container"></div>
</body>
</html>
@cmdcolin

This comment has been minimized.

Copy link
Owner Author

commented Mar 23, 2016

gwas_example3

Clicking on the chromosome view can bring up your tracks which can be connected with other resources

screenshot-localhost 2016-03-22 23-31-56

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.