commit/galaxy-central: carlfeberhard: scatterplot: loading indicators; api/datasets: minor cleanup;

2 Oct 2012

1 new commit in galaxy-central:


https://bitbucket.org/galaxy/galaxy-central/changeset/80251cd7f94d/
changeset:   80251cd7f94d
user:        carlfeberhard
date:        2012-10-02 19:24:26
summary:     scatterplot: loading indicators; api/datasets: minor cleanup;
affected #:  4 files

diff -r 00681c35d987cde2200ff94c7f5510c594c904fd -r 80251cd7f94d64295ef6e64412f895d268ab988d lib/galaxy/visualization/data_providers/basic.py

--- a/lib/galaxy/visualization/data_providers/basic.py
+++ b/lib/galaxy/visualization/data_providers/basic.py
@@ -102,6 +102,7 @@
                 "column index (%d) must be less" % ( column )
               + " than the number of columns: %d" % ( self.original_dataset.metadata.columns ) )
         
+        
         #print columns, start_val, max_vals, skip_comments, kwargs
         
         # alter meta by column_selectors (if any)


diff -r 00681c35d987cde2200ff94c7f5510c594c904fd -r 80251cd7f94d64295ef6e64412f895d268ab988d lib/galaxy/webapps/galaxy/api/datasets.py
--- a/lib/galaxy/webapps/galaxy/api/datasets.py
+++ b/lib/galaxy/webapps/galaxy/api/datasets.py
@@ -187,7 +187,6 @@
         # Return data.
         data = None
         data_provider = trans.app.data_provider_registry.get_data_provider( trans, raw=True, original_dataset=dataset )
-        print 'data_provider:', data_provider
         
         if isinstance( data_provider, ColumnDataProvider ):
             data = data_provider.get_data( **kwargs )


diff -r 00681c35d987cde2200ff94c7f5510c594c904fd -r 80251cd7f94d64295ef6e64412f895d268ab988d static/scripts/viz/scatterplot.js
--- a/static/scripts/viz/scatterplot.js
+++ b/static/scripts/viz/scatterplot.js
@@ -181,12 +181,11 @@
         this.xAxis// = content.select( 'g#x-axis' )
             .attr( 'transform', this.translateStr( 0, this.config.height ) )
             .call( this.xAxisFn );
-        this.log( 'xAxis:', this.xAxis );
+        //this.log( 'xAxis:', this.xAxis );
         
-        //TODO: this isn't reliable with -/+ ranges - better to go thru each tick
         this.xLongestLabel = d3.max( _.map( [ this.xMin, this.xMax ],
                                      function( number ){ return ( String( number ) ).length; } ) );
-        this.log( 'xLongestLabel:', this.xLongestLabel );
+        //this.log( 'xLongestLabel:', this.xLongestLabel );
         
         if( this.xLongestLabel >= X_LABEL_TOO_LONG_AT ){
             //TODO: adjust ticks when tick labels are long - move odds down and extend tick line
@@ -199,7 +198,7 @@
             .attr( 'y', this.config.xAxisLabelBumpY )
             .attr( 'text-anchor', 'middle' )
             .text( this.config.xLabel );
-        this.log( 'xAxisLabel:', this.xAxisLabel );
+        //this.log( 'xAxisLabel:', this.xAxisLabel );
     };
 
     this.setUpYAxis = function(){
@@ -209,8 +208,9 @@
             .orient( 'left' );
         this.yAxis// = content.select( 'g#y-axis' )
             .call( this.yAxisFn );
-        this.log( 'yAxis:', this.yAxis );
+        //this.log( 'yAxis:', this.yAxis );
     
+        //TODO: this isn't reliable with -/+ ranges - better to go thru each tick
         this.yLongestLabel = d3.max( _.map( [ this.yMin, this.yMax ],
                                      function( number ){ return ( String( number ) ).length; } ) );
         this.log( 'yLongestLabel:', this.yLongestLabel );
@@ -219,7 +219,7 @@
         //TODO: this isn't reliable with -/+ ranges - better to go thru each tick
         var neededY = this.yLongestLabel * GUESS_AT_SVG_CHAR_WIDTH + ( PADDING );
             
-        // increase width for xLongerStr, increase margin for y
+        // increase width for yLongerStr, increase margin for y
         //TODO??: (or transform each number: 2k)
         if( this.config.yAxisLabelBumpX > -( neededY ) ){
             this.config.yAxisLabelBumpX = -( neededY );
@@ -238,7 +238,7 @@
             .attr( 'text-anchor', 'middle' )
             .attr( 'transform', this.rotateStr( -90, this.config.yAxisLabelBumpX, this.config.height / 2 ) )
             .text( this.config.yLabel );
-        this.log( 'yAxisLabel:', this.yAxisLabel ); 
+        //this.log( 'yAxisLabel:', this.yAxisLabel ); 
     };
     
     // ........................................................ grid lines
@@ -261,7 +261,7 @@
             
         // remove unneeded (less ticks)
         this.vGridLines.exit().remove();
-        this.log( 'vGridLines:', this.vGridLines ); 
+        //this.log( 'vGridLines:', this.vGridLines ); 
 
         // HORIZONTAL
         this.hGridLines = this.content.selectAll( 'line.h-grid-line' )
@@ -277,7 +277,7 @@
             .attr( 'y2', this.yScale );
             
         this.hGridLines.exit().remove();
-        this.log( 'hGridLines:', this.hGridLines );
+        //this.log( 'hGridLines:', this.hGridLines );
     };
     
     // ........................................................ data points
