")}$(".dialog-box").find(".body").html(c);if(!$(".dialog-box-container").is(":visible")){$("#overlay").show();$(".dialog-box-container").fadeIn()}}function show_in_overlay(c){var d=c.width||"600";var b=c.height||"400";var a=c.scroll||"auto";$("#overlay-background").bind("click.overlay",function(){hide_modal();$("#overlay-background").unbind("click.overlay")});show_modal(null,$("
")}$(".dialog-box").find(".body").html(c);if(!$(".dialog-box-container").is(":visible")){$("#overlay").show();$(".dialog-box-container").fadeIn()}}function show_in_overlay(c){var d=c.width||"600";var b=c.height||"400";var a=c.scroll||"auto";$("#overlay-background").bind("click.overlay",function(){hide_modal();$("#overlay-background").unbind("click.overlay")});show_modal(null,$("
");this.container_div=$("").append(this.header_div).append(this.content_div);this.parent_element.append(this.container_div)}});var TiledTrack=function(){};$.extend(TiledTrack.prototype,Track.prototype,{draw:function(){var j=this.view.low,e=this.view.high,f=e-j,d=this.view.resolution;if(DEBUG){$("#debug").text(d+" "+this.view.zoom_res)}var l=$("");this.content_div.children(":first").remove();this.content_div.append(l);var m=this.content_div.width()/f;var i=20;var h;var a=Math.floor(j/d/DENSITY);while((a*DENSITY*d)
");while(a"+a.min_value+"
");var b=$(""+a.max_value+"
");b.css({position:"relative",top:"35px"});b.prependTo(a.container_div);d.css({position:"relative",top:a.height_px+32+"px"});d.prependTo(a.container_div);a.draw()}}}})},get_data:function(d,b){var c=this,a=b*DENSITY*d,f=(b+1)*DENSITY*d,e=d+"_"+b;if(!c.data_queue[e]){c.data_queue[e]=true;$.getJSON(data_url,{indexer:this.indexer,chrom:this.view.chrom,low:a,high:f,dataset_id:this.dataset_id,resolution:this.view.resolution},function(g){c.cache.set(e,g);delete c.data_queue[e];c.draw()})}},draw_tile:function(d,a,m,o){if(!this.vertical_range){return}var h=a*DENSITY*d,b=DENSITY*d,c=$(""),l=d+"_"+a;if(!this.cache.get(l)){this.get_data(d,a);return}var g=this.cache.get(l);c.css({position:"absolute",top:0,left:(h-this.view.low)*o});c.get(0).width=Math.ceil(b*o);c.get(0).height=this.height_px;var n=c.get(0).getContext("2d");var e=false;n.beginPath();for(var f=0;f");this.container_div=$("").append(this.header_div).append(this.content_div);this.parent_element.append(this.container_div)}});var TiledTrack=function(){};$.extend(TiledTrack.prototype,Track.prototype,{draw:function(){var j=this.view.low,e=this.view.high,f=e-j,d=this.view.resolution;if(DEBUG){$("#debug").text(d+" "+this.view.zoom_res)}var l=$("");this.content_div.children(":first").remove();this.content_div.append(l);var m=this.content_div.width()/f;var i=20;var h;var a=Math.floor(j/d/DENSITY);while((a*DENSITY*d)
");while(a"+a.min_value+"
");var b=$(""+a.max_value+"
");b.css({position:"relative",top:"25px"});b.prependTo(a.container_div);d.css({position:"relative",top:a.height_px+55+"px"});d.prependTo(a.container_div);a.draw()}}}})},get_data:function(d,b){var c=this,a=b*DENSITY*d,f=(b+1)*DENSITY*d,e=d+"_"+b;if(!c.data_queue[e]){c.data_queue[e]=true;$.getJSON(data_url,{indexer:this.indexer,chrom:this.view.chrom,low:a,high:f,dataset_id:this.dataset_id,resolution:this.view.resolution},function(g){c.cache.set(e,g);delete c.data_queue[e];c.draw()})}},draw_tile:function(d,a,m,o){if(!this.vertical_range){return}var h=a*DENSITY*d,b=DENSITY*d,c=$(""),l=d+"_"+a;if(!this.cache.get(l)){this.get_data(d,a);return}var g=this.cache.get(l);c.css({position:"absolute",top:0,left:(h-this.view.low)*o});c.get(0).width=Math.ceil(b*o);c.get(0).height=this.height_px;var n=c.get(0).getContext("2d");var e=false;n.beginPath();for(var f=0;f" + track.max_value + "
");
- max_label.css({ position: "relative", top: "35px" });
- max_label.prependTo(track.container_div)
+ max_label.css({ position: "relative", top: "25px" });
+ max_label.prependTo(track.container_div);
- min_label.css({ position: "relative", top: track.height_px + 32 + "px" });
+ min_label.css({ position: "relative", top: track.height_px + 55 + "px" });
min_label.prependTo(track.container_div);
track.draw();
@@ -371,13 +371,15 @@ var FeatureTrack = function ( name, dataset_id, indexer, height ) {
this.dataset_id = dataset_id;
this.zo_slots = {};
this.show_labels_scale = 0.001;
- this.showing_labels = false;
- this.vertical_gap = 10;
+ this.showing_details = false;
+ this.vertical_detail_px = 10;
+ this.vertical_nodetail_px = 3;
this.base_color = "#2C3143";
this.default_font = "9px Monaco, Lucida Console, monospace";
this.left_offset = 200;
this.inc_slots = {};
this.data_queue = {};
+ this.s_e_by_tile = {};
this.data_cache = new Cache(20);
};
$.extend( FeatureTrack.prototype, TiledTrack.prototype, {
@@ -425,10 +427,8 @@ $.extend( FeatureTrack.prototype, TiledTrack.prototype, {
}
},
calc_slots: function() {
- // console.log("num vals: " + this.values.length);
var end_ary = [],
scale = this.content_div.width() / (this.view.high - this.view.low),
- max_high = this.view.max_high,
max_low = this.view.max_low;
// console.log(scale, this.view.high, this.view.low);
for (var i = 0, len = this.values.length; i < len; i++) {
@@ -447,43 +447,62 @@ $.extend( FeatureTrack.prototype, TiledTrack.prototype, {
j++;
}
}
- this.height_px = end_ary.length * this.vertical_gap + 15;
+ this.height_px = end_ary.length * this.vertical_nodetail_px + 15;
this.content_div.css( "height", this.height_px + "px" );
},
incremental_slots: function( level, features ) {
if (!this.inc_slots[level]) {
this.inc_slots[level] = {};
- this.inc_slots[level].w_scale = DENSITY / Math.pow(FEATURE_LEVELS, level+1);
+ this.inc_slots[level].w_scale = 1 / level;
+ this.s_e_by_tile[level] = {};
}
- var slots = this.inc_slots[level];
- // console.log(level, slots.w_scale, slots);
- var end_ary = [],
+ // TODO: Should calculate zoom tile index, which will improve performance
+ // by only having to look at a smaller subset
+ // if (this.s_e_by_tile[0] === undefined) { this.s_e_by_tile[0] = []; }
+ var w_scale = this.inc_slots[level].w_scale,
undone = [],
highest_slot = 0, // To measure how big to draw canvas
dummy_canvas = $("").get(0).getContext("2d"),
max_low = this.view.max_low;
+ var f_start, f_end, slotted = [];
+
+ // If feature already exists in slots (from previously seen tiles), use the same slot,
+ // otherwise if not seen, add to "undone" list for slot calculation
for (var i = 0, len = features.length; i < len; i++) {
var feature = features[i];
- // console.log(feature.name, feature.uid, slots[feature.uid]);
- if (slots[feature.uid]) {
- highest_slot = Math.max(highest_slot, slots[feature.uid]);
- end_ary[ slots[feature.uid] ] = Math.ceil( (feature.end - max_low) * slots.w_scale );
+ if (this.inc_slots[level][feature.uid] !== undefined) {
+ highest_slot = Math.max(highest_slot, this.inc_slots[level][feature.uid]);
+ slotted.push(this.inc_slots[level][feature.uid]);
} else {
- undone.push(feature);
- }
+ undone.push(i);
+ }
}
+
+ // console.log("Slotted: ", features.length - undone.length, "/", features.length, slotted);
for (var i = 0, len = undone.length; i < len; i++) {
- var feature = undone[i];
- f_start = Math.floor( (feature.start - max_low) * slots.w_scale );
+ var feature = features[undone[i]];
+ f_start = Math.floor( (feature.start - max_low) * w_scale );
f_start -= dummy_canvas.measureText(feature.name).width;
- f_end = Math.ceil( (feature.end - max_low) * slots.w_scale );
- // console.log(f_start, f_end, feature.name);
+ f_end = Math.ceil( (feature.end - max_low) * w_scale );
+
var j = 0;
+ // Try to fit the feature to the first slot that doesn't overlap any other features in that slot
while (true) {
- if (end_ary[j] === undefined || end_ary[j] < f_start) {
- end_ary[j] = f_end;
- slots[feature.uid] = j;
+ var found = true;
+ if (this.s_e_by_tile[level][j] !== undefined) {
+ for (var k = 0, k_len = this.s_e_by_tile[level][j].length; k < k_len; k++) {
+ var s_e = this.s_e_by_tile[level][j][k];
+ if (f_end > s_e[0] && f_start < s_e[1]) {
+ found = false;
+ break;
+ }
+ }
+ }
+ if (found) {
+ if (this.s_e_by_tile[level][j] === undefined) { this.s_e_by_tile[level][j] = []; }
+ this.s_e_by_tile[level][j].push([f_start, f_end]);
+ this.inc_slots[level][feature.uid] = j;
highest_slot = Math.max(highest_slot, j);
break;
}
@@ -504,8 +523,8 @@ $.extend( FeatureTrack.prototype, TiledTrack.prototype, {
// Once we zoom in enough, show name labels
var data, slots, required_height;
if (w_scale > this.show_labels_scale) {
- if (!this.showing_labels) {
- this.showing_labels = true;
+ if (!this.showing_details) {
+ this.showing_details = true;
}
for (var k in this.data_cache.obj_cache) {
var k_split = k.split("_"), k_low = k_split[0], k_high = k_split[1];
@@ -519,12 +538,13 @@ $.extend( FeatureTrack.prototype, TiledTrack.prototype, {
this.get_data(tile_low, tile_high);
return;
}
- required_height = this.incremental_slots( this.view.zoom_res, data ) * this.vertical_gap + 15;
+ // Calculate new slots incrementally for this new chunk of data and update height if necessary
+ required_height = this.incremental_slots( this.view.zoom_res, data ) * this.vertical_detail_px + 15;
// console.log(required_height);
slots = this.inc_slots[this.view.zoom_res];
} else {
- if (this.showing_labels) {
- this.showing_labels = false;
+ if (this.showing_details) {
+ this.showing_details = false;
}
required_height = this.height_px;
slots = this.zo_slots;
@@ -554,14 +574,14 @@ $.extend( FeatureTrack.prototype, TiledTrack.prototype, {
if (feature.start <= tile_high && feature.end >= tile_low) {
var f_start = Math.floor( Math.max(0, (feature.start - tile_low) * w_scale) ),
f_end = Math.ceil( Math.min(width, (feature.end - tile_low) * w_scale) ),
- y_center = slots[feature.uid] * this.vertical_gap;
+ y_center = slots[feature.uid] * (this.showing_details ? this.vertical_detail_px : this.vertical_nodetail_px);
var thickness, y_start, thick_start = null, thick_end = null;
if (feature.thick_start && feature.thick_end) {
thick_start = Math.floor( Math.max(0, (feature.thick_start - tile_low) * w_scale) );
thick_end = Math.ceil( Math.min(width, (feature.thick_end - tile_low) * w_scale) );
}
- if (!this.showing_labels) {
+ if (!this.showing_details) {
// Non-detail levels
ctx.fillRect(f_start + this.left_offset, y_center + 5, f_end - f_start, 1);
} else {
@@ -569,6 +589,7 @@ $.extend( FeatureTrack.prototype, TiledTrack.prototype, {
if (ctx.fillText && feature.start > tile_low) {
ctx.fillText(feature.name, f_start - 1 + this.left_offset, y_center + 8);
// ctx.fillText(commatize(feature.start), f_start - 1 + this.left_offset, y_center + 8);
+ // ctx.fillText(slots[feature.uid], f_start - 1 + this.left_offset, y_center + 8);
}
var blocks = feature.blocks;
if (blocks) {
@@ -592,13 +613,12 @@ $.extend( FeatureTrack.prototype, TiledTrack.prototype, {
thickness = 5;
y_start = 3;
ctx.fillRect(block_start + this.left_offset, y_center + y_start, block_end - block_start, thickness);
-
- if (thick_start && (block_start < thick_end || block_end > thick_start) ) {
+
+ if (thick_start !== undefined && (block_start <= thick_end || block_end >= thick_start) ) {
thickness = 9;
y_start = 1;
var block_thick_start = Math.max(block_start, thick_start),
block_thick_end = Math.min(block_end, thick_end);
-
ctx.fillRect(block_thick_start + this.left_offset, y_center + y_start, block_thick_end - block_thick_start, thickness);
}
@@ -654,9 +674,7 @@ $.extend( ReadTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype, {
// console.log(tile_low, tile_high, tile_length, w_scale);
var width = Math.ceil( tile_span * w_scale ),
new_canvas = $("");
-
- var dummy_canvas = $("").get(0).getContext("2d");
-
+
new_canvas.css({
position: "absolute",
top: 0,
@@ -677,7 +695,7 @@ $.extend( ReadTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype, {
if (feature.start <= tile_high && feature.end >= tile_low) {
var f_start = Math.floor( Math.max(0, (feature.start - tile_low) * w_scale) ),
f_end = Math.ceil( Math.min(width, (feature.end - tile_low) * w_scale) ),
- y_center = slots[feature.uid] * this.vertical_gap;
+ y_center = slots[feature.uid] * this.vertical_detail_px;
var thickness, y_start, thick_start = null, thick_end = null;
if (w_scale > px_per_char) {
diff --git a/static/trackster.css b/static/trackster.css
index 13c4481898a..c03ab5f42bc 100644
--- a/static/trackster.css
+++ b/static/trackster.css
@@ -22,7 +22,6 @@ body {
#nav-container {
position: fixed;
bottom: 0;
- width: 100%;
}
input {
@@ -60,7 +59,8 @@ input {
width: 100%;
margin: 0px;
color: white;
- margin-top: 10px;
+ margin-top: -6px;
+ margin-bottom: -3px;
}
#overview-viewport {
@@ -82,7 +82,7 @@ input {
}
#viewport {
- overflow-x: hidden;
+/* overflow-x: hidden;*/
background-color: #fff;
/* overflow: scroll;*/
/* border-bottom: 2px solid black;*/
diff --git a/templates/base_panels.mako b/templates/base_panels.mako
index 1ca19af2aad..4592c03d962 100644
--- a/templates/base_panels.mako
+++ b/templates/base_panels.mako
@@ -318,8 +318,8 @@