commit/galaxy-central: carlfeberhard: scatterplot: add require.js
1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/changeset/327632b4f999/ changeset: 327632b4f999 user: carlfeberhard date: 2012-09-24 19:47:23 summary: scatterplot: add require.js affected #: 3 files diff -r 8b7dfceabe3ea6cc15001f05a623157e95f1bcb7 -r 327632b4f9992b2c3f4b9c6f705bed1f4e05914d static/scripts/viz/scatterplot.js --- a/static/scripts/viz/scatterplot.js +++ b/static/scripts/viz/scatterplot.js @@ -1,3 +1,9 @@ +define([ + "../libs/underscore", + "../libs/d3", + "../mvc/base-mvc" + +], function(){ /* ============================================================================= todo: outside this: @@ -355,11 +361,11 @@ }; } -//// ugh...this seems like the wrong way to use models -//var ScatterplotModel = BaseModel.extend( LoggableMixin ).extend({ -// logger : console -//}); - +//============================================================================== +/** + * Scatterplot control UI as a backbone view + * + */ var ScatterplotView = BaseView.extend( LoggableMixin ).extend({ //logger : console, tagName : 'form', @@ -370,15 +376,19 @@ }, initialize : function( attributes ){ - if( !attributes.dataset ){ + if( !attributes || !attributes.dataset ){ throw( "ScatterplotView requires a dataset" ); } else { this.dataset = attributes.dataset; } + + // passed from mako helper + //TODO: integrate to galaxyPaths this.apiDatasetsURL = attributes.apiDatasetsURL; + + // set up the basic chart infrastructure with config (if any) this.chartConfig = attributes.chartConfig || {}; this.log( 'this.chartConfig:', this.chartConfig ); - this.plot = new TwoVarScatterplot( this.chartConfig ); }, @@ -422,18 +432,23 @@ }, renderScatterplot : function(){ + // parse the column values for both + // indeces (for the data fetch) and names (for the graph) var view = this, - url = this.apiDatasetsURL + '/' + this.dataset.id + '?data_type=raw_data&'; + url = this.apiDatasetsURL + '/' + this.dataset.id + '?data_type=raw_data&', + xSelector = this.$el.find( '[name="x-column"]' ), xVal = xSelector.val(), xName = xSelector.children( '[value="' + xVal + '"]' ).text(), + ySelector = this.$el.find( '[name="y-column"]' ), yVal = ySelector.val(), yName = ySelector.children( '[value="' + yVal + '"]' ).text(); - //TODO this.log( xName, yName ); + this.chartConfig.xLabel = xName; this.chartConfig.yLabel = yName; + //TODO: alter directly view.plot.updateConfig( this.chartConfig ); @@ -441,6 +456,7 @@ //TODO: other vals: max, start, page //TODO: chart config + // fetch the data, sending chosen columns to the server url += jQuery.param({ columns : '[' + [ xVal, yVal ] + ']' }); @@ -450,6 +466,7 @@ url : url, dataType : 'json', success : function( response ){ + //TODO: server sends back an endpoint, cache for next pagination request view.endpoint = response.endpoint; view.plot.render( // pull apart first two regardless of number of columns @@ -464,3 +481,8 @@ } }); +//============================================================================== +return { + //TwoVarScatterplot : TwoVarScatterplot, + ScatterplotView : ScatterplotView +};}); \ No newline at end of file diff -r 8b7dfceabe3ea6cc15001f05a623157e95f1bcb7 -r 327632b4f9992b2c3f4b9c6f705bed1f4e05914d templates/base_panels.mako --- a/templates/base_panels.mako +++ b/templates/base_panels.mako @@ -48,7 +48,17 @@ <!--[if lt IE 7]> ${h.js( 'libs/IE/IE7', 'libs/IE/ie7-recalc' )} <![endif]--> - ${h.js( 'libs/jquery/jquery', 'libs/json2', 'libs/bootstrap', 'libs/underscore', 'libs/backbone/backbone', 'libs/backbone/backbone-relational', 'libs/handlebars.runtime', 'mvc/ui', 'galaxy.base' )} + ${h.js( + 'libs/jquery/jquery', + 'libs/json2', + 'libs/bootstrap', + 'libs/underscore', + 'libs/backbone/backbone', + 'libs/backbone/backbone-relational', + 'libs/handlebars.runtime', + 'mvc/ui', + 'galaxy.base' + )} <script type="text/javascript"> // Set up needed paths. var galaxy_paths = new GalaxyPaths({ diff -r 8b7dfceabe3ea6cc15001f05a623157e95f1bcb7 -r 327632b4f9992b2c3f4b9c6f705bed1f4e05914d templates/visualization/scatterplot.mako --- a/templates/visualization/scatterplot.mako +++ b/templates/visualization/scatterplot.mako @@ -6,25 +6,25 @@ <style type="text/css"> .title { - margin: 0px; + margin: 0px; padding: 8px; background-color: #ebd9b2; border: 2px solid #ebd9b2; } .subtitle { - margin: 0px; + margin: 0px; padding: 0px 8px 8px 16px; background-color: #ebd9b2; - color: white; - font-size: small; + color: white; + font-size: small; } #chart-settings-form { /*from width + margin of chart?*/ - float: right; + float: right; width: 100%; - margin: 0px; + margin: 0px; padding-top: 1em; } @@ -45,80 +45,67 @@ overflow: auto; } -.clear { - clear: both; - margin: 0px; -} - - -svg .chart { - /*shape-rendering: crispEdges;*/ -} - svg .grid-line { - fill: none; - stroke: lightgrey; - stroke-opacity: 0.5; - shape-rendering: crispEdges; - stroke-dasharray: 3, 3; + fill: none; + stroke: lightgrey; + stroke-opacity: 0.5; + shape-rendering: crispEdges; + stroke-dasharray: 3, 3; } svg .axis path, svg .axis line { - fill: none; - stroke: black; - shape-rendering: crispEdges; + fill: none; + stroke: black; + shape-rendering: crispEdges; } svg .axis text { - font-family: sans-serif; - font-size: 12px; + font-family: sans-serif; + font-size: 12px; } - svg .glyph { - stroke: none; - fill: black; - fill-opacity: 0.2; + stroke: none; + fill: black; + fill-opacity: 0.2; } - + </style> - + </%def><%def name="javascripts()"> ${parent.javascripts()} -${h.js( - "libs/underscore", - "libs/backbone/backbone", - "libs/backbone/backbone-relational", - "libs/d3", - "mvc/base-mvc", - "viz/scatterplot" -)} +${h.js( "libs/require" )} <script type="text/javascript"> -$(function() { - var hda = ${h.to_json_string( hda )}, - historyID = '${historyID}' - apiDatasetsURL = "${h.url_for( controller='/api/datasets' )}"; - //?? hmmmm - //kwargs = ${h.to_json_string( kwargs )}; - - var settingsForm = new ScatterplotView({ - dataset : hda, - el : $( '#chart-settings-form' ), +require.config({ baseUrl : "${h.url_for( '/static/scripts' )}", }); + +require([ "viz/scatterplot" ], function( scatterplot ){ + + var hda = ${h.to_json_string( hda )}, + historyID = '${historyID}' + apiDatasetsURL = "${h.url_for( controller='/api/datasets' )}"; + //?? hmmmm + //kwargs = ${h.to_json_string( kwargs )}; + + var settingsForm = new scatterplot.ScatterplotView({ + dataset : hda, + el : $( '#chart-settings-form' ), apiDatasetsURL : apiDatasetsURL, + chartConfig : { containerSelector : '#chart-holder', marginTop : 20, } - }).render(); + }).render(); }); + </script></%def><%def name="body()"><h2 class="title">Scatterplot of '${hda['name']}'</h2><p class="subtitle">${hda['misc_info']}</p> - <div id="chart-holder"></div> - <div id="chart-settings-form"></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