@@ -332,7 +332,7 @@
                 .style( "fill-opacity", 0 )
             .remove();
         
-        this.log( this.datapoints, 'glyphs rendered' );
+        //this.log( this.datapoints, 'glyphs rendered' );
     };
     
     this.render = function( xCol, yCol ){
@@ -343,11 +343,11 @@
         //TODO: ^^ isn't necessarily true with current ColumnDataProvider
         xCol = this.preprocessData( xCol );
         yCol = this.preprocessData( yCol );
-        this.log( 'xCol len', xCol.length, 'yCol len', yCol.length );
+        //this.log( 'xCol len', xCol.length, 'yCol len', yCol.length );
         
         //TODO: compute min, max on server.
         this.setUpDomains( xCol, yCol );
-        this.log( 'xMin, xMax, yMin, yMax:', this.xMin, this.xMax, this.yMin, this.yMax );
+        //this.log( 'xMin, xMax, yMin, yMax:', this.xMin, this.xMax, this.yMin, this.yMax );
         
         this.setUpScales();
         this.adjustChartDimensions();
@@ -367,9 +367,11 @@
  *
  */
 var ScatterplotView = BaseView.extend( LoggableMixin ).extend({
-    //logger        : console,
+    logger      : console,
     tagName     : 'form',
-    className     : 'scatterplot-settings-form',
+    className   : 'scatterplot-settings-form',
+    
+    loadingIndicatorImagePath : ( galaxy_paths.get( 'image_path' ) + '/loading_large_white_bg.gif' ),
     
     events : {
         'click #render-button' : 'renderScatterplot'
@@ -397,6 +399,7 @@
         var view = this,
             html = '',
             columnHtml = '';
+            
         // 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( ', ' );
@@ -408,10 +411,16 @@
                 if( view.dataset.metadata_column_names ){
                     name = view.dataset.metadata_column_names[ index ];
                 }
-                columnHtml += '<option value="' + index + '">' + name + '</column>';
+                columnHtml += '<option value="' + index + '">' + name + '</option>';
             }
         });
         
+        // 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>';
@@ -430,6 +439,18 @@
         this.$el.find( '#render-button' );
         return this;
     },
+
+    showLoadingIndicator : function( message ){
+        message = message || '';
+        this.$el.find( 'div#loading-indicator' ).children( '.loading-message' ).text( message );
+        this.$el.find( 'div#loading-indicator' ).show( 'fast' );
+        console.debug( 'showing:', this.$el.find( 'div#loading-indicator' ), message );
+    },
+
+    hideLoadingIndicator : function(){
+        this.$el.find( 'div#loading-indicator' ).hide( 'fast' );
+        console.debug( 'hiding:', this.$el.find( 'div#loading-indicator' ) );
+    },
     
     renderScatterplot : function(){
         // parse the column values for both
@@ -462,19 +483,23 @@
         });
         this.log( 'url:', url );
         
+        this.showLoadingIndicator( 'Fetching data...' );
         jQuery.ajax({
             url : url,
             dataType : 'json',
             success : function( response ){
                 //TODO: server sends back an endpoint, cache for next pagination request
+                view.showLoadingIndicator( 'Rendering...' );
                 view.endpoint = response.endpoint;
                 view.plot.render(
                     // pull apart first two regardless of number of columns
                     _.map( response.data, function( columns ){ return columns[0]; } ),
                     _.map( response.data, function( columns ){ return columns[1]; } )
                 );
+                view.hideLoadingIndicator();
             },
             error : function( xhr, status, error ){
+                view.hideLoadingIndicator();
                 alert( 'ERROR:' + status + '\n' + error );
             }
         });


diff -r 00681c35d987cde2200ff94c7f5510c594c904fd -r 80251cd7f94d64295ef6e64412f895d268ab988d templates/visualization/scatterplot.mako
--- a/templates/visualization/scatterplot.mako
+++ b/templates/visualization/scatterplot.mako
@@ -37,12 +37,14 @@
     max-width: 256px;
 }
 
-#chart-settings-form [value=Draw] {
-    float: right;
+#chart-holder {
+    overflow: auto;
 }
 
-#chart-holder {
-    overflow: auto;
+#chart-settings-form #loading-indicator .loading-message {
+    margin-left: 16px;
+    font-style: italic;
+    color: grey;
 }
 
 svg .grid-line {

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.

    

Bitbucket

tags

participants (1)