[galaxy-commits] galaxy-dist commit 9e27a8ad881d: trackster: Fix shared visualizations

20 Nov 2010

# HG changeset patch -- Bitbucket.org
# Project galaxy-dist
# URL http://bitbucket.org/galaxy/galaxy-dist/overview
# User Kanwei Li <kanwei@gmail.com>
# Date 1288046966 14400
# Node ID 9e27a8ad881dc4451add6d518468a73dbc9028bc
# Parent  30f83bcaf31451915ccf68c398a8e0ce0a3c80bb
trackster: Fix shared visualizations
- Add excanvas support for IE <9 to trackster, but performance is bad
- Refactor unused/duplicate init code for trackster

- Fix IE workflow bug with Input Datasets
- Fix IE search button displaying twice

--- a/templates/workflow/editor.mako
+++ b/templates/workflow/editor.mako
@@ -563,7 +563,7 @@
                 data.push( { name: '_', value: "true" } );
             }
         }).each( function() {
-            form = this;
+            var form = this;
             $(this).find( "select[refresh_on_change='true']").change( function() {
                 $(form).submit();
             });

--- a/static/scripts/packed/trackster.js
+++ b/static/scripts/packed/trackster.js
@@ -1,1 +1,1 @@
-var DENSITY=200,FEATURE_LEVELS=10,MAX_FEATURE_DEPTH=50,CONNECTOR_COLOR="#ccc",DATA_ERROR="There was an error in indexing this dataset.",DATA_NOCONVERTER="A converter for this dataset is not installed. Please check your datatypes_conf.xml file.",DATA_NONE="No data for this chrom/contig.",DATA_PENDING="Currently indexing... please wait",DATA_LOADING="Loading data...",FILTERABLE_CLASS="filterable",CACHED_TILES_FEATURE=10,CACHED_TILES_LINE=30,CACHED_DATA=5,CONTEXT=$("<canvas></canvas>").get(0).getContext("2d"),PX_PER_CHAR=CONTEXT.measureText("A").width,RIGHT_STRAND,LEFT_STRAND;var right_img=new Image();right_img.src=image_path+"/visualization/strand_right.png";right_img.onload=function(){RIGHT_STRAND=CONTEXT.createPattern(right_img,"repeat")};var left_img=new Image();left_img.src=image_path+"/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=image_path+"/visualization/st
 rand_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=image_path+"/visualization/strand_left_inv.png";left_img_inv.onload=function(){LEFT_STRAND_INV=CONTEXT.createPattern(left_img_inv,"repeat")};function round_1000(a){return Math.round(a*1000)/1000}var Cache=function(a){this.num_elements=a;this.clear()};$.extend(Cache.prototype,{get:function(b){var a=this.key_ary.indexOf(b);if(a!=-1){this.key_ary.splice(a,1);this.key_ary.push(b)}return this.obj_cache[b]},set:function(b,c){if(!this.obj_cache[b]){if(this.key_ary.length>=this.num_elements){var a=this.key_ary.shift();delete this.obj_cache[a]}this.key_ary.push(b)}this.obj_cache[b]=c;return c},clear:function(){this.obj_cache={};this.key_ary=[]}});var View=function(a,d,c,b){this.container=a;this.vis_id=c;this.dbkey=b;this.title=d;this.tracks=[];this.label_tracks=[];this.max_low=0;this.max_high=0;this.num_tracks=0;this.track_i
 d_counter=0;this.zoom_factor=3;this.min_separation=30;this.has_changes=false;this.init();this.reset()};$.extend(View.prototype,{init:function(){var c=this.container,a=this;this.top_labeltrack=$("<div/>").addClass("top-labeltrack").appendTo(c);this.content_div=$("<div/>").addClass("content").css("position","relative").appendTo(c);this.viewport_container=$("<div/>").addClass("viewport-container").addClass("viewport-container").appendTo(this.content_div);this.intro_div=$("<div/>").addClass("intro").text("Select a chrom from the dropdown below").hide();this.nav_container=$("<div/>").addClass("nav-container").appendTo(c);this.nav_labeltrack=$("<div/>").addClass("nav-labeltrack").appendTo(this.nav_container);this.nav=$("<div/>").addClass("nav").appendTo(this.nav_container);this.overview=$("<div/>").addClass("overview").appendTo(this.nav);this.overview_viewport=$("<div/>").addClass("overview-viewport").appendTo(this.overview);this.overview_close=$("<a href='javascript:void(0);'>Clo
 se Overview</a>").addClass("overview-close").hide().appendTo(this.overview_viewport);this.overview_highlight=$("<div />").addClass("overview-highlight").hide().appendTo(this.overview_viewport);this.overview_box_background=$("<div/>").addClass("overview-boxback").appendTo(this.overview_viewport);this.overview_box=$("<div/>").addClass("overview-box").appendTo(this.overview_viewport);this.default_overview_height=this.overview_box.height();this.nav_controls=$("<div/>").addClass("nav-controls").appendTo(this.nav);this.chrom_form=$("<form/>").attr("action",function(){void (0)}).appendTo(this.nav_controls);this.chrom_select=$("<select/>").attr({name:"chrom"}).css("width","15em").addClass("no-autocomplete").append("<option value=''>Loading</option>").appendTo(this.chrom_form);var b=function(d){if(d.type==="focusout"||(d.keyCode||d.which)===13||(d.keyCode||d.which)===27){if((d.keyCode||d.which)!==27){a.go_to($(this).val())}$(this).hide();a.location_span.show();a.chrom_select.show();r
 eturn false}};this.nav_input=$("<input/>").addClass("nav-input").hide().bind("keypress focusout",b).appendTo(this.chrom_form);this.location_span=$("<span/>").addClass("location").appendTo(this.chrom_form);this.location_span.bind("click",function(){a.location_span.hide();a.chrom_select.hide();a.nav_input.css("display","inline-block");a.nav_input.select();a.nav_input.focus()});if(this.vis_id!==undefined){this.hidden_input=$("<input/>").attr("type","hidden").val(this.vis_id).appendTo(this.chrom_form)}this.zo_link=$("<a/>").click(function(){a.zoom_out();a.redraw()}).html('<img src="'+image_path+'/fugue/magnifier-zoom-out.png" />').appendTo(this.chrom_form);this.zi_link=$("<a/>").click(function(){a.zoom_in();a.redraw()}).html('<img src="'+image_path+'/fugue/magnifier-zoom.png" />').appendTo(this.chrom_form);$.ajax({url:chrom_url,data:(this.vis_id!==undefined?{vis_id:this.vis_id}:{dbkey:this.dbkey}),dataType:"json",success:function(d){if(d.reference){a.add_label_track(new Referenc
 eTrack(a))}a.chrom_data=d.chrom_info;var f='<option value="">Select Chrom/Contig</option>';for(i in a.chrom_data){var e=a.chrom_data[i]["chrom"];f+='<option value="'+e+'">'+e+"</option>"}a.chrom_select.html(f);a.intro_div.show();a.chrom_select.bind("change",function(){a.change_chrom(a.chrom_select.val())})},error:function(){alert("Could not load chroms for this dbkey:",a.dbkey)}});this.content_div.bind("dblclick",function(d){a.zoom_in(d.pageX,this.viewport_container)});this.overview_box.bind("dragstart",function(d){this.current_x=d.offsetX}).bind("drag",function(d){var g=d.offsetX-this.current_x;this.current_x=d.offsetX;var f=Math.round(g/a.viewport_container.width()*(a.max_high-a.max_low));a.move_delta(-f)});this.overview_close.bind("click",function(){for(var d in a.tracks){a.tracks[d].is_overview=false}$(this).siblings().filter("canvas").remove();$(this).parent().css("height",a.overview_box.height());a.overview_highlight.hide();$(this).hide()});this.viewport_container.bind
 ("dragstart",function(d){this.original_low=a.low;this.current_height=d.clientY;this.current_x=d.offsetX;this.enable_pan=(d.clientX<a.viewport_container.width()-16)?true:false}).bind("drag",function(g){if(!this.enable_pan||this.in_reordering){return}var d=$(this);var j=g.offsetX-this.current_x;var f=d.scrollTop()-(g.clientY-this.current_height);d.scrollTop(f);this.current_height=g.clientY;this.current_x=g.offsetX;var h=Math.round(j/a.viewport_container.width()*(a.high-a.low));a.move_delta(h)});this.top_labeltrack.bind("dragstart",function(d){this.drag_origin_x=d.clientX;this.drag_origin_pos=d.clientX/a.viewport_container.width()*(a.high-a.low)+a.low;this.drag_div=$("<div />").css({height:a.content_div.height()+30,top:"0px",position:"absolute","background-color":"#cfc",border:"1px solid #6a6",opacity:0.5,"z-index":1000}).appendTo($(this))}).bind("drag",function(j){var f=Math.min(j.clientX,this.drag_origin_x)-a.container.offset().left,d=Math.max(j.clientX,this.drag_origin_x)-a.
 container.offset().left,h=(a.high-a.low),g=a.viewport_container.width();a.update_location(Math.round(f/g*h)+a.low,Math.round(d/g*h)+a.low);this.drag_div.css({left:f+"px",width:(d-f)+"px"})}).bind("dragend",function(k){var f=Math.min(k.clientX,this.drag_origin_x),d=Math.max(k.clientX,this.drag_origin_x),h=(a.high-a.low),g=a.viewport_container.width(),j=a.low;a.low=Math.round(f/g*h)+j;a.high=Math.round(d/g*h)+j;this.drag_div.remove();a.redraw()});this.add_label_track(new LabelTrack(this,this.top_labeltrack));this.add_label_track(new LabelTrack(this,this.nav_labeltrack))},update_location:function(a,b){this.location_span.text(commatize(a)+" - "+commatize(b));this.nav_input.val(this.chrom+":"+commatize(a)+"-"+commatize(b))},change_chrom:function(d,a,f){var c=this;var e=$.grep(c.chrom_data,function(h,j){return h.chrom===d})[0];if(e===undefined){return}if(d!==c.chrom){c.chrom=d;if(!c.chrom){c.intro_div.show()}else{c.intro_div.hide()}c.chrom_select.val(c.chrom);c.max_high=e.len;c.re
 set();c.redraw(true);for(var g in c.tracks){var b=c.tracks[g];if(b.init){b.init()}}}if(a!==undefined&&f!==undefined){c.low=Math.max(a,0);c.high=Math.min(f,c.max_high)}c.reset_overview();c.redraw()},go_to:function(f){var k=this,b=f.split(":"),h=b[0],j=b[1];if(j!==undefined){try{var g=j.split("-"),a=parseInt(g[0].replace(/,/g,"")),d=parseInt(g[1].replace(/,/g,""))}catch(c){return false}}k.change_chrom(h,a,d)},move_delta:function(c){var a=this;var b=a.high-a.low;if(a.low-c<a.max_low){a.low=a.max_low;a.high=a.max_low+b}else{if(a.high-c>a.max_high){a.high=a.max_high;a.low=a.max_high-b}else{a.high-=c;a.low-=c}}a.redraw()},add_track:function(a){a.view=this;a.track_id=this.track_id_counter;this.tracks.push(a);if(a.init){a.init()}a.container_div.attr("id","track_"+a.track_id);this.track_id_counter+=1;this.num_tracks+=1},add_label_track:function(a){a.view=this;this.label_tracks.push(a)},remove_track:function(a){this.has_changes=true;a.container_div.fadeOut("slow",function(){$(this).re
 move()});delete this.tracks[this.tracks.indexOf(a)];this.num_tracks-=1},reset:function(){this.low=this.max_low;this.high=this.max_high;this.viewport_container.find(".yaxislabel").remove()},redraw:function(h){var g=this.high-this.low,f=this.low,b=this.high;if(f<this.max_low){f=this.max_low}if(b>this.max_high){b=this.max_high}if(this.high!==0&&g<this.min_separation){b=f+this.min_separation}this.low=Math.floor(f);this.high=Math.ceil(b);this.resolution=Math.pow(10,Math.ceil(Math.log((this.high-this.low)/200)/Math.LN10));this.zoom_res=Math.pow(FEATURE_LEVELS,Math.max(0,Math.ceil(Math.log(this.resolution,FEATURE_LEVELS)/Math.log(FEATURE_LEVELS))));var a=this.low/(this.max_high-this.max_low)*this.overview_viewport.width();var e=(this.high-this.low)/(this.max_high-this.max_low)*this.overview_viewport.width();var j=13;this.overview_box.css({left:a,width:Math.max(j,e)}).show();if(e<j){this.overview_box.css("left",a-(j-e)/2)}if(this.overview_highlight){this.overview_highlight.css({left
 :a,width:e})}this.update_location(this.low,this.high);if(!h){for(var c=0,d=this.tracks.length;c<d;c++){if(this.tracks[c]&&this.tracks[c].enabled){this.tracks[c].draw()}}for(var c=0,d=this.label_tracks.length;c<d;c++){this.label_tracks[c].draw()}}},zoom_in:function(b,c){if(this.max_high===0||this.high-this.low<this.min_separation){return}var d=this.high-this.low,e=d/2+this.low,a=(d/this.zoom_factor)/2;if(b){e=b/this.viewport_container.width()*(this.high-this.low)+this.low}this.low=Math.round(e-a);this.high=Math.round(e+a);this.redraw()},zoom_out:function(){if(this.max_high===0){return}var b=this.high-this.low,c=b/2+this.low,a=(b*this.zoom_factor)/2;this.low=Math.round(c-a);this.high=Math.round(c+a);this.redraw()},reset_overview:function(){this.overview_viewport.find("canvas").remove();this.overview_viewport.height(this.default_overview_height);this.overview_box.height(this.default_overview_height);this.overview_close.hide();this.overview_highlight.hide()}});var Filter=functio
 n(b,a,c){this.name=b;this.index=a;this.value=c};var NumberFilter=function(b,a){this.name=b;this.index=a;this.low=-Number.MAX_VALUE;this.high=Number.MAX_VALUE;this.slider_min=Number.MAX_VALUE;this.slider_max=-Number.MAX_VALUE;this.slider=null;this.slider_label=null};$.extend(NumberFilter.prototype,{applies_to:function(a){if(a.length>this.index){return true}return false},keep:function(a){if(!this.applies_to(a)){return true}return(a[this.index]>=this.low&&a[this.index]<=this.high)},update_attrs:function(b){var a=false;if(!this.applies_to(b)){return a}if(b[this.index]<this.slider_min){this.slider_min=b[this.index];a=true}if(b[this.index]>this.slider_max){this.slider_max=b[this.index];a=false}return a},update_ui_elt:function(){var b=this.slider.slider("option","min"),a=this.slider.slider("option","max");if(this.slider_min<b||this.slider_max>a){this.slider.slider("option","min",this.slider_min);this.slider.slider("option","max",this.slider_max);this.slider.slider("option","values"
 ,[this.slider_min,this.slider_max])}}});var get_filters=function(a){var g=[];for(var d=0;d<a.length;d++){var f=a[d];var c=f.name,e=f.type,b=f.index;if(e=="int"||e=="float"){g[d]=new NumberFilter(c,b)}else{g[d]=new Filter(c,b,e)}}return g};var Track=function(b,a,d,c){this.name=b;this.view=a;this.parent_element=d;this.filters=(c!==undefined?get_filters(c):[]);this.init_global()};$.extend(Track.prototype,{init_global:function(){this.container_div=$("<div />").addClass("track").css("position","relative");if(!this.hidden){this.header_div=$("<div class='track-header' />").appendTo(this.container_div);if(this.view.editor){this.drag_div=$("<div class='draghandle' />").appendTo(this.header_div)}this.name_div=$("<div class='menubutton popup' />").appendTo(this.header_div);this.name_div.text(this.name);this.name_div.attr("id",this.name.replace(/\s+/g,"-").replace(/[^a-zA-Z0-9\-]/g,"").toLowerCase())}this.filtering_div=$("<div class='track-filters'>").appendTo(this.container_div);this.f
 iltering_div.hide();this.filtering_div.bind("drag",function(k){k.stopPropagation()});var b=$("<table class='filters'>").appendTo(this.filtering_div);var c=this;for(var e=0;e<this.filters.length;e++){var a=this.filters[e];var f=$("<tr>").appendTo(b);var g=$("<th class='filter-info'>").appendTo(f);var j=$("<span class='name'>").appendTo(g);j.text(a.name+"  ");var d=$("<span class='values'>").appendTo(g);var h=$("<td>").appendTo(f);a.control_element=$("<div id='"+a.name+"-filter-control' style='width: 200px; position: relative'>").appendTo(h);a.control_element.slider({range:true,min:Number.MAX_VALUE,max:-Number.MIN_VALUE,values:[0,0],slide:function(l,m){var k=m.values;d.text("["+k[0]+"-"+k[1]+"]");a.low=k[0];a.high=k[1];c.draw(true)},change:function(k,l){a.control_element.slider("option","slide").call(a.control_element,k,l)}});a.slider=a.control_element;a.slider_label=d}this.content_div=$("<div class='track-content'>").appendTo(this.container_div);this.parent_element.append(thi
 s.container_div)},init_each:function(c,b){var a=this;a.enabled=false;a.data_queue={};a.tile_cache.clear();a.data_cache.clear();a.initial_canvas=undefined;a.content_div.css("height","auto");if(!a.content_div.text()){a.content_div.text(DATA_LOADING)}a.container_div.removeClass("nodata error pending");if(a.view.chrom){$.getJSON(data_url,c,function(d){if(!d||d==="error"||d.kind==="error"){a.container_div.addClass("error");a.content_div.text(DATA_ERROR);if(d.message){var f=a.view.tracks.indexOf(a);var e=$("<a href='javascript:void(0);'></a>").attr("id",f+"_error");e.text("Click to view error");$("#"+f+"_error").live("click",function(){show_modal("Trackster Error","<pre>"+d.message+"</pre>",{Close:hide_modal})});a.content_div.append(e)}}else{if(d==="no converter"){a.container_div.addClass("error");a.content_div.text(DATA_NOCONVERTER)}else{if(d.data!==undefined&&(d.data===null||d.data.length===0)){a.container_div.addClass("nodata");a.content_div.text(DATA_NONE)}else{if(d==="pending
 "){a.container_div.addClass("pending");a.content_div.text(DATA_PENDING);setTimeout(function(){a.init()},5000)}else{a.content_div.text("");a.content_div.css("height",a.height_px+"px");a.enabled=true;b(d);a.draw()}}}}})}else{a.container_div.addClass("nodata");a.content_div.text(DATA_NONE)}}});var TiledTrack=function(){var d=this,c=d.view;if(d.hidden){return}if(d.display_modes!==undefined){if(d.mode_div===undefined){d.mode_div=$("<div class='right-float menubutton popup' />").appendTo(d.header_div);var h=d.display_modes[0];d.mode=h;d.mode_div.text(h);var a=function(j){d.mode_div.text(j);d.mode=j;d.tile_cache.clear();d.draw()};var f={};for(var e in d.display_modes){var g=d.display_modes[e];f[g]=function(j){return function(){a(j)}}(g)}make_popupmenu(d.mode_div,f)}else{d.mode_div.hide()}}var b={};b["Set as overview"]=function(){c.overview_viewport.find("canvas").remove();d.is_overview=true;d.set_overview();for(var j in c.tracks){if(c.tracks[j]!==d){c.tracks[j].is_overview=false}}}
 ;b["Edit configuration"]=function(){var l=function(){hide_modal();$(window).unbind("keypress.check_enter_esc")},j=function(){d.update_options(d.track_id);hide_modal();$(window).unbind("keypress.check_enter_esc")},k=function(m){if((m.keyCode||m.which)===27){l()}else{if((m.keyCode||m.which)===13){j()}}};$(window).bind("keypress.check_enter_esc",k);show_modal("Configure Track",d.gen_options(d.track_id),{Cancel:l,OK:j})};if(d.filters.length>0){b["Show filters"]=function(){var j;if(!d.filtering_div.is(":visible")){j="Hide filters";d.filters_visible=true}else{j="Show filters";d.filters_visible=false}$("#"+d.name_div.attr("id")+"-menu").find("li").eq(2).text(j);d.filtering_div.toggle()}}b.Remove=function(){c.remove_track(d);if(c.num_tracks===0){$("#no-tracks").show()}};d.popup_menu=make_popupmenu(d.name_div,b);show_hide_popupmenu_options(d.popup_menu,"(Show|Hide) filters",false)};$.extend(TiledTrack.prototype,Track.prototype,{draw:function(b){var m=this.view.low,g=this.view.high,h=
 g-m,f=this.view.resolution;var p=$("<div style='position: relative;'></div>"),q=this.content_div.width()/h,k;this.content_div.append(p),this.max_height=0;var a=Math.floor(m/f/DENSITY);var l=new Object();while((a*DENSITY*f)<g){var n=this.content_div.width()+"_"+q+"_"+a;var e=this.tile_cache.get(n);if(!b&&e){var j=a*DENSITY*f;var d=(j-m)*q;if(this.left_offset){d-=this.left_offset}e.css({left:d});this.show_tile(e,p)}else{this.delayed_draw(this,n,m,g,a,f,p,q,l)}a+=1}var c=this;var o=setInterval(function(){if(l.length!=0){if(c.content_div.children().length>1){c.content_div.children(":first").remove()}for(var r=0;r<c.filters.length;r++){c.filters[r].update_ui_elt()}clearInterval(o)}},50)},delayed_draw:function(c,h,g,e,b,d,j,k,f){var a=setTimeout(function(){if(!(g>c.view.high||e<c.view.low)){tile_element=c.draw_tile(d,b,j,k);if(tile_element){if(!c.initial_canvas){c.initial_canvas=$(tile_element).clone();var n=tile_element.get(0).getContext("2d");var l=c.initial_canvas.get(0).getCon
 text("2d");var m=n.getImageData(0,0,n.canvas.width,n.canvas.height);l.putImageData(m,0,0);c.set_overview()}c.tile_cache.set(h,tile_element);c.show_tile(tile_element,j)}}delete f.id},50);f.id=true},show_tile:function(a,c){var b=this;c.append(a);b.max_height=Math.max(b.max_height,a.height());b.content_div.css("height",b.max_height+"px");if(a.hasClass(FILTERABLE_CLASS)){show_hide_popupmenu_options(b.popup_menu,"(Show|Hide) filters");if(b.filters_visible){b.filtering_div.show()}}else{show_hide_popupmenu_options(b.popup_menu,"(Show|Hide) filters",false);b.filtering_div.hide()}},set_overview:function(){var a=this.view;if(this.initial_canvas&&this.is_overview){a.overview_close.show();a.overview_viewport.append(this.initial_canvas);a.overview_highlight.show().height(this.initial_canvas.height());a.overview_viewport.height(this.initial_canvas.height()+a.overview_box.height())}$(window).trigger("resize")}});var LabelTrack=function(a,b){this.track_type="LabelTrack";this.hidden=true;Tra
 ck.call(this,null,a,b);this.container_div.addClass("label-track")};$.extend(LabelTrack.prototype,Track.prototype,{draw:function(){var c=this.view,d=c.high-c.low,g=Math.floor(Math.pow(10,Math.floor(Math.log(d)/Math.log(10)))),a=Math.floor(c.low/g)*g,e=this.content_div.width(),b=$("<div style='position: relative; height: 1.3em;'></div>");while(a<c.high){var f=(a-c.low)/d*e;b.append($("<div class='label'>"+commatize(a)+"</div>").css({position:"absolute",left:f-1}));a+=g}this.content_div.children(":first").remove();this.content_div.append(b)}});var ReferenceTrack=function(a){this.track_type="ReferenceTrack";this.hidden=true;Track.call(this,null,a,a.top_labeltrack);TiledTrack.call(this);this.left_offset=200;this.height_px=12;this.container_div.addClass("reference-track");this.dummy_canvas=$("<canvas></canvas>").get(0).getContext("2d");this.data_queue={};this.data_cache=new Cache(CACHED_DATA);this.tile_cache=new Cache(CACHED_TILES_LINE)};$.extend(ReferenceTrack.prototype,TiledTrac
 k.prototype,{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;$.ajax({url:reference_url,dataType:"json",data:{chrom:this.view.chrom,low:a,high:f,dbkey:this.view.dbkey},success:function(g){c.data_cache.set(e,g);delete c.data_queue[e];c.draw()},error:function(h,g,j){console.log(h,g,j)}})}},draw_tile:function(f,b,l,p){var g=b*DENSITY*f,d=DENSITY*f,e=$("<canvas class='tile'></canvas>"),o=e.get(0).getContext("2d"),k=f+"_"+b;if(p>PX_PER_CHAR){if(this.data_cache.get(k)===undefined){this.get_data(f,b);return}var n=this.data_cache.get(k);if(n===null){this.content_div.css("height","0px");return}e.get(0).width=Math.ceil(d*p+this.left_offset);e.get(0).height=this.height_px;e.css({position:"absolute",top:0,left:(g-this.view.low)*p-this.left_offset});for(var h=0,m=n.length;h<m;h++){var a=Math.round(h*p),j=Math.round(p/2);o.fillText(n[h],a+this.left_offset+j,10)}l.append(e);return e}this.content_div.css("height","0px")}})
 ;var LineTrack=function(d,b,a,c){this.track_type="LineTrack";this.display_modes=["Histogram","Line","Filled","Intensity"];this.mode="Histogram";Track.call(this,d,b,b.viewport_container);TiledTrack.call(this);this.height_px=80;this.dataset_id=a;this.data_cache=new Cache(CACHED_DATA);this.tile_cache=new Cache(CACHED_TILES_LINE);this.prefs={color:"black",min_value:undefined,max_value:undefined,mode:this.mode};if(c.min_value!==undefined){this.prefs.min_value=c.min_value}if(c.max_value!==undefined){this.prefs.max_value=c.max_value}};$.extend(LineTrack.prototype,TiledTrack.prototype,{init:function(){var a=this,b=a.view.tracks.indexOf(a);a.vertical_range=undefined;this.init_each({stats:true,chrom:a.view.chrom,low:null,high:null,dataset_id:a.dataset_id},function(c){a.container_div.addClass("line-track");data=c.data;if(isNaN(parseFloat(a.prefs.min_value))||isNaN(parseFloat(a.prefs.max_value))){a.prefs.min_value=data.min;a.prefs.max_value=data.max;$("#track_"+b+"_minval").val(a.prefs.
 min_value);$("#track_"+b+"_maxval").val(a.prefs.max_value)}a.vertical_range=a.prefs.max_value-a.prefs.min_value;a.total_frequency=data.total_frequency;a.container_div.find(".yaxislabel").remove();var e=$("<div />").addClass("yaxislabel").attr("id","linetrack_"+b+"_minval").text(round_1000(a.prefs.min_value));var d=$("<div />").addClass("yaxislabel").attr("id","linetrack_"+b+"_maxval").text(round_1000(a.prefs.max_value));d.css({position:"absolute",top:"22px",left:"10px"});d.prependTo(a.container_div);e.css({position:"absolute",top:a.height_px+11+"px",left:"10px"});e.prependTo(a.container_div)})},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;$.ajax({url:data_url,dataType:"json",data:{chrom:this.view.chrom,low:a,high:f,dataset_id:this.dataset_id,resolution:this.view.resolution},success:function(g){data=g.data;c.data_cache.set(e,data);delete c.data_queue[e];c.draw()},error:function(h,g,j){console.log(h,g,j)}
 })}},draw_tile:function(p,s,c,e){if(this.vertical_range===undefined){return}var t=s*DENSITY*p,a=DENSITY*p,b=$("<canvas class='tile'></canvas>"),w=p+"_"+s;if(this.data_cache.get(w)===undefined){this.get_data(p,s);return}var j=this.data_cache.get(w);if(j===null){return}b.css({position:"absolute",top:0,left:(t-this.view.low)*e});b.get(0).width=Math.ceil(a*e);b.get(0).height=this.height_px;var o=b.get(0).getContext("2d"),k=false,l=this.prefs.min_value,g=this.prefs.max_value,n=this.vertical_range,u=this.total_frequency,d=this.height_px,m=this.mode;o.beginPath();o.fillStyle=this.prefs.color;if(data.length>1){var f=Math.ceil((data[1][0]-data[0][0])*e)}else{var f=10}var v,h;for(var q=0,r=data.length;q<r;q++){v=Math.round((data[q][0]-t)*e);h=data[q][1];if(h===null){if(k&&m==="Filled"){o.lineTo(v,d)}k=false;continue}if(h<l){h=l}else{if(h>g){h=g}}if(m==="Histogram"){h=Math.round(d-(h-l)/n*d);o.fillRect(v,h,f,d-h)}else{if(m==="Intensity"){h=255-Math.floor((h-l)/n*255);o.fillStyle="rgb("
 +h+","+h+","+h+")";o.fillRect(v,0,f,d)}else{h=Math.round(d-(h-l)/n*d);if(k){o.lineTo(v,h)}else{k=true;if(m==="Filled"){o.moveTo(v,d);o.lineTo(v,h)}else{o.moveTo(v,h)}}}}}if(m==="Filled"){if(k){o.lineTo(v,d)}o.fill()}else{o.stroke()}c.append(b);return b},gen_options:function(n){var a=$("<div />").addClass("form-row");var e="track_"+n+"_color",b=$("<label />").attr("for",e).text("Color:"),c=$("<input />").attr("id",e).attr("name",e).val(this.prefs.color),h="track_"+n+"_minval",m=$("<label></label>").attr("for",h).text("Min value:"),d=(this.prefs.min_value===undefined?"":this.prefs.min_value),l=$("<input></input>").attr("id",h).val(d),k="track_"+n+"_maxval",g=$("<label></label>").attr("for",k).text("Max value:"),j=(this.prefs.max_value===undefined?"":this.prefs.max_value),f=$("<input></input>").attr("id",k).val(j);return a.append(m).append(l).append(g).append(f).append(b).append(c)},update_options:function(c){var a=$("#track_"+c+"_minval").val(),b=$("#track_"+c+"_maxval").val()
 ;color=$("#track_"+c+"_color").val();if(a!==this.prefs.min_value||b!==this.prefs.max_value||color!==this.prefs.color){this.prefs.min_value=parseFloat(a);this.prefs.max_value=parseFloat(b);this.prefs.color=color;this.vertical_range=this.prefs.max_value-this.prefs.min_value;$("#linetrack_"+c+"_minval").text(this.prefs.min_value);$("#linetrack_"+c+"_maxval").text(this.prefs.max_value);this.tile_cache.clear();this.draw()}}});var FeatureTrack=function(d,b,a,e,c){this.track_type="FeatureTrack";this.display_modes=["Auto","Dense","Squish","Pack"];Track.call(this,d,b,b.viewport_container,e);TiledTrack.call(this);this.height_px=0;this.container_div.addClass("feature-track");this.dataset_id=a;this.zo_slots={};this.show_labels_scale=0.001;this.showing_details=false;this.vertical_detail_px=10;this.vertical_nodetail_px=2;this.summary_draw_height=30;this.default_font="9px Monaco, Lucida Console, monospace";this.inc_slots={};this.data_queue={};this.s_e_by_tile={};this.tile_cache=new Cache(C
 ACHED_TILES_FEATURE);this.data_cache=new Cache(20);this.left_offset=200;this.prefs={block_color:"#444",label_color:"black",show_counts:true};if(c.block_color!==undefined){this.prefs.block_color=c.block_color}if(c.label_color!==undefined){this.prefs.label_color=c.label_color}if(c.show_counts!==undefined){this.prefs.show_counts=c.show_counts}};$.extend(FeatureTrack.prototype,TiledTrack.prototype,{init:function(){var a=this,b="initial";this.init_each({low:a.view.max_low,high:a.view.max_high,dataset_id:a.dataset_id,chrom:a.view.chrom,resolution:this.view.resolution,mode:a.mode},function(c){a.mode_div.show();a.data_cache.set(b,c);a.draw()})},get_data:function(a,d){var b=this,c=a+"_"+d;if(!b.data_queue[c]){b.data_queue[c]=true;$.getJSON(data_url,{chrom:b.view.chrom,low:a,high:d,dataset_id:b.dataset_id,resolution:this.view.resolution,mode:this.mode},function(e){b.data_cache.set(c,e);delete b.data_queue[c];b.draw()})}},incremental_slots:function(a,h,c,r){if(!this.inc_slots[a]){this.
 inc_slots[a]={};this.inc_slots[a].w_scale=a;this.inc_slots[a].mode=r;this.s_e_by_tile[a]={}}var n=this.inc_slots[a].w_scale,z=[],l=0,b=$("<canvas></canvas>").get(0).getContext("2d"),o=this.view.max_low;var B=[];if(this.inc_slots[a].mode!==r){delete this.inc_slots[a];this.inc_slots[a]={mode:r,w_scale:n};delete this.s_e_by_tile[a];this.s_e_by_tile[a]={}}for(var w=0,x=h.length;w<x;w++){var g=h[w],m=g[0];if(this.inc_slots[a][m]!==undefined){l=Math.max(l,this.inc_slots[a][m]);B.push(this.inc_slots[a][m])}else{z.push(w)}}for(var w=0,x=z.length;w<x;w++){var g=h[z[w]],m=g[0],s=g[1],d=g[2],q=g[3],e=Math.floor((s-o)*n),f=Math.ceil((d-o)*n);if(q!==undefined&&!c){var t=b.measureText(q).width;if(e-t<0){f+=t}else{e-=t}}var v=0;while(v<=MAX_FEATURE_DEPTH){var p=true;if(this.s_e_by_tile[a][v]!==undefined){for(var u=0,A=this.s_e_by_tile[a][v].length;u<A;u++){var y=this.s_e_by_tile[a][v][u];if(f>y[0]&&e<y[1]){p=false;break}}}if(p){if(this.s_e_by_tile[a][v]===undefined){this.s_e_by_tile[a][v]=
 []}this.s_e_by_tile[a][v].push([e,f]);this.inc_slots[a][m]=v;l=Math.max(l,v);break}v++}}return l},rect_or_text:function(r,m,s,b,q,f,h,e){r.textAlign="center";var l=0,p=Math.round(m/2);for(cig_id in h){var k=h[cig_id],d="MIDNSHP"[k[0]],n=k[1];if(d==="H"||d==="S"){l-=n}var g=q+l,v=Math.floor(Math.max(0,(g-s)*m)),j=Math.floor(Math.max(0,(g+n-s)*m));switch(d){case"S":case"H":case"M":var o=f.slice(l,n);if((this.mode==="Pack"||this.mode==="Auto")&&f!==undefined&&m>PX_PER_CHAR){r.fillStyle=this.prefs.block_color;r.fillRect(v+this.left_offset,e+1,j-v,9);r.fillStyle=CONNECTOR_COLOR;for(var t=0,a=o.length;t<a;t++){if(g+t>=s&&g+t<=b){var u=Math.floor(Math.max(0,(g+t-s)*m));r.fillText(o[t],u+this.left_offset+p,e+9)}}}else{r.fillStyle=this.prefs.block_color;r.fillRect(v+this.left_offset,e+4,j-v,3)}break;case"N":r.fillStyle=CONNECTOR_COLOR;r.fillRect(v+this.left_offset,e+5,j-v,1);break;case"D":r.fillStyle="red";r.fillRect(v+this.left_offset,e+4,j-v,3);break;case"P":case"I":break}l+=n}},dr
 aw_tile:function(ah,o,s,aw){var N=o*DENSITY*ah,am=(o+1)*DENSITY*ah,M=am-N;var ao=(!this.initial_canvas?"initial":N+"_"+am);var I=this.data_cache.get(ao);var e;if(I===undefined||(this.mode!=="Auto"&&I.dataset_type==="summary_tree")){this.data_queue[[N,am]]=true;this.get_data(N,am);return}var a=Math.ceil(M*aw),S=$("<canvas class='tile'></canvas>"),aj=this.prefs.label_color,l=this.prefs.block_color,r=this.mode,z=25,af=(r==="Squish")||(r==="Dense")&&(r!=="Pack")||(r==="Auto"&&(I.extra_info==="no_detail")),X=this.left_offset,av,D,ax;if(I.dataset_type==="summary_tree"){D=this.summary_draw_height}else{if(r==="Dense"){D=z;ax=10}else{ax=(af?this.vertical_nodetail_px:this.vertical_detail_px);var A=(aw<0.0001?1/view.zoom_res:aw);D=this.incremental_slots(A,I.data,af,r)*ax+z;av=this.inc_slots[A]}}S.css({position:"absolute",top:0,left:(N-this.view.low)*aw-X});S.get(0).width=a+X;S.get(0).height=D;s.parent().css("height",Math.max(this.height_px,D)+"px");var J=S.get(0).getContext("2d");J.fil
 lStyle=l;J.font=this.default_font;J.textAlign="right";this.container_div.find(".yaxislabel").remove();if(I.dataset_type=="summary_tree"){var Z=I.data,L=I.max,q=I.avg,b=Math.ceil(I.delta*aw);var p=$("<div />").addClass("yaxislabel").text(L);p.css({position:"absolute",top:"22px",left:"10px"});p.prependTo(this.container_div);for(var aq=0,H=Z.length;aq<H;aq++){var ab=Math.floor((Z[aq][0]-N)*aw);var aa=Z[aq][1];if(!aa){continue}var an=aa/L*this.summary_draw_height;J.fillStyle="black";J.fillRect(ab+X,this.summary_draw_height-an,b,an);if(this.prefs.show_counts&&J.measureText(aa).width<b){J.fillStyle="#bbb";J.textAlign="center";J.fillText(aa,ab+X+(b/2),this.summary_draw_height-5)}}e="Summary";s.append(S);return S}if(I.message){S.css({border:"solid red","border-width":"2px 2px 2px 0px"});J.fillStyle="red";J.textAlign="left";J.fillText(I.message,100+X,ax)}var ae=false;if(I.data.length!=0){ae=true;for(var at=0;at<this.filters.length;at++){if(!this.filters[at].applies_to(I.data[0])){ae=
 false}}}if(ae){S.addClass(FILTERABLE_CLASS)}var au=I.data;var ap=0;for(var aq=0,H=au.length;aq<H;aq++){var T=au[aq],R=T[0],ar=T[1],ad=T[2],O=T[3];if(av[R]===undefined){continue}var ac=false;var V;for(var at=0;at<this.filters.length;at++){V=this.filters[at];V.update_attrs(T);if(!V.keep(T)){ac=true;break}}if(ac){continue}if(ar<=am&&ad>=N){var ag=Math.floor(Math.max(0,(ar-N)*aw)),K=Math.ceil(Math.min(a,Math.max(0,(ad-N)*aw))),Y=(r==="Dense"?1:(1+av[R]))*ax;if(I.dataset_type==="bai"){var v=T[4];J.fillStyle=l;if(T[5] instanceof Array){var E=Math.floor(Math.max(0,(T[5][0]-N)*aw)),Q=Math.ceil(Math.min(a,Math.max(0,(T[5][1]-N)*aw))),C=Math.floor(Math.max(0,(T[6][0]-N)*aw)),w=Math.ceil(Math.min(a,Math.max(0,(T[6][1]-N)*aw)));if(T[5][1]>=N&&T[5][0]<=am){this.rect_or_text(J,aw,N,am,T[5][0],T[5][2],v,Y)}if(T[6][1]>=N&&T[6][0]<=am){this.rect_or_text(J,aw,N,am,T[6][0],T[6][2],v,Y)}if(C>Q){J.fillStyle=CONNECTOR_COLOR;J.fillRect(Q+X,Y+5,C-Q,1)}}else{J.fillStyle=l;this.rect_or_text(J,aw,N,am
 ,ar,O,v,Y)}if(r!=="Dense"&&!af&&ar>N){J.fillStyle=this.prefs.label_color;if(o===0&&ag-J.measureText(O).width<0){J.textAlign="left";J.fillText(R,K+2+X,Y+8)}else{J.textAlign="right";J.fillText(R,ag-2+X,Y+8)}J.fillStyle=l}}else{if(I.dataset_type==="interval_index"){if(af){J.fillStyle=l;J.fillRect(ag+X,Y+5,K-ag,1)}else{var G=T[4],W=T[5],ai=T[6],h=T[7];var F,ak,P=null,ay=null;if(W&&ai){P=Math.floor(Math.max(0,(W-N)*aw));ay=Math.ceil(Math.min(a,Math.max(0,(ai-N)*aw)))}if(r!=="Dense"&&O!==undefined&&ar>N){J.fillStyle=aj;if(o===0&&ag-J.measureText(O).width<0){J.textAlign="left";J.fillText(O,K+2+X,Y+8)}else{J.textAlign="right";J.fillText(O,ag-2+X,Y+8)}J.fillStyle=l}if(h){if(G){if(G=="+"){J.fillStyle=RIGHT_STRAND}else{if(G=="-"){J.fillStyle=LEFT_STRAND}}J.fillRect(ag+X,Y,K-ag,10);J.fillStyle=l}for(var ao=0,g=h.length;ao<g;ao++){var u=h[ao],d=Math.floor(Math.max(0,(u[0]-N)*aw)),U=Math.ceil(Math.min(a,Math.max((u[1]-N)*aw)));if(d>U){continue}F=5;ak=3;J.fillRect(d+X,Y+ak,U-d,F);if(P!==un
 defined&&!(d>ay||U<P)){F=9;ak=1;var al=Math.max(d,P),B=Math.min(U,ay);J.fillRect(al+X,Y+ak,B-al,F)}}}else{F=9;ak=1;J.fillRect(ag+X,Y+ak,K-ag,F);if(T.strand){if(T.strand=="+"){J.fillStyle=RIGHT_STRAND_INV}else{if(T.strand=="-"){J.fillStyle=LEFT_STRAND_INV}}J.fillRect(ag+X,Y,K-ag,10);J.fillStyle=l}}}}else{if(I.dataset_type==="vcf"){if(af){J.fillStyle=l;J.fillRect(ag+X,Y+5,K-ag,1)}else{var t=T[4],n=T[5],c=T[6];F=9;ak=1;J.fillRect(ag+X,Y,K-ag,F);if(r!=="Dense"&&O!==undefined&&ar>N){J.fillStyle=aj;if(o===0&&ag-J.measureText(O).width<0){J.textAlign="left";J.fillText(O,K+2+X,Y+8)}else{J.textAlign="right";J.fillText(O,ag-2+X,Y+8)}J.fillStyle=l}var m=t+" / "+n;if(ar>N&&J.measureText(m).width<(K-ag)){J.fillStyle="white";J.textAlign="center";J.fillText(m,X+ag+(K-ag)/2,Y+8);J.fillStyle=l}}}}}ap++}}return S},gen_options:function(j){var a=$("<div />").addClass("form-row");var e="track_"+j+"_block_color",l=$("<label />").attr("for",e).text("Block color:"),m=$("<input />").attr("id",e).attr
 ("name",e).val(this.prefs.block_color),k="track_"+j+"_label_color",g=$("<label />").attr("for",k).text("Text color:"),h=$("<input />").attr("id",k).attr("name",k).val(this.prefs.label_color),f="track_"+j+"_show_count",c=$("<label />").attr("for",f).text("Show summary counts"),b=$('<input type="checkbox" style="float:left;"></input>').attr("id",f).attr("name",f).attr("checked",this.prefs.show_counts),d=$("<div />").append(b).append(c);return a.append(l).append(m).append(g).append(h).append(d)},update_options:function(e){var b=$("#track_"+e+"_block_color").val(),d=$("#track_"+e+"_label_color").val(),c=$("#track_"+e+"_mode option:selected").val(),a=$("#track_"+e+"_show_count").attr("checked");if(b!==this.prefs.block_color||d!==this.prefs.label_color||a!==this.prefs.show_counts){this.prefs.block_color=b;this.prefs.label_color=d;this.prefs.show_counts=a;this.tile_cache.clear();this.draw()}}});var ReadTrack=function(d,b,a,e,c){FeatureTrack.call(this,d,b,a,e,c);this.track_type="Rea
 dTrack";this.vertical_detail_px=10;this.vertical_nodetail_px=5};$.extend(ReadTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype,{});
+var DENSITY=200,FEATURE_LEVELS=10,MAX_FEATURE_DEPTH=50,CONNECTOR_COLOR="#ccc",DATA_ERROR="There was an error in indexing this dataset.",DATA_NOCONVERTER="A converter for this dataset is not installed. Please check your datatypes_conf.xml file.",DATA_NONE="No data for this chrom/contig.",DATA_PENDING="Currently indexing... please wait",DATA_LOADING="Loading data...",FILTERABLE_CLASS="filterable",CACHED_TILES_FEATURE=10,CACHED_TILES_LINE=30,CACHED_DATA=5,DUMMY_CANVAS=document.createElement("canvas"),RIGHT_STRAND,LEFT_STRAND;if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(DUMMY_CANVAS)}CONTEXT=DUMMY_CANVAS.getContext("2d");PX_PER_CHAR=CONTEXT.measureText("A").width;var right_img=new Image();right_img.src=image_path+"/visualization/strand_right.png";right_img.onload=function(){RIGHT_STRAND=CONTEXT.createPattern(right_img,"repeat")};var left_img=new Image();left_img.src=image_path+"/visualization/strand_left.png";left_img.onload=function(){LEFT_STRAND=CONTEXT.createP
 attern(left_img,"repeat")};var right_img_inv=new Image();right_img_inv.src=image_path+"/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=image_path+"/visualization/strand_left_inv.png";left_img_inv.onload=function(){LEFT_STRAND_INV=CONTEXT.createPattern(left_img_inv,"repeat")};function round_1000(a){return Math.round(a*1000)/1000}var Cache=function(a){this.num_elements=a;this.clear()};$.extend(Cache.prototype,{get:function(b){var a=this.key_ary.indexOf(b);if(a!=-1){this.key_ary.splice(a,1);this.key_ary.push(b)}return this.obj_cache[b]},set:function(b,c){if(!this.obj_cache[b]){if(this.key_ary.length>=this.num_elements){var a=this.key_ary.shift();delete this.obj_cache[a]}this.key_ary.push(b)}this.obj_cache[b]=c;return c},clear:function(){this.obj_cache={};this.key_ary=[]}});var View=function(a,d,c,b){this.container=a;this.vis_id=c;this.dbkey=b;this.t
 itle=d;this.tracks=[];this.label_tracks=[];this.max_low=0;this.max_high=0;this.num_tracks=0;this.track_id_counter=0;this.zoom_factor=3;this.min_separation=30;this.has_changes=false;this.init();this.reset()};$.extend(View.prototype,{init:function(){var c=this.container,a=this;this.top_labeltrack=$("<div/>").addClass("top-labeltrack").appendTo(c);this.content_div=$("<div/>").addClass("content").css("position","relative").appendTo(c);this.viewport_container=$("<div/>").addClass("viewport-container").addClass("viewport-container").appendTo(this.content_div);this.intro_div=$("<div/>").addClass("intro").text("Select a chrom from the dropdown below").hide();this.nav_container=$("<div/>").addClass("nav-container").appendTo(c);this.nav_labeltrack=$("<div/>").addClass("nav-labeltrack").appendTo(this.nav_container);this.nav=$("<div/>").addClass("nav").appendTo(this.nav_container);this.overview=$("<div/>").addClass("overview").appendTo(this.nav);this.overview_viewport=$("<div/>").addCla
 ss("overview-viewport").appendTo(this.overview);this.overview_close=$("<a href='javascript:void(0);'>Close Overview</a>").addClass("overview-close").hide().appendTo(this.overview_viewport);this.overview_highlight=$("<div />").addClass("overview-highlight").hide().appendTo(this.overview_viewport);this.overview_box_background=$("<div/>").addClass("overview-boxback").appendTo(this.overview_viewport);this.overview_box=$("<div/>").addClass("overview-box").appendTo(this.overview_viewport);this.default_overview_height=this.overview_box.height();this.nav_controls=$("<div/>").addClass("nav-controls").appendTo(this.nav);this.chrom_form=$("<form/>").attr("action",function(){void (0)}).appendTo(this.nav_controls);this.chrom_select=$("<select/>").attr({name:"chrom"}).css("width","15em").addClass("no-autocomplete").append("<option value=''>Loading</option>").appendTo(this.chrom_form);var b=function(d){if(d.type==="focusout"||(d.keyCode||d.which)===13||(d.keyCode||d.which)===27){if((d.keyC
 ode||d.which)!==27){a.go_to($(this).val())}$(this).hide();a.location_span.show();a.chrom_select.show();return false}};this.nav_input=$("<input/>").addClass("nav-input").hide().bind("keypress focusout",b).appendTo(this.chrom_form);this.location_span=$("<span/>").addClass("location").appendTo(this.chrom_form);this.location_span.bind("click",function(){a.location_span.hide();a.chrom_select.hide();a.nav_input.css("display","inline-block");a.nav_input.select();a.nav_input.focus()});if(this.vis_id!==undefined){this.hidden_input=$("<input/>").attr("type","hidden").val(this.vis_id).appendTo(this.chrom_form)}this.zo_link=$("<a/>").click(function(){a.zoom_out();a.redraw()}).html('<img src="'+image_path+'/fugue/magnifier-zoom-out.png" />').appendTo(this.chrom_form);this.zi_link=$("<a/>").click(function(){a.zoom_in();a.redraw()}).html('<img src="'+image_path+'/fugue/magnifier-zoom.png" />').appendTo(this.chrom_form);$.ajax({url:chrom_url,data:(this.vis_id!==undefined?{vis_id:this.vis_id
 }:{dbkey:this.dbkey}),dataType:"json",success:function(d){if(d.reference){a.add_label_track(new ReferenceTrack(a))}a.chrom_data=d.chrom_info;var f='<option value="">Select Chrom/Contig</option>';for(i in a.chrom_data){var e=a.chrom_data[i]["chrom"];f+='<option value="'+e+'">'+e+"</option>"}a.chrom_select.html(f);a.intro_div.show();a.chrom_select.bind("change",function(){a.change_chrom(a.chrom_select.val())})},error:function(){alert("Could not load chroms for this dbkey:",a.dbkey)}});this.content_div.bind("dblclick",function(d){a.zoom_in(d.pageX,this.viewport_container)});this.overview_box.bind("dragstart",function(d){this.current_x=d.offsetX}).bind("drag",function(d){var g=d.offsetX-this.current_x;this.current_x=d.offsetX;var f=Math.round(g/a.viewport_container.width()*(a.max_high-a.max_low));a.move_delta(-f)});this.overview_close.bind("click",function(){for(var d in a.tracks){a.tracks[d].is_overview=false}$(this).siblings().filter("canvas").remove();$(this).parent().css("he
 ight",a.overview_box.height());a.overview_highlight.hide();$(this).hide()});this.viewport_container.bind("dragstart",function(d){this.original_low=a.low;this.current_height=d.clientY;this.current_x=d.offsetX;this.enable_pan=(d.clientX<a.viewport_container.width()-16)?true:false}).bind("drag",function(g){if(!this.enable_pan||this.in_reordering){return}var d=$(this);var j=g.offsetX-this.current_x;var f=d.scrollTop()-(g.clientY-this.current_height);d.scrollTop(f);this.current_height=g.clientY;this.current_x=g.offsetX;var h=Math.round(j/a.viewport_container.width()*(a.high-a.low));a.move_delta(h)});this.top_labeltrack.bind("dragstart",function(d){this.drag_origin_x=d.clientX;this.drag_origin_pos=d.clientX/a.viewport_container.width()*(a.high-a.low)+a.low;this.drag_div=$("<div />").css({height:a.content_div.height()+30,top:"0px",position:"absolute","background-color":"#cfc",border:"1px solid #6a6",opacity:0.5,"z-index":1000}).appendTo($(this))}).bind("drag",function(j){var f=Math
 .min(j.clientX,this.drag_origin_x)-a.container.offset().left,d=Math.max(j.clientX,this.drag_origin_x)-a.container.offset().left,h=(a.high-a.low),g=a.viewport_container.width();a.update_location(Math.round(f/g*h)+a.low,Math.round(d/g*h)+a.low);this.drag_div.css({left:f+"px",width:(d-f)+"px"})}).bind("dragend",function(k){var f=Math.min(k.clientX,this.drag_origin_x),d=Math.max(k.clientX,this.drag_origin_x),h=(a.high-a.low),g=a.viewport_container.width(),j=a.low;a.low=Math.round(f/g*h)+j;a.high=Math.round(d/g*h)+j;this.drag_div.remove();a.redraw()});this.add_label_track(new LabelTrack(this,this.top_labeltrack));this.add_label_track(new LabelTrack(this,this.nav_labeltrack));$(window).bind("resize",function(){a.resize_window()});$(document).bind("redraw",function(){a.redraw()});this.reset();$(window).trigger("resize")},update_location:function(a,b){this.location_span.text(commatize(a)+" - "+commatize(b));this.nav_input.val(this.chrom+":"+commatize(a)+"-"+commatize(b))},change_chr
 om:function(d,a,f){var c=this;var e=$.grep(c.chrom_data,function(h,j){return h.chrom===d})[0];if(e===undefined){return}if(d!==c.chrom){c.chrom=d;if(!c.chrom){c.intro_div.show()}else{c.intro_div.hide()}c.chrom_select.val(c.chrom);c.max_high=e.len;c.reset();c.redraw(true);for(var g in c.tracks){var b=c.tracks[g];if(b.init){b.init()}}}if(a!==undefined&&f!==undefined){c.low=Math.max(a,0);c.high=Math.min(f,c.max_high)}c.reset_overview();c.redraw()},go_to:function(f){var k=this,b=f.split(":"),h=b[0],j=b[1];if(j!==undefined){try{var g=j.split("-"),a=parseInt(g[0].replace(/,/g,"")),d=parseInt(g[1].replace(/,/g,""))}catch(c){return false}}k.change_chrom(h,a,d)},move_delta:function(c){var a=this;var b=a.high-a.low;if(a.low-c<a.max_low){a.low=a.max_low;a.high=a.max_low+b}else{if(a.high-c>a.max_high){a.high=a.max_high;a.low=a.max_high-b}else{a.high-=c;a.low-=c}}a.redraw()},add_track:function(a){a.view=this;a.track_id=this.track_id_counter;this.tracks.push(a);if(a.init){a.init()}a.contai
 ner_div.attr("id","track_"+a.track_id);this.track_id_counter+=1;this.num_tracks+=1},add_label_track:function(a){a.view=this;this.label_tracks.push(a)},remove_track:function(a){this.has_changes=true;a.container_div.fadeOut("slow",function(){$(this).remove()});delete this.tracks[this.tracks.indexOf(a)];this.num_tracks-=1},reset:function(){this.low=this.max_low;this.high=this.max_high;this.viewport_container.find(".yaxislabel").remove()},redraw:function(h){var g=this.high-this.low,f=this.low,b=this.high;if(f<this.max_low){f=this.max_low}if(b>this.max_high){b=this.max_high}if(this.high!==0&&g<this.min_separation){b=f+this.min_separation}this.low=Math.floor(f);this.high=Math.ceil(b);this.resolution=Math.pow(10,Math.ceil(Math.log((this.high-this.low)/200)/Math.LN10));this.zoom_res=Math.pow(FEATURE_LEVELS,Math.max(0,Math.ceil(Math.log(this.resolution,FEATURE_LEVELS)/Math.log(FEATURE_LEVELS))));var a=(this.low/(this.max_high-this.max_low)*this.overview_viewport.width())||0;var e=((t
 his.high-this.low)/(this.max_high-this.max_low)*this.overview_viewport.width())||0;var j=13;this.overview_box.css({left:a,width:Math.max(j,e)}).show();if(e<j){this.overview_box.css("left",a-(j-e)/2)}if(this.overview_highlight){this.overview_highlight.css({left:a,width:e})}this.update_location(this.low,this.high);if(!h){for(var c=0,d=this.tracks.length;c<d;c++){if(this.tracks[c]&&this.tracks[c].enabled){this.tracks[c].draw()}}for(var c=0,d=this.label_tracks.length;c<d;c++){this.label_tracks[c].draw()}}},zoom_in:function(b,c){if(this.max_high===0||this.high-this.low<this.min_separation){return}var d=this.high-this.low,e=d/2+this.low,a=(d/this.zoom_factor)/2;if(b){e=b/this.viewport_container.width()*(this.high-this.low)+this.low}this.low=Math.round(e-a);this.high=Math.round(e+a);this.redraw()},zoom_out:function(){if(this.max_high===0){return}var b=this.high-this.low,c=b/2+this.low,a=(b*this.zoom_factor)/2;this.low=Math.round(c-a);this.high=Math.round(c+a);this.redraw()},resize_
 window:function(){this.viewport_container.height(this.container.height()-this.nav_container.height()-45);this.nav_container.width(this.container.width());this.redraw()},reset_overview:function(){this.overview_viewport.find("canvas").remove();this.overview_viewport.height(this.default_overview_height);this.overview_box.height(this.default_overview_height);this.overview_close.hide();this.overview_highlight.hide()}});var Filter=function(b,a,c){this.name=b;this.index=a;this.value=c};var NumberFilter=function(b,a){this.name=b;this.index=a;this.low=-Number.MAX_VALUE;this.high=Number.MAX_VALUE;this.slider_min=Number.MAX_VALUE;this.slider_max=-Number.MAX_VALUE;this.slider=null;this.slider_label=null};$.extend(NumberFilter.prototype,{applies_to:function(a){if(a.length>this.index){return true}return false},keep:function(a){if(!this.applies_to(a)){return true}return(a[this.index]>=this.low&&a[this.index]<=this.high)},update_attrs:function(b){var a=false;if(!this.applies_to(b)){return a
 }if(b[this.index]<this.slider_min){this.slider_min=b[this.index];a=true}if(b[this.index]>this.slider_max){this.slider_max=b[this.index];a=false}return a},update_ui_elt:function(){var b=this.slider.slider("option","min"),a=this.slider.slider("option","max");if(this.slider_min<b||this.slider_max>a){this.slider.slider("option","min",this.slider_min);this.slider.slider("option","max",this.slider_max);this.slider.slider("option","values",[this.slider_min,this.slider_max])}}});var get_filters=function(a){var g=[];for(var d=0;d<a.length;d++){var f=a[d];var c=f.name,e=f.type,b=f.index;if(e=="int"||e=="float"){g[d]=new NumberFilter(c,b)}else{g[d]=new Filter(c,b,e)}}return g};var Track=function(b,a,d,c){this.name=b;this.view=a;this.parent_element=d;this.filters=(c!==undefined?get_filters(c):[]);this.init_global()};$.extend(Track.prototype,{init_global:function(){this.container_div=$("<div />").addClass("track").css("position","relative");if(!this.hidden){this.header_div=$("<div class=
 'track-header' />").appendTo(this.container_div);if(this.view.editor){this.drag_div=$("<div class='draghandle' />").appendTo(this.header_div)}this.name_div=$("<div class='menubutton popup' />").appendTo(this.header_div);this.name_div.text(this.name);this.name_div.attr("id",this.name.replace(/\s+/g,"-").replace(/[^a-zA-Z0-9\-]/g,"").toLowerCase())}this.filtering_div=$("<div class='track-filters'>").appendTo(this.container_div);this.filtering_div.hide();this.filtering_div.bind("drag",function(k){k.stopPropagation()});var b=$("<table class='filters'>").appendTo(this.filtering_div);var c=this;for(var e=0;e<this.filters.length;e++){var a=this.filters[e];var f=$("<tr>").appendTo(b);var g=$("<th class='filter-info'>").appendTo(f);var j=$("<span class='name'>").appendTo(g);j.text(a.name+"  ");var d=$("<span class='values'>").appendTo(g);var h=$("<td>").appendTo(f);a.control_element=$("<div id='"+a.name+"-filter-control' style='width: 200px; position: relative'>").appendTo(h);a.contr
 ol_element.slider({range:true,min:Number.MAX_VALUE,max:-Number.MIN_VALUE,values:[0,0],slide:function(l,m){var k=m.values;d.text("["+k[0]+"-"+k[1]+"]");a.low=k[0];a.high=k[1];c.draw(true)},change:function(k,l){a.control_element.slider("option","slide").call(a.control_element,k,l)}});a.slider=a.control_element;a.slider_label=d}this.content_div=$("<div class='track-content'>").appendTo(this.container_div);this.parent_element.append(this.container_div)},init_each:function(c,b){var a=this;a.enabled=false;a.data_queue={};a.tile_cache.clear();a.data_cache.clear();a.initial_canvas=undefined;a.content_div.css("height","auto");if(!a.content_div.text()){a.content_div.text(DATA_LOADING)}a.container_div.removeClass("nodata error pending");if(a.view.chrom){$.getJSON(data_url,c,function(d){if(!d||d==="error"||d.kind==="error"){a.container_div.addClass("error");a.content_div.text(DATA_ERROR);if(d.message){var f=a.view.tracks.indexOf(a);var e=$("<a href='javascript:void(0);'></a>").attr("id"
 ,f+"_error");e.text("Click to view error");$("#"+f+"_error").live("click",function(){show_modal("Trackster Error","<pre>"+d.message+"</pre>",{Close:hide_modal})});a.content_div.append(e)}}else{if(d==="no converter"){a.container_div.addClass("error");a.content_div.text(DATA_NOCONVERTER)}else{if(d.data!==undefined&&(d.data===null||d.data.length===0)){a.container_div.addClass("nodata");a.content_div.text(DATA_NONE)}else{if(d==="pending"){a.container_div.addClass("pending");a.content_div.text(DATA_PENDING);setTimeout(function(){a.init()},5000)}else{a.content_div.text("");a.content_div.css("height",a.height_px+"px");a.enabled=true;b(d);a.draw()}}}}})}else{a.container_div.addClass("nodata");a.content_div.text(DATA_NONE)}}});var TiledTrack=function(){var d=this,c=d.view;if(d.hidden){return}if(d.display_modes!==undefined){if(d.mode_div===undefined){d.mode_div=$("<div class='right-float menubutton popup' />").appendTo(d.header_div);var h=d.display_modes[0];d.mode=h;d.mode_div.text(h)
 ;var a=function(j){d.mode_div.text(j);d.mode=j;d.tile_cache.clear();d.draw()};var f={};for(var e in d.display_modes){var g=d.display_modes[e];f[g]=function(j){return function(){a(j)}}(g)}make_popupmenu(d.mode_div,f)}else{d.mode_div.hide()}}var b={};b["Set as overview"]=function(){c.overview_viewport.find("canvas").remove();d.is_overview=true;d.set_overview();for(var j in c.tracks){if(c.tracks[j]!==d){c.tracks[j].is_overview=false}}};b["Edit configuration"]=function(){var l=function(){hide_modal();$(window).unbind("keypress.check_enter_esc")},j=function(){d.update_options(d.track_id);hide_modal();$(window).unbind("keypress.check_enter_esc")},k=function(m){if((m.keyCode||m.which)===27){l()}else{if((m.keyCode||m.which)===13){j()}}};$(window).bind("keypress.check_enter_esc",k);show_modal("Configure Track",d.gen_options(d.track_id),{Cancel:l,OK:j})};if(d.filters.length>0){b["Show filters"]=function(){var j;if(!d.filtering_div.is(":visible")){j="Hide filters";d.filters_visible=tru
 e}else{j="Show filters";d.filters_visible=false}$("#"+d.name_div.attr("id")+"-menu").find("li").eq(2).text(j);d.filtering_div.toggle()}}b.Remove=function(){c.remove_track(d);if(c.num_tracks===0){$("#no-tracks").show()}};d.popup_menu=make_popupmenu(d.name_div,b);show_hide_popupmenu_options(d.popup_menu,"(Show|Hide) filters",false)};$.extend(TiledTrack.prototype,Track.prototype,{draw:function(b){var m=this.view.low,g=this.view.high,h=g-m,f=this.view.resolution;var p=$("<div style='position: relative;'></div>"),q=this.content_div.width()/h,k;this.content_div.append(p),this.max_height=0;var a=Math.floor(m/f/DENSITY);var l=new Object();while((a*DENSITY*f)<g){var n=this.content_div.width()+"_"+q+"_"+a;var e=this.tile_cache.get(n);if(!b&&e){var j=a*DENSITY*f;var d=(j-m)*q;if(this.left_offset){d-=this.left_offset}e.css({left:d});this.show_tile(e,p)}else{this.delayed_draw(this,n,m,g,a,f,p,q,l)}a+=1}var c=this;var o=setInterval(function(){if(l.length!=0){if(c.content_div.children().le
 ngth>1){c.content_div.children(":first").remove()}for(var r=0;r<c.filters.length;r++){c.filters[r].update_ui_elt()}clearInterval(o)}},50)},delayed_draw:function(c,h,g,e,b,d,j,k,f){var a=setTimeout(function(){if(!(g>c.view.high||e<c.view.low)){tile_element=c.draw_tile(d,b,j,k);if(tile_element){if(!c.initial_canvas&&!window.G_vmlCanvasManager){c.initial_canvas=$(tile_element).clone();var n=tile_element.get(0).getContext("2d");var l=c.initial_canvas.get(0).getContext("2d");var m=n.getImageData(0,0,n.canvas.width,n.canvas.height);l.putImageData(m,0,0);c.set_overview()}c.tile_cache.set(h,tile_element);c.show_tile(tile_element,j)}}delete f.id},50);f.id=true},show_tile:function(a,c){var b=this;c.append(a);b.max_height=Math.max(b.max_height,a.height());b.content_div.css("height",b.max_height+"px");if(a.hasClass(FILTERABLE_CLASS)){show_hide_popupmenu_options(b.popup_menu,"(Show|Hide) filters");if(b.filters_visible){b.filtering_div.show()}}else{show_hide_popupmenu_options(b.popup_menu
 ,"(Show|Hide) filters",false);b.filtering_div.hide()}},set_overview:function(){var a=this.view;if(this.initial_canvas&&this.is_overview){a.overview_close.show();a.overview_viewport.append(this.initial_canvas);a.overview_highlight.show().height(this.initial_canvas.height());a.overview_viewport.height(this.initial_canvas.height()+a.overview_box.height())}$(window).trigger("resize")}});var LabelTrack=function(a,b){this.track_type="LabelTrack";this.hidden=true;Track.call(this,null,a,b);this.container_div.addClass("label-track")};$.extend(LabelTrack.prototype,Track.prototype,{draw:function(){var c=this.view,d=c.high-c.low,g=Math.floor(Math.pow(10,Math.floor(Math.log(d)/Math.log(10)))),a=Math.floor(c.low/g)*g,e=this.content_div.width(),b=$("<div style='position: relative; height: 1.3em;'></div>");while(a<c.high){var f=(a-c.low)/d*e;b.append($("<div class='label'>"+commatize(a)+"</div>").css({position:"absolute",left:f-1}));a+=g}this.content_div.children(":first").remove();this.con
 tent_div.append(b)}});var ReferenceTrack=function(a){this.track_type="ReferenceTrack";this.hidden=true;Track.call(this,null,a,a.top_labeltrack);TiledTrack.call(this);this.left_offset=200;this.height_px=12;this.container_div.addClass("reference-track");this.data_queue={};this.data_cache=new Cache(CACHED_DATA);this.tile_cache=new Cache(CACHED_TILES_LINE)};$.extend(ReferenceTrack.prototype,TiledTrack.prototype,{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;$.ajax({url:reference_url,dataType:"json",data:{chrom:this.view.chrom,low:a,high:f,dbkey:this.view.dbkey},success:function(g){c.data_cache.set(e,g);delete c.data_queue[e];c.draw()},error:function(h,g,j){console.log(h,g,j)}})}},draw_tile:function(f,b,l,p){var g=b*DENSITY*f,d=DENSITY*f,k=f+"_"+b;var e=document.createElement("canvas");if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(e)}e=$(e);var o=e.get(0).getContext("2d");if(p>PX_PER_CHAR){if(t
 his.data_cache.get(k)===undefined){this.get_data(f,b);return}var n=this.data_cache.get(k);if(n===null){this.content_div.css("height","0px");return}e.get(0).width=Math.ceil(d*p+this.left_offset);e.get(0).height=this.height_px;e.css({position:"absolute",top:0,left:(g-this.view.low)*p-this.left_offset});for(var h=0,m=n.length;h<m;h++){var a=Math.round(h*p),j=Math.round(p/2);o.fillText(n[h],a+this.left_offset+j,10)}l.append(e);return e}this.content_div.css("height","0px")}});var LineTrack=function(d,b,a,c){this.track_type="LineTrack";this.display_modes=["Histogram","Line","Filled","Intensity"];this.mode="Histogram";Track.call(this,d,b,b.viewport_container);TiledTrack.call(this);this.height_px=80;this.dataset_id=a;this.data_cache=new Cache(CACHED_DATA);this.tile_cache=new Cache(CACHED_TILES_LINE);this.prefs={color:"black",min_value:undefined,max_value:undefined,mode:this.mode}};$.extend(LineTrack.prototype,TiledTrack.prototype,{init:function(){var a=this,b=a.view.tracks.indexOf(a
 );a.vertical_range=undefined;this.init_each({stats:true,chrom:a.view.chrom,low:null,high:null,dataset_id:a.dataset_id},function(c){a.container_div.addClass("line-track");data=c.data;if(isNaN(parseFloat(a.prefs.min_value))||isNaN(parseFloat(a.prefs.max_value))){a.prefs.min_value=data.min;a.prefs.max_value=data.max;$("#track_"+b+"_minval").val(a.prefs.min_value);$("#track_"+b+"_maxval").val(a.prefs.max_value)}a.vertical_range=a.prefs.max_value-a.prefs.min_value;a.total_frequency=data.total_frequency;a.container_div.find(".yaxislabel").remove();var e=$("<div />").addClass("yaxislabel").attr("id","linetrack_"+b+"_minval").text(round_1000(a.prefs.min_value));var d=$("<div />").addClass("yaxislabel").attr("id","linetrack_"+b+"_maxval").text(round_1000(a.prefs.max_value));d.css({position:"absolute",top:"22px",left:"10px"});d.prependTo(a.container_div);e.css({position:"absolute",top:a.height_px+11+"px",left:"10px"});e.prependTo(a.container_div)})},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;$.ajax({url:data_url,dataType:"json",data:{chrom:this.view.chrom,low:a,high:f,dataset_id:this.dataset_id,resolution:this.view.resolution},success:function(g){data=g.data;c.data_cache.set(e,data);delete c.data_queue[e];c.draw()},error:function(h,g,j){console.log(h,g,j)}})}},draw_tile:function(p,s,c,e){if(this.vertical_range===undefined){return}var t=s*DENSITY*p,a=DENSITY*p,w=p+"_"+s;var b=document.createElement("canvas");if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(b)}b=$(b);if(this.data_cache.get(w)===undefined){this.get_data(p,s);return}var j=this.data_cache.get(w);if(j===null){return}b.css({position:"absolute",top:0,left:(t-this.view.low)*e});b.get(0).width=Math.ceil(a*e);b.get(0).height=this.height_px;var o=b.get(0).getContext("2d"),k=false,l=this.prefs.min_value,g=this.prefs.max_value,n=this.vertical_range,u=this.total_frequency,d=this.height_px,m=this.mode;o.beginPath();o.
 fillStyle=this.prefs.color;if(data.length>1){var f=Math.ceil((data[1][0]-data[0][0])*e)}else{var f=10}var v,h;for(var q=0,r=data.length;q<r;q++){v=Math.round((data[q][0]-t)*e);h=data[q][1];if(h===null){if(k&&m==="Filled"){o.lineTo(v,d)}k=false;continue}if(h<l){h=l}else{if(h>g){h=g}}if(m==="Histogram"){h=Math.round(d-(h-l)/n*d);o.fillRect(v,h,f,d-h)}else{if(m==="Intensity"){h=255-Math.floor((h-l)/n*255);o.fillStyle="rgb("+h+","+h+","+h+")";o.fillRect(v,0,f,d)}else{h=Math.round(d-(h-l)/n*d);if(k){o.lineTo(v,h)}else{k=true;if(m==="Filled"){o.moveTo(v,d);o.lineTo(v,h)}else{o.moveTo(v,h)}}}}}if(m==="Filled"){if(k){o.lineTo(v,d)}o.fill()}else{o.stroke()}c.append(b);return b},gen_options:function(n){var a=$("<div />").addClass("form-row");var e="track_"+n+"_color",b=$("<label />").attr("for",e).text("Color:"),c=$("<input />").attr("id",e).attr("name",e).val(this.prefs.color),h="track_"+n+"_minval",m=$("<label></label>").attr("for",h).text("Min value:"),d=(this.prefs.min_value===und
 efined?"":this.prefs.min_value),l=$("<input></input>").attr("id",h).val(d),k="track_"+n+"_maxval",g=$("<label></label>").attr("for",k).text("Max value:"),j=(this.prefs.max_value===undefined?"":this.prefs.max_value),f=$("<input></input>").attr("id",k).val(j);return a.append(m).append(l).append(g).append(f).append(b).append(c)},update_options:function(c){var a=$("#track_"+c+"_minval").val(),b=$("#track_"+c+"_maxval").val();color=$("#track_"+c+"_color").val();if(a!==this.prefs.min_value||b!==this.prefs.max_value||color!==this.prefs.color){this.prefs.min_value=parseFloat(a);this.prefs.max_value=parseFloat(b);this.prefs.color=color;this.vertical_range=this.prefs.max_value-this.prefs.min_value;$("#linetrack_"+c+"_minval").text(this.prefs.min_value);$("#linetrack_"+c+"_maxval").text(this.prefs.max_value);this.tile_cache.clear();this.draw()}}});var FeatureTrack=function(d,b,a,e,c){this.track_type="FeatureTrack";this.display_modes=["Auto","Dense","Squish","Pack"];Track.call(this,d,b,
 b.viewport_container,e);TiledTrack.call(this);this.height_px=0;this.container_div.addClass("feature-track");this.dataset_id=a;this.zo_slots={};this.show_labels_scale=0.001;this.showing_details=false;this.vertical_detail_px=10;this.vertical_nodetail_px=2;this.summary_draw_height=30;this.default_font="9px Monaco, Lucida Console, monospace";this.inc_slots={};this.data_queue={};this.s_e_by_tile={};this.tile_cache=new Cache(CACHED_TILES_FEATURE);this.data_cache=new Cache(20);this.left_offset=200;this.prefs={block_color:"#444",label_color:"black",show_counts:true}};$.extend(FeatureTrack.prototype,TiledTrack.prototype,{init:function(){var a=this,b="initial";this.init_each({low:a.view.max_low,high:a.view.max_high,dataset_id:a.dataset_id,chrom:a.view.chrom,resolution:this.view.resolution,mode:a.mode},function(c){a.mode_div.show();a.data_cache.set(b,c);a.draw()})},get_data:function(a,d){var b=this,c=a+"_"+d;if(!b.data_queue[c]){b.data_queue[c]=true;$.getJSON(data_url,{chrom:b.view.chr
 om,low:a,high:d,dataset_id:b.dataset_id,resolution:this.view.resolution,mode:this.mode},function(e){b.data_cache.set(c,e);delete b.data_queue[c];b.draw()})}},incremental_slots:function(a,g,b,q){if(!this.inc_slots[a]){this.inc_slots[a]={};this.inc_slots[a].w_scale=a;this.inc_slots[a].mode=q;this.s_e_by_tile[a]={}}var m=this.inc_slots[a].w_scale,y=[],h=0,n=this.view.max_low;var A=[];if(this.inc_slots[a].mode!==q){delete this.inc_slots[a];this.inc_slots[a]={mode:q,w_scale:m};delete this.s_e_by_tile[a];this.s_e_by_tile[a]={}}for(var v=0,w=g.length;v<w;v++){var f=g[v],l=f[0];if(this.inc_slots[a][l]!==undefined){h=Math.max(h,this.inc_slots[a][l]);A.push(this.inc_slots[a][l])}else{y.push(v)}}for(var v=0,w=y.length;v<w;v++){var f=g[y[v]],l=f[0],r=f[1],c=f[2],p=f[3],d=Math.floor((r-n)*m),e=Math.ceil((c-n)*m);if(p!==undefined&&!b){var s=CONTEXT.measureText(p).width;if(d-s<0){e+=s}else{d-=s}}var u=0;while(u<=MAX_FEATURE_DEPTH){var o=true;if(this.s_e_by_tile[a][u]!==undefined){for(var t
 =0,z=this.s_e_by_tile[a][u].length;t<z;t++){var x=this.s_e_by_tile[a][u][t];if(e>x[0]&&d<x[1]){o=false;break}}}if(o){if(this.s_e_by_tile[a][u]===undefined){this.s_e_by_tile[a][u]=[]}this.s_e_by_tile[a][u].push([d,e]);this.inc_slots[a][l]=u;h=Math.max(h,u);break}u++}}return h},rect_or_text:function(r,m,s,b,q,f,h,e){r.textAlign="center";var l=0,p=Math.round(m/2);for(cig_id in h){var k=h[cig_id],d="MIDNSHP"[k[0]],n=k[1];if(d==="H"||d==="S"){l-=n}var g=q+l,v=Math.floor(Math.max(0,(g-s)*m)),j=Math.floor(Math.max(0,(g+n-s)*m));switch(d){case"S":case"H":case"M":var o=f.slice(l,n);if((this.mode==="Pack"||this.mode==="Auto")&&f!==undefined&&m>PX_PER_CHAR){r.fillStyle=this.prefs.block_color;r.fillRect(v+this.left_offset,e+1,j-v,9);r.fillStyle=CONNECTOR_COLOR;for(var t=0,a=o.length;t<a;t++){if(g+t>=s&&g+t<=b){var u=Math.floor(Math.max(0,(g+t-s)*m));r.fillText(o[t],u+this.left_offset+p,e+9)}}}else{r.fillStyle=this.prefs.block_color;r.fillRect(v+this.left_offset,e+4,j-v,3)}break;case"N":
 r.fillStyle=CONNECTOR_COLOR;r.fillRect(v+this.left_offset,e+5,j-v,1);break;case"D":r.fillStyle="red";r.fillRect(v+this.left_offset,e+4,j-v,3);break;case"P":case"I":break}l+=n}},draw_tile:function(ah,o,t,aw){var O=o*DENSITY*ah,am=(o+1)*DENSITY*ah,N=am-O;var ao=(!this.initial_canvas?"initial":O+"_"+am);var J=this.data_cache.get(ao);var e;if(J===undefined||(this.mode!=="Auto"&&J.dataset_type==="summary_tree")){this.data_queue[[O,am]]=true;this.get_data(O,am);return}var a=Math.ceil(N*aw),r=$("<canvas class='tile'></canvas>"),aj=this.prefs.label_color,l=this.prefs.block_color,s=this.mode,A=25,af=(s==="Squish")||(s==="Dense")&&(s!=="Pack")||(s==="Auto"&&(J.extra_info==="no_detail")),X=this.left_offset,av,E,ax;var r=document.createElement("canvas");if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(r)}r=$(r);if(J.dataset_type==="summary_tree"){E=this.summary_draw_height}else{if(s==="Dense"){E=A;ax=10}else{ax=(af?this.vertical_nodetail_px:this.vertical_detail_px);var B=(aw
 <0.0001?1/view.zoom_res:aw);E=this.incremental_slots(B,J.data,af,s)*ax+A;av=this.inc_slots[B]}}r.css({position:"absolute",top:0,left:(O-this.view.low)*aw-X});r.get(0).width=a+X;r.get(0).height=E;t.parent().css("height",Math.max(this.height_px,E)+"px");var K=r.get(0).getContext("2d");K.fillStyle=l;K.font=this.default_font;K.textAlign="right";this.container_div.find(".yaxislabel").remove();if(J.dataset_type=="summary_tree"){var Z=J.data,M=J.max,q=J.avg,b=Math.ceil(J.delta*aw);var p=$("<div />").addClass("yaxislabel").text(M);p.css({position:"absolute",top:"22px",left:"10px"});p.prependTo(this.container_div);for(var aq=0,I=Z.length;aq<I;aq++){var ab=Math.floor((Z[aq][0]-O)*aw);var aa=Z[aq][1];if(!aa){continue}var an=aa/M*this.summary_draw_height;K.fillStyle="black";K.fillRect(ab+X,this.summary_draw_height-an,b,an);if(this.prefs.show_counts&&K.measureText(aa).width<b){K.fillStyle="#bbb";K.textAlign="center";K.fillText(aa,ab+X+(b/2),this.summary_draw_height-5)}}e="Summary";t.appe
 nd(r);return r}if(J.message){r.css({border:"solid red","border-width":"2px 2px 2px 0px"});K.fillStyle="red";K.textAlign="left";K.fillText(J.message,100+X,ax)}var ae=false;if(J.data.length!=0){ae=true;for(var at=0;at<this.filters.length;at++){if(!this.filters[at].applies_to(J.data[0])){ae=false}}}if(ae){r.addClass(FILTERABLE_CLASS)}var au=J.data;var ap=0;for(var aq=0,I=au.length;aq<I;aq++){var T=au[aq],S=T[0],ar=T[1],ad=T[2],P=T[3];if(av[S]===undefined){continue}var ac=false;var V;for(var at=0;at<this.filters.length;at++){V=this.filters[at];V.update_attrs(T);if(!V.keep(T)){ac=true;break}}if(ac){continue}if(ar<=am&&ad>=O){var ag=Math.floor(Math.max(0,(ar-O)*aw)),L=Math.ceil(Math.min(a,Math.max(0,(ad-O)*aw))),Y=(s==="Dense"?1:(1+av[S]))*ax;if(J.dataset_type==="bai"){var w=T[4];K.fillStyle=l;if(T[5] instanceof Array){var F=Math.floor(Math.max(0,(T[5][0]-O)*aw)),R=Math.ceil(Math.min(a,Math.max(0,(T[5][1]-O)*aw))),D=Math.floor(Math.max(0,(T[6][0]-O)*aw)),z=Math.ceil(Math.min(a,Mat
 h.max(0,(T[6][1]-O)*aw)));if(T[5][1]>=O&&T[5][0]<=am){this.rect_or_text(K,aw,O,am,T[5][0],T[5][2],w,Y)}if(T[6][1]>=O&&T[6][0]<=am){this.rect_or_text(K,aw,O,am,T[6][0],T[6][2],w,Y)}if(D>R){K.fillStyle=CONNECTOR_COLOR;K.fillRect(R+X,Y+5,D-R,1)}}else{K.fillStyle=l;this.rect_or_text(K,aw,O,am,ar,P,w,Y)}if(s!=="Dense"&&!af&&ar>O){K.fillStyle=this.prefs.label_color;if(o===0&&ag-K.measureText(P).width<0){K.textAlign="left";K.fillText(S,L+2+X,Y+8)}else{K.textAlign="right";K.fillText(S,ag-2+X,Y+8)}K.fillStyle=l}}else{if(J.dataset_type==="interval_index"){if(af){K.fillStyle=l;K.fillRect(ag+X,Y+5,L-ag,1)}else{var H=T[4],W=T[5],ai=T[6],h=T[7];var G,ak,Q=null,ay=null;if(W&&ai){Q=Math.floor(Math.max(0,(W-O)*aw));ay=Math.ceil(Math.min(a,Math.max(0,(ai-O)*aw)))}if(s!=="Dense"&&P!==undefined&&ar>O){K.fillStyle=aj;if(o===0&&ag-K.measureText(P).width<0){K.textAlign="left";K.fillText(P,L+2+X,Y+8)}else{K.textAlign="right";K.fillText(P,ag-2+X,Y+8)}K.fillStyle=l}if(h){if(H){if(H=="+"){K.fillStyle=
 RIGHT_STRAND}else{if(H=="-"){K.fillStyle=LEFT_STRAND}}K.fillRect(ag+X,Y,L-ag,10);K.fillStyle=l}for(var ao=0,g=h.length;ao<g;ao++){var v=h[ao],d=Math.floor(Math.max(0,(v[0]-O)*aw)),U=Math.ceil(Math.min(a,Math.max((v[1]-O)*aw)));if(d>U){continue}G=5;ak=3;K.fillRect(d+X,Y+ak,U-d,G);if(Q!==undefined&&!(d>ay||U<Q)){G=9;ak=1;var al=Math.max(d,Q),C=Math.min(U,ay);K.fillRect(al+X,Y+ak,C-al,G)}}}else{G=9;ak=1;K.fillRect(ag+X,Y+ak,L-ag,G);if(T.strand){if(T.strand=="+"){K.fillStyle=RIGHT_STRAND_INV}else{if(T.strand=="-"){K.fillStyle=LEFT_STRAND_INV}}K.fillRect(ag+X,Y,L-ag,10);K.fillStyle=l}}}}else{if(J.dataset_type==="vcf"){if(af){K.fillStyle=l;K.fillRect(ag+X,Y+5,L-ag,1)}else{var u=T[4],n=T[5],c=T[6];G=9;ak=1;K.fillRect(ag+X,Y,L-ag,G);if(s!=="Dense"&&P!==undefined&&ar>O){K.fillStyle=aj;if(o===0&&ag-K.measureText(P).width<0){K.textAlign="left";K.fillText(P,L+2+X,Y+8)}else{K.textAlign="right";K.fillText(P,ag-2+X,Y+8)}K.fillStyle=l}var m=u+" / "+n;if(ar>O&&K.measureText(m).width<(L-ag)){
 K.fillStyle="white";K.textAlign="center";K.fillText(m,X+ag+(L-ag)/2,Y+8);K.fillStyle=l}}}}}ap++}}return r},gen_options:function(j){var a=$("<div />").addClass("form-row");var e="track_"+j+"_block_color",l=$("<label />").attr("for",e).text("Block color:"),m=$("<input />").attr("id",e).attr("name",e).val(this.prefs.block_color),k="track_"+j+"_label_color",g=$("<label />").attr("for",k).text("Text color:"),h=$("<input />").attr("id",k).attr("name",k).val(this.prefs.label_color),f="track_"+j+"_show_count",c=$("<label />").attr("for",f).text("Show summary counts"),b=$('<input type="checkbox" style="float:left;"></input>').attr("id",f).attr("name",f).attr("checked",this.prefs.show_counts),d=$("<div />").append(b).append(c);return a.append(l).append(m).append(g).append(h).append(d)},update_options:function(e){var b=$("#track_"+e+"_block_color").val(),d=$("#track_"+e+"_label_color").val(),c=$("#track_"+e+"_mode option:selected").val(),a=$("#track_"+e+"_show_count").attr("checked");i
 f(b!==this.prefs.block_color||d!==this.prefs.label_color||a!==this.prefs.show_counts){this.prefs.block_color=b;this.prefs.label_color=d;this.prefs.show_counts=a;this.tile_cache.clear();this.draw()}}});var ReadTrack=function(d,b,a,e,c){FeatureTrack.call(this,d,b,a,e,c);this.track_type="ReadTrack";this.vertical_detail_px=10;this.vertical_nodetail_px=5};$.extend(ReadTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype,{});

