mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
trackster: fix thick region display bug, stacking bugs, enable right-panel
This commit is contained in:
@@ -221,7 +221,6 @@ class TracksController( BaseController ):
|
||||
converted dataset (possibly new) is returned, if it cannot be converted,
|
||||
None is returned.
|
||||
"""
|
||||
log.debug("Inside dataset as type")
|
||||
# Already of correct type
|
||||
if dataset.extension == type:
|
||||
return dataset
|
||||
|
||||
@@ -25,17 +25,16 @@ class VisualizationListGrid( grids.Grid ):
|
||||
return query.filter_by( user=trans.user )
|
||||
|
||||
class VisualizationController( BaseController ):
|
||||
|
||||
list_grid = VisualizationListGrid()
|
||||
@web.expose
|
||||
@web.require_login()
|
||||
def index( self, trans ):
|
||||
return trans.fill_template( "panels.mako", active_view='visualization', main_url=url_for( action='list' ) )
|
||||
def index( self, trans, *args, **kwargs ):
|
||||
return trans.fill_template( "panels.mako", grid=self.list_grid( trans, *args, **kwargs ), active_view='visualization', main_url=url_for( action='list' ) )
|
||||
|
||||
list_grid = VisualizationListGrid()
|
||||
@web.expose
|
||||
@web.require_login()
|
||||
def list( self, trans, *args, **kwargs ):
|
||||
return self.list_grid( trans, *args, **kwargs )
|
||||
# @web.expose
|
||||
# @web.require_login()
|
||||
# def list( self, trans, *args, **kwargs ):
|
||||
# return self.list_grid( trans, *args, **kwargs )
|
||||
|
||||
#@web.expose
|
||||
#@web.require_admin
|
||||
|
||||
@@ -1 +1 @@
|
||||
function ensure_dd_helper(){if($("#DD-helper").length==0){$("<div id='DD-helper'/>").css({background:"white",opacity:0,zIndex:9000,position:"absolute",top:0,left:0,width:"100%",height:"100%"}).appendTo("body").hide()}}function make_left_panel(h,c,e){var g=false;var f=null;var d=function(i){var j=i;if(i<0){i=0}$(h).css("width",i);$(e).css("left",j);$(c).css("left",i+7);if(document.recalc){document.recalc()}};var a=function(){if(g){$(e).removeClass("hover");$(e).animate({left:f},"fast");$(h).css("left",-f).show().animate({left:0},"fast",function(){d(f);$(e).removeClass("hidden")});g=false}else{f=$(e).position().left;$(c).css("left",$(e).innerWidth());if(document.recalc){document.recalc()}$(e).removeClass("hover");$(h).animate({left:-f},"fast");$(e).animate({left:-1},"fast",function(){$(this).addClass("hidden")});g=true}};$(e).hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")}).bind("dragstart",function(i){$("#DD-helper").show()}).bind("dragend",function(i){$("#DD-helper").hide()}).bind("drag",function(i){x=i.offsetX;x=Math.min(400,Math.max(100,x));if(g){$(h).css("left",0);$(e).removeClass("hidden");g=false}d(x)}).bind("dragclickonly",function(i){a()}).find("div").show();var b=function(i){if((g&&i=="show")||(!g&&i=="hide")){a()}};return{force_panel:b}}function make_right_panel(a,e,h){var j=false;var g=false;var c=null;var d=function(k){$(a).css("width",k);$(e).css("right",k+9);$(h).css("right",k).css("left","");if(document.recalc){document.recalc()}};var i=function(){if(j){$(h).removeClass("hover");$(h).animate({right:c},"fast");$(a).css("right",-c).show().animate({right:0},"fast",function(){d(c);$(h).removeClass("hidden")});j=false}else{c=$(document).width()-$(h).position().left-$(h).outerWidth();$(e).css("right",$(h).innerWidth()+1);if(document.recalc){document.recalc()}$(h).removeClass("hover");$(a).animate({right:-c},"fast");$(h).animate({right:-1},"fast",function(){$(this).addClass("hidden")});j=true}g=false};var b=function(k){var l=$(e).width()-(j?c:0);if(l<k){if(!j){i();g=true}}else{if(g){i();g=false}}};$(h).hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")}).bind("dragstart",function(k){$("#DD-helper").show()}).bind("dragend",function(k){$("#DD-helper").hide()}).bind("drag",function(k){x=k.offsetX;w=$(window).width();x=Math.min(w-100,x);x=Math.max(w-400,x);if(j){$(a).css("right",0);$(h).removeClass("hidden");j=false}d(w-x-$(this).outerWidth())}).bind("dragclickonly",function(k){i()}).find("div").show();var f=function(k){if((j&&k=="show")||(!j&&k=="hide")){i()}};return{handle_minwidth_hint:b,force_panel:f}}function hide_modal(){$(".dialog-box-container").fadeOut(function(){$("#overlay").hide();$(".dialog-box").find(".body").children().remove()})}function show_modal(f,c,e,d){if(f){$(".dialog-box").find(".title").html(f);$(".dialog-box").find(".unified-panel-header").show()}else{$(".dialog-box").find(".unified-panel-header").hide()}var a=$(".dialog-box").find(".buttons").html("");if(e){$.each(e,function(b,g){a.append($("<button/>").text(b).click(g));a.append(" ")});a.show()}else{a.hide()}var a=$(".dialog-box").find(".extra_buttons").html("");if(d){$.each(d,function(b,g){a.append($("<button/>").text(b).click(g));a.append(" ")});a.show()}else{a.hide()}if(c=="progress"){c=$("<img src='../images/yui/rel_interstitial_loading.gif')' />")}$(".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,$("<div style='margin: -5px;'><img id='close_button' style='position:absolute;right:3px;top:3px;' src='../images/icon_error_sml.gif'><iframe style='margin: 0; padding: 0;' src='"+c.url+"' width='"+d+"' height='"+b+"' scrolling='"+a+"' frameborder='0'></iframe></div>"));$("#close_button").bind("click",function(){hide_modal()})}$(function(){$(".tab").each(function(){var a=$(this).children(".submenu");if(a.length>0){if($.browser.msie){a.prepend("<iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; filter:Alpha(Opacity='0');\"></iframe>")}$(this).hover(function(){a.show()},function(){a.hide()});a.click(function(){a.hide()})}})});function user_changed(a,b){if(a){$(".loggedin-only").show();$(".loggedout-only").hide();$("#user-email").text(a);if(b){$(".admin-only").show()}}else{$(".loggedin-only").hide();$(".loggedout-only").show();$(".admin-only").hide()}};
|
||||
function ensure_dd_helper(){if($("#DD-helper").length==0){$("<div id='DD-helper'/>").css({background:"white",opacity:0,zIndex:9000,position:"absolute",top:0,left:0,width:"100%",height:"100%"}).appendTo("body").hide()}}function make_left_panel(h,c,e){var g=false;var f=null;var d=function(i){var j=i;if(i<0){i=0}$(h).css("width",i);$(e).css("left",j);$(c).css("left",i+7);if(document.recalc){document.recalc()}};var a=function(){if(g){$(e).removeClass("hover");$(e).animate({left:f},"fast");$(h).css("left",-f).show().animate({left:0},"fast",function(){d(f);$(e).removeClass("hidden")});g=false}else{f=$(e).position().left;$(c).css("left",$(e).innerWidth());if(document.recalc){document.recalc()}$(e).removeClass("hover");$(h).animate({left:-f},"fast");$(e).animate({left:-1},"fast",function(){$(this).addClass("hidden")});g=true}};$(e).hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")}).bind("dragstart",function(i){$("#DD-helper").show()}).bind("dragend",function(i){$("#DD-helper").hide()}).bind("drag",function(i){x=i.offsetX;x=Math.min(400,Math.max(100,x));if(g){$(h).css("left",0);$(e).removeClass("hidden");g=false}d(x)}).bind("dragclickonly",function(i){a()}).find("div").show();var b=function(i){if((g&&i=="show")||(!g&&i=="hide")){a()}};return{force_panel:b}}function make_right_panel(a,e,h){var j=false;var g=false;var c=null;var d=function(k){$(a).css("width",k);$(e).css("right",k+9);$(h).css("right",k).css("left","");if(document.recalc){document.recalc()}};var i=function(){if(j){$(h).removeClass("hover");$(h).animate({right:c},"fast");$(a).css("right",-c).show().animate({right:0},"fast",function(){d(c);$(h).removeClass("hidden")});j=false}else{c=$(document).width()-$(h).position().left-$(h).outerWidth();$(e).css("right",$(h).innerWidth()+1);if(document.recalc){document.recalc()}$(h).removeClass("hover");$(a).animate({right:-c},"fast");$(h).animate({right:-1},"fast",function(){$(this).addClass("hidden")});j=true}g=false};var b=function(k){var l=$(e).width()-(j?c:0);if(l<k){if(!j){i();g=true}}else{if(g){i();g=false}}};$(h).hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")}).bind("dragstart",function(k){$("#DD-helper").show()}).bind("dragend",function(k){$("#DD-helper").hide()}).bind("drag",function(k){x=k.offsetX;w=$(window).width();x=Math.min(w-100,x);x=Math.max(w-400,x);if(j){$(a).css("right",0);$(h).removeClass("hidden");j=false}d(w-x-$(this).outerWidth())}).bind("dragclickonly",function(k){i()}).find("div").show();var f=function(k){if((j&&k=="show")||(!j&&k=="hide")){i()}};return{handle_minwidth_hint:b,force_panel:f}}function hide_modal(){$(".dialog-box-container").fadeOut(function(){$("#overlay").hide();$(".dialog-box").find(".body").children().remove()})}function show_modal(f,c,e,d){if(f){$(".dialog-box").find(".title").html(f);$(".dialog-box").find(".unified-panel-header").show()}else{$(".dialog-box").find(".unified-panel-header").hide()}var a=$(".dialog-box").find(".buttons").html("");if(e){$.each(e,function(b,g){a.append($("<button/>").text(b).click(g));a.append(" ")});a.show()}else{a.hide()}var a=$(".dialog-box").find(".extra_buttons").html("");if(d){$.each(d,function(b,g){a.append($("<button/>").text(b).click(g));a.append(" ")});a.show()}else{a.hide()}if(c=="progress"){c=$("<img src='../images/yui/rel_interstitial_loading.gif')' />")}$(".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,$("<div style='margin: -5px;'><img id='close_button' style='position:absolute;right:-12px;top:-12px;' src='../images/delete_icon.png'><iframe style='margin: 0; padding: 0;' src='"+c.url+"' width='"+d+"' height='"+b+"' scrolling='"+a+"' frameborder='0'></iframe></div>"));$("#close_button").bind("click",function(){hide_modal()})}$(function(){$(".tab").each(function(){var a=$(this).children(".submenu");if(a.length>0){if($.browser.msie){a.prepend("<iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; filter:Alpha(Opacity='0');\"></iframe>")}$(this).hover(function(){a.show()},function(){a.hide()});a.click(function(){a.hide()})}})});function user_changed(a,b){if(a){$(".loggedin-only").show();$(".loggedout-only").hide();$("#user-email").text(a);if(b){$(".admin-only").show()}}else{$(".loggedin-only").hide();$(".loggedout-only").show();$(".admin-only").hide()}};
|
||||
File diff suppressed because one or more lines are too long
+64
-46
@@ -1,5 +1,5 @@
|
||||
/* Trackster
|
||||
2009, James Taylor, Kanwei Li
|
||||
2010, James Taylor, Kanwei Li
|
||||
*/
|
||||
var DEBUG = false;
|
||||
|
||||
@@ -19,22 +19,22 @@ var right_img = new Image();
|
||||
right_img.src = "../images/visualization/strand_right.png";
|
||||
right_img.onload = function() {
|
||||
RIGHT_STRAND = CONTEXT.createPattern(right_img, "repeat");
|
||||
}
|
||||
};
|
||||
var left_img = new Image();
|
||||
left_img.src = "../images/visualization/strand_left.png";
|
||||
left_img.onload = function() {
|
||||
LEFT_STRAND = CONTEXT.createPattern(left_img, "repeat");
|
||||
}
|
||||
};
|
||||
var right_img_inv = new Image();
|
||||
right_img_inv.src = "../images/visualization/strand_right_inv.png";
|
||||
right_img_inv.onload = function() {
|
||||
RIGHT_STRAND_INV = CONTEXT.createPattern(right_img_inv, "repeat");
|
||||
}
|
||||
};
|
||||
var left_img_inv = new Image();
|
||||
left_img_inv.src = "../images/visualization/strand_left_inv.png";
|
||||
left_img_inv.onload = function() {
|
||||
LEFT_STRAND_INV = CONTEXT.createPattern(left_img_inv, "repeat");
|
||||
}
|
||||
};
|
||||
|
||||
function commatize( number ) {
|
||||
number += ''; // Convert to string
|
||||
@@ -49,7 +49,7 @@ var Cache = function( num_elements ) {
|
||||
this.num_elements = num_elements;
|
||||
this.obj_cache = {};
|
||||
this.key_ary = [];
|
||||
}
|
||||
};
|
||||
$.extend( Cache.prototype, {
|
||||
get: function( key ) {
|
||||
var index = this.key_ary.indexOf(key);
|
||||
@@ -109,7 +109,7 @@ $.extend( View.prototype, {
|
||||
|
||||
// 10^log10(range / DENSITY) Close approximation for browser window, assuming DENSITY = window width
|
||||
this.resolution = Math.pow( 10, Math.ceil( Math.log( (this.high - this.low) / DENSITY ) / Math.LN10 ) );
|
||||
this.zoom_res = Math.max(1,Math.ceil( Math.log( this.resolution, FEATURE_LEVELS ) / Math.log(FEATURE_LEVELS) ));
|
||||
this.zoom_res = Math.pow( FEATURE_LEVELS, Math.max(0,Math.ceil( Math.log( this.resolution, FEATURE_LEVELS ) / Math.log(FEATURE_LEVELS) )));
|
||||
|
||||
// Overview
|
||||
$("#overview-box").css( {
|
||||
@@ -282,10 +282,10 @@ $.extend( LineTrack.prototype, TiledTrack.prototype, {
|
||||
var min_label = $("<div class='yaxislabel'>" + track.min_value + "</div>");
|
||||
var max_label = $("<div class='yaxislabel'>" + track.max_value + "</div>");
|
||||
|
||||
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 = $("<canvas></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 = $("<canvas class='tile'></canvas>");
|
||||
|
||||
var dummy_canvas = $("<canvas></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) {
|
||||
|
||||
@@ -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;*/
|
||||
|
||||
@@ -318,8 +318,8 @@
|
||||
<head>
|
||||
<title>${self.title()}</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
${self.javascripts()}
|
||||
${self.stylesheets()}
|
||||
${self.javascripts()}
|
||||
</head>
|
||||
|
||||
<body scroll="no" class="${self.body_class}">
|
||||
|
||||
@@ -11,6 +11,6 @@
|
||||
|
||||
<%def name="center_panel()">
|
||||
|
||||
<iframe name="galaxy_main" id="galaxy_main" frameborder="0" style="position: absolute; width: 100%; height: 100%;" src="${main_url}"> </iframe>
|
||||
${grid}
|
||||
|
||||
</%def>
|
||||
|
||||
@@ -1,4 +1,13 @@
|
||||
<%inherit file="/base.mako"/>
|
||||
<%inherit file="/base_panels.mako"/>
|
||||
|
||||
<%def name="init()">
|
||||
<%
|
||||
self.has_left_panel=False
|
||||
self.has_right_panel=True
|
||||
self.active_view="visualization"
|
||||
self.message_box_visible=False
|
||||
%>
|
||||
</%def>
|
||||
|
||||
<%def name="stylesheets()">
|
||||
${parent.stylesheets()}
|
||||
@@ -53,13 +62,16 @@ ${h.js( "jquery", "jquery.event.drag", "jquery.mousewheel", "trackster" )}
|
||||
});
|
||||
|
||||
// To adjust the size of the viewport to fit the fixed-height footer
|
||||
$(window).resize( function( e ) {
|
||||
$("#content").height( $(window).height() - $("#nav-container").height() );
|
||||
var refresh = function( e ) {
|
||||
$("#content").height( $(window).height() - $("#nav-container").height() - $("#masthead").height());
|
||||
$("#viewport-container").height( $("#content").height() - $("#top-labeltrack").height() - $("#nav-labeltrack").height() );
|
||||
$("#nav-container").width( $("#center").width() );
|
||||
view.redraw();
|
||||
});
|
||||
|
||||
$(window).resize();
|
||||
};
|
||||
$(window).bind( "resize", function(e) { refresh(e); } );
|
||||
$("#right-border").bind( "click", function(e) { refresh(e); } );
|
||||
$("#right-border").bind( "dragend", function(e) { refresh(e); } );
|
||||
$(window).trigger( "resize" );
|
||||
|
||||
$("#viewport").bind( "dragstart", function( e ) {
|
||||
this.original_low = view.low;
|
||||
@@ -103,15 +115,16 @@ ${h.js( "jquery", "jquery.event.drag", "jquery.mousewheel", "trackster" )}
|
||||
</script>
|
||||
</%def>
|
||||
|
||||
<%def name="center_panel()">
|
||||
<div id="content">
|
||||
<div id="top-labeltrack"></div>
|
||||
<div id="viewport-container" style="overflow-x: hidden; overflow-y: auto;">
|
||||
<div id="viewport"></div>
|
||||
</div>
|
||||
<div id="nav-labeltrack"></div>
|
||||
|
||||
</div>
|
||||
<div id="nav-container">
|
||||
## <div style="height: 5px; border-top: solid #ccc 1px"></div>
|
||||
<div id="nav-labeltrack"></div>
|
||||
<div id="nav">
|
||||
<div id="overview">
|
||||
<div id="overview-viewport">
|
||||
@@ -133,3 +146,9 @@ ${h.js( "jquery", "jquery.event.drag", "jquery.mousewheel", "trackster" )}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</%def>
|
||||
|
||||
<%def name="right_panel()">
|
||||
<div>Configs</div>
|
||||
|
||||
</%def>
|
||||
Reference in New Issue
Block a user