galaxy/static/scripts/packed/viz/scatterplot.js

define(["../libs/underscore","../libs/d3","../mvc/base-mvc"],function(){function b(f){var i=this,d=10,h=7,g=10,e=8,c=5;this.log=function(){if(this.debugging&&console&&console.debug){var j=Array.prototype.slice.call(arguments);j.unshift(this.toString());console.debug.apply(null,j)}};this.log("new TwoVarScatterplot:",f);this.defaults={id:"TwoVarScatterplot",containerSelector:"body",maxDataPoints:30000,bubbleRadius:4,entryAnimDuration:500,xNumTicks:10,yNumTicks:10,xAxisLabelBumpY:40,yAxisLabelBumpX:-35,width:500,height:500,marginTop:50,marginRight:50,marginBottom:50,marginLeft:50,xMin:null,xMax:null,yMin:null,yMax:null,xLabel:"X",yLabel:"Y"};this.config=_.extend({},this.defaults,f);this.updateConfig=function(j){_.extend(this.config,j)};this.toString=function(){return this.config.id};this.translateStr=function(j,k){return"translate("+j+","+k+")"};this.rotateStr=function(k,j,l){return"rotate("+k+","+j+","+l+")"};this.svg=d3.select(this.config.containerSelector).append("svg:svg").attr("class","chart").style("display","none");this.content=this.svg.append("svg:g").attr("class","content");this.xAxis=this.content.append("g").attr("class","axis").attr("id","x-axis");this.xAxisLabel=this.xAxis.append("text").attr("class","axis-label").attr("id","x-axis-label");this.yAxis=this.content.append("g").attr("class","axis").attr("id","y-axis");this.yAxisLabel=this.yAxis.append("text").attr("class","axis-label").attr("id","y-axis-label");this.log("built svg:",d3.selectAll("svg"));this.adjustChartDimensions=function(m,k,j,l){m=m||0;k=k||0;j=j||0;l=l||0;this.svg.attr("width",this.config.width+(this.config.marginRight+k)+(this.config.marginLeft+l)).attr("height",this.config.height+(this.config.marginTop+m)+(this.config.marginBottom+j)).style("display","block");this.content=this.svg.select("g.content").attr("transform",this.translateStr(this.config.marginLeft+l,this.config.marginTop+m))};this.preprocessData=function(j){return(j.length>this.config.maxDataPoints)?(j.slice(0,this.config.maxDataPoints)):(j)};this.setUpDomains=function(j,l,k){this.log("setUpDomains");this.xMin=this.config.xMin||(k)?(k[0].min):(d3.min(j));this.xMax=this.config.xMax||(k)?(k[0].max):(d3.max(j));this.yMin=this.config.yMin||(k)?(k[1].min):(d3.min(l));this.yMax=this.config.yMax||(k)?(k[1].max):(d3.max(l))};this.setUpScales=function(){this.xScale=d3.scale.linear().domain([this.xMin,this.xMax]).range([0,this.config.width]),this.yScale=d3.scale.linear().domain([this.yMin,this.yMax]).range([this.config.height,0])};this.setUpXAxis=function(){this.xAxisFn=d3.svg.axis().scale(this.xScale).ticks(this.config.xNumTicks).orient("bottom");this.xAxis.attr("transform",this.translateStr(0,this.config.height)).call(this.xAxisFn);this.xLongestLabel=d3.max(_.map([this.xMin,this.xMax],function(j){return(String(j)).length}));if(this.xLongestLabel>=c){this.xAxis.selectAll("g").filter(":nth-child(odd)").style("display","none")}this.xAxisLabel.attr("x",this.config.width/2).attr("y",this.config.xAxisLabelBumpY).attr("text-anchor","middle").text(this.config.xLabel)};this.setUpYAxis=function(){this.yAxisFn=d3.svg.axis().scale(this.yScale).ticks(this.config.yNumTicks).orient("left");this.yAxis.call(this.yAxisFn);this.log("yAxis:",this.yAxis);var j=this.yAxis.selectAll("text").filter(function(n,m){return m!==0});this.yLongestLabel=d3.max(j[0].map(function(n,m){return(d3.select(n).text()).length}))||0;var k=d+(this.yLongestLabel*h)+e+g;this.config.yAxisLabelBumpX=-(k-g);if(this.config.marginLeft<k){var l=(k)-this.config.marginLeft;l=(l<0)?(0):(l);this.log("adjusting:",l);this.adjustChartDimensions(0,0,0,l)}this.yAxisLabel.attr("x",this.config.yAxisLabelBumpX).attr("y",this.config.height/2).attr("text-anchor","middle").attr("transform",this.rotateStr(-90,this.config.yAxisLabelBumpX,this.config.height/2)).text(this.config.yLabel)};this.renderGrid=function(){this.vGridLines=this.content.selectAll("line.v-grid-line").data(this.xScale.ticks(this.xAxisFn.ticks()[0]));this.vGridLines.enter().append("svg:line").classed("grid-line v-grid-line",true);this.vGridLines.attr("x1",this.xScale).attr("y1",0).attr("x2",this.xScale).attr("y2",this.config.height);this.vGridLines.exit().remove();this.hGridLines=this.content.selectAll("line.h-grid-line").data(this.yScale.ticks(this.yAxisFn.ticks()[0]));this.hGridLines.enter().append("svg:line").classed("grid-line h-grid-line",true);this.hGridLines.attr("x1",0).attr("y1",this.yScale).attr("x2",this.config.width).attr("y2",this.yScale);this.hGridLines.exit().remove()};this.glyphEnterState=function(j){};this.glyphFinalState=function(j){};this.glyphExitState=function(j){};this.renderDatapoints=function(j,m){var l=function(o,n){return i.xScale(j[n])};var k=function(o,n){return i.yScale(m[n])};this.datapoints=this.content.selectAll(".glyph").data(j);this.datapoints.enter().append("svg:circle").attr("class","glyph").attr("cx",l).attr("cy",0).attr("r",0);this.datapoints.transition().duration(this.config.entryAnimDuration).attr("cx",l).attr("cy",k).attr("r",this.config.bubbleRadius);this.datapoints.exit().transition().duration(this.config.entryAnimDuration).attr("cy",this.config.height).attr("r",0).style("fill-opacity",0).remove()};this.render=function(k,l){var j=k[0],m=k[1];this.log("renderScatterplot",j.length,m.length,this.config);j=this.preprocessData(j);m=this.preprocessData(m);this.setUpDomains(j,m,l);this.log("xMin, xMax, yMin, yMax:",this.xMin,this.xMax,this.yMin,this.yMax);this.setUpScales();this.adjustChartDimensions();this.setUpXAxis();this.setUpYAxis();this.renderGrid();this.renderDatapoints(j,m)}}var a=BaseView.extend(LoggableMixin).extend({tagName:"form",className:"scatterplot-settings-form",loadingIndicatorImagePath:(galaxy_paths.get("image_path")+"/loading_large_white_bg.gif"),events:{"click #render-button":"renderScatterplot"},initialize:function(c){if(!c||!c.dataset){throw ("ScatterplotView requires a dataset")}else{this.dataset=c.dataset}this.apiDatasetsURL=c.apiDatasetsURL;this.chartConfig=c.chartConfig||{};this.log("this.chartConfig:",this.chartConfig);this.plot=new b(this.chartConfig)},render:function(){var c=this,e="",d="";this.dataset.metadata_column_types=this.dataset.metadata_column_types.split(", ");_.each(this.dataset.metadata_column_types,function(h,g){if(h==="int"||h==="float"){var f="column "+g;if(c.dataset.metadata_column_names){f=c.dataset.metadata_column_names[g]}d+='<option value="'+g+'">'+f+"</option>"}});e+='<div id="loading-indicator" style="display: none;">';e+='<img class="loading-img" src='+this.loadingIndicatorImagePath+" />";e+='<span class="loading-message"></span>';e+="</div>";e+='<div id="x-column-input">';e+='<label for="">Data column for X: </label><select name="x-column">'+d+"</select>";e+="</div>";e+='<div id="y-column-input">';e+='<label for="">Data column for Y: </label><select name="y-column">'+d+"</select>";e+="</div>";e+='<input id="render-button" type="button" value="Draw" />';e+='<div class="clear"></div>';this.$el.append(e);this.$el.find("#render-button");return this},showLoadingIndicator:function(c){c=c||"";this.$el.find("div#loading-indicator").children(".loading-message").text(c);this.$el.find("div#loading-indicator").show("fast")},hideLoadingIndicator:function(){this.$el.find("div#loading-indicator").hide("fast")},renderScatterplot:function(){var d=this,e=this.apiDatasetsURL+"/"+this.dataset.id+"?data_type=raw_data&",i=this.$el.find('[name="x-column"]'),j=i.val(),g=i.children('[value="'+j+'"]').text(),h=this.$el.find('[name="y-column"]'),f=h.val(),c=h.children('[value="'+f+'"]').text();this.log(g,c);this.chartConfig.xLabel=g;this.chartConfig.yLabel=c;d.plot.updateConfig(this.chartConfig);e+=jQuery.param({columns:"["+[j,f]+"]"});this.log("url:",e);this.showLoadingIndicator("Fetching data...");jQuery.ajax({url:e,dataType:"json",success:function(k){d.showLoadingIndicator("Rendering...");d.endpoint=k.endpoint;d.plot.render(k.data,k.meta);d.hideLoadingIndicator()},error:function(m,k,l){d.hideLoadingIndicator();alert("ERROR:"+k+"\n"+l)}})}});return{ScatterplotView:a}});