edit and create visualizations

rd_service/server.py

@@ -269,7 +269,7 @@ class VisualizationHandler(BaseAuthenticatedHandler):
             vis = data.models.Visualization(**kwargs)
             vis.save()
 
-        self.write_json(vis.to_dict())
+        self.write_json(vis.to_dict(with_query=False))
 
 
 class CsvQueryResultsHandler(BaseAuthenticatedHandler):

rd_ui/app/scripts/controllers.js

@@ -33,12 +33,14 @@
         $scope.updateTime = '';
     }
 
-    var QueryFiddleCtrl = function ($scope, $window, $routeParams, $http, $location, growl, notifications, Query) {
+    var QueryFiddleCtrl = function ($scope, $window, $location, $routeParams, $http, $location, growl, notifications, Query) {
+        var DEFAULT_TAB = 'table';
         var pristineHash = null;
-        $scope.dirty = undefined;
-
         var leavingPageText = "You will lose your changes if you leave";
 
+        $scope.dirty = undefined;
+        $scope.newVisualization = undefined;
+
         $window.onbeforeunload = function(){
             if (currentUser.canEdit($scope.query) && $scope.dirty) {
                 return leavingPageText;
@@ -72,11 +74,9 @@
 
         $scope.$parent.pageTitle = "Query Fiddle";
 
-        // more tabs added when query loads
-        $scope.tabs = [{'key': 'table', 'name': 'Table'},
-                       {'key': 'pivot', 'name': 'Pivot Table'},
-                       {'key': 'add', 'name': 'New Visualization'}];
-
+        $scope.$watch(function() {return $location.hash()}, function(hash) {
+            $scope.selectedTab = hash || DEFAULT_TAB;
+        });
 
         $scope.lockButton = function (lock) {
             $scope.queryExecuting = lock;
@@ -194,11 +194,6 @@
                 pristineHash = q.getHash();
                 $scope.dirty = false;
                 $scope.queryResult = $scope.query.getQueryResult();
-
-                _.each(q.visualizations, function(vis) {
-                    $scope.tabs.splice(-1, 0, {'key': 'vis' + vis.id, 'name': vis.name});
-                });
-
             });
         } else {
             $scope.query = new Query({query: "", name: "New Query", ttl: -1, user: currentUser.name});
@@ -381,7 +376,7 @@
         .controller('DashboardCtrl', ['$scope', '$routeParams', '$http', 'Dashboard', DashboardCtrl])
         .controller('WidgetCtrl', ['$scope', '$http', '$location', 'Query', WidgetCtrl])
         .controller('QueriesCtrl', ['$scope', '$http', '$location', '$filter', 'Query', QueriesCtrl])
-        .controller('QueryFiddleCtrl', ['$scope', '$window', '$routeParams', '$http', '$location', 'growl', 'notifications', 'Query', QueryFiddleCtrl])
+        .controller('QueryFiddleCtrl', ['$scope', '$window', '$location', '$routeParams', '$http', '$location', 'growl', 'notifications', 'Query', QueryFiddleCtrl])
         .controller('IndexCtrl', ['$scope', 'Dashboard', IndexCtrl])
         .controller('MainCtrl', ['$scope', 'Dashboard', 'notifications', MainCtrl]);
 })();

rd_ui/app/scripts/directives.js

@@ -3,6 +3,23 @@
 
     var directives = angular.module('redash.directives', []);
 
+    directives.directive('rdTab', ['$location', function($location) {
+        return {
+            restrict: 'E',
+            scope: {
+                'id': '@',
+                'name': '@'
+            },
+            template: '<li ng-class="{active: id==selectedTab}"><a href="#{{id}}">{{name}}</a></li>',
+            replace: true,
+            link: function(scope) {
+                scope.$watch(function(){return scope.$parent.selectedTab}, function(tab) {
+                    scope.selectedTab = tab;
+                });
+            }
+        }
+    }]);
+
     directives.directive('rdTabs', ['$location', '$rootScope', function($location, $rootScope) {
         return {
             restrict: 'E',
@@ -28,36 +45,56 @@
         }
     }]);
 
-    directives.directive('addVisulatizationForm', ['Visualization', 'growl', function(Visualization, growl) {
+    directives.directive('editVisulatizationForm', ['Visualization', 'growl', function(Visualization, growl) {
         return {
             restrict: 'E',
-            templateUrl: '/views/add_visualization.html',
+            templateUrl: '/views/edit_visualization.html',
             replace: true,
             scope: {
-                query: "="
+                query: '=',
+                vis: '=?'
             },
-            link: function(scope) {
+            link: function(scope, element, attrs) {
                 scope.visTypes = Visualization.prototype.TYPES;
                 scope.visOptions = _.map(Visualization.prototype.TYPES, function (type) {
                     return {type: type, name: Visualization.prototype.NAMES[type]};
                 });
 
-                scope.vis = {
-                    'query_id': scope.query.id,
-                    'type': scope.visTypes.CHART,
-                    'name': scope.query.name,
-                    'description': scope.query.description,
-                    'options': {}
-                };
+                if (!scope.vis) {
+                    // create new visualization
+                    // wait for query to load to populate with defaults
+                    var unwatch = scope.$watch('query', function(q) {
+                        if (q.id) {
+                            unwatch();
+                            scope.vis = {
+                                'query_id': q.id,
+                                'type': scope.visTypes.CHART,
+                                'name': q.name,
+                                'description': q.description,
+                                'options': {}
+                            };
+                        }
+                    }, true);
+                }
 
                 scope.typeChanged = function() {
                     console.log('evme', 'typeChanged');
                     scope.vis.options = {};
                 };
 
-                scope.createVis = function() {
+                scope.submit = function() {
                     Visualization.save(scope.vis, function success(result) {
+                        growl.addSuccessMessage("Visualization saved");
+
                         scope.vis = result;
+
+                        var visIds = _.pluck(scope.query.visualizations, 'id');
+                        var index = visIds.indexOf(result.id);
+                        if (index > -1) {
+                            scope.query.visualizations[index] = result;
+                        } else {
+                            scope.query.visualizations.push(result);
+                        }
                     }, function error() {
                         growl.addErrorMessage("Visualization could not be saved");
                     });

rd_ui/app/views/edit_visualization.html

@@ -1,4 +1,4 @@
-<form role="form" name="visForm" ng-submit="createVis()">
+<form role="form" name="visForm" ng-submit="submit()">
   <div class="form-group">
     <label class="control-label">Name</label>
     <input type="text" class="form-control" ng-model="vis.name" placeholder="{{query.name}}">

rd_ui/app/views/queryfiddle.html

@@ -51,30 +51,44 @@
     </div>
 
     <div class="row" ng-show="queryResult.getStatus() == 'done'">
-        <rd-tabs tabs-collection='tabs' selected-tab='selectedTab'></rd-tabs>
+        <ul class="nav nav-tabs">
+            <rd-tab id="table" name="Table"></rd-tab>
+            <rd-tab id="pivot" name="Pivot Table"></rd-tab>
+            <rd-tab id="{{vis.id}}" name="{{vis.name}}" ng-repeat="vis in query.visualizations"></rd-tab>
+            <rd-tab id="add" name="&plus;New"></rd-tab>
+        </ul>
 
-
-        <div class="col-lg-12" ng-show="selectedTab.key == 'table'">
+        <div class="col-lg-12" ng-show="selectedTab == 'table'">
             <grid-renderer query-result="queryResult" items-per-page="50"></grid-renderer>
         </div>
 
-        <div class="col-lg-12" ng-show="selectedTab.key == 'pivot'">
+        <div class="col-lg-12" ng-show="selectedTab == 'pivot'">
             <pivot-table-renderer query-result="queryResult"></pivot-table-renderer>
         </div>
 
-        <div class="col-lg-12" ng-show="selectedTab.key == 'vis'+vis.id" ng-repeat="vis in query.visualizations">
-            <p>{{vis}}</p>
-        </div>
-
-        <div class="col-lg-12" ng-show="selectedTab.key == 'add'">
+        <div class="col-lg-12" ng-show="selectedTab == vis.id" ng-repeat="vis in query.visualizations">
             <div class="row">
                 <p>
                     <div class="col-lg-6">
-                        <add-visulatization-form query="query"></add-visulatization-form>
+                        <edit-visulatization-form vis="vis" query="query"></edit-visulatization-form>
                     </div>
+                    <div class="col-lg-6" ng-switch="vis.type">
+                        <chart-renderer query-result="queryResult" ng-switch-when="CHART"></chart-renderer>
+                        <cohort-renderer query-result="queryResult" ng-switch-when="COHORT"></cohort-renderer>
+                    </div>
+                </p>
+            </div>
+        </div>
+
+        <div class="col-lg-12" ng-show="selectedTab == 'add'">
+            <div class="row">
+                <p>
                     <div class="col-lg-6">
-                        <chart-renderer query-result="queryResult"></chart-renderer>
-                        <!-- <cohort-renderer query-result="queryResult"></cohort-renderer> -->
+                        <edit-visulatization-form vis="newVisualization" query="query"></edit-visulatization-form>
+                    </div>
+                    <div class="col-lg-6" ng-switch="newVisualization.type">
+                        <chart-renderer query-result="queryResult" ng-switch-when="CHART"></chart-renderer>
+                        <cohort-renderer query-result="queryResult" ng-switch-when="COHORT"></cohort-renderer>
                     </div>
                 </p>
             </div>