Skip to content

Instantly share code, notes, and snippets.

@nathandunn

nathandunn/overview.html

Created March 28, 2017 19:12
Show Gist options
  • Save nathandunn/6bdc91619c682af534ff74c03f0f62cc to your computer and use it in GitHub Desktop.
Save nathandunn/6bdc91619c682af534ff74c03f0f62cc to your computer and use it in GitHub Desktop.
Download ZIP
provides an overview screenshot from a remote JBrowse source specified in URL
Raw
overview.html
<html>
<head>
<title>JBrowse - Retrieve data outside of browser</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>
<style>
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
<script>
// Require bare bones jbrowse components without using the main browser object
require([
'dojo/io-query',
'dojo/dom',
'dojo/json',
'JBrowse/Browser',
'JBrowse/View/Track/HTMLFeatures',
'JBrowse/Util',
'JBrowse/Util/GFF3',
'JBrowse/Store/SeqFeature/NCList',
'JBrowse/Model/SimpleFeature',
'JBrowse/View/GranularRectLayout',
'JBrowse/View/Export',
'JBrowse/Store/Sequence/StaticChunked',
'JBrowse/View/Export/GFF3'
],
function (ioQuery,
dom,
dojoJson,
Browser,
HTMLFeatures,
Util,
GFF3Util,
NCList,
SimpleFeature,
Layout,
ExportMixin,
StaticChunkedSequence,
GFF3Mixin) {
var queryParams = ioQuery.queryToObject(window.location.search.slice(1));
var externalURL = String(window.location.href).replace('overview.html', 'index.html');
var prefix = 'http://agrjbrowse.s3-website-us-east-1.amazonaws.com';
var dataMappings = {
'data/Danio rerio': {data: '/zfin/zebrafish', prefix: ''} // working
, 'data/Mus musculus': {data: '/MGI/mouse', prefix: 'chr'} // working
, 'data/Caenorhabditis elegans': {data: '/WormBase/c_elegans_PRJNA13758', prefix: ''}
, 'data/Drosophila melanogaster': {data: '/FlyBase/fruitfly', prefix: 'chr'} // working
, 'data/Saccharomyces cerevisiae': {data: '/SGD/yeast', prefix: 'chr'}
, 'data/Rattus norvegicus': {data: '/RGD/rat', prefix: 'Chr'}
, 'data/Homo sapiens': {data: '/human', prefix: 'Chr'} // working
}
;
// Caenorhabditis elegans -> /home/ubuntu/AGR-jbrowse/jbrowse/data/Caenorhabditis elegans/
//├── Danio rerio -> /home/ubuntu/AGR-jbrowse/jbrowse/data/Danio rerio/
//├── Drosophila melanogaster -> /home/ubuntu/AGR-jbrowse/jbrowse/data/Drosophila melanogaster/
//├── FlyBase -> /home/ubuntu/AGR-jbrowse/jbrowse/data/FlyBase/
//├── functions.conf -> /home/ubuntu/AGR-jbrowse/jbrowse/data/functions.conf
//├── Homo sapiens -> /home/ubuntu/AGR-jbrowse/jbrowse/data/human
//├── Mus musculus -> /home/ubuntu/AGR-jbrowse/jbrowse/data/MGI/
//├── Rattus norvegicus -> /home/ubuntu/AGR-jbrowse/jbrowse/data/RGD
//├── Saccharomyces cerevisiae -> /home/ubuntu/AGR-jbrowse/jbrowse/data/Saccharomyces cerevisiae/
//├── SGD -> /home/ubuntu/AGR-jbrowse/jbrowse/data/SGD
//├── WormBase -> /home/ubuntu/AGR-jbrowse/jbrowse/data/WormBase/
//└── zfin -> /home/ubuntu/AGR-jbrowse/jbrowse/data/zfin/
var config = {
containerID: "GenomeBrowser",
dataRoot: queryParams.data,
lookupSymbol: queryParams.lookupSymbol,
queryParams: queryParams,
location: queryParams.loc,
updateBrowserURL: true
};
var dataRoot = dataMappings[config.dataRoot].data;
var chrPrefix = dataMappings[config.dataRoot].prefix;
var matchesSymbol = {};
var getGFF = function (conf, region, callback) {
var conf = dojo.mixin({
storeClass: 'JBrowse/Store/SeqFeature/NCList'
}, conf);
var store = new NCList(conf);
store.refSeq = {};
store.refSeq.name = region.refseq;
var exp = new dojo.declare([ExportMixin, GFF3Mixin])({store: store});
// Fake existence of jbrowse object
return exp.exportRegion({ref: region.refseq, start: region.start, end: region.end}, callback);
};
// Initialize jbrowse instance in unittestmode so that it doesn't actually draw the browser to screen
var browser = new Browser({unitTestMode: true});
var region = Util.parseLocString(config.location);
// TODO: Hack
region.refseq = chrPrefix + region.ref;
region.lookupSymbol = config.lookupSymbol;
// TODO: Hack
var trackName = 'All%20Genes';
if (config.dataRoot === 'data/Caenorhabditis elegans') {
trackName = 'Curated_Genes';
}
var parseJSON = function (features, region, callback) {
// TODO: create a separate function
var jsonFeatures = [];
var splitFeatures = features.split('\n');
for (f in splitFeatures) {
var line = splitFeatures[f];
if (line && line.indexOf('#') !== 0) {
// let's get a single gene and substring everything else
var feature = GFF3Util.parse_feature(line);
feature.name = feature.attributes.Name ? feature.attributes.Name[0] : null;
feature.uniqueID = feature.attributes.ID ? feature.attributes.ID[0] : null;
if (feature.attributes.parentID) {
feature.parent = feature.attributes.parentID[0];
}
if (feature.attributes.Parent) {
feature.parent = feature.attributes.Parent;
}
// if its a gene, then include it
// if(!feature.attributes.Parent ){
if (feature.type == 'gene') {
if(feature.name == config.lookupSymbol){
matchesSymbol[feature.uniqueID]=true;
}
}
else if (feature.type == 'mRNA') {
feature.subfeatures = [];
if(matchesSymbol.hasOwnProperty(feature.parent)){
matchesSymbol[feature.uniqueID]=true;
}
jsonFeatures.push(feature);
}
// if we are a child object, we iterate through the top-level genes for a match
else {
// TODO: create an index for this at some point
var parentID = feature.attributes.Parent;
// let's find the parent!
for (j in jsonFeatures) {
parentFeature = jsonFeatures[j];
if (parentFeature.attributes.ID[0] === parentID[0]) {
parentFeature.subfeatures.push(feature);
}
}
}
}
}
return callback(jsonFeatures);
};
// if empty, don't highlight any
var parentSelected = function(feature){
if(Object.keys(matchesSymbol).length>0 && matchesSymbol.hasOwnProperty(feature._uniqueID)){
return true ;
}
return false;
};
getGFF({
urlTemplate: prefix + dataRoot + '/tracks/' + trackName + '/{refseq}/trackData.jsonz',
label: 'Genes',
browser: browser
}, region, function (features) {
parseJSON(features, region, function (jsonFeatures) {
var renderedFeatures = [];
for (j in jsonFeatures) {
featureData = {data: jsonFeatures[j]};
renderedFeatures.push(new SimpleFeature(featureData));
}
// manually initialize a new HTMLFeatures track (similar to a trackList.json config)
var trackConfig = {
style: {
className: 'feature'
},
storeClass: 'JBrowse/Store/SeqFeature/NCList',
type: 'FeatureTrack',
label: 'Testing',
showLabels: true,
onClick: function () {
window.open(externalURL);
},
menuTemplate: null
};
var browser = new Browser({unitTestMode: true});
browser.view = {};
var mmin = 1000000000;
var mmax = -1000000000;
// Set the range of visible regions according to the features that we have
renderedFeatures.forEach(function (feature) {
if (feature.get('start') < mmin) {
mmin = feature.get('start');
}
if (feature.get('end') > mmax) {
mmax = feature.get('end');
}
});
browser.view.minVisible = function () {
return mmin;
};
browser.view.maxVisible = function () {
return mmax;
};
browser.view.visibleRegion = function () {
return {start: mmin, end: mmax};
};
var track = new HTMLFeatures({
config: trackConfig,
store: NCList,
browser: browser
});
var block = {};
block.featureLayout = new Layout(mmin, mmax);
block.featureNodes = [];
block.startBase = mmin - (mmax - mmin) * 0.1;
block.endBase = mmax + (mmax - mmin) * 0.1;
block.domNode = dom.byId('display');
track.refSeq = {};
track.refSeq.name = 'ctgA';
track.blocks = [block];
track.label = dom.byId('label');
track.measureStyles();
track.genomeView = {dragging: false};
renderedFeatures.forEach(function (feature) {
var simplefeature = new SimpleFeature(feature);
var featNode = track.renderFeature(simplefeature, simplefeature.get('name'), block, 0.02, 0.01, 0.01, block.startBase, block.endBase);
if(parentSelected(feature)){
featNode.className= 'selected-feature ' + featNode.className ;
}
if (featNode) {
block.domNode.appendChild(featNode);
track._centerChildrenVertically(featNode);
track._makeClickHandler(track.config.onClick, featNode);
}
});
track.updateStaticElements({x: 0, y: 0, width: 2000, height: 100});
var layedOutElements = document.getElementsByClassName("feature-label");
var maxTop = 0;
for (i in layedOutElements) {
if (layedOutElements[i].style) {
var topString = layedOutElements[i].style.top;
var topInt = Number(topString.substring(0, topString.length - 2));
if (topInt > maxTop) {
maxTop = topInt;
}
}
}
// console.log('max top: ' + maxTop);
document.getElementById('display').style.height = (maxTop + 10) + 'px';
document.getElementById('wrapper').style.height = (maxTop + 10) + 'px';
return maxTop;
})
});
});
</script>
</head>
<body>
<div id="wrapper" style="top:0px;border:none">
<div id="display" class="genomeViewDisplay" style="margin:20px;position:absolute;width:75%;height:200px;"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment