From c0f3c0e9d23c98b83cf4190ff4a203be00141b16 Mon Sep 17 00:00:00 2001
From: Lee moon soo <moon@apache.org>
Date: Sun, 27 Nov 2016 11:58:30 -0800
Subject: [PATCH 1/5] abstract transformation setting and apply scatter chart

---
 .../result/result-graph-settings.html         |  23 +++
 .../paragraph/result/result-pivot.html        |   1 -
 .../paragraph/result/result-results.html      |   1 +
 .../paragraph/result/result.controller.js     | 188 +++++++++---------
 .../app/notebook/paragraph/result/result.html |  52 ++++-
 .../src/app/tabledata/columnselector.js       |  84 ++++++++
 .../tabledata/columnselector_settings.html    |  51 +++++
 zeppelin-web/src/app/tabledata/passthrough.js |  33 +++
 .../src/app/tabledata/transformation.js       |  50 +++++
 .../builtins/visualization-areachart.js       |   3 +-
 .../builtins/visualization-barchart.js        |   3 +-
 .../builtins/visualization-linechart.js       |   4 +-
 .../builtins/visualization-piechart.js        |   3 +-
 .../builtins/visualization-scatterchart.js    |  54 ++++-
 .../builtins/visualization-table.js           |  10 +-
 .../src/app/visualization/visualization.js    |   8 +
 zeppelin-web/src/index.html                   |   2 +
 17 files changed, 457 insertions(+), 113 deletions(-)
 create mode 100644 zeppelin-web/src/app/notebook/paragraph/result/result-graph-settings.html
 create mode 100644 zeppelin-web/src/app/tabledata/columnselector.js
 create mode 100644 zeppelin-web/src/app/tabledata/columnselector_settings.html
 create mode 100644 zeppelin-web/src/app/tabledata/passthrough.js

diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result-graph-settings.html b/zeppelin-web/src/app/notebook/paragraph/result/result-graph-settings.html
new file mode 100644
index 00000000000..66a96c0ad83
--- /dev/null
+++ b/zeppelin-web/src/app/notebook/paragraph/result/result-graph-settings.html
@@ -0,0 +1,23 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+  -->
+<div class="option lightBold" style="overflow: visible;"
+   ng-show="type=='TABLE' && graphMode!='table'
+   && config.graph.optionOpen && !asIframe && !viewOnly">
+  <div ng-repeat="viz in builtInTableDataVisualizationList track by $index"
+       id="trsetting{{id}}_{{viz.id}}"
+       ng-show="graphMode == viz.id"></div>
+  <div ng-repeat="viz in builtInTableDataVisualizationList track by $index"
+       id="vizsetting{{id}}_{{viz.id}}"
+       ng-show="graphMode == viz.id"></div>
+</div>
diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result-pivot.html b/zeppelin-web/src/app/notebook/paragraph/result/result-pivot.html
index 623ee60edd0..8d60c402ba1 100644
--- a/zeppelin-web/src/app/notebook/paragraph/result/result-pivot.html
+++ b/zeppelin-web/src/app/notebook/paragraph/result/result-pivot.html
@@ -16,7 +16,6 @@
    && config.graph.optionOpen && !asIframe && !viewOnly">
 
   <div ng-include src="'app/notebook/paragraph/result/result-graphOptions.html'"></div>
-
   All fields:
   <div class="allFields row">
     <ul class="noDot">
diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result-results.html b/zeppelin-web/src/app/notebook/paragraph/result/result-results.html
index 4a6d76bdfe9..f78fdbf1c90 100644
--- a/zeppelin-web/src/app/notebook/paragraph/result/result-results.html
+++ b/zeppelin-web/src/app/notebook/paragraph/result/result-results.html
@@ -17,6 +17,7 @@
   style="padding-bottom: 5px;"
   resize='{"allowresize": "{{!asIframe && !viewOnly}}", "graphType": "{{type}}"}'
      resizable on-resize="resize(width, height);">
+  <div ng-include src="'app/notebook/paragraph/result/result-graph-settings.html'"></div>
   <div ng-include src="'app/notebook/paragraph/result/result-graph.html'"></div>
 
   <div id="{{id}}_comment"
diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js b/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
index 8ffb89bf578..9b2f76ffa9c 100644
--- a/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
@@ -28,6 +28,7 @@
     '$compile',
     '$http',
     '$q',
+    '$templateRequest',
     'websocketMsgSrv',
     'baseUrlSrv',
     'ngToast',