--- a/static/scripts/trackster.js
+++ b/static/scripts/trackster.js
@@ -15,10 +15,15 @@ var DENSITY = 200,
     CACHED_TILES_FEATURE = 10,
     CACHED_TILES_LINE = 30,
     CACHED_DATA = 5,
-    CONTEXT = $("<canvas></canvas>").get(0).getContext("2d"),
-    PX_PER_CHAR = CONTEXT.measureText("A").width,
+    DUMMY_CANVAS = document.createElement("canvas"),
     RIGHT_STRAND, LEFT_STRAND;
     
+if (window.G_vmlCanvasManager) {
+    G_vmlCanvasManager.initElement(DUMMY_CANVAS);
+}
+CONTEXT = DUMMY_CANVAS.getContext("2d");
+PX_PER_CHAR = CONTEXT.measureText("A").width;
+    
 var right_img = new Image();
 right_img.src = image_path + "/visualization/strand_right.png";
 right_img.onload = function() {
@@ -255,6 +260,12 @@ var View = function( container, title, v
         
         this.add_label_track( new LabelTrack( this, this.top_labeltrack ) );
         this.add_label_track( new LabelTrack( this, this.nav_labeltrack ) );
+        
+        $(window).bind("resize", function() { view.resize_window(); });
+        $(document).bind("redraw", function() { view.redraw(); });
+        
+        this.reset();
+        $(window).trigger("resize");
     },
     update_location: function(low, high) {
         this.location_span.text( commatize(low) + ' - ' + commatize(high) );
@@ -348,22 +359,7 @@ var View = function( container, title, v
         track.container_div.fadeOut('slow', function() { $(this).remove(); });
         delete this.tracks[this.tracks.indexOf(track)];
         this.num_tracks -= 1;
-    },/* No longer needed as config is done inline, one track at a time
-    update_options: function() {
-        this.has_changes = true;
-        var sorted = $("ul#sortable-ul").sortable('toArray');
-        for (var id_i in sorted) {
-            var id = sorted[id_i].split("_li")[0].split("track_")[1];
-            this.viewport_container.append( $("#track_" + id) );
-        }
-        
-        for (var track_id in view.tracks) {
-            var track = view.tracks[track_id];
-            if (track && track.update_options) {
-                track.update_options(track_id);
-            }
-        }
-    },*/
+    },
     reset: function() {
         this.low = this.max_low;
         this.high = this.max_high;
@@ -391,8 +387,8 @@ var View = function( container, title, v
         this.zoom_res = Math.pow( FEATURE_LEVELS, Math.max(0,Math.ceil( Math.log( this.resolution, FEATURE_LEVELS ) / Math.log(FEATURE_LEVELS) )));
         
         // Overview
-        var left_px = this.low / (this.max_high - this.max_low) * this.overview_viewport.width();
-        var width_px = (this.high - this.low)/(this.max_high - this.max_low) * this.overview_viewport.width();
+        var left_px = ( this.low / (this.max_high - this.max_low) * this.overview_viewport.width() ) || 0;
+        var width_px = ( (this.high - this.low)/(this.max_high - this.max_low) * this.overview_viewport.width() ) || 0;
         var min_width_px = 13;
         
         this.overview_box.css({ left: left_px, width: Math.max(min_width_px, width_px) }).show();
@@ -440,6 +436,11 @@ var View = function( container, title, v
         this.high = Math.round(cur_center + new_half);
         this.redraw();
     },
+    resize_window: function() {
+        this.viewport_container.height( this.container.height() - this.nav_container.height() - 45 );
+        this.nav_container.width( this.container.width() );
+        this.redraw();
+    },
     reset_overview: function() {
         this.overview_viewport.find("canvas").remove();
         this.overview_viewport.height(this.default_overview_height);
@@ -816,8 +817,8 @@ var TiledTrack = function() {
             if ( !(low > track.view.high || high < track.view.low) ) {
                 tile_element = track.draw_tile( resolution, tile_index, parent_element, w_scale );
                 if (tile_element) {
-                    // Store initial canvas in we need to use it for overview
-                    if (!track.initial_canvas) {
+                    // Store initial canvas in case we need to use it for overview
+                    if (!track.initial_canvas && !window.G_vmlCanvasManager) {
                         track.initial_canvas = $(tile_element).clone();
                         var src_ctx = tile_element.get(0).getContext("2d");
                         var tgt_ctx = track.initial_canvas.get(0).getContext("2d");
@@ -905,7 +906,6 @@ var ReferenceTrack = function (view) {
     this.left_offset = 200;
     this.height_px = 12;
     this.container_div.addClass( "reference-track" );
-    this.dummy_canvas = $("<canvas></canvas>").get(0).getContext("2d");
     this.data_queue = {};
     this.data_cache = new Cache(CACHED_DATA);
     this.tile_cache = new Cache(CACHED_TILES_LINE);
@@ -934,10 +934,14 @@ var ReferenceTrack = function (view) {
     draw_tile: function( resolution, tile_index, parent_element, w_scale ) {
         var tile_low = tile_index * DENSITY * resolution,
             tile_length = DENSITY * resolution,
-            canvas = $("<canvas class='tile'></canvas>"),
-            ctx = canvas.get(0).getContext("2d"),
             key = resolution + "_" + tile_index;
         
+        var canvas = document.createElement("canvas");
+        if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK
+        canvas = $(canvas);
+        
+        var ctx = canvas.get(0).getContext("2d");
+        
         if (w_scale > PX_PER_CHAR) {
             if (this.data_cache.get(key) === undefined) {
                 this.get_data( resolution, tile_index );
@@ -983,8 +987,6 @@ var LineTrack = function ( name, view, d
     this.data_cache = new Cache(CACHED_DATA);
     this.tile_cache = new Cache(CACHED_TILES_LINE);
     this.prefs = { 'color': 'black', 'min_value': undefined, 'max_value': undefined, 'mode': this.mode };
-    if (prefs.min_value !== undefined) { this.prefs.min_value = prefs.min_value; }
-    if (prefs.max_value !== undefined) { this.prefs.max_value = prefs.max_value; }
 };
 $.extend( LineTrack.prototype, TiledTrack.prototype, {
     init: function() {
@@ -1056,9 +1058,12 @@ var LineTrack = function ( name, view, d
         
         var tile_low = tile_index * DENSITY * resolution,
             tile_length = DENSITY * resolution,
-            canvas = $("<canvas class='tile'></canvas>"),
             key = resolution + "_" + tile_index;
         
+        var canvas = document.createElement("canvas");
+        if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK
+        canvas = $(canvas);
+        
         if (this.data_cache.get(key) === undefined) {
             this.get_data( resolution, tile_index );
             return;
@@ -1204,9 +1209,6 @@ var FeatureTrack = function ( name, view
     this.left_offset = 200;
     
     this.prefs = { 'block_color': '#444', 'label_color': 'black', 'show_counts': true };
-    if (prefs.block_color !== undefined) { this.prefs.block_color = prefs.block_color; }
-    if (prefs.label_color !== undefined) { this.prefs.label_color = prefs.label_color; }
-    if (prefs.show_counts !== undefined) { this.prefs.show_counts = prefs.show_counts; }
 };
 $.extend( FeatureTrack.prototype, TiledTrack.prototype, {
     init: function() {
@@ -1249,7 +1251,6 @@ var FeatureTrack = function ( name, view
         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 slotted = [];
@@ -1284,7 +1285,7 @@ var FeatureTrack = function ( name, view
                 f_end = Math.ceil( (feature_end - max_low) * w_scale );
                         
             if (feature_name !== undefined && !no_detail) {
-                var text_len = dummy_canvas.measureText(feature_name).width;
+                var text_len = CONTEXT.measureText(feature_name).width;
                 if (f_start - text_len < 0) {
                     f_end += text_len;
                 } else {
@@ -1395,7 +1396,7 @@ var FeatureTrack = function ( name, view
         }
         
         var width = Math.ceil( tile_span * w_scale ),
-            new_canvas = $("<canvas class='tile'></canvas>"),
+            canvas = $("<canvas class='tile'></canvas>"),
             label_color = this.prefs.label_color,
             block_color = this.prefs.block_color,
             mode = this.mode,
@@ -1404,6 +1405,10 @@ var FeatureTrack = function ( name, view
             left_offset = this.left_offset,
             slots, required_height, y_scale;
         
+        var canvas = document.createElement("canvas");
+        if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK
+        canvas = $(canvas);
+        
         if (result.dataset_type === "summary_tree") {
             required_height = this.summary_draw_height;
         } else if (mode === "Dense") {
@@ -1417,16 +1422,16 @@ var FeatureTrack = function ( name, view
             slots = this.inc_slots[inc_scale];
         }
         
-        new_canvas.css({
+        canvas.css({
             position: "absolute",
             top: 0,
             left: ( tile_low - this.view.low ) * w_scale - left_offset
         });
-        new_canvas.get(0).width = width + left_offset;
-        new_canvas.get(0).height = required_height;
+        canvas.get(0).width = width + left_offset;
+        canvas.get(0).height = required_height;
         parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px");
         // console.log(( tile_low - this.view.low ) * w_scale, tile_index, w_scale);
-        var ctx = new_canvas.get(0).getContext("2d");
+        var ctx = canvas.get(0).getContext("2d");
         ctx.fillStyle = block_color;
         ctx.font = this.default_font;
         ctx.textAlign = "right";
@@ -1460,12 +1465,12 @@ var FeatureTrack = function ( name, view
                 }
             }
             cur_mode = "Summary";
-            parent_element.append( new_canvas );
-            return new_canvas;
+            parent_element.append( canvas );
+            return canvas;
         }
         
         if (result.message) {
-            new_canvas.css({
+            canvas.css({
                 border: "solid red",
                 "border-width": "2px 2px 2px 0px"            
             });
@@ -1488,7 +1493,7 @@ var FeatureTrack = function ( name, view
                 }
         }
         if ( filterable ) {
-            new_canvas.addClass(FILTERABLE_CLASS);
+            canvas.addClass(FILTERABLE_CLASS);
         }
         
         // Draw data points.
@@ -1680,7 +1685,7 @@ var FeatureTrack = function ( name, view
                 j++;
             }
         }
-        return new_canvas;
+        return canvas;
     }, gen_options: function(track_id) {
         var container = $("<div />").addClass("form-row");
 

--- a/templates/grid_common.mako
+++ b/templates/grid_common.mako
@@ -64,7 +64,7 @@
                     <span class="search-box"><% value = iff( column.filterable == "standard", column.label.lower(), "") %><input class="search-box-input" id="input-${column.key}-filter" name="f-${column.key}" type="text" value="${value}" size="15"/>
-                        <button class="submit-image" type="submit" title='Search'/>
+                        <button class="submit-image" type="submit" title='Search'><span style="display: none;"></button></span></form>
             %else:

--- a/templates/tracks/browser.mako
+++ b/templates/tracks/browser.mako
@@ -62,6 +62,11 @@
 
 <%def name="javascripts()">
 ${parent.javascripts()}
+
+<!--[if lt IE 9]>
+  <script type='text/javascript' src="${h.url_for('/static/scripts/excanvas.js')}"></script>
+<![endif]-->
+
 ${h.js( "galaxy.base", "galaxy.panels", "json2", "jquery", "jquery.event.drag", "jquery.autocomplete", "trackster", "jquery.ui.sortable.slider" )}
 
 <script type="text/javascript">
@@ -103,22 +108,6 @@
                 }
             });
         %endif
-		
-		$(document).bind( "redraw", function() {
-			view.redraw();
-        });
-
-        // To adjust the size of the viewport to fit the fixed-height footer
-        var refresh = function() {
-            if (view !== undefined) {
-                view.viewport_container.height( $("#center").height() - $(".nav-container").height() - 40 );
-                view.nav_container.width( $("#center").width() );
-                view.redraw();
-            }
-        };
-        $(window).bind( "resize", function() { refresh(); } );
-        $("#right-border").bind( "click dragend", function() { refresh(); } );
-        $(window).trigger( "resize" );
         
         // Execute initializer for EDITOR specific javascript
         function init() {
@@ -227,47 +216,6 @@
                     error: function() { alert("Could not save visualization"); }
                 });
             });
-            
-            function sidebar_box(track) {
-                if (!track.hidden) {
-                    var track_id = track.track_id,
-                        label = $('<label for="track_' + track_id + 'title">' + track.name + '</label>'),
-                        title = $('<div class="historyItemTitle"></div>'),
-                        icon_div = $('<div class="historyItemButtons"></div>');
-                        del_icon = $('<a href="#" class="icon-button delete" />'),
-                        edit_icon = $('<a href="#" class="icon-button edit" />'),
-                        body = $('<div class="historyItemBody"></div>'),
-                        li = $('<li class="sortable"></li>').attr("id", "track_" + track_id + "_li"),
-                        div = $('<div class="historyItemContainer historyItem"></div>'),
-                        editable = $('<div style="display:none"></div>').attr("id", "track_" + track_id + "_editable");
-                    
-                    edit_icon.bind("click", function() {
-                        $("#track_" + track_id + "_editable").toggle();
-                    });
-                    del_icon.bind("click", function() {
-                        $("#track_" + track_id + "_li").fadeOut('slow', function() { $("#track_" + track_id + "_li").remove(); });
-                        view.remove_track(track);
-                        if (view.num_tracks === 0) {
-                            $("#no-tracks").show();
-                        }
-                    });
-                    icon_div.append(edit_icon).append(del_icon);
-                    title.append(label).prepend(icon_div);
-                    if (track.gen_options) {
-                        editable.append(track.gen_options(track_id)).appendTo(body);
-                    }
-                    div.append(title).append(body).appendTo(li);
-                    $("ul#sortable-ul").append(li);
-                }
-            };
-            
-            // Populate sort/move ul
-            for (var track_id in view.tracks) {
-                var track = view.tracks[track_id];
-                sidebar_box(track);
-            }
-            
-            $(window).trigger("resize");
         };
         
     });

--- a/templates/visualization/display.mako
+++ b/templates/visualization/display.mako
@@ -3,23 +3,12 @@
 <%def name="javascripts()"><% config = item_data %>
     ${parent.javascripts()}
-    ${h.js( "jquery.event.drag", "jquery.autocomplete", "jquery.mousewheel", "trackster" )}
     
-    <script type="text/javascript">
-        var view;
-        // To adjust the size of the viewport to fit the fixed-height footer
-        var refresh = function( e ) {
-            if (view !== undefined) {
-                view.viewport_container.height( $("#center").height() - $(".nav-container").height() - 40 );
-                view.nav_container.width( $("#center").width() );
-                view.redraw();
-            }
-        };
-        $(window).bind( "resize", function(e) { refresh(e); } );
-        $("#right-border").bind( "click dragend", function(e) { refresh(e); } );
-        $(window).trigger( "resize" );
-    </script>
+    <!--[if lt IE 9]>
+      <script type='text/javascript' src="${h.url_for('/static/scripts/excanvas.js')}"></script>
+    <![endif]-->
     
+    ${h.js( "jquery.event.drag", "jquery.autocomplete", "trackster" )}
 </%def><%def name="stylesheets()">
@@ -55,16 +44,21 @@
         var data_url = "${h.url_for( controller='/tracks', action='data' )}",
             reference_url = "${h.url_for( controller='/tracks', action='reference' )}",
             chrom_url = "${h.url_for( controller='/tracks', action='chroms' )}",
-            view;
-
-        var container_element = $("#${visualization.id}");
-        view = new View( container_element, "${config.get('chrom')}", "${config.get('title') | h}", "${config.get('vis_id')}", "${config.get('dbkey')}" );
+            view,
+            container_element = $("#${visualization.id}");
+            
+        if (container_element.parents(".item-content").length > 0) { // Embedded viz
+            container_element.parents(".item-content").css( { "max-height": "none", "overflow": "visible" } );
+        } else { // Viewing just one shared viz
+            container_element = $("#center");
+            $("#right-border").live("click", function() { view.resize_window(); });
+        }
+        view = new View( container_element, "${config.get('title') | h}", "${config.get('vis_id')}", "${config.get('dbkey')}" );
         %for track in config.get('tracks'):
             view.add_track(
                 new ${track["track_type"]}( "${track['name'] | h}", view, ${track['dataset_id']}, ${track['prefs']} )
             );
         %endfor
-        container_element.parents(".item-content").css( { "max-height": "none", "overflow": "visible" } );
 
     </script></%def>

    

[galaxy-commits] galaxy-dist commit 9e27a8ad881d: trackster: Fix shared visualizations

commits-noreply＠bitbucket.org