From 0fbab45d145766da0e86a2bc3b4cf110529a56c2 Mon Sep 17 00:00:00 2001 From: Kanwei Li Date: Thu, 23 Sep 2010 20:00:58 -0400 Subject: [PATCH] trackster: Inline editing of configuration and removing of tracks, obsoleting the right editing panel. Improved appearance of overview box by adding a background for the scroll bar, and having a sliding window to indicate region shown. Added id numbers in front of API results for upcoming interactive script. --- scripts/api/common.py | 12 +++++--- static/june_2007_style/blue/tool_menu.css | 2 +- static/june_2007_style/blue/trackster.css | 4 ++- static/june_2007_style/trackster.css.tmpl | 18 +++++++++++ static/scripts/packed/trackster.js | 2 +- static/scripts/trackster.js | 37 +++++++++++++++++------ templates/tracks/browser.mako | 2 +- 7 files changed, 60 insertions(+), 17 deletions(-) diff --git a/scripts/api/common.py b/scripts/api/common.py index 5a83bf5d643..227787cb289 100644 --- a/scripts/api/common.py +++ b/scripts/api/common.py @@ -24,7 +24,11 @@ def make_url( api_key, url, args=None ): def get( api_key, url ): # Do the actual GET. url = make_url( api_key, url ) - return simplejson.loads( urllib2.urlopen( url ).read() ) + try: + return simplejson.loads( urllib2.urlopen( url ).read() ) + except simplejson.decoder.JSONDecodeError, e: + print "URL did not return JSON data" + sys.exit(1) def post( api_key, url, data ): # Do the actual POST. @@ -47,14 +51,14 @@ def display( api_key, url ): # Response is a collection as defined in the REST style. print 'Collection Members' print '------------------' - for i in r: + for n, i in enumerate(r): # All collection members should have a name and url in the response. - print i.pop( 'url' ) + print '#%d: %s' % (n+1, i.pop( 'url' ) ) print ' name: %s' % i.pop( 'name' ) for k, v in i.items(): print ' %s: %s' % ( k, v ) print '' - print '%d elements in collection' % len( r ) + print '%d element(s) in collection' % len( r ) elif type( r ) == dict: # Response is an element as defined in the REST style. print 'Member Information' diff --git a/static/june_2007_style/blue/tool_menu.css b/static/june_2007_style/blue/tool_menu.css index 123046d5964..457777e42c3 100644 --- a/static/june_2007_style/blue/tool_menu.css +++ b/static/june_2007_style/blue/tool_menu.css @@ -6,4 +6,4 @@ div.toolSectionTitle{font-weight:bold;} div.toolPanelLabel{padding-top:10px;padding-bottom:5px;font-weight:bold;color:gray;text-transform:uppercase;} div.toolTitle{padding-top:5px;padding-bottom:5px;margin-left:16px;margin-right:10px;display:list-item;list-style:square outside;} div.toolSectionBody div.toolPanelLabel{padding-top:5px;padding-bottom:5px;margin-left:16px;margin-right:10px;display:list-item;list-style:none outside;} -div.toolTitleNoSection{padding-bottom:0px;font-weight: bold;} +div.toolTitleNoSection{padding-bottom:0px;font-weight:bold;} diff --git a/static/june_2007_style/blue/trackster.css b/static/june_2007_style/blue/trackster.css index f4a3c4aa25c..b2a53a6225c 100644 --- a/static/june_2007_style/blue/trackster.css +++ b/static/june_2007_style/blue/trackster.css @@ -9,7 +9,9 @@ .intro{position:absolute;top:50%;left:30%;color:#555;font-size:16px;} .overview{width:100%;margin:0px;color:white;} .overview-viewport{position:relative;height:14px;background:white;border-bottom:solid gray 1px;margin:0;} -.overview-box{opacity:0.5;z-index:100;position:absolute;margin-top:0px;height:14px;background:#cfc url(../images/visualization/draggable_horizontal.png) center center no-repeat;border-style:solid;border-color:#6a6;border-width:0px 2px;} +.overview-highlight{opacity:0.5;top:0px;position:absolute;z-index:100;border-style:solid;border-color:#6a6;border-width:0px 1px;} +.overview-boxback{width:100%;bottom:0px;z-index:50;position:absolute;height:14px;background:#F8F8F8;} +.overview-box{opacity:0.5;bottom:0px;z-index:100;position:absolute;margin-top:0px;height:14px;background:#cfc url(../images/visualization/draggable_horizontal.png) center center no-repeat;border-style:solid;border-color:#6a6;border-width:0px 2px;} .viewport-canvas{width:100%;height:100px;} .yaxislabel{color:#777;} .line-track .track-content{border-top:1px solid #ddd;border-bottom:1px solid #ddd;} diff --git a/static/june_2007_style/trackster.css.tmpl b/static/june_2007_style/trackster.css.tmpl index ef84f4dca06..c347b186714 100644 --- a/static/june_2007_style/trackster.css.tmpl +++ b/static/june_2007_style/trackster.css.tmpl @@ -55,8 +55,26 @@ border-bottom: solid gray 1px; margin: 0; } +.overview-highlight { + opacity: 0.5; + top: 0px; + position: absolute; + z-index: 100; + border-style: solid; + border-color: #6a6; + border-width: 0px 1px; +} +.overview-boxback { + width: 100%; + bottom: 0px; + z-index: 50; + position: absolute; + height: 14px; + background: #F8F8F8; +} .overview-box { opacity: 0.5; + bottom: 0px; z-index: 100; position: absolute; margin-top: 0px; diff --git a/static/scripts/packed/trackster.js b/static/scripts/packed/trackster.js index c8f8fb4f534..ec626397060 100644 --- a/static/scripts/packed/trackster.js +++ b/static/scripts/packed/trackster.js @@ -1 +1 @@ -var DENSITY=200,FEATURE_LEVELS=10,MAX_FEATURE_DEPTH=100,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...",CACHED_TILES_FEATURE=10,CACHED_TILES_LINE=30,CACHED_DATA=5,CONTEXT=$("").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/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,c,e,d,b){this.container=a;this.vis_id=d;this.dbkey=b;this.title=e;this.chrom=c;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=$("
").addClass("top-labeltrack").appendTo(c);this.content_div=$("
").addClass("content").css("position","relative").hide().appendTo(c);this.intro_div=$("
").addClass("intro").text("Select a chrom from the dropdown below").hide().appendTo(c);this.viewport_container=$("
").addClass("viewport-container").addClass("viewport-container").appendTo(this.content_div);this.nav_container=$("
").addClass("nav-container").appendTo(c);this.nav_labeltrack=$("
").addClass("nav-labeltrack").appendTo(this.nav_container);this.nav=$("
").addClass("nav").appendTo(this.nav_container);this.overview=$("
").addClass("overview").appendTo(this.nav);this.overview_viewport=$("
").addClass("overview-viewport").appendTo(this.overview);this.overview_box=$("
").addClass("overview-box").appendTo(this.overview_viewport);this.default_overview_height=this.overview_box.height();this.nav_controls=$("
").addClass("nav-controls").appendTo(this.nav);this.chrom_form=$("
").attr("action",function(){void (0)}).appendTo(this.nav_controls);this.chrom_select=$("").addClass("nav-input").hide().bind("keypress focusout",b).appendTo(this.chrom_form);this.location_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.focus()});if(this.vis_id!==undefined){this.hidden_input=$("").attr("type","hidden").val(this.vis_id).appendTo(this.chrom_form)}this.zo_link=$("").click(function(){a.zoom_out();a.redraw()}).html('').appendTo(this.chrom_form);this.zi_link=$("").click(function(){a.zoom_in();a.redraw()}).html('').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='';for(i in a.chrom_data){var e=a.chrom_data[i]["chrom"];f+='"}a.chrom_select.html(f);a.intro_div.show();a.content_div.hide();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.viewport_container.bind("dragstart",function(d){this.original_low=a.low;this.current_height=d.clientY;this.current_x=d.offsetX;this.active=(d.clientX").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();c.content_div.hide()}else{c.intro_div.hide();c.content_div.show()}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.overview_viewport.find("canvas").remove();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-ca.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).remove()});delete this.tracks[this.tracks.indexOf(a)];this.num_tracks-=1},update_options:function(){this.has_changes=true;var b=$("ul#sortable-ul").sortable("toArray");for(var c in b){var e=b[c].split("_li")[0].split("track_")[1];this.viewport_container.append($("#track_"+e))}for(var d in view.tracks){var a=view.tracks[d];if(a&&a.update_options){a.update_options(d)}}},reset:function(){this.low=this.max_low;this.high=this.max_high;this.viewport_container.find(".yaxislabel").remove()},redraw:function(f){var d=this.high-this.low,b=this.low,e=this.high;if(bthis.max_high){e=this.max_high}if(this.high!==0&&d").addClass("track");if(!this.hidden){this.header_div=$("
").appendTo(this.container_div);this.name_div=$("
").appendTo(this.header_div);this.name_div.text(this.name)}this.content_div=$("
").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=$("").attr("id",f+"_error");e.text("Click to view error");$("#"+f+"_error").live("click",function(){show_modal("Trackster Error","
"+d.message+"
",{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=$("
").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 track 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}}};make_popupmenu(d.name_div,b)};$.extend(TiledTrack.prototype,Track.prototype,{draw:function(){var j=this.view.low,e=this.view.high,f=e-j,d=this.view.resolution;var l=$("
"),m=this.content_div.width()/f,h;this.content_div.children(":first").remove();this.content_div.append(l),this.max_height=0;var a=Math.floor(j/d/DENSITY);while((a*DENSITY*d)c.view.high||f
");while(a"+commatize(a)+"
").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.height_px=12;this.container_div.addClass("reference-track");this.dummy_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,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,k,o){var g=b*DENSITY*f,d=DENSITY*f,e=$(""),n=e.get(0).getContext("2d"),j=f+"_"+b;if(o>PX_PER_CHAR){if(this.data_cache.get(j)===undefined){this.get_data(f,b);return}var m=this.data_cache.get(j);if(m===null){this.content_div.css("height","0px");return}e.get(0).width=Math.ceil(d*o+this.left_offset);e.get(0).height=this.height_px;e.css({position:"absolute",top:0,left:(g-this.view.low)*o-this.left_offset});for(var h=0,l=m.length;h").addClass("yaxislabel").attr("id","linetrack_"+b+"_minval").text(round_1000(a.prefs.min_value));var d=$("
").addClass("yaxislabel").attr("id","linetrack_"+b+"_maxval").text(round_1000(a.prefs.max_value));d.css({position:"relative",top:"32px",left:"10px"});d.prependTo(a.container_div);e.css({position:"relative",top:a.height_px+32+"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,r,c,e){if(this.vertical_range===undefined){return}var s=r*DENSITY*p,a=DENSITY*p,b=$(""),v=p+"_"+r;if(this.data_cache.get(v)===undefined){this.get_data(p,r);return}var j=this.data_cache.get(v);if(j===null){return}b.css({position:"absolute",top:0,left:(s-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,t=this.total_frequency,d=this.height_px,m=this.mode;o.beginPath();if(data.length>1){var f=Math.ceil((data[1][0]-data[0][0])*e)}else{var f=10}var u,h;for(var q=0;q=g){h=g}}h=255-Math.floor((h-l)/n*255);o.fillStyle="rgb("+h+","+h+","+h+")";o.fillRect(u,0,f,this.height_px)}else{if(h===null){if(k&&m==="Filled"){o.lineTo(u,d)}k=false;continue}else{if(h<=l){h=l}else{if(h>=g){h=g}}h=Math.round(d-(h-l)/n*d);if(k){o.lineTo(u,h)}else{k=true;if(m==="Filled"){o.moveTo(u,d);o.lineTo(u,h)}else{o.moveTo(u,h)}}}}}if(m==="Filled"){if(k){o.lineTo(u,d)}o.fill()}else{o.stroke()}c.append(b);return b},gen_options:function(k){var a=$("
").addClass("form-row");var e="track_"+k+"_minval",h=$("").attr("for",e).text("Min value:"),b=(this.prefs.min_value===undefined?"":this.prefs.min_value),j=$("").attr("id",e).val(b),g="track_"+k+"_maxval",d=$("").attr("for",g).text("Max value:"),f=(this.prefs.max_value===undefined?"":this.prefs.max_value),c=$("").attr("id",g).val(f);return a.append(h).append(j).append(d).append(c)},update_options:function(c){var a=$("#track_"+c+"_minval").val(),b=$("#track_"+c+"_maxval").val();if(a!==this.prefs.min_value||b!==this.prefs.max_value){this.prefs.min_value=parseFloat(a);this.prefs.max_value=parseFloat(b);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,c){this.track_type="FeatureTrack";this.display_modes=["Auto","Dense","Squish","Pack"];Track.call(this,d,b,b.viewport_container);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=20;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:"black",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=$("").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;wy[0]&&ePX_PER_CHAR){n.fillStyle=this.prefs.block_color;n.fillRect(k,h+1,e,9);n.fillStyle="#eee";for(var g=0,l=d.length;g=f&&b+g<=m){var a=Math.floor(Math.max(0,(b+g-f)*o));n.fillText(d[g],a+this.left_offset+j,h+9)}}}else{n.fillStyle=this.prefs.block_color;n.fillRect(k,h+4,e,3)}},draw_tile:function(aa,l,o,an){var H=l*DENSITY*aa,ag=(l+1)*DENSITY*aa,G=ag-H;var ah=(!this.initial_canvas?"initial":H+"_"+ag);var C=this.data_cache.get(ah);var d;if(C===undefined||(this.mode!=="Auto"&&C.dataset_type==="summary_tree")){this.data_queue[[H,ag]]=true;this.get_data(H,ag);return}var a=Math.ceil(G*an),O=$(""),ac=this.prefs.label_color,g=this.prefs.block_color,n=this.mode,r=25,Y=(n==="Squish")||(n==="Dense")&&(n!=="Pack")||(n==="Auto"&&(C.extra_info==="no_detail")),S=this.left_offset,am,v,ao;if(C.dataset_type==="summary_tree"){v=this.summary_draw_height}else{if(n==="Dense"){v=r;ao=10}else{ao=(Y?this.vertical_nodetail_px:this.vertical_detail_px);var s=(an<0.0001?1/view.zoom_res:an);v=this.incremental_slots(s,C.data,Y,n)*ao+r;am=this.inc_slots[s]}}O.css({position:"absolute",top:0,left:(H-this.view.low)*an-S});O.get(0).width=a+S;O.get(0).height=v;o.parent().css("height",Math.max(this.height_px,v)+"px");var D=O.get(0).getContext("2d");D.fillStyle=g;D.font=this.default_font;D.textAlign="right";if(C.dataset_type=="summary_tree"){var N,K=55,af=255-K,h=af*2/3,U=C.data,F=C.max,m=C.avg,b=Math.ceil(C.delta*an);for(var aj=0,B=U.length;ajh){D.fillStyle="black"}else{D.fillStyle="#ddd"}D.textAlign="center";D.fillText(V,W+S+(b/2),12)}}d="Summary";o.append(O);return O}if(C.message){O.css({border:"solid red","border-width":"2px 2px 2px 0px"});D.fillStyle="red";D.textAlign="left";D.fillText(C.message,100+S,ao)}var al=C.data;var ai=0;for(var aj=0,B=al.length;aj=H){var Z=Math.floor(Math.max(0,(ak-H)*an)),E=Math.ceil(Math.min(a,Math.max(0,(X-H)*an))),T=(n==="Dense"?1:(1+am[M]))*ao;if(C.dataset_type==="bai"){D.fillStyle=g;if(P[4] instanceof Array){var w=Math.floor(Math.max(0,(P[4][0]-H)*an)),L=Math.ceil(Math.min(a,Math.max(0,(P[4][1]-H)*an))),u=Math.floor(Math.max(0,(P[5][0]-H)*an)),q=Math.ceil(Math.min(a,Math.max(0,(P[5][1]-H)*an)));if(P[4][1]>=H&&P[4][0]<=ag){this.rect_or_text(D,an,H,ag,P[4][0],P[4][2],w+S,L-w,T)}if(P[5][1]>=H&&P[5][0]<=ag){this.rect_or_text(D,an,H,ag,P[5][0],P[5][2],u+S,q-u,T)}if(u>L){D.fillStyle="#999";D.fillRect(L+S,T+5,u-L,1)}}else{D.fillStyle=g;this.rect_or_text(D,an,H,ag,ak,I,Z+S,E-Z,T)}if(n!=="Dense"&&!Y&&ak>H){D.fillStyle=this.prefs.label_color;if(l===0&&Z-D.measureText(I).width<0){D.textAlign="left";D.fillText(M,E+2+S,T+8)}else{D.textAlign="right";D.fillText(M,Z-2+S,T+8)}D.fillStyle=g}}else{if(C.dataset_type==="interval_index"){if(Y){D.fillStyle=g;D.fillRect(Z+S,T+5,E-Z,1)}else{var A=P[4],R=P[5],ab=P[6],f=P[7];var z,ad,J=null,ap=null;if(R&&ab){J=Math.floor(Math.max(0,(R-H)*an));ap=Math.ceil(Math.min(a,Math.max(0,(ab-H)*an)))}if(n!=="Dense"&&I!==undefined&&ak>H){D.fillStyle=ac;if(l===0&&Z-D.measureText(I).width<0){D.textAlign="left";D.fillText(I,E+2+S,T+8)}else{D.textAlign="right";D.fillText(I,Z-2+S,T+8)}D.fillStyle=g}if(f){if(A){if(A=="+"){D.fillStyle=RIGHT_STRAND}else{if(A=="-"){D.fillStyle=LEFT_STRAND}}D.fillRect(Z+S,T,E-Z,10);D.fillStyle=g}for(var ah=0,e=f.length;ahQ){continue}z=5;ad=3;D.fillRect(c+S,T+ad,Q-c,z);if(J!==undefined&&!(c>ap||Q").addClass("form-row");var e="track_"+j+"_block_color",l=$("