@@ -36,7 +37,7 @@
   ];
 
   function ResultCtrl($scope, $rootScope, $route, $window, $routeParams, $location,
-                      $timeout, $compile, $http, $q, websocketMsgSrv,
+                      $timeout, $compile, $http, $q, $templateRequest, websocketMsgSrv,
                       baseUrlSrv, ngToast, saveAsService, noteVarShareService) {
 
     /**
@@ -208,22 +209,6 @@
         config.graph.optionOpen = false;
       }
 
-      if (!config.graph.keys) {
-        config.graph.keys = [];
-      }
-
-      if (!config.graph.values) {
-        config.graph.values = [];
-      }
-
-      if (!config.graph.groups) {
-        config.graph.groups = [];
-      }
-
-      if (!config.graph.scatter) {
-        config.graph.scatter = {};
-      }
-
       $scope.graphMode = config.graph.mode;
       $scope.config = angular.copy(config);
 
@@ -237,7 +222,7 @@
         $scope.tableDataColumns = tableData.columns;
         $scope.tableDataComment = tableData.comment;
 
-        selectDefaultColsForGraphOption();
+        //selectDefaultColsForGraphOption();
       } else if ($scope.type === 'IMG') {
         $scope.imageData = data;
       }
@@ -367,7 +352,7 @@
     };
 
     $scope.renderGraph = function(type, refresh) {
-      clearUnknownColsFromGraphOption();
+      //clearUnknownColsFromGraphOption();
       // set graph height
       var height = $scope.config.graph.height;
       var graphContainerEl = angular.element('#p' + $scope.id + '_graph');
@@ -392,16 +377,34 @@
           // render when targetEl is available
           var retryRenderer = function() {
             var targetEl = angular.element('#p' + $scope.id + '_' + type);
-
+            var transformationSettingTargetEl = angular.element('#trsetting' + $scope.id + '_' + type);
+            //var visualizationSettingTargetEl = angular.element('#vizsetting' + $scope.id + '_' + type);
             if (targetEl.length) {
               try {
                 // set height
                 targetEl.height(height);
 
                 // instantiate visualization
+                var config = getVizConfig(type);
                 var Visualization = builtInViz.class;
-                builtInViz.instance = new Visualization(targetEl, $scope.config.graph);
-                builtInViz.instance.render(tableData);
+                builtInViz.instance = new Visualization(targetEl, config);
+
+                // inject emitter, $templateRequest
+                var emitter = function(graphSetting) {
+                  commitVizConfigChange(graphSetting, type);
+                };
+                builtInViz.instance._emitter = emitter;
+                builtInViz.instance._compile = $compile;
+                var transformation = builtInViz.instance.getTransformation();
+                transformation._emitter = emitter;
+                transformation._templateRequest = $templateRequest;
+                transformation._compile = $compile;
+                transformation._createNewScope = createNewScope;
+
+                // render
+                var transformed = transformation.transform(tableData);
+                transformation.renderSetting(transformationSettingTargetEl);
+                builtInViz.instance.render(transformed);
                 builtInViz.instance.activate();
                 angular.element(window).resize(function() {
                   builtInViz.instance.resize();
@@ -420,9 +423,13 @@
           var retryRenderer = function() {
             var targetEl = angular.element('#p' + $scope.id + '_' + type);
             if (targetEl.length) {
+              var config = getVizConfig(type);
               targetEl.height(height);
-              builtInViz.instance.setConfig($scope.config.graph);
-              builtInViz.instance.render(tableData);
+              var transformation = builtInViz.instance.getTransformation();
+              transformation.setConfig(config);
+              var transformed = transformation.transform(tableData);
+              builtInViz.instance.setConfig(config);
+              builtInViz.instance.render(transformed);
             } else {
               $timeout(retryRenderer, 10);
             }
@@ -455,6 +462,10 @@
       commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams);
     };
 
+    var createNewScope = function() {
+      return $rootScope.$new();
+    };
+
     var commitParagraphResult = function(title, text, config, params) {
       var newParagraphConfig = angular.copy(paragraph.config);
       newParagraphConfig.results = newParagraphConfig.results || [];
@@ -474,8 +485,62 @@
       commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams);
     };
 
+    var getVizConfig = function(vizId) {
+      var config = {};
+      var graph = $scope.config.graph;
+      if (graph) {
+        // copy setting for vizId
+        if (graph.setting) {
+          config = angular.copy(graph.setting[vizId]);
+        }
+        // copy common setting
+        config.common = angular.copy(graph.commonSetting) || {};
+
+        // copy pivot setting
+        if (graph.keys) {
+          config.common.pivot = {
+            keys: angular.copy(graph.keys),
+            groups: angular.copy(graph.groups),
+            values: angular.copy(graph.values)
+          };
+        }
+      }
+      console.log('getVizConfig', config);
+      return config;
+    };
+
+    var commitVizConfigChange = function(config, vizId) {
+      var newConfig = angular.copy($scope.config);
+      if (!newConfig.graph) {
+        newConfig.graph = {};
+      }
+
+      // copy setting for vizId
+      if (!newConfig.graph.setting) {
+        newConfig.graph.setting = {};
+      }
+      newConfig.graph.setting[vizId] = angular.copy(config);
+
+      // copy common setting
+      if (newConfig.graph.setting[vizId]) {
+        newConfig.graph.commonSetting = newConfig.graph.setting[vizId].common;
+        delete newConfig.graph.setting[vizId].common;
+      }
+
+      // copy pivot setting
+      if (newConfig.graph.commonSetting && newConfig.graph.commonSetting.pivot) {
+        newConfig.graph.keys = newConfig.graph.commonSetting.pivot.keys;
+        newConfig.graph.values = newConfig.graph.commonSetting.pivot.groups;
+        newConfig.graph.values = newConfig.graph.commonSetting.pivot.values;
+        delete newConfig.graph.commonSetting.pivot;
+      }
+      console.log('committVizConfig', newConfig);
+      var newParams = angular.copy(paragraph.settings.params);
+      commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams);
+    };
+
     var commitConfigChange = function(config) {
-      clearUnknownColsFromGraphOption();
+      //clearUnknownColsFromGraphOption();
       var newConfig = angular.copy(config);
       var newParams = angular.copy(paragraph.settings.params);
 
@@ -506,26 +571,7 @@
       commitConfigChange($scope.config);
     };
 
-    $scope.removeScatterOptionXaxis = function(idx) {
-      $scope.config.graph.scatter.xAxis = null;
-      commitConfigChange($scope.config);
-    };
-
-    $scope.removeScatterOptionYaxis = function(idx) {
-      $scope.config.graph.scatter.yAxis = null;
-      commitConfigChange($scope.config);
-    };
-
-    $scope.removeScatterOptionGroup = function(idx) {
-      $scope.config.graph.scatter.group = null;
-      commitConfigChange($scope.config);
-    };
-
-    $scope.removeScatterOptionSize = function(idx) {
-      $scope.config.graph.scatter.size = null;
-      commitConfigChange($scope.config);
-    };
-
+    /*
     var clearUnknownColsFromGraphOption = function() {
       var unique = function(list) {
         for (var i = 0; i < list.length; i++) {
@@ -555,37 +601,19 @@
         }
       };
 
-      var removeUnknownFromFields = function(fields) {
-        for (var f in fields) {
-          if (fields[f]) {
-            var found = false;
-            for (var i = 0; i < tableData.columns.length; i++) {
-              var a = fields[f];
-              var b = tableData.columns[i];
-              if (a.index === b.index && a.name === b.name) {
-                found = true;
-                break;
-              }
-            }
-            if (!found && (fields[f] instanceof Object) && !(fields[f] instanceof Array)) {
-              fields[f] = null;
-            }
-          }
-        }
-      };
 
-      unique($scope.config.graph.keys);
-      removeUnknown($scope.config.graph.keys);
+      //unique($scope.config.graph.keys);
+      //removeUnknown($scope.config.graph.keys);
 
-      removeUnknown($scope.config.graph.values);
+      //removeUnknown($scope.config.graph.values);
 
-      unique($scope.config.graph.groups);
-      removeUnknown($scope.config.graph.groups);
+      //unique($scope.config.graph.groups);
+      //removeUnknown($scope.config.graph.groups);
 
-      removeUnknownFromFields($scope.config.graph.scatter);
-    };
+    };*/
 
     /* select default key and value if there're none selected */
+    /*
     var selectDefaultColsForGraphOption = function() {
       if ($scope.config.graph.keys.length === 0 && tableData.columns.length > 0) {
         $scope.config.graph.keys.push(tableData.columns[0]);
@@ -594,25 +622,7 @@
       if ($scope.config.graph.values.length === 0 && tableData.columns.length > 1) {
         $scope.config.graph.values.push(tableData.columns[1]);
       }
-
-      if (!$scope.config.graph.scatter.xAxis && !$scope.config.graph.scatter.yAxis) {
-        if (tableData.columns.length > 1) {
-          $scope.config.graph.scatter.xAxis = tableData.columns[0];
-          $scope.config.graph.scatter.yAxis = tableData.columns[1];
-        } else if (tableData.columns.length === 1) {
-          $scope.config.graph.scatter.xAxis = tableData.columns[0];
-        }
-      }
-    };
-
-    $scope.isValidSizeOption = function(options) {
-      var builtInViz = builtInVisualizations.scatterChart;
-      if (builtInViz && builtInViz.instance) {
-        return builtInViz.instance.isValidSizeOption(options);
-      } else {
-        return false;
-      }
-    };
+    };*/
 
     $scope.$on('paragraphResized', function(event, paragraphId) {
       // paragraph col width changed
diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result.html b/zeppelin-web/src/app/notebook/paragraph/result/result.html
index d45dc780070..b3d0f23ba60 100644
--- a/zeppelin-web/src/app/notebook/paragraph/result/result.html
+++ b/zeppelin-web/src/app/notebook/paragraph/result/result.html
@@ -14,6 +14,54 @@
 
 <div>
   <div ng-include src="'app/notebook/paragraph/result/result-chart-selector.html'"></div>
-  <div ng-include src="'app/notebook/paragraph/result/result-pivot.html'"></div>
-  <div ng-include src="'app/notebook/paragraph/result/result-results.html'"></div>
+  <div
+    id="p{{id}}_resize"
+    ng-if="!config.helium.activeApp"
+    style="padding-bottom: 5px;"
+    resize='{"allowresize": "{{!asIframe && !viewOnly}}", "graphType": "{{type}}"}'
+       resizable on-resize="resize(width, height);">
+    <div ng-include src="'app/notebook/paragraph/result/result-graph-settings.html'"></div>
+    <div ng-include src="'app/notebook/paragraph/result/result-graph.html'"></div>
+
+    <div id="{{id}}_comment"
+         class="text"
+         ng-if="type == 'TABLE' && tableDataComment"
+         ng-bind-html="tableDataComment">
+    </div>
+
+    <div id="p{{id}}_text"
+         ng-if="type == 'TEXT'">
+      <div class="fa fa-level-down scroll-paragraph-down"
+           ng-show="showScrollDownIcon()"
+           ng-click="scrollParagraphDown()"
+           tooltip="Follow Output"></div>
+      <div id="p{{id}}_text"
+           style="max-height: {{config.graph.height}}px; overflow: auto"
+           class="text"></div>
+      <div class="fa fa-chevron-up scroll-paragraph-up"
+           ng-show="showScrollUpIcon()"
+           ng-click="scrollParagraphUp()"
+           tooltip="Scroll Top"></div>
+    </div>
+
+    <div id="p{{id}}_html"
+         class="resultContained"
+         ng-if="type == 'HTML'">
+    </div>
+
+    <div id="p{{id}}_angular"
+         class="resultContained"
+         ng-if="type == 'ANGULAR'">
+    </div>
+
+    <img id="{{id}}_img"
+         ng-if="type == 'IMG'"
+         ng-src="{{getBase64ImageSrc(result.data)}}" />
+  </div>
+
+  <div ng-repeat="app in apps">
+    <div id="p{{app.id}}"
+         ng-show="config.helium.activeApp == app.id">
+    </div>
+  </div>
 </div>
diff --git a/zeppelin-web/src/app/tabledata/columnselector.js b/zeppelin-web/src/app/tabledata/columnselector.js
new file mode 100644
index 00000000000..1a0d77fbd41
--- /dev/null
+++ b/zeppelin-web/src/app/tabledata/columnselector.js
@@ -0,0 +1,84 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict';
+
+var zeppelin = zeppelin || {};
+
+/**
+ * select columns
+ * - columnSelectorProp
+ *   [
+ *     {
+ *       "name":
+ *       "tooltip":
+ *     },
+ *     ...
+ *   ]
+ */
+zeppelin.ColumnselectorTransformation = function(config, columnSelectorProp) {
+  zeppelin.Transformation.call(this, config);
+  this.props = columnSelectorProp;
+};
+
+zeppelin.ColumnselectorTransformation.prototype = Object.create(zeppelin.Transformation.prototype);
+
+zeppelin.ColumnselectorTransformation.prototype.getSetting = function() {
+  var self = this;
+  var configObj = self.config;
+  return {
+    template: 'app/tabledata/columnselector_settings.html',
+    scope: {
+      config: self.config,
+      props: self.props,
+      tableDataColumns: self.tableDataColumns,
+      save: function() {
+        self.emitConfig(configObj);
+      },
+      remove: function(selectorName) {
+        configObj[selectorName] = null;
+        self.emitConfig(configObj);
+      }
+    }
+  };
+};
+
+/**
+ * Method will be invoked when tableData or config changes
+ */
+zeppelin.ColumnselectorTransformation.prototype.transform = function(tableData) {
+  this.tableDataColumns = tableData.columns;
+  this.removeUnknown();
+  return tableData;
+};
+
+zeppelin.ColumnselectorTransformation.prototype.removeUnknown = function() {
+  var fields = this.config;
+  for (var f in fields) {
+    if (fields[f]) {
+      var found = false;
+      for (var i = 0; i < this.tableDataColumns.length; i++) {
+        var a = fields[f];
+        var b = this.tableDataColumns[i];
+        if (a.index === b.index && a.name === b.name) {
+          found = true;
+          break;
+        }
+      }
+      if (!found && (fields[f] instanceof Object) && !(fields[f] instanceof Array)) {
+        fields[f] = null;
+      }
+    }
+  }
+};
diff --git a/zeppelin-web/src/app/tabledata/columnselector_settings.html b/zeppelin-web/src/app/tabledata/columnselector_settings.html
new file mode 100644
index 00000000000..6cb0f9ed04a
--- /dev/null
+++ b/zeppelin-web/src/app/tabledata/columnselector_settings.html
@@ -0,0 +1,51 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+  -->
+All fields:
+<div class="allFields row">
+  <ul class="noDot">
+    <li class="liVertical" ng-repeat="col in tableDataColumns">
+      <div class="btn btn-default btn-xs"
+           data-drag="true"
+           data-jqyoui-options="{revert: 'invalid', helper: 'clone'}"
+           ng-model="tableDataColumns"
+           jqyoui-draggable="{index: {{$index}}, placeholder: 'keep'}">
+        {{col.name | limitTo: 30}}{{col.name.length > 30 ? '...' : ''}}
+      </div>
+    </li>
+  </ul>
+</div>
+
+<div class="row">
+  <div class="col-md-3"
+       ng-repeat="prop in props">
+    <span class="columns lightBold">
+      {{prop.name}}
+      <a tabindex="0" class="fa fa-info-circle" role="button" popover-placement="top"
+         ng-if="prop.tooltip"
+         popover-trigger="focus"
+         popover-html-unsafe="{{prop.tooltip}}"></a>
+      <ul data-drop="true"
+          ng-model="config[prop.name]"
+          jqyoui-droppable="{onDrop:'save()'}"
+          class="list-unstyled"
+          style="height:36px">
+        <li ng-if="config[prop.name]">
+          <div class="btn btn-primary btn-xs">
+            {{config[prop.name].name}} <span class="fa fa-close" ng-click="remove(prop.name)"></span>
+          </div>
+        </li>
+      </ul>
+    </span>
+  </div>
+</div>
diff --git a/zeppelin-web/src/app/tabledata/passthrough.js b/zeppelin-web/src/app/tabledata/passthrough.js
new file mode 100644
index 00000000000..c5773939feb
--- /dev/null
+++ b/zeppelin-web/src/app/tabledata/passthrough.js
@@ -0,0 +1,33 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict';
+
+var zeppelin = zeppelin || {};
+
+/**
+ * passthough the data
+ */
+zeppelin.PassthroughTransformation = function(config) {
+  zeppelin.Transformation.call(this, config);
+};
+
+zeppelin.PassthroughTransformation.prototype = Object.create(zeppelin.Transformation.prototype);
+
+/**
+ * Method will be invoked when tableData or config changes
+ */
+zeppelin.PassthroughTransformation.prototype.transform = function(tableData) {
+  return tableData;
+};
diff --git a/zeppelin-web/src/app/tabledata/transformation.js b/zeppelin-web/src/app/tabledata/transformation.js
index f8d3cc71051..0d248def78f 100644
--- a/zeppelin-web/src/app/tabledata/transformation.js
+++ b/zeppelin-web/src/app/tabledata/transformation.js
@@ -21,6 +21,17 @@ var zeppelin = zeppelin || {};
  */
 zeppelin.Transformation = function(config) {
   this.config = config;
+  this._emitter;
+};
+
+/**
+ * return {
+ *   template : angular template string or url (url should end with .html),
+ *   scope : an object to bind to template scope
+ * }
+ */
+zeppelin.Transformation.prototype.getSetting = function() {
+  // override this
 };
 
 /**
@@ -30,6 +41,45 @@ zeppelin.Transformation.prototype.transform = function(tableData) {
   // override this
 };
 
+/**
+ * render setting
+ */
+zeppelin.Transformation.prototype.renderSetting = function(targetEl) {
+  var setting = this.getSetting();
+  if (!setting) {
+    return;
+  }
+
+  this.settingScope = this._createNewScope();
+  for (var k in setting.scope) {
+    this.settingScope[k] = setting.scope[k];
+  }
+  var template = setting.template;
+  var scope = this.settingScope;
+
+  if (template.split('\n').length === 1 &&
+      template.endsWith('.html')) { // template is url
+    var self = this;
+    this._templateRequest(template).then(function(t) {
+      self._render(targetEl, t, scope);
+    });
+  } else {
+    this._render(targetEl, template, scope);
+  }
+};
+
+zeppelin.Transformation.prototype._render = function(targetEl, template, scope) {
+  targetEl.html(template);
+  this._compile(targetEl.contents())(scope);
+};
+
 zeppelin.Transformation.prototype.setConfig = function(config) {
   this.config = config;
 };
+
+/**
+ * Emit config. config will sent to server and saved.
+ */
+zeppelin.Transformation.prototype.emitConfig = function(config) {
+  this._emitter(config);
+};
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-areachart.js b/zeppelin-web/src/app/visualization/builtins/visualization-areachart.js
index b91bc168e77..3a73b5356c9 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-areachart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-areachart.js
@@ -35,8 +35,7 @@ zeppelin.AreachartVisualization.prototype.getTransformation = function() {
   return this.pivot;
 };
 
-zeppelin.AreachartVisualization.prototype.render = function(tableData) {
-  var pivot = this.pivot.transform(tableData);
+zeppelin.AreachartVisualization.prototype.render = function(pivot) {
   var d3Data = this.d3DataFromPivot(
     pivot.schema,
     pivot.rows,
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-barchart.js b/zeppelin-web/src/app/visualization/builtins/visualization-barchart.js
index 6480ee05e76..3475cdd34c6 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-barchart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-barchart.js
@@ -34,8 +34,7 @@ zeppelin.BarchartVisualization.prototype.getTransformation = function() {
   return this.pivot;
 };
 
-zeppelin.BarchartVisualization.prototype.render = function(tableData) {
-  var pivot = this.pivot.transform(tableData);
+zeppelin.BarchartVisualization.prototype.render = function(pivot) {
   var d3Data = this.d3DataFromPivot(
     pivot.schema,
     pivot.rows,
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-linechart.js b/zeppelin-web/src/app/visualization/builtins/visualization-linechart.js
index 6b2c6d4ad4a..58cfb52cbbf 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-linechart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-linechart.js
@@ -39,9 +39,7 @@ zeppelin.LinechartVisualization.prototype.getTransformation = function() {
   return this.pivot;
 };
 
-zeppelin.LinechartVisualization.prototype.render = function(tableData) {
-  this.tableData = tableData;
-  var pivot = this.pivot.transform(tableData);
+zeppelin.LinechartVisualization.prototype.render = function(pivot) {
   var d3Data = this.d3DataFromPivot(
     pivot.schema,
     pivot.rows,
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-piechart.js b/zeppelin-web/src/app/visualization/builtins/visualization-piechart.js
index e600ae558af..d685cfda7e7 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-piechart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-piechart.js
@@ -34,8 +34,7 @@ zeppelin.PiechartVisualization.prototype.getTransformation = function() {
   return this.pivot;
 };
 
-zeppelin.PiechartVisualization.prototype.render = function(tableData) {
-  var pivot = this.pivot.transform(tableData);
+zeppelin.PiechartVisualization.prototype.render = function(pivot) {
   var d3Data = this.d3DataFromPivot(
     pivot.schema,
     pivot.rows,
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-scatterchart.js b/zeppelin-web/src/app/visualization/builtins/visualization-scatterchart.js
index de699091432..3dcf78cb207 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-scatterchart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-scatterchart.js
@@ -19,6 +19,28 @@
  */
 zeppelin.ScatterchartVisualization = function(targetEl, config) {
   zeppelin.Nvd3ChartVisualization.call(this, targetEl, config);
+  var ColumnselectorTransformation = zeppelin.ColumnselectorTransformation;
+  this.columnselectorProps = [
+    {
+      name: 'xAxis'
+    },
+    {
+      name: 'yAxis'
+    },
+    {
+      name: 'group'
+    },
+    {
+      name: 'size',
+      tooltip: `<li>Size option is valid only when you drop numeric field here.</li>
+                <li>When data in each axis are discrete,
+                'number of values in corresponding coordinate' will be used as size.</li>
+                <li>Zeppelin consider values as discrete when the values contain string value
+                or the number of distinct values are bigger than 5% of total number of values.</li>
+                <li>Size field button turns to grey when the option you chose is not valid.</li>`
+    }
+  ];
+  this.columnselector = new ColumnselectorTransformation(config, this.columnselectorProps);
 };
 
 zeppelin.ScatterchartVisualization.prototype = Object.create(zeppelin.Nvd3ChartVisualization.prototype);
@@ -28,11 +50,12 @@ zeppelin.ScatterchartVisualization.prototype.type = function() {
 };
 
 zeppelin.ScatterchartVisualization.prototype.getTransformation = function() {
-  return this.pivot;
+  return this.columnselector;
 };
 
 zeppelin.ScatterchartVisualization.prototype.render = function(tableData) {
   this.tableData = tableData;
+  this.selectDefault();
   var d3Data = this.setScatterChart(tableData, true);
   this.xLabels = d3Data.xLabels;
   this.yLabels = d3Data.yLabels;
@@ -49,8 +72,8 @@ zeppelin.ScatterchartVisualization.prototype.configureChart = function(chart) {
   // configure how the tooltip looks.
   chart.tooltipContent(function(key, x, y, graph, data) {
     var tooltipContent = '<h3>' + key + '</h3>';
-    if (self.config.scatter.size &&
-      self.isValidSizeOption(self.config.scatter, self.tableData.rows)) {
+    if (self.config.size &&
+      self.isValidSizeOption(self.config, self.tableData.rows)) {
       tooltipContent += '<p>' + data.point.size + '</p>';
     }
 
@@ -61,11 +84,22 @@ zeppelin.ScatterchartVisualization.prototype.configureChart = function(chart) {
   //handle the problem of tooltip not showing when muliple points have same value.
 };
 
+zeppelin.ScatterchartVisualization.prototype.selectDefault = function() {
+  if (!this.config.xAxis && !this.config.yAxis) {
+    if (this.tableData.columns.length > 1) {
+      this.config.xAxis = this.tableData.columns[0];
+      this.config.yAxis = this.tableData.columns[1];
+    } else if (this.tableData.columns.length === 1) {
+      this.config.xAxis = this.tableData.columns[0];
+    }
+  }
+};
+
 zeppelin.ScatterchartVisualization.prototype.setScatterChart = function(data, refresh) {
-  var xAxis = this.config.scatter.xAxis;
-  var yAxis = this.config.scatter.yAxis;
-  var group = this.config.scatter.group;
-  var size = this.config.scatter.size;
+  var xAxis = this.config.xAxis;
+  var yAxis = this.config.yAxis;
+  var group = this.config.group;
+  var size = this.config.size;
 
   var xValues = [];
   var yValues = [];
@@ -178,9 +212,9 @@ zeppelin.ScatterchartVisualization.prototype.setScatterChart = function(data, re
   };
 };
 zeppelin.ScatterchartVisualization.prototype.setDiscreteScatterData = function(data) {
-  var xAxis = this.config.scatter.xAxis;
-  var yAxis = this.config.scatter.yAxis;
-  var group = this.config.scatter.group;
+  var xAxis = this.config.xAxis;
+  var yAxis = this.config.yAxis;
+  var group = this.config.group;
 
   var xValue;
   var yValue;
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-table.js b/zeppelin-web/src/app/visualization/builtins/visualization-table.js
index 7406cd88249..69a7938b63a 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-table.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-table.js
@@ -17,10 +17,12 @@
 /**
  * Visualize data in table format
  */
-zeppelin.TableVisualization = function(targetEl) {
-  zeppelin.Visualization.call(this, targetEl);
+zeppelin.TableVisualization = function(targetEl, config) {
+  zeppelin.Visualization.call(this, targetEl, config);
   console.log('Init table viz');
   targetEl.addClass('table');
+  var PassthroughTransformation = zeppelin.PassthroughTransformation;
+  this.passthrough = new PassthroughTransformation(config);
 };
 
 zeppelin.TableVisualization.prototype = Object.create(zeppelin.Visualization.prototype);
@@ -57,3 +59,7 @@ zeppelin.TableVisualization.prototype.destroy = function() {
     this.hot.destroy();
   }
 };
+
+zeppelin.TableVisualization.prototype.getTransformation = function() {
+  return this.passthrough;
+};
diff --git a/zeppelin-web/src/app/visualization/visualization.js b/zeppelin-web/src/app/visualization/visualization.js
index 33364e8906e..126e50e6749 100644
--- a/zeppelin-web/src/app/visualization/visualization.js
+++ b/zeppelin-web/src/app/visualization/visualization.js
@@ -24,6 +24,7 @@ zeppelin.Visualization = function(targetEl, config) {
   this.config = config;
   this._resized = false;
   this._active = false;
+  this._emitter;
 };
 
 /**
@@ -90,6 +91,13 @@ zeppelin.Visualization.prototype.setConfig = function(config) {
   this.config = config;
 };
 
+/**
+ * Emit config. config will sent to server and saved.
+ */
+zeppelin.Visualization.prototype.emitConfig = function(config) {
+  this._emitter(config);
+};
+
 /**
  * method will be invoked when visualization need to be destroyed.
  * Don't need to destroy this.targetEl.
diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html
index d6feabc6f8e..738a6ba0c26 100644
--- a/zeppelin-web/src/index.html
+++ b/zeppelin-web/src/index.html
@@ -175,6 +175,8 @@
     <script src="app/tabledata/transformation.js"></script>
     <script src="app/tabledata/pivot.js"></script>
     <script src="app/handsontable/handsonHelper.js"></script>
+    <script src="app/tabledata/passthrough.js"></script>
+    <script src="app/tabledata/columnselector.js"></script>
     <script src="app/visualization/visualization.js"></script>
     <script src="app/visualization/builtins/visualization-table.js"></script>
     <script src="app/visualization/builtins/visualization-nvd3chart.js"></script>

From 0dfbaa0349c1a7b773fbfbe55886368b52463685 Mon Sep 17 00:00:00 2001
From: Lee moon soo <moon@apache.org>
Date: Mon, 28 Nov 2016 12:29:45 -0800
Subject: [PATCH 2/5] Abstract pivot setting

---
 .../paragraph/result/result.controller.js     | 102 ++---------------
 .../tabledata/columnselector_settings.html    |   2 +-
 zeppelin-web/src/app/tabledata/pivot.js       | 106 +++++++++++++++++-
 .../src/app/tabledata/pivot_settings.html     |  88 +++++++++++++++
 .../src/app/tabledata/transformation.js       |   1 +
 .../src/app/visualization/visualization.js    |  13 ++-
 6 files changed, 213 insertions(+), 99 deletions(-)
 create mode 100644 zeppelin-web/src/app/tabledata/pivot_settings.html

diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js b/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
index 9b2f76ffa9c..af12029b41a 100644
--- a/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
@@ -221,8 +221,6 @@
         tableData.loadParagraphResult({type: $scope.type, msg: data});
         $scope.tableDataColumns = tableData.columns;
         $scope.tableDataComment = tableData.comment;
-
-        //selectDefaultColsForGraphOption();
       } else if ($scope.type === 'IMG') {
         $scope.imageData = data;
       }
@@ -352,7 +350,6 @@
     };
 
     $scope.renderGraph = function(type, refresh) {
-      //clearUnknownColsFromGraphOption();
       // set graph height
       var height = $scope.config.graph.height;
       var graphContainerEl = angular.element('#p' + $scope.id + '_graph');
@@ -367,6 +364,7 @@
         // deactive previsouly active visualization
         for (var t in builtInVisualizations) {
           var v = builtInVisualizations[t].instance;
+
           if (t !== type && v && v.isActive()) {
             v.deactivate();
             break;
@@ -422,12 +420,14 @@
           // when graph options or data are changed
           var retryRenderer = function() {
             var targetEl = angular.element('#p' + $scope.id + '_' + type);
+            var transformationSettingTargetEl = angular.element('#trsetting' + $scope.id + '_' + type);
             if (targetEl.length) {
               var config = getVizConfig(type);
               targetEl.height(height);
               var transformation = builtInViz.instance.getTransformation();
               transformation.setConfig(config);
               var transformed = transformation.transform(tableData);
+              transformation.renderSetting(transformationSettingTargetEl);
               builtInViz.instance.setConfig(config);
               builtInViz.instance.render(transformed);
             } else {
@@ -463,7 +463,7 @@
     };
 
     var createNewScope = function() {
-      return $rootScope.$new();
+      return $rootScope.$new(true);
     };
 
     var commitParagraphResult = function(title, text, config, params) {
@@ -486,13 +486,18 @@
     };
 
     var getVizConfig = function(vizId) {
-      var config = {};
+      var config;
       var graph = $scope.config.graph;
       if (graph) {
         // copy setting for vizId
         if (graph.setting) {
           config = angular.copy(graph.setting[vizId]);
         }
+
+        if (!config) {
+          config = {};
+        }
+
         // copy common setting
         config.common = angular.copy(graph.commonSetting) || {};
 
@@ -530,7 +535,7 @@
       // copy pivot setting
       if (newConfig.graph.commonSetting && newConfig.graph.commonSetting.pivot) {
         newConfig.graph.keys = newConfig.graph.commonSetting.pivot.keys;
-        newConfig.graph.values = newConfig.graph.commonSetting.pivot.groups;
+        newConfig.graph.groups = newConfig.graph.commonSetting.pivot.groups;
         newConfig.graph.values = newConfig.graph.commonSetting.pivot.values;
         delete newConfig.graph.commonSetting.pivot;
       }
@@ -539,91 +544,6 @@
       commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams);
     };
 
-    var commitConfigChange = function(config) {
-      //clearUnknownColsFromGraphOption();
-      var newConfig = angular.copy(config);
-      var newParams = angular.copy(paragraph.settings.params);
-
-      commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams);
-    };
-
-    $scope.onGraphOptionChange = function() {
-      commitConfigChange($scope.config);
-    };
-
-    $scope.removeGraphOptionKeys = function(idx) {
-      $scope.config.graph.keys.splice(idx, 1);
-      commitConfigChange($scope.config);
-    };
-
-    $scope.removeGraphOptionValues = function(idx) {
-      $scope.config.graph.values.splice(idx, 1);
-      commitConfigChange($scope.config);
-    };
-
-    $scope.removeGraphOptionGroups = function(idx) {
-      $scope.config.graph.groups.splice(idx, 1);
-      commitConfigChange($scope.config);
-    };
-
-    $scope.setGraphOptionValueAggr = function(idx, aggr) {
-      $scope.config.graph.values[idx].aggr = aggr;
-      commitConfigChange($scope.config);
-    };
-
-    /*
-    var clearUnknownColsFromGraphOption = function() {
-      var unique = function(list) {
-        for (var i = 0; i < list.length; i++) {
-          for (var j = i + 1; j < list.length; j++) {
-            if (angular.equals(list[i], list[j])) {
-              list.splice(j, 1);
-            }
-          }
-        }
-      };
-
-      var removeUnknown = function(list) {
-        for (var i = 0; i < list.length; i++) {
-          // remove non existing column
-          var found = false;
-          for (var j = 0; j < tableData.columns.length; j++) {
-            var a = list[i];
-            var b = tableData.columns[j];
-            if (a.index === b.index && a.name === b.name) {
-              found = true;
-              break;
-            }
-          }
-          if (!found) {
-            list.splice(i, 1);
-          }
-        }
-      };
-
-
-      //unique($scope.config.graph.keys);
-      //removeUnknown($scope.config.graph.keys);
-
-      //removeUnknown($scope.config.graph.values);
-
-      //unique($scope.config.graph.groups);
-      //removeUnknown($scope.config.graph.groups);
-
-    };*/
-
-    /* select default key and value if there're none selected */
-    /*
-    var selectDefaultColsForGraphOption = function() {
-      if ($scope.config.graph.keys.length === 0 && tableData.columns.length > 0) {
-        $scope.config.graph.keys.push(tableData.columns[0]);
-      }
-
-      if ($scope.config.graph.values.length === 0 && tableData.columns.length > 1) {
-        $scope.config.graph.values.push(tableData.columns[1]);
-      }
-    };*/
-
     $scope.$on('paragraphResized', function(event, paragraphId) {
       // paragraph col width changed
       if (paragraphId === paragraph.id) {
diff --git a/zeppelin-web/src/app/tabledata/columnselector_settings.html b/zeppelin-web/src/app/tabledata/columnselector_settings.html
index 6cb0f9ed04a..538cc3a8c89 100644
--- a/zeppelin-web/src/app/tabledata/columnselector_settings.html
+++ b/zeppelin-web/src/app/tabledata/columnselector_settings.html
@@ -10,7 +10,7 @@
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-  -->
+-->
 All fields:
 <div class="allFields row">
   <ul class="noDot">
diff --git a/zeppelin-web/src/app/tabledata/pivot.js b/zeppelin-web/src/app/tabledata/pivot.js
index af46fcb424d..e1dd29148a6 100644
--- a/zeppelin-web/src/app/tabledata/pivot.js
+++ b/zeppelin-web/src/app/tabledata/pivot.js
@@ -25,15 +25,115 @@ zeppelin.PivotTransformation = function(config) {
 
 zeppelin.PivotTransformation.prototype = Object.create(zeppelin.Transformation.prototype);
 
+zeppelin.PivotTransformation.prototype.getSetting = function() {
+  var self = this;
+
+  var configObj = self.config;
+  console.log('getSetting', configObj);
+  return {
+    template: 'app/tabledata/pivot_settings.html',
+    scope: {
+      config: configObj.common.pivot,
+      tableDataColumns: self.tableDataColumns,
+      save: function() {
+        self.emitConfig(configObj);
+      },
+      removeKey: function(idx) {
+        configObj.common.pivot.keys.splice(idx, 1);
+        self.emitConfig(configObj);
+      },
+      removeGroup: function(idx) {
+        configObj.common.pivot.groups.splice(idx, 1);
+        self.emitConfig(configObj);
+      },
+      removeValue: function(idx) {
+        configObj.common.pivot.values.splice(idx, 1);
+        self.emitConfig(configObj);
+      },
+      setValueAggr: function(idx, aggr) {
+        configObj.common.pivot.values[idx].aggr = aggr;
+        self.emitConfig(configObj);
+      }
+    }
+  };
+};
+
 /**
  * Method will be invoked when tableData or config changes
  */
 zeppelin.PivotTransformation.prototype.transform = function(tableData) {
+  this.tableDataColumns = tableData.columns;
+  this.config.common = this.config.common || {};
+  this.config.common.pivot = this.config.common.pivot || {};
+  var config = this.config.common.pivot;
+  var firstTime = (!config.keys && !config.groups && !config.values);
+
+  config.keys = config.keys || [];
+  config.groups = config.groups || [];
+  config.values = config.values || [];
+
+  this.removeUnknown();
+  if (firstTime) {
+    this.selectDefault();
+  }
   return this.pivot(
     tableData,
-    this.config.keys,
-    this.config.groups,
-    this.config.values);
+    config.keys,
+    config.groups,
+    config.values);
+};
+
+zeppelin.PivotTransformation.prototype.removeUnknown = function() {
+  var config = this.config.common.pivot;
+  var tableDataColumns = this.tableDataColumns;
+  var unique = function(list) {
+    for (var i = 0; i < list.length; i++) {
+      for (var j = i + 1; j < list.length; j++) {
+        if (angular.equals(list[i], list[j])) {
+          list.splice(j, 1);
+        }
+      }
+    }
+  };
+
+  var removeUnknown = function(list) {
+    for (var i = 0; i < list.length; i++) {
+      // remove non existing column
+      var found = false;
+      for (var j = 0; j < tableDataColumns.length; j++) {
+        var a = list[i];
+        var b = tableDataColumns[j];
+        if (a.index === b.index && a.name === b.name) {
+          found = true;
+          break;
+        }
+      }
+      if (!found) {
+        list.splice(i, 1);
+      }
+    }
+  };
+
+  unique(config.keys);
+  removeUnknown(config.keys);
+  unique(config.groups);
+  removeUnknown(config.groups);
+  removeUnknown(config.values);
+};
+
+zeppelin.PivotTransformation.prototype.selectDefault = function() {
+  var config = this.config.common.pivot;
+  if (config.keys.length === 0 &&
+      config.groups.length === 0 &&
+      config.values.length === 0) {
+    if (config.keys.length === 0 && this.tableDataColumns.length > 0) {
+      config.keys.push(this.tableDataColumns[0]);
+    }
+
+    if (config.values.length === 0 && this.tableDataColumns.length > 1) {
+      config.values.push(this.tableDataColumns[1]);
+    }
+  }
 };
 
 zeppelin.PivotTransformation.prototype.pivot = function(data, keys, groups, values) {
diff --git a/zeppelin-web/src/app/tabledata/pivot_settings.html b/zeppelin-web/src/app/tabledata/pivot_settings.html
new file mode 100644
index 00000000000..5ca22248643
--- /dev/null
+++ b/zeppelin-web/src/app/tabledata/pivot_settings.html
@@ -0,0 +1,88 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+All fields:
+<div class="allFields row">
+  <ul class="noDot">
+    <li class="liVertical" ng-repeat="col in tableDataColumns">
+      <div class="btn btn-default btn-xs"
+           data-drag="true"
+           data-jqyoui-options="{revert: 'invalid', helper: 'clone'}"
+           ng-model="tableDataColumns"
+           jqyoui-draggable="{index: {{$index}}, placeholder: 'keep'}">
+         {{col.name | limitTo: 30}}{{col.name.length > 30 ? '...' : ''}}
+      </div>
+    </li>
+  </ul>
+</div>
+
+<div class="row" ng-if="graphMode!='scatterChart'">
+  <div class="col-md-4">
+    <span class="columns lightBold">
+      Keys
+      <ul data-drop="true"
+          ng-model="config.keys"
+          jqyoui-droppable="{multiple:true, onDrop:'save()'}"
+          class="list-unstyled">
+        <li ng-repeat="item in config.keys">
+          <div class="btn btn-primary btn-xs">
+            {{item.name}} <span class="fa fa-close" ng-click="removeKey($index)"></span>
+          </div>
+        </li>
+      </ul>
+    </span>
+  </div>
+  <div class="col-md-4">
+    <span class="columns lightBold">
+      Groups
+      <ul data-drop="true"
+          ng-model="config.groups"
+          jqyoui-droppable="{multiple:true, onDrop:'save()'}"
+          class="list-unstyled">
+        <li ng-repeat="item in config.groups">
+          <div class="btn btn-success btn-xs">
+            {{item.name}} <span class="fa fa-close" ng-click="removeGroup($index)"></span>
+          </div>
+        </li>
+      </ul>
+    </span>
+  </div>
+  <div class="col-md-4">
+    <span class="columns lightBold">
+      Values
+      <ul data-drop="true"
+          ng-model="config.values"
+          jqyoui-droppable="{multiple:true, onDrop:'save()'}"
+          class="list-unstyled">
+        <li ng-repeat="item in config.values">
+          <div class="btn-group">
+            <div class="btn btn-info btn-xs dropdown-toggle"
+                 type="button"
+                 data-toggle="dropdown">
+              {{item.name | limitTo: 30}}{{item.name.length > 30 ? '...' : ''}}
+              <font style="color:#EEEEEE;"><span class="lightBold" style="text-transform: uppercase;">{{item.aggr}}</span></font>
+              <span class="fa fa-close" ng-click="removeValue($index)"></span>
+            </div>
+            <ul class="dropdown-menu" role="menu">
+              <li ng-click="setValueAggr($index, 'sum')"><a>sum</a></li>
+              <li ng-click="setValueAggr($index, 'count')"><a>count</a></li>
+              <li ng-click="setValueAggr($index, 'avg')"><a>avg</a></li>
+              <li ng-click="setValueAggr($index, 'min')"><a>min</a></li>
+              <li ng-click="setValueAggr($index, 'max')"><a>max</a></li>
+            </ul>
+          </div>
+        </li>
+      </ul>
+    </span>
+  </div>
+</div>
diff --git a/zeppelin-web/src/app/tabledata/transformation.js b/zeppelin-web/src/app/tabledata/transformation.js
index 0d248def78f..a555356eec2 100644
--- a/zeppelin-web/src/app/tabledata/transformation.js
+++ b/zeppelin-web/src/app/tabledata/transformation.js
@@ -69,6 +69,7 @@ zeppelin.Transformation.prototype.renderSetting = function(targetEl) {
 };
 
 zeppelin.Transformation.prototype._render = function(targetEl, template, scope) {
+  this._targetEl = targetEl;
   targetEl.html(template);
   this._compile(targetEl.contents())(scope);
 };
diff --git a/zeppelin-web/src/app/visualization/visualization.js b/zeppelin-web/src/app/visualization/visualization.js
index 126e50e6749..279cf14bab4 100644
--- a/zeppelin-web/src/app/visualization/visualization.js
+++ b/zeppelin-web/src/app/visualization/visualization.js
@@ -22,7 +22,7 @@ var zeppelin = zeppelin || {};
 zeppelin.Visualization = function(targetEl, config) {
   this.targetEl = targetEl;
   this.config = config;
-  this._resized = false;
+  this._dirty = false;
   this._active = false;
   this._emitter;
 };
@@ -52,9 +52,9 @@ zeppelin.Visualization.prototype.refresh = function() {
  * Activate. invoked when visualization is selected
  */
 zeppelin.Visualization.prototype.activate = function() {
-  if (!this._active || this._resized) {
+  if (!this._active || this._dirty) {
     this.refresh();
-    this._resized = false;
+    this._dirty = false;
   }
   this._active = true;
 };
@@ -80,7 +80,7 @@ zeppelin.Visualization.prototype.resize = function() {
   if (this.isActive()) {
     this.refresh();
   } else {
-    this._resized = true;
+    this._dirty = true;
   }
 };
 
@@ -89,6 +89,11 @@ zeppelin.Visualization.prototype.resize = function() {
  */
 zeppelin.Visualization.prototype.setConfig = function(config) {
   this.config = config;
+  if (this.isActive()) {
+    this.refresh();
+  } else {
+    this._dirty = true;
+  }
 };
 
 /**

From b127949b4d8a212563b6b957337122d5ae8e8136 Mon Sep 17 00:00:00 2001
From: Lee moon soo <moon@apache.org>
Date: Mon, 28 Nov 2016 12:38:09 -0800
Subject: [PATCH 3/5] merge unnecessarily scattered html templates

---
 .../result/result-graph-settings.html         |  23 ---
 .../paragraph/result/result-graph.html        |  23 ---
 .../paragraph/result/result-pivot.html        | 167 ------------------
 .../paragraph/result/result-results.html      |  63 -------
 .../app/notebook/paragraph/result/result.html |  26 ++-
 5 files changed, 24 insertions(+), 278 deletions(-)
 delete mode 100644 zeppelin-web/src/app/notebook/paragraph/result/result-graph-settings.html
 delete mode 100644 zeppelin-web/src/app/notebook/paragraph/result/result-graph.html
 delete mode 100644 zeppelin-web/src/app/notebook/paragraph/result/result-pivot.html
 delete mode 100644 zeppelin-web/src/app/notebook/paragraph/result/result-results.html

diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result-graph-settings.html b/zeppelin-web/src/app/notebook/paragraph/result/result-graph-settings.html
deleted file mode 100644
index 66a96c0ad83..00000000000
--- a/zeppelin-web/src/app/notebook/paragraph/result/result-graph-settings.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!--
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-  -->
-<div class="option lightBold" style="overflow: visible;"
-   ng-show="type=='TABLE' && graphMode!='table'
-   && config.graph.optionOpen && !asIframe && !viewOnly">
-  <div ng-repeat="viz in builtInTableDataVisualizationList track by $index"
-       id="trsetting{{id}}_{{viz.id}}"
-       ng-show="graphMode == viz.id"></div>
-  <div ng-repeat="viz in builtInTableDataVisualizationList track by $index"
-       id="vizsetting{{id}}_{{viz.id}}"
-       ng-show="graphMode == viz.id"></div>
-</div>
diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result-graph.html b/zeppelin-web/src/app/notebook/paragraph/result/result-graph.html
deleted file mode 100644
index 568535f4f44..00000000000
--- a/zeppelin-web/src/app/notebook/paragraph/result/result-graph.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!--
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-<div id="p{{id}}_graph"
-     class="graphContainer"
-     ng-class="{'noOverflow': graphMode=='table'}"
-     ng-show="type =='TABLE'"
-     >
-  <div ng-repeat="viz in builtInTableDataVisualizationList track by $index"
-       id="p{{id}}_{{viz.id}}"
-       ng-show="graphMode == viz.id">
-  </div>
-</div>
diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result-pivot.html b/zeppelin-web/src/app/notebook/paragraph/result/result-pivot.html
deleted file mode 100644
index 8d60c402ba1..00000000000
--- a/zeppelin-web/src/app/notebook/paragraph/result/result-pivot.html
+++ /dev/null
@@ -1,167 +0,0 @@
-<!--
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-<div class="option lightBold" style="overflow: visible;"
-   ng-if="type=='TABLE' && graphMode!='table'
-   && config.graph.optionOpen && !asIframe && !viewOnly">
-
-  <div ng-include src="'app/notebook/paragraph/result/result-graphOptions.html'"></div>
-  All fields:
-  <div class="allFields row">
-    <ul class="noDot">
-      <li class="liVertical" ng-repeat="col in tableDataColumns">
-        <div class="btn btn-default btn-xs"
-             data-drag="true"
-             data-jqyoui-options="{revert: 'invalid', helper: 'clone'}"
-             ng-model="tableDataColumns"
-             jqyoui-draggable="{index: {{$index}}, placeholder: 'keep'}">
-           {{col.name | limitTo: 30}}{{col.name.length > 30 ? '...' : ''}}
-        </div>
-      </li>
-    </ul>
-  </div>
-
-  <div class="row" ng-if="graphMode!='scatterChart'">
-    <div class="col-md-4">
-      <span class="columns lightBold">
-        Keys
-        <ul data-drop="true"
-            ng-model="config.graph.keys"
-            jqyoui-droppable="{multiple:true, onDrop:'onGraphOptionChange()'}"
-            class="list-unstyled">
-          <li ng-repeat="item in config.graph.keys">
-            <div class="btn btn-primary btn-xs">
-              {{item.name}} <span class="fa fa-close" ng-click="removeGraphOptionKeys($index)"></span>
-            </div>
-          </li>
-        </ul>
-      </span>
-    </div>
-    <div class="col-md-4">
-      <span class="columns lightBold">
-        Groups
-        <ul data-drop="true"
-            ng-model="config.graph.groups"
-            jqyoui-droppable="{multiple:true, onDrop:'onGraphOptionChange()'}"
-            class="list-unstyled">
-          <li ng-repeat="item in config.graph.groups">
-            <div class="btn btn-success btn-xs">
-              {{item.name}} <span class="fa fa-close" ng-click="removeGraphOptionGroups($index)"></span>
-            </div>
-          </li>
-        </ul>
-      </span>
-    </div>
-    <div class="col-md-4">
-      <span class="columns lightBold">
-        Values
-        <ul data-drop="true"
-            ng-model="config.graph.values"
-            jqyoui-droppable="{multiple:true, onDrop:'onGraphOptionChange()'}"
-            class="list-unstyled">
-          <li ng-repeat="item in config.graph.values">
-            <div class="btn-group">
-              <div class="btn btn-info btn-xs dropdown-toggle"
-                   type="button"
-                   data-toggle="dropdown">
-                {{item.name | limitTo: 30}}{{item.name.length > 30 ? '...' : ''}}
-                <font style="color:#EEEEEE;"><span class="lightBold" style="text-transform: uppercase;">{{item.aggr}}</span></font>
-                <span class="fa fa-close" ng-click="removeGraphOptionValues($index)"></span>
-              </div>
-              <ul class="dropdown-menu" role="menu">
-                <li ng-click="setGraphOptionValueAggr($index, 'sum')"><a>sum</a></li>
-                <li ng-click="setGraphOptionValueAggr($index, 'count')"><a>count</a></li>
-                <li ng-click="setGraphOptionValueAggr($index, 'avg')"><a>avg</a></li>
-                <li ng-click="setGraphOptionValueAggr($index, 'min')"><a>min</a></li>
-                <li ng-click="setGraphOptionValueAggr($index, 'max')"><a>max</a></li>
-              </ul>
-            </div>
-          </li>
-        </ul>
-      </span>
-    </div>
-  </div>
-
-  <div class="row" ng-if="graphMode=='scatterChart'">
-    <div class="col-md-3">
-      <span class="columns lightBold">
-        xAxis
-        <ul data-drop="true"
-            ng-model="config.graph.scatter.xAxis"
-            jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
-            class="list-unstyled"
-            style="height:36px">
-          <li ng-if="config.graph.scatter.xAxis">
-            <div class="btn btn-primary btn-xs">
-              {{config.graph.scatter.xAxis.name}} <span class="fa fa-close" ng-click="removeScatterOptionXaxis($index)"></span>
-            </div>
-          </li>
-        </ul>
-      </span>
-    </div>
-    <div class="col-md-3">
-      <span class="columns lightBold">
-        yAxis
-        <ul data-drop="true"
-            ng-model="config.graph.scatter.yAxis"
-            jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
-            class="list-unstyled"
-            style="height:36px">
-          <li ng-if="config.graph.scatter.yAxis">
-            <div class="btn btn-success btn-xs">
-              {{config.graph.scatter.yAxis.name}} <span class="fa fa-close" ng-click="removeScatterOptionYaxis($index)"></span>
-            </div>
-          </li>
-        </ul>
-      </span>
-    </div>
-    <div class="col-md-3">
-      <span class="columns lightBold">
-        group
-        <ul data-drop="true"
-            ng-model="config.graph.scatter.group"
-            jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
-            class="list-unstyled"
-            style="height:36px">
-          <li ng-if="config.graph.scatter.group">
-            <div class="btn btn-info btn-xs">
-              {{config.graph.scatter.group.name}} <span class="fa fa-close" ng-click="removeScatterOptionGroup($index)"></span>
-            </div>
-          </li>
-        </ul>
-      </span>
-    </div>
-    <div class="col-md-3">
-      <span class="columns lightBold">
-        size
-        <a tabindex="0" class="fa fa-info-circle" role="button" popover-placement="top"
-           popover-trigger="focus"
-           popover-html-unsafe="<li>Size option is valid only when you drop numeric field here.</li>
-                                <li>When data in each axis are discrete, 'number of values in corresponding coordinate' will be used as size.</li>
-                                <li>Zeppelin consider values as discrete when the values contain string value or the number of distinct values are bigger than 5% of total number of values.</li>
-                                <li>Size field button turns to grey when the option you chose is not valid.</li>"></a>
-        <ul data-drop="true"
-            ng-model="config.graph.scatter.size"
-            jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
-            class="list-unstyled"
-            style="height:36px">
-          <li ng-if="config.graph.scatter.size">
-            <div class="btn btn-xs" style="color:white" ng-class="{'btn-warning': isValidSizeOption(config.graph.scatter)}">
-              {{config.graph.scatter.size.name}} <span class="fa fa-close" ng-click="removeScatterOptionSize($index)"></span>
-            </div>
-          </li>
-        </ul>
-      </span>
-    </div>
-  </div>
-</div>
diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result-results.html b/zeppelin-web/src/app/notebook/paragraph/result/result-results.html
deleted file mode 100644
index f78fdbf1c90..00000000000
--- a/zeppelin-web/src/app/notebook/paragraph/result/result-results.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!--
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-<div
-  id="p{{id}}_resize"
-  ng-if="!config.helium.activeApp"
-  style="padding-bottom: 5px;"
-  resize='{"allowresize": "{{!asIframe && !viewOnly}}", "graphType": "{{type}}"}'
-     resizable on-resize="resize(width, height);">
-  <div ng-include src="'app/notebook/paragraph/result/result-graph-settings.html'"></div>
-  <div ng-include src="'app/notebook/paragraph/result/result-graph.html'"></div>
-
-  <div id="{{id}}_comment"
-       class="text"
-       ng-if="type == 'TABLE' && tableDataComment"
-       ng-bind-html="tableDataComment">
-  </div>
-
-  <div id="p{{id}}_text"
-       ng-if="type == 'TEXT'">
-    <div class="fa fa-level-down scroll-paragraph-down"
-         ng-show="showScrollDownIcon()"
-         ng-click="scrollParagraphDown()"
-         tooltip="Follow Output"></div>
-    <div id="p{{id}}_text"
-         style="max-height: {{config.graph.height}}px; overflow: auto"
-         class="text"></div>
-    <div class="fa fa-chevron-up scroll-paragraph-up"
-         ng-show="showScrollUpIcon()"
-         ng-click="scrollParagraphUp()"
-         tooltip="Scroll Top"></div>
-  </div>
-
-  <div id="p{{id}}_html"
-       class="resultContained"
-       ng-if="type == 'HTML'">
-  </div>
-
-  <div id="p{{id}}_angular"
-       class="resultContained"
-       ng-if="type == 'ANGULAR'">
-  </div>
-
-  <img id="{{id}}_img"
-       ng-if="type == 'IMG'"
-       ng-src="{{getBase64ImageSrc(result.data)}}" />
-</div>
-
-<div ng-repeat="app in apps">
-  <div id="p{{app.id}}"
-       ng-show="config.helium.activeApp == app.id">
-  </div>
-</div>
diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result.html b/zeppelin-web/src/app/notebook/paragraph/result/result.html
index b3d0f23ba60..feb003698c8 100644
--- a/zeppelin-web/src/app/notebook/paragraph/result/result.html
+++ b/zeppelin-web/src/app/notebook/paragraph/result/result.html
@@ -20,8 +20,30 @@
     style="padding-bottom: 5px;"
     resize='{"allowresize": "{{!asIframe && !viewOnly}}", "graphType": "{{type}}"}'
        resizable on-resize="resize(width, height);">
-    <div ng-include src="'app/notebook/paragraph/result/result-graph-settings.html'"></div>
-    <div ng-include src="'app/notebook/paragraph/result/result-graph.html'"></div>
+
+    <!-- graph setting -->
+    <div class="option lightBold" style="overflow: visible;"
+         ng-show="type=='TABLE' && graphMode!='table'
+                  && config.graph.optionOpen && !asIframe && !viewOnly">
+      <div ng-repeat="viz in builtInTableDataVisualizationList track by $index"
+           id="trsetting{{id}}_{{viz.id}}"
+           ng-show="graphMode == viz.id"></div>
+      <div ng-repeat="viz in builtInTableDataVisualizationList track by $index"
+           id="vizsetting{{id}}_{{viz.id}}"
+           ng-show="graphMode == viz.id"></div>
+    </div>
+
+    <!-- graph -->
+    <div id="p{{id}}_graph"
+         class="graphContainer"
+         ng-class="{'noOverflow': graphMode=='table'}"
+         ng-show="type =='TABLE'"
+         >
+      <div ng-repeat="viz in builtInTableDataVisualizationList track by $index"
+           id="p{{id}}_{{viz.id}}"
+           ng-show="graphMode == viz.id">
+      </div>
+    </div>
 
     <div id="{{id}}_comment"
          class="text"

From c3c31060dc8a6451eb35748daf79a2a8a38134de Mon Sep 17 00:00:00 2001
From: Lee moon soo <moon@apache.org>
Date: Fri, 2 Dec 2016 08:36:48 -0800
Subject: [PATCH 4/5] Allow per graph setting

---
 .../paragraph/result/result-graphOptions.html | 31 -------------
 .../paragraph/result/result.controller.js     |  6 ++-
 .../builtins/visualization-linechart.js       | 30 +++++++++++++
 .../src/app/visualization/visualization.js    | 43 +++++++++++++++++++
 4 files changed, 78 insertions(+), 32 deletions(-)
 delete mode 100644 zeppelin-web/src/app/notebook/paragraph/result/result-graphOptions.html

diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result-graphOptions.html b/zeppelin-web/src/app/notebook/paragraph/result/result-graphOptions.html
deleted file mode 100644
index e3ee069c4c2..00000000000
--- a/zeppelin-web/src/app/notebook/paragraph/result/result-graphOptions.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!--
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-<div>
-  <div ng-if="graphMode=='lineChart' || graphMode=='lineWithFocusChart'">
-    <label>
-      <input type="checkbox"
-             ng-model="config.graph.forceY"
-             ng-click="onGraphOptionChange()" />
-      force Y to 0
-    </label>
-    <br/>
-
-    <label>
-      <input type="checkbox"
-             ng-model="config.graph.lineWithFocus"
-             ng-click="onGraphOptionChange()" />
-      show line chart with focus
-    </label>
-  </div>
-</div>
diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js b/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
index af12029b41a..0c22d3046aa 100644
--- a/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
@@ -376,7 +376,7 @@
           var retryRenderer = function() {
             var targetEl = angular.element('#p' + $scope.id + '_' + type);
             var transformationSettingTargetEl = angular.element('#trsetting' + $scope.id + '_' + type);
-            //var visualizationSettingTargetEl = angular.element('#vizsetting' + $scope.id + '_' + type);
+            var visualizationSettingTargetEl = angular.element('#vizsetting' + $scope.id + '_' + type);
             if (targetEl.length) {
               try {
                 // set height
@@ -393,6 +393,7 @@
                 };
                 builtInViz.instance._emitter = emitter;
                 builtInViz.instance._compile = $compile;
+                builtInViz.instance._createNewScope = createNewScope;
                 var transformation = builtInViz.instance.getTransformation();
                 transformation._emitter = emitter;
                 transformation._templateRequest = $templateRequest;
@@ -403,6 +404,7 @@
                 var transformed = transformation.transform(tableData);
                 transformation.renderSetting(transformationSettingTargetEl);
                 builtInViz.instance.render(transformed);
+                builtInViz.instance.renderSetting(visualizationSettingTargetEl);
                 builtInViz.instance.activate();
                 angular.element(window).resize(function() {
                   builtInViz.instance.resize();
@@ -421,6 +423,7 @@
           var retryRenderer = function() {
             var targetEl = angular.element('#p' + $scope.id + '_' + type);
             var transformationSettingTargetEl = angular.element('#trsetting' + $scope.id + '_' + type);
+            var visualizationSettingTargetEl = angular.element('#trsetting' + $scope.id + '_' + type);
             if (targetEl.length) {
               var config = getVizConfig(type);
               targetEl.height(height);
@@ -430,6 +433,7 @@
               transformation.renderSetting(transformationSettingTargetEl);
               builtInViz.instance.setConfig(config);
               builtInViz.instance.render(transformed);
+              builtInViz.instance.renderSetting(visualizationSettingTargetEl);
             } else {
               $timeout(retryRenderer, 10);
             }
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-linechart.js b/zeppelin-web/src/app/visualization/builtins/visualization-linechart.js
index 58cfb52cbbf..f513a37d252 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-linechart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-linechart.js
@@ -82,3 +82,33 @@ zeppelin.LinechartVisualization.prototype.configureChart = function(chart) {
     chart.forceY([]);
   }
 };
+
+zeppelin.LinechartVisualization.prototype.getSetting = function(chart) {
+  var self = this;
+  var configObj = self.config;
+
+  return {
+    template: `<div>
+      <label>
+        <input type="checkbox"
+             ng-model="config.forceY"
+             ng-click="save()" />
+        force Y to 0
+      </label>
+      <br/>
+
+      <label>
+        <input type="checkbox"
+             ng-model="config.lineWithFocus"
+             ng-click="save()" />
+        show line chart with focus
+      </label>
+    </div>`,
+    scope: {
+      config: configObj,
+      save: function() {
+        self.emitConfig(configObj);
+      }
+    }
+  };
+};
diff --git a/zeppelin-web/src/app/visualization/visualization.js b/zeppelin-web/src/app/visualization/visualization.js
index 279cf14bab4..ade807abdfa 100644
--- a/zeppelin-web/src/app/visualization/visualization.js
+++ b/zeppelin-web/src/app/visualization/visualization.js
@@ -110,3 +110,46 @@ zeppelin.Visualization.prototype.emitConfig = function(config) {
 zeppelin.Visualization.prototype.destroy = function() {
   // override this
 };
+
+/**
+ * return {
+ *   template : angular template string or url (url should end with .html),
+ *   scope : an object to bind to template scope
+ * }
+ */
+zeppelin.Visualization.prototype.getSetting = function() {
+  // override this
+};
+
+/**
+ * render setting
+ */
+zeppelin.Visualization.prototype.renderSetting = function(targetEl) {
+  var setting = this.getSetting();
+  if (!setting) {
+    return;
+  }
+
+  this.settingScope = this._createNewScope();
+  for (var k in setting.scope) {
+    this.settingScope[k] = setting.scope[k];
+  }
+  var template = setting.template;
+  var scope = this.settingScope;
+
+  if (template.split('\n').length === 1 &&
+      template.endsWith('.html')) { // template is url
+    var self = this;
+    this._templateRequest(template).then(function(t) {
+      self._renderSetting(targetEl, t, scope);
+    });
+  } else {
+    this._renderSetting(targetEl, template, scope);
+  }
+};
+
+zeppelin.Visualization.prototype._renderSetting = function(targetEl, template, scope) {
+  this._targetEl = targetEl;
+  targetEl.html(template);
+  this._compile(targetEl.contents())(scope);
+};

From 836b1d2abda92b4327c527b7329859b71b5fc5b6 Mon Sep 17 00:00:00 2001
From: Lee moon soo <moon@apache.org>
Date: Fri, 2 Dec 2016 15:50:07 -0800
Subject: [PATCH 5/5] performance optimize

---
 .../paragraph/result/result.controller.js     |  5 +++-
 .../src/app/tabledata/transformation.js       | 26 ++++++++++++++++---
 .../src/app/visualization/visualization.js    | 25 +++++++++++++++---
 3 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js b/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
index 0c22d3046aa..b05ad15ceeb 100644
--- a/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
@@ -154,9 +154,12 @@
         return;
       }
       console.log('updateResult %o %o %o %o', result, newConfig, paragraphRef, index);
+      var refresh = !angular.equals(newConfig, $scope.config) ||
+                    !angular.equals(result.type, $scope.type) ||
+                    !angular.equals(result.data, data);
 
       updateData(result, newConfig, paragraph, resultIndex);
-      renderResult($scope.type, true);
+      renderResult($scope.type, refresh);
     });
 
     $scope.$on('appendParagraphOutput', function(event, data) {
diff --git a/zeppelin-web/src/app/tabledata/transformation.js b/zeppelin-web/src/app/tabledata/transformation.js
index a555356eec2..6950bd55f96 100644
--- a/zeppelin-web/src/app/tabledata/transformation.js
+++ b/zeppelin-web/src/app/tabledata/transformation.js
@@ -50,12 +50,31 @@ zeppelin.Transformation.prototype.renderSetting = function(targetEl) {
     return;
   }
 
-  this.settingScope = this._createNewScope();
+  // already readered
+  if (this._scope) {
+    var self = this;
+    console.log('%o %o', self._scope, setting.scope);
+    this._scope.$apply(function() {
+      for (var k in setting.scope) {
+        self._scope[k] = setting.scope[k];
+      }
+
+      for (var k in self._prevSettingScope) {
+        if (!setting.scope[k]) {
+          self._scope[k] = setting.scope[k];
+        }
+      }
+    });
+    return;
+  } else {
+    this._prevSettingScope = setting.scope;
+  }
+
+  var scope = this._createNewScope();
   for (var k in setting.scope) {
-    this.settingScope[k] = setting.scope[k];
+    scope[k] = setting.scope[k];
   }
   var template = setting.template;
-  var scope = this.settingScope;
 
   if (template.split('\n').length === 1 &&
       template.endsWith('.html')) { // template is url
@@ -72,6 +91,7 @@ zeppelin.Transformation.prototype._render = function(targetEl, template, scope)
   this._targetEl = targetEl;
   targetEl.html(template);
   this._compile(targetEl.contents())(scope);
+  this._scope = scope;
 };
 
 zeppelin.Transformation.prototype.setConfig = function(config) {
diff --git a/zeppelin-web/src/app/visualization/visualization.js b/zeppelin-web/src/app/visualization/visualization.js
index ade807abdfa..37b1af65fca 100644
--- a/zeppelin-web/src/app/visualization/visualization.js
+++ b/zeppelin-web/src/app/visualization/visualization.js
@@ -130,12 +130,30 @@ zeppelin.Visualization.prototype.renderSetting = function(targetEl) {
     return;
   }
 
-  this.settingScope = this._createNewScope();
+  // already readered
+  if (this._scope) {
+    var self = this;
+    this._scope.$apply(function() {
+      for (var k in setting.scope) {
+        self._scope[k] = setting.scope[k];
+      }
+
+      for (var k in self._prevSettingScope) {
+        if (!setting.scope[k]) {
+          self._scope[k] = setting.scope[k];
+        }
+      }
+    });
+    return;
+  } else {
+    this._prevSettingScope = setting.scope;
+  }
+
+  var scope = this._createNewScope();
   for (var k in setting.scope) {
-    this.settingScope[k] = setting.scope[k];
+    scope[k] = setting.scope[k];
   }
   var template = setting.template;
-  var scope = this.settingScope;
 
   if (template.split('\n').length === 1 &&
       template.endsWith('.html')) { // template is url
@@ -152,4 +170,5 @@ zeppelin.Visualization.prototype._renderSetting = function(targetEl, template, s
   this._targetEl = targetEl;
   targetEl.html(template);
   this._compile(targetEl.contents())(scope);
+  this._scope = scope;
 };