diff --git a/config/plugins/visualizations/scatterplot/src/scatterplot.js b/config/plugins/visualizations/scatterplot/src/scatterplot.js index 1f1bf5505db..0cc89e940d3 100644 --- a/config/plugins/visualizations/scatterplot/src/scatterplot.js +++ b/config/plugins/visualizations/scatterplot/src/scatterplot.js @@ -20,7 +20,7 @@ var Visualization = Backbone.Model.extend({ /** override urlRoot to handle prefix */ urlRoot: function() { var apiUrl = "api/visualizations"; - return Galaxy.root + apiUrl; + return Galaxy.root_api + apiUrl; }, /** Set up the model, determine if accessible, bind listeners diff --git a/config/plugins/visualizations/scatterplot/static/scatterplot.js b/config/plugins/visualizations/scatterplot/static/scatterplot.js index b78e55d1b27..523503e467d 100644 --- a/config/plugins/visualizations/scatterplot/static/scatterplot.js +++ b/config/plugins/visualizations/scatterplot/static/scatterplot.js @@ -53,6 +53,6 @@ var t;!function(e){"function"==typeof t&&t.amd?t(["jquery"],e):e(jQuery)}(functi },{}],"6wzU":[function(require,module,exports) { require("../../js/transition.js"),require("../../js/alert.js"),require("../../js/button.js"),require("../../js/carousel.js"),require("../../js/collapse.js"),require("../../js/dropdown.js"),require("../../js/modal.js"),require("../../js/tooltip.js"),require("../../js/popover.js"),require("../../js/scrollspy.js"),require("../../js/tab.js"),require("../../js/affix.js"); },{"../../js/transition.js":"Lu+Q","../../js/alert.js":"s51k","../../js/button.js":"m5Wh","../../js/carousel.js":"x66a","../../js/collapse.js":"laCn","../../js/dropdown.js":"hxo1","../../js/modal.js":"mEQU","../../js/tooltip.js":"1/9l","../../js/popover.js":"oOvE","../../js/scrollspy.js":"gnpq","../../js/tab.js":"vQEO","../../js/affix.js":"V1TA"}],"XQj0":[function(require,module,exports) { -"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.scatterplot=s;var t=l(require("jquery"));require("./jqglobals");var e=n(require("backbone")),a=n(require("d3")),i=n(require("underscore"));function n(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var a in t)if(Object.prototype.hasOwnProperty.call(t,a)){var i=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(t,a):{};i.get||i.set?Object.defineProperty(e,a,i):e[a]=t[a]}return e.default=t,e}function l(t){return t&&t.__esModule?t:{default:t}}require("../../../../../client/galaxy/scripts/ui/peek-column-selector"),require("../../../../../client/galaxy/scripts/ui/pagination"),require("jquery-ui-bundle"),require("bootstrap");var r=e.Model.extend({defaults:{config:{}},urlRoot:function(){return Galaxy.root+"api/visualizations"},initialize:function(t){i.isObject(t.config)&&i.isObject(this.defaults.config)&&i.defaults(t.config,this.defaults.config),this._setUpListeners()},_setUpListeners:function(){},set:function(t,a){if("config"===t){var n=this.get("config");i.isObject(n)&&(a=i.extend(i.clone(n),a))}return e.Model.prototype.set.call(this,t,a),this},toString:function(){var t=this.get("id")||"";return this.get("title")&&(t+=":".concat(this.get("title"))),"Visualization(".concat(t,")")}});function s(e,i,n){var l=function(t,e){return"translate("+t+","+e+")"},r=function(t,e){return t[i.xColumn]},s=function(t,e){return t[i.yColumn]},o={x:{extent:a.extent(n,r)},y:{extent:a.extent(n,s)}},d={x:a.scale.linear().domain(o.x.extent).range([0,i.width]),y:a.scale.linear().domain(o.y.extent).range([i.height,0])},c=a.behavior.zoom().x(d.x).y(d.y).scaleExtent([1,30]).scale(i.scale||1).translate(i.translate||[0,0]),h=a.select(e).attr("class","scatterplot").attr("width","100%").attr("height",i.height+(i.margin.top+i.margin.bottom)),u=h.append("g").attr("class","content").attr("transform",l(i.margin.left,i.margin.top)).call(c);u.append("rect").attr("class","zoom-rect").attr("width",i.width).attr("height",i.height).style("fill","transparent");var p={x:{},y:{}};p.x.fn=a.svg.axis().orient("bottom").scale(d.x).ticks(i.xTicks).tickFormat(a.format("s")),p.y.fn=a.svg.axis().orient("left").scale(d.y).ticks(i.yTicks).tickFormat(a.format("s")),p.x.g=u.append("g").attr("class","x axis").attr("transform",l(0,i.height)).call(p.x.fn),p.y.g=u.append("g").attr("class","y axis").call(p.y.fn);var f,g,m;function v(){var t={v:{},h:{}};return t.v.lines=u.selectAll("line.v-grid-line").data(d.x.ticks(p.x.fn.ticks()[0])),t.v.lines.enter().append("svg:line").classed("grid-line v-grid-line",!0),t.v.lines.attr("x1",d.x).attr("x2",d.x).attr("y1",0).attr("y2",i.height),t.v.lines.exit().remove(),t.h.lines=u.selectAll("line.h-grid-line").data(d.y.ticks(p.y.fn.ticks()[0])),t.h.lines.enter().append("svg:line").classed("grid-line h-grid-line",!0),t.h.lines.attr("x1",0).attr("x2",i.width).attr("y1",d.y).attr("y2",d.y),t.h.lines.exit().remove(),t}p.x.label=h.append("text").attr("id","x-axis-label").attr("class","axis-label").text(i.xLabel).attr("text-anchor","middle").attr("dominant-baseline","text-after-edge").attr("x",i.width/2+i.margin.left).attr("y",i.height+i.margin.bottom+i.margin.top-6),p.y.label=h.append("text").attr("id","y-axis-label").attr("class","axis-label").text(i.yLabel).attr("text-anchor","middle").attr("dominant-baseline","text-before-edge").attr("x",6).attr("y",i.height/2).attr("transform",(f=-90,g=6,m=i.height/2,"rotate("+f+","+g+","+m+")")),p.redraw=function(){h.select(".x.axis").call(p.x.fn),h.select(".y.axis").call(p.y.fn)},v();var b=u.selectAll(".glyph").data(n).enter().append("svg:circle").classed("glyph",!0).attr("cx",function(t,e){return d.x(r(t,e))}).attr("cy",function(t,e){return d.y(s(t,e))}).attr("r",0);function x(){return b.attr("cx",function(t,e){return d.x(r(t,e))}).attr("cy",function(t,e){return d.y(s(t,e))}).style("display","block").filter(function(t,e){var n=a.select(this).attr("cx"),l=a.select(this).attr("cy");return n<0||n>i.width||(l<0||l>i.height)}).style("display","none")}b.transition().duration(i.animDuration).attr("r",i.datapointSize),x(),c.on("zoom",function(e,a,i){(0,t.default)(".chart-info-box").remove(),p.redraw(),x(),v(),(0,t.default)(h.node()).trigger("zoom.scatterplot",{scale:c.scale(),translate:c.translate()})}),b.on("mouseover",function(e,n){var l=a.select(this);l.classed("highlight",!0).style("fill","red").style("fill-opacity",1),u.append("line").attr("stroke","red").attr("stroke-width",1).attr("x1",l.attr("cx")-i.datapointSize).attr("y1",l.attr("cy")).attr("x2",0).attr("y2",l.attr("cy")).classed("hoverline",!0),l.attr("cy")',void 0!==i.idColumn?"
"+n[i.idColumn]+"
":"","
",r(n),"
","
",s(n),"
",""].join("")).css({top:e,left:a,"z-index":2})}(o.top,o.right,e)),(0,t.default)(h.node()).trigger("mouseover-datapoint.scatterplot",[this,e,n])}),b.on("mouseout",function(){a.select(this).classed("highlight",!1).style("fill","black").style("fill-opacity",.2),u.selectAll(".hoverline").remove(),(0,t.default)(".chart-info-box").remove()})}var o=e.View.extend({className:"scatterplot-control-form",initialize:function(t){if(this.model||(this.model=new r({type:"scatterplot"})),!t||!t.dataset)throw new Error("ScatterplotConfigEditor requires a dataset");this.dataset=t.dataset,this.display=new d({dataset:t.dataset,model:this.model})},render:function(){this.$el.empty().append(o.templates.mainLayout({})),this.model.id&&(this.$el.find(".copy-btn").show(),this.$el.find(".save-btn").text("Update saved")),this.$el.find("[title]").tooltip(),this._render_dataControl(),this._render_chartControls(),this._render_chartDisplay();var t=this.model.get("config");return this.model.id&&i.isFinite(t.xColumn)&&i.isFinite(t.yColumn)&&this.renderChart(),this},_getColumnIndecesByType:function(){var t={numeric:[],text:[],all:[]};return i.each(this.dataset.metadata_column_types||[],function(e,a){"int"===e||"float"===e?t.numeric.push(a):"str"!==e&&"list"!==e||t.text.push(a),t.all.push(a)}),t.numeric.length<2&&(t.numeric=[]),t},_render_dataControl:function(t){t=t||this.$el;var e=this,a=this.model.get("config"),i=this._getColumnIndecesByType(),n=t.find(".tab-pane#data-control");return n.html(o.templates.dataControl({peek:this.dataset.peek})),n.find(".peek").peekColumnSelector({controls:[{label:"X Column",id:"xColumn",selected:a.xColumn,disabled:i.text},{label:"Y Column",id:"yColumn",selected:a.yColumn,disabled:i.text},{label:"ID Column",id:"idColumn",selected:a.idColumn}]}).on("peek-column-selector.change",function(t,a){e.model.set("config",a)}).on("peek-column-selector.rename",function(t,e){}),n.find("[title]").tooltip(),n},_render_chartControls:function(e){e=e||this.$el;var a=this,n=this.model.get("config"),l=e.find("#chart-control");l.html(o.templates.chartControl(n));var r={datapointSize:{min:2,max:10,step:1},width:{min:200,max:800,step:20},height:{min:200,max:800,step:20}};function s(){var e=(0,t.default)(this),n=e.slider("value");a.model.set("config",i.object([[e.parent().data("config-key"),n]])),e.siblings(".slider-output").text(n)}l.find(".numeric-slider-input").each(function(){var e=(0,t.default)(this),a=e.attr("data-config-key"),l=i.extend(r[a],{value:n[a],change:s,slide:s});e.find(".slider").slider(l),e.children(".slider-output").text(n[a])});var d=this.dataset.metadata_column_names||[],c=n.xLabel||d[n.xColumn]||"X",h=n.yLabel||d[n.yColumn]||"Y";return l.find('input[name="X-axis-label"]').val(c).on("change",function(){a.model.set("config",{xLabel:(0,t.default)(this).val()})}),l.find('input[name="Y-axis-label"]').val(h).on("change",function(){a.model.set("config",{yLabel:(0,t.default)(this).val()})}),l.find("[title]").tooltip(),l},_render_chartDisplay:function(t){var e=(t=t||this.$el).find(".tab-pane#chart-display");return this.display.setElement(e),this.display.render(),e.find("[title]").tooltip(),e},events:{"change #include-id-checkbox":"toggleThirdColumnSelector","click #data-control .render-button":"renderChart","click #chart-control .render-button":"renderChart","click .save-btn":"saveVisualization"},saveVisualization:function(){var t=this;this.model.save().fail(function(e,a,i){console.error(e,a,i),t.trigger("save:error",this),alert("Error loading data:\n"+e.responseText)}).then(function(){t.display.render()})},toggleThirdColumnSelector:function(){this.$el.find('select[name="idColumn"]').parent().toggle()},renderChart:function(){this.$el.find(".nav li.disabled").removeClass("disabled"),this.$el.find("ul.nav").find('a[href="#chart-display"]').tab("show"),this.display.fetchData()},toString:function(){return"ScatterplotConfigEditor("+(this.dataset?this.dataset.id:"")+")"}});o.templates={mainLayout:i.template(['
','",'
','
','
','
',"
","
"].join("")),dataControl:i.template(['

',"Use the following control to change which columns are used by the chart. Click any cell ","from the last three rows of the table to select the column for the appropriate data. ","Use the 'Draw' button to render (or re-render) the chart with the current settings. ","

",'",'
','
<%= peek %>
',"
",'

',"Note: If it can be determined from the dataset's filetype that a column is not numeric, ","that column choice may be disabled for either the x or y axis.","

",''].join("")),chartControl:i.template(['

',"Use the following controls to how the chart is displayed. The slide controls can be moved ","by the mouse or, if the 'handle' is in focus, your keyboard's arrow keys. ","Move the focus between controls by using the tab or shift+tab keys on your keyboard. ","Use the 'Draw' button to render (or re-render) the chart with the current settings. ","

",'
','','
<%- datapointSize %>
','
','

',"Size of the graphic representation of each data point","

","
",'
','','
<%- width %>
','
','

',"(not including chart margins and axes)","

","
",'
','','
<%- height %>
','
','

',"(not including chart margins and axes)","

","
",'
','','','

',"
",'
','','','

',"
",''].join(""))};var d=e.View.extend({initialize:function(t){this.data=null,this.dataset=t.dataset,this.lineCount=this.dataset.metadata_data_lines||null},fetchData:function(){this.showLoadingIndicator();var e=this,a=this.model.get("config"),i=window.parent&&window.parent.galaxy_config?window.parent.galaxy_config.root:"/",n=t.default.getJSON(i+"api/datasets/"+this.dataset.id,{data_type:"raw_data",provider:"dataset-column",limit:a.pagination.perPage,offset:a.pagination.currPage*a.pagination.perPage});return n.done(function(t){e.data=t.data,e.trigger("data:fetched",e),e.renderData()}),n.fail(function(t,a,i){console.error(t,a,i),e.trigger("data:error",e),alert("Error loading data:\n"+t.responseText)}),n},showLoadingIndicator:function(){this.$el.find(".scatterplot-data-info").html(['
','','loading...',"
"].join(""))},template:function(){return['
','
','

','','',"
",'
','
',"
","
","",'
'].join("")},render:function(){return this.$el.addClass("scatterplot-display").html(this.template()),this.data&&this.renderData(),this},renderData:function(){this.renderLeftControls(),this.renderRightControls(),this.renderPlot(this.data),this.getStats()},renderLeftControls:function(){var t=this,e=this.model.get("config");return this.$el.find(".controls .left .page-control").pagination({startingPage:e.pagination.currPage,perPage:e.pagination.perPage,totalDataSize:this.lineCount,currDataSize:this.data.length}).off().on("pagination.page-change",function(a,i){e.pagination.currPage=i,t.model.set("config",{pagination:e.pagination}),t.resetZoom(),t.fetchData()}),this},renderRightControls:function(){var t=this;this.setLineInfo(this.data),this.$el.find(".stats-toggle-btn").off().click(function(){t.toggleStats()}),this.$el.find(".rerender-btn").off().click(function(){t.resetZoom(),t.renderPlot(this.data)})},renderPlot:function(){var t=this,e=this.$el.find("svg");this.toggleStats(!1),e.off().empty().show().on("zoom.scatterplot",function(e,a){t.model.set("config",a)}),s(e.get(0),this.model.get("config"),this.data)},setLineInfo:function(t,e){if(t){var a=this.model.get("config"),i=this.lineCount||"an unknown total",n=a.pagination.currPage*a.pagination.perPage,l=n+t.length;this.$el.find(".controls p.scatterplot-data-info").text([n+1,"to",l,"of",i].join(" "))}else this.$el.find(".controls p.scatterplot-data-info").html(e||"");return this},resetZoom:function(t,e){return t=void 0!==t?t:1,e=void 0!==e?e:[0,0],this.model.set("config",{scale:t,translate:e}),this},getStats:function(){if(this.data){var t=this,e=this.model.get("config"),a=new window.Worker("worker-stats.js");a.postMessage({data:this.data,keys:[e.xColumn,e.yColumn]}),a.onerror=function(t){a.terminate()},a.onmessage=function(e){t.renderStats(e.data)}}},renderStats:function(e,a){var n=this.model.get("config"),l=this.$el.find(".stats-display"),r=n.xLabel,s=n.yLabel,o=(0,t.default)("").addClass("table").append([""].join("")).append(i.map(e,function(e,a){return(0,t.default)([""].join(""))}));l.empty().append(o)},toggleStats:function(t){var e=this.$el.find(".stats-display");(t=void 0===t?e.is(":hidden"):t)?(this.$el.find("svg").hide(),e.show(),this.$el.find(".controls .stats-toggle-btn").text("Plot")):(e.hide(),this.$el.find("svg").show(),this.$el.find(".controls .stats-toggle-btn").text("Stats"))},toString:function(){return"ScatterplotView()"}}),c=r.extend({defaults:{type:"scatterplot",config:{pagination:{currPage:0,perPage:3e3},width:400,height:400,margin:{top:16,right:16,bottom:40,left:54},xTicks:10,xLabel:"X",yTicks:10,yLabel:"Y",datapointSize:4,animDuration:500,scale:1,translate:[0,0]}}});window.ScatterplotModel=c,window.ScatterplotConfigEditor=o; +"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.scatterplot=s;var t=l(require("jquery"));require("./jqglobals");var e=n(require("backbone")),a=n(require("d3")),i=n(require("underscore"));function n(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var a in t)if(Object.prototype.hasOwnProperty.call(t,a)){var i=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(t,a):{};i.get||i.set?Object.defineProperty(e,a,i):e[a]=t[a]}return e.default=t,e}function l(t){return t&&t.__esModule?t:{default:t}}require("../../../../../client/galaxy/scripts/ui/peek-column-selector"),require("../../../../../client/galaxy/scripts/ui/pagination"),require("jquery-ui-bundle"),require("bootstrap");var r=e.Model.extend({defaults:{config:{}},urlRoot:function(){return Galaxy.root_api+"api/visualizations"},initialize:function(t){i.isObject(t.config)&&i.isObject(this.defaults.config)&&i.defaults(t.config,this.defaults.config),this._setUpListeners()},_setUpListeners:function(){},set:function(t,a){if("config"===t){var n=this.get("config");i.isObject(n)&&(a=i.extend(i.clone(n),a))}return e.Model.prototype.set.call(this,t,a),this},toString:function(){var t=this.get("id")||"";return this.get("title")&&(t+=":".concat(this.get("title"))),"Visualization(".concat(t,")")}});function s(e,i,n){var l=function(t,e){return"translate("+t+","+e+")"},r=function(t,e){return t[i.xColumn]},s=function(t,e){return t[i.yColumn]},o={x:{extent:a.extent(n,r)},y:{extent:a.extent(n,s)}},d={x:a.scale.linear().domain(o.x.extent).range([0,i.width]),y:a.scale.linear().domain(o.y.extent).range([i.height,0])},c=a.behavior.zoom().x(d.x).y(d.y).scaleExtent([1,30]).scale(i.scale||1).translate(i.translate||[0,0]),h=a.select(e).attr("class","scatterplot").attr("width","100%").attr("height",i.height+(i.margin.top+i.margin.bottom)),u=h.append("g").attr("class","content").attr("transform",l(i.margin.left,i.margin.top)).call(c);u.append("rect").attr("class","zoom-rect").attr("width",i.width).attr("height",i.height).style("fill","transparent");var p={x:{},y:{}};p.x.fn=a.svg.axis().orient("bottom").scale(d.x).ticks(i.xTicks).tickFormat(a.format("s")),p.y.fn=a.svg.axis().orient("left").scale(d.y).ticks(i.yTicks).tickFormat(a.format("s")),p.x.g=u.append("g").attr("class","x axis").attr("transform",l(0,i.height)).call(p.x.fn),p.y.g=u.append("g").attr("class","y axis").call(p.y.fn);var f,g,m;function v(){var t={v:{},h:{}};return t.v.lines=u.selectAll("line.v-grid-line").data(d.x.ticks(p.x.fn.ticks()[0])),t.v.lines.enter().append("svg:line").classed("grid-line v-grid-line",!0),t.v.lines.attr("x1",d.x).attr("x2",d.x).attr("y1",0).attr("y2",i.height),t.v.lines.exit().remove(),t.h.lines=u.selectAll("line.h-grid-line").data(d.y.ticks(p.y.fn.ticks()[0])),t.h.lines.enter().append("svg:line").classed("grid-line h-grid-line",!0),t.h.lines.attr("x1",0).attr("x2",i.width).attr("y1",d.y).attr("y2",d.y),t.h.lines.exit().remove(),t}p.x.label=h.append("text").attr("id","x-axis-label").attr("class","axis-label").text(i.xLabel).attr("text-anchor","middle").attr("dominant-baseline","text-after-edge").attr("x",i.width/2+i.margin.left).attr("y",i.height+i.margin.bottom+i.margin.top-6),p.y.label=h.append("text").attr("id","y-axis-label").attr("class","axis-label").text(i.yLabel).attr("text-anchor","middle").attr("dominant-baseline","text-before-edge").attr("x",6).attr("y",i.height/2).attr("transform",(f=-90,g=6,m=i.height/2,"rotate("+f+","+g+","+m+")")),p.redraw=function(){h.select(".x.axis").call(p.x.fn),h.select(".y.axis").call(p.y.fn)},v();var b=u.selectAll(".glyph").data(n).enter().append("svg:circle").classed("glyph",!0).attr("cx",function(t,e){return d.x(r(t,e))}).attr("cy",function(t,e){return d.y(s(t,e))}).attr("r",0);function x(){return b.attr("cx",function(t,e){return d.x(r(t,e))}).attr("cy",function(t,e){return d.y(s(t,e))}).style("display","block").filter(function(t,e){var n=a.select(this).attr("cx"),l=a.select(this).attr("cy");return n<0||n>i.width||(l<0||l>i.height)}).style("display","none")}b.transition().duration(i.animDuration).attr("r",i.datapointSize),x(),c.on("zoom",function(e,a,i){(0,t.default)(".chart-info-box").remove(),p.redraw(),x(),v(),(0,t.default)(h.node()).trigger("zoom.scatterplot",{scale:c.scale(),translate:c.translate()})}),b.on("mouseover",function(e,n){var l=a.select(this);l.classed("highlight",!0).style("fill","red").style("fill-opacity",1),u.append("line").attr("stroke","red").attr("stroke-width",1).attr("x1",l.attr("cx")-i.datapointSize).attr("y1",l.attr("cy")).attr("x2",0).attr("y2",l.attr("cy")).classed("hoverline",!0),l.attr("cy")',void 0!==i.idColumn?"
"+n[i.idColumn]+"
":"","
",r(n),"
","
",s(n),"
",""].join("")).css({top:e,left:a,"z-index":2})}(o.top,o.right,e)),(0,t.default)(h.node()).trigger("mouseover-datapoint.scatterplot",[this,e,n])}),b.on("mouseout",function(){a.select(this).classed("highlight",!1).style("fill","black").style("fill-opacity",.2),u.selectAll(".hoverline").remove(),(0,t.default)(".chart-info-box").remove()})}var o=e.View.extend({className:"scatterplot-control-form",initialize:function(t){if(this.model||(this.model=new r({type:"scatterplot"})),!t||!t.dataset)throw new Error("ScatterplotConfigEditor requires a dataset");this.dataset=t.dataset,this.display=new d({dataset:t.dataset,model:this.model})},render:function(){this.$el.empty().append(o.templates.mainLayout({})),this.model.id&&(this.$el.find(".copy-btn").show(),this.$el.find(".save-btn").text("Update saved")),this.$el.find("[title]").tooltip(),this._render_dataControl(),this._render_chartControls(),this._render_chartDisplay();var t=this.model.get("config");return this.model.id&&i.isFinite(t.xColumn)&&i.isFinite(t.yColumn)&&this.renderChart(),this},_getColumnIndecesByType:function(){var t={numeric:[],text:[],all:[]};return i.each(this.dataset.metadata_column_types||[],function(e,a){"int"===e||"float"===e?t.numeric.push(a):"str"!==e&&"list"!==e||t.text.push(a),t.all.push(a)}),t.numeric.length<2&&(t.numeric=[]),t},_render_dataControl:function(t){t=t||this.$el;var e=this,a=this.model.get("config"),i=this._getColumnIndecesByType(),n=t.find(".tab-pane#data-control");return n.html(o.templates.dataControl({peek:this.dataset.peek})),n.find(".peek").peekColumnSelector({controls:[{label:"X Column",id:"xColumn",selected:a.xColumn,disabled:i.text},{label:"Y Column",id:"yColumn",selected:a.yColumn,disabled:i.text},{label:"ID Column",id:"idColumn",selected:a.idColumn}]}).on("peek-column-selector.change",function(t,a){e.model.set("config",a)}).on("peek-column-selector.rename",function(t,e){}),n.find("[title]").tooltip(),n},_render_chartControls:function(e){e=e||this.$el;var a=this,n=this.model.get("config"),l=e.find("#chart-control");l.html(o.templates.chartControl(n));var r={datapointSize:{min:2,max:10,step:1},width:{min:200,max:800,step:20},height:{min:200,max:800,step:20}};function s(){var e=(0,t.default)(this),n=e.slider("value");a.model.set("config",i.object([[e.parent().data("config-key"),n]])),e.siblings(".slider-output").text(n)}l.find(".numeric-slider-input").each(function(){var e=(0,t.default)(this),a=e.attr("data-config-key"),l=i.extend(r[a],{value:n[a],change:s,slide:s});e.find(".slider").slider(l),e.children(".slider-output").text(n[a])});var d=this.dataset.metadata_column_names||[],c=n.xLabel||d[n.xColumn]||"X",h=n.yLabel||d[n.yColumn]||"Y";return l.find('input[name="X-axis-label"]').val(c).on("change",function(){a.model.set("config",{xLabel:(0,t.default)(this).val()})}),l.find('input[name="Y-axis-label"]').val(h).on("change",function(){a.model.set("config",{yLabel:(0,t.default)(this).val()})}),l.find("[title]").tooltip(),l},_render_chartDisplay:function(t){var e=(t=t||this.$el).find(".tab-pane#chart-display");return this.display.setElement(e),this.display.render(),e.find("[title]").tooltip(),e},events:{"change #include-id-checkbox":"toggleThirdColumnSelector","click #data-control .render-button":"renderChart","click #chart-control .render-button":"renderChart","click .save-btn":"saveVisualization"},saveVisualization:function(){var t=this;this.model.save().fail(function(e,a,i){console.error(e,a,i),t.trigger("save:error",this),alert("Error loading data:\n"+e.responseText)}).then(function(){t.display.render()})},toggleThirdColumnSelector:function(){this.$el.find('select[name="idColumn"]').parent().toggle()},renderChart:function(){this.$el.find(".nav li.disabled").removeClass("disabled"),this.$el.find("ul.nav").find('a[href="#chart-display"]').tab("show"),this.display.fetchData()},toString:function(){return"ScatterplotConfigEditor("+(this.dataset?this.dataset.id:"")+")"}});o.templates={mainLayout:i.template(['
','",'
','
','
','
',"
","
"].join("")),dataControl:i.template(['

',"Use the following control to change which columns are used by the chart. Click any cell ","from the last three rows of the table to select the column for the appropriate data. ","Use the 'Draw' button to render (or re-render) the chart with the current settings. ","

",'",'
','
<%= peek %>
',"
",'

',"Note: If it can be determined from the dataset's filetype that a column is not numeric, ","that column choice may be disabled for either the x or y axis.","

",''].join("")),chartControl:i.template(['

',"Use the following controls to how the chart is displayed. The slide controls can be moved ","by the mouse or, if the 'handle' is in focus, your keyboard's arrow keys. ","Move the focus between controls by using the tab or shift+tab keys on your keyboard. ","Use the 'Draw' button to render (or re-render) the chart with the current settings. ","

",'
','','
<%- datapointSize %>
','
','

',"Size of the graphic representation of each data point","

","
",'
','','
<%- width %>
','
','

',"(not including chart margins and axes)","

","
",'
','','
<%- height %>
','
','

',"(not including chart margins and axes)","

","
",'
','','','

',"
",'
','','','

',"
",''].join(""))};var d=e.View.extend({initialize:function(t){this.data=null,this.dataset=t.dataset,this.lineCount=this.dataset.metadata_data_lines||null},fetchData:function(){this.showLoadingIndicator();var e=this,a=this.model.get("config"),i=window.parent&&window.parent.galaxy_config?window.parent.galaxy_config.root:"/",n=t.default.getJSON(i+"api/datasets/"+this.dataset.id,{data_type:"raw_data",provider:"dataset-column",limit:a.pagination.perPage,offset:a.pagination.currPage*a.pagination.perPage});return n.done(function(t){e.data=t.data,e.trigger("data:fetched",e),e.renderData()}),n.fail(function(t,a,i){console.error(t,a,i),e.trigger("data:error",e),alert("Error loading data:\n"+t.responseText)}),n},showLoadingIndicator:function(){this.$el.find(".scatterplot-data-info").html(['
','','loading...',"
"].join(""))},template:function(){return['
','
','

','','',"
",'
','
',"
","
","",'
'].join("")},render:function(){return this.$el.addClass("scatterplot-display").html(this.template()),this.data&&this.renderData(),this},renderData:function(){this.renderLeftControls(),this.renderRightControls(),this.renderPlot(this.data),this.getStats()},renderLeftControls:function(){var t=this,e=this.model.get("config");return this.$el.find(".controls .left .page-control").pagination({startingPage:e.pagination.currPage,perPage:e.pagination.perPage,totalDataSize:this.lineCount,currDataSize:this.data.length}).off().on("pagination.page-change",function(a,i){e.pagination.currPage=i,t.model.set("config",{pagination:e.pagination}),t.resetZoom(),t.fetchData()}),this},renderRightControls:function(){var t=this;this.setLineInfo(this.data),this.$el.find(".stats-toggle-btn").off().click(function(){t.toggleStats()}),this.$el.find(".rerender-btn").off().click(function(){t.resetZoom(),t.renderPlot(this.data)})},renderPlot:function(){var t=this,e=this.$el.find("svg");this.toggleStats(!1),e.off().empty().show().on("zoom.scatterplot",function(e,a){t.model.set("config",a)}),s(e.get(0),this.model.get("config"),this.data)},setLineInfo:function(t,e){if(t){var a=this.model.get("config"),i=this.lineCount||"an unknown total",n=a.pagination.currPage*a.pagination.perPage,l=n+t.length;this.$el.find(".controls p.scatterplot-data-info").text([n+1,"to",l,"of",i].join(" "))}else this.$el.find(".controls p.scatterplot-data-info").html(e||"");return this},resetZoom:function(t,e){return t=void 0!==t?t:1,e=void 0!==e?e:[0,0],this.model.set("config",{scale:t,translate:e}),this},getStats:function(){if(this.data){var t=this,e=this.model.get("config"),a=new window.Worker("worker-stats.js");a.postMessage({data:this.data,keys:[e.xColumn,e.yColumn]}),a.onerror=function(t){a.terminate()},a.onmessage=function(e){t.renderStats(e.data)}}},renderStats:function(e,a){var n=this.model.get("config"),l=this.$el.find(".stats-display"),r=n.xLabel,s=n.yLabel,o=(0,t.default)("
",r,"",s,"
",a,"",e[0],"",e[1],"
").addClass("table").append([""].join("")).append(i.map(e,function(e,a){return(0,t.default)([""].join(""))}));l.empty().append(o)},toggleStats:function(t){var e=this.$el.find(".stats-display");(t=void 0===t?e.is(":hidden"):t)?(this.$el.find("svg").hide(),e.show(),this.$el.find(".controls .stats-toggle-btn").text("Plot")):(e.hide(),this.$el.find("svg").show(),this.$el.find(".controls .stats-toggle-btn").text("Stats"))},toString:function(){return"ScatterplotView()"}}),c=r.extend({defaults:{type:"scatterplot",config:{pagination:{currPage:0,perPage:3e3},width:400,height:400,margin:{top:16,right:16,bottom:40,left:54},xTicks:10,xLabel:"X",yTicks:10,yLabel:"Y",datapointSize:4,animDuration:500,scale:1,translate:[0,0]}}});window.ScatterplotModel=c,window.ScatterplotConfigEditor=o; },{"jquery":"juYr","./jqglobals":"Bxyg","backbone":"205l","d3":"tokj","underscore":"h15N","../../../../../client/galaxy/scripts/ui/peek-column-selector":"ah69","../../../../../client/galaxy/scripts/ui/pagination":"A/Kv","jquery-ui-bundle":"Amyt","bootstrap":"6wzU"}]},{},["XQj0"], null) //# sourceMappingURL=/scatterplot.map \ No newline at end of file diff --git a/config/plugins/visualizations/scatterplot/templates/scatterplot.mako b/config/plugins/visualizations/scatterplot/templates/scatterplot.mako index b3a977c5b3c..2f7093b1ec0 100644 --- a/config/plugins/visualizations/scatterplot/templates/scatterplot.mako +++ b/config/plugins/visualizations/scatterplot/templates/scatterplot.mako @@ -9,6 +9,7 @@ # Use root for resource loading. root = h.url_for( '/static/' ) + root_api = h.url_for( '/' ) %> ## ---------------------------------------------------------------------------- @@ -24,7 +25,7 @@ ${h.stylesheet_link( root + 'plugins/visualizations/scatterplot/static/scatterpl ## ---------------------------------------------------------------------------- ${h.javascript_link( root + 'plugins/visualizations/scatterplot/static/scatterplot.js' )}
",r,"",s,"
",a,"",e[0],"",e[1],"