commit/galaxy-central: carlfeberhard: scatterplot: renaming/re-organization pass; layout change to vertical tabs and inclusion of chart under tabs; pack scripts - galaxy-commits

27 Nov 2012

1 new commit in galaxy-central:
https://bitbucket.org/galaxy/galaxy-central/changeset/9bf411ee2476/
changeset:   9bf411ee2476
user:        carlfeberhard
date:        2012-11-27 17:19:32
summary:     scatterplot: renaming/re-organization pass; layout change to vertical tabs and inclusion of chart under tabs; pack scripts
affected #:  19 files
diff -r 8143d7f7b94449889c1d590a3d72a3d20de291e3 -r 9bf411ee2476c21c4c3fce6a5bbabf508f7505ff static/scripts/mvc/visualizations/scatterplotControlForm.js

--- /dev/null
+++ b/static/scripts/mvc/visualizations/scatterplotControlForm.js
@@ -0,0 +1,602 @@
+/* =============================================================================
+todo:
+    I'd like to move the svg creation out of the splot constr. to:
+        allow adding splots to an existing canvas
+        allow mult. splots sharing a canvas
+
+
+    outside this:
+        BUG: setting width, height in plot controls doesn't re-interpolate data locations!!
+        BUG?: get metadata_column_names (from datatype if necessary)
+        BUG: single vis in popupmenu should have tooltip with that name NOT 'Visualizations'
+    
+    wire label setters, anim setter
+    
+    TwoVarScatterplot:
+        ??: maybe better to do this with a canvas...
+        save as visualization
+        to seperate file?
+        remove underscore dependencies
+        add interface to change values (seperate)?
+        download svg -> base64 encode
+        incorporate glyphs, glyph state renderers
+        
+    ScatterplotSettingsForm:
+        some css bug that lowers the width of settings form when plot-controls tab is open
+            causes chart to shift
+        what can be abstracted/reused for other graphs?
+        avoid direct manipulation of this.plot
+        allow option to put plot into seperate tab of interface (for small multiples)
+    
+        provide callback in view to load data incrementally - for large sets
+            paginate
+                handle rerender
+                use endpoint (here and on the server (fileptr))
+            fetch (new?) data
+                handle rerender
+            use d3.TSV?
+            render warning on long data (> maxDataPoints)
+                adjust endpoint
+        
+        selectable list of preset column comparisons (rnaseq etc.)
+            how to know what sort of Tabular the data is?
+        smarter about headers
+        validate columns selection (here or server)
+
+        set stats column names by selected columns
+        move chart into tabbed area...
+        
+    Scatterplot.mako:
+        multiple plots on one page (small multiples)
+        ?? ensure svg styles thru d3 or css?
+            d3: configable (easily)
+            css: standard - better maintenance
+            ? override at config
+
+============================================================================= */
+/**
+ *  Scatterplot control UI as a backbone view
+ *      handles:
+ *          getting the desired data
+ *          configuring the plot display
+ *          showing (general) statistics
+ *
+ *  initialize attributes REQUIRES a dataset and an apiDatasetsURL
+ */
+var ScatterplotControlForm = BaseView.extend( LoggableMixin ).extend({
+    //logger      : console,
+    className   : 'scatterplot-control-form',
+    
+    dataLoadDelay : 500,
+    dataLoadSize  : 3001,
+
+    loadingIndicatorImage : 'loading_small_white_bg.gif',
+    fetchMsg    : 'Fetching data...',
+    renderMsg   : 'Rendering...',
+    
+    initialize : function( attributes ){
+        this.log( this + '.initialize, attributes:', attributes );
+        
+        this.dataset = null;
+        this.chartConfig = null;
+        this.chart = null;
+        this.loader = null;
+
+        // set up refs to the four tab areas
+        this.$dataControl = null;
+        this.$chartControl = null;
+        this.$statsDisplay = null;
+        this.$chartDisplay = null;
+
+        this.dataFetch = null;
+
+        this.initializeFromAttributes( attributes );
+        this.initializeChart( attributes );
+        this.initializeDataLoader( attributes );
+    },
+
+    initializeFromAttributes : function( attributes ){
+        // required settings: ensure certain vars we need are passed in attributes
+        if( !attributes || !attributes.dataset ){
+            throw( "ScatterplotView requires a dataset" );
+        } else {
+            this.dataset = attributes.dataset;
+        }
+        if( jQuery.type( this.dataset.metadata_column_types ) === 'string' ){
+            this.dataset.metadata_column_types = this.dataset.metadata_column_types.split( ', ' );
+        }
+        this.log( '\t dataset:', this.dataset );
+
+        // passed from mako helper
+        //TODO: integrate to galaxyPaths
+        //TODO: ?? seems like data loader section would be better
+        if( !attributes.apiDatasetsURL ){
+            throw( "ScatterplotView requires a apiDatasetsURL" );
+        } else {
+            this.dataURL = attributes.apiDatasetsURL + '/' + this.dataset.id + '?';
+        }
+        this.log( '\t dataURL:', this.dataURL );
+    },
+
+    initializeChart : function( attributes ){
+        // set up the basic chart infrastructure and config (if any)
+        this.chartConfig = attributes.chartConfig || {};
+        //if( this.logger ){ this.chartConfig.debugging = true; }
+        this.log( '\t initial chartConfig:', this.chartConfig );
+
+        this.chart = new TwoVarScatterplot( this.chartConfig );
+        //TODO: remove 2nd ref, use this.chart.config
+        this.chartConfig = this.chart.config;
+    },
+
+    initializeDataLoader : function( attributes ){
+        // set up data loader
+        var view = this;
+        this.loader = new LazyDataLoader({
+            //logger  : ( this.logger )?( this.logger ):( null ),
+            // we'll generate this when columns are chosen
+            url     : null,
+            start   : attributes.start || 0,
+            //NOTE: metadata_data_lines can be null (so we won't know the total)
+            total   : attributes.total || this.dataset.metadata_data_lines,
+            delay   : this.dataLoadDelay,
+            size    : this.dataLoadSize,
+
+            buildUrl : function( start, size ){
+                // currently VERY SPECIFIC to using data_providers.py start_val, max_vals params
+                return this.url + '&' + jQuery.param({
+                    start_val: start,
+                    max_vals:  size
+                });
+            }
+        });
+        $( this.loader ).bind( 'error', function( event, status, error ){
+            view.log( 'ERROR:', status, error );
+            alert( 'ERROR fetching data:\n' + status + '\n' + error );
+            view.hideLoadingIndicator();
+        });
+    },
+    
+    // ------------------------------------------------------------------------- CONTROLS RENDERING
+    render : function(){
+        this.log( this + '.render' );
+
+        // render the tab controls, areas and loading indicator
+        this.$el.append( ScatterplotControlForm.templates.mainLayout({
+            loadingIndicatorImagePath   : galaxy_paths.get( 'image_path' ) + '/' + this.loadingIndicatorImage,
+            message                     : ''
+        }));
+
+        // render the tab content
+        this.$dataControl   = this._render_dataControl();
+        this.$chartControl  = this._render_chartControl();
+        this.$statsDisplay  = this.$el.find( '.tab-pane#stats-display' );
+        this.$chartDisplay  = this._render_chartDisplay();
+
+        // auto render if given both x, y column choices in query for page
+        //TODO:?? add autoRender=1 to query maybe?
+        if( this.chartConfig.xColumn && this.chartConfig.yColumn ){
+            this.renderChart();
+        }
+
+        // set up behaviours
+        this.$el.find( '.tooltip' ).tooltip();
+
+        // uncomment any of the following to have that tab show on initial load (for testing)
+        //this.$el.find( 'ul.nav' ).find( 'a[href="#data-control"]' ).tab( 'show' );
+        //this.$el.find( 'ul.nav' ).find( 'a[href="#chart-control"]' ).tab( 'show' );
+        //this.$el.find( 'ul.nav' ).find( 'a[href="#stats-display"]' ).tab( 'show' );
+        //this.$el.find( 'ul.nav' ).find( 'a[href="#chart-display"]' ).tab( 'show' );
+        return this;
+    },
+
+    _render_dataControl : function(){
+        // controls for which columns are used to plot datapoints (and ids/additional info to attach if desired)
+        var view = this,
+            allColumns = [],
+            numericColumns = [];
+        
+        // gather column indeces (from metadata_column_types) and names (from metadata_columnnames)
+        _.each( this.dataset.metadata_column_types, function( type, index ){
+            // use a 1 based index in names/values within the form (will be dec. when parsed out)
+            var oneBasedIndex = index + 1,
+                // label with the name if available (fall back on 'column <index>')
+                name = 'column ' + oneBasedIndex;
+            if( view.dataset.metadata_column_names ){
+                name = view.dataset.metadata_column_names[ index ];
+            }
+            
+            // cache all columns here
+            allColumns.push({ index: oneBasedIndex, name: name });
+
+            // filter numeric columns to their own list
+            if( type === 'int' || type === 'float' ){
+                numericColumns.push({ index: oneBasedIndex, name: name });
+            }
+        });
+        //TODO: other vals: max_vals, start_val, pagination (chart-settings)
+            
+        // render the html
+        var $dataControl = this.$el.find( '.tab-pane#data-control' );
+        $dataControl.append( ScatterplotControlForm.templates.dataControl({
+            allColumns      : allColumns,
+            numericColumns  : numericColumns
+        }));
+
+        // preset to column selectors if they were passed in the config in the query string
+        $dataControl.find( '#X-select' ).val( this.chartConfig.xColumn );
+        $dataControl.find( '#Y-select' ).val( this.chartConfig.yColumn );
+        if( this.chartConfig.idColumn !== undefined ){
+            $dataControl.find( '#include-id-checkbox' )
+                .attr( 'checked', true ).trigger( 'change' );
+            $dataControl.find( '#ID-select' ).val( this.chartConfig.idColumn );
+        }
+
+        return $dataControl;
+    },
+    
+    _render_chartControl : function(){
+        // tab content to control how the chart is rendered (data glyph size, chart size, etc.)
+        var view = this,
+            $chartControl = this.$el.find( '.tab-pane#chart-control' ),
+            // limits for controls (by control/chartConfig id)
+            //TODO: move into TwoVarScatterplot
+            controlRanges = {
+                'datapointSize' : { min: 2, max: 10, step: 1 },
+                'width'         : { min: 200, max: 800, step: 20 },
+                'height'        : { min: 200, max: 800, step: 20 }
+            };
+
+        // render the html
+        $chartControl.append( ScatterplotControlForm.templates.chartControl( this.chartConfig ) );
+
+        // set up behaviours, js on sliders
+        $chartControl.find( '.numeric-slider-input' ).each( function(){
+            var $this = $( this ),
+                $output = $this.find( '.slider-output' ),
+                $slider = $this.find( '.slider' ),
+                id = $this.attr( 'id' );
+            //chartControl.log( 'slider set up', 'this:', $this, 'slider:', $slider, 'id', id );
+
+            // what to do when the slider changes: update display and update chartConfig
+            //TODO: move out of loop
+            function onSliderChange(){
+                var $this = $( this ),
+                    newValue = $this.slider( 'value' );
+                //chartControl.log( 'slider change', 'this:', $this, 'output:', $output, 'value', newValue );
+                $output.text( newValue );
+                //chartControl.chartConfig[ id ] = newValue;
+            }
+
+            $slider.slider( _.extend( controlRanges[ id ], {
+                value   : view.chartConfig[ id ],
+                change  : onSliderChange,
+                slide   : onSliderChange
+            }));
+        });
+
+        return $chartControl;
+    },
+
+    _render_chartDisplay : function(){
+        // render the tab content where the chart is displayed (but not the chart itself)
+        var $chartDisplay = this.$el.find( '.tab-pane#chart-display' );
+        $chartDisplay.append( ScatterplotControlForm.templates.chartDisplay( this.chartConfig ) );
+        return $chartDisplay;
+    },
+
+    // ------------------------------------------------------------------------- EVENTS
+    events : {
+        'change #include-id-checkbox'          : 'toggleThirdColumnSelector',
+        'click #data-control #render-button'   : 'renderChart',
+        'click #chart-control #render-button'  : 'changeChartSettings'
+    },
+
+    toggleThirdColumnSelector : function(){
+        // show/hide the id selector on the data settings panel
+        this.$el.find( 'select[name="ID"]' ).parent().toggle();
+    },
+    
+    showLoadingIndicator : function( message, callback ){
+        // display the loading indicator over the tab panels if hidden, update message (if passed)
+        message = message || '';
+        var indicator = this.$el.find( 'div#loading-indicator' );
+            messageBox = indicator.find( '.loading-message' );
+            
+        if( indicator.is( ':visible' ) ){
+            if( message ){
+                messageBox.fadeOut( 'fast', function(){
+                    messageBox.text( message );
+                    messageBox.fadeIn( 'fast', callback );
+                });
+            } else {
+                callback();
+            }
+            
+        } else {
+            if( message ){ messageBox.text( message ); }
+            indicator.fadeIn( 'fast', callback );
+        }
+    },
+
+    hideLoadingIndicator : function( callback ){
+        this.$el.find( 'div#loading-indicator' ).fadeOut( 'fast', callback );
+    },
+    
+    // ------------------------------------------------------------------------- CHART/STATS RENDERING
+    renderChart : function(){
+        // fetch the data, (re-)render the chart
+        this.log( this + '.renderChart' );
+
+        //TODO: separate data fetch
+
+        // this is a complete re-render, so clear the prev. data
+        this.data = null;
+        this.meta = null;
+        
+        // update the chartConfig (here and chart) using chart settings
+        //TODO: separate and improve (used in changeChartSettings too)
+        _.extend( this.chartConfig, this.getChartSettings() );
+        this.log( '\t chartConfig:', this.chartConfig );
+        this.chart.updateConfig( this.chartConfig, false );
+        
+        // build the url with the current data settings
+        this.loader.url = this.dataURL + '&' + jQuery.param( this.getDataSettings() );
+        this.log( '\t loader: total lines:', this.loader.total, ' url:', this.loader.url );
+
+        // bind the new data event to: aggregate data, update the chart and stats with new data
+        var view = this;
+        $( this.loader ).bind( 'loaded.new', function( event, response ){
+            view.log( view + ' loaded.new', response );
+
+            // aggregate data and meta
+            view.postProcessDataFetchResponse( response );
+            view.log( '\t postprocessed data:', view.data );
+            view.log( '\t postprocessed meta:', view.meta );
+
+            // update the chart and stats
+            view.showLoadingIndicator( view.renderMsg, function(){
+                view.chart.render( view.data, view.meta );
+                view.renderStats( view.data, view.meta );
+                view.hideLoadingIndicator();
+            });
+        });
+        // when all data loaded - unbind (or we'll start doubling event handlers)
+        $( this.loader ).bind( 'complete', function( event, data ){
+            view.log( view + ' complete', data );
+            $( view.loader ).unbind();
+        });
+
+        // begin loading the data, switch to the chart display tab
+        view.showLoadingIndicator( view.fetchMsg, function(){
+            view.$el.find( 'ul.nav' ).find( 'a[href="#chart-display"]' ).tab( 'show' );
+            view.loader.load();
+        });
+    },
+
+    renderStats : function(){
+        this.log( this + '.renderStats' );
+        // render the stats table in the stats panel
+        //TODO: there's a better way
+        this.$statsDisplay.html( ScatterplotControlForm.templates.statsDisplay({
+            stats:  [
+                { name: 'Count',    xval: this.meta[0].count,   yval: this.meta[1].count },
+                { name: 'Min',      xval: this.meta[0].min,     yval: this.meta[1].min },
+                { name: 'Max',      xval: this.meta[0].max,     yval: this.meta[1].max },
+                { name: 'Sum',      xval: this.meta[0].sum,     yval: this.meta[1].sum },
+                { name: 'Mean',     xval: this.meta[0].mean,    yval: this.meta[1].mean },
+                { name: 'Median',   xval: this.meta[0].median,  yval: this.meta[1].median }
+            ]
+        }));
+    },
+
+    changeChartSettings : function(){
+        // re-render the chart with new chart settings and OLD data
+        var view = this;
+            newChartSettings = this.getChartSettings();
+
+        // update the chart config from the chartSettings panel controls
+        _.extend( this.chartConfig, newChartSettings );
+        this.log( 'this.chartConfig:', this.chartConfig );
+        this.chart.updateConfig( this.chartConfig, false );
+
+        // if there's current data, call chart.render with it (no data fetch)
+        if( view.data && view.meta ){
+            view.showLoadingIndicator( view.renderMsg, function(){
+                view.$el.find( 'ul.nav' ).find( 'a[href="#chart-display"]' ).tab( 'show' );
+                view.chart.render( view.data, view.meta );
+                view.hideLoadingIndicator();
+            });
+
+        // no current data, call renderChart instead (which will fetch data)
+        } else {
+            this.renderChart();
+        }
+    },
+
+    // ------------------------------------------------------------------------- DATA AGGREGATION
+    postProcessDataFetchResponse : function( response ){
+        // the loader only returns new data - it's up to this to munge the fetches together properly
+        //TODO: we're now storing data in two places: loader and here
+        //  can't we reduce incoming data into loader.data[0]? are there concurrency problems?
+        this.postProcessData( response.data );
+        this.postProcessMeta( response.meta );
+    },
+    
+    postProcessData : function( newData ){
+        // stack the column data on top of each other into this.data
+        //this.log( this + '.postProcessData:', newData );
+        var view = this;
+
+        // if we already have data: aggregate
+        if( view.data ){
+            _.each( newData, function( newColData, colIndex ){
+                //view.log( colIndex + ' data:', newColData );
+                //TODO??: time, space efficiency of this?
+                view.data[ colIndex ] = view.data[ colIndex ].concat( newColData );
+            });
+            
+        // otherwise: assign (first load)
+        } else {
+            view.data = newData;
+        }
+    },
+
+    postProcessMeta : function( newMeta ){
+        // munge the meta data (stats) from the server fetches together
+        //pre: this.data must be preprocessed (needed for medians)
+        //this.log( this + '.postProcessMeta:', newMeta );
+        var view = this,
+            colTypes = this.dataset.metadata_column_types;
+
+        // if we already have meta: aggregate
+        if( view.meta ){
+            _.each( newMeta, function( newColMeta, colIndex ){
+                var colMeta = view.meta[ colIndex ],
+                    colType = colTypes[ colIndex ];
+                //view.log( '\t ' + colIndex + ' postprocessing meta:', newColMeta );
+                //view.log( colIndex + ' old meta:',
+                //    'min:',     colMeta.min,
+                //    'max:',     colMeta.max,
+                //    'sum:',     colMeta.sum,
+                //    'mean:',    colMeta.mean,
+                //    'median:',  colMeta.median
+                //);
+
+                //!TODO: at what point are we getting int/float overflow on these?!
+                //??: need to be null safe?
+                colMeta.count += ( newColMeta.count )?( newColMeta.count ):( 0 );
+                //view.log( colIndex, 'count:', colMeta.count );
+                
+                if( ( colType === 'int' ) || ( colType === 'float' ) ){
+                    //view.log( colIndex + ' incoming meta:',
+                    //    'min:',     newColMeta.min,
+                    //    'max:',     newColMeta.max,
+                    //    'sum:',     newColMeta.sum,
+                    //    'mean:',    newColMeta.mean,
+                    //    'median:',  newColMeta.median
+                    //);
+
+                    colMeta.min  = Math.min( newColMeta.min, colMeta.min );
+                    colMeta.max  = Math.max( newColMeta.max, colMeta.max );
+                    colMeta.sum  = newColMeta.sum + colMeta.sum;
+                    colMeta.mean = ( colMeta.count )?( colMeta.sum / colMeta.count ):( null );
+
+                    // median's a pain bc of sorting (requires the data as well)
+                    var sortedCol = view.data[ colIndex ].slice().sort(),
+                        middleIndex = Math.floor( sortedCol.length / 2 );
+
+                    if( sortedCol.length % 2 === 0 ){
+                        colMeta.median = ( ( sortedCol[ middleIndex ] + sortedCol[( middleIndex + 1 )] ) / 2 );
+
+                    } else {
+                        colMeta.median = sortedCol[ middleIndex ];
+                    }
+
+                    //view.log( colIndex + ' new meta:',
+                    //    'min:',     colMeta.min,
+                    //    'max:',     colMeta.max,
+                    //    'sum:',     colMeta.sum,
+                    //    'mean:',    colMeta.mean,
+                    //    'median:',  colMeta.median
+                    //);
+                }
+            });
+
+        // otherwise: assign (first load)
+        } else {
+            view.meta = newMeta;
+            //view.log( '\t meta (first load):', view.meta );
+        }
+    },
+
+    // ------------------------------------------------------------------------- GET DATA/CHART SETTINGS
+    getDataSettings : function(){
+        // parse the column values for both indeces (for the data fetch) and names (for the chart)
+        var columnSelections = this.getColumnSelections(),
+            columns = [];
+        this.log( '\t columnSelections:', columnSelections );
+            
+        //TODO: validate columns - minimally: we can assume either set by selectors or via a good query string
+
+        // get column indices for params, include the desired ID column (if any)
+        //NOTE: these are presented in human-readable 1 base index (to match the data.peek) - adjust
+        columns = [
+            columnSelections.X.colIndex - 1,
+            columnSelections.Y.colIndex - 1
+        ];
+        if( this.$dataControl.find( '#include-id-checkbox' ).attr( 'checked' ) ){
+            columns.push( columnSelections.ID.colIndex - 1 );
+        }
+        //TODO: other vals: max, start, page
+        
+        var params = {
+            data_type   : 'raw_data',
+            columns     : '[' + columns + ']'
+        };
+        this.log( '\t data settings (url params):', params );
+        return params;
+    },
+
+    getColumnSelections : function(){
+        // gets the current user-selected values for which columns to fetch from the data settings panel
+        // returns a map: { column-select name (eg. X) : { colIndex : column-selector val,
+        //                                                 colName : selected option text }, ... }
+        var selections = {};
+        this.$dataControl.find( 'div.column-select select' ).each( function(){
+            var $this   = $( this ),
+                val     = $this.val();
+            selections[ $this.attr( 'name' ) ] = {
+                colIndex : val,
+                colName  : $this.children( '[value="' + val + '"]' ).text()
+            };
+        });
+        return selections;
+    },
+
+    getChartSettings : function(){
+        // gets the user-selected chartConfig from the chart settings panel
+        var settings = {},
+            colSelections = this.getColumnSelections();
+        //this.log( 'colSelections:', colSelections );
+
+        //TODO: simplify with keys and loop
+        settings.datapointSize = this.$chartControl.find( '#datapointSize.numeric-slider-input' )
+            .find( '.slider' ).slider( 'value' );
+        settings.width = this.$chartControl.find( '#width.numeric-slider-input' )
+            .find( '.slider' ).slider( 'value' );
+        settings.height = this.$chartControl.find( '#height.numeric-slider-input' )
+            .find( '.slider' ).slider( 'value' );
+
+        // update axes labels using chartSettings inputs (if not at defaults), otherwise the selects' colName
+        //TODO: a little confusing
+        var chartSettingsXLabel = this.$chartControl.find( 'input#X-axis-label' ).val(),
+            chartSettingsYLabel = this.$chartControl.find( 'input#Y-axis-label' ).val();
+        settings.xLabel = ( chartSettingsXLabel === 'X' )?
+                            ( colSelections.X.colName ):( chartSettingsXLabel );
+        settings.yLabel = ( chartSettingsYLabel === 'Y' )?
+                            ( colSelections.Y.colName ):( chartSettingsYLabel );
+
+        settings.animDuration = 10;
+        if( this.$chartControl.find( '#animDuration.checkbox-input' ).is( ':checked' ) ){
+            settings.animDuration = 500;
+        }
+
+        this.log( '\t chartSettings:', settings );
+        return settings;
+    },
+
+    toString : function(){
+        return 'ScatterplotControlForm(' + (( this.dataset )?( this.dataset.id ):( '' )) + ')';
+    }
+});
+
+ScatterplotControlForm.templates = {
+    mainLayout      : Handlebars.templates[ 'template-visualization-scatterplotControlForm' ],
+    dataControl     : Handlebars.templates[ 'template-visualization-dataControl' ],
+    chartControl    : Handlebars.templates[ 'template-visualization-chartControl' ],
+    statsDisplay    : Handlebars.templates[ 'template-visualization-statsDisplay' ],
+    chartDisplay    : Handlebars.templates[ 'template-visualization-chartDisplay' ]
+};
+
+//==============================================================================
diff -r 8143d7f7b94449889c1d590a3d72a3d20de291e3 -r 9bf411ee2476c21c4c3fce6a5bbabf508f7505ff static/scripts/packed/mvc/visualizations/scatterplotControlForm.js
--- /dev/null
+++ b/static/scripts/packed/mvc/visualizations/scatterplotControlForm.js
@@ -0,0 +1,1 @@
+var ScatterplotControlForm=BaseView.extend(LoggableMixin).extend({className:"scatterplot-control-form",dataLoadDelay:500,dataLoadSize:3001,loadingIndicatorImage:"loading_small_white_bg.gif",fetchMsg:"Fetching data...",renderMsg:"Rendering...",initialize:function(a){this.log(this+".initialize, attributes:",a);this.dataset=null;this.chartConfig=null;this.chart=null;this.loader=null;this.$dataControl=null;this.$chartControl=null;this.$statsDisplay=null;this.$chartDisplay=null;this.dataFetch=null;this.initializeFromAttributes(a);this.initializeChart(a);this.initializeDataLoader(a)},initializeFromAttributes:function(a){if(!a||!a.dataset){throw ("ScatterplotView requires a dataset")}else{this.dataset=a.dataset}if(jQuery.type(this.dataset.metadata_column_types)==="string"){this.dataset.metadata_column_types=this.dataset.metadata_column_types.split(", ")}this.log("\t dataset:",this.dataset);if(!a.apiDatasetsURL){throw ("ScatterplotView requires a apiDatasetsURL")}else{this.dataURL=a.apiDatasetsURL+"/"+this.dataset.id+"?"}this.log("\t dataURL:",this.dataURL)},initializeChart:function(a){this.chartConfig=a.chartConfig||{};this.log("\t initial chartConfig:",this.chartConfig);this.chart=new TwoVarScatterplot(this.chartConfig);this.chartConfig=this.chart.config},initializeDataLoader:function(b){var a=this;this.loader=new LazyDataLoader({url:null,start:b.start||0,total:b.total||this.dataset.metadata_data_lines,delay:this.dataLoadDelay,size:this.dataLoadSize,buildUrl:function(d,c){return this.url+"&"+jQuery.param({start_val:d,max_vals:c})}});$(this.loader).bind("error",function(e,c,d){a.log("ERROR:",c,d);alert("ERROR fetching data:\n"+c+"\n"+d);a.hideLoadingIndicator()})},render:function(){this.log(this+".render");this.$el.append(ScatterplotControlForm.templates.mainLayout({loadingIndicatorImagePath:galaxy_paths.get("image_path")+"/"+this.loadingIndicatorImage,message:""}));this.$dataControl=this._render_dataControl();this.$chartControl=this._render_chartControl();this.$statsDisplay=this.$el.find(".tab-pane#stats-display");this.$chartDisplay=this._render_chartDisplay();if(this.chartConfig.xColumn&&this.chartConfig.yColumn){this.renderChart()}this.$el.find(".tooltip").tooltip();return this},_render_dataControl:function(){var b=this,a=[],d=[];_.each(this.dataset.metadata_column_types,function(h,f){var g=f+1,e="column "+g;if(b.dataset.metadata_column_names){e=b.dataset.metadata_column_names[f]}a.push({index:g,name:e});if(h==="int"||h==="float"){d.push({index:g,name:e})}});var c=this.$el.find(".tab-pane#data-control");c.append(ScatterplotControlForm.templates.dataControl({allColumns:a,numericColumns:d}));c.find("#X-select").val(this.chartConfig.xColumn);c.find("#Y-select").val(this.chartConfig.yColumn);if(this.chartConfig.idColumn!==undefined){c.find("#include-id-checkbox").attr("checked",true).trigger("change");c.find("#ID-select").val(this.chartConfig.idColumn)}return c},_render_chartControl:function(){var a=this,b=this.$el.find(".tab-pane#chart-control"),c={datapointSize:{min:2,max:10,step:1},width:{min:200,max:800,step:20},height:{min:200,max:800,step:20}};b.append(ScatterplotControlForm.templates.chartControl(this.chartConfig));b.find(".numeric-slider-input").each(function(){var f=$(this),e=f.find(".slider-output"),g=f.find(".slider"),h=f.attr("id");function d(){var j=$(this),i=j.slider("value");e.text(i)}g.slider(_.extend(c[h],{value:a.chartConfig[h],change:d,slide:d}))});return b},_render_chartDisplay:function(){var a=this.$el.find(".tab-pane#chart-display");a.append(ScatterplotControlForm.templates.chartDisplay(this.chartConfig));return a},events:{"change #include-id-checkbox":"toggleThirdColumnSelector","click #data-control #render-button":"renderChart","click #chart-control #render-button":"changeChartSettings"},toggleThirdColumnSelector:function(){this.$el.find('select[name="ID"]').parent().toggle()},showLoadingIndicator:function(b,c){b=b||"";var a=this.$el.find("div#loading-indicator");messageBox=a.find(".loading-message");if(a.is(":visible")){if(b){messageBox.fadeOut("fast",function(){messageBox.text(b);messageBox.fadeIn("fast",c)})}else{c()}}else{if(b){messageBox.text(b)}a.fadeIn("fast",c)}},hideLoadingIndicator:function(a){this.$el.find("div#loading-indicator").fadeOut("fast",a)},renderChart:function(){this.log(this+".renderChart");this.data=null;this.meta=null;_.extend(this.chartConfig,this.getChartSettings());this.log("\t chartConfig:",this.chartConfig);this.chart.updateConfig(this.chartConfig,false);this.loader.url=this.dataURL+"&"+jQuery.param(this.getDataSettings());this.log("\t loader: total lines:",this.loader.total," url:",this.loader.url);var a=this;$(this.loader).bind("loaded.new",function(c,b){a.log(a+" loaded.new",b);a.postProcessDataFetchResponse(b);a.log("\t postprocessed data:",a.data);a.log("\t postprocessed meta:",a.meta);a.showLoadingIndicator(a.renderMsg,function(){a.chart.render(a.data,a.meta);a.renderStats(a.data,a.meta);a.hideLoadingIndicator()})});$(this.loader).bind("complete",function(b,c){a.log(a+" complete",c);$(a.loader).unbind()});a.showLoadingIndicator(a.fetchMsg,function(){a.$el.find("ul.nav").find('a[href="#chart-display"]').tab("show");a.loader.load()})},renderStats:function(){this.log(this+".renderStats");this.$statsDisplay.html(ScatterplotControlForm.templates.statsDisplay({stats:[{name:"Count",xval:this.meta[0].count,yval:this.meta[1].count},{name:"Min",xval:this.meta[0].min,yval:this.meta[1].min},{name:"Max",xval:this.meta[0].max,yval:this.meta[1].max},{name:"Sum",xval:this.meta[0].sum,yval:this.meta[1].sum},{name:"Mean",xval:this.meta[0].mean,yval:this.meta[1].mean},{name:"Median",xval:this.meta[0].median,yval:this.meta[1].median}]}))},changeChartSettings:function(){var a=this;newChartSettings=this.getChartSettings();_.extend(this.chartConfig,newChartSettings);this.log("this.chartConfig:",this.chartConfig);this.chart.updateConfig(this.chartConfig,false);if(a.data&&a.meta){a.showLoadingIndicator(a.renderMsg,function(){a.$el.find("ul.nav").find('a[href="#chart-display"]').tab("show");a.chart.render(a.data,a.meta);a.hideLoadingIndicator()})}else{this.renderChart()}},postProcessDataFetchResponse:function(a){this.postProcessData(a.data);this.postProcessMeta(a.meta)},postProcessData:function(b){var a=this;if(a.data){_.each(b,function(d,c){a.data[c]=a.data[c].concat(d)})}else{a.data=b}},postProcessMeta:function(c){var a=this,b=this.dataset.metadata_column_types;if(a.meta){_.each(c,function(e,d){var i=a.meta[d],g=b[d];i.count+=(e.count)?(e.count):(0);if((g==="int")||(g==="float")){i.min=Math.min(e.min,i.min);i.max=Math.max(e.max,i.max);i.sum=e.sum+i.sum;i.mean=(i.count)?(i.sum/i.count):(null);var f=a.data[d].slice().sort(),h=Math.floor(f.length/2);if(f.length%2===0){i.median=((f[h]+f[(h+1)])/2)}else{i.median=f[h]}}})}else{a.meta=c}},getDataSettings:function(){var b=this.getColumnSelections(),a=[];this.log("\t columnSelections:",b);a=[b.X.colIndex-1,b.Y.colIndex-1];if(this.$dataControl.find("#include-id-checkbox").attr("checked")){a.push(b.ID.colIndex-1)}var c={data_type:"raw_data",columns:"["+a+"]"};this.log("\t data settings (url params):",c);return c},getColumnSelections:function(){var a={};this.$dataControl.find("div.column-select select").each(function(){var b=$(this),c=b.val();a[b.attr("name")]={colIndex:c,colName:b.children('[value="'+c+'"]').text()}});return a},getChartSettings:function(){var c={},d=this.getColumnSelections();c.datapointSize=this.$chartControl.find("#datapointSize.numeric-slider-input").find(".slider").slider("value");c.width=this.$chartControl.find("#width.numeric-slider-input").find(".slider").slider("value");c.height=this.$chartControl.find("#height.numeric-slider-input").find(".slider").slider("value");var b=this.$chartControl.find("input#X-axis-label").val(),a=this.$chartControl.find("input#Y-axis-label").val();c.xLabel=(b==="X")?(d.X.colName):(b);c.yLabel=(a==="Y")?(d.Y.colName):(a);c.animDuration=10;if(this.$chartControl.find("#animDuration.checkbox-input").is(":checked")){c.animDuration=500}this.log("\t chartSettings:",c);return c},toString:function(){return"ScatterplotControlForm("+((this.dataset)?(this.dataset.id):(""))+")"}});ScatterplotControlForm.templates={mainLayout:Handlebars.templates["template-visualization-scatterplotControlForm"],dataControl:Handlebars.templates["template-visualization-dataControl"],chartControl:Handlebars.templates["template-visualization-chartControl"],statsDisplay:Handlebars.templates["template-visualization-statsDisplay"],chartDisplay:Handlebars.templates["template-visualization-chartDisplay"]};
\ No newline at end of file
diff -r 8143d7f7b94449889c1d590a3d72a3d20de291e3 -r 9bf411ee2476c21c4c3fce6a5bbabf508f7505ff static/scripts/packed/templates/compiled/template-visualization-chartControl.js
--- /dev/null
+++ b/static/scripts/packed/templates/compiled/template-visualization-chartControl.js
@@ -0,0 +1,1 @@
+(function(){var b=Handlebars.template,a=Handlebars.templates=Handlebars.templates||{};a["template-visualization-chartControl"]=b(function(f,m,e,l,k){e=e||f.helpers;var i="",c,h,g="function",j=this.escapeExpression,n=this;function d(p,o){return' checked="true"'}i+='<p class="help-text">\n        Use the following controls to how the chart is displayed.\n        The slide controls can be moved by the mouse or, if the 'handle' is in focus, your keyboard's arrow keys.\n        Move the focus between controls by using the tab or shift+tab keys on your keyboard.\n        Use the 'Draw' button to render (or re-render) the chart with the current settings.\n    </p>\n\n    <div id="datapointSize" class="form-input numeric-slider-input">\n        <label for="datapointSize">Size of data point: </label>\n        <div class="slider-output">';h=e.datapointSize;if(h){c=h.call(m,{hash:{}})}else{c=m.datapointSize;c=typeof c===g?c():c}i+=j(c)+'</div>\n        <div class="slider"></div>\n        <p class="form-help help-text-small">\n            Size of the graphic representation of each data point\n        </p>\n    </div>\n\n    <div id="animDuration" class="form-input checkbox-input">\n        <label for="animated">Animate graph transitions?: </label>\n        <input type="checkbox" id="animated"\n            class="checkbox control"';c=m.animDuration;c=e["if"].call(m,c,{hash:{},inverse:n.noop,fn:n.program(1,d,k)});if(c||c===0){i+=c}i+=' />\n        <p class="form-help help-text-small">\n            Uncheck this to disable the animations used on the graph\n        </p>\n    </div>\n\n    <div id="width" class="form-input numeric-slider-input">\n        <label for="width">Graph width: </label>\n        <div class="slider-output">';h=e.width;if(h){c=h.call(m,{hash:{}})}else{c=m.width;c=typeof c===g?c():c}i+=j(c)+'</div>\n        <div class="slider"></div>\n        <p class="form-help help-text-small">\n            (not including graph margins and axes)\n        </p>\n    </div>\n\n    <div id="height" class="form-input numeric-slider-input">\n        <label for="height">Graph height: </label>\n        <div class="slider-output">';h=e.height;if(h){c=h.call(m,{hash:{}})}else{c=m.height;c=typeof c===g?c():c}i+=j(c)+'</div>\n        <div class="slider"></div>\n        <p class="form-help help-text-small">\n            (not including graph margins and axes)\n        </p>\n    </div>\n\n    <div id="X-axis-label"class="text-input form-input">\n        <label for="X-axis-label">Re-label the X axis: </label>\n        <input type="text" name="X-axis-label" id="X-axis-label" value="';h=e.xLabel;if(h){c=h.call(m,{hash:{}})}else{c=m.xLabel;c=typeof c===g?c():c}i+=j(c)+'" />\n        <p class="form-help help-text-small"></p>\n    </div>\n\n    <div id="Y-axis-label" class="text-input form-input">\n        <label for="Y-axis-label">Re-label the Y axis: </label>\n        <input type="text" name="Y-axis-label" id="Y-axis-label" value="';h=e.yLabel;if(h){c=h.call(m,{hash:{}})}else{c=m.yLabel;c=typeof c===g?c():c}i+=j(c)+'" />\n        <p class="form-help help-text-small"></p>\n    </div>\n\n    <input id="render-button" type="button" value="Draw" />';return i})})();
\ No newline at end of file
diff -r 8143d7f7b94449889c1d590a3d72a3d20de291e3 -r 9bf411ee2476c21c4c3fce6a5bbabf508f7505ff static/scripts/packed/templates/compiled/template-visualization-chartDisplay.js
--- /dev/null
+++ b/static/scripts/packed/templates/compiled/template-visualization-chartDisplay.js
@@ -0,0 +1,1 @@
+(function(){var b=Handlebars.template,a=Handlebars.templates=Handlebars.templates||{};a["template-visualization-chartDisplay"]=b(function(e,l,d,k,j){d=d||e.helpers;var h="",c,g,f="function",i=this.escapeExpression;h+='<svg width="';g=d.width;if(g){c=g.call(l,{hash:{}})}else{c=l.width;c=typeof c===f?c():c}h+=i(c)+'" height="';g=d.height;if(g){c=g.call(l,{hash:{}})}else{c=l.height;c=typeof c===f?c():c}h+=i(c)+'"></svg>';return h})})();
\ No newline at end of file
diff -r 8143d7f7b94449889c1d590a3d72a3d20de291e3 -r 9bf411ee2476c21c4c3fce6a5bbabf508f7505ff static/scripts/packed/templates/compiled/template-visualization-dataControl.js
--- /dev/null
+++ b/static/scripts/packed/templates/compiled/template-visualization-dataControl.js
@@ -0,0 +1,1 @@
+(function(){var b=Handlebars.template,a=Handlebars.templates=Handlebars.templates||{};a["template-visualization-dataControl"]=b(function(g,m,f,l,k){f=f||g.helpers;var i="",d,h="function",j=this.escapeExpression,o=this;function e(t,s){var q="",r,p;q+='\n            <option value="';p=f.index;if(p){r=p.call(t,{hash:{}})}else{r=t.index;r=typeof r===h?r():r}q+=j(r)+'">';p=f.name;if(p){r=p.call(t,{hash:{}})}else{r=t.name;r=typeof r===h?r():r}q+=j(r)+"</option>\n        ";return q}function c(t,s){var q="",r,p;q+='\n            <option value="';p=f.index;if(p){r=p.call(t,{hash:{}})}else{r=t.index;r=typeof r===h?r():r}q+=j(r)+'">';p=f.name;if(p){r=p.call(t,{hash:{}})}else{r=t.name;r=typeof r===h?r():r}q+=j(r)+"</option>\n        ";return q}function n(t,s){var q="",r,p;q+='\n            <option value="';p=f.index;if(p){r=p.call(t,{hash:{}})}else{r=t.index;r=typeof r===h?r():r}q+=j(r)+'">';p=f.name;if(p){r=p.call(t,{hash:{}})}else{r=t.name;r=typeof r===h?r():r}q+=j(r)+"</option>\n        ";return q}i+="<p class="help-text">\n        Use the following controls to change the data used by the chart.\n        Use the 'Draw' button to render (or re-render) the chart with the current settings.\n    </p>\n\n    ";i+='\n    <div class="column-select">\n        <label for="X-select">Data column for X: </label>\n        <select name="X" id="X-select">\n        ';d=m.numericColumns;d=f.each.call(m,d,{hash:{},inverse:o.noop,fn:o.program(1,e,k)});if(d||d===0){i+=d}i+='\n        </select>\n    </div>\n    <div class="column-select">\n        <label for="Y-select">Data column for Y: </label>\n        <select name="Y" id="Y-select">\n        ';d=m.numericColumns;d=f.each.call(m,d,{hash:{},inverse:o.noop,fn:o.program(3,c,k)});if(d||d===0){i+=d}i+="\n        </select>\n    </div>\n\n    ";i+='\n    <div id="include-id">\n        <label for="include-id-checkbox">Include a third column as data point IDs?</label>\n        <input type="checkbox" name="include-id" id="include-id-checkbox" />\n        <p class="help-text-small">\n            These will be displayed (along with the x and y values) when you hover over\n            a data point.\n        </p>\n    </div>\n    <div class="column-select" style="display: none">\n        <label for="ID-select">Data column for IDs: </label>\n        <select name="ID" id="ID-select">\n        ';d=m.allColumns;d=f.each.call(m,d,{hash:{},inverse:o.noop,fn:o.program(5,n,k)});if(d||d===0){i+=d}i+='\n        </select>\n    </div>\n\n    <input id="render-button" type="button" value="Draw" />\n    <div class="clear"></div>';return i})})();
\ No newline at end of file
diff -r 8143d7f7b94449889c1d590a3d72a3d20de291e3 -r 9bf411ee2476c21c4c3fce6a5bbabf508f7505ff static/scripts/packed/templates/compiled/template-visualization-scatterplotControlForm.js
--- a/static/scripts/packed/templates/compiled/template-visualization-scatterplotControlForm.js
+++ b/static/scripts/packed/templates/compiled/template-visualization-scatterplotControlForm.js
@@ -1,1 +1,1 @@
-(function(){var b=Handlebars.template,a=Handlebars.templates=Handlebars.templates||{};a["template-visualization-scatterplotControlForm"]=b(function(g,n,f,m,l){f=f||g.helpers;var j="",d,i,h="function",k=this.escapeExpression,p=this;function e(u,t){var r="",s,q;r+='\n            <option value="';q=f.index;if(q){s=q.call(u,{hash:{}})}else{s=u.index;s=typeof s===h?s():s}r+=k(s)+'">';q=f.name;if(q){s=q.call(u,{hash:{}})}else{s=u.name;s=typeof s===h?s():s}r+=k(s)+"</option>\n        ";return r}function c(u,t){var r="",s,q;r+='\n            <option value="';q=f.index;if(q){s=q.call(u,{hash:{}})}else{s=u.index;s=typeof s===h?s():s}r+=k(s)+'">';q=f.name;if(q){s=q.call(u,{hash:{}})}else{s=u.name;s=typeof s===h?s():s}r+=k(s)+"</option>\n        ";return r}function o(u,t){var r="",s,q;r+='\n            <option value="';q=f.index;if(q){s=q.call(u,{hash:{}})}else{s=u.index;s=typeof s===h?s():s}r+=k(s)+'">';q=f.name;if(q){s=q.call(u,{hash:{}})}else{s=u.name;s=typeof s===h?s():s}r+=k(s)+"</option>\n        ";return r}j+='\n\n<ul class="nav nav-tabs">\n    <li class="active"><a data-toggle="tab" href="#data-settings">Data Controls</a></li>\n    <li><a data-toggle="tab" href="#chart-settings">Plot Controls</a></li>\n    <li><a data-toggle="tab" href="#chart-stats">Statistics</a></li>\n    <li><a data-toggle="tab" href="#chart">Chart</a></li>\n</ul>\n\n';j+='\n<div class="tab-content">\n<div id="data-settings" class="tab-pane active">\n\n    <p class="help-text">\n        Use the following controls to change the data used by the chart.\n        Use the 'Draw' button to render (or re-render) the chart with the current settings.\n    </p>\n        \n    ';j+='\n    <div class="column-select">\n        <label for="X-select">Data column for X: </label>\n        <select name="X" id="X-select">\n        ';d=n.numericColumns;d=f.each.call(n,d,{hash:{},inverse:p.noop,fn:p.program(1,e,l)});if(d||d===0){j+=d}j+='\n        </select>\n    </div>\n    <div class="column-select">\n        <label for="Y-select">Data column for Y: </label>\n        <select name="Y" id="Y-select">\n        ';d=n.numericColumns;d=f.each.call(n,d,{hash:{},inverse:p.noop,fn:p.program(3,c,l)});if(d||d===0){j+=d}j+="\n        </select>\n    </div>\n    \n    ";j+='\n    <div id="include-id">\n        <label for="include-id-checkbox">Include a third column as data point IDs?</label>\n        <input type="checkbox" name="include-id" id="include-id-checkbox" />\n        <p class="help-text-small">\n            These will be displayed (along with the x and y values) when you hover over\n            a data point.\n        </p>\n    </div>\n    <div class="column-select" style="display: none">\n        <label for="ID-select">Data column for IDs: </label>\n        <select name="ID" id="ID-select">\n        ';d=n.allColumns;d=f.each.call(n,d,{hash:{},inverse:p.noop,fn:p.program(5,o,l)});if(d||d===0){j+=d}j+='\n        </select>\n    </div>\n    \n    <input id="render-button" type="button" value="Draw" />\n    <input id="save-button" type="button" value="Download Plot as SVG" style="display: none;" />\n    <div class="clear"></div>\n</div>\n\n<div id="chart-settings" class="tab-pane">\n</div>\n\n<div id="chart-stats" class="tab-pane">\n</div>\n</div>';j+="\n\n";j+='\n<div id="loading-indicator" style="display: none;">\n    <img class="loading-img" src="';i=f.loadingIndicatorImagePath;if(i){d=i.call(n,{hash:{}})}else{d=n.loadingIndicatorImagePath;d=typeof d===h?d():d}j+=k(d)+'" />\n    <span class="loading-message">';i=f.message;if(i){d=i.call(n,{hash:{}})}else{d=n.message;d=typeof d===h?d():d}j+=k(d)+"</span>\n</div>";return j})})();
\ No newline at end of file
+(function(){var b=Handlebars.template,a=Handlebars.templates=Handlebars.templates||{};a["template-visualization-scatterplotControlForm"]=b(function(e,l,d,k,j){d=d||e.helpers;var h="",c,g,f="function",i=this.escapeExpression;h+='\n\n<div class="scatterplot-container chart-container tabbable tabs-left">\n    ';h+='\n    <ul class="nav nav-tabs">\n        ';h+='\n        <li class="active"><a href="#data-control" data-toggle="tab" class="tooltip"\n            title="Use this tab to change which data are used">Data Controls</a></li>\n        <li><a href="#chart-control" data-toggle="tab" class="tooltip"\n            title="Use this tab to change how the chart is drawn">Chart Controls</a></li>\n        <li><a href="#stats-display" data-toggle="tab" class="tooltip"\n            title="This tab will display overall statistics for your data">Statistics</a></li>\n        <li><a href="#chart-display" data-toggle="tab" class="tooltip"\n            title="This tab will display the chart">Chart</a>\n            ';h+='\n            <div id="loading-indicator" style="display: none;">\n                <img class="loading-img" src="';g=d.loadingIndicatorImagePath;if(g){c=g.call(l,{hash:{}})}else{c=l.loadingIndicatorImagePath;c=typeof c===f?c():c}h+=i(c)+'" />\n                <span class="loading-message">';g=d.message;if(g){c=g.call(l,{hash:{}})}else{c=l.message;c=typeof c===f?c():c}h+=i(c)+"</span>\n            </div>\n        </li>\n    </ul>\n\n    ";h+='\n    <div class="tab-content">\n        ';h+='\n        <div id="data-control" class="tab-pane active">\n            ';h+="\n        </div>\n    \n        ";h+='\n        <div id="chart-control" class="tab-pane">\n            ';h+="\n        </div>\n\n        ";h+='\n        <div id="stats-display" class="tab-pane">\n            ';h+="\n        </div>\n\n        ";h+='\n        <div id="chart-display" class="tab-pane">\n            ';h+="\n        </div>\n\n    </div>";h+="\n</div>";return h})})();
\ No newline at end of file
diff -r 8143d7f7b94449889c1d590a3d72a3d20de291e3 -r 9bf411ee2476c21c4c3fce6a5bbabf508f7505ff static/scripts/packed/templates/compiled/template-visualization-statsDisplay.js
--- /dev/null
+++ b/static/scripts/packed/templates/compiled/template-visualization-statsDisplay.js
@@ -0,0 +1,1 @@
+(function(){var b=Handlebars.template,a=Handlebars.templates=Handlebars.templates||{};a["template-visualization-statsDisplay"]=b(function(f,l,e,k,j){e=e||f.helpers;var h="",c,g="function",i=this.escapeExpression,m=this;function d(r,q){var o="",p,n;o+="\n        <tr><td>";n=e.name;if(n){p=n.call(r,{hash:{}})}else{p=r.name;p=typeof p===g?p():p}o+=i(p)+"</td><td>";n=e.xval;if(n){p=n.call(r,{hash:{}})}else{p=r.xval;p=typeof p===g?p():p}o+=i(p)+"</td><td>";n=e.yval;if(n){p=n.call(r,{hash:{}})}else{p=r.yval;p=typeof p===g?p():p}o+=i(p)+"</td></tr>\n        </tr>\n        ";return o}h+='<p class="help-text">By column:</p>\n    <table id="chart-stats-table">\n        <thead><th></th><th>X</th><th>Y</th></thead>\n        ';c=l.stats;c=e.each.call(l,c,{hash:{},inverse:m.noop,fn:m.program(1,d,j)});if(c||c===0){h+=c}h+="\n    </table>";return h})})();
\ No newline at end of file
diff -r 8143d7f7b94449889c1d590a3d72a3d20de291e3 -r 9bf411ee2476c21c4c3fce6a5bbabf508f7505ff static/scripts/packed/viz/scatterplot.js
--- a/static/scripts/packed/viz/scatterplot.js
+++ b/static/scripts/packed/viz/scatterplot.js
@@ -1,1 +1,1 @@
-define(["../libs/underscore","../mvc/base-mvc","../utils/LazyDataLoader","../templates/compiled/template-visualization-scatterplotControlForm","../templates/compiled/template-visualization-statsTable","../templates/compiled/template-visualization-chartSettings","../libs/d3","../libs/bootstrap","../libs/jquery/jquery-ui"],function(){function a(f){var d=10,h=7,g=10,e=8,c=5;this.log=function(){if(this.debugging&&console&&console.debug){var i=Array.prototype.slice.call(arguments);i.unshift(this.toString());console.debug.apply(console,i)}};this.log("new TwoVarScatterplot:",f);this.defaults={id:"TwoVarScatterplot",containerSelector:"body",maxDataPoints:30000,datapointSize:4,animDuration: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(i,j){_.extend(this.config,i)};this.toString=function(){return this.config.id};this.translateStr=function(i,j){return"translate("+i+","+j+")"};this.rotateStr=function(j,i,k){return"rotate("+j+","+i+","+k+")"};this.svg=d3.select(this.config.containerSelector).append("svg:svg").attr("class","chart");this.content=this.svg.append("svg:g").attr("class","content").attr("id",this.config.id);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.adjustChartDimensions=function(l,j,i,k){l=l||0;j=j||0;i=i||0;k=k||0;this.svg.attr("width",this.config.width+(this.config.marginRight+j)+(this.config.marginLeft+k)).attr("height",this.config.height+(this.config.marginTop+l)+(this.config.marginBottom+i)).style("display","block");this.content=this.svg.select("g.content").attr("transform",this.translateStr(this.config.marginLeft+k,this.config.marginTop+l))};this.preprocessData=function(k,j,i){return(k.length>this.config.maxDataPoints)?(k.slice(0,this.config.maxDataPoints)):(k)};this.setUpDomains=function(i,k,j){this.xMin=this.config.xMin||(j)?(j[0].min):(d3.min(i));this.xMax=this.config.xMax||(j)?(j[0].max):(d3.max(i));this.yMin=this.config.yMin||(j)?(j[1].min):(d3.min(k));this.yMax=this.config.yMax||(j)?(j[1].max):(d3.max(k))};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(i){return(String(i)).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);var i=this.yAxis.selectAll("text").filter(function(m,l){return l!==0});this.yLongestLabel=d3.max(i[0].map(function(m,l){return(d3.select(m).text()).length}))||0;var j=d+(this.yLongestLabel*h)+e+g;this.config.yAxisLabelBumpX=-(j-g);if(this.config.marginLeft<j){var k=(j)-this.config.marginLeft;k=(k<0)?(0):(k);this.adjustChartDimensions(0,0,0,k)}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(i){};this.glyphFinalState=function(i){};this.glyphExitState=function(i){};this.renderDatapoints=function(i,l,j){this.log(this+".renderDatapoints",arguments);var k=0;this.datapoints=this.addDatapoints(i,l,j,".glyph");this.datapoints.exit().each(function(){k+=1}).transition().duration(this.config.animDuration).attr("cy",this.config.height).attr("r",0).remove();this.log(k," glyphs removed")};this.addDatapoints=function(m,k,i,l){this.log(this+".addDatapoints",arguments);var p=this,o=0,q=function(s,r){return p.xScale(m[r])},j=function(s,r){return p.yScale(k[r])};var n=this.content.selectAll(l);this.log("existing datapoints:",n);n=n.data(m);o=0;n.enter().append("svg:circle").each(function(){o+=1}).classed("glyph",true).attr("cx",q).attr("cy",j).attr("r",0);this.log(o," new glyphs created");o=0;n.transition().duration(this.config.animDuration).each(function(){o+=1}).attr("cx",q).attr("cy",j).attr("r",p.config.datapointSize);this.log(o," existing glyphs transitioned");if(i){n.attr("data",function(s,r){return(i[r])})}n.attr("title",function(s,r){return((i)?(i[r]+": "):(""))+m[r]+", "+k[r]});n.on("mouseover",function(t,r){var s=d3.select(this);s.style("fill","red").style("fill-opacity",1);p.content.append("line").attr("stroke","red").attr("stroke-width",1).attr("x1",s.attr("cx")).attr("y1",s.attr("cy")).attr("x2",0).attr("y2",s.attr("cy")).classed("hoverline",true);p.content.append("line").attr("stroke","red").attr("stroke-width",1).attr("x1",s.attr("cx")).attr("y1",s.attr("cy")).attr("x2",s.attr("cx")).attr("y2",p.config.height).classed("hoverline",true)}).on("mouseout",function(){d3.select(this).style("fill","black").style("fill-opacity",0.2);d3.selectAll(".hoverline").remove()});return n};this.render=function(k,l){this.log(this+".render",arguments);var i=k[0],m=k[1],j=(k.length>2)?(k[2]):(undefined);i=this.preprocessData(i);m=this.preprocessData(m);this.log("xCol len",i.length,"yCol len",m.length);this.setUpDomains(i,m,l);this.setUpScales();this.adjustChartDimensions();this.setUpXAxis();this.setUpYAxis();this.renderGrid();this.renderDatapoints(i,m,j)}}var b=BaseView.extend(LoggableMixin).extend({className:"scatterplot-settings-form",dataLoadDelay:500,dataLoadSize:3001,loadingIndicatorImage:"loading_large_white_bg.gif",initialize:function(c){this.log(this+".initialize, attributes:",c);this.dataset=null;this.chartConfig=null;this.plot=null;this.loader=null;this.$statsPanel=null;this.$chartSettingsPanel=null;this.$dataSettingsPanel=null;this.dataFetch=null;this.initializeFromAttributes(c);this.initializeChart(c);this.initializeDataLoader(c)},initializeFromAttributes:function(c){if(!c||!c.dataset){throw ("ScatterplotView requires a dataset")}else{this.dataset=c.dataset}if(jQuery.type(this.dataset.metadata_column_types)==="string"){this.dataset.metadata_column_types=this.dataset.metadata_column_types.split(", ")}this.log("dataset:",this.dataset);if(!c.apiDatasetsURL){throw ("ScatterplotView requires a apiDatasetsURL")}else{this.dataURL=c.apiDatasetsURL+"/"+this.dataset.id+"?"}this.log("this.dataURL:",this.dataURL)},initializeChart:function(c){this.chartConfig=c.chartConfig||{};if(this.logger){this.chartConfig.debugging=true}this.log("initial chartConfig:",this.chartConfig);this.plot=new a(this.chartConfig);this.chartConfig=this.plot.config},initializeDataLoader:function(d){var c=this;this.loader=new LazyDataLoader({logger:(this.logger)?(this.logger):(null),url:null,start:d.start||0,total:d.total||this.dataset.metadata_data_lines,delay:this.dataLoadDelay,size:this.dataLoadSize,buildUrl:function(f,e){return this.url+"&"+jQuery.param({start_val:f,max_vals:e})}});$(this.loader).bind("error",function(g,e,f){c.log("ERROR:",e,f);alert("ERROR fetching data:\n"+e+"\n"+f);c.hideLoadingIndicator()})},render:function(){var c=this,d={config:this.chartConfig,allColumns:[],numericColumns:[],loadingIndicatorImagePath:galaxy_paths.get("image_path")+"/"+this.loadingIndicatorImage};_.each(this.dataset.metadata_column_types,function(g,f){var e="column "+(f+1);if(c.dataset.metadata_column_names){e=c.dataset.metadata_column_names[f]}if(g==="int"||g==="float"){d.numericColumns.push({index:(f+1),name:e})}d.allColumns.push({index:(f+1),name:e})});this.$el.append(b.templates.form(d));this.$dataSettingsPanel=this.$el.find(".tab-pane#data-settings");this.$chartSettingsPanel=this._render_chartSettings();this.$statsPanel=this.$el.find(".tab-pane#chart-stats");this.$dataSettingsPanel.find("#X-select").val(this.chartConfig.xColumn);this.$dataSettingsPanel.find("#Y-select").val(this.chartConfig.yColumn);if(this.chartConfig.idColumn!==undefined){this.$dataSettingsPanel.find("#include-id-checkbox").attr("checked",true).trigger("change");this.$dataSettingsPanel.find("#ID-select").val(this.chartConfig.idColumn)}if(this.chartConfig.xColumn&&this.chartConfig.yColumn){this.renderPlot()}return this},isColumnNumeric:function(c){if((c>=0)&&(c<this.dataset.metadata_column_types.length)){var d=this.dataset.metadata_column_types[c];return(d==="int"||d==="float")}return false},_render_chartSettings:function(){var c=this,d=this.$el.find(".tab-pane#chart-settings"),e={datapointSize:{min:2,max:10,step:1},width:{min:200,max:800,step:20},height:{min:200,max:800,step:20}};d.append(b.templates.chartSettings(this.chartConfig));d.find(".numeric-slider-input").each(function(){var h=$(this),g=h.find(".slider-output"),i=h.find(".slider"),j=h.attr("id");function f(){var l=$(this),k=l.slider("value");g.text(k)}i.slider(_.extend(e[j],{value:c.chartConfig[j],change:f,slide:f}))});return d},events:{"change #include-id-checkbox":"toggleThirdColumnSelector","click #data-settings #render-button":"renderPlot","click #chart-settings #render-button":"changeChartSettings"},toggleThirdColumnSelector:function(){this.$el.find('select[name="ID"]').parent().toggle()},showLoadingIndicator:function(d,e){d=d||"";var c=this.$el.find("div#loading-indicator");messageBox=c.find(".loading-message");if(c.is(":visible")){if(d){messageBox.fadeOut("fast",function(){messageBox.text(d);messageBox.fadeIn("fast",e)})}else{e()}}else{if(d){messageBox.text(d)}c.fadeIn("fast",e)}},hideLoadingIndicator:function(c){this.$el.find("div#loading-indicator").fadeOut("fast",c)},renderPlot:function(){var c=this;c.data=null;c.meta=null;_.extend(this.chartConfig,this.getGraphSettings());this.log("this.chartConfig:",this.chartConfig);this.plot.updateConfig(this.chartConfig,false);this.loader.url=this.dataURL+"&"+jQuery.param(this.getDataSettings());this.log("this.loader, url:",this.loader.url,"total:",this.loader.total);$(this.loader).bind("loaded.new",function(e,d){c.log(c+" loaded.new",d);c.postProcessDataFetchResponse(d);c.log("postprocessed data:",c.data,"meta:",c.meta);c.showLoadingIndicator("Rendering...",function(){c.$el.find("ul.nav").find('a[href="#chart-stats"]').tab("show");c.plot.render(c.data,c.meta);c.renderStats(c.data,c.meta);c.hideLoadingIndicator()})});$(this.loader).bind("complete",function(d,e){c.log("complete",e);$(c.loader).unbind()});c.showLoadingIndicator("Fetching data...",function(){c.loader.load()})},renderStats:function(){this.$statsPanel.html(b.templates.statsTable({stats:[{name:"Count",xval:this.meta[0].count,yval:this.meta[1].count},{name:"Min",xval:this.meta[0].min,yval:this.meta[1].min},{name:"Max",xval:this.meta[0].max,yval:this.meta[1].max},{name:"Sum",xval:this.meta[0].sum,yval:this.meta[1].sum},{name:"Mean",xval:this.meta[0].mean,yval:this.meta[1].mean},{name:"Median",xval:this.meta[0].median,yval:this.meta[1].median}]}))},changeChartSettings:function(){var c=this;newGraphSettings=this.getGraphSettings();this.log("newGraphSettings:",newGraphSettings);_.extend(this.chartConfig,newGraphSettings);this.log("this.chartConfig:",this.chartConfig);this.plot.updateConfig(this.chartConfig,false);if(c.data&&c.meta){c.showLoadingIndicator("Rendering...",function(){c.plot.render(c.data,c.meta);c.hideLoadingIndicator()})}else{this.renderPlot()}},postProcessDataFetchResponse:function(c){this.postProcessData(c.data);this.postProcessMeta(c.meta)},postProcessData:function(d){var c=this;if(c.data){_.each(d,function(f,e){c.data[e]=c.data[e].concat(f)})}else{c.data=d}},postProcessMeta:function(e){var c=this,d=this.dataset.metadata_column_types;if(c.meta){_.each(e,function(g,f){var k=c.meta[f],i=d[f];c.log(f+" postprocessing meta:",g);k.count+=(g.count)?(g.count):(0);c.log(f,"count:",k.count);if((i==="int")||(i==="float")){k.min=Math.min(g.min,k.min);k.max=Math.max(g.max,k.max);k.sum=g.sum+k.sum;k.mean=(k.count)?(k.sum/k.count):(null);var h=c.data[f].slice().sort(),j=Math.floor(h.length/2);if(h.length%2===0){k.median=((h[j]+h[(j+1)])/2)}else{k.median=h[j]}}})}else{c.meta=e;c.log("initial meta:",c.meta)}},getDataSettings:function(){var d=this.getColumnSelections(),c=[];this.log("columnSelections:",d);c=[d.X.colIndex,d.Y.colIndex];if(this.$dataSettingsPanel.find("#include-id-checkbox").attr("checked")){c.push(d.ID.colIndex)}var e={data_type:"raw_data",columns:"["+c+"]"};this.log("params:",e);return e},getColumnSelections:function(){var c={};this.$dataSettingsPanel.find("div.column-select select").each(function(){var d=$(this),e=parseInt(d.val(),10)-1;c[d.attr("name")]={colIndex:e,colName:d.children('[value="'+e+'"]').text()}});return c},getGraphSettings:function(){var e={},f=this.getColumnSelections();e.datapointSize=this.$chartSettingsPanel.find("#datapointSize.numeric-slider-input").find(".slider").slider("value");e.width=this.$chartSettingsPanel.find("#width.numeric-slider-input").find(".slider").slider("value");e.height=this.$chartSettingsPanel.find("#height.numeric-slider-input").find(".slider").slider("value");var d=this.$chartSettingsPanel.find("input#X-axis-label").val(),c=this.$chartSettingsPanel.find("input#Y-axis-label").val();e.xLabel=(d==="X")?(f.X.colName):(d);e.yLabel=(c==="Y")?(f.Y.colName):(c);e.animDuration=10;if(this.$chartSettingsPanel.find("#animDuration.checkbox-input").is(":checked")){e.animDuration=500}this.log("graphSettings:",e);return e},toString:function(){return"ScatterplotControlForm("+((this.dataset)?(this.dataset.id):(""))+")"}});b.templates={form:Handlebars.templates["template-visualization-scatterplotControlForm"],statsTable:Handlebars.templates["template-visualization-statsTable"],chartSettings:Handlebars.templates["template-visualization-chartSettings"]};return{LazyDataLoader:LazyDataLoader,TwoVarScatterplot:a,ScatterplotControlForm:b}});
\ No newline at end of file
+function TwoVarScatterplot(d){var b=10,f=7,e=10,c=8,a=5;this.log=function(){if(this.debugging&&console&&console.debug){var g=Array.prototype.slice.call(arguments);g.unshift(this.toString());console.debug.apply(console,g)}};this.log("new TwoVarScatterplot:",d);this.defaults={id:"TwoVarScatterplot",containerSelector:"body",maxDataPoints:30000,datapointSize:4,animDuration:500,xNumTicks:10,yNumTicks:10,xAxisLabelBumpY:40,yAxisLabelBumpX:-35,width:400,height:400,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,d);this.log("intial config:",this.config);this.updateConfig=function(g,h){_.extend(this.config,g);this.log(this+".updateConfig:",this.config)};this.toString=function(){return this.config.id};this.translateStr=function(g,h){return"translate("+g+","+h+")"};this.rotateStr=function(h,g,i){return"rotate("+h+","+g+","+i+")"};this.adjustChartDimensions=function(j,h,g,i){j=j||0;h=h||0;g=g||0;i=i||0;this.svg.attr("width",this.config.width+(this.config.marginRight+h)+(this.config.marginLeft+i)).attr("height",this.config.height+(this.config.marginTop+j)+(this.config.marginBottom+g)).style("display","block");this.content=this.svg.select("g.content").attr("transform",this.translateStr(this.config.marginLeft+i,this.config.marginTop+j))};this.preprocessData=function(i,h,g){return(i.length>this.config.maxDataPoints)?(i.slice(0,this.config.maxDataPoints)):(i)};this.findMinMaxes=function(g,i,h){this.xMin=this.config.xMin||(h)?(h[0].min):(d3.min(g));this.xMax=this.config.xMax||(h)?(h[0].max):(d3.max(g));this.yMin=this.config.yMin||(h)?(h[1].min):(d3.min(i));this.yMax=this.config.yMax||(h)?(h[1].max):(d3.max(i))};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);var g=d3.max(_.map([this.xMin,this.xMax],function(h){return(String(h)).length}));if(g>=a){this.xAxis.selectAll("g").filter(":nth-child(odd)").style("display","none")}this.log("this.config.xLabel:",this.config.xLabel);this.xAxisLabel.attr("x",this.config.width/2).attr("y",this.config.xAxisLabelBumpY).attr("text-anchor","middle").text(this.config.xLabel);this.log("xAxisLabel:",this.xAxisLabel)};this.setUpYAxis=function(){this.yAxisFn=d3.svg.axis().scale(this.yScale).ticks(this.config.yNumTicks).orient("left");this.yAxis.call(this.yAxisFn);var g=this.yAxis.selectAll("text").filter(function(k,j){return j!==0});this.log("yTickLabels:",g);this.yLongestLabel=d3.max(g[0].map(function(k,j){return(d3.select(k).text()).length}))||0;var h=b+(this.yLongestLabel*f)+c+e;this.config.yAxisLabelBumpX=-(h-e);if(this.config.marginLeft<h){var i=(h)-this.config.marginLeft;i=(i<0)?(0):(i);this.adjustChartDimensions(0,0,0,i)}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(g){};this.glyphFinalState=function(g){};this.glyphExitState=function(g){};this.renderDatapoints=function(g,j,h){this.log(this+".renderDatapoints",arguments);var i=0;this.datapoints=this.addDatapoints(g,j,h,".glyph");this.datapoints.exit().each(function(){i+=1}).transition().duration(this.config.animDuration).attr("cy",this.config.height).attr("r",0).remove();this.log(i," glyphs removed")};this.addDatapoints=function(k,i,g,j){this.log(this+".addDatapoints",arguments);var n=this,m=0,o=function(q,p){return n.xScale(k[p])},h=function(q,p){return n.yScale(i[p])};var l=this.content.selectAll(j);this.log("existing datapoints:",l);l=l.data(k);m=0;l.enter().append("svg:circle").each(function(){m+=1}).classed("glyph",true).attr("cx",o).attr("cy",h).attr("r",0);this.log(m," new glyphs created");m=0;l.transition().duration(this.config.animDuration).each(function(){m+=1}).attr("cx",o).attr("cy",h).attr("r",n.config.datapointSize);this.log(m," existing glyphs transitioned");if(g){l.attr("data",function(q,p){return(g[p])})}l.attr("svg:title",function(q,p){return((g)?(g[p]+": "):(""))+k[p]+", "+i[p]});l.on("mouseover",function(r,p){var q=d3.select(this);q.style("fill","red").style("fill-opacity",1);n.content.append("line").attr("stroke","red").attr("stroke-width",1).attr("x1",q.attr("cx")).attr("y1",q.attr("cy")).attr("x2",0).attr("y2",q.attr("cy")).classed("hoverline",true);n.content.append("line").attr("stroke","red").attr("stroke-width",1).attr("x1",q.attr("cx")).attr("y1",q.attr("cy")).attr("x2",q.attr("cx")).attr("y2",n.config.height).classed("hoverline",true)}).on("mouseout",function(){d3.select(this).style("fill","black").style("fill-opacity",0.2);d3.selectAll(".hoverline").remove()});return l};this.render=function(i,j){this.log(this+".render",arguments);this.log("\t config:",this.config);var g=i[0],k=i[1],h=(i.length>2)?(i[2]):(undefined);g=this.preprocessData(g);k=this.preprocessData(k);this.log("xCol len",g.length,"yCol len",k.length);this.findMinMaxes(g,k,j);this.setUpScales();if(!this.svg){this.svg=d3.select("svg").attr("class","chart")}if(!this.content){this.content=this.svg.append("svg:g").attr("class","content").attr("id",this.config.id)}this.adjustChartDimensions();if(!this.xAxis){this.xAxis=this.content.append("g").attr("class","axis").attr("id","x-axis")}if(!this.xAxisLabel){this.xAxisLabel=this.xAxis.append("text").attr("class","axis-label").attr("id","x-axis-label")}if(!this.yAxis){this.yAxis=this.content.append("g").attr("class","axis").attr("id","y-axis")}if(!this.yAxisLabel){this.yAxisLabel=this.yAxis.append("text").attr("class","axis-label").attr("id","y-axis-label")}this.setUpXAxis();this.setUpYAxis();this.renderGrid();this.renderDatapoints(g,k,h)}};
\ No newline at end of file
diff -r 8143d7f7b94449889c1d590a3d72a3d20de291e3 -r 9bf411ee2476c21c4c3fce6a5bbabf508f7505ff static/scripts/templates/compiled/template-visualization-chartControl.js
--- /dev/null
+++ b/static/scripts/templates/compiled/template-visualization-chartControl.js
@@ -0,0 +1,38 @@
+(function() {
+  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
+templates['template-visualization-chartControl'] = 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) {
+  
+  
+  return " checked="true"";}
+
+  buffer += "<p class="help-text">\n        Use the following controls to how the chart is displayed.\n        The slide controls can be moved by the mouse or, if the 'handle' is in focus, your keyboard's arrow keys.\n        Move the focus between controls by using the tab or shift+tab keys on your keyboard.\n        Use the 'Draw' button to render (or re-render) the chart with the current settings.\n    </p>\n\n    <div id="datapointSize" class="form-input numeric-slider-input">\n        <label for="datapointSize">Size of data point: </label>\n        <div class="slider-output">";
+  foundHelper = helpers.datapointSize;
+  if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
+  else { stack1 = depth0.datapointSize; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
+  buffer += escapeExpression(stack1) + "</div>\n        <div class="slider"></div>\n        <p class="form-help help-text-small">\n            Size of the graphic representation of each data point\n        </p>\n    </div>\n\n    <div id="animDuration" class="form-input checkbox-input">\n        <label for="animated">Animate graph transitions?: </label>\n        <input type="checkbox" id="animated"\n            class="checkbox control"";
+  stack1 = depth0.animDuration;
+  stack1 = helpers['if'].call(depth0, stack1, {hash:{},inverse:self.noop,fn:self.program(1, program1, data)});
+  if(stack1 || stack1 === 0) { buffer += stack1; }
+  buffer += " />\n        <p class="form-help help-text-small">\n            Uncheck this to disable the animations used on the graph\n        </p>\n    </div>\n\n    <div id="width" class="form-input numeric-slider-input">\n        <label for="width">Graph width: </label>\n        <div class="slider-output">";
+  foundHelper = helpers.width;
+  if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
+  else { stack1 = depth0.width; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
+  buffer += escapeExpression(stack1) + "</div>\n        <div class="slider"></div>\n        <p class="form-help help-text-small">\n            (not including graph margins and axes)\n        </p>\n    </div>\n\n    <div id="height" class="form-input numeric-slider-input">\n        <label for="height">Graph height: </label>\n        <div class="slider-output">";
+  foundHelper = helpers.height;
+  if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
+  else { stack1 = depth0.height; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
+  buffer += escapeExpression(stack1) + "</div>\n        <div class="slider"></div>\n        <p class="form-help help-text-small">\n            (not including graph margins and axes)\n        </p>\n    </div>\n\n    <div id="X-axis-label"class="text-input form-input">\n        <label for="X-axis-label">Re-label the X axis: </label>\n        <input type="text" name="X-axis-label" id="X-axis-label" value="";
+  foundHelper = helpers.xLabel;
+  if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
+  else { stack1 = depth0.xLabel; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
+  buffer += escapeExpression(stack1) + "" />\n        <p class="form-help help-text-small"></p>\n    </div>\n\n    <div id="Y-axis-label" class="text-input form-input">\n        <label for="Y-axis-label">Re-label the Y axis: </label>\n        <input type="text" name="Y-axis-label" id="Y-axis-label" value="";
+  foundHelper = helpers.yLabel;
+  if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
+  else { stack1 = depth0.yLabel; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
+  buffer += escapeExpression(stack1) + "" />\n        <p class="form-help help-text-small"></p>\n    </div>\n\n    <input id="render-button" type="button" value="Draw" />";
+  return buffer;});
+})();
\ No newline at end of file
diff -r 8143d7f7b94449889c1d590a3d72a3d20de291e3 -r 9bf411ee2476c21c4c3fce6a5bbabf508f7505ff static/scripts/templates/compiled/template-visualization-chartDisplay.js
--- /dev/null
+++ b/static/scripts/templates/compiled/template-visualization-chartDisplay.js
@@ -0,0 +1,18 @@
+(function() {
+  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
+templates['template-visualization-chartDisplay'] = template(function (Handlebars,depth0,helpers,partials,data) {
+  helpers = helpers || Handlebars.helpers;
+  var buffer = "", stack1, foundHelper, functionType="function", escapeExpression=this.escapeExpression;
+
+
+  buffer += "<svg width="";
+  foundHelper = helpers.width;
+  if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
+  else { stack1 = depth0.width; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
+  buffer += escapeExpression(stack1) + "" height="";
+  foundHelper = helpers.height;
+  if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
+  else { stack1 = depth0.height; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
+  buffer += escapeExpression(stack1) + ""></svg>";
+  return buffer;});
+})();
\ No newline at end of file
diff -r 8143d7f7b94449889c1d590a3d72a3d20de291e3 -r 9bf411ee2476c21c4c3fce6a5bbabf508f7505ff static/scripts/templates/compiled/template-visualization-chartSettings.js
--- a/static/scripts/templates/compiled/template-visualization-chartSettings.js
+++ /dev/null
@@ -1,38 +0,0 @@
-(function() {
-  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
-templates['template-visualization-chartSettings'] = 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) {
-  
-  
-  return " checked="true"";}
-
-  buffer += "<p class="help-text">\n        Use the following controls to how the chart is displayed.\n        The slide controls can be moved by the mouse or, if the 'handle' is in focus, your keyboard's arrow keys.\n        Move the focus between controls by using the tab or shift+tab keys on your keyboard.\n        Use the 'Draw' button to render (or re-render) the chart with the current settings.\n    </p>\n        \n    <div id="datapointSize" class="form-input numeric-slider-input">\n        <label for="datapointSize">Size of data point: </label>\n        <div class="slider-output">";
-  foundHelper = helpers.datapointSize;
-  if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
-  else { stack1 = depth0.datapointSize; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
-  buffer += escapeExpression(stack1) + "</div>\n        <div class="slider"></div>\n        <p class="form-help help-text-small">\n            Size of the graphic representation of each data point\n        </p>\n    </div>\n\n    <div id="animDuration" class="form-input checkbox-input">\n        <label for="animated">Animate graph transitions?: </label>\n        <input type="checkbox" id="animated"\n            class="checkbox control"";
-  stack1 = depth0.animDuration;
-  stack1 = helpers['if'].call(depth0, stack1, {hash:{},inverse:self.noop,fn:self.program(1, program1, data)});
-  if(stack1 || stack1 === 0) { buffer += stack1; }
-  buffer += " />\n        <p class="form-help help-text-small">\n            Uncheck this to disable the animations used on the graph\n        </p>\n    </div>\n\n    <div id="width" class="form-input numeric-slider-input">\n        <label for="width">Graph width: </label>\n        <div class="slider-output">";
-  foundHelper = helpers.width;
-  if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
-  else { stack1 = depth0.width; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
-  buffer += escapeExpression(stack1) + "</div>\n        <div class="slider"></div>\n        <p class="form-help help-text-small">\n            (not including graph margins and axes)\n        </p>\n    </div>\n\n    <div id="height" class="form-input numeric-slider-input">\n        <label for="height">Graph height: </label>\n        <div class="slider-output">";
-  foundHelper = helpers.height;
-  if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
-  else { stack1 = depth0.height; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
-  buffer += escapeExpression(stack1) + "</div>\n        <div class="slider"></div>\n        <p class="form-help help-text-small">\n            (not including graph margins and axes)\n        </p>\n    </div>\n\n    <div id="X-axis-label"class="text-input form-input">\n        <label for="X-axis-label">Re-label the X axis: </label>\n        <input type="text" name="X-axis-label" id="X-axis-label" value="";
-  foundHelper = helpers.xLabel;
-  if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
-  else { stack1 = depth0.xLabel; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
-  buffer += escapeExpression(stack1) + "" />\n        <p class="form-help help-text-small"></p>\n    </div>\n\n    <div id="Y-axis-label" class="text-input form-input">\n        <label for="Y-axis-label">Re-label the Y axis: </label>\n        <input type="text" name="Y-axis-label" id="Y-axis-label" value="";
-  foundHelper = helpers.yLabel;
-  if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
-  else { stack1 = depth0.yLabel; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
-  buffer += escapeExpression(stack1) + "" />\n        <p class="form-help help-text-small"></p>\n    </div>\n\n    <input id="render-button" type="button" value="Draw" />";
-  return buffer;});
-})();
\ No newline at end of file
diff -r 8143d7f7b94449889c1d590a3d72a3d20de291e3 -r 9bf411ee2476c21c4c3fce6a5bbabf508f7505ff static/scripts/templates/compiled/template-visualization-dataControl.js
--- /dev/null
+++ b/static/scripts/templates/compiled/template-visualization-dataControl.js
@@ -0,0 +1,65 @@
+(function() {
+  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
+templates['template-visualization-dataControl'] = template(function (Handlebars,depth0,helpers,partials,data) {
+  helpers = helpers || Handlebars.helpers;
+  var buffer = "", stack1, 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;}
+
+function program5(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 += "<p class="help-text">\n        Use the following controls to change the data used by the chart.\n        Use the 'Draw' button to render (or re-render) the chart with the current settings.\n    </p>\n\n    ";
+  buffer += "\n    <div class="column-select">\n        <label for="X-select">Data column for X: </label>\n        <select name="X" id="X-select">\n        ";
+  stack1 = depth0.numericColumns;
+  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 class="column-select">\n        <label for="Y-select">Data column for Y: </label>\n        <select name="Y" id="Y-select">\n        ";
+  stack1 = depth0.numericColumns;
+  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    ";
+  buffer += "\n    <div id="include-id">\n        <label for="include-id-checkbox">Include a third column as data point IDs?</label>\n        <input type="checkbox" name="include-id" id="include-id-checkbox" />\n        <p class="help-text-small">\n            These will be displayed (along with the x and y values) when you hover over\n            a data point.\n        </p>\n    </div>\n    <div class="column-select" style="display: none">\n        <label for="ID-select">Data column for IDs: </label>\n        <select name="ID" id="ID-select">\n        ";
+  stack1 = depth0.allColumns;
+  stack1 = helpers.each.call(depth0, stack1, {hash:{},inverse:self.noop,fn:self.program(5, program5, 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>";
+  return buffer;});
+})();
\ No newline at end of file
diff -r 8143d7f7b94449889c1d590a3d72a3d20de291e3 -r 9bf411ee2476c21c4c3fce6a5bbabf508f7505ff static/scripts/templates/compiled/template-visualization-scatterplotControlForm.js
--- a/static/scripts/templates/compiled/template-visualization-scatterplotControlForm.js
+++ b/static/scripts/templates/compiled/template-visualization-scatterplotControlForm.js
@@ -2,75 +2,30 @@
   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;
+  var buffer = "", stack1, foundHelper, functionType="function", escapeExpression=this.escapeExpression;
-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;}
-
-function program5(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\n<ul class="nav nav-tabs">\n    <li class="active"><a data-toggle="tab" href="#data-settings">Data Controls</a></li>\n    <li><a data-toggle="tab" href="#chart-settings">Plot Controls</a></li>\n    <li><a data-toggle="tab" href="#chart-stats">Statistics</a></li>\n    <li><a data-toggle="tab" href="#chart">Chart</a></li>\n</ul>\n\n";
-  buffer += "\n<div class="tab-content">\n<div id="data-settings" class="tab-pane active">\n\n    <p class="help-text">\n        Use the following controls to change the data used by the chart.\n        Use the 'Draw' button to render (or re-render) the chart with the current settings.\n    </p>\n        \n    ";
-  buffer += "\n    <div class="column-select">\n        <label for="X-select">Data column for X: </label>\n        <select name="X" id="X-select">\n        ";
-  stack1 = depth0.numericColumns;
-  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 class="column-select">\n        <label for="Y-select">Data column for Y: </label>\n        <select name="Y" id="Y-select">\n        ";
-  stack1 = depth0.numericColumns;
-  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    ";
-  buffer += "\n    <div id="include-id">\n        <label for="include-id-checkbox">Include a third column as data point IDs?</label>\n        <input type="checkbox" name="include-id" id="include-id-checkbox" />\n        <p class="help-text-small">\n            These will be displayed (along with the x and y values) when you hover over\n            a data point.\n        </p>\n    </div>\n    <div class="column-select" style="display: none">\n        <label for="ID-select">Data column for IDs: </label>\n        <select name="ID" id="ID-select">\n        ";
-  stack1 = depth0.allColumns;
-  stack1 = helpers.each.call(depth0, stack1, {hash:{},inverse:self.noop,fn:self.program(5, program5, data)});
-  if(stack1 || stack1 === 0) { buffer += stack1; }
-  buffer += "\n        </select>\n    </div>\n    \n    <input id="render-button" type="button" value="Draw" />\n    <input id="save-button" type="button" value="Download Plot as SVG" style="display: none;" />\n    <div class="clear"></div>\n</div>\n\n<div id="chart-settings" class="tab-pane">\n</div>\n\n<div id="chart-stats" class="tab-pane">\n</div>\n</div>";
-  buffer += "\n\n";
-  buffer += "\n<div id="loading-indicator" style="display: none;">\n    <img class="loading-img" src="";
+  buffer += "\n\n<div class="scatterplot-container chart-container tabbable tabs-left">\n    ";
+  buffer += "\n    <ul class="nav nav-tabs">\n        ";
+  buffer += "\n        <li class="active"><a href="#data-control" data-toggle="tab" class="tooltip"\n            title="Use this tab to change which data are used">Data Controls</a></li>\n        <li><a href="#chart-control" data-toggle="tab" class="tooltip"\n            title="Use this tab to change how the chart is drawn">Chart Controls</a></li>\n        <li><a href="#stats-display" data-toggle="tab" class="tooltip"\n            title="This tab will display overall statistics for your data">Statistics</a></li>\n        <li><a href="#chart-display" data-toggle="tab" class="tooltip"\n            title="This tab will display the chart">Chart</a>\n            ";
+  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">";
+  buffer += escapeExpression(stack1) + "" />\n                <span class="loading-message">";
   foundHelper = helpers.message;
   if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
   else { stack1 = depth0.message; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
-  buffer += escapeExpression(stack1) + "</span>\n</div>";
+  buffer += escapeExpression(stack1) + "</span>\n            </div>\n        </li>\n    </ul>\n\n    ";
+  buffer += "\n    <div class="tab-content">\n        ";
+  buffer += "\n        <div id="data-control" class="tab-pane active">\n            ";
+  buffer += "\n        </div>\n    \n        ";
+  buffer += "\n        <div id="chart-control" class="tab-pane">\n            ";
+  buffer += "\n        </div>\n\n        ";
+  buffer += "\n        <div id="stats-display" class="tab-pane">\n            ";
+  buffer += "\n        </div>\n\n        ";
+  buffer += "\n        <div id="chart-display" class="tab-pane">\n            ";
+  buffer += "\n        </div>\n\n    </div>";
+  buffer += "\n</div>";
   return buffer;});
 })();
\ No newline at end of file
diff -r 8143d7f7b94449889c1d590a3d72a3d20de291e3 -r 9bf411ee2476c21c4c3fce6a5bbabf508f7505ff static/scripts/templates/compiled/template-visualization-statsDisplay.js
--- /dev/null
+++ b/static/scripts/templates/compiled/template-visualization-statsDisplay.js
@@ -0,0 +1,31 @@
+(function() {
+  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
+templates['template-visualization-statsDisplay'] = template(function (Handlebars,depth0,helpers,partials,data) {
+  helpers = helpers || Handlebars.helpers;
+  var buffer = "", stack1, functionType="function", escapeExpression=this.escapeExpression, self=this;
+
+function program1(depth0,data) {
+  
+  var buffer = "", stack1, foundHelper;
+  buffer += "\n        <tr><td>";
+  foundHelper = helpers.name;
+  if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
+  else { stack1 = depth0.name; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
+  buffer += escapeExpression(stack1) + "</td><td>";
+  foundHelper = helpers.xval;
+  if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
+  else { stack1 = depth0.xval; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
+  buffer += escapeExpression(stack1) + "</td><td>";
+  foundHelper = helpers.yval;
+  if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
+  else { stack1 = depth0.yval; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
+  buffer += escapeExpression(stack1) + "</td></tr>\n        </tr>\n        ";
+  return buffer;}
+
+  buffer += "<p class="help-text">By column:</p>\n    <table id="chart-stats-table">\n        <thead><th></th><th>X</th><th>Y</th></thead>\n        ";
+  stack1 = depth0.stats;
+  stack1 = helpers.each.call(depth0, stack1, {hash:{},inverse:self.noop,fn:self.program(1, program1, data)});
+  if(stack1 || stack1 === 0) { buffer += stack1; }
+  buffer += "\n    </table>";
+  return buffer;});
+})();
\ No newline at end of file
diff -r 8143d7f7b94449889c1d590a3d72a3d20de291e3 -r 9bf411ee2476c21c4c3fce6a5bbabf508f7505ff static/scripts/templates/compiled/template-visualization-statsTable.js
--- a/static/scripts/templates/compiled/template-visualization-statsTable.js
+++ /dev/null
@@ -1,31 +0,0 @@
-(function() {
-  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
-templates['template-visualization-statsTable'] = template(function (Handlebars,depth0,helpers,partials,data) {
-  helpers = helpers || Handlebars.helpers;
-  var buffer = "", stack1, functionType="function", escapeExpression=this.escapeExpression, self=this;
-
-function program1(depth0,data) {
-  
-  var buffer = "", stack1, foundHelper;
-  buffer += "\n        <tr><td>";
-  foundHelper = helpers.name;
-  if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
-  else { stack1 = depth0.name; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
-  buffer += escapeExpression(stack1) + "</td><td>";
-  foundHelper = helpers.xval;
-  if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
-  else { stack1 = depth0.xval; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
-  buffer += escapeExpression(stack1) + "</td><td>";
-  foundHelper = helpers.yval;
-  if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
-  else { stack1 = depth0.yval; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
-  buffer += escapeExpression(stack1) + "</td></tr>\n        </tr>\n        ";
-  return buffer;}
-
-  buffer += "<p class="help-text">By column:</p>\n    <table id="chart-stats-table">\n        <thead><th></th><th>X</th><th>Y</th></thead>\n        ";
-  stack1 = depth0.stats;
-  stack1 = helpers.each.call(depth0, stack1, {hash:{},inverse:self.noop,fn:self.program(1, program1, data)});
-  if(stack1 || stack1 === 0) { buffer += stack1; }
-  buffer += "\n    </table>";
-  return buffer;});
-})();
\ No newline at end of file
diff -r 8143d7f7b94449889c1d590a3d72a3d20de291e3 -r 9bf411ee2476c21c4c3fce6a5bbabf508f7505ff static/scripts/templates/visualization-templates.html
--- a/static/scripts/templates/visualization-templates.html
+++ b/static/scripts/templates/visualization-templates.html
@@ -1,22 +1,59 @@
 <script type="text/template" class="template-visualization" id="template-visualization-scatterplotControlForm">
-{{! main controls }}
+{{! main layout }}
-<ul class="nav nav-tabs">
-    <li class="active"><a data-toggle="tab" href="#data-settings">Data Controls</a></li>
-    <li><a data-toggle="tab" href="#chart-settings">Plot Controls</a></li>
-    <li><a data-toggle="tab" href="#chart-stats">Statistics</a></li>
-    <li><a data-toggle="tab" href="#chart">Chart</a></li>
-</ul>
+<div class="scatterplot-container chart-container tabbable tabs-left">
+    {{! tab buttons/headers using Bootstrap }}
+    <ul class="nav nav-tabs">
+        {{! start with the data controls as the displayed tab }}
+        <li class="active"><a href="#data-control" data-toggle="tab" class="tooltip"
+            title="Use this tab to change which data are used">Data Controls</a></li>
+        <li><a href="#chart-control" data-toggle="tab" class="tooltip"
+            title="Use this tab to change how the chart is drawn">Chart Controls</a></li>
+        <li><a href="#stats-display" data-toggle="tab" class="tooltip"
+            title="This tab will display overall statistics for your data">Statistics</a></li>
+        <li><a href="#chart-display" data-toggle="tab" class="tooltip"
+            title="This tab will display the chart">Chart</a>
+            {{! loading indicator - initially hidden }}
+            <div id="loading-indicator" style="display: none;">
+                <img class="loading-img" src="{{loadingIndicatorImagePath}}" />
+                <span class="loading-message">{{message}}</span>
+            </div>
+        </li>
+    </ul>
-{{! data settings }}
-<div class="tab-content">
-<div id="data-settings" class="tab-pane active">
+    {{! data form, chart config form, stats, and chart all get their own tab }}
+    <div class="tab-content">
+        {{! ---------------------------- tab for data settings form }}
+        <div id="data-control" class="tab-pane active">
+            {{! rendered separately }}
+        </div>
+    
+        {{! ---------------------------- tab for chart graphics control form }}
+        <div id="chart-control" class="tab-pane">
+            {{! rendered separately }}
+        </div>
+
+        {{! ---------------------------- tab for data statistics }}
+        <div id="stats-display" class="tab-pane">
+            {{! rendered separately }}
+        </div>
+
+        {{! ---------------------------- tab for actual chart }}
+        <div id="chart-display" class="tab-pane">
+            {{! chart rendered separately }}
+        </div>
+
+    </div>{{! end .tab-content }}
+</div>{{! end .chart-control }}
+</script>
+
+<script type="text/template" class="template-visualization" id="template-visualization-dataControl"><p class="help-text">
         Use the following controls to change the data used by the chart.
         Use the 'Draw' button to render (or re-render) the chart with the current settings.
     </p>
-        
+
     {{! column selector containers }}
     <div class="column-select"><label for="X-select">Data column for X: </label>
@@ -34,7 +71,7 @@
         {{/each}}
         </select></div>
-    
+
     {{! optional id column }}
     <div id="include-id"><label for="include-id-checkbox">Include a third column as data point IDs?</label>
@@ -52,47 +89,19 @@
         {{/each}}
         </select></div>
-    
+
     <input id="render-button" type="button" value="Draw" />
-    <input id="save-button" type="button" value="Download Plot as SVG" style="display: none;" /><div class="clear"></div>
-</div>
-
-<div id="chart-settings" class="tab-pane">
-</div>
-
-<div id="chart-stats" class="tab-pane">
-</div>
-</div>{{! class="tab-content" }}
-
-{{! loading indicator - initially hidden }}
-<div id="loading-indicator" style="display: none;">
-    <img class="loading-img" src="{{loadingIndicatorImagePath}}" />
-    <span class="loading-message">{{message}}</span>
-</div>
-
 </script>
-<script type="text/template" class="template-visualization" id="template-visualization-statsTable">
-    <p class="help-text">By column:</p>
-    <table id="chart-stats-table">
-        <thead><th></th><th>X</th><th>Y</th></thead>
-        {{#each stats}}
-        <tr><td>{{name}}</td><td>{{xval}}</td><td>{{yval}}</td></tr>
-        </tr>
-        {{/each}}
-    </table>
-</script>
-
-<script type="text/template" class="template-visualization" id="template-visualization-chartSettings">
-
+<script type="text/template" class="template-visualization" id="template-visualization-chartControl"><p class="help-text">
         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.
     </p>
-        
+
     <div id="datapointSize" class="form-input numeric-slider-input"><label for="datapointSize">Size of data point: </label><div class="slider-output">{{datapointSize}}</div>
@@ -143,3 +152,18 @@
<input id="render-button" type="button" value="Draw" /></script>
+
+<script type="text/template" class="template-visualization" id="template-visualization-statsDisplay">
+    <p class="help-text">By column:</p>
+    <table id="chart-stats-table">
+        <thead><th></th><th>X</th><th>Y</th></thead>
+        {{#each stats}}
+        <tr><td>{{name}}</td><td>{{xval}}</td><td>{{yval}}</td></tr>
+        </tr>
+        {{/each}}
+    </table>
+</script>
+
+<script type="text/template" class="template-visualization" id="template-visualization-chartDisplay">
+    <svg width="{{width}}" height="{{height}}"></svg>
+</script>
diff -r 8143d7f7b94449889c1d590a3d72a3d20de291e3 -r 9bf411ee2476c21c4c3fce6a5bbabf508f7505ff static/scripts/utils/LazyDataLoader.js
--- a/static/scripts/utils/LazyDataLoader.js
+++ b/static/scripts/utils/LazyDataLoader.js
@@ -1,3 +1,4 @@
+//==============================================================================
 /*
 TODO:
     ?? superclass dataloader, subclass lazydataloader??
@@ -213,3 +214,5 @@
     loader.initialize( config );
     return loader;
 }
+
+//==============================================================================
diff -r 8143d7f7b94449889c1d590a3d72a3d20de291e3 -r 9bf411ee2476c21c4c3fce6a5bbabf508f7505ff static/scripts/viz/scatterplot.js
--- a/static/scripts/viz/scatterplot.js
+++ b/static/scripts/viz/scatterplot.js
@@ -1,18 +1,3 @@
-define([
-    "../libs/underscore",
-    
-    "../mvc/base-mvc",
-    "../utils/LazyDataLoader",
-    "../templates/compiled/template-visualization-scatterplotControlForm",
-    "../templates/compiled/template-visualization-statsTable",
-    "../templates/compiled/template-visualization-chartSettings",
-    
-    "../libs/d3",
-    
-    "../libs/bootstrap",
-    "../libs/jquery/jquery-ui"
-], function(){
-
 /* =============================================================================
 todo:
     outside this:
@@ -106,8 +91,8 @@
         yNumTicks : 10,
         xAxisLabelBumpY : 40,
         yAxisLabelBumpX : -35,
-        width   : 500,
-        height  : 500,
+        width   : 400,
+        height  : 400,
         //TODO: anyway to make this a sub-obj?
         marginTop : 50,
         marginRight : 50,
@@ -123,11 +108,14 @@
         yLabel : "Y"
     };
     this.config = _.extend( {}, this.defaults, config );
+    this.log( 'intial config:', this.config );
this.updateConfig = function( newConfig, rerender ){
         // setter for chart config
         //TODO: validate here
         _.extend( this.config, newConfig );
+        this.log( this + '.updateConfig:', this.config );
+        //TODO: implement rerender flag
     };
// ........................................................ helpers
@@ -143,20 +131,6 @@
     };
// ........................................................ initial element creation
-    //NOTE: called on new
-    this.svg = d3.select( this.config.containerSelector )
-        .append( "svg:svg" ).attr( "class", "chart" );
-        
-    this.content = this.svg.append( "svg:g" ).attr( "class", "content" ).attr( 'id', this.config.id );
-    
-    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( top, right, bottom, left ){
         //this.log( this + '.adjustChartDimensions', arguments );
         top = top || 0;
@@ -186,8 +160,8 @@
         return ( data.length > this.config.maxDataPoints )? ( data.slice( 0, this.config.maxDataPoints ) ): ( data );
     };
-    this.setUpDomains = function( xCol, yCol, meta ){
-        //this.log( this + '.setUpDomains', arguments );
+    this.findMinMaxes = function( xCol, yCol, meta ){
+        //this.log( this + '.findMinMaxes', arguments );
         // configuration takes priority, otherwise meta (from the server) if passed, last-resort: compute it here
         this.xMin = this.config.xMin || ( meta )?( meta[0].min ):( d3.min( xCol ) );
         this.xMax = this.config.xMax || ( meta )?( meta[0].max ):( d3.max( xCol ) );
@@ -220,22 +194,22 @@
             .call( this.xAxisFn );
         //this.log( 'xAxis:', this.xAxis );
-        this.xLongestLabel = d3.max( _.map( [ this.xMin, this.xMax ],
+        //TODO: adjust ticks when tick labels are long - move odds down and extend tick line
+        // (for now) hide them
+        var xLongestTickLabel = d3.max( _.map( [ this.xMin, this.xMax ],
                                      function( number ){ return ( String( number ) ).length; } ) );
-        //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
-            // (for now) hide them
+        //this.log( 'xLongestTickLabel:', xLongestTickLabel );
+        if( xLongestTickLabel >= X_LABEL_TOO_LONG_AT ){
             this.xAxis.selectAll( 'g' ).filter( ':nth-child(odd)' ).style( 'display', 'none' );
         }
+        this.log( 'this.config.xLabel:', this.config.xLabel );
         this.xAxisLabel// = xAxis.select( 'text#x-axis-label' )
             .attr( 'x', this.config.width / 2 )
             .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(){
@@ -248,9 +222,10 @@
             .call( this.yAxisFn );
         //this.log( 'yAxis:', this.yAxis );
+        // a too complicated section for increasing the left margin when tick labels are long
         // get the tick labels for the y axis
         var yTickLabels = this.yAxis.selectAll( 'text' ).filter( function( e, i ){ return i !== 0; } );
-        //this.log( 'yTickLabels:', yTickLabels );
+        this.log( 'yTickLabels:', yTickLabels );
// get the longest label length (or 0 if no labels)
         this.yLongestLabel = d3.max(
@@ -412,7 +387,7 @@
         }
// titles
-        newDatapoints.attr( 'title', function( d, i ){
+        newDatapoints.attr( 'svg:title', function( d, i ){
             return (( ids )?( ids[ i ] + ': ' ):( '' )) + newXCol[ i ] + ', ' + newYCol[ i ];
         });
@@ -462,6 +437,9 @@
this.render = function( columnData, meta ){
         this.log( this + '.render', arguments );
+        this.log( '\t config:', this.config );
+
+        // prepare the data
         //pre: columns passed are numeric
         //pre: at least two columns are passed
         //assume: first column is x, second column is y, any remaining aren't used
@@ -475,12 +453,32 @@
         yCol = this.preprocessData( yCol );
         this.log( 'xCol len', xCol.length, 'yCol len', yCol.length );
-        this.setUpDomains( xCol, yCol, meta );
+        this.findMinMaxes( xCol, yCol, meta );
         //this.log( 'xMin, xMax, yMin, yMax:', this.xMin, this.xMax, this.yMin, this.yMax );
+        this.setUpScales();
+
+        // build the svg dom infrastructure
+        if( !this.svg ){ this.svg = d3.select( 'svg' ).attr( "class", "chart" ); }
+        if( !this.content ){
+            this.content = this.svg.append( "svg:g" ).attr( "class", "content" ).attr( 'id', this.config.id );
+        }
+        //this.log( 'svg:', this.svg );
+        //this.log( 'content:', this.content );
+
+        this.adjustChartDimensions();
-        this.setUpScales();
-        this.adjustChartDimensions();
-    
+        if( !this.xAxis ){ this.xAxis = this.content.append( 'g' ).attr( 'class', 'axis' ).attr( 'id', 'x-axis' ); }
+        if( !this.xAxisLabel ){
+            this.xAxisLabel = this.xAxis.append( 'text' ).attr( 'class', 'axis-label' ).attr( 'id', 'x-axis-label' );
+        }
+        //this.log( 'xAxis:', this.xAxis, 'xAxisLabel:', this.xAxisLabel );
+
+        if( !this.yAxis ){ this.yAxis = this.content.append( 'g' ).attr( 'class', 'axis' ).attr( 'id', 'y-axis' ); }
+        if( !this.yAxisLabel ){
+            this.yAxisLabel = this.yAxis.append( 'text' ).attr( 'class', 'axis-label' ).attr( 'id', 'y-axis-label' );
+        }
+        //this.log( 'yAxis:', this.yAxis, 'yAxisLabel:', this.yAxisLabel );
+        
         this.setUpXAxis();
         this.setUpYAxis();
@@ -490,510 +488,3 @@
 }
//==============================================================================
-/**
- *  Scatterplot control UI as a backbone view
- *      handles:
- *          getting the desired data
- *          configuring the plot display
- *          showing (general) statistics
- *
- *  initialize attributes REQUIRES a dataset and an apiDatasetsURL
- */
-var ScatterplotControlForm = BaseView.extend( LoggableMixin ).extend({
-    //logger      : console,
-    className   : 'scatterplot-settings-form',
-    
-    dataLoadDelay : 500,
-    dataLoadSize  : 3001,
-
-    loadingIndicatorImage : 'loading_large_white_bg.gif',
-    
-    initialize : function( attributes ){
-        this.log( this + '.initialize, attributes:', attributes );
-        
-        this.dataset = null;
-        this.chartConfig = null;
-        this.plot = null;
-        this.loader = null;
-
-        this.$statsPanel = null;
-        this.$chartSettingsPanel = null;
-        this.$dataSettingsPanel = null;
-        this.dataFetch = null;
-
-        this.initializeFromAttributes( attributes );
-        this.initializeChart( attributes );
-        this.initializeDataLoader( attributes );
-    },
-
-    initializeFromAttributes : function( attributes ){
-        // required settings: ensure certain vars we need are passed in attributes
-        if( !attributes || !attributes.dataset ){
-            throw( "ScatterplotView requires a dataset" );
-        } else {
-            this.dataset = attributes.dataset;
-        }
-        if( jQuery.type( this.dataset.metadata_column_types ) === 'string' ){
-            this.dataset.metadata_column_types = this.dataset.metadata_column_types.split( ', ' );
-        }
-        this.log( 'dataset:', this.dataset );
-
-        // passed from mako helper
-        //TODO: integrate to galaxyPaths
-        if( !attributes.apiDatasetsURL ){
-            throw( "ScatterplotView requires a apiDatasetsURL" );
-        } else {
-            this.dataURL = attributes.apiDatasetsURL + '/' + this.dataset.id + '?';
-        }
-        this.log( 'this.dataURL:', this.dataURL );
-    },
-
-    initializeChart : function( attributes ){
-        // set up the basic chart infrastructure and config (if any)
-        this.chartConfig = attributes.chartConfig || {};
-        if( this.logger ){ this.chartConfig.debugging = true; }
-        this.log( 'initial chartConfig:', this.chartConfig );
-        this.plot = new TwoVarScatterplot( this.chartConfig );
-        this.chartConfig = this.plot.config;
-    },
-
-    initializeDataLoader : function( attributes ){
-        // set up data loader
-        var view = this;
-        this.loader = new LazyDataLoader({
-            logger  : ( this.logger )?( this.logger ):( null ),
-            // we'll generate this when columns are chosen
-            url     : null,
-            start   : attributes.start || 0,
-            //NOTE: metadata_data_lines can be null (so we won't know the total)
-            total   : attributes.total || this.dataset.metadata_data_lines,
-            delay   : this.dataLoadDelay,
-            size    : this.dataLoadSize,
-
-            buildUrl : function( start, size ){
-                // currently VERY SPECIFIC to using data_providers.py start_val, max_vals params
-                return this.url + '&' + jQuery.param({
-                    start_val: start,
-                    max_vals:  size
-                });
-            }
-        });
-        $( this.loader ).bind( 'error', function( event, status, error ){
-            view.log( 'ERROR:', status, error );
-            alert( 'ERROR fetching data:\n' + status + '\n' + error );
-            view.hideLoadingIndicator();
-        });
-    },
-    
-    // ------------------------------------------------------------------------- CONTROLS RENDERING
-    render : function(){
-        // render the data/chart control forms (but not the chart)
-        var view = this,
-            formData = {
-                config : this.chartConfig,
-                allColumns : [],
-                numericColumns : [],
-                loadingIndicatorImagePath : galaxy_paths.get( 'image_path' ) + '/' + this.loadingIndicatorImage
-            };
-        
-        //TODO: isNumericColumn
-        // gather column indeces (from metadata_column_types) and names (from metadata_columnnames)
-        _.each( this.dataset.metadata_column_types, function( type, index ){
-            // label with the name if available (fall back on 'column <index>')
-            var name = 'column ' + ( index + 1 );
-            if( view.dataset.metadata_column_names ){
-                name = view.dataset.metadata_column_names[ index ];
-            }
-            
-            // filter numeric columns to their own list
-            if( type === 'int' || type === 'float' ){
-                formData.numericColumns.push({ index: ( index + 1 ), name: name });
-            }
-            formData.allColumns.push({ index: ( index + 1 ), name: name });
-        });
-        //TODO: other vals: max_vals, start_val, pagination (plot-settings)
-        
-        // render template and set up panels, store refs
-        this.$el.append( ScatterplotControlForm.templates.form( formData ) );
-
-        this.$dataSettingsPanel  = this.$el.find( '.tab-pane#data-settings' );
-        this.$chartSettingsPanel = this._render_chartSettings();
-        this.$statsPanel         = this.$el.find( '.tab-pane#chart-stats' );
-
-        // preset to column selectors if they were passed in the config
-        this.$dataSettingsPanel.find( '#X-select' ).val( this.chartConfig.xColumn );
-        this.$dataSettingsPanel.find( '#Y-select' ).val( this.chartConfig.yColumn );
-        if( this.chartConfig.idColumn !== undefined ){
-            this.$dataSettingsPanel.find( '#include-id-checkbox' )
-                .attr( 'checked', true ).trigger( 'change' );
-            this.$dataSettingsPanel.find( '#ID-select' ).val( this.chartConfig.idColumn );
-        }
-
-        //this.$el.find( 'ul.nav' ).find( 'a[href="#chart-settings"]' ).tab( 'show' );
-
-        //TODO:?? add autoRender=1 to query maybe?
-        if( this.chartConfig.xColumn && this.chartConfig.yColumn ){
-            this.renderPlot();
-        }
-        return this;
-    },
-    
-    //TODO: seems like a function of dataset or metadata
-    isColumnNumeric : function( index ){
-        if( ( index >= 0 ) && ( index < this.dataset.metadata_column_types.length ) ){
-            var columnType = this.dataset.metadata_column_types[ index ];
-            return ( columnType === 'int' || columnType === 'float' );
-        }
-        return false;
-    },
-    
-    _render_chartSettings : function(){
-        // chart settings panel
-        var chartControl = this,
-            $chartSettingsPanel = this.$el.find( '.tab-pane#chart-settings' ),
-            // limits for controls (by control/chartConfig id)
-            //TODO: move into TwoVarScatterplot
-            controlRanges = {
-                'datapointSize' : { min: 2, max: 10, step: 1 },
-                'width'         : { min: 200, max: 800, step: 20 },
-                'height'        : { min: 200, max: 800, step: 20 }
-            };
-            
-        // render the html
-        $chartSettingsPanel.append( ScatterplotControlForm.templates.chartSettings( this.chartConfig ) );
-        
-        // set up js on sliders
-        $chartSettingsPanel.find( '.numeric-slider-input' ).each( function(){
-            var $this = $( this ),
-                $output = $this.find( '.slider-output' ),
-                $slider = $this.find( '.slider' ),
-                id = $this.attr( 'id' );
-            //chartControl.log( 'slider set up', 'this:', $this, 'slider:', $slider, 'id', id );
-                
-            // what to do when the slider changes: update display and update chartConfig
-            function onSliderChange(){
-                var $this = $( this ),
-                    newValue = $this.slider( 'value' );
-                //chartControl.log( 'slider change', 'this:', $this, 'output:', $output, 'value', newValue );
-                $output.text( newValue );
-                //chartControl.chartConfig[ id ] = newValue;
-            }
-        
-            $slider.slider( _.extend( controlRanges[ id ], {
-                value   : chartControl.chartConfig[ id ],
-                change  : onSliderChange,
-                slide   : onSliderChange
-            }));
-        });
-        
-        return $chartSettingsPanel;
-    },
-    
-    // ------------------------------------------------------------------------- EVENTS
-    events : {
-        'change #include-id-checkbox'            : 'toggleThirdColumnSelector',
-        'click #data-settings #render-button'   : 'renderPlot',
-        'click #chart-settings #render-button'  : 'changeChartSettings'
-    },
-
-    toggleThirdColumnSelector : function(){
-        // show/hide the id selector on the data settings panel
-        this.$el.find( 'select[name="ID"]' ).parent().toggle();
-    },
-    
-    showLoadingIndicator : function( message, callback ){
-        // display the loading indicator over the tab panels if hidden, update message (if passed)
-        message = message || '';
-        var indicator = this.$el.find( 'div#loading-indicator' );
-            messageBox = indicator.find( '.loading-message' );
-            
-        if( indicator.is( ':visible' ) ){
-            if( message ){
-                messageBox.fadeOut( 'fast', function(){
-                    messageBox.text( message );
-                    messageBox.fadeIn( 'fast', callback );
-                });
-            } else {
-                callback();
-            }
-            
-        } else {
-            if( message ){ messageBox.text( message ); }
-            indicator.fadeIn( 'fast', callback );
-        }
-    },
-
-    hideLoadingIndicator : function( callback ){
-        this.$el.find( 'div#loading-indicator' ).fadeOut( 'fast', callback );
-    },
-    
-    // ------------------------------------------------------------------------- GRAPH/STATS RENDERING
-    renderPlot : function(){
-        // fetch the data, (re-)render the chart
-        //TODO: separate data fetch
-        var view = this;
-
-        // this is a complete re-render, so clear the prev. data
-        view.data = null;
-        view.meta = null;
-        
-        // update the chartConfig (here and plot) using graph settings
-        //TODO: separate and improve (used in changeChartSettings too)
-        _.extend( this.chartConfig, this.getGraphSettings() );
-        this.log( 'this.chartConfig:', this.chartConfig );
-        this.plot.updateConfig( this.chartConfig, false );
-        
-        // build the url with the current data settings
-        this.loader.url   = this.dataURL + '&' + jQuery.param( this.getDataSettings() );
-        this.log( 'this.loader, url:', this.loader.url, 'total:', this.loader.total );
-
-        // bind the new data event to: aggregate data, update the chart and stats with new data
-        $( this.loader ).bind( 'loaded.new', function( event, response ){
-            view.log( view + ' loaded.new', response );
-
-            // aggregate data and meta
-            view.postProcessDataFetchResponse( response );
-            view.log( 'postprocessed data:', view.data, 'meta:', view.meta );
-
-            // update the graph and stats
-            view.showLoadingIndicator( 'Rendering...', function(){
-                view.$el.find( 'ul.nav' ).find( 'a[href="#chart-stats"]' ).tab( 'show' );
-
-                view.plot.render( view.data, view.meta );
-                view.renderStats( view.data, view.meta );
-                view.hideLoadingIndicator();
-            });
-        });
-        // when all data loaded - unbind (or we'll start doubling event handlers)
-        $( this.loader ).bind( 'complete', function( event, data ){
-            view.log( 'complete', data );
-            $( view.loader ).unbind();
-        });
-
-        // begin loading the data
-        view.showLoadingIndicator( 'Fetching data...', function(){ view.loader.load(); });
-    },
-
-    renderStats : function(){
-        // render the stats table in the stats panel
-        //TODO: there's a better way
-        this.$statsPanel.html( ScatterplotControlForm.templates.statsTable({
-            stats:  [
-                { name: 'Count',    xval: this.meta[0].count,   yval: this.meta[1].count },
-                { name: 'Min',      xval: this.meta[0].min,     yval: this.meta[1].min },
-                { name: 'Max',      xval: this.meta[0].max,     yval: this.meta[1].max },
-                { name: 'Sum',      xval: this.meta[0].sum,     yval: this.meta[1].sum },
-                { name: 'Mean',     xval: this.meta[0].mean,    yval: this.meta[1].mean },
-                { name: 'Median',   xval: this.meta[0].median,  yval: this.meta[1].median }
-            ]
-        }));
-    },
-
-    changeChartSettings : function(){
-        // re-render the chart with new chart settings and OLD data
-        var view = this;
-            newGraphSettings = this.getGraphSettings();
-
-        // update the chart config from the chartSettings panel controls
-        this.log( 'newGraphSettings:', newGraphSettings );
-        _.extend( this.chartConfig, newGraphSettings );
-        this.log( 'this.chartConfig:', this.chartConfig );
-        this.plot.updateConfig( this.chartConfig, false );
-
-        // if there's current data, call plot.render with it (no data fetch)
-        if( view.data && view.meta ){
-            view.showLoadingIndicator( 'Rendering...', function(){
-                view.plot.render( view.data, view.meta );
-                view.hideLoadingIndicator();
-            });
-
-        // no current data, call renderPlot instead (which will fetch data)
-        } else {
-            this.renderPlot();
-        }
-    },
-
-    // ------------------------------------------------------------------------- DATA AGGREGATION
-    postProcessDataFetchResponse : function( response ){
-        // the loader only returns new data - it's up to this to munge the fetches together properly
-        //TODO: we're now storing data in two places: loader and here
-        //  can't we reduce incoming data into loader.data[0]? are there concurrency problems?
-        this.postProcessData( response.data );
-        this.postProcessMeta( response.meta );
-    },
-    
-    postProcessData : function( newData ){
-        // stack the column data on top of each other into this.data
-        var view = this;
-
-        // if we already have data: aggregate
-        if( view.data ){
-            _.each( newData, function( newColData, colIndex ){
-                //view.log( colIndex + ' data:', newColData );
-                //TODO??: time, space efficiency of this?
-                view.data[ colIndex ] = view.data[ colIndex ].concat( newColData );
-            });
-            
-        // otherwise: assign (first load)
-        } else {
-            view.data = newData;
-        }
-    },
-
-    postProcessMeta : function( newMeta ){
-        // munge the meta data (stats) from the server fetches together
-        //pre: this.data must be preprocessed (needed for medians)
-        var view = this,
-            colTypes = this.dataset.metadata_column_types;
-
-        // if we already have meta: aggregate
-        if( view.meta ){
-            _.each( newMeta, function( newColMeta, colIndex ){
-                var colMeta = view.meta[ colIndex ],
-                    colType = colTypes[ colIndex ];
-                view.log( colIndex + ' postprocessing meta:', newColMeta );
-                //view.log( colIndex + ' old meta:',
-                //    'min:',     colMeta.min,
-                //    'max:',     colMeta.max,
-                //    'sum:',     colMeta.sum,
-                //    'mean:',    colMeta.mean,
-                //    'median:',  colMeta.median
-                //);
-
-                //!TODO: at what point are we getting int/float overflow on these?!
-                //??: need to be null safe?
-                colMeta.count += ( newColMeta.count )?( newColMeta.count ):( 0 );
-                view.log( colIndex, 'count:', colMeta.count );
-                
-                if( ( colType === 'int' ) || ( colType === 'float' ) ){
-                    //view.log( colIndex + ' incoming meta:',
-                    //    'min:',     newColMeta.min,
-                    //    'max:',     newColMeta.max,
-                    //    'sum:',     newColMeta.sum,
-                    //    'mean:',    newColMeta.mean,
-                    //    'median:',  newColMeta.median
-                    //);
-
-                    colMeta.min  = Math.min( newColMeta.min, colMeta.min );
-                    colMeta.max  = Math.max( newColMeta.max, colMeta.max );
-                    colMeta.sum  = newColMeta.sum + colMeta.sum;
-                    colMeta.mean = ( colMeta.count )?( colMeta.sum / colMeta.count ):( null );
-
-                    // median's a pain bc of sorting (requires the data as well)
-                    var sortedCol = view.data[ colIndex ].slice().sort(),
-                        middleIndex = Math.floor( sortedCol.length / 2 );
-
-                    if( sortedCol.length % 2 === 0 ){
-                        colMeta.median = ( ( sortedCol[ middleIndex ] + sortedCol[( middleIndex + 1 )] ) / 2 );
-
-                    } else {
-                        colMeta.median = sortedCol[ middleIndex ];
-                    }
-
-                    //view.log( colIndex + ' new meta:',
-                    //    'min:',     colMeta.min,
-                    //    'max:',     colMeta.max,
-                    //    'sum:',     colMeta.sum,
-                    //    'mean:',    colMeta.mean,
-                    //    'median:',  colMeta.median
-                    //);
-                }
-            });
-
-        // otherwise: assign (first load)
-        } else {
-            view.meta = newMeta;
-            view.log( 'initial meta:', view.meta );
-        }
-    },
-
-    // ------------------------------------------------------------------------- GET DATA/GRAPH SETTINGS
-    getDataSettings : function(){
-        // parse the column values for both indeces (for the data fetch) and names (for the graph)
-        var columnSelections = this.getColumnSelections(),
-            columns = [];
-        this.log( 'columnSelections:', columnSelections );
-            
-        //TODO: validate columns - minimally: we can assume either set by selectors or via a good query string
-
-        // get column indices for params, include the desired ID column (if any)
-        columns = [ columnSelections.X.colIndex, columnSelections.Y.colIndex ];
-        if( this.$dataSettingsPanel.find( '#include-id-checkbox' ).attr( 'checked' ) ){
-            columns.push( columnSelections.ID.colIndex );
-        }
-        
-        //TODO: other vals: max, start, page
-        
-        var params = {
-            data_type   : 'raw_data',
-            columns     : '[' + columns + ']'
-        };
-        this.log( 'params:', params );
-        return params;
-    },
-
-    getColumnSelections : function(){
-        // gets the current user-selected values for which columns to fetch from the data settings panel
-        // returns a map: { column-select name (eg. X) : { colIndex : column-selector val,
-        //                                                 colName : selected option text }, ... }
-        var selections = {};
-        this.$dataSettingsPanel.find( 'div.column-select select' ).each( function(){
-            var $this   = $( this ),
-                val     = parseInt( $this.val(), 10 ) - 1;
-            selections[ $this.attr( 'name' ) ] = {
-                colIndex : val,
-                colName  : $this.children( '[value="' + val + '"]' ).text()
-            };
-        });
-        return selections;
-    },
-
-    getGraphSettings : function(){
-        // gets the user-selected chartConfig from the chart settings panel
-        var settings = {},
-            colSelections = this.getColumnSelections();
-        //this.log( 'colSelections:', colSelections );
-
-        //TODO: simplify with keys and loop
-        settings.datapointSize = this.$chartSettingsPanel.find( '#datapointSize.numeric-slider-input' )
-            .find( '.slider' ).slider( 'value' );
-        settings.width = this.$chartSettingsPanel.find( '#width.numeric-slider-input' )
-            .find( '.slider' ).slider( 'value' );
-        settings.height = this.$chartSettingsPanel.find( '#height.numeric-slider-input' )
-            .find( '.slider' ).slider( 'value' );
-
-        // update axes labels using chartSettings inputs (if not at defaults), otherwise the selects' colName
-        //TODO: a little confusing
-        var chartSettingsXLabel = this.$chartSettingsPanel.find( 'input#X-axis-label' ).val(),
-            chartSettingsYLabel = this.$chartSettingsPanel.find( 'input#Y-axis-label' ).val();
-        settings.xLabel = ( chartSettingsXLabel === 'X' )?
-                            ( colSelections.X.colName ):( chartSettingsXLabel );
-        settings.yLabel = ( chartSettingsYLabel === 'Y' )?
-                            ( colSelections.Y.colName ):( chartSettingsYLabel );
-
-        settings.animDuration = 10;
-        if( this.$chartSettingsPanel.find( '#animDuration.checkbox-input' ).is( ':checked' ) ){
-            settings.animDuration = 500;
-        }
-
-        this.log( 'graphSettings:', settings );
-        return settings;
-    },
-
-    toString : function(){
-        return 'ScatterplotControlForm(' + (( this.dataset )?( this.dataset.id ):( '' )) + ')';
-    }
-});
-
-ScatterplotControlForm.templates = {
-    form            : Handlebars.templates[ 'template-visualization-scatterplotControlForm' ],
-    statsTable      : Handlebars.templates[ 'template-visualization-statsTable' ],
-    chartSettings   : Handlebars.templates[ 'template-visualization-chartSettings' ]
-};
-
-//==============================================================================
-return {
-    LazyDataLoader          : LazyDataLoader,
-    TwoVarScatterplot       : TwoVarScatterplot,
-    ScatterplotControlForm  : ScatterplotControlForm
-};});
diff -r 8143d7f7b94449889c1d590a3d72a3d20de291e3 -r 9bf411ee2476c21c4c3fce6a5bbabf508f7505ff templates/visualization/scatterplot.mako
--- a/templates/visualization/scatterplot.mako
+++ b/templates/visualization/scatterplot.mako
@@ -12,21 +12,7 @@
 /*TODO: use/move into base.less*/
 * { margin: 0px; padding: 0px; }
-/* -------------------------------------------- layout */
-.column {
-    position:relative;
-    overflow: auto;
-}
-
-.left-column {
-    float: left;
-    width: 40%;
-}
-
-.right-column {
-    margin-left: 41%;
-}
-
+/* -------------------------------------------- general layout */
 div.tab-pane {
     padding: 8px;
 }
@@ -39,6 +25,7 @@
 #chart-header {
     padding : 8px;
     background-color: #ebd9b2;
+    margin-bottom: 16px;
 }
#chart-header .subtitle {
@@ -48,90 +35,98 @@
     font-size: small;
 }
-/* -------------------------------------------- all controls */
-#chart-settings-form {
+/* -------------------------------------------- main layout */
+#scatterplot {
     /*from width + margin of chart?*/
-    padding-top: 1em;
 }
-#chart-settings-form input[type=button],
-#chart-settings-form select {
+.scatterplot-container .tab-pane {
+}
+
+/* -------------------------------------------- all controls */
+
+#scatterplot input[type=button],
+#scatterplot select {
     width: 100%;
     max-width: 256px;
     margin-bottom: 8px;
 }
-#chart-settings-form .help-text,
-#chart-settings-form .help-text-small {
+#scatterplot .help-text,
+#scatterplot .help-text-small {
     color: grey;
 }
-#chart-settings-form .help-text {
+#scatterplot .help-text {
     padding-bottom: 16px;
 }
-#chart-settings-form .help-text-small {
+#scatterplot .help-text-small {
     padding: 4px;
     font-size: smaller;
 }
-#chart-settings-form > * {
+#scatterplot > * {
 }
-#chart-settings-form input[value=Draw] {
+#scatterplot input[value=Draw] {
     display: block;
     margin-top: 16px;
 }
+#scatterplot .numeric-slider-input {
+    max-width: 70%;
+}
+
 /* -------------------------------------------- data controls */
/* -------------------------------------------- chart controls */
-#chart-settings .form-input {
+#chart-control .form-input {
     /*display: table-row;*/
 }
-#chart-settings label {
+#chart-control label {
     /*text-align: right;*/
     margin-bottom: 8px;
     /*display: table-cell;*/
 }
-#chart-settings .slider {
+#chart-control .slider {
     /*display: table-cell;*/
     height: 8px;
     display: block;
     margin: 8px 0px 0px 8px;
 }
-#chart-settings .slider-output {
+#chart-control .slider-output {
     /*display: table-cell;*/
     float: right;
 }
-#chart-settings input[type="text"] {
+#chart-control input[type="text"] {
     border: 1px solid lightgrey;
 }
/* -------------------------------------------- statistics */
-#chart-stats table#chart-stats-table {
+#stats-display table#chart-stats-table {
     width: 100%;
 }
-#chart-stats #chart-stats-table th {
+#stats-display #chart-stats-table th {
     width: 30%;
     padding: 4px;
     font-weight: bold;
     color: grey;
 }
-#chart-stats #chart-stats-table td {
+#stats-display #chart-stats-table td {
     border: solid lightgrey;
     border-width: 1px 0px 0px 1px;
     padding: 4px;
 }
