trackster: fix thick region display bug, stacking bugs, enable right-panel

This commit is contained in:
Kanwei Li
2010-01-14 17:49:20 -05:00
parent 097fdf1812
commit 98322d64e2
9 changed files with 105 additions and 70 deletions
-1
View File
@@ -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
+7 -8
View File
@@ -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
View File
@@ -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
View File
@@ -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) {
+3 -3
View File
@@ -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;*/
+1 -1
View File
@@ -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}">
+1 -1
View File
@@ -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>
+27 -8
View File
@@ -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>