Permalink
Browse files

Add nucleotide level display support

add new seq glyph that displays nucleotides
add remote bam and vcf support
changed compile script to add version number in min.js filename
  • Loading branch information...
1 parent a227106 commit b0b3360b43eed9e54324a41430fa9ebd5418dfe4 @chmille4 committed Dec 9, 2011
View

Large diffs are not rendered by default.

Oops, something went wrong.
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -1,6 +1,6 @@
<html>
-<!-- <script language="javascript" src="../lib/bin.js"></script>
+<script language="javascript" src="../lib/bin.js"></script>
<script language="javascript" src="../lib/inflate.js"></script>
<script language="javascript" src="../lib/bam.js"></script>
<script src="../src/Scribl.class.js" ></script>
@@ -16,21 +16,18 @@
<script src="../src/glyph/Scribl.arrow.js" ></script>
<script src="../src/glyph/Scribl.rect.js" ></script>
<script src="../src/glyph/Scribl.line.js" ></script>
-<script src="../src/glyph/Scribl.complex.js" ></script> -->
-<script src="../Scribl.min.js" ></script>
-<script language="javascript">
-
+<script src="../src/glyph/Scribl.complex.js" ></script>
+<script src="../src/glyph/Scribl.seq.js" ></script>
+<!-- <script src="../Scribl.min.js" ></script> -->
+<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
+<script type="text/javascript" src="examples/js/dragscrollable.js"></script>
-
-// function dlog(msg) {
-// var logHolder = document.getElementById('log');
-// if (logHolder) {
-// logHolder.appendChild(makeElement('p', msg));
-// }
-// }
+<script language="javascript">
function testBam() {
@@ -41,31 +38,61 @@
// Create Chart
var chart = new Scribl(canvas, 500);
- chart.laneSizes = 10;
- chart.addGene( 30000200, 1000, '-');
- chart.loadBam(bamFile, baiFile,'22', 30000100,30005000, function() {
- chart.redraw();
- });
+ chart.laneSizes = 15;
+ // chart.scale.min = 30000100;
+ // chart.scale.max = 30000200;
+ chart.scrollable = true;
+ chart.scrollValues = [30000000, 30000190];
+ // chart.draw();
+ // chart.addGene(10, 1000, '+');
+ // chart.addGene(1000, 1000, '+');
+ var track = chart.loadBam(bamFile, baiFile,'22', 30000100,30000200);
+ //track.drawOnResponse = true;
+ chart.tmp = true;
+ chart.draw();
+ chart.tmp = false;
-// chart.draw();
- // bam1.fetch('22', 30000000, 30010000, function(r, e) {
- // var h = 1;
- // });
}
</script>
<head></head>
<body>
<h1>BAM test</h1>
<div id='content'></div>
+ <input type="file" id="files" name="files[]" multiple />
<button onClick="testBam()">Test Bam</button>
<div id="container">
- <canvas id="canvas" width="547" height="330"></canvas>
+ <canvas id="canvas" width="547" height="330"></canvas>
</div>
<div id='log'>
</div>
+ <script>
+ function handleFileSelect(event) {
+
+ if (event.target.files.length != 2) {
+ alert('must select both a .bam and .bai file');
+ return;
+ }
+
+ var fileType0 = /[^.]+$/.exec(event.target.files[0].name)[0];
+ var fileType1 = /[^.]+$/.exec(event.target.files[1].name)[0];
+
+ if (fileType0 == 'bam' && fileType1 == 'bai') {
+ bamFile = event.target.files[0];
+ baiFile = event.target.files[1];
+ } else if (fileType1 == 'bam' && fileType0 == 'bai') {
+ bamFile = event.target.files[1];
+ baiFile = event.target.files[0];
+ } else {
+ alert('must select both a .bam and .bai file');
+ }
+ }
+
+ document.getElementById('files').addEventListener('change', handleFileSelect, false);
+ </script>
+
<script>
// initalize drag n drop
var content = document.getElementById('content');
@@ -122,8 +149,22 @@ <h1>BAM test</h1>
content.ondrop = function(event) {
content.style.border = '4px solid transparent';
//alert(event.dataTransfer.files[0].name + " " + event.dataTransfer.files[1].name);
- bamFile = event.dataTransfer.files[0];
- baiFile = event.dataTransfer.files[1];
+ if (event.dataTransfer.files.length != 2) {
+ alert('must select both a .bam and .bai file');
+ return;
+ }
+ var fileType0 = /[^.]+$/.exec(event.dataTransfer.files[0].name);
+ var fileType1 = /[^.]+$/.exec(event.dataTransfer.files[1].name);
+
+ if (fileType0 == 'bam' && fileType1 == 'bai') {
+ bamFile = event.dataTransfer.files[0];
+ baiFile = event.dataTransfer.files[1];
+ } else if (fileType1 == 'bam' && fileType0 == 'bai') {
+ bamFile = event.dataTransfer.files[1];
+ baiFile = event.dataTransfer.files[0];
+ } else {
+ alert('must select both a .bam and .bai file');
+ }
//displayChart(event.dataTransfer.files[0]);
return false;
};
@@ -8,7 +8,7 @@
* http://www.gnu.org/licenses/gpl.html
*
*/
-;(function($){ // secure $ jQuery alias
+;(function(jQuery){ // secure $ jQuery alias
/**
* Adds the ability to manage elements scroll by dragging
@@ -49,9 +49,9 @@
* would not interfere as acceptPropagatedEvent is set to false.
*
*/
-$.fn.dragscrollable = function( options ){
+jQuery.fn.dragscrollable = function( options ){
- var settings = $.extend(
+ var settings = jQuery.extend(
{
dragSelector:'>:first',
acceptPropagatedEvent: true,
@@ -70,9 +70,9 @@ $.fn.dragscrollable = function( options ){
// Initial coordinates will be the last when dragging
event.data.lastCoord = {left: event.clientX, top: event.clientY};
- $.event.add( document, "mouseup",
+ jQuery.event.add( document, "mouseup",
dragscroll.mouseUpHandler, event.data );
- $.event.add( document, "mousemove",
+ jQuery.event.add( document, "mousemove",
dragscroll.mouseMoveHandler, event.data );
if (event.data.preventDefault) {
event.preventDefault();
@@ -99,8 +99,8 @@ $.fn.dragscrollable = function( options ){
},
mouseUpHandler : function(event) { // Stop scrolling
- $.event.remove( document, "mousemove", dragscroll.mouseMoveHandler);
- $.event.remove( document, "mouseup", dragscroll.mouseUpHandler);
+ jQuery.event.remove( document, "mousemove", dragscroll.mouseMoveHandler);
+ jQuery.event.remove( document, "mouseup", dragscroll.mouseUpHandler);
if (event.data.preventDefault) {
event.preventDefault();
return false;
@@ -111,11 +111,11 @@ $.fn.dragscrollable = function( options ){
// set up the initial events
this.each(function() {
// closure object data for each scrollable element
- var data = {scrollable : $(this),
+ var data = {scrollable : jQuery(this),
acceptPropagatedEvent : settings.acceptPropagatedEvent,
preventDefault : settings.preventDefault }
// Set mouse initiating event on the desired descendant
- $(this).find(settings.dragSelector).
+ jQuery(this).find(settings.dragSelector).
bind('mousedown', data, dragscroll.mouseDownHandler);
});
}; //end plugin dragscrollable
View
@@ -2,15 +2,35 @@
<html lang="en">
<head>
<title>Scribl - viewer</title>
- <script src="../Scribl.min.js" ></script>
+ <!-- <script src="../Scribl.min.js" ></script> -->
+ <script src="../src/Scribl.class.js" ></script>
+ <script src="../src/Scribl.js" ></script>
+ <script src="../src/Scribl.track.js" ></script>
+ <script src="../src/Scribl.lane.js" ></script>
+ <script src="../src/Scribl.tooltips.js" ></script>
+ <script src="../src/Scribl.events.js" ></script>
+ <script src="../src/Scribl.utils.js" ></script>
+ <script src="../src/Scribl.svg.js" ></script>
+ <script src="../src/Scribl.glyph.js" ></script>
+ <script src="../src/glyph/Scribl.blockarrow.js" ></script>
+ <script src="../src/glyph/Scribl.arrow.js" ></script>
+ <script src="../src/glyph/Scribl.rect.js" ></script>
+ <script src="../src/glyph/Scribl.line.js" ></script>
+ <script src="../src/glyph/Scribl.complex.js" ></script>
+ <script src="../src/parsers/genbank.js" ></script>
+
+
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="demos.css" />
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/dragscrollable.js"></script>
<script type="text/javascript" src="js/genbankData.js"></script>
-
+ <script type="text/javascript" src="prototype.js"></script>
+
<style>
#scribl-zoom-slider {
width: 4px;
View
@@ -33,7 +33,7 @@ function makeBam(data, bai, callback) {
bam.data.fetch(function(r) {
if (!r) {
- return dlog("Couldn't access BAM");
+ return alert("Couldn't access BAM");
}
var unc = unbgzf(r);
@@ -77,13 +77,13 @@ function makeBam(data, bai, callback) {
bam.bai.fetch(function(header) { // Do we really need to fetch the whole thing? :-(
if (!header) {
- return dlog("Couldn't access BAI");
+ return alert("Couldn't access BAI");
}
var uncba = new Uint8Array(header);
var baiMagic = readInt(uncba, 0);
if (baiMagic != BAI_MAGIC) {
- return dlog('Not a BAI file');
+ return alert('Not a BAI file');
}
var nref = readInt(uncba, 4);
View
@@ -34,8 +34,10 @@ BlobFetchable.prototype.fetch = function(callback) {
callback(bstringToBuffer(reader.result));
};
reader.readAsBinaryString(this.blob);
+
}
+
function URLFetchable(url, start, end, opts) {
if (!opts) {
if (typeof start === 'object') {
View
@@ -21,7 +21,7 @@ var MouseEventHandler = Class.extend({
this.mouseY = null;
this.eventElement = undefined;
this.isEventDetected = false;
- this.tooltip = new tooltips(this.chart);
+ this.tooltip = new Tooltip("", 'above', -4);
},
/** **addEvents**
@@ -37,10 +37,18 @@ var MouseEventHandler = Class.extend({
var me = chart.myMouseEventHandler;
// check if any features use onmouseover and if so register an event listener if not already done
- if (feature.onMouseover && !chart.events.hasMouseover) {
+ if (feature.onMouseover && !chart.events.hasMouseover ) {
chart.addMouseoverEventListener(chart.myMouseEventHandler.handleMouseover);
chart.events.hasMouseover = true;
- }
+ }
+ else if (feature.tooltips.length>0 && !chart.events.hasMouseover){
+ chart.addMouseoverEventListener(chart.myMouseEventHandler.handleMouseover);
+ chart.events.hasMouseover = true;
+ }
+ else if (feature.parent && feature.parent.tooltips.length>0 && !chart.events.hasMouseover){
+ chart.addMouseoverEventListener(chart.myMouseEventHandler.handleMouseover);
+ chart.events.hasMouseover = true;
+ }
else if (feature.parent && feature.parent.onMouseover && !chart.events.hasMouseover) {
chart.addMouseoverEventListener(chart.myMouseEventHandler.handleMouseover);
chart.events.hasMouseover = true;
@@ -89,7 +97,7 @@ var MouseEventHandler = Class.extend({
handleClick: function(chart) {
var me = chart.myMouseEventHandler;
var clicked = me.eventElement;
- var onClick;
+ var onClick;
// check if the click occured on a feature/object with an onClick property
if (clicked != undefined && clicked.onClick != undefined)
@@ -161,12 +169,17 @@ var MouseEventHandler = Class.extend({
var me = chart.myMouseEventHandler;
var clicked = me.eventElement;
+ // handle mouseover tooltips
if (clicked != undefined && clicked.onMouseover != undefined)
me.tooltip.fire(clicked);
else if (clicked && clicked.parent && clicked.parent.onMouseover) {
clicked.onMouseover = clicked.parent.onMouseover
me.tooltip.fire(clicked);
}
+
+ // handle tooltip object tooltips
+ if (clicked && clicked.tooltips.length > 0)
+ clicked.fireTooltips();
},
/** **handleMouseStyle**
View
@@ -31,12 +31,15 @@ var Glyph = Class.extend({
glyph.position = pos;
glyph.length = length;
glyph.strand = strand;
+ glyph.opts = opts;
// this is used for all attributes at the chart level (e.g. chart.gene.color = "blue" )
this.type = type;
glyph.name = "";
glyph.borderColor = "none";
glyph.borderWidth = undefined;
+ glyph.ntLevel = 4; // in pixels - sets the level at which glyphs are rendered as actual nucleotides instead of icons
+ glyph.tooltips = [];
// initialize font variables
glyph.text = {};
@@ -378,6 +381,35 @@ var Glyph = Class.extend({
glyph.ctx.clearRect(glyph.getPixelPositionX(), glyph.getPixelPositionY(), glyph.getPixelLength(), glyph.getHeight());
glyph.ctx.restore();
},
+
+ /** **addTooltip**
+
+ * _add tooltip to glyph. Can add multiple tooltips_
+
+ * @param {Int} placement - two options 'above' glyph or 'below' glyph
+ * @param {Int} verticalOffset - + numbers for up, - for down
+ * @param {Hash} options - optional attributes, horizontalOffset and ntOffset (nucleotide)
+ * @return {Object} tooltip
+ * @api public
+ */
+
+ addTooltip: function(text, placement, verticalOffset, opts){
+ var glyph = this;
+ var tt = new Tooltip(text, placement, verticalOffset, opts);
+ tt.feature = glyph;
+ glyph.tooltips.push( tt );
+ },
+
+ /** **fireTooltips**
+
+ * _draws the tooltips associated with this feature_
+
+ * @api public
+ */
+ fireTooltips: function() {
+ for (var i=0; i < this.tooltips.length; i++)
+ this.tooltips[i].fire()
+ },
/** **draw**
@@ -410,8 +442,17 @@ var Glyph = Class.extend({
if (glyph.strand == '-' && !glyph.isSubFeature())
glyph.ctx.transform(-1, 0, 0, 1, glyph.getPixelLength(), 0);
- // draw glyph with subclass specific draw
- glyph._draw();
+ if (glyph.seq && glyph.lane.chart.ntsToPixels() < glyph.ntLevel){
+ var s = new Seq(glyph.type, glyph.position, glyph.length, glyph.seq, glyph.opts);
+ s.lane = glyph.lane;
+ s.ctx = glyph.ctx;
+ s._draw();
+ } else {
+ // draw glyph with subclass specific draw
+ glyph._draw();
+ }
+
+
// draw border color
if (glyph.borderColor != "none") {
Oops, something went wrong.

0 comments on commit b0b3360

Please sign in to comment.