commit/galaxy-central: jeremy goecks: (1) Update Backbone Config objects and (2) add config options to Circster.
1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/b2206f4ca10f/ Changeset: b2206f4ca10f User: jeremy goecks Date: 2014-02-06 21:41:05 Summary: (1) Update Backbone Config objects and (2) add config options to Circster. Affected #: 4 files diff -r c6eac0859bf917c176ec5995bff92a25841a9420 -r b2206f4ca10f8cec7c37f43f80fc24f0b93b420b static/scripts/packed/utils/config.js --- a/static/scripts/packed/utils/config.js +++ b/static/scripts/packed/utils/config.js @@ -1,1 +1,1 @@ -define(["libs/underscore","viz/trackster/util"],function(b,e){var c=Backbone.Model.extend({initialize:function(f){var g=this.get("key");this.set("id",g);var h=b.find(c.known_settings_defaults,function(i){return i.key===g});if(h){this.set(b.extend({},h,f))}if(this.get("type")==="color"&&!this.get("value")){this.set("value",e.get_random_color())}this.on("change:value",this.cast_value,this)},cast_value:function(){var f=this.get("type"),g=this.get("value");if(f==="float"){g=parseFloat(g)}else{if(f==="int"){g=parseInt(g,10)}}this.set("value")}},{known_settings_defaults:[{key:"name",label:"Name",type:"text",default_value:""},{key:"color",label:"Color",type:"color",default_value:null},{key:"min_value",label:"Min Value",type:"float",default_value:null},{key:"max_value",label:"Max Value",type:"float",default_value:null},{key:"mode",type:"string",default_value:this.mode,hidden:true},{key:"height",type:"int",default_value:32,hidden:true},{key:"pos_color",label:"Positive Color",type:"color",default_value:"#FF8C00"},{key:"neg_color",label:"Negative Color",type:"color",default_value:"#4169E1"},{key:"block_color",label:"Block color",type:"color",default_value:null},{key:"label_color",label:"Label color",type:"color",default_value:"black"},{key:"show_insertions",label:"Show insertions",type:"bool",default_value:false},{key:"show_counts",label:"Show summary counts",type:"bool",default_value:true},{key:"mode",type:"string",default_value:this.mode,hidden:true},{key:"reverse_strand_color",label:"Antisense strand color",type:"color",default_value:null},{key:"show_differences",label:"Show differences only",type:"bool",default_value:true},{key:"mode",type:"string",default_value:this.mode,hidden:true}]});var d=Backbone.Collection.extend({model:c,to_key_value_dict:function(){var f={};this.each(function(g){f[g.get("key")]=g.get("value")});return f},get_value:function(f){var g=this.get(f);if(g){return g.get("value")}return undefined}},{from_config_dict:function(g){var f=b.map(b.keys(g),function(h){return{key:h,value:g[h]}});return new d(f)}});var a=Backbone.View.extend({className:"config-settings-view",render:function(){var i=this.model;var f=this.$el;var h;function g(n,j){for(var r=0;r<n.length;r++){h=n[r];if(h.hidden){continue}var l="param_"+r;var v=i.values[h.key];var x=$("<div class='form-row' />").appendTo(j);x.append($("<label />").attr("for",l).text(h.label+":"));if(type==="bool"){x.append($('<input type="checkbox" />').attr("id",l).attr("name",l).attr("checked",v))}else{if(type==="text"){x.append($('<input type="text"/>').attr("id",l).val(v).click(function(){$(this).select()}))}else{if(type==="select"){var t=$("<select />").attr("id",l);for(var p=0;p<h.options.length;p++){$("<option/>").text(h.options[p].label).attr("value",h.options[p].value).appendTo(t)}t.val(v);x.append(t)}else{if(type==="color"){var w=$("<div/>").appendTo(x),s=$("<input />").attr("id",l).attr("name",l).val(v).css("float","left").appendTo(w).click(function(z){$(".tooltip").removeClass("in");var y=$(this).siblings(".tooltip").addClass("in");y.css({left:$(this).position().left+$(this).width()+5,top:$(this).position().top-($(y).height()/2)+($(this).height()/2)}).show();y.click(function(A){A.stopPropagation()});$(document).bind("click.color-picker",function(){y.hide();$(document).unbind("click.color-picker")});z.stopPropagation()}),q=$("<a href='javascript:void(0)'/>").addClass("icon-button arrow-circle").appendTo(w).attr("title","Set new random color").tooltip(),u=$("<div class='tooltip right' style='position: absolute;' />").appendTo(w).hide(),m=$("<div class='tooltip-inner' style='text-align: inherit'></div>").appendTo(u),k=$("<div class='tooltip-arrow'></div>").appendTo(u),o=$.farbtastic(m,{width:100,height:100,callback:s,color:v});w.append($("<div/>").css("clear","both"));(function(y){q.click(function(){y.setColor(e.get_random_color())})})(o)}else{x.append($("<input />").attr("id",l).attr("name",l).val(v))}}}}if(h.help){x.append($("<div class='help'/>").text(h.help))}}}g(this.params,f);return this},render_in_modal:function(){var h=function(){hide_modal();$(window).unbind("keypress.check_enter_esc")},f=function(){this.update_from_form();hide_modal();$(window).unbind("keypress.check_enter_esc")},g=function(i){if((i.keyCode||i.which)===27){h()}else{if((i.keyCode||i.which)===13){f()}}};$(window).bind("keypress.check_enter_esc",g);if(this.$el.children().length===0){this.render()}Galaxy.modal.show({title:"Configure",body:drawable.config.build_form(),buttons:{Cancel:h,OK:f}})},update_from_form:function(){var f=this;this.collection.each(function(h,g){if(!h.get("hidden")){var j="param_"+g;var i=f.$el.find("#"+j).val();if(type==="bool"){i=container.find("#"+j).is(":checked")}h.set("value",i)}})}});return{ConfigSettingCollection:d,ConfigSettingCollectionView:a}}); \ No newline at end of file +define(["libs/underscore","viz/trackster/util","utils/config"],function(c,f,b){var d=Backbone.Model.extend({initialize:function(g){var h=this.get("key");this.set("id",h);var i=c.find(d.known_settings_defaults,function(j){return j.key===h});if(i){this.set(c.extend({},i,g))}if(this.get("type")==="color"&&!this.get("value")){this.set("value",f.get_random_color())}},set_value:function(h){var g=this.get("type");if(g==="float"){h=parseFloat(h)}else{if(g==="int"){h=parseInt(h,10)}}this.set("value",h)}},{known_settings_defaults:[{key:"name",label:"Name",type:"text",default_value:""},{key:"color",label:"Color",type:"color",default_value:null},{key:"min_value",label:"Min Value",type:"float",default_value:null},{key:"max_value",label:"Max Value",type:"float",default_value:null},{key:"mode",type:"string",default_value:this.mode,hidden:true},{key:"height",type:"int",default_value:32,hidden:true},{key:"pos_color",label:"Positive Color",type:"color",default_value:"#FF8C00"},{key:"neg_color",label:"Negative Color",type:"color",default_value:"#4169E1"},{key:"block_color",label:"Block color",type:"color",default_value:null},{key:"label_color",label:"Label color",type:"color",default_value:"black"},{key:"show_insertions",label:"Show insertions",type:"bool",default_value:false},{key:"show_counts",label:"Show summary counts",type:"bool",default_value:true},{key:"mode",type:"string",default_value:this.mode,hidden:true},{key:"reverse_strand_color",label:"Antisense strand color",type:"color",default_value:null},{key:"show_differences",label:"Show differences only",type:"bool",default_value:true},{key:"mode",type:"string",default_value:this.mode,hidden:true}]});var e=Backbone.Collection.extend({model:d,to_key_value_dict:function(){var g={};this.each(function(h){g[h.get("key")]=h.get("value")});return g},get_value:function(g){var h=this.get(g);if(h){return h.get("value")}return undefined}},{from_config_dict:function(h){var g=c.map(c.keys(h),function(i){return{key:i,value:h[i]}});return new e(g)}});var a=Backbone.View.extend({className:"config-settings-view",render:function(){var g=this.$el;this.collection.each(function(k,p){if(k.get("hidden")){return}var j="param_"+p,q=k.get("type"),u=k.get("value");var w=$("<div class='form-row' />").appendTo(g);w.append($("<label />").attr("for",j).text(k.get("label")+":"));if(q==="bool"){w.append($('<input type="checkbox" />').attr("id",j).attr("name",j).attr("checked",u))}else{if(q==="text"){w.append($('<input type="text"/>').attr("id",j).val(u).click(function(){$(this).select()}))}else{if(q==="select"){var s=$("<select />").attr("id",j);for(var n=0;n<k.options.length;n++){$("<option/>").text(k.options[n].label).attr("value",k.options[n].value).appendTo(s)}s.val(u);w.append(s)}else{if(q==="color"){var v=$("<div/>").appendTo(w),r=$("<input />").attr("id",j).attr("name",j).val(u).css("float","left").appendTo(v).click(function(x){$(".tooltip").removeClass("in");var i=$(this).siblings(".tooltip").addClass("in");i.css({left:$(this).position().left+$(this).width()+5,top:$(this).position().top-($(i).height()/2)+($(this).height()/2)}).show();i.click(function(y){y.stopPropagation()});$(document).bind("click.color-picker",function(){i.hide();$(document).unbind("click.color-picker")});x.stopPropagation()}),o=$("<a href='javascript:void(0)'/>").addClass("icon-button arrow-circle").appendTo(v).attr("title","Set new random color").tooltip(),t=$("<div class='tooltip right' style='position: absolute;' />").appendTo(v).hide(),l=$("<div class='tooltip-inner' style='text-align: inherit'></div>").appendTo(t),h=$("<div class='tooltip-arrow'></div>").appendTo(t),m=$.farbtastic(l,{width:100,height:100,callback:r,color:u});v.append($("<div/>").css("clear","both"));(function(i){o.click(function(){i.setColor(f.get_random_color())})})(m)}else{w.append($("<input />").attr("id",j).attr("name",j).val(u))}}}}if(k.help){w.append($("<div class='help'/>").text(k.help))}});return this},render_in_modal:function(k){var g=this,j=function(){Galaxy.modal.hide();$(window).unbind("keypress.check_enter_esc")},h=function(){g.update_from_form();Galaxy.modal.hide();$(window).unbind("keypress.check_enter_esc")},i=function(l){if((l.keyCode||l.which)===27){j()}else{if((l.keyCode||l.which)===13){h()}}};$(window).bind("keypress.check_enter_esc",i);if(this.$el.children().length===0){this.render()}Galaxy.modal.show({title:k||"Configure",body:this.$el,buttons:{Cancel:j,OK:h}})},update_from_form:function(){var g=this;this.collection.each(function(i,h){if(!i.get("hidden")){var k="param_"+h;var j=g.$el.find("#"+k).val();if(i.get("type")==="bool"){j=container.find("#"+k).is(":checked")}i.set_value(j)}})}});return{ConfigSettingCollection:e,ConfigSettingCollectionView:a}}); \ No newline at end of file diff -r c6eac0859bf917c176ec5995bff92a25841a9420 -r b2206f4ca10f8cec7c37f43f80fc24f0b93b420b static/scripts/packed/viz/circster.js --- a/static/scripts/packed/viz/circster.js +++ b/static/scripts/packed/viz/circster.js @@ -1,1 +1,1 @@ -define(["utils/utils","libs/underscore","libs/d3","viz/visualization"],function(g,h,m,j){g.cssLoadFile("static/style/circster.css");var n=Backbone.Model.extend({is_visible:function(r,o){var p=r.getBoundingClientRect(),q=$("svg")[0].getBoundingClientRect();if(p.right<0||p.left>q.right||p.bottom<0||p.top>q.bottom){return false}return true}});var i={drawTicks:function(s,r,w,q,o){var v=s.append("g").selectAll("g").data(r).enter().append("g").selectAll("g").data(w).enter().append("g").attr("class","tick").attr("transform",function(x){return"rotate("+(x.angle*180/Math.PI-90)+")translate("+x.radius+",0)"});var u=[],t=[],p=function(x){return x.angle>Math.PI?"end":null};if(o){u=[0,0,0,-4];t=[4,0,"",".35em"];p=null}else{u=[1,0,4,0];t=[0,4,".35em",""]}v.append("line").attr("x1",u[0]).attr("y1",u[1]).attr("x2",u[2]).attr("y1",u[3]).style("stroke","#000");v.append("text").attr("x",t[0]).attr("y",t[1]).attr("dx",t[2]).attr("dy",t[3]).attr("text-anchor",p).attr("transform",q).text(function(x){return x.label})},formatNum:function(p,o){if(o===undefined){o=2}if(p===null){return null}var r=null;if(p<1){r=p.toPrecision(o)}else{var q=Math.round(p.toPrecision(o));if(p<1000){r=q}else{if(p<1000000){r=Math.round((q/1000).toPrecision(3)).toFixed(0)+"K"}else{if(p<1000000000){r=Math.round((q/1000000).toPrecision(3)).toFixed(0)+"M"}}}}return r}};var c=Backbone.Model.extend({});var a=Backbone.View.extend({className:"circster",initialize:function(o){this.total_gap=o.total_gap;this.genome=o.genome;this.dataset_arc_height=o.dataset_arc_height;this.track_gap=10;this.label_arc_height=50;this.scale=1;this.circular_views=null;this.chords_views=null;this.model.get("drawables").on("add",this.add_track,this);this.model.get("drawables").on("remove",this.remove_track,this);this.get_circular_tracks()},get_circular_tracks:function(){return this.model.get("drawables").filter(function(o){return o.get("track_type")!=="DiagonalHeatmapTrack"})},get_chord_tracks:function(){return this.model.get("drawables").filter(function(o){return o.get("track_type")==="DiagonalHeatmapTrack"})},get_tracks_bounds:function(){var p=this.get_circular_tracks();dataset_arc_height=this.dataset_arc_height,min_dimension=Math.min(this.$el.width(),this.$el.height()),radius_start=min_dimension/2-p.length*(this.dataset_arc_height+this.track_gap)-(this.label_arc_height+this.track_gap),tracks_start_radii=m.range(radius_start,min_dimension/2,this.dataset_arc_height+this.track_gap);var o=this;return h.map(tracks_start_radii,function(q){return[q,q+o.dataset_arc_height]})},render:function(){var x=this,r=this.dataset_arc_height,o=x.$el.width(),w=x.$el.height(),t=this.get_circular_tracks(),q=this.get_chord_tracks(),s=this.get_tracks_bounds(),p=m.select(x.$el[0]).append("svg").attr("width",o).attr("height",w).attr("pointer-events","all").append("svg:g").call(m.behavior.zoom().on("zoom",function(){var y=m.event.scale;p.attr("transform","translate("+m.event.translate+") scale("+y+")");if(x.scale!==y){if(x.zoom_drag_timeout){clearTimeout(x.zoom_drag_timeout)}x.zoom_drag_timeout=setTimeout(function(){},400)}})).attr("transform","translate("+o/2+","+w/2+")").append("svg:g").attr("class","tracks");this.circular_views=t.map(function(z,A){var y=new d({el:p.append("g")[0],track:z,radius_bounds:s[A],genome:x.genome,total_gap:x.total_gap});y.render();return y});this.chords_views=q.map(function(z){var y=new k({el:p.append("g")[0],track:z,radius_bounds:s[0],genome:x.genome,total_gap:x.total_gap});y.render();return y});var v=this.circular_views[this.circular_views.length-1].radius_bounds[1],u=[v,v+this.label_arc_height];this.label_track_view=new b({el:p.append("g")[0],track:new c(),radius_bounds:u,genome:x.genome,total_gap:x.total_gap});this.label_track_view.render()},add_track:function(u){if(u.get("track_type")==="DiagonalHeatmapTrack"){var q=this.circular_views[0].radius_bounds,t=new k({el:m.select("g.tracks").append("g")[0],track:u,radius_bounds:q,genome:this.genome,total_gap:this.total_gap});t.render();this.chords_views.push(t)}else{var s=this.get_tracks_bounds();h.each(this.circular_views,function(v,w){v.update_radius_bounds(s[w])});h.each(this.chords_views,function(v){v.update_radius_bounds(s[0])});var r=this.circular_views.length,o=new d({el:m.select("g.tracks").append("g")[0],track:u,radius_bounds:s[r],genome:this.genome,total_gap:this.total_gap});o.render();this.circular_views.push(o);var p=s[s.length-1];p[1]=p[0];this.label_track_view.update_radius_bounds(p)}},remove_track:function(p,r,q){var o=this.circular_views[q.index];this.circular_views.splice(q.index,1);o.$el.remove();var s=this.get_tracks_bounds();h.each(this.circular_views,function(t,u){t.update_radius_bounds(s[u])})}});var l=Backbone.View.extend({tagName:"g",initialize:function(o){this.bg_stroke="ccc";this.loading_bg_fill="000";this.bg_fill="ccc";this.total_gap=o.total_gap;this.track=o.track;this.radius_bounds=o.radius_bounds;this.genome=o.genome;this.chroms_layout=this._chroms_layout();this.data_bounds=[];this.scale=1;this.parent_elt=m.select(this.$el[0])},get_fill_color:function(){var o=this.track.get("config").get_value("block_color");if(!o){o=this.track.get("config").get_value("color")}return o},render:function(){var s=this.parent_elt;if(!s){console.log("no parent elt")}var r=this.chroms_layout,u=m.svg.arc().innerRadius(this.radius_bounds[0]).outerRadius(this.radius_bounds[1]),o=s.selectAll("g").data(r).enter().append("svg:g"),q=o.append("path").attr("d",u).attr("class","chrom-background").style("stroke",this.bg_stroke).style("fill",this.loading_bg_fill);q.append("title").text(function(w){return w.data.chrom});var p=this,t=p.track.get("data_manager"),v=(t?t.data_is_ready():true);$.when(v).then(function(){$.when(p._render_data(s)).then(function(){q.style("fill",p.bg_fill);p.render_labels()})})},render_labels:function(){},update_radius_bounds:function(p){this.radius_bounds=p;var o=m.svg.arc().innerRadius(this.radius_bounds[0]).outerRadius(this.radius_bounds[1]);this.parent_elt.selectAll("g>path.chrom-background").transition().duration(1000).attr("d",o);this._transition_chrom_data();this._transition_labels()},update_scale:function(r){var q=this.scale;this.scale=r;if(r<=q){return}var p=this,o=new n();this.parent_elt.selectAll("path.chrom-data").filter(function(t,s){return o.is_visible(this)}).each(function(y,u){var x=m.select(this),t=x.attr("chrom"),w=p.genome.get_chrom_region(t),v=p.track.get("data_manager"),s;if(!v.can_get_more_detailed_data(w)){return}s=p.track.get("data_manager").get_more_detailed_data(w,"Coverage",0,r);$.when(s).then(function(B){x.remove();p._update_data_bounds();var A=h.find(p.chroms_layout,function(C){return C.data.chrom===t});var z=p.get_fill_color();p._render_chrom_data(p.parent_elt,A,B).style("stroke",z).style("fill",z)})});return p},_transition_chrom_data:function(){var p=this.track,r=this.chroms_layout,o=this.parent_elt.selectAll("g>path.chrom-data"),s=o[0].length;if(s>0){var q=this;$.when(p.get("data_manager").get_genome_wide_data(this.genome)).then(function(u){var t=h.reject(h.map(u,function(v,w){var x=null,y=q._get_path_function(r[w],v);if(y){x=y(v.data)}return x}),function(v){return v===null});o.each(function(w,v){m.select(this).transition().duration(1000).attr("d",t[v])})})}},_transition_labels:function(){},_update_data_bounds:function(){var o=this.data_bounds;this.data_bounds=this.get_data_bounds(this.track.get("data_manager").get_genome_wide_data(this.genome));if(this.data_bounds[0]<o[0]||this.data_bounds[1]>o[1]){this._transition_chrom_data()}},_render_data:function(r){var q=this,p=this.chroms_layout,o=this.track,s=$.Deferred();$.when(o.get("data_manager").get_genome_wide_data(this.genome)).then(function(u){q.data_bounds=q.get_data_bounds(u);layout_and_data=h.zip(p,u),chroms_data_layout=h.map(layout_and_data,function(v){var w=v[0],x=v[1];return q._render_chrom_data(r,w,x)});var t=q.get_fill_color();q.parent_elt.selectAll("path.chrom-data").style("stroke",t).style("fill",t);s.resolve(r)});return s},_render_chrom_data:function(o,p,q){},_get_path_function:function(p,o){},_chroms_layout:function(){var p=this.genome.get_chroms_info(),r=m.layout.pie().value(function(t){return t.len}).sort(null),s=r(p),o=this.total_gap/p.length,q=h.map(s,function(v,u){var t=v.endAngle-o;v.endAngle=(t>v.startAngle?t:v.startAngle);return v});return q}});var b=l.extend({initialize:function(o){l.prototype.initialize.call(this,o);this.innerRadius=this.radius_bounds[0];this.radius_bounds[0]=this.radius_bounds[1];this.bg_stroke="fff";this.bg_fill="fff";this.min_arc_len=0.05},_render_data:function(q){var p=this,o=q.selectAll("g");o.selectAll("path").attr("id",function(u){return"label-"+u.data.chrom});o.append("svg:text").filter(function(u){return u.endAngle-u.startAngle>p.min_arc_len}).attr("text-anchor","middle").append("svg:textPath").attr("class","chrom-label").attr("xlink:href",function(u){return"#label-"+u.data.chrom}).attr("startOffset","25%").text(function(u){return u.data.chrom});var r=function(w){var u=(w.endAngle-w.startAngle)/w.value,v=m.range(0,w.value,25000000).map(function(x,y){return{radius:p.innerRadius,angle:x*u+w.startAngle,label:y===0?0:(y%3?null:p.formatNum(x))}});if(v.length<4){v[v.length-1].label=p.formatNum(Math.round((v[v.length-1].angle-w.startAngle)/u))}return v};var t=function(u){return u.angle>Math.PI?"rotate(180)translate(-16)":null};var s=h.filter(this.chroms_layout,function(u){return u.endAngle-u.startAngle>p.min_arc_len});this.drawTicks(this.parent_elt,s,r,t)}});h.extend(b.prototype,i);var f=l.extend({_quantile:function(p,o){p.sort(m.ascending);return m.quantile(p,o)},_render_chrom_data:function(o,r,p){var s=this._get_path_function(r,p);if(!s){return null}var q=o.datum(p.data),t=q.append("path").attr("class","chrom-data").attr("chrom",r.data.chrom).attr("d",s);return t},_get_path_function:function(r,q){if(typeof q==="string"||!q.data||q.data.length===0){return null}var o=m.scale.linear().domain(this.data_bounds).range(this.radius_bounds).clamp(true);var s=m.scale.linear().domain([0,q.data.length]).range([r.startAngle,r.endAngle]);var p=m.svg.line.radial().interpolate("linear").radius(function(t){return o(t[1])}).angle(function(u,t){return s(t)});return m.svg.area.radial().interpolate(p.interpolate()).innerRadius(o(0)).outerRadius(p.radius()).angle(p.angle())},render_labels:function(){var o=this,p=function(){return"rotate(90)"};this.drawTicks(this.parent_elt,[this.chroms_layout[0]],this._data_bounds_ticks_fn(),p,true)},_transition_labels:function(){if(this.data_bounds.length===0){return}var p=this,r=h.filter(this.chroms_layout,function(s){return s.endAngle-s.startAngle>0.08}),q=h.filter(r,function(t,s){return s%3===0}),o=h.flatten(h.map(q,function(s){return p._data_bounds_ticks_fn()(s)}));this.parent_elt.selectAll("g.tick").data(o).transition().attr("transform",function(s){return"rotate("+(s.angle*180/Math.PI-90)+")translate("+s.radius+",0)"})},_data_bounds_ticks_fn:function(){var o=this;visibleChroms=0;return function(p){return[{radius:o.radius_bounds[0],angle:p.startAngle,label:o.formatNum(o.data_bounds[0])},{radius:o.radius_bounds[1],angle:p.startAngle,label:o.formatNum(o.data_bounds[1])}]}},get_data_bounds:function(o){}});h.extend(f.prototype,i);var d=f.extend({get_data_bounds:function(p){var o=h.flatten(h.map(p,function(q){if(q){return h.map(q.data,function(r){return parseInt(r[1],10)||0})}else{return 0}}));return[h.min(o),this._quantile(o,0.98)||h.max(o)]}});var k=l.extend({render:function(){var o=this;$.when(o.track.get("data_manager").data_is_ready()).then(function(){$.when(o.track.get("data_manager").get_genome_wide_data(o.genome)).then(function(r){var q=[],p=o.genome.get_chroms_info();h.each(r,function(v,u){var s=p[u].chrom;var t=h.map(v.data,function(x){var w=o._get_region_angle(s,x[1]),y=o._get_region_angle(x[3],x[4]);return{source:{startAngle:w,endAngle:w+0.01},target:{startAngle:y,endAngle:y+0.01}}});q=q.concat(t)});o.parent_elt.append("g").attr("class","chord").selectAll("path").data(q).enter().append("path").style("fill",o.get_fill_color()).attr("d",m.svg.chord().radius(o.radius_bounds[0])).style("opacity",1)})})},update_radius_bounds:function(o){this.radius_bounds=o;this.parent_elt.selectAll("path").transition().attr("d",m.svg.chord().radius(this.radius_bounds[0]))},_get_region_angle:function(q,o){var p=h.find(this.chroms_layout,function(r){return r.data.chrom===q});return p.endAngle-((p.endAngle-p.startAngle)*(p.data.len-o)/p.data.len)}});var e=Backbone.View.extend({initialize:function(){var o=new j.Genome(galaxy_config.app.genome),p=new j.GenomeVisualization(galaxy_config.app.viz_config),r=new a({el:$("#center .unified-panel-body"),total_gap:2*Math.PI*0.4,genome:o,model:p,dataset_arc_height:25});r.render();$("#center .unified-panel-header-inner").append(galaxy_config.app.viz_config.title+" "+galaxy_config.app.viz_config.dbkey);var q=create_icon_buttons_menu([{icon_class:"plus-button",title:"Add tracks",on_click:function(){j.select_datasets(galaxy_config.root+"visualization/list_current_history_datasets",galaxy_config.root+"api/datasets",p.get("dbkey"),function(s){p.add_tracks(s)})}},{icon_class:"disk--arrow",title:"Save",on_click:function(){Galaxy.modal.show({title:"Saving...",body:"progress"});$.ajax({url:galaxy_config.root+"visualization/save",type:"POST",dataType:"json",data:{id:p.get("vis_id"),title:p.get("title"),dbkey:p.get("dbkey"),type:"trackster",vis_json:JSON.stringify(p)}}).success(function(s){Galaxy.modal.hide();p.set("vis_id",s.vis_id)}).error(function(){Galaxy.modal.show({title:"Could Not Save",body:"Could not save visualization. Please try again later.",buttons:{Cancel:function(){Galaxy.modal.hide()}}})})}},{icon_class:"cross-circle",title:"Close",on_click:function(){window.location=galaxy_config.root+"visualization/list"}}],{tooltip_config:{placement:"bottom"}});q.$el.attr("style","float: right");$("#center .unified-panel-header-inner").append(q.$el);$(".menu-button").tooltip({placement:"bottom"})}});return{GalaxyApp:e}}); \ No newline at end of file +define(["utils/utils","libs/underscore","libs/d3","viz/visualization","utils/config"],function(h,i,n,k,c){h.cssLoadFile("static/style/circster.css");var o=Backbone.Model.extend({is_visible:function(s,p){var q=s.getBoundingClientRect(),r=$("svg")[0].getBoundingClientRect();if(q.right<0||q.left>r.right||q.bottom<0||q.top>r.bottom){return false}return true}});var j={drawTicks:function(t,s,x,r,p){var w=t.append("g").selectAll("g").data(s).enter().append("g").selectAll("g").data(x).enter().append("g").attr("class","tick").attr("transform",function(y){return"rotate("+(y.angle*180/Math.PI-90)+")translate("+y.radius+",0)"});var v=[],u=[],q=function(y){return y.angle>Math.PI?"end":null};if(p){v=[0,0,0,-4];u=[4,0,"",".35em"];q=null}else{v=[1,0,4,0];u=[0,4,".35em",""]}w.append("line").attr("x1",v[0]).attr("y1",v[1]).attr("x2",v[2]).attr("y1",v[3]).style("stroke","#000");w.append("text").attr("x",u[0]).attr("y",u[1]).attr("dx",u[2]).attr("dy",u[3]).attr("text-anchor",q).attr("transform",r).text(function(y){return y.label})},formatNum:function(q,p){if(p===undefined){p=2}if(q===null){return null}var s=null;if(q<1){s=q.toPrecision(p)}else{var r=Math.round(q.toPrecision(p));if(q<1000){s=r}else{if(q<1000000){s=Math.round((r/1000).toPrecision(3)).toFixed(0)+"K"}else{if(q<1000000000){s=Math.round((r/1000000).toPrecision(3)).toFixed(0)+"M"}}}}return s}};var d=Backbone.Model.extend({});var a=Backbone.View.extend({className:"circster",initialize:function(p){this.genome=p.genome;this.track_gap=10;this.label_arc_height=50;this.scale=1;this.circular_views=null;this.chords_views=null;this.model.get("drawables").on("add",this.add_track,this);this.model.get("drawables").on("remove",this.remove_track,this);var q=this.model.get("config");q.get("arc_dataset_height").on("change:value",this.update_track_bounds,this)},get_circular_tracks:function(){return this.model.get("drawables").filter(function(p){return p.get("track_type")!=="DiagonalHeatmapTrack"})},get_chord_tracks:function(){return this.model.get("drawables").filter(function(p){return p.get("track_type")==="DiagonalHeatmapTrack"})},get_tracks_bounds:function(){var r=this.get_circular_tracks(),s=this.model.get("config").get_value("arc_dataset_height"),p=Math.min(this.$el.width(),this.$el.height()),u=p/2-r.length*(s+this.track_gap)-(this.label_arc_height+this.track_gap),t=n.range(u,p/2,s+this.track_gap);var q=this;return i.map(t,function(v){return[v,v+s]})},render:function(){var y=this,p=y.$el.width(),x=y.$el.height(),u=this.get_circular_tracks(),s=this.get_chord_tracks(),r=y.model.get("config").get_value("total_gap"),t=this.get_tracks_bounds(),q=n.select(y.$el[0]).append("svg").attr("width",p).attr("height",x).attr("pointer-events","all").append("svg:g").call(n.behavior.zoom().on("zoom",function(){var z=n.event.scale;q.attr("transform","translate("+n.event.translate+") scale("+z+")");if(y.scale!==z){if(y.zoom_drag_timeout){clearTimeout(y.zoom_drag_timeout)}y.zoom_drag_timeout=setTimeout(function(){},400)}})).attr("transform","translate("+p/2+","+x/2+")").append("svg:g").attr("class","tracks");this.circular_views=u.map(function(A,B){var z=new e({el:q.append("g")[0],track:A,radius_bounds:t[B],genome:y.genome,total_gap:r});z.render();return z});this.chords_views=s.map(function(A){var z=new l({el:q.append("g")[0],track:A,radius_bounds:t[0],genome:y.genome,total_gap:r});z.render();return z});var w=this.circular_views[this.circular_views.length-1].radius_bounds[1],v=[w,w+this.label_arc_height];this.label_track_view=new b({el:q.append("g")[0],track:new d(),radius_bounds:v,genome:y.genome,total_gap:r});this.label_track_view.render()},add_track:function(w){var q=this.model.get("config").get_value("total_gap");if(w.get("track_type")==="DiagonalHeatmapTrack"){var s=this.circular_views[0].radius_bounds,v=new l({el:n.select("g.tracks").append("g")[0],track:w,radius_bounds:s,genome:this.genome,total_gap:q});v.render();this.chords_views.push(v)}else{var u=this.get_tracks_bounds();i.each(this.circular_views,function(x,y){x.update_radius_bounds(u[y])});i.each(this.chords_views,function(x){x.update_radius_bounds(u[0])});var t=this.circular_views.length,p=new e({el:n.select("g.tracks").append("g")[0],track:w,radius_bounds:u[t],genome:this.genome,total_gap:q});p.render();this.circular_views.push(p);var r=u[u.length-1];r[1]=r[0];this.label_track_view.update_radius_bounds(r)}},remove_track:function(q,s,r){var p=this.circular_views[r.index];this.circular_views.splice(r.index,1);p.$el.remove();var t=this.get_tracks_bounds();i.each(this.circular_views,function(u,v){u.update_radius_bounds(t[v])})},update_track_bounds:function(){var p=this.get_tracks_bounds();i.each(this.circular_views,function(q,r){q.update_radius_bounds(p[r])})}});var m=Backbone.View.extend({tagName:"g",initialize:function(p){this.bg_stroke="ccc";this.loading_bg_fill="000";this.bg_fill="ccc";this.total_gap=p.total_gap;this.track=p.track;this.radius_bounds=p.radius_bounds;this.genome=p.genome;this.chroms_layout=this._chroms_layout();this.data_bounds=[];this.scale=1;this.parent_elt=n.select(this.$el[0])},get_fill_color:function(){var p=this.track.get("config").get_value("block_color");if(!p){p=this.track.get("config").get_value("color")}return p},render:function(){var t=this.parent_elt;if(!t){console.log("no parent elt")}var s=this.chroms_layout,v=n.svg.arc().innerRadius(this.radius_bounds[0]).outerRadius(this.radius_bounds[1]),p=t.selectAll("g").data(s).enter().append("svg:g"),r=p.append("path").attr("d",v).attr("class","chrom-background").style("stroke",this.bg_stroke).style("fill",this.loading_bg_fill);r.append("title").text(function(x){return x.data.chrom});var q=this,u=q.track.get("data_manager"),w=(u?u.data_is_ready():true);$.when(w).then(function(){$.when(q._render_data(t)).then(function(){r.style("fill",q.bg_fill);q.render_labels()})})},render_labels:function(){},update_radius_bounds:function(q){this.radius_bounds=q;var p=n.svg.arc().innerRadius(this.radius_bounds[0]).outerRadius(this.radius_bounds[1]);this.parent_elt.selectAll("g>path.chrom-background").transition().duration(1000).attr("d",p);this._transition_chrom_data();this._transition_labels()},update_scale:function(s){var r=this.scale;this.scale=s;if(s<=r){return}var q=this,p=new o();this.parent_elt.selectAll("path.chrom-data").filter(function(u,t){return p.is_visible(this)}).each(function(z,v){var y=n.select(this),u=y.attr("chrom"),x=q.genome.get_chrom_region(u),w=q.track.get("data_manager"),t;if(!w.can_get_more_detailed_data(x)){return}t=q.track.get("data_manager").get_more_detailed_data(x,"Coverage",0,s);$.when(t).then(function(C){y.remove();q._update_data_bounds();var B=i.find(q.chroms_layout,function(D){return D.data.chrom===u});var A=q.get_fill_color();q._render_chrom_data(q.parent_elt,B,C).style("stroke",A).style("fill",A)})});return q},_transition_chrom_data:function(){var q=this.track,s=this.chroms_layout,p=this.parent_elt.selectAll("g>path.chrom-data"),t=p[0].length;if(t>0){var r=this;$.when(q.get("data_manager").get_genome_wide_data(this.genome)).then(function(v){var u=i.reject(i.map(v,function(w,x){var y=null,z=r._get_path_function(s[x],w);if(z){y=z(w.data)}return y}),function(w){return w===null});p.each(function(x,w){n.select(this).transition().duration(1000).attr("d",u[w])})})}},_transition_labels:function(){},_update_data_bounds:function(){var p=this.data_bounds;this.data_bounds=this.get_data_bounds(this.track.get("data_manager").get_genome_wide_data(this.genome));if(this.data_bounds[0]<p[0]||this.data_bounds[1]>p[1]){this._transition_chrom_data()}},_render_data:function(s){var r=this,q=this.chroms_layout,p=this.track,t=$.Deferred();$.when(p.get("data_manager").get_genome_wide_data(this.genome)).then(function(v){r.data_bounds=r.get_data_bounds(v);layout_and_data=i.zip(q,v),chroms_data_layout=i.map(layout_and_data,function(w){var x=w[0],y=w[1];return r._render_chrom_data(s,x,y)});var u=r.get_fill_color();r.parent_elt.selectAll("path.chrom-data").style("stroke",u).style("fill",u);t.resolve(s)});return t},_render_chrom_data:function(p,q,r){},_get_path_function:function(q,p){},_chroms_layout:function(){var q=this.genome.get_chroms_info(),s=n.layout.pie().value(function(u){return u.len}).sort(null),t=s(q),p=2*Math.PI*this.total_gap/q.length,r=i.map(t,function(w,v){var u=w.endAngle-p;w.endAngle=(u>w.startAngle?u:w.startAngle);return w});return r}});var b=m.extend({initialize:function(p){m.prototype.initialize.call(this,p);this.innerRadius=this.radius_bounds[0];this.radius_bounds[0]=this.radius_bounds[1];this.bg_stroke="fff";this.bg_fill="fff";this.min_arc_len=0.05},_render_data:function(r){var q=this,p=r.selectAll("g");p.selectAll("path").attr("id",function(v){return"label-"+v.data.chrom});p.append("svg:text").filter(function(v){return v.endAngle-v.startAngle>q.min_arc_len}).attr("text-anchor","middle").append("svg:textPath").attr("class","chrom-label").attr("xlink:href",function(v){return"#label-"+v.data.chrom}).attr("startOffset","25%").text(function(v){return v.data.chrom});var s=function(x){var v=(x.endAngle-x.startAngle)/x.value,w=n.range(0,x.value,25000000).map(function(y,z){return{radius:q.innerRadius,angle:y*v+x.startAngle,label:z===0?0:(z%3?null:q.formatNum(y))}});if(w.length<4){w[w.length-1].label=q.formatNum(Math.round((w[w.length-1].angle-x.startAngle)/v))}return w};var u=function(v){return v.angle>Math.PI?"rotate(180)translate(-16)":null};var t=i.filter(this.chroms_layout,function(v){return v.endAngle-v.startAngle>q.min_arc_len});this.drawTicks(this.parent_elt,t,s,u)}});i.extend(b.prototype,j);var g=m.extend({_quantile:function(q,p){q.sort(n.ascending);return n.quantile(q,p)},_render_chrom_data:function(p,s,q){var t=this._get_path_function(s,q);if(!t){return null}var r=p.datum(q.data),u=r.append("path").attr("class","chrom-data").attr("chrom",s.data.chrom).attr("d",t);return u},_get_path_function:function(s,r){if(typeof r==="string"||!r.data||r.data.length===0){return null}var p=n.scale.linear().domain(this.data_bounds).range(this.radius_bounds).clamp(true);var t=n.scale.linear().domain([0,r.data.length]).range([s.startAngle,s.endAngle]);var q=n.svg.line.radial().interpolate("linear").radius(function(u){return p(u[1])}).angle(function(v,u){return t(u)});return n.svg.area.radial().interpolate(q.interpolate()).innerRadius(p(0)).outerRadius(q.radius()).angle(q.angle())},render_labels:function(){var p=this,q=function(){return"rotate(90)"};this.drawTicks(this.parent_elt,[this.chroms_layout[0]],this._data_bounds_ticks_fn(),q,true)},_transition_labels:function(){if(this.data_bounds.length===0){return}var q=this,s=i.filter(this.chroms_layout,function(t){return t.endAngle-t.startAngle>0.08}),r=i.filter(s,function(u,t){return t%3===0}),p=i.flatten(i.map(r,function(t){return q._data_bounds_ticks_fn()(t)}));this.parent_elt.selectAll("g.tick").data(p).transition().attr("transform",function(t){return"rotate("+(t.angle*180/Math.PI-90)+")translate("+t.radius+",0)"})},_data_bounds_ticks_fn:function(){var p=this;visibleChroms=0;return function(q){return[{radius:p.radius_bounds[0],angle:q.startAngle,label:p.formatNum(p.data_bounds[0])},{radius:p.radius_bounds[1],angle:q.startAngle,label:p.formatNum(p.data_bounds[1])}]}},get_data_bounds:function(p){}});i.extend(g.prototype,j);var e=g.extend({get_data_bounds:function(q){var p=i.flatten(i.map(q,function(r){if(r){return i.map(r.data,function(s){return parseInt(s[1],10)||0})}else{return 0}}));return[i.min(p),this._quantile(p,0.98)||i.max(p)]}});var l=m.extend({render:function(){var p=this;$.when(p.track.get("data_manager").data_is_ready()).then(function(){$.when(p.track.get("data_manager").get_genome_wide_data(p.genome)).then(function(s){var r=[],q=p.genome.get_chroms_info();i.each(s,function(w,v){var t=q[v].chrom;var u=i.map(w.data,function(y){var x=p._get_region_angle(t,y[1]),z=p._get_region_angle(y[3],y[4]);return{source:{startAngle:x,endAngle:x+0.01},target:{startAngle:z,endAngle:z+0.01}}});r=r.concat(u)});p.parent_elt.append("g").attr("class","chord").selectAll("path").data(r).enter().append("path").style("fill",p.get_fill_color()).attr("d",n.svg.chord().radius(p.radius_bounds[0])).style("opacity",1)})})},update_radius_bounds:function(p){this.radius_bounds=p;this.parent_elt.selectAll("path").transition().attr("d",n.svg.chord().radius(this.radius_bounds[0]))},_get_region_angle:function(r,p){var q=i.find(this.chroms_layout,function(s){return s.data.chrom===r});return q.endAngle-((q.endAngle-q.startAngle)*(q.data.len-p)/q.data.len)}});var f=Backbone.View.extend({initialize:function(){var p=new k.Genome(galaxy_config.app.genome),q=new k.GenomeVisualization(galaxy_config.app.viz_config);q.get("config").add([{key:"arc_dataset_height",label:"Arc Dataset Height",type:"int",value:25,view:"circster"},{key:"total_gap",label:"Gap [0-1]",type:"float",value:0.4,view:"circster",hidden:true}]);var s=new a({el:$("#center .unified-panel-body"),genome:p,model:q});s.render();$("#center .unified-panel-header-inner").append(galaxy_config.app.viz_config.title+" "+galaxy_config.app.viz_config.dbkey);var r=create_icon_buttons_menu([{icon_class:"plus-button",title:"Add tracks",on_click:function(){k.select_datasets(galaxy_config.root+"visualization/list_current_history_datasets",galaxy_config.root+"api/datasets",q.get("dbkey"),function(t){q.add_tracks(t)})}},{icon_class:"gear",title:"Settings",on_click:function(){var t=new c.ConfigSettingCollectionView({collection:q.get("config")});t.render_in_modal("Configure Visualization")}},{icon_class:"disk--arrow",title:"Save",on_click:function(){Galaxy.modal.show({title:"Saving...",body:"progress"});$.ajax({url:galaxy_config.root+"visualization/save",type:"POST",dataType:"json",data:{id:q.get("vis_id"),title:q.get("title"),dbkey:q.get("dbkey"),type:"trackster",vis_json:JSON.stringify(q)}}).success(function(t){Galaxy.modal.hide();q.set("vis_id",t.vis_id)}).error(function(){Galaxy.modal.show({title:"Could Not Save",body:"Could not save visualization. Please try again later.",buttons:{Cancel:function(){Galaxy.modal.hide()}}})})}},{icon_class:"cross-circle",title:"Close",on_click:function(){window.location=galaxy_config.root+"visualization/list"}}],{tooltip_config:{placement:"bottom"}});r.$el.attr("style","float: right");$("#center .unified-panel-header-inner").append(r.$el);$(".menu-button").tooltip({placement:"bottom"})}});return{GalaxyApp:f}}); \ No newline at end of file diff -r c6eac0859bf917c176ec5995bff92a25841a9420 -r b2206f4ca10f8cec7c37f43f80fc24f0b93b420b static/scripts/utils/config.js --- a/static/scripts/utils/config.js +++ b/static/scripts/utils/config.js @@ -1,9 +1,10 @@ -define(['libs/underscore', 'viz/trackster/util'], function(_, util_mod) { +define(['libs/underscore', 'viz/trackster/util', 'utils/config'], function(_, util_mod, config_mod) { /** * A configuration setting. Currently key is used as id. */ var ConfigSetting = Backbone.Model.extend({ + initialize: function(options) { // Use key as id for now. var key = this.get('key'); @@ -19,26 +20,24 @@ if (this.get('type') === 'color' && !this.get('value')) { this.set('value', util_mod.get_random_color()); } - - // When value updated, cast is appropriately. - this.on('change:value', this.cast_value, this); }, /** - * Cast value from string to appropriate type. + * Cast and set value. This should be instead of + * setting.set('value', new_value) */ - cast_value: function() { - var type = this.get('type'), - value = this.get('value'); + set_value: function(value) { + var type = this.get('type'); if (type === 'float') { - value = parseFloat( value ); - } else if (type === 'int') { - value = parseInt( value, 10 ); + value = parseFloat(value); + } + else if (type === 'int') { + value = parseInt(value, 10); } // TODO: handle casting from string to bool? - this.set('value'); + this.set('value', value); } }, { // This is a master list of default settings for known settings. @@ -92,7 +91,8 @@ return undefined; } -}, { +}, +{ /** * Utility function that creates a ConfigSettingsCollection from a standard dictionary * with configuration key-value pairs. @@ -120,101 +120,99 @@ * Renders form for editing configuration settings. */ render: function() { - var track_config = this.model; var container = this.$el; - var param; + + this.collection.each(function(param, index) { + // Hidden params have no representation in the form + if (param.get('hidden')) { return; } - // Function to process parameters recursively - function handle_params( params, container ) { - for ( var index = 0; index < params.length; index++ ) { - param = params[index]; - // Hidden params have no representation in the form - if ( param.hidden ) { continue; } - // Build row for param - var id = 'param_' + index; - var value = track_config.values[ param.key ]; - var row = $("<div class='form-row' />").appendTo( container ); - row.append( $('<label />').attr("for", id ).text( param.label + ":" ) ); - // Draw parameter as checkbox - if ( type === 'bool' ) { - row.append( $('<input type="checkbox" />').attr("id", id ).attr("name", id ).attr( 'checked', value ) ); - // Draw parameter as textbox - } else if ( type === 'text' ) { - row.append( $('<input type="text"/>').attr("id", id ).val(value).click( function() { $(this).select(); })); - // Draw paramter as select area - } else if ( type === 'select' ) { - var select = $('<select />').attr("id", id); - for ( var i = 0; i < param.options.length; i++ ) { - $("<option/>").text( param.options[i].label ).attr( "value", param.options[i].value ).appendTo( select ); - } - select.val( value ); - row.append( select ); - // Draw parameter as color picker - } else if ( type === 'color' ) { - var - container_div = $("<div/>").appendTo(row), - input = $('<input />').attr("id", id ).attr("name", id ).val( value ).css("float", "left") - .appendTo(container_div).click(function(e) { - // Hide other pickers. - $(".tooltip").removeClass( "in" ); + // Build row for param. + var id = 'param_' + index, + type = param.get('type'), + value = param.get('value'); + var row = $("<div class='form-row' />").appendTo(container); + row.append($('<label />').attr("for", id ).text(param.get('label') + ":" )); + // Draw parameter as checkbox + if ( type === 'bool' ) { + row.append( $('<input type="checkbox" />').attr("id", id ).attr("name", id ).attr( 'checked', value ) ); + } + // Draw parameter as textbox + else if ( type === 'text' ) { + row.append( $('<input type="text"/>').attr("id", id ).val(value).click( function() { $(this).select(); })); + } + // Draw parameter as select area + else if ( type === 'select' ) { + var select = $('<select />').attr("id", id); + for ( var i = 0; i < param.options.length; i++ ) { + $("<option/>").text( param.options[i].label ).attr( "value", param.options[i].value ).appendTo( select ); + } + select.val( value ); + row.append( select ); + + } + // Draw parameter as color picker + else if ( type === 'color' ) { + var + container_div = $("<div/>").appendTo(row), + input = $('<input />').attr("id", id ).attr("name", id ).val( value ).css("float", "left") + .appendTo(container_div).click(function(e) { + // Hide other pickers. + $(".tooltip").removeClass( "in" ); + + // Show input's color picker. + var tip = $(this).siblings(".tooltip").addClass( "in" ); + tip.css( { + // left: $(this).position().left + ( $(input).width() / 2 ) - 60, + // top: $(this).position().top + $(this.height) + left: $(this).position().left + $(this).width() + 5, + top: $(this).position().top - ( $(tip).height() / 2 ) + ( $(this).height() / 2 ) + } ).show(); - // Show input's color picker. - var tip = $(this).siblings(".tooltip").addClass( "in" ); - tip.css( { - // left: $(this).position().left + ( $(input).width() / 2 ) - 60, - // top: $(this).position().top + $(this.height) - left: $(this).position().left + $(this).width() + 5, - top: $(this).position().top - ( $(tip).height() / 2 ) + ( $(this).height() / 2 ) - } ).show(); - - // Click management: - - // Keep showing tip if clicking in tip. - tip.click(function(e) { - e.stopPropagation(); - }); - - // Hide tip if clicking outside of tip. - $(document).bind( "click.color-picker", function() { - tip.hide(); - $(document).unbind( "click.color-picker" ); - }); - - // No propagation to avoid triggering document click (and tip hiding) above. + // Click management: + + // Keep showing tip if clicking in tip. + tip.click(function(e) { e.stopPropagation(); - }), - // Icon for setting a new random color; behavior set below. - new_color_icon = $("<a href='javascript:void(0)'/>").addClass("icon-button arrow-circle").appendTo(container_div) - .attr("title", "Set new random color").tooltip(), - // Color picker in tool tip style. - tip = $( "<div class='tooltip right' style='position: absolute;' />" ).appendTo(container_div).hide(), - // Inner div for padding purposes - tip_inner = $("<div class='tooltip-inner' style='text-align: inherit'></div>").appendTo(tip), - tip_arrow = $("<div class='tooltip-arrow'></div>").appendTo(tip), - farb_obj = $.farbtastic(tip_inner, { width: 100, height: 100, callback: input, color: value }); - - // Clear floating. - container_div.append( $("<div/>").css("clear", "both")); - - // Use function to fix farb_obj value. - (function(fixed_farb_obj) { - new_color_icon.click(function() { - fixed_farb_obj.setColor(util_mod.get_random_color()); - }); - })(farb_obj); - - } - else { - row.append( $('<input />').attr("id", id ).attr("name", id ).val( value ) ); - } - // Help text - if ( param.help ) { - row.append( $("<div class='help'/>").text( param.help ) ); - } + }); + + // Hide tip if clicking outside of tip. + $(document).bind( "click.color-picker", function() { + tip.hide(); + $(document).unbind( "click.color-picker" ); + }); + + // No propagation to avoid triggering document click (and tip hiding) above. + e.stopPropagation(); + }), + // Icon for setting a new random color; behavior set below. + new_color_icon = $("<a href='javascript:void(0)'/>").addClass("icon-button arrow-circle").appendTo(container_div) + .attr("title", "Set new random color").tooltip(), + // Color picker in tool tip style. + tip = $( "<div class='tooltip right' style='position: absolute;' />" ).appendTo(container_div).hide(), + // Inner div for padding purposes + tip_inner = $("<div class='tooltip-inner' style='text-align: inherit'></div>").appendTo(tip), + tip_arrow = $("<div class='tooltip-arrow'></div>").appendTo(tip), + farb_obj = $.farbtastic(tip_inner, { width: 100, height: 100, callback: input, color: value }); + + // Clear floating. + container_div.append( $("<div/>").css("clear", "both")); + + // Use function to fix farb_obj value. + (function(fixed_farb_obj) { + new_color_icon.click(function() { + fixed_farb_obj.setColor(util_mod.get_random_color()); + }); + })(farb_obj); + + } + else { + row.append( $('<input />').attr("id", id ).attr("name", id ).val( value ) ); } - } - // Handle top level parameters in order - handle_params( this.params, container ); + // Help text + if ( param.help ) { + row.append( $("<div class='help'/>").text( param.help ) ); + } + }); return this; }, @@ -222,13 +220,14 @@ /** * Render view in modal. */ - render_in_modal: function() { + render_in_modal: function(title) { // Set up handlers for cancel, ok button and for handling esc key. - var cancel_fn = function() { hide_modal(); $(window).unbind("keypress.check_enter_esc"); }, + var self = this, + cancel_fn = function() { Galaxy.modal.hide(); $(window).unbind("keypress.check_enter_esc"); }, ok_fn = function() { - this.update_from_form(); - hide_modal(); - $(window).unbind("keypress.check_enter_esc"); + self.update_from_form(); + Galaxy.modal.hide(); + $(window).unbind("keypress.check_enter_esc"); }, check_enter_esc = function(e) { if ((e.keyCode || e.which) === 27) { // Escape key @@ -246,8 +245,8 @@ this.render(); } Galaxy.modal.show({ - title: "Configure", - body: drawable.config.build_form(), + title: title || "Configure", + body: this.$el, buttons: { "Cancel": cancel_fn, "OK": ok_fn @@ -265,10 +264,10 @@ // Set value from view. var id = 'param_' + index; var value = self.$el.find( '#' + id ).val(); - if ( type === 'bool' ) { + if ( setting.get('type') === 'bool' ) { value = container.find( '#' + id ).is( ':checked' ); } - setting.set('value', value); + setting.set_value(value); } }); } diff -r c6eac0859bf917c176ec5995bff92a25841a9420 -r b2206f4ca10f8cec7c37f43f80fc24f0b93b420b static/scripts/viz/circster.js --- a/static/scripts/viz/circster.js +++ b/static/scripts/viz/circster.js @@ -1,4 +1,4 @@ -define(["utils/utils", "libs/underscore", "libs/d3", "viz/visualization"], function(utils, _, d3, visualization) { +define(["utils/utils", "libs/underscore", "libs/d3", "viz/visualization", "utils/config"], function(utils, _, d3, visualization, config) { // Load needed CSS. utils.cssLoadFile("static/style/circster.css"); @@ -133,9 +133,7 @@ className: 'circster', initialize: function(options) { - this.total_gap = options.total_gap; this.genome = options.genome; - this.dataset_arc_height = options.dataset_arc_height; this.track_gap = 10; this.label_arc_height = 50; this.scale = 1; @@ -145,7 +143,10 @@ // When tracks added to/removed from model, update view. this.model.get('drawables').on('add', this.add_track, this); this.model.get('drawables').on('remove', this.remove_track, this); - this.get_circular_tracks(); + + // When config settings change, update view. + var vis_config = this.model.get('config'); + vis_config.get('arc_dataset_height').on('change:value', this.update_track_bounds, this); }, // HACKs: using track_type for circular/chord distinction in the functions below for now. @@ -172,22 +173,22 @@ * Returns a list of circular tracks' radius bounds. */ get_tracks_bounds: function() { - var circular_tracks = this.get_circular_tracks(); - dataset_arc_height = this.dataset_arc_height, + var circular_tracks = this.get_circular_tracks(), + dataset_arc_height = this.model.get('config').get_value('arc_dataset_height'), min_dimension = Math.min(this.$el.width(), this.$el.height()), // Compute radius start based on model, will be centered // and fit entirely inside element by default. radius_start = min_dimension / 2 - - circular_tracks.length * (this.dataset_arc_height + this.track_gap) - + circular_tracks.length * (dataset_arc_height + this.track_gap) - (this.label_arc_height + this.track_gap), // Compute range of track starting radii. - tracks_start_radii = d3.range(radius_start, min_dimension / 2, this.dataset_arc_height + this.track_gap); + tracks_start_radii = d3.range(radius_start, min_dimension / 2, dataset_arc_height + this.track_gap); // Map from track start to bounds. var self = this; return _.map(tracks_start_radii, function(radius) { - return [radius, radius + self.dataset_arc_height]; + return [radius, radius + dataset_arc_height]; }); }, @@ -196,11 +197,11 @@ */ render: function() { var self = this, - dataset_arc_height = this.dataset_arc_height, width = self.$el.width(), height = self.$el.height(), circular_tracks = this.get_circular_tracks(), chords_tracks = this.get_chord_tracks(), + total_gap = self.model.get('config').get_value('total_gap'), tracks_bounds = this.get_tracks_bounds(), // Set up SVG element. @@ -249,7 +250,7 @@ track: track, radius_bounds: tracks_bounds[index], genome: self.genome, - total_gap: self.total_gap + total_gap: total_gap }); view.render(); @@ -265,7 +266,7 @@ track: track, radius_bounds: tracks_bounds[0], genome: self.genome, - total_gap: self.total_gap + total_gap: total_gap }); view.render(); @@ -288,7 +289,7 @@ track: new CircsterLabelTrack(), radius_bounds: track_bounds, genome: self.genome, - total_gap: self.total_gap + total_gap: total_gap }); this.label_track_view.render(); @@ -298,6 +299,8 @@ * Render a single track on the outside of the current visualization. */ add_track: function(new_track) { + var total_gap = this.model.get('config').get_value('total_gap'); + if (new_track.get('track_type') === 'DiagonalHeatmapTrack') { // Added chords track. var innermost_radius_bounds = this.circular_views[0].radius_bounds, @@ -306,7 +309,7 @@ track: new_track, radius_bounds: innermost_radius_bounds, genome: this.genome, - total_gap: this.total_gap + total_gap: total_gap }); new_view.render(); this.chords_views.push(new_view); @@ -332,7 +335,7 @@ track: new_track, radius_bounds: new_track_bounds[track_index], genome: this.genome, - total_gap: this.total_gap + total_gap: total_gap }); track_view.render(); this.circular_views.push(track_view); @@ -358,6 +361,14 @@ _.each(this.circular_views, function(track_view, i) { track_view.update_radius_bounds(new_track_bounds[i]); }); + }, + + update_track_bounds: function() { + // Recompute and update track bounds. + var new_track_bounds = this.get_tracks_bounds(); + _.each(this.circular_views, function(track_view, i) { + track_view.update_radius_bounds(new_track_bounds[i]); + }); } }); @@ -630,7 +641,7 @@ var chroms_info = this.genome.get_chroms_info(), pie_layout = d3.layout.pie().value(function(d) { return d.len; }).sort(null), init_arcs = pie_layout(chroms_info), - gap_per_chrom = this.total_gap / chroms_info.length, + gap_per_chrom = 2 * Math.PI * this.total_gap / chroms_info.length, chrom_arcs = _.map(init_arcs, function(arc, index) { // For short chroms, endAngle === startAngle. var new_endAngle = arc.endAngle - gap_per_chrom; @@ -969,22 +980,25 @@ { initialize: function () { - // configure visualization + // -- Configure visualization -- var genome = new visualization.Genome(galaxy_config.app.genome), - vis = new visualization.GenomeVisualization(galaxy_config.app.viz_config), - viz_view = new CircsterView( - { - // view pane - el : $('#center .unified-panel-body'), - - // gaps are difficult to set because it very dependent on chromosome size and organization. - total_gap : 2 * Math.PI * 0.4, - genome : genome, - model : vis, - dataset_arc_height : 25 - }); + vis = new visualization.GenomeVisualization(galaxy_config.app.viz_config); + + // Add Circster-specific config options. + vis.get('config').add([ + { key: 'arc_dataset_height', label: 'Arc Dataset Height', type: 'int', value: 25, view: 'circster' }, + { key: 'total_gap', label: 'Gap [0-1]', type: 'float', value: 0.4, view: 'circster', hidden: true } + ]); + + var viz_view = new CircsterView( + { + // view pane + el : $('#center .unified-panel-body'), + genome : genome, + model : vis + }); - // render vizualization + // Render vizualization viz_view.render(); // setup title @@ -1002,6 +1016,15 @@ } }, { + icon_class: 'gear', title: 'Settings', on_click: function() + { + var view = new config.ConfigSettingCollectionView({ + collection: vis.get('config') + }); + view.render_in_modal('Configure Visualization'); + } + }, + { icon_class: 'disk--arrow', title: 'Save', on_click: function() { // show saving dialog box Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.
participants (1)
-
commits-noreply＠bitbucket.org