commit/galaxy-central: carlfeberhard: scatterplot: controls to client-side template
1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/changeset/6d45fd1d830e/ changeset: 6d45fd1d830e user: carlfeberhard date: 2012-10-02 23:29:06 summary: scatterplot: controls to client-side template affected #: 4 files diff -r f66f88b2f743e3b3733e00756f7655003bf1880f -r 6d45fd1d830ee85edcdc07ba93831c316102e81a static/scripts/templates/compiled/template-visualization-scatterplotControlForm.js --- /dev/null +++ b/static/scripts/templates/compiled/template-visualization-scatterplotControlForm.js @@ -0,0 +1,51 @@ +(function() { + var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {}; +templates['template-visualization-scatterplotControlForm'] = template(function (Handlebars,depth0,helpers,partials,data) { + helpers = helpers || Handlebars.helpers; + var buffer = "", stack1, foundHelper, functionType="function", escapeExpression=this.escapeExpression, self=this; + +function program1(depth0,data) { + + var buffer = "", stack1, foundHelper; + buffer += "\n <option value=\""; + foundHelper = helpers.index; + if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); } + else { stack1 = depth0.index; stack1 = typeof stack1 === functionType ? stack1() : stack1; } + buffer += escapeExpression(stack1) + "\">"; + foundHelper = helpers.name; + if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); } + else { stack1 = depth0.name; stack1 = typeof stack1 === functionType ? stack1() : stack1; } + buffer += escapeExpression(stack1) + "</option>\n "; + return buffer;} + +function program3(depth0,data) { + + var buffer = "", stack1, foundHelper; + buffer += "\n <option value=\""; + foundHelper = helpers.index; + if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); } + else { stack1 = depth0.index; stack1 = typeof stack1 === functionType ? stack1() : stack1; } + buffer += escapeExpression(stack1) + "\">"; + foundHelper = helpers.name; + if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); } + else { stack1 = depth0.name; stack1 = typeof stack1 === functionType ? stack1() : stack1; } + buffer += escapeExpression(stack1) + "</option>\n "; + return buffer;} + + buffer += "\n<div id=\"loading-indicator\" style=\"display: none;\">\n <img class=\"loading-img\" src=\""; + foundHelper = helpers.loadingIndicatorImagePath; + if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); } + else { stack1 = depth0.loadingIndicatorImagePath; stack1 = typeof stack1 === functionType ? stack1() : stack1; } + buffer += escapeExpression(stack1) + "\" />\n <span class=\"loading-message\"></span>\n</div>\n\n"; + buffer += "\n<div id=\"chart-settings\">\n\n "; + buffer += "\n <div id=\"x-column-input\">\n <label for=\"\">Data column for X: </label>\n <select name=\"x-column\">\n "; + stack1 = depth0.availableColumns; + stack1 = helpers.each.call(depth0, stack1, {hash:{},inverse:self.noop,fn:self.program(1, program1, data)}); + if(stack1 || stack1 === 0) { buffer += stack1; } + buffer += "\n </select>\n </div>\n <div id=\"y-column-input\">\n <label for=\"\">Data column for Y: </label>\n <select name=\"y-column\">\n "; + stack1 = depth0.availableColumns; + stack1 = helpers.each.call(depth0, stack1, {hash:{},inverse:self.noop,fn:self.program(3, program3, data)}); + if(stack1 || stack1 === 0) { buffer += stack1; } + buffer += "\n </select>\n </div>\n \n <input id=\"render-button\" type=\"button\" value=\"Draw\" />\n <div class=\"clear\"></div>\n</div>"; + return buffer;}); +})(); \ No newline at end of file diff -r f66f88b2f743e3b3733e00756f7655003bf1880f -r 6d45fd1d830ee85edcdc07ba93831c316102e81a static/scripts/templates/visualization-templates.html --- /dev/null +++ b/static/scripts/templates/visualization-templates.html @@ -0,0 +1,33 @@ +<script type="text/template" class="template-visualization" id="template-visualization-scatterplotControlForm"> + +{{! loading indicator - initially hidden }} +<div id="loading-indicator" style="display: none;"> + <img class="loading-img" src="{{loadingIndicatorImagePath}}" /> + <span class="loading-message"></span> +</div> + +{{! main controls }} +<div id="chart-settings"> + + {{! column selector containers }} + <div id="x-column-input"> + <label for="">Data column for X: </label> + <select name="x-column"> + {{#each availableColumns}} + <option value="{{index}}">{{name}}</option> + {{/each}} + </select> + </div> + <div id="y-column-input"> + <label for="">Data column for Y: </label> + <select name="y-column"> + {{#each availableColumns}} + <option value="{{index}}">{{name}}</option> + {{/each}} + </select> + </div> + + <input id="render-button" type="button" value="Draw" /> + <div class="clear"></div> +</div> +</script> diff -r f66f88b2f743e3b3733e00756f7655003bf1880f -r 6d45fd1d830ee85edcdc07ba93831c316102e81a static/scripts/viz/scatterplot.js --- a/static/scripts/viz/scatterplot.js +++ b/static/scripts/viz/scatterplot.js @@ -1,7 +1,8 @@ define([ "../libs/underscore", "../libs/d3", - "../mvc/base-mvc" + "../mvc/base-mvc", + "../templates/compiled/template-visualization-scatterplotControlForm" ], function(){ /* ============================================================================= @@ -389,7 +390,7 @@ * Scatterplot control UI as a backbone view * */ -var ScatterplotView = BaseView.extend( LoggableMixin ).extend({ +var ScatterplotControlForm = BaseView.extend( LoggableMixin ).extend({ //logger : console, tagName : 'form', className : 'scatterplot-settings-form', @@ -418,48 +419,31 @@ }, render : function(){ - //TODO: to template var view = this, - html = '', - columnHtml = ''; + html = ''; // build column select controls for each x, y (based on name if available) - // ugh...hafta preprocess - this.dataset.metadata_column_types = this.dataset.metadata_column_types.split( ', ' ); - _.each( this.dataset.metadata_column_types, function( type, index ){ + var formData = { + loadingIndicatorImagePath : this.loadingIndicatorImagePath, + config : this.chartConfig, + availableColumns : [] + }; + _.each( this.dataset.metadata_column_types.split( ', ' ), function( type, index ){ // use only numeric columns if( type === 'int' || type === 'float' ){ + //TODO: using 0-based indeces var name = 'column ' + index; // label with the name if available if( view.dataset.metadata_column_names ){ name = view.dataset.metadata_column_names[ index ]; } - columnHtml += '<option value="' + index + '">' + name + '</option>'; + formData.availableColumns.push({ index: index, name: name }); } }); - - // loading indicator - initially hidden - html += '<div id="loading-indicator" style="display: none;">'; - html += '<img class="loading-img" src=' + this.loadingIndicatorImagePath + ' />'; - html += '<span class="loading-message"></span>'; - html += '</div>'; - - // column selector containers - html += '<div id="x-column-input">'; - html += '<label for="">Data column for X: </label><select name="x-column">' + columnHtml + '</select>'; - html += '</div>'; - - html += '<div id="y-column-input">'; - html += '<label for="">Data column for Y: </label><select name="y-column">' + columnHtml + '</select>'; - html += '</div>'; - - html += '<input id="render-button" type="button" value="Draw" />'; - html += '<div class="clear"></div>'; - //TODO: other vals: max_vals, start_val, pagination + html = ScatterplotControlForm.templates.form( formData ); this.$el.append( html ); - this.$el.find( '#render-button' ); return this; }, @@ -509,13 +493,15 @@ url : url, dataType : 'json', success : function( response ){ + // save the endpoint (number of next line, fileptr) for this object //TODO: server sends back an endpoint, cache for next pagination request + view.endpoint = response.endpoint; + view.showLoadingIndicator( 'Rendering...' ); - // save the endpoint (number of next line, fileptr) for this object - view.endpoint = response.endpoint; view.plot.render( response.data, response.meta ); view.hideLoadingIndicator(); }, + error : function( xhr, status, error ){ view.hideLoadingIndicator(); alert( 'ERROR:' + status + '\n' + error ); @@ -523,9 +509,14 @@ }); } }); +ScatterplotControlForm.templates = CompiledTemplateLoader.getTemplates({ + 'visualization-templates.html' : { + form : 'template-visualization-scatterplotControlForm' + } +}); //============================================================================== return { - //TwoVarScatterplot : TwoVarScatterplot, - ScatterplotView : ScatterplotView + TwoVarScatterplot : TwoVarScatterplot, + ScatterplotControlForm : ScatterplotControlForm };}); \ No newline at end of file diff -r f66f88b2f743e3b3733e00756f7655003bf1880f -r 6d45fd1d830ee85edcdc07ba93831c316102e81a templates/visualization/scatterplot.mako --- a/templates/visualization/scatterplot.mako +++ b/templates/visualization/scatterplot.mako @@ -4,18 +4,19 @@ ${parent.stylesheets()} <style type="text/css"> +/*TODO: use/move into base.less*/ +* { margin: 0px; padding: 0px; } +#chart-header { + padding : 8px; + background-color: #ebd9b2; +} .title { - margin: 0px; - padding: 8px; - background-color: #ebd9b2; - border: 2px solid #ebd9b2; } -.subtitle { - margin: 0px; - padding: 0px 8px 8px 16px; - background-color: #ebd9b2; +#chart-header .subtitle { + margin: -4px 0px 0px 4px; + padding : 0; color: white; font-size: small; } @@ -28,7 +29,7 @@ padding-top: 1em; } -#chart-settings-form > * { +#chart-settings > * { margin: 8px; } @@ -96,7 +97,7 @@ //?? hmmmm //kwargs = ${h.to_json_string( kwargs )}; - var settingsForm = new scatterplot.ScatterplotView({ + var settingsForm = new scatterplot.ScatterplotControlForm({ dataset : hda, el : $( '#chart-settings-form' ), apiDatasetsURL : apiDatasetsURL, @@ -112,8 +113,10 @@ </%def><%def name="body()"> - <h2 class="title">Scatterplot of '${hda['name']}'</h2> - <p class="subtitle">${hda['misc_info']}</p> + <div id="chart-header"> + <h2 class="title">Scatterplot of '${hda['name']}'</h2> + <p class="subtitle">${hda['misc_info']}</p> + </div><div id="chart-holder"></div><div id="chart-settings-form"></div></%def> 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)
-
Bitbucket