Skip to content
Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
117 lines (92 sloc) 3.58 KB
<!DOCTYPE html>
<html>
<head>
<!-- include iobio libs -->
<script type="text/javascript" src="../assets/js/js-local-bam.min.js"></script>
<script type="text/javascript" src="../assets/js/iobio.min.js"></script>
<script type="text/javascript" src="../assets/js/iobio.viz.min.js"></script>
<link rel="stylesheet" type="text/css" href="../assets/css/iobio.viz.min.css">
<!-- include 3rd party libs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src='http://underscorejs.org/underscore-min.js'></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
.container { margin-top: 100px; }
#spinner { display: none; margin-top: 60px; }
</style>
</head>
<body>
<div class='container text-center'>
<!-- Title -->
<h1>BAM Viewer</h1>
<!-- inputs -->
<div id="input">
<!-- region input -->
<div>Region: <input id='region' type='text' value="20:4000000-4001000" ></input></div>
<!-- url input -->
<button class='btn btn-info' type="button" data-toggle="modal" data-target="#urlModal">Open Url</button>
<!-- file input -->
<label class="btn btn-info" for="my-file-selector">
<input id="my-file-selector" onchange="goFile(this)" type="file" style="display:none;" multiple>
Open File
</label>
</div>
<!-- spinner -->
<img id='spinner' src="../assets/img/spinner.gif"></img>
</div>
<!-- url modal -->
<div class="modal fade" id="urlModal" tabindex="-1" role="dialog" aria-labelledby="urlModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body text-center">
<h3>Enter Url</h3>
<input id='url' type='text' value="http://s3.amazonaws.com/iobio/NA12878/NA12878.autsome.bam"></input>
<button onclick='goUrl()' type="button" data-dismiss="modal" class="btn btn-primary">Go</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// Defaults
var webservice = 'services.iobio.io/samtools/'
function goUrl() {
// Get inputs
var url = $('#url').val();
var region = $('#region').val() ;
// Show spinner
$('#spinner').css('display', 'inline');
// Create iobio command
var cmd = new iobio.cmd(webservice, [ 'view', url, region ])
// Do stuff with results
cmd.on('data', function(data) {
console.log(data);
})
// Error handling
cmd.on('error', function(err) { console.log('Error: ' + err);})
// Run command
cmd.run();
}
function goFile(evt) {
// Figure out which is BAM and which is BAI
var bam = evt.files[0].name.slice(-3) == 'bam' ? evt.files[0] : evt.files[1];
var bai = evt.files[0].name.slice(-3) == 'bai' ? evt.files[0] : evt.files[1];
// Parse Region
var region = $('#region').val();
var chr = region.split(':')[0];
var start = +region.split(':')[1].split('-')[0];
var end = +region.split(':')[1].split('-')[1];
var alns;
// Show spinner
$('#spinner').css('display', 'inline');
var bamR = new readBinaryBAM(bai, bam);
bamR.bamFront(function(){
bamR.getAlns(chr, start, end, function(alnseq){
console.log(alnseq);
})
});
}
</script>
</body>
</html>
You can’t perform that action at this time.