mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-10-25 10:24:38 +08:00
Viz client-side framework: generalize add_datasets function and change name to select_datasets, general code cleanup, and packed scripts.
This commit is contained in:
Jeremy Goecks
@@ -1 +1 @@
|
||||
(function(){var b=Handlebars.template,a=Handlebars.templates=Handlebars.templates||{};a["template-visualization-chartSettings"]=b(function(f,m,e,l,k){e=e||f.helpers;var i="",c,h,g="function",j=this.escapeExpression,n=this;function d(p,o){return"checked"}i+='<p class="help-text">\n Use the following controls to how the chart is displayed.\n The slide controls can be moved by the mouse or, if the \'handle\' is in focus, your keyboard\'s arrow keys.\n Move the focus between controls by using the tab or shift+tab keys on your keyboard.\n Use the \'Draw\' button to render (or re-render) the chart with the current settings.\n </p>\n \n <div id="maxDataPoints" class="form-input numeric-slider-input">\n <label for="maxDataPoints">Maximum data points allowed on graph: </label>\n <div class="slider-output">';h=e.maxDataPoints;if(h){c=h.call(m,{hash:{}})}else{c=m.maxDataPoints;c=typeof c===g?c():c}i+=j(c)+'</div>\n <div class="slider"></div>\n <p class="form-help help-text-small">\n Change the maximum number of data points displayable on this graph (higher values will\n load significantly slower)\n </p>\n </div>\n\n <div id="datapointSize" class="form-input numeric-slider-input">\n <label for="datapointSize">Size of data point: </label>\n <div class="slider-output">';h=e.datapointSize;if(h){c=h.call(m,{hash:{}})}else{c=m.datapointSize;c=typeof c===g?c():c}i+=j(c)+'</div>\n <div class="slider"></div>\n <p class="form-help help-text-small">\n Size of the graphic representation of each data point\n </p>\n </div>\n\n <div id="entryAnimDuration" class="form-input checkbox-input">\n <label for="animated">Animate graph transitions?: </label>\n <input type="checkbox" id="animated" class="checkbox control" value="';c=m.entryAnimDuration;c=e["if"].call(m,c,{hash:{},inverse:n.noop,fn:n.program(1,d,k)});if(c||c===0){i+=c}i+='" />\n <p class="form-help help-text-small">\n Uncheck this to disable the animations used on the graph\n </p>\n </div>\n\n <div id="width" class="form-input numeric-slider-input">\n <label for="width">Graph width: </label>\n <div class="slider-output">';h=e.width;if(h){c=h.call(m,{hash:{}})}else{c=m.width;c=typeof c===g?c():c}i+=j(c)+'</div>\n <div class="slider"></div>\n <p class="form-help help-text-small">\n (not including graph margins and axes)\n </p>\n </div>\n\n <div id="height" class="form-input numeric-slider-input">\n <label for="height">Graph height: </label>\n <div class="slider-output">';h=e.height;if(h){c=h.call(m,{hash:{}})}else{c=m.height;c=typeof c===g?c():c}i+=j(c)+'</div>\n <div class="slider"></div>\n <p class="form-help help-text-small">\n (not including graph margins and axes)\n </p>\n </div>\n\n <div id="X-axis-label"class="text-input form-input">\n <label for="X-axis-label">Re-label the X axis: </label>\n <input type="text" name="X-axis-label" id="X-axis-label" value="';h=e.xLabel;if(h){c=h.call(m,{hash:{}})}else{c=m.xLabel;c=typeof c===g?c():c}i+=j(c)+'" />\n <p class="form-help help-text-small"></p>\n </div>\n\n <div id="Y-axis-label" class="text-input form-input">\n <label for="Y-axis-label">Re-label the Y axis: </label>\n <input type="text" name="Y-axis-label" id="Y-axis-label" value="';h=e.yLabel;if(h){c=h.call(m,{hash:{}})}else{c=m.yLabel;c=typeof c===g?c():c}i+=j(c)+'" />\n <p class="form-help help-text-small"></p>\n </div>\n\n <input id="render-button" type="button" value="Draw" />';return i})})();
|
||||
(function(){var b=Handlebars.template,a=Handlebars.templates=Handlebars.templates||{};a["template-visualization-chartSettings"]=b(function(f,m,e,l,k){e=e||f.helpers;var i="",c,h,g="function",j=this.escapeExpression,n=this;function d(p,o){return"checked"}i+='<p class="help-text">\n Use the following controls to how the chart is displayed.\n The slide controls can be moved by the mouse or, if the \'handle\' is in focus, your keyboard\'s arrow keys.\n Move the focus between controls by using the tab or shift+tab keys on your keyboard.\n Use the \'Draw\' button to render (or re-render) the chart with the current settings.\n </p>\n \n <div id="maxDataPoints" class="form-input numeric-slider-input">\n <label for="maxDataPoints">Maximum data points allowed on graph: </label>\n <div class="slider-output">';h=e.maxDataPoints;if(h){c=h.call(m,{hash:{}})}else{c=m.maxDataPoints;c=typeof c===g?c():c}i+=j(c)+'</div>\n <div style="clear: both;"></div>\n <div class="slider"></div>\n <p class="form-help help-text-small">\n Change the maximum number of data points displayable on this graph (higher values will\n load significantly slower)\n </p>\n </div>\n\n <div id="datapointSize" class="form-input numeric-slider-input">\n <label for="datapointSize">Size of data point: </label>\n <div class="slider-output">';h=e.datapointSize;if(h){c=h.call(m,{hash:{}})}else{c=m.datapointSize;c=typeof c===g?c():c}i+=j(c)+'</div>\n <div class="slider"></div>\n <p class="form-help help-text-small">\n Size of the graphic representation of each data point\n </p>\n </div>\n\n <div id="entryAnimDuration" class="form-input checkbox-input">\n <label for="animated">Animate graph transitions?: </label>\n <input type="checkbox" id="animated" class="checkbox control" value="';c=m.entryAnimDuration;c=e["if"].call(m,c,{hash:{},inverse:n.noop,fn:n.program(1,d,k)});if(c||c===0){i+=c}i+='" />\n <p class="form-help help-text-small">\n Uncheck this to disable the animations used on the graph\n </p>\n </div>\n\n <div id="width" class="form-input numeric-slider-input">\n <label for="width">Graph width: </label>\n <div class="slider-output">';h=e.width;if(h){c=h.call(m,{hash:{}})}else{c=m.width;c=typeof c===g?c():c}i+=j(c)+'</div>\n <div class="slider"></div>\n <p class="form-help help-text-small">\n (not including graph margins and axes)\n </p>\n </div>\n\n <div id="height" class="form-input numeric-slider-input">\n <label for="height">Graph height: </label>\n <div class="slider-output">';h=e.height;if(h){c=h.call(m,{hash:{}})}else{c=m.height;c=typeof c===g?c():c}i+=j(c)+'</div>\n <div class="slider"></div>\n <p class="form-help help-text-small">\n (not including graph margins and axes)\n </p>\n </div>\n\n <div id="X-axis-label"class="text-input form-input">\n <label for="X-axis-label">Re-label the X axis: </label>\n <input type="text" name="X-axis-label" id="X-axis-label" value="';h=e.xLabel;if(h){c=h.call(m,{hash:{}})}else{c=m.xLabel;c=typeof c===g?c():c}i+=j(c)+'" />\n <p class="form-help help-text-small"></p>\n </div>\n\n <div id="Y-axis-label" class="text-input form-input">\n <label for="Y-axis-label">Re-label the Y axis: </label>\n <input type="text" name="Y-axis-label" id="Y-axis-label" value="';h=e.yLabel;if(h){c=h.call(m,{hash:{}})}else{c=m.yLabel;c=typeof c===g?c():c}i+=j(c)+'" />\n <p class="form-help help-text-small"></p>\n </div>\n\n <input id="render-button" type="button" value="Draw" />';return i})})();
|
||||
+1
-1
@@ -1 +1 @@
|
||||
(function(){var b=Handlebars.template,a=Handlebars.templates=Handlebars.templates||{};a["template-visualization-scatterplotControlForm"]=b(function(g,n,f,m,l){f=f||g.helpers;var j="",d,i,h="function",k=this.escapeExpression,o=this;function e(t,s){var q="",r,p;q+='\n <option value="';p=f.index;if(p){r=p.call(t,{hash:{}})}else{r=t.index;r=typeof r===h?r():r}q+=k(r)+'">';p=f.name;if(p){r=p.call(t,{hash:{}})}else{r=t.name;r=typeof r===h?r():r}q+=k(r)+"</option>\n ";return q}function c(t,s){var q="",r,p;q+='\n <option value="';p=f.index;if(p){r=p.call(t,{hash:{}})}else{r=t.index;r=typeof r===h?r():r}q+=k(r)+'">';p=f.name;if(p){r=p.call(t,{hash:{}})}else{r=t.name;r=typeof r===h?r():r}q+=k(r)+"</option>\n ";return q}j+='\n<div id="loading-indicator" style="display: none;">\n <img class="loading-img" src="';i=f.loadingIndicatorImagePath;if(i){d=i.call(n,{hash:{}})}else{d=n.loadingIndicatorImagePath;d=typeof d===h?d():d}j+=k(d)+'" />\n <span class="loading-message"></span>\n</div>\n\n';j+='\n<div id="chart-settings">\n\n ';j+='\n <div id="x-column-input">\n <label for="">Data column for X: </label>\n <select name="x-column">\n ';d=n.availableColumns;d=f.each.call(n,d,{hash:{},inverse:o.noop,fn:o.program(1,e,l)});if(d||d===0){j+=d}j+='\n </select>\n </div>\n <div id="y-column-input">\n <label for="">Data column for Y: </label>\n <select name="y-column">\n ';d=n.availableColumns;d=f.each.call(n,d,{hash:{},inverse:o.noop,fn:o.program(3,c,l)});if(d||d===0){j+=d}j+='\n </select>\n </div>\n \n <input id="render-button" type="button" value="Draw" />\n <div class="clear"></div>\n</div>';return j})})();
|
||||
(function(){var b=Handlebars.template,a=Handlebars.templates=Handlebars.templates||{};a["template-visualization-scatterplotControlForm"]=b(function(g,n,f,m,l){f=f||g.helpers;var j="",d,i,h="function",k=this.escapeExpression,p=this;function e(u,t){var r="",s,q;r+='\n <option value="';q=f.index;if(q){s=q.call(u,{hash:{}})}else{s=u.index;s=typeof s===h?s():s}r+=k(s)+'">';q=f.name;if(q){s=q.call(u,{hash:{}})}else{s=u.name;s=typeof s===h?s():s}r+=k(s)+"</option>\n ";return r}function c(u,t){var r="",s,q;r+='\n <option value="';q=f.index;if(q){s=q.call(u,{hash:{}})}else{s=u.index;s=typeof s===h?s():s}r+=k(s)+'">';q=f.name;if(q){s=q.call(u,{hash:{}})}else{s=u.name;s=typeof s===h?s():s}r+=k(s)+"</option>\n ";return r}function o(u,t){var r="",s,q;r+='\n <option value="';q=f.index;if(q){s=q.call(u,{hash:{}})}else{s=u.index;s=typeof s===h?s():s}r+=k(s)+'">';q=f.name;if(q){s=q.call(u,{hash:{}})}else{s=u.name;s=typeof s===h?s():s}r+=k(s)+"</option>\n ";return r}j+='\n\n<ul class="nav nav-tabs">\n <li class="active">\n <a data-toggle="tab" href="#data-settings">Data Controls</a>\n </li>\n <li><a data-toggle="tab" href="#chart-settings">Plot Controls</a></li>\n <li><a data-toggle="tab" href="#chart-stats">Statistics</a></li>\n</ul>\n\n';j+='\n<div class="tab-content">\n<div id="data-settings" class="tab-pane active">\n\n <p class="help-text">\n Use the following controls to change the data used by the chart.\n Use the \'Draw\' button to render (or re-render) the chart with the current settings.\n </p>\n \n ';j+='\n <div class="column-select">\n <label for="X-select">Data column for X: </label>\n <select name="X" id="X-select">\n ';d=n.numericColumns;d=f.each.call(n,d,{hash:{},inverse:p.noop,fn:p.program(1,e,l)});if(d||d===0){j+=d}j+='\n </select>\n </div>\n <div class="column-select">\n <label for="Y-select">Data column for Y: </label>\n <select name="Y" id="Y-select">\n ';d=n.numericColumns;d=f.each.call(n,d,{hash:{},inverse:p.noop,fn:p.program(3,c,l)});if(d||d===0){j+=d}j+="\n </select>\n </div>\n \n ";j+='\n <div id="include-id">\n <label for="include-id-checkbox">Include a third column as data point IDs?</label>\n <input type="checkbox" name="include-id" id="include-id-checkbox" />\n <p class="help-text-small">\n These will be displayed (along with the x and y values) when you hover over\n a data point.\n </p>\n </div>\n <div class="column-select" style="display: none">\n <label for="ID-select">Data column for IDs: </label>\n <select name="ID" id="ID-select">\n ';d=n.allColumns;d=f.each.call(n,d,{hash:{},inverse:p.noop,fn:p.program(5,o,l)});if(d||d===0){j+=d}j+='\n </select>\n </div>\n \n <input id="render-button" type="button" value="Draw" />\n <input id="save-button" type="button" value="Download Plot as SVG" style="display: none;" />\n <div class="clear"></div>\n</div>\n\n<div id="chart-settings" class="tab-pane">\n</div>\n\n<div id="chart-stats" class="tab-pane">\n</div>\n</div>';j+="\n\n";j+='\n<div id="loading-indicator" style="display: none;">\n <img class="loading-img" src="';i=f.loadingIndicatorImagePath;if(i){d=i.call(n,{hash:{}})}else{d=n.loadingIndicatorImagePath;d=typeof d===h?d():d}j+=k(d)+'" />\n <span class="loading-message">';i=f.message;if(i){d=i.call(n,{hash:{}})}else{d=n.message;d=typeof d===h?d():d}j+=k(d)+"</span>\n</div>";return j})})();
|
||||
@@ -0,0 +1 @@
|
||||
function LazyDataLoader(b){var a=this;jQuery.extend(a,LoggableMixin);jQuery.extend(a,{total:undefined,url:undefined,currentIntervalId:undefined,loadedPartialEvent:undefined,loadedAllEvent:undefined,data:[],delay:500,start:0,size:1000,initialize:function(c){jQuery.extend(a,c);if(c.hasOwnProperty("initialize")){c.initialize.call(a,c)}if(!a.total){throw (a+" requires a total (total size of the data)")}if(!a.url){throw (a+" requires a url")}this.log(this+" initialized:",a)},buildUrl:function(d,c){return a.url+"&"+jQuery.param({start_val:d,max_vals:c})},ajaxErrorFn:function(e,c,d){alert(a+" ERROR:"+c+"\n"+d)},load:function(d){function c(g,f){a.log(a+".loadHelper, start:",g,"size:",f);var e=a.buildUrl(g,f);a.log("\t url:",e);jQuery.ajax({url:a.buildUrl(g,f),dataType:"json",error:function(j,h,i){a.log("\t ajax error, status:",h,"error:",i);if(a.currentIntervalId){clearInterval(a.currentIntervalId)}a.ajaxErrorFn(j,h,i)},success:function(h){var i=g+f,j=Math.min(a.total-i,a.size);a.log("\t ajax success, next:",i,"remainder:",j);a.data.push(h);if(a.loadedPartialEvent){a.log("\t firing:",a.loadedPartialEvent);$(a).trigger(a.loadedPartialEvent,h,g,f)}if(j>0){a.currentIntervalId=setTimeout(function(){c(i,j)},a.delay);a.log("\t currentIntervalId:",a.currentIntervalId)}else{a.log(a+".loadHelper, has finished:",a.data);if(a.loadedAllEvent){a.log("\t firing:",a.loadedAllEvent);$(a).trigger(a.loadedAllEvent,a.data,a.total)}if(d){d(a.data)}}}})}c(a.start,Math.min(a.total,a.size))},toString:function(){return"LazyDataLoader"}});a.initialize(b);return a};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
define(["base","libs/underscore","viz/trackster/slotting","viz/trackster/painters","viz/trackster/tracks"],function(f,c,g,d,b){var a=b.object_from_template;var e=f.Base.extend({initialize:function(h){this.baseURL=h},createButtonMenu:function(){var h=this,j=create_icon_buttons_menu([{icon_class:"plus-button",title:"Add tracks",on_click:function(){b.add_datasets(add_datasets_url,add_track_async_url,function(k){c.each(k,function(l){view.add_drawable(a(l,view,view))})})}},{icon_class:"block--plus",title:"Add group",on_click:function(){view.add_drawable(new b.DrawableGroup(view,view,{name:"New Group"}))}},{icon_class:"bookmarks",title:"Bookmarks",on_click:function(){parent.force_right_panel(($("div#right").css("right")=="0px"?"hide":"show"))}},{icon_class:"globe",title:"Circster",on_click:function(){window.location=h.baseURL+"visualization/circster?id="+view.vis_id}},{icon_class:"disk--arrow",title:"Save",on_click:function(){show_modal("Saving...","progress");var k=[];$(".bookmark").each(function(){k.push({position:$(this).children(".position").text(),annotation:$(this).children(".annotation").text()})});var l=(view.overview_drawable?view.overview_drawable.name:null),m={id:view.vis_id,title:view.name,dbkey:view.dbkey,type:"trackster",datasets:view.to_dict(),viewport:{chrom:view.chrom,start:view.low,end:view.high,overview:l},bookmarks:k};$.ajax({url:galaxy_paths.get("visualization_url"),type:"POST",dataType:"json",data:{vis_json:JSON.stringify(m)}}).success(function(n){hide_modal();view.vis_id=n.vis_id;view.has_changes=false;window.history.pushState({},"",n.url+window.location.hash)}).error(function(){show_modal("Could Not Save","Could not save visualization. Please try again later.",{Close:hide_modal})})}},{icon_class:"cross-circle",title:"Close",on_click:function(){window.location=h.baseURL+"visualization/list"}}],{tooltip_config:{placement:"bottom"}});this.buttonMenu=j;return j},add_bookmarks:function(){var h=this,j=this.baseURL;show_modal("Select dataset for new bookmarks","progress");$.ajax({url:this.baseURL+"/visualization/list_histories",data:{"f-dbkey":view.dbkey},error:function(){alert("Grid failed")},success:function(k){show_modal("Select dataset for new bookmarks",k,{Cancel:function(){hide_modal()},Insert:function(){$("input[name=id]:checked,input[name=ldda_ids]:checked").first().each(function(){var l,m=$(this).val();if($(this).attr("name")==="id"){l={hda_id:m}}else{l={ldda_id:m}}$.ajax({url:this.baseURL+"/visualization/bookmarks_from_dataset",data:l,dataType:"json"}).then(function(n){for(i=0;i<n.data.length;i++){var o=n.data[i];h.add_bookmark(o[0],o[1])}})});hide_modal()}})}})},add_bookmark:function(m,k,h){var o=$("#bookmarks-container"),q=$("<div/>").addClass("bookmark").appendTo(o);var r=$("<div/>").addClass("position").appendTo(q),n=$("<a href=''/>").text(m).appendTo(r).click(function(){view.go_to(m);return false}),l=$("<div/>").text(k).appendTo(q);if(h){var p=$("<div/>").addClass("delete-icon-container").prependTo(q).click(function(){q.slideUp("fast");q.remove();view.has_changes=true;return false}),j=$("<a href=''/>").addClass("icon-button delete").appendTo(p);l.make_text_editable({num_rows:3,use_textarea:true,help_text:"Edit bookmark note"}).addClass("annotation")}view.has_changes=true;return q},create_visualization:function(n,h,m,o,l){var k=this,j=new b.View(n);j.editor=true;$.when(j.load_chroms_deferred).then(function(){if(h){var x=h.chrom,p=h.start,u=h.end,r=h.overview;if(x&&(p!==undefined)&&u){j.change_chrom(x,p,u)}}if(m){var s,q,t;for(var v=0;v<m.length;v++){j.add_drawable(a(m[v],j,j))}}j.update_intro_div();var y;for(var v=0;v<j.drawables.length;v++){if(j.drawables[v].name===r){j.set_overview(j.drawables[v]);break}}if(o){var w;for(var v=0;v<o.length;v++){w=o[v];k.add_bookmark(w.position,w.annotation,l)}}j.has_changes=false});return j},init_keyboard_nav:function(h){$(document).keydown(function(j){if($(j.srcElement).is(":input")){return}switch(j.which){case 37:h.move_fraction(0.25);break;case 38:var k=Math.round(h.viewport_container.height()/15);h.viewport_container.scrollTop(h.viewport_container.scrollTop()-20);break;case 39:h.move_fraction(-0.25);break;case 40:var k=Math.round(h.viewport_container.height()/15);h.viewport_container.scrollTop(h.viewport_container.scrollTop()+20);break}})}});return{object_from_template:a,TracksterUI:e}});
|
||||
define(["base","libs/underscore","viz/trackster/slotting","viz/trackster/painters","viz/trackster/tracks","viz/visualization"],function(g,c,h,e,b,d){var a=b.object_from_template;var f=g.Base.extend({initialize:function(j){this.baseURL=j},createButtonMenu:function(){var j=this,k=create_icon_buttons_menu([{icon_class:"plus-button",title:"Add tracks",on_click:function(){d.select_datasets(select_datasets_url,add_track_async_url,{"f-dbkey":view.dbkey},function(l){c.each(l,function(m){view.add_drawable(a(m,view,view))})})}},{icon_class:"block--plus",title:"Add group",on_click:function(){view.add_drawable(new b.DrawableGroup(view,view,{name:"New Group"}))}},{icon_class:"bookmarks",title:"Bookmarks",on_click:function(){parent.force_right_panel(($("div#right").css("right")=="0px"?"hide":"show"))}},{icon_class:"globe",title:"Circster",on_click:function(){window.location=j.baseURL+"visualization/circster?id="+view.vis_id}},{icon_class:"disk--arrow",title:"Save",on_click:function(){show_modal("Saving...","progress");var l=[];$(".bookmark").each(function(){l.push({position:$(this).children(".position").text(),annotation:$(this).children(".annotation").text()})});var m=(view.overview_drawable?view.overview_drawable.name:null),n={id:view.vis_id,title:view.name,dbkey:view.dbkey,type:"trackster",datasets:view.to_dict(),viewport:{chrom:view.chrom,start:view.low,end:view.high,overview:m},bookmarks:l};$.ajax({url:galaxy_paths.get("visualization_url"),type:"POST",dataType:"json",data:{vis_json:JSON.stringify(n)}}).success(function(o){hide_modal();view.vis_id=o.vis_id;view.has_changes=false;window.history.pushState({},"",o.url+window.location.hash)}).error(function(){show_modal("Could Not Save","Could not save visualization. Please try again later.",{Close:hide_modal})})}},{icon_class:"cross-circle",title:"Close",on_click:function(){window.location=j.baseURL+"visualization/list"}}],{tooltip_config:{placement:"bottom"}});this.buttonMenu=k;return k},add_bookmarks:function(){var j=this,k=this.baseURL;show_modal("Select dataset for new bookmarks","progress");$.ajax({url:this.baseURL+"/visualization/list_histories",data:{"f-dbkey":view.dbkey},error:function(){alert("Grid failed")},success:function(l){show_modal("Select dataset for new bookmarks",l,{Cancel:function(){hide_modal()},Insert:function(){$("input[name=id]:checked,input[name=ldda_ids]:checked").first().each(function(){var m,n=$(this).val();if($(this).attr("name")==="id"){m={hda_id:n}}else{m={ldda_id:n}}$.ajax({url:this.baseURL+"/visualization/bookmarks_from_dataset",data:m,dataType:"json"}).then(function(o){for(i=0;i<o.data.length;i++){var p=o.data[i];j.add_bookmark(p[0],p[1])}})});hide_modal()}})}})},add_bookmark:function(n,l,j){var p=$("#bookmarks-container"),r=$("<div/>").addClass("bookmark").appendTo(p);var s=$("<div/>").addClass("position").appendTo(r),o=$("<a href=''/>").text(n).appendTo(s).click(function(){view.go_to(n);return false}),m=$("<div/>").text(l).appendTo(r);if(j){var q=$("<div/>").addClass("delete-icon-container").prependTo(r).click(function(){r.slideUp("fast");r.remove();view.has_changes=true;return false}),k=$("<a href=''/>").addClass("icon-button delete").appendTo(q);m.make_text_editable({num_rows:3,use_textarea:true,help_text:"Edit bookmark note"}).addClass("annotation")}view.has_changes=true;return r},create_visualization:function(o,j,n,p,m){var l=this,k=new b.View(o);k.editor=true;$.when(k.load_chroms_deferred).then(function(){if(j){var y=j.chrom,q=j.start,v=j.end,s=j.overview;if(y&&(q!==undefined)&&v){k.change_chrom(y,q,v)}}if(n){var t,r,u;for(var w=0;w<n.length;w++){k.add_drawable(a(n[w],k,k))}}k.update_intro_div();var z;for(var w=0;w<k.drawables.length;w++){if(k.drawables[w].name===s){k.set_overview(k.drawables[w]);break}}if(p){var x;for(var w=0;w<p.length;w++){x=p[w];l.add_bookmark(x.position,x.annotation,m)}}k.has_changes=false});return k},init_keyboard_nav:function(j){$(document).keydown(function(k){if($(k.srcElement).is(":input")){return}switch(k.which){case 37:j.move_fraction(0.25);break;case 38:var l=Math.round(j.viewport_container.height()/15);j.viewport_container.scrollTop(j.viewport_container.scrollTop()-20);break;case 39:j.move_fraction(-0.25);break;case 40:var l=Math.round(j.viewport_container.height()/15);j.viewport_container.scrollTop(j.viewport_container.scrollTop()+20);break}})}});return{object_from_template:a,TracksterUI:f}});
|
||||
File diff suppressed because one or more lines are too long
@@ -4,60 +4,6 @@ define( ["libs/underscore", "viz/visualization", "viz/trackster/util",
|
||||
function( _, visualization, util, slotting, painters, data, filters_mod ) {
|
||||
|
||||
var extend = _.extend;
|
||||
var get_random_color = util.get_random_color;
|
||||
|
||||
/**
|
||||
* Use a popup grid to add more datasets.
|
||||
*/
|
||||
var add_datasets = function(dataset_url, add_track_async_url, success_fn) {
|
||||
$.ajax({
|
||||
url: dataset_url,
|
||||
data: { "f-dbkey": view.dbkey },
|
||||
error: function() { alert( "Grid failed" ); },
|
||||
success: function(table_html) {
|
||||
show_modal(
|
||||
"Select datasets for new tracks",
|
||||
table_html, {
|
||||
"Cancel": function() {
|
||||
hide_modal();
|
||||
},
|
||||
"Add": function() {
|
||||
var requests = [];
|
||||
$('input[name=id]:checked,input[name=ldda_ids]:checked').each(function() {
|
||||
var data = {
|
||||
data_type: 'track_config',
|
||||
'hda_ldda': 'hda'
|
||||
},
|
||||
id = $(this).val();
|
||||
if ($(this).attr("name") !== "id") {
|
||||
data.hda_ldda = 'ldda';
|
||||
}
|
||||
requests[requests.length] = $.ajax({
|
||||
url: add_track_async_url + "/" + id,
|
||||
data: data,
|
||||
dataType: "json"
|
||||
});
|
||||
});
|
||||
// To preserve order, wait until there are definitions for all tracks and then add
|
||||
// them sequentially.
|
||||
$.when.apply($, requests).then(function() {
|
||||
// jQuery always returns an Array for arguments, so need to look at first element
|
||||
// to determine whether multiple requests were made and consequently how to
|
||||
// map arguments to track definitions.
|
||||
var track_defs = (arguments[0] instanceof Array ?
|
||||
$.map(arguments, function(arg) { return arg[0]; }) :
|
||||
[ arguments[0] ]
|
||||
);
|
||||
success_fn(track_defs);
|
||||
});
|
||||
hide_modal();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Helper to determine if object is jQuery deferred.
|
||||
@@ -961,7 +907,7 @@ extend( View.prototype, DrawableCollection.prototype, {
|
||||
// Introduction div shown when there are no tracks.
|
||||
this.intro_div = $("<div/>").addClass("intro").appendTo(this.viewport_container).hide();
|
||||
var add_tracks_button = $("<div/>").text("Add Datasets to Visualization").addClass("action-button").appendTo(this.intro_div).click(function () {
|
||||
add_datasets(add_datasets_url, add_track_async_url, function(tracks) {
|
||||
visualization.select_datasets(select_datasets_url, add_track_async_url, function(tracks) {
|
||||
_.each(tracks, function(track) {
|
||||
view.add_drawable( object_from_template(track, view, view) );
|
||||
});
|
||||
@@ -2002,7 +1948,7 @@ extend(DrawableConfig.prototype, {
|
||||
// Use function to fix farb_obj value.
|
||||
(function(fixed_farb_obj) {
|
||||
new_color_icon.click(function() {
|
||||
fixed_farb_obj.setColor(get_random_color());
|
||||
fixed_farb_obj.setColor(util.get_random_color());
|
||||
});
|
||||
})(farb_obj);
|
||||
|
||||
@@ -3548,7 +3494,7 @@ var LineTrack = function (view, container, obj_dict) {
|
||||
track: this,
|
||||
params: [
|
||||
{ key: 'name', label: 'Name', type: 'text', default_value: this.name },
|
||||
{ key: 'color', label: 'Color', type: 'color', default_value: get_random_color() },
|
||||
{ key: 'color', label: 'Color', type: 'color', default_value: util.get_random_color() },
|
||||
{ key: 'min_value', label: 'Min Value', type: 'float', default_value: undefined },
|
||||
{ key: 'max_value', label: 'Max Value', type: 'float', default_value: undefined },
|
||||
{ key: 'mode', type: 'string', default_value: this.mode, hidden: true },
|
||||
@@ -3770,8 +3716,8 @@ var FeatureTrack = function(view, container, obj_dict) {
|
||||
|
||||
// Define and restore track configuration.
|
||||
var
|
||||
block_color = get_random_color(),
|
||||
reverse_strand_color = get_random_color( [ block_color, "#ffffff" ] );
|
||||
block_color = util.get_random_color(),
|
||||
reverse_strand_color = util.get_random_color( [ block_color, "#ffffff" ] );
|
||||
this.config = new DrawableConfig( {
|
||||
track: this,
|
||||
params: [
|
||||
@@ -4144,7 +4090,7 @@ var VcfTrack = function(view, container, obj_dict) {
|
||||
track: this,
|
||||
params: [
|
||||
{ key: 'name', label: 'Name', type: 'text', default_value: this.name },
|
||||
{ key: 'block_color', label: 'Block color', type: 'color', default_value: get_random_color() },
|
||||
{ key: 'block_color', label: 'Block color', type: 'color', default_value: util.get_random_color() },
|
||||
{ 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 },
|
||||
@@ -4171,8 +4117,8 @@ var ReadTrack = function (view, container, obj_dict) {
|
||||
FeatureTrack.call(this, view, container, obj_dict);
|
||||
|
||||
var
|
||||
block_color = get_random_color(),
|
||||
reverse_strand_color = get_random_color( [ block_color, "#ffffff" ] );
|
||||
block_color = util.get_random_color(),
|
||||
reverse_strand_color = util.get_random_color( [ block_color, "#ffffff" ] );
|
||||
this.config = new DrawableConfig( {
|
||||
track: this,
|
||||
params: [
|
||||
@@ -4243,8 +4189,7 @@ return {
|
||||
ReadTrack: ReadTrack,
|
||||
VcfTrack: VcfTrack,
|
||||
CompositeTrack: CompositeTrack,
|
||||
object_from_template: object_from_template,
|
||||
add_datasets: add_datasets
|
||||
object_from_template: object_from_template
|
||||
};
|
||||
|
||||
// End trackster_module encapsulation
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
define( ["base","libs/underscore","viz/trackster/slotting", "viz/trackster/painters", "viz/trackster/tracks" ], function( base, _, slotting, painters, tracks ) {
|
||||
define( ["base","libs/underscore","viz/trackster/slotting", "viz/trackster/painters", "viz/trackster/tracks", "viz/visualization" ],
|
||||
function( base, _, slotting, painters, tracks, visualization ) {
|
||||
|
||||
/************************************************************************
|
||||
* Functions used for creating and managing the Trackster user interface.
|
||||
@@ -19,7 +20,7 @@ var TracksterUI = base.Base.extend({
|
||||
var self = this,
|
||||
menu = create_icon_buttons_menu([
|
||||
{ icon_class: 'plus-button', title: 'Add tracks', on_click: function() {
|
||||
tracks.add_datasets(add_datasets_url, add_track_async_url, function(tracks) {
|
||||
visualization.select_datasets(select_datasets_url, add_track_async_url, { "f-dbkey": view.dbkey }, function(tracks) {
|
||||
_.each(tracks, function(track) {
|
||||
view.add_drawable( object_from_template(track, view, view) );
|
||||
});
|
||||
|
||||
@@ -10,6 +10,61 @@ define( ["libs/underscore", "mvc/data", "viz/trackster/util" ], function(_, data
|
||||
* and models can be used without views.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Use a popup grid to select datasets from histories or libraries. After datasets are selected,
|
||||
* track definitions are obtained from the server and the success_fn is called with the list of
|
||||
* definitions for selected datasets.
|
||||
*/
|
||||
var select_datasets = function(dataset_url, add_track_async_url, filter_params, success_fn) {
|
||||
$.ajax({
|
||||
url: dataset_url,
|
||||
data: filter_params,
|
||||
error: function() { alert( "Grid failed" ); },
|
||||
success: function(table_html) {
|
||||
show_modal(
|
||||
"Select datasets for new tracks",
|
||||
table_html, {
|
||||
"Cancel": function() {
|
||||
hide_modal();
|
||||
},
|
||||
"Add": function() {
|
||||
var requests = [];
|
||||
$('input[name=id]:checked,input[name=ldda_ids]:checked').each(function() {
|
||||
var data = {
|
||||
data_type: 'track_config',
|
||||
'hda_ldda': 'hda'
|
||||
},
|
||||
id = $(this).val();
|
||||
if ($(this).attr("name") !== "id") {
|
||||
data.hda_ldda = 'ldda';
|
||||
}
|
||||
requests[requests.length] = $.ajax({
|
||||
url: add_track_async_url + "/" + id,
|
||||
data: data,
|
||||
dataType: "json"
|
||||
});
|
||||
});
|
||||
// To preserve order, wait until there are definitions for all tracks and then add
|
||||
// them sequentially.
|
||||
$.when.apply($, requests).then(function() {
|
||||
// jQuery always returns an Array for arguments, so need to look at first element
|
||||
// to determine whether multiple requests were made and consequently how to
|
||||
// map arguments to track definitions.
|
||||
var track_defs = (arguments[0] instanceof Array ?
|
||||
$.map(arguments, function(arg) { return arg[0]; }) :
|
||||
[ arguments[0] ]
|
||||
);
|
||||
success_fn(track_defs);
|
||||
});
|
||||
hide_modal();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Helper to determine if object is jQuery deferred.
|
||||
*/
|
||||
@@ -676,7 +731,7 @@ var BackboneTrack = data_mod.Dataset.extend({
|
||||
// Set up data manager.
|
||||
var preloaded_data = this.get('preloaded_data');
|
||||
if (preloaded_data) {
|
||||
preloaded_data = preloaded_data.data
|
||||
preloaded_data = preloaded_data.data;
|
||||
}
|
||||
else {
|
||||
preloaded_data = [];
|
||||
@@ -794,7 +849,8 @@ return {
|
||||
ReferenceTrackDataManager: ReferenceTrackDataManager,
|
||||
TrackBrowserRouter: TrackBrowserRouter,
|
||||
TrackConfig: TrackConfig,
|
||||
Visualization: Visualization
|
||||
Visualization: Visualization,
|
||||
select_datasets: select_datasets
|
||||
};
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user