-#chart-stats #chart-stats-table td:nth-child(1) {
+#stats-display #chart-stats-table td:nth-child(1) {
     border-width: 1px 0px 0px 0px;
     padding-right: 1em;
     text-align: right;
@@ -141,19 +136,12 @@
/* -------------------------------------------- load indicators */
 #loading-indicator {
-    z-index: 2;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: white;
-    padding: 32px 0 0 32px;
+    margin: 12px 0px 0px 8px;
 }
-#chart-settings-form #loading-indicator .loading-message {
-    margin-left: 10px;
+#scatterplot #loading-indicator .loading-message {
     font-style: italic;
+    font-size: smaller;
     color: grey;
 }
@@ -208,18 +196,37 @@
<%def name="javascripts()">
 ${parent.javascripts()}
-${h.js( "libs/require" )}
+${h.js(
+
+    "libs/underscore",
+    "libs/jquery/jquery-ui",
+    "libs/d3",
+
+    "mvc/base-mvc",
+    "utils/LazyDataLoader",
+    "viz/scatterplot"
+)}
+
+${h.templates(
+    "../../templates/compiled/template-visualization-scatterplotControlForm",
+    "../../templates/compiled/template-visualization-dataControl",
+    "../../templates/compiled/template-visualization-chartControl",
+    "../../templates/compiled/template-visualization-chartDisplay",
+    "../../templates/compiled/template-visualization-statsDisplay"
+)}
+
+${h.js(
+    "mvc/visualizations/scatterplotControlForm",
+)}
<script type="text/javascript">
-require.config({ baseUrl : "${h.url_for( '/static/scripts' )}", });
+$(function(){
-require([ "viz/scatterplot" ], function( scatterplot ){
-    
     var hda             = ${h.to_json_string( hda )},
         historyID       = '${historyID}',
         querySettings   = ${h.to_json_string( kwargs )},
         chartConfig     = _.extend( querySettings, {
-            containerSelector : '#chart-holder',
+            containerSelector : '#chart',
             //TODO: move to ScatterplotControlForm.initialize
             marginTop   : ( querySettings.marginTop > 20 )?( querySettings.marginTop ):( 20 ),
@@ -229,18 +236,29 @@
         });
     //console.debug( querySettings );
-    var settingsForm = new scatterplot.ScatterplotControlForm({
+    var settingsForm = new ScatterplotControlForm({
         dataset         : hda,
         apiDatasetsURL  : "${h.url_for( controller='/api/datasets' )}",
-        el              : $( '#chart-settings-form' ),
+        el              : $( '#scatterplot' ),
         chartConfig     : chartConfig
     }).render();
});
+</script>
+</%def>
+<%def name="body()">
+    <!--dataset info-->
+    <div id="chart-header" class="header">
+        <h2 class="title">Scatterplot of '${hda['name']}'</h2>
+        <p class="subtitle">${hda['misc_info']}</p>
+    </div>
+    <div id="scatterplot" class="scatterplot-control-form"></div>
+</%def>
+
+<script type="text/javascript">
 function make_abs_box( top, left, x, y, id ){
-    console.debug( top, left, x, y, id );
     var ARROW_SIZE = 8,
         ARROW_COLOR = 'grey',
         DIST_TO_POINT = 4,
@@ -296,26 +314,4 @@
     //console.debug( boxContainer );
     return boxContainer;
 }
-
-
 </script>
-</%def>
-
-<%def name="body()">
-    <!--dataset info-->
-    <div id="chart-header" class="header">
-        <h2 class="title">Scatterplot of '${hda['name']}'</h2>
-        <p class="subtitle">${hda['misc_info']}</p>
-    </div>
-    <div class="outer-container">
-        <!--plot controls-->
-        <div id="chart-settings-form" class="column left-column"></div>
-        <!--plot-->
-        <div class="column right-column">
-            <div id="chart-holder" class="inner-container"></div>
-        </div>
-        <div style="clear: both;"></div>
-    </div>
-    <div id="test"></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.

    