Distinguish draw and save to avoid accumulation of saved visualizations

config/plugins/visualizations/charts/static/components/model.js

@@ -38,7 +38,7 @@ define( [ 'utils/utils', 'mvc/visualization/visualization-model' ], function( Ut
         },
 
         /** Pack and save nested chart model */
-        save: function() {
+        save: function( options ) {
             var self = this;
             var chart_dict = {
                 attributes : this.attributes,
@@ -60,10 +60,15 @@ define( [ 'utils/utils', 'mvc/visualization/visualization-model' ], function( Ut
             viz.save().then( function( response ) {
                 if ( response && response.id ) {
                     self.viz_options.visualization_id = response.id;
+                    options.success && options.success();
                     console.debug( 'model::save() - Received visualization id: ' + response.id );
                 } else {
+                    options.error && options.error();
                     console.debug( 'model::save() - Unrecognized response. Saving may have failed.' );
                 }
+            }).fail( function( response ) {
+                options.error && options.error();
+                console.debug( 'model::save() - Saving failed.' );
             });
             console.debug( 'model::save() - Saved with configuration:' );
             console.debug( this.viz_options );

config/plugins/visualizations/charts/static/views/editor.js

@@ -14,12 +14,12 @@ define( [ 'mvc/ui/ui-tabs', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'utils/utils'
                 icon : 'fa-bar-chart-o',
                 title: 'Editor',
                 operations      : {
-                    'save'  : new Ui.ButtonIcon({
-                        icon    : 'fa-save',
-                        tooltip : 'Save and Draw Chart',
-                        title   : 'Save and Draw',
+                    'draw'  : new Ui.ButtonIcon({
+                        icon    : 'fa-line-chart',
+                        tooltip : 'Draw Chart',
+                        title   : 'Draw',
                         onclick : function() {
-                            self._saveChart();
+                            self._drawChart();
                         }
                     }),
                     'back'  : new Ui.ButtonIcon({
@@ -41,21 +41,21 @@ define( [ 'mvc/ui/ui-tabs', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'utils/utils'
                     if ( !chart_definition ) {
                         self.tabs.hideTab( 'settings' );
                         self.tabs.hideTab( 'groups' );
-                        self.portlet.hideOperation( 'save' );
+                        self.portlet.hideOperation( 'draw' );
                         console.debug( 'editor::onchange() - Chart type not found.' );
                         self.message.update( { message: 'The requested chart type could not be found. Please select a new type from below or contact us.', status: 'danger', persistent: true } );
                     } else {
                         self.tabs.showTab( 'settings' );
                         self.tabs.showTab( 'groups' );
-                        self.portlet.showOperation( 'save' );
+                        self.portlet.showOperation( 'draw' );
                         self.chart.definition = chart_definition;
                         self.chart.set( { type : chart_type, modified : true } );
                         self.message.model.set( 'message', '' );
                         console.debug( 'editor::onchange() - Switched chart type.' );
                     }
                 },
                 ondblclick  : function( chart_id ) {
-                    self._saveChart();
+                    self._drawChart();
                 }
             });
 
@@ -76,7 +76,7 @@ define( [ 'mvc/ui/ui-tabs', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'utils/utils'
                 tooltip : 'Start by selecting a chart type.',
                 $el     : $( '<div/>' ).append( ( new Ui.Label( { title : 'Provide a chart title:' } ).$el ) )
                                        .append( this.title.$el )
-                                       .append( $( '<div/>' ).addClass( 'ui-form-info ui-margin-bottom' ).html( 'This title will appear in the list of \'Saved Visualizations\'. Charts are saved upon creation.' ) )
+                                       .append( $( '<div/>' ).addClass( 'ui-form-info ui-margin-bottom' ).html( 'This title will appear in the list of \'Saved Visualizations\'.' ) )
                                        .append( ( new Ui.Label( { title : 'Select a chart type:' } ).$el.addClass( 'ui-margin-top' ) ) )
                                        .append( this.types.$el )
             });
@@ -126,8 +126,8 @@ define( [ 'mvc/ui/ui-tabs', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'utils/utils'
             this.title.value( title );
         },
 
-        /** Save chart data */
-        _saveChart: function() {
+        /** Draw chart data */
+        _drawChart: function() {
             var self = this;
             this.chart.set({
                 type        : this.types.value(),
@@ -155,7 +155,6 @@ define( [ 'mvc/ui/ui-tabs', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'utils/utils'
             if ( valid ) {
                 this.app.go( 'viewer' );
                 this.app.deferred.execute( function() {
-                    self.chart.save();
                     self.chart.trigger( 'redraw' );
                 });
             }

config/plugins/visualizations/charts/static/views/viewer.js

@@ -86,7 +86,16 @@ define( [ 'utils/utils', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'plugin/views/vi
                             });
                         }
                     }),
-                    export_button: this.export_button
+                    export_button: this.export_button,
+                    save_button: new Ui.ButtonIcon({
+                        icon    : 'fa-save',
+                        tooltip : 'Save this chart',
+                        title   : 'Save',
+                        onclick : function() {
+                            self.message.update( { message: 'Saving chart \'' + self.chart.get( 'title' ) + '\'. It will appear in the list of \'Saved Visualizations\'.', status: 'success' } );
+                            self.chart.save( { error : function() { self.message.update( { message: 'Could not save chart.', status: 'danger' } ) } } );
+                        }
+                    })
                 }
             });
             this.portlet.append( this.message.$el );