[3/6] zeppelin git commit: [ZEPPELIN-1927] Remove useless function wrapping in all js files

[mo...@apache.org]

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/4c60b27c/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
----------------------------------------------------------------------
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 f494029..e793199 100644
--- a/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
@@ -20,894 +20,891 @@ import AreachartVisualization from '../../../visualization/builtins/visualizatio
 import LinechartVisualization from '../../../visualization/builtins/visualization-linechart';
 import ScatterchartVisualization from '../../../visualization/builtins/visualization-scatterchart';
 
-(function() {
-
-  angular.module('zeppelinWebApp').controller('ResultCtrl', ResultCtrl);
-
-  ResultCtrl.$inject = [
-    '$scope',
-    '$rootScope',
-    '$route',
-    '$window',
-    '$routeParams',
-    '$location',
-    '$timeout',
-    '$compile',
-    '$http',
-    '$q',
-    '$templateRequest',
-    'websocketMsgSrv',
-    'baseUrlSrv',
-    'ngToast',
-    'saveAsService',
-    'noteVarShareService'
+angular.module('zeppelinWebApp').controller('ResultCtrl', ResultCtrl);
+
+ResultCtrl.$inject = [
+  '$scope',
+  '$rootScope',
+  '$route',
+  '$window',
+  '$routeParams',
+  '$location',
+  '$timeout',
+  '$compile',
+  '$http',
+  '$q',
+  '$templateRequest',
+  'websocketMsgSrv',
+  'baseUrlSrv',
+  'ngToast',
+  'saveAsService',
+  'noteVarShareService'
+];
+
+function ResultCtrl($scope, $rootScope, $route, $window, $routeParams, $location,
+                    $timeout, $compile, $http, $q, $templateRequest, websocketMsgSrv,
+                    baseUrlSrv, ngToast, saveAsService, noteVarShareService) {
+
+  /**
+   * Built-in visualizations
+   */
+  $scope.builtInTableDataVisualizationList = [
+    {
+      id: 'table',   // paragraph.config.graph.mode
+      name: 'Table', // human readable name. tooltip
+      icon: 'fa fa-table'
+    },
+    {
+      id: 'multiBarChart',
+      name: 'Bar Chart',
+      icon: 'fa fa-bar-chart',
+      transformation: 'pivot'
+    },
+    {
+      id: 'pieChart',
+      name: 'Pie Chart',
+      icon: 'fa fa-pie-chart',
+      transformation: 'pivot'
+    },
+    {
+      id: 'stackedAreaChart',
+      name: 'Area Chart',
+      icon: 'fa fa-area-chart',
+      transformation: 'pivot'
+    },
+    {
+      id: 'lineChart',
+      name: 'Line Chart',
+      icon: 'fa fa-line-chart',
+      transformation: 'pivot'
+    },
+    {
+      id: 'scatterChart',
+      name: 'Scatter Chart',
+      icon: 'cf cf-scatter-chart'
+    }
   ];
 
-  function ResultCtrl($scope, $rootScope, $route, $window, $routeParams, $location,
-                      $timeout, $compile, $http, $q, $templateRequest, websocketMsgSrv,
-                      baseUrlSrv, ngToast, saveAsService, noteVarShareService) {
+  /**
+   * Holds class and actual runtime instance and related infos of built-in visualizations
+   */
+  var builtInVisualizations = {
+    'table': {
+      class: TableVisualization,
+      instance: undefined   // created from setGraphMode()
+    },
+    'multiBarChart': {
+      class: BarchartVisualization,
+      instance: undefined
+    },
+    'pieChart': {
+      class: PiechartVisualization,
+      instance: undefined
+    },
+    'stackedAreaChart': {
+      class: AreachartVisualization,
+      instance: undefined
+    },
+    'lineChart': {
+      class: LinechartVisualization,
+      instance: undefined
+    },
+    'scatterChart': {
+      class: ScatterchartVisualization,
+      instance: undefined
+    }
+  };
 
-    /**
-     * Built-in visualizations
-     */
-    $scope.builtInTableDataVisualizationList = [
-      {
-        id: 'table',   // paragraph.config.graph.mode
-        name: 'Table', // human readable name. tooltip
-        icon: 'fa fa-table'
-      },
-      {
-        id: 'multiBarChart',
-        name: 'Bar Chart',
-        icon: 'fa fa-bar-chart',
-        transformation: 'pivot'
-      },
-      {
-        id: 'pieChart',
-        name: 'Pie Chart',
-        icon: 'fa fa-pie-chart',
-        transformation: 'pivot'
-      },
-      {
-        id: 'stackedAreaChart',
-        name: 'Area Chart',
-        icon: 'fa fa-area-chart',
-        transformation: 'pivot'
-      },
-      {
-        id: 'lineChart',
-        name: 'Line Chart',
-        icon: 'fa fa-line-chart',
-        transformation: 'pivot'
-      },
-      {
-        id: 'scatterChart',
-        name: 'Scatter Chart',
-        icon: 'cf cf-scatter-chart'
-      }
-    ];
+  // type
+  $scope.type;
 
-    /**
-     * Holds class and actual runtime instance and related infos of built-in visualizations
-     */
-    var builtInVisualizations = {
-      'table': {
-        class: TableVisualization,
-        instance: undefined   // created from setGraphMode()
-      },
-      'multiBarChart': {
-        class: BarchartVisualization,
-        instance: undefined
-      },
-      'pieChart': {
-        class: PiechartVisualization,
-        instance: undefined
-      },
-      'stackedAreaChart': {
-        class: AreachartVisualization,
-        instance: undefined
-      },
-      'lineChart': {
-        class: LinechartVisualization,
-        instance: undefined
-      },
-      'scatterChart': {
-        class: ScatterchartVisualization,
-        instance: undefined
-      }
-    };
+  // Data of the result
+  var data;
 
-    // type
-    $scope.type;
+  // config
+  $scope.config;
 
-    // Data of the result
-    var data;
+  // resultId = paragraph.id + index
+  $scope.id;
 
-    // config
-    $scope.config;
+  // referece to paragraph
+  var paragraph;
 
-    // resultId = paragraph.id + index
-    $scope.id;
+  // index of the result
+  var resultIndex;
 
-    // referece to paragraph
-    var paragraph;
+  // TableData instance
+  var tableData;
 
-    // index of the result
-    var resultIndex;
+  // available columns in tabledata
+  $scope.tableDataColumns = [];
 
-    // TableData instance
-    var tableData;
+  // enable helium
+  var enableHelium = false;
 
-    // available columns in tabledata
-    $scope.tableDataColumns = [];
+  // graphMode
+  $scope.graphMode;
 
-    // enable helium
-    var enableHelium = false;
+  // image data
+  $scope.imageData;
 
-    // graphMode
-    $scope.graphMode;
+  $scope.init = function(result, config, paragraph, index) {
+    console.log('result controller init %o %o %o', result, config, index);
+    updateData(result, config, paragraph, index);
+    renderResult($scope.type);
+  };
 
-    // image data
-    $scope.imageData;
+  $scope.$on('updateResult', function(event, result, newConfig, paragraphRef, index) {
+    if (paragraph.id !== paragraphRef.id || index !== resultIndex) {
+      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, refresh);
+  });
+
+  $scope.$on('appendParagraphOutput', function(event, data) {
+    /* It has been observed that append events
+     * can be errorneously called even if paragraph
+     * execution has ended, and in that case, no append
+     * should be made. Also, it was observed that between PENDING
+     * and RUNNING states, append-events can be called and we can't
+     * miss those, else during the length of paragraph run, few
+     * initial output line/s will be missing.
+     */
+    if (paragraph.id === data.paragraphId &&
+      resultIndex === data.index &&
+      (paragraph.status === 'RUNNING' || paragraph.status === 'PENDING')) {
+      appendTextOutput(data.data);
+    }
+  });
 
-    $scope.init = function(result, config, paragraph, index) {
-      console.log('result controller init %o %o %o', result, config, index);
-      updateData(result, config, paragraph, index);
-      renderResult($scope.type);
-    };
+  $scope.$on('updateParagraphOutput', function(event, data) {
+    if (paragraph.id === data.paragraphId &&
+      resultIndex === data.index) {
+      clearTextOutput();
+      appendTextOutput(data.data);
+    }
+  });
 
-    $scope.$on('updateResult', function(event, result, newConfig, paragraphRef, index) {
-      if (paragraph.id !== paragraphRef.id || index !== resultIndex) {
-        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);
+  var updateData = function(result, config, paragraphRef, index) {
+    data = result.data;
+    paragraph = paragraphRef;
+    resultIndex = parseInt(index);
 
-      updateData(result, newConfig, paragraph, resultIndex);
-      renderResult($scope.type, refresh);
-    });
+    $scope.id = paragraph.id + '_' + index;
+    $scope.type = result.type;
+    config = config ? config : {};
 
-    $scope.$on('appendParagraphOutput', function(event, data) {
-      /* It has been observed that append events
-       * can be errorneously called even if paragraph
-       * execution has ended, and in that case, no append
-       * should be made. Also, it was observed that between PENDING
-       * and RUNNING states, append-events can be called and we can't
-       * miss those, else during the length of paragraph run, few
-       * initial output line/s will be missing.
-       */
-      if (paragraph.id === data.paragraphId &&
-          resultIndex === data.index &&
-         (paragraph.status === 'RUNNING' || paragraph.status === 'PENDING')) {
-        appendTextOutput(data.data);
-      }
-    });
+    // initialize default config values
+    if (!config.graph) {
+      config.graph = {};
+    }
 
-    $scope.$on('updateParagraphOutput', function(event, data) {
-      if (paragraph.id === data.paragraphId &&
-          resultIndex === data.index) {
-        clearTextOutput();
-        appendTextOutput(data.data);
-      }
-    });
+    if (!config.graph.mode) {
+      config.graph.mode = 'table';
+    }
 
-    var updateData = function(result, config, paragraphRef, index) {
-      data = result.data;
-      paragraph = paragraphRef;
-      resultIndex = parseInt(index);
+    if (!config.graph.height) {
+      config.graph.height = 300;
+    }
 
-      $scope.id = paragraph.id + '_' + index;
-      $scope.type = result.type;
-      config = config ? config : {};
+    if (!config.graph.optionOpen) {
+      config.graph.optionOpen = false;
+    }
 
-      // initialize default config values
-      if (!config.graph) {
-        config.graph = {};
-      }
+    $scope.graphMode = config.graph.mode;
+    $scope.config = angular.copy(config);
 
-      if (!config.graph.mode) {
-        config.graph.mode = 'table';
-      }
+    // enable only when it is last result
+    enableHelium = (index === paragraphRef.results.msg.length - 1);
 
-      if (!config.graph.height) {
-        config.graph.height = 300;
-      }
+    if ($scope.type === 'TABLE') {
+      tableData = new TableData();
+      tableData.loadParagraphResult({type: $scope.type, msg: data});
+      $scope.tableDataColumns = tableData.columns;
+      $scope.tableDataComment = tableData.comment;
+    } else if ($scope.type === 'IMG') {
+      $scope.imageData = data;
+    }
+  };
 
-      if (!config.graph.optionOpen) {
-        config.graph.optionOpen = false;
-      }
+  var renderResult = function(type, refresh) {
+    var activeApp;
+    if (enableHelium) {
+      getSuggestions();
+      getApplicationStates();
+      activeApp = _.get($scope.config, 'helium.activeApp');
+    }
 
-      $scope.graphMode = config.graph.mode;
-      $scope.config = angular.copy(config);
+    if (activeApp) {
+      var app = _.find($scope.apps, {id: activeApp});
+      renderApp(app);
+    } else {
+      if (type === 'TABLE') {
+        $scope.renderGraph($scope.graphMode, refresh);
+      } else if (type === 'HTML') {
+        renderHtml();
+      } else if (type === 'ANGULAR') {
+        renderAngular();
+      } else if (type === 'TEXT') {
+        renderText();
+      }
+    }
+  };
 
-      // enable only when it is last result
-      enableHelium = (index === paragraphRef.results.msg.length - 1);
+  var renderHtml = function() {
+    var retryRenderer = function() {
+      var htmlEl = angular.element('#p' + $scope.id + '_html');
+      if (htmlEl.length) {
+        try {
+          htmlEl.html(data);
 
-      if ($scope.type === 'TABLE') {
-        tableData = new TableData();
-        tableData.loadParagraphResult({type: $scope.type, msg: data});
-        $scope.tableDataColumns = tableData.columns;
-        $scope.tableDataComment = tableData.comment;
-      } else if ($scope.type === 'IMG') {
-        $scope.imageData = data;
+          htmlEl.find('pre code').each(function(i, e) {
+            hljs.highlightBlock(e);
+          });
+          /*eslint new-cap: [2, {"capIsNewExceptions": ["MathJax.Hub.Queue"]}]*/
+          MathJax.Hub.Queue(['Typeset', MathJax.Hub, htmlEl[0]]);
+        } catch (err) {
+          console.log('HTML rendering error %o', err);
+        }
+      } else {
+        $timeout(retryRenderer, 10);
       }
     };
+    $timeout(retryRenderer);
+  };
 
-    var renderResult = function(type, refresh) {
-      var activeApp;
-      if (enableHelium) {
-        getSuggestions();
-        getApplicationStates();
-        activeApp = _.get($scope.config, 'helium.activeApp');
-      }
+  var renderAngular = function() {
+    var retryRenderer = function() {
+      if (angular.element('#p' + $scope.id + '_angular').length) {
+        try {
+          angular.element('#p' + $scope.id + '_angular').html(data);
 
-      if (activeApp) {
-        var app = _.find($scope.apps, {id: activeApp});
-        renderApp(app);
-      } else {
-        if (type === 'TABLE') {
-          $scope.renderGraph($scope.graphMode, refresh);
-        } else if (type === 'HTML') {
-          renderHtml();
-        } else if (type === 'ANGULAR') {
-          renderAngular();
-        } else if (type === 'TEXT') {
-          renderText();
+          var paragraphScope = noteVarShareService.get(paragraph.id + '_paragraphScope');
+          $compile(angular.element('#p' + $scope.id + '_angular').contents())(paragraphScope);
+        } catch (err) {
+          console.log('ANGULAR rendering error %o', err);
         }
+      } else {
+        $timeout(retryRenderer, 10);
       }
     };
+    $timeout(retryRenderer);
+  };
 
-    var renderHtml = function() {
-      var retryRenderer = function() {
-        var htmlEl = angular.element('#p' + $scope.id + '_html');
-        if (htmlEl.length) {
-          try {
-            htmlEl.html(data);
-
-            htmlEl.find('pre code').each(function(i, e) {
-              hljs.highlightBlock(e);
-            });
-            /*eslint new-cap: [2, {"capIsNewExceptions": ["MathJax.Hub.Queue"]}]*/
-            MathJax.Hub.Queue(['Typeset', MathJax.Hub, htmlEl[0]]);
-          } catch (err) {
-            console.log('HTML rendering error %o', err);
-          }
-        } else {
-          $timeout(retryRenderer, 10);
-        }
-      };
-      $timeout(retryRenderer);
-    };
+  var getTextEl = function (paragraphId) {
+    return angular.element('#p' + $scope.id + '_text');
+  }
 
-    var renderAngular = function() {
-      var retryRenderer = function() {
-        if (angular.element('#p' + $scope.id + '_angular').length) {
-          try {
-            angular.element('#p' + $scope.id + '_angular').html(data);
+  var textRendererInitialized = false;
+  var renderText = function() {
+    var retryRenderer = function() {
+      var textEl = getTextEl($scope.id);
+      if (textEl.length) {
+        // clear all lines before render
+        clearTextOutput();
+        textRendererInitialized = true;
 
-            var paragraphScope = noteVarShareService.get(paragraph.id + '_paragraphScope');
-            $compile(angular.element('#p' + $scope.id + '_angular').contents())(paragraphScope);
-          } catch (err) {
-            console.log('ANGULAR rendering error %o', err);
-          }
+        if (data) {
+          appendTextOutput(data);
         } else {
-          $timeout(retryRenderer, 10);
+          flushAppendQueue();
         }
-      };
-      $timeout(retryRenderer);
+
+        getTextEl($scope.id).bind('mousewheel', function(e) {
+          $scope.keepScrollDown = false;
+        });
+      } else {
+        $timeout(retryRenderer, 10);
+      }
     };
+    $timeout(retryRenderer);
+  };
 
-    var getTextEl = function (paragraphId) {
-      return angular.element('#p' + $scope.id + '_text');
+  var clearTextOutput = function() {
+    var textEl = getTextEl($scope.id);
+    if (textEl.length) {
+      textEl.children().remove();
     }
+  };
 
-    var textRendererInitialized = false;
-    var renderText = function() {
-      var retryRenderer = function() {
-        var textEl = getTextEl($scope.id);
-        if (textEl.length) {
-          // clear all lines before render
-          clearTextOutput();
-          textRendererInitialized = true;
+  var textAppendQueueBeforeInitialize = [];
 
-          if (data) {
-            appendTextOutput(data);
-          } else {
-            flushAppendQueue();
-          }
-
-          getTextEl($scope.id).bind('mousewheel', function(e) {
-            $scope.keepScrollDown = false;
-          });
-        } else {
-          $timeout(retryRenderer, 10);
-        }
-      };
-      $timeout(retryRenderer);
-    };
+  var flushAppendQueue = function() {
+    while (textAppendQueueBeforeInitialize.length > 0) {
+      appendTextOutput(textAppendQueueBeforeInitialize.pop());
+    }
+  };
 
-    var clearTextOutput = function() {
+  var appendTextOutput = function(msg) {
+    if (!textRendererInitialized) {
+      textAppendQueueBeforeInitialize.push(msg);
+    } else {
+      flushAppendQueue();
       var textEl = getTextEl($scope.id);
       if (textEl.length) {
-        textEl.children().remove();
-      }
-    };
-
-    var textAppendQueueBeforeInitialize = [];
-
-    var flushAppendQueue = function() {
-      while (textAppendQueueBeforeInitialize.length > 0) {
-        appendTextOutput(textAppendQueueBeforeInitialize.pop());
-      }
-    };
-
-    var appendTextOutput = function(msg) {
-      if (!textRendererInitialized) {
-        textAppendQueueBeforeInitialize.push(msg);
-      } else {
-        flushAppendQueue();
-        var textEl = getTextEl($scope.id);
-        if (textEl.length) {
-          var lines = msg.split('\n');
-          for (var i = 0; i < lines.length; i++) {
-            textEl.append(angular.element('<div></div>').text(lines[i]));
-          }
-        }
-        if ($scope.keepScrollDown) {
-          var doc = getTextEl($scope.id);
-          doc[0].scrollTop = doc[0].scrollHeight;
+        var lines = msg.split('\n');
+        for (var i = 0; i < lines.length; i++) {
+          textEl.append(angular.element('<div></div>').text(lines[i]));
         }
       }
-    };
+      if ($scope.keepScrollDown) {
+        var doc = getTextEl($scope.id);
+        doc[0].scrollTop = doc[0].scrollHeight;
+      }
+    }
+  };
 
-    $scope.renderGraph = function(type, refresh) {
-      // set graph height
-      var height = $scope.config.graph.height;
-      var graphContainerEl = angular.element('#p' + $scope.id + '_graph');
-      graphContainerEl.height(height);
+  $scope.renderGraph = function(type, refresh) {
+    // set graph height
+    var height = $scope.config.graph.height;
+    var graphContainerEl = angular.element('#p' + $scope.id + '_graph');
+    graphContainerEl.height(height);
 
-      if (!type) {
-        type = 'table';
-      }
+    if (!type) {
+      type = 'table';
+    }
 
-      var builtInViz = builtInVisualizations[type];
-      if (builtInViz) {
-        // deactive previsouly active visualization
-        for (var t in builtInVisualizations) {
-          var v = builtInVisualizations[t].instance;
+    var builtInViz = builtInVisualizations[type];
+    if (builtInViz) {
+      // deactive previsouly active visualization
+      for (var t in builtInVisualizations) {
+        var v = builtInVisualizations[t].instance;
 
-          if (t !== type && v && v.isActive()) {
-            v.deactivate();
-            break;
-          }
+        if (t !== type && v && v.isActive()) {
+          v.deactivate();
+          break;
         }
+      }
 
-        if (!builtInViz.instance) { // not instantiated yet
-          // 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, config);
-
-                // inject emitter, $templateRequest
-                var emitter = function(graphSetting) {
-                  commitVizConfigChange(graphSetting, type);
-                };
-                builtInViz.instance._emitter = emitter;
-                builtInViz.instance._compile = $compile;
-                builtInViz.instance._createNewScope = createNewScope;
-                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.renderSetting(visualizationSettingTargetEl);
-                builtInViz.instance.activate();
-                angular.element(window).resize(function() {
-                  builtInViz.instance.resize();
-                });
-              } catch (err) {
-                console.log('Graph drawing error %o', err);
-              }
-            } else {
-              $timeout(retryRenderer, 10);
-            }
-          };
-          $timeout(retryRenderer);
-        } else if (refresh) {
-          console.log('Refresh data %o', tableData);
-          // 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);
-            var visualizationSettingTargetEl = angular.element('#trsetting' + $scope.id + '_' + type);
-            if (targetEl.length) {
-              var config = getVizConfig(type);
+      if (!builtInViz.instance) { // not instantiated yet
+        // 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, config);
+
+              // inject emitter, $templateRequest
+              var emitter = function(graphSetting) {
+                commitVizConfigChange(graphSetting, type);
+              };
+              builtInViz.instance._emitter = emitter;
+              builtInViz.instance._compile = $compile;
+              builtInViz.instance._createNewScope = createNewScope;
               var transformation = builtInViz.instance.getTransformation();
-              transformation.setConfig(config);
+              transformation._emitter = emitter;
+              transformation._templateRequest = $templateRequest;
+              transformation._compile = $compile;
+              transformation._createNewScope = createNewScope;
+
+              // render
               var transformed = transformation.transform(tableData);
               transformation.renderSetting(transformationSettingTargetEl);
-              builtInViz.instance.setConfig(config);
               builtInViz.instance.render(transformed);
               builtInViz.instance.renderSetting(visualizationSettingTargetEl);
-            } else {
-              $timeout(retryRenderer, 10);
-            }
-          };
-          $timeout(retryRenderer);
-        } else {
-          var retryRenderer = function() {
-            var targetEl = angular.element('#p' + $scope.id + '_' + type);
-            if (targetEl.length) {
-              targetEl.height(height);
               builtInViz.instance.activate();
-            } else {
-              $timeout(retryRenderer, 10);
+              angular.element(window).resize(function() {
+                builtInViz.instance.resize();
+              });
+            } catch (err) {
+              console.log('Graph drawing error %o', err);
             }
-          };
-          $timeout(retryRenderer);
-        }
-      }
-    };
-    $scope.switchViz = function(newMode) {
-      var newConfig = angular.copy($scope.config);
-      var newParams = angular.copy(paragraph.settings.params);
-
-      // graph options
-      newConfig.graph.mode = newMode;
-
-      // see switchApp()
-      _.set(newConfig, 'helium.activeApp', undefined);
-
-      commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams);
-    };
-
-    var createNewScope = function() {
-      return $rootScope.$new(true);
-    };
-
-    var commitParagraphResult = function(title, text, config, params) {
-      var newParagraphConfig = angular.copy(paragraph.config);
-      newParagraphConfig.results = newParagraphConfig.results || [];
-      newParagraphConfig.results[resultIndex] = config;
-      if ($scope.revisionView === true) {
-        // local update without commit
-        updateData({
-          type: $scope.type,
-          data: data
-        }, newParagraphConfig.results[resultIndex], paragraph, resultIndex);
-        renderResult($scope.type, true);
+          } else {
+            $timeout(retryRenderer, 10);
+          }
+        };
+        $timeout(retryRenderer);
+      } else if (refresh) {
+        console.log('Refresh data %o', tableData);
+        // 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);
+          var visualizationSettingTargetEl = 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);
+            builtInViz.instance.renderSetting(visualizationSettingTargetEl);
+          } else {
+            $timeout(retryRenderer, 10);
+          }
+        };
+        $timeout(retryRenderer);
       } else {
-        websocketMsgSrv.commitParagraph(paragraph.id, title, text, newParagraphConfig, params);
+        var retryRenderer = function() {
+          var targetEl = angular.element('#p' + $scope.id + '_' + type);
+          if (targetEl.length) {
+            targetEl.height(height);
+            builtInViz.instance.activate();
+          } else {
+            $timeout(retryRenderer, 10);
+          }
+        };
+        $timeout(retryRenderer);
       }
-    };
+    }
+  };
+  $scope.switchViz = function(newMode) {
+    var newConfig = angular.copy($scope.config);
+    var newParams = angular.copy(paragraph.settings.params);
 
-    $scope.toggleGraphSetting = function() {
-      var newConfig = angular.copy($scope.config);
-      if (newConfig.graph.optionOpen) {
-        newConfig.graph.optionOpen = false;
-      } else {
-        newConfig.graph.optionOpen = true;
-      }
-      var newParams = angular.copy(paragraph.settings.params);
+    // graph options
+    newConfig.graph.mode = newMode;
 
-      commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams);
-    };
+    // see switchApp()
+    _.set(newConfig, 'helium.activeApp', undefined);
 
-    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]);
-        }
+    commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams);
+  };
 
-        if (!config) {
-          config = {};
-        }
+  var createNewScope = function() {
+    return $rootScope.$new(true);
+  };
 
-        // copy common setting
-        config.common = angular.copy(graph.commonSetting) || {};
+  var commitParagraphResult = function(title, text, config, params) {
+    var newParagraphConfig = angular.copy(paragraph.config);
+    newParagraphConfig.results = newParagraphConfig.results || [];
+    newParagraphConfig.results[resultIndex] = config;
+    if ($scope.revisionView === true) {
+      // local update without commit
+      updateData({
+        type: $scope.type,
+        data: data
+      }, newParagraphConfig.results[resultIndex], paragraph, resultIndex);
+      renderResult($scope.type, true);
+    } else {
+      websocketMsgSrv.commitParagraph(paragraph.id, title, text, newParagraphConfig, params);
+    }
+  };
 
-        // 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;
-    };
+  $scope.toggleGraphSetting = function() {
+    var newConfig = angular.copy($scope.config);
+    if (newConfig.graph.optionOpen) {
+      newConfig.graph.optionOpen = false;
+    } else {
+      newConfig.graph.optionOpen = true;
+    }
+    var newParams = angular.copy(paragraph.settings.params);
 
-    var commitVizConfigChange = function(config, vizId) {
-      var newConfig = angular.copy($scope.config);
-      if (!newConfig.graph) {
-        newConfig.graph = {};
-      }
+    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 (!newConfig.graph.setting) {
-        newConfig.graph.setting = {};
+      if (graph.setting) {
+        config = angular.copy(graph.setting[vizId]);
       }
-      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;
+      if (!config) {
+        config = {};
       }
 
+      // copy common setting
+      config.common = angular.copy(graph.commonSetting) || {};
+
       // copy pivot setting
-      if (newConfig.graph.commonSetting && newConfig.graph.commonSetting.pivot) {
-        newConfig.graph.keys = newConfig.graph.commonSetting.pivot.keys;
-        newConfig.graph.groups = newConfig.graph.commonSetting.pivot.groups;
-        newConfig.graph.values = newConfig.graph.commonSetting.pivot.values;
-        delete newConfig.graph.commonSetting.pivot;
+      if (graph.keys) {
+        config.common.pivot = {
+          keys: angular.copy(graph.keys),
+          groups: angular.copy(graph.groups),
+          values: angular.copy(graph.values)
+        };
       }
-      console.log('committVizConfig', newConfig);
-      var newParams = angular.copy(paragraph.settings.params);
-      commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams);
-    };
+    }
+    console.log('getVizConfig', config);
+    return config;
+  };
 
-    $scope.$on('paragraphResized', function(event, paragraphId) {
-      // paragraph col width changed
-      if (paragraphId === paragraph.id) {
-        var builtInViz = builtInVisualizations[$scope.graphMode];
-        if (builtInViz && builtInViz.instance) {
-          builtInViz.instance.resize();
-        }
+  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.groups = 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);
+  };
+
+  $scope.$on('paragraphResized', function(event, paragraphId) {
+    // paragraph col width changed
+    if (paragraphId === paragraph.id) {
+      var builtInViz = builtInVisualizations[$scope.graphMode];
+      if (builtInViz && builtInViz.instance) {
+        builtInViz.instance.resize();
       }
-    });
+    }
+  });
 
-    $scope.resize = function(width, height) {
-      $timeout(function() {
-        changeHeight(width, height);
-      }, 200);
-    };
+  $scope.resize = function(width, height) {
+    $timeout(function() {
+      changeHeight(width, height);
+    }, 200);
+  };
 
-    var changeHeight = function(width, height) {
-      var newParams = angular.copy(paragraph.settings.params);
-      var newConfig = angular.copy($scope.config);
+  var changeHeight = function(width, height) {
+    var newParams = angular.copy(paragraph.settings.params);
+    var newConfig = angular.copy($scope.config);
 
-      newConfig.graph.height = height;
-      paragraph.config.colWidth = width;
+    newConfig.graph.height = height;
+    paragraph.config.colWidth = width;
 
-      commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams);
-    };
+    commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams);
+  };
 
-    $scope.exportToDSV = function(delimiter) {
-      var dsv = '';
-      var dateFinished = moment(paragraph.dateFinished).format('YYYY-MM-DD hh:mm:ss A');
-      var exportedFileName = paragraph.title ? paragraph.title + '_' + dateFinished : 'data_' + dateFinished;
+  $scope.exportToDSV = function(delimiter) {
+    var dsv = '';
+    var dateFinished = moment(paragraph.dateFinished).format('YYYY-MM-DD hh:mm:ss A');
+    var exportedFileName = paragraph.title ? paragraph.title + '_' + dateFinished : 'data_' + dateFinished;
 
-      for (var titleIndex in tableData.columns) {
-        dsv += tableData.columns[titleIndex].name + delimiter;
-      }
-      dsv = dsv.substring(0, dsv.length - 1) + '\n';
-      for (var r in tableData.rows) {
-        var row = tableData.rows[r];
-        var dsvRow = '';
-        for (var index in row) {
-          var stringValue =  (row[index]).toString();
-          if (stringValue.indexOf(delimiter) > -1) {
-            dsvRow += '"' + stringValue + '"' + delimiter;
-          } else {
-            dsvRow += row[index] + delimiter;
-          }
+    for (var titleIndex in tableData.columns) {
+      dsv += tableData.columns[titleIndex].name + delimiter;
+    }
+    dsv = dsv.substring(0, dsv.length - 1) + '\n';
+    for (var r in tableData.rows) {
+      var row = tableData.rows[r];
+      var dsvRow = '';
+      for (var index in row) {
+        var stringValue =  (row[index]).toString();
+        if (stringValue.indexOf(delimiter) > -1) {
+          dsvRow += '"' + stringValue + '"' + delimiter;
+        } else {
+          dsvRow += row[index] + delimiter;
         }
-        dsv += dsvRow.substring(0, dsvRow.length - 1) + '\n';
       }
-      var extension = '';
-      if (delimiter === '\t') {
-        extension = 'tsv';
-      } else if (delimiter === ',') {
-        extension = 'csv';
-      }
-      saveAsService.saveAs(dsv, exportedFileName, extension);
-    };
+      dsv += dsvRow.substring(0, dsvRow.length - 1) + '\n';
+    }
+    var extension = '';
+    if (delimiter === '\t') {
+      extension = 'tsv';
+    } else if (delimiter === ',') {
+      extension = 'csv';
+    }
+    saveAsService.saveAs(dsv, exportedFileName, extension);
+  };
 
-    $scope.getBase64ImageSrc = function(base64Data) {
-      return 'data:image/png;base64,' + base64Data;
-    };
+  $scope.getBase64ImageSrc = function(base64Data) {
+    return 'data:image/png;base64,' + base64Data;
+  };
 
-    // Helium ----------------
-    var ANGULAR_FUNCTION_OBJECT_NAME_PREFIX = '_Z_ANGULAR_FUNC_';
+  // Helium ----------------
+  var ANGULAR_FUNCTION_OBJECT_NAME_PREFIX = '_Z_ANGULAR_FUNC_';
 
-    // app states
-    $scope.apps = [];
+  // app states
+  $scope.apps = [];
 
-    // suggested apps
-    $scope.suggestion = {};
+  // suggested apps
+  $scope.suggestion = {};
 
-    $scope.switchApp = function(appId) {
-      var newConfig = angular.copy($scope.config);
-      var newParams = angular.copy(paragraph.settings.params);
+  $scope.switchApp = function(appId) {
+    var newConfig = angular.copy($scope.config);
+    var newParams = angular.copy(paragraph.settings.params);
 
-      // 'helium.activeApp' can be cleared by switchViz()
-      _.set(newConfig, 'helium.activeApp', appId);
+    // 'helium.activeApp' can be cleared by switchViz()
+    _.set(newConfig, 'helium.activeApp', appId);
 
-      commitConfig(newConfig, newParams);
-    };
+    commitConfig(newConfig, newParams);
+  };
 
-    $scope.loadApp = function(heliumPackage) {
-      var noteId = $route.current.pathParams.noteId;
-      $http.post(baseUrlSrv.getRestApiBase() + '/helium/load/' + noteId + '/' + paragraph.id, heliumPackage)
-        .success(function(data, status, headers, config) {
-          console.log('Load app %o', data);
-        })
-        .error(function(err, status, headers, config) {
-          console.log('Error %o', err);
-        });
-    };
+  $scope.loadApp = function(heliumPackage) {
+    var noteId = $route.current.pathParams.noteId;
+    $http.post(baseUrlSrv.getRestApiBase() + '/helium/load/' + noteId + '/' + paragraph.id, heliumPackage)
+      .success(function(data, status, headers, config) {
+        console.log('Load app %o', data);
+      })
+      .error(function(err, status, headers, config) {
+        console.log('Error %o', err);
+      });
+  };
 
-    var commitConfig = function(config, params) {
-      commitParagraphResult(paragraph.title, paragraph.text, config, params);
-    };
+  var commitConfig = function(config, params) {
+    commitParagraphResult(paragraph.title, paragraph.text, config, params);
+  };
 
-    var getApplicationStates = function() {
-      var appStates = [];
-
-      // Display ApplicationState
-      if (paragraph.apps) {
-        _.forEach(paragraph.apps, function(app) {
-          appStates.push({
-            id: app.id,
-            pkg: app.pkg,
-            status: app.status,
-            output: app.output
-          });
+  var getApplicationStates = function() {
+    var appStates = [];
+
+    // Display ApplicationState
+    if (paragraph.apps) {
+      _.forEach(paragraph.apps, function(app) {
+        appStates.push({
+          id: app.id,
+          pkg: app.pkg,
+          status: app.status,
+          output: app.output
         });
+      });
+    }
+
+    // update or remove app states no longer exists
+    _.forEach($scope.apps, function(currentAppState, idx) {
+      var newAppState = _.find(appStates, {id: currentAppState.id});
+      if (newAppState) {
+        angular.extend($scope.apps[idx], newAppState);
+      } else {
+        $scope.apps.splice(idx, 1);
       }
+    });
 
-      // update or remove app states no longer exists
-      _.forEach($scope.apps, function(currentAppState, idx) {
-        var newAppState = _.find(appStates, {id: currentAppState.id});
-        if (newAppState) {
-          angular.extend($scope.apps[idx], newAppState);
-        } else {
-          $scope.apps.splice(idx, 1);
-        }
+    // add new app states
+    _.forEach(appStates, function(app, idx) {
+      if ($scope.apps.length <= idx || $scope.apps[idx].id !== app.id) {
+        $scope.apps.splice(idx, 0, app);
+      }
+    });
+  };
+
+  var getSuggestions = function() {
+    // Get suggested apps
+    var noteId = $route.current.pathParams.noteId;
+    $http.get(baseUrlSrv.getRestApiBase() + '/helium/suggest/' + noteId + '/' + paragraph.id)
+      .success(function(data, status, headers, config) {
+        $scope.suggestion = data.body;
+      })
+      .error(function(err, status, headers, config) {
+        console.log('Error %o', err);
       });
+  };
 
-      // add new app states
-      _.forEach(appStates, function(app, idx) {
-        if ($scope.apps.length <= idx || $scope.apps[idx].id !== app.id) {
-          $scope.apps.splice(idx, 0, app);
+  var renderApp = function(appState) {
+    var retryRenderer = function() {
+      var targetEl = angular.element(document.getElementById('p' + appState.id));
+      console.log('retry renderApp %o', targetEl);
+      if (targetEl.length) {
+        try {
+          console.log('renderApp %o', appState);
+          targetEl.html(appState.output);
+          $compile(targetEl.contents())(getAppScope(appState));
+        } catch (err) {
+          console.log('App rendering error %o', err);
         }
-      });
+      } else {
+        $timeout(retryRenderer, 1000);
+      }
     };
+    $timeout(retryRenderer);
+  };
 
-    var getSuggestions = function() {
-      // Get suggested apps
-      var noteId = $route.current.pathParams.noteId;
-      $http.get(baseUrlSrv.getRestApiBase() + '/helium/suggest/' + noteId + '/' + paragraph.id)
-        .success(function(data, status, headers, config) {
-          $scope.suggestion = data.body;
-        })
-        .error(function(err, status, headers, config) {
-          console.log('Error %o', err);
-        });
-    };
+  /*
+   ** $scope.$on functions below
+   */
+  $scope.$on('appendAppOutput', function(event, data) {
+    if (paragraph.id === data.paragraphId) {
+      var app = _.find($scope.apps, {id: data.appId});
+      if (app) {
+        app.output += data.data;
 
-    var renderApp = function(appState) {
-      var retryRenderer = function() {
-        var targetEl = angular.element(document.getElementById('p' + appState.id));
-        console.log('retry renderApp %o', targetEl);
-        if (targetEl.length) {
-          try {
-            console.log('renderApp %o', appState);
-            targetEl.html(appState.output);
-            $compile(targetEl.contents())(getAppScope(appState));
-          } catch (err) {
-            console.log('App rendering error %o', err);
-          }
-        } else {
-          $timeout(retryRenderer, 1000);
-        }
-      };
-      $timeout(retryRenderer);
-    };
+        var paragraphAppState = _.find(paragraph.apps, {id: data.appId});
+        paragraphAppState.output = app.output;
 
-    /*
-    ** $scope.$on functions below
-    */
-    $scope.$on('appendAppOutput', function(event, data) {
-      if (paragraph.id === data.paragraphId) {
-        var app = _.find($scope.apps, {id: data.appId});
-        if (app) {
-          app.output += data.data;
-
-          var paragraphAppState = _.find(paragraph.apps, {id: data.appId});
-          paragraphAppState.output = app.output;
-
-          var targetEl = angular.element(document.getElementById('p' + app.id));
-          targetEl.html(app.output);
-          $compile(targetEl.contents())(getAppScope(app));
-          console.log('append app output %o', $scope.apps);
-        }
+        var targetEl = angular.element(document.getElementById('p' + app.id));
+        targetEl.html(app.output);
+        $compile(targetEl.contents())(getAppScope(app));
+        console.log('append app output %o', $scope.apps);
       }
-    });
+    }
+  });
 
-    $scope.$on('updateAppOutput', function(event, data) {
-      if (paragraph.id === data.paragraphId) {
-        var app = _.find($scope.apps, {id: data.appId});
-        if (app) {
-          app.output = data.data;
+  $scope.$on('updateAppOutput', function(event, data) {
+    if (paragraph.id === data.paragraphId) {
+      var app = _.find($scope.apps, {id: data.appId});
+      if (app) {
+        app.output = data.data;
 
-          var paragraphAppState = _.find(paragraph.apps, {id: data.appId});
-          paragraphAppState.output = app.output;
+        var paragraphAppState = _.find(paragraph.apps, {id: data.appId});
+        paragraphAppState.output = app.output;
 
-          var targetEl = angular.element(document.getElementById('p' + app.id));
-          targetEl.html(app.output);
-          $compile(targetEl.contents())(getAppScope(app));
-          console.log('append app output');
-        }
+        var targetEl = angular.element(document.getElementById('p' + app.id));
+        targetEl.html(app.output);
+        $compile(targetEl.contents())(getAppScope(app));
+        console.log('append app output');
       }
-    });
-
-    $scope.$on('appLoad', function(event, data) {
-      if (paragraph.id === data.paragraphId) {
-        var app = _.find($scope.apps, {id: data.appId});
-        if (!app) {
-          app = {
-            id: data.appId,
-            pkg: data.pkg,
-            status: 'UNLOADED',
-            output: ''
-          };
-
-          $scope.apps.push(app);
-          paragraph.apps.push(app);
-          $scope.switchApp(app.id);
-        }
+    }
+  });
+
+  $scope.$on('appLoad', function(event, data) {
+    if (paragraph.id === data.paragraphId) {
+      var app = _.find($scope.apps, {id: data.appId});
+      if (!app) {
+        app = {
+          id: data.appId,
+          pkg: data.pkg,
+          status: 'UNLOADED',
+          output: ''
+        };
+
+        $scope.apps.push(app);
+        paragraph.apps.push(app);
+        $scope.switchApp(app.id);
       }
-    });
+    }
+  });
 
-    $scope.$on('appStatusChange', function(event, data) {
-      if (paragraph.id === data.paragraphId) {
-        var app = _.find($scope.apps, {id: data.appId});
-        if (app) {
-          app.status = data.status;
-          var paragraphAppState = _.find(paragraph.apps, {id: data.appId});
-          paragraphAppState.status = app.status;
-        }
+  $scope.$on('appStatusChange', function(event, data) {
+    if (paragraph.id === data.paragraphId) {
+      var app = _.find($scope.apps, {id: data.appId});
+      if (app) {
+        app.status = data.status;
+        var paragraphAppState = _.find(paragraph.apps, {id: data.appId});
+        paragraphAppState.status = app.status;
       }
-    });
+    }
+  });
 
-    var getAppRegistry = function(appState) {
-      if (!appState.registry) {
-        appState.registry = {};
-      }
+  var getAppRegistry = function(appState) {
+    if (!appState.registry) {
+      appState.registry = {};
+    }
 
-      return appState.registry;
-    };
+    return appState.registry;
+  };
 
-    var getAppScope = function(appState) {
-      if (!appState.scope) {
-        appState.scope = $rootScope.$new(true, $rootScope);
-      }
-      return appState.scope;
-    };
+  var getAppScope = function(appState) {
+    if (!appState.scope) {
+      appState.scope = $rootScope.$new(true, $rootScope);
+    }
+    return appState.scope;
+  };
 
-    $scope.$on('angularObjectUpdate', function(event, data) {
-      var noteId = $route.current.pathParams.noteId;
-      if (!data.noteId || data.noteId === noteId) {
-        var scope;
-        var registry;
+  $scope.$on('angularObjectUpdate', function(event, data) {
+    var noteId = $route.current.pathParams.noteId;
+    if (!data.noteId || data.noteId === noteId) {
+      var scope;
+      var registry;
 
-        var app = _.find($scope.apps, {id: data.paragraphId});
-        if (app) {
-          scope = getAppScope(app);
-          registry = getAppRegistry(app);
-        } else {
-          // no matching app in this paragraph
-          return;
-        }
+      var app = _.find($scope.apps, {id: data.paragraphId});
+      if (app) {
+        scope = getAppScope(app);
+        registry = getAppRegistry(app);
+      } else {
+        // no matching app in this paragraph
+        return;
+      }
 
-        var varName = data.angularObject.name;
+      var varName = data.angularObject.name;
 
-        if (angular.equals(data.angularObject.object, scope[varName])) {
-          // return when update has no change
-          return;
-        }
+      if (angular.equals(data.angularObject.object, scope[varName])) {
+        // return when update has no change
+        return;
+      }
 
-        if (!registry[varName]) {
-          registry[varName] = {
-            interpreterGroupId: data.interpreterGroupId,
-            noteId: data.noteId,
-            paragraphId: data.paragraphId
-          };
-        } else {
-          registry[varName].noteId = registry[varName].noteId || data.noteId;
-          registry[varName].paragraphId = registry[varName].paragraphId || data.paragraphId;
-        }
+      if (!registry[varName]) {
+        registry[varName] = {
+          interpreterGroupId: data.interpreterGroupId,
+          noteId: data.noteId,
+          paragraphId: data.paragraphId
+        };
+      } else {
+        registry[varName].noteId = registry[varName].noteId || data.noteId;
+        registry[varName].paragraphId = registry[varName].paragraphId || data.paragraphId;
+      }
 
-        registry[varName].skipEmit = true;
+      registry[varName].skipEmit = true;
 
-        if (!registry[varName].clearWatcher) {
-          registry[varName].clearWatcher = scope.$watch(varName, function(newValue, oldValue) {
-            console.log('angular object (paragraph) updated %o %o', varName, registry[varName]);
-            if (registry[varName].skipEmit) {
-              registry[varName].skipEmit = false;
-              return;
-            }
-            websocketMsgSrv.updateAngularObject(
-              registry[varName].noteId,
-              registry[varName].paragraphId,
-              varName,
-              newValue,
-              registry[varName].interpreterGroupId);
-          });
-        }
-        console.log('angular object (paragraph) created %o', varName);
-        scope[varName] = data.angularObject.object;
-
-        // create proxy for AngularFunction
-        if (varName.indexOf(ANGULAR_FUNCTION_OBJECT_NAME_PREFIX) === 0) {
-          var funcName = varName.substring((ANGULAR_FUNCTION_OBJECT_NAME_PREFIX).length);
-          scope[funcName] = function() {
-            scope[varName] = arguments;
-            console.log('angular function (paragraph) invoked %o', arguments);
-          };
-
-          console.log('angular function (paragraph) created %o', scope[funcName]);
-        }
+      if (!registry[varName].clearWatcher) {
+        registry[varName].clearWatcher = scope.$watch(varName, function(newValue, oldValue) {
+          console.log('angular object (paragraph) updated %o %o', varName, registry[varName]);
+          if (registry[varName].skipEmit) {
+            registry[varName].skipEmit = false;
+            return;
+          }
+          websocketMsgSrv.updateAngularObject(
+            registry[varName].noteId,
+            registry[varName].paragraphId,
+            varName,
+            newValue,
+            registry[varName].interpreterGroupId);
+        });
       }
-    });
+      console.log('angular object (paragraph) created %o', varName);
+      scope[varName] = data.angularObject.object;
 
-    $scope.$on('angularObjectRemove', function(event, data) {
-      var noteId = $route.current.pathParams.noteId;
-      if (!data.noteId || data.noteId === noteId) {
-        var scope;
-        var registry;
+      // create proxy for AngularFunction
+      if (varName.indexOf(ANGULAR_FUNCTION_OBJECT_NAME_PREFIX) === 0) {
+        var funcName = varName.substring((ANGULAR_FUNCTION_OBJECT_NAME_PREFIX).length);
+        scope[funcName] = function() {
+          scope[varName] = arguments;
+          console.log('angular function (paragraph) invoked %o', arguments);
+        };
 
-        var app = _.find($scope.apps, {id: data.paragraphId});
-        if (app) {
-          scope = getAppScope(app);
-          registry = getAppRegistry(app);
-        } else {
-          // no matching app in this paragraph
-          return;
-        }
+        console.log('angular function (paragraph) created %o', scope[funcName]);
+      }
+    }
+  });
+
+  $scope.$on('angularObjectRemove', function(event, data) {
+    var noteId = $route.current.pathParams.noteId;
+    if (!data.noteId || data.noteId === noteId) {
+      var scope;
+      var registry;
+
+      var app = _.find($scope.apps, {id: data.paragraphId});
+      if (app) {
+        scope = getAppScope(app);
+        registry = getAppRegistry(app);
+      } else {
+        // no matching app in this paragraph
+        return;
+      }
 
-        var varName = data.name;
+      var varName = data.name;
 
-        // clear watcher
-        if (registry[varName]) {
-          registry[varName].clearWatcher();
-          registry[varName] = undefined;
-        }
+      // clear watcher
+      if (registry[varName]) {
+        registry[varName].clearWatcher();
+        registry[varName] = undefined;
+      }
 
-        // remove scope variable
-        scope[varName] = undefined;
+      // remove scope variable
+      scope[varName] = undefined;
 
-        // remove proxy for AngularFunction
-        if (varName.indexOf(ANGULAR_FUNCTION_OBJECT_NAME_PREFIX) === 0) {
-          var funcName = varName.substring((ANGULAR_FUNCTION_OBJECT_NAME_PREFIX).length);
-          scope[funcName] = undefined;
-        }
+      // remove proxy for AngularFunction
+      if (varName.indexOf(ANGULAR_FUNCTION_OBJECT_NAME_PREFIX) === 0) {
+        var funcName = varName.substring((ANGULAR_FUNCTION_OBJECT_NAME_PREFIX).length);
+        scope[funcName] = undefined;
       }
-    });
-  };
-})();
+    }
+  });
+};

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/4c60b27c/zeppelin-web/src/app/notebookRepos/notebookRepos.controller.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebookRepos/notebookRepos.controller.js b/zeppelin-web/src/app/notebookRepos/notebookRepos.controller.js
index 7106527..3d82206 100644
--- a/zeppelin-web/src/app/notebookRepos/notebookRepos.controller.js
+++ b/zeppelin-web/src/app/notebookRepos/notebookRepos.controller.js
@@ -11,80 +11,78 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-(function() {
 
-  angular.module('zeppelinWebApp').controller('NotebookReposCtrl', NotebookReposCtrl);
+angular.module('zeppelinWebApp').controller('NotebookReposCtrl', NotebookReposCtrl);
 
-  NotebookReposCtrl.$inject = ['$http', 'baseUrlSrv', 'ngToast'];
+NotebookReposCtrl.$inject = ['$http', 'baseUrlSrv', 'ngToast'];
 
-  function NotebookReposCtrl($http, baseUrlSrv, ngToast) {
-    var vm = this;
-    vm.notebookRepos = [];
-    vm.showDropdownSelected = showDropdownSelected;
-    vm.saveNotebookRepo = saveNotebookRepo;
+function NotebookReposCtrl($http, baseUrlSrv, ngToast) {
+  var vm = this;
+  vm.notebookRepos = [];
+  vm.showDropdownSelected = showDropdownSelected;
+  vm.saveNotebookRepo = saveNotebookRepo;
 
-    _init();
+  _init();
 
-    // Public functions
+  // Public functions
 
-    function saveNotebookRepo(valueform, repo, data) {
-      console.log('data %o', data);
-      $http.put(baseUrlSrv.getRestApiBase() + '/notebook-repositories', {
-        'name': repo.className,
-        'settings': data
-      }).success(function(data) {
-        var index = _.findIndex(vm.notebookRepos, {'className': repo.className});
-        if (index >= 0) {
-          vm.notebookRepos[index] = data.body;
-          console.log('repos %o, data %o', vm.notebookRepos, data.body);
-        }
-        valueform.$show();
-      }).error(function() {
-        ngToast.danger({
-          content: 'We couldn\'t save that NotebookRepo\'s settings',
-          verticalPosition: 'bottom',
-          timeout: '3000'
-        });
-        valueform.$show();
+  function saveNotebookRepo(valueform, repo, data) {
+    console.log('data %o', data);
+    $http.put(baseUrlSrv.getRestApiBase() + '/notebook-repositories', {
+      'name': repo.className,
+      'settings': data
+    }).success(function(data) {
+      var index = _.findIndex(vm.notebookRepos, {'className': repo.className});
+      if (index >= 0) {
+        vm.notebookRepos[index] = data.body;
+        console.log('repos %o, data %o', vm.notebookRepos, data.body);
+      }
+      valueform.$show();
+    }).error(function() {
+      ngToast.danger({
+        content: 'We couldn\'t save that NotebookRepo\'s settings',
+        verticalPosition: 'bottom',
+        timeout: '3000'
       });
+      valueform.$show();
+    });
 
-      return 'manual';
-    }
+    return 'manual';
+  }
 
-    function showDropdownSelected(setting) {
-      var index = _.findIndex(setting.value, {'value': setting.selected});
-      if (index < 0) {
-        return 'No value';
-      } else {
-        return setting.value[index].name;
-      }
+  function showDropdownSelected(setting) {
+    var index = _.findIndex(setting.value, {'value': setting.selected});
+    if (index < 0) {
+      return 'No value';
+    } else {
+      return setting.value[index].name;
     }
+  }
 
-    // Private functions
+  // Private functions
 
-    function _getInterpreterSettings() {
-      $http.get(baseUrlSrv.getRestApiBase() + '/notebook-repositories')
+  function _getInterpreterSettings() {
+    $http.get(baseUrlSrv.getRestApiBase() + '/notebook-repositories')
       .success(function(data, status, headers, config) {
         vm.notebookRepos = data.body;
         console.log('ya notebookRepos %o', vm.notebookRepos);
       }).error(function(data, status, headers, config) {
-        if (status === 401) {
-          ngToast.danger({
-            content: 'You don\'t have permission on this page',
-            verticalPosition: 'bottom',
-            timeout: '3000'
-          });
-          setTimeout(function() {
-            window.location.replace('/');
-          }, 3000);
-        }
-        console.log('Error %o %o', status, data.message);
-      });
-    }
-
-    function _init() {
-      _getInterpreterSettings();
-    };
+      if (status === 401) {
+        ngToast.danger({
+          content: 'You don\'t have permission on this page',
+          verticalPosition: 'bottom',
+          timeout: '3000'
+        });
+        setTimeout(function() {
+          window.location.replace('/');
+        }, 3000);
+      }
+      console.log('Error %o %o', status, data.message);
+    });
   }
 
-})();
+  function _init() {
+    _getInterpreterSettings();
+  };
+}
+

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/4c60b27c/zeppelin-web/src/app/search/result-list.controller.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/search/result-list.controller.js b/zeppelin-web/src/app/search/result-list.controller.js
index 3d81fab..30c8325 100644
--- a/zeppelin-web/src/app/search/result-list.controller.js
+++ b/zeppelin-web/src/app/search/result-list.controller.js
@@ -11,148 +11,146 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-(function() {
 
-  angular.module('zeppelinWebApp').controller('SearchResultCtrl', SearchResultCtrl);
+angular.module('zeppelinWebApp').controller('SearchResultCtrl', SearchResultCtrl);
 
-  SearchResultCtrl.$inject = ['$scope', '$routeParams', 'searchService'];
+SearchResultCtrl.$inject = ['$scope', '$routeParams', 'searchService'];
 
-  function SearchResultCtrl($scope, $routeParams, searchService) {
-    $scope.isResult = true ;
-    $scope.searchTerm = $routeParams.searchTerm;
-    var results = searchService.search({'q': $routeParams.searchTerm}).query();
-
-    results.$promise.then(function(result) {
-      $scope.notes = result.body.map(function(note) {
-        // redirect to notebook when search result is a notebook itself,
-        // not a paragraph
-        if (!/\/paragraph\//.test(note.id)) {
-          return note;
-        }
-
-        note.id = note.id.replace('paragraph/', '?paragraph=') +
-          '&term=' + $routeParams.searchTerm;
+function SearchResultCtrl($scope, $routeParams, searchService) {
+  $scope.isResult = true ;
+  $scope.searchTerm = $routeParams.searchTerm;
+  var results = searchService.search({'q': $routeParams.searchTerm}).query();
 
+  results.$promise.then(function(result) {
+    $scope.notes = result.body.map(function(note) {
+      // redirect to notebook when search result is a notebook itself,
+      // not a paragraph
+      if (!/\/paragraph\//.test(note.id)) {
         return note;
-      });
-      if ($scope.notes.length === 0) {
-        $scope.isResult = false;
-      } else {
-        $scope.isResult = true;
       }
 
-      $scope.$on('$routeChangeStart', function(event, next, current) {
-        if (next.originalPath !== '/search/:searchTerm') {
-          searchService.searchTerm = '';
-        }
-      });
+      note.id = note.id.replace('paragraph/', '?paragraph=') +
+        '&term=' + $routeParams.searchTerm;
+
+      return note;
     });
+    if ($scope.notes.length === 0) {
+      $scope.isResult = false;
+    } else {
+      $scope.isResult = true;
+    }
+
+    $scope.$on('$routeChangeStart', function(event, next, current) {
+      if (next.originalPath !== '/search/:searchTerm') {
+        searchService.searchTerm = '';
+      }
+    });
+  });
+
+  $scope.page = 0;
+  $scope.allResults = false;
+
+  $scope.highlightSearchResults = function(note) {
+    return function(_editor) {
+      function getEditorMode(text) {
+        var editorModes = {
+          'ace/mode/scala': /^%(\w*\.)?spark/,
+          'ace/mode/python': /^%(\w*\.)?(pyspark|python)/,
+          'ace/mode/r': /^%(\w*\.)?(r|sparkr|knitr)/,
+          'ace/mode/sql': /^%(\w*\.)?\wql/,
+          'ace/mode/markdown': /^%md/,
+          'ace/mode/sh': /^%sh/
+        };
+
+        return Object.keys(editorModes).reduce(function(res, mode) {
+          return editorModes[mode].test(text) ? mode : res;
+        }, 'ace/mode/scala');
+      }
 
-    $scope.page = 0;
-    $scope.allResults = false;
-
-    $scope.highlightSearchResults = function(note) {
-      return function(_editor) {
-        function getEditorMode(text) {
-          var editorModes = {
-            'ace/mode/scala': /^%(\w*\.)?spark/,
-            'ace/mode/python': /^%(\w*\.)?(pyspark|python)/,
-            'ace/mode/r': /^%(\w*\.)?(r|sparkr|knitr)/,
-            'ace/mode/sql': /^%(\w*\.)?\wql/,
-            'ace/mode/markdown': /^%md/,
-            'ace/mode/sh': /^%sh/
-          };
-
-          return Object.keys(editorModes).reduce(function(res, mode) {
-            return editorModes[mode].test(text) ? mode : res;
-          }, 'ace/mode/scala');
-        }
-
-        var Range = ace.require('ace/range').Range;
-
-        _editor.setOption('highlightActiveLine', false);
-        _editor.$blockScrolling = Infinity;
-        _editor.setReadOnly(true);
-        _editor.renderer.setShowGutter(false);
-        _editor.setTheme('ace/theme/chrome');
-        _editor.getSession().setMode(getEditorMode(note.text));
-
-        function getIndeces(term) {
-          return function(str) {
-            var indeces = [];
-            var i = -1;
-            while ((i = str.indexOf(term, i + 1)) >= 0) {
-              indeces.push(i);
-            }
-            return indeces;
-          };
-        }
-
-        var result = '';
-        if (note.header !== '') {
-          result = note.header + '\n\n' + note.snippet;
-        } else {
-          result = note.snippet;
-        }
-
-        var lines = result
-          .split('\n')
-          .map(function(line, row) {
-
-            var match = line.match(/<B>(.+?)<\/B>/);
-
-            // return early if nothing to highlight
-            if (!match) {
-              return line;
-            }
+      var Range = ace.require('ace/range').Range;
+
+      _editor.setOption('highlightActiveLine', false);
+      _editor.$blockScrolling = Infinity;
+      _editor.setReadOnly(true);
+      _editor.renderer.setShowGutter(false);
+      _editor.setTheme('ace/theme/chrome');
+      _editor.getSession().setMode(getEditorMode(note.text));
+
+      function getIndeces(term) {
+        return function(str) {
+          var indeces = [];
+          var i = -1;
+          while ((i = str.indexOf(term, i + 1)) >= 0) {
+            indeces.push(i);
+          }
+          return indeces;
+        };
+      }
 
-            var term = match[1];
-            var __line = line
-              .replace(/<B>/g, '')
-              .replace(/<\/B>/g, '');
-
-            var indeces = getIndeces(term)(__line);
-
-            indeces.forEach(function(start) {
-              var end = start + term.length;
-              if (note.header !== '' && row === 0) {
-                _editor
-                  .getSession()
-                  .addMarker(
-                    new Range(row, 0, row, line.length),
-                    'search-results-highlight-header',
-                    'background'
-                  );
-                _editor
-                  .getSession()
-                  .addMarker(
-                    new Range(row, start, row, end),
-                    'search-results-highlight',
-                    'line'
-                  );
-              } else {
-                _editor
-                  .getSession()
-                  .addMarker(
-                    new Range(row, start, row, end),
-                    'search-results-highlight',
-                    'line'
-                  );
-              }
-            });
-            return __line;
+      var result = '';
+      if (note.header !== '') {
+        result = note.header + '\n\n' + note.snippet;
+      } else {
+        result = note.snippet;
+      }
+
+      var lines = result
+        .split('\n')
+        .map(function(line, row) {
+
+          var match = line.match(/<B>(.+?)<\/B>/);
+
+          // return early if nothing to highlight
+          if (!match) {
+            return line;
+          }
+
+          var term = match[1];
+          var __line = line
+            .replace(/<B>/g, '')
+            .replace(/<\/B>/g, '');
+
+          var indeces = getIndeces(term)(__line);
+
+          indeces.forEach(function(start) {
+            var end = start + term.length;
+            if (note.header !== '' && row === 0) {
+              _editor
+                .getSession()
+                .addMarker(
+                  new Range(row, 0, row, line.length),
+                  'search-results-highlight-header',
+                  'background'
+                );
+              _editor
+                .getSession()
+                .addMarker(
+                  new Range(row, start, row, end),
+                  'search-results-highlight',
+                  'line'
+                );
+            } else {
+              _editor
+                .getSession()
+                .addMarker(
+                  new Range(row, start, row, end),
+                  'search-results-highlight',
+                  'line'
+                );
+            }
           });
+          return __line;
+        });
 
-        // resize editor based on content length
-        _editor.setOption(
-          'maxLines',
-          lines.reduce(function(len, line) {return len + line.length;}, 0)
-        );
+      // resize editor based on content length
+      _editor.setOption(
+        'maxLines',
+        lines.reduce(function(len, line) {return len + line.length;}, 0)
+      );
 
-        _editor.getSession().setValue(lines.join('\n'));
+      _editor.getSession().setValue(lines.join('\n'));
 
-      };
     };
-  }
+  };
+}
 
-})();

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/4c60b27c/zeppelin-web/src/components/arrayOrderingSrv/arrayOrdering.service.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/arrayOrderingSrv/arrayOrdering.service.js b/zeppelin-web/src/components/arrayOrderingSrv/arrayOrdering.service.js
index 6f89ebb..7b9d41a 100644
--- a/zeppelin-web/src/components/arrayOrderingSrv/arrayOrdering.service.js
+++ b/zeppelin-web/src/components/arrayOrderingSrv/arrayOrdering.service.js
@@ -11,29 +11,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-(function() {
 
-  angular.module('zeppelinWebApp').service('arrayOrderingSrv', arrayOrderingSrv);
+angular.module('zeppelinWebApp').service('arrayOrderingSrv', arrayOrderingSrv);
 
-  arrayOrderingSrv.$inject = ['TRASH_FOLDER_ID'];
+arrayOrderingSrv.$inject = ['TRASH_FOLDER_ID'];
 
-  function arrayOrderingSrv(TRASH_FOLDER_ID) {
-    var arrayOrderingSrv = this;
+function arrayOrderingSrv(TRASH_FOLDER_ID) {
+  var arrayOrderingSrv = this;
 
-    this.noteListOrdering = function(note) {
-      if (note.id === TRASH_FOLDER_ID) {
-        return '\uFFFF';
-      }
-      return arrayOrderingSrv.getNoteName(note);
-    };
+  this.noteListOrdering = function(note) {
+    if (note.id === TRASH_FOLDER_ID) {
+      return '\uFFFF';
+    }
+    return arrayOrderingSrv.getNoteName(note);
+  };
 
-    this.getNoteName = function(note) {
-      if (note.name === undefined || note.name.trim() === '') {
-        return 'Note ' + note.id;
-      } else {
-        return note.name;
-      }
-    };
-  }
+  this.getNoteName = function(note) {
+    if (note.name === undefined || note.name.trim() === '') {
+      return 'Note ' + note.id;
+    } else {
+      return note.name;
+    }
+  };
+}
 
-})();

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/4c60b27c/zeppelin-web/src/components/baseUrl/baseUrl.service.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/baseUrl/baseUrl.service.js b/zeppelin-web/src/components/baseUrl/baseUrl.service.js
index 465b327..ff5e11b 100644
--- a/zeppelin-web/src/components/baseUrl/baseUrl.service.js
+++ b/zeppelin-web/src/components/baseUrl/baseUrl.service.js
@@ -11,41 +11,39 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-(function() {
 
-  angular.module('zeppelinWebApp').service('baseUrlSrv', baseUrlSrv);
+angular.module('zeppelinWebApp').service('baseUrlSrv', baseUrlSrv);
 
-  function baseUrlSrv() {
-    this.getPort = function() {
-      var port = Number(location.port);
-      if (!port) {
-        port = 80;
-        if (location.protocol === 'https:') {
-          port = 443;
-        }
+function baseUrlSrv() {
+  this.getPort = function() {
+    var port = Number(location.port);
+    if (!port) {
+      port = 80;
+      if (location.protocol === 'https:') {
+        port = 443;
       }
-      //Exception for when running locally via grunt
-      if (port === 3333 || port === 9000) {
-        port = 8080;
-      }
-      return port;
-    };
+    }
+    //Exception for when running locally via grunt
+    if (port === 3333 || port === 9000) {
+      port = 8080;
+    }
+    return port;
+  };
 
-    this.getWebsocketUrl = function() {
-      var wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
-      return wsProtocol + '//' + location.hostname + ':' + this.getPort() +
+  this.getWebsocketUrl = function() {
+    var wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    return wsProtocol + '//' + location.hostname + ':' + this.getPort() +
       skipTrailingSlash(location.pathname) + '/ws';
-    };
+  };
 
-    this.getRestApiBase = function() {
-      return location.protocol + '//' + location.hostname + ':' +
+  this.getRestApiBase = function() {
+    return location.protocol + '//' + location.hostname + ':' +
       this.getPort() + skipTrailingSlash(location.pathname) +
-        '/api';
-    };
+      '/api';
+  };
 
-    var skipTrailingSlash = function(path) {
-      return path.replace(/\/$/, '');
-    };
-  }
+  var skipTrailingSlash = function(path) {
+    return path.replace(/\/$/, '');
+  };
+}
 
-})();

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/4c60b27c/zeppelin-web/src/components/browser-detect/browserDetect.service.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/browser-detect/browserDetect.service.js b/zeppelin-web/src/components/browser-detect/browserDetect.service.js
index 9e84616..2fda717 100644
--- a/zeppelin-web/src/components/browser-detect/browserDetect.service.js
+++ b/zeppelin-web/src/components/browser-detect/browserDetect.service.js
@@ -11,32 +11,30 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-(function() {
 
-  angular.module('zeppelinWebApp').service('browserDetectService', browserDetectService);
+angular.module('zeppelinWebApp').service('browserDetectService', browserDetectService);
 
-  function browserDetectService() {
-    this.detectIE = function() {
-      var ua = window.navigator.userAgent;
-      var msie = ua.indexOf('MSIE ');
-      if (msie > 0) {
-        // IE 10 or older => return version number
-        return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
-      }
-      var trident = ua.indexOf('Trident/');
-      if (trident > 0) {
-        // IE 11 => return version number
-        var rv = ua.indexOf('rv:');
-        return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
-      }
-      var edge = ua.indexOf('Edge/');
-      if (edge > 0) {
-        // IE 12 (aka Edge) => return version number
-        return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
-      }
-      // other browser
-      return false;
-    };
-  }
+function browserDetectService() {
+  this.detectIE = function() {
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf('MSIE ');
+    if (msie > 0) {
+      // IE 10 or older => return version number
+      return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
+    }
+    var trident = ua.indexOf('Trident/');
+    if (trident > 0) {
+      // IE 11 => return version number
+      var rv = ua.indexOf('rv:');
+      return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
+    }
+    var edge = ua.indexOf('Edge/');
+    if (edge > 0) {
+      // IE 12 (aka Edge) => return version number
+      return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
+    }
+    // other browser
+    return false;
+  };
+}
 
-})();

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/4c60b27c/zeppelin-web/src/components/clipboard/clipboard.controller.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/clipboard/clipboard.controller.js b/zeppelin-web/src/components/clipboard/clipboard.controller.js
index 804db40..a989920 100644
--- a/zeppelin-web/src/components/clipboard/clipboard.controller.js
+++ b/zeppelin-web/src/components/clipboard/clipboard.controller.js
@@ -11,25 +11,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-(function() {
-  angular.module('zeppelinWebApp').controller('clipboardCtrl', clipboardCtrl);
-  clipboardCtrl.$inject = ['$scope'];
+angular.module('zeppelinWebApp').controller('clipboardCtrl', clipboardCtrl);
+clipboardCtrl.$inject = ['$scope'];
 
-  function clipboardCtrl($scope) {
-    $scope.complete = function(e) {
-      $scope.copied = true;
-      $scope.tooltip = 'Copied!';
-      setTimeout(function() {
-        $scope.tooltip = 'Copy to clipboard';
-      }, 400);
-    };
-    $scope.$watch('input', function() {
-      $scope.copied = false;
+function clipboardCtrl($scope) {
+  $scope.complete = function(e) {
+    $scope.copied = true;
+    $scope.tooltip = 'Copied!';
+    setTimeout(function() {
       $scope.tooltip = 'Copy to clipboard';
-    });
-    $scope.clipError = function(e) {
-      console.log('Error: ' + e.name + ' - ' + e.message);
-      $scope.tooltip = 'Not supported browser';
-    };
-  }
-})();
+    }, 400);
+  };
+  $scope.$watch('input', function() {
+    $scope.copied = false;
+    $scope.tooltip = 'Copy to clipboard';
+  });
+  $scope.clipError = function(e) {
+    console.log('Error: ' + e.name + ' - ' + e.message);
+    $scope.tooltip = 'Not supported browser';
+  };
+}

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/4c60b27c/zeppelin-web/src/components/dropdowninput/dropdowninput.directive.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/dropdowninput/dropdowninput.directive.js b/zeppelin-web/src/components/dropdowninput/dropdowninput.directive.js
index ab4b60b..a690aed 100644
--- a/zeppelin-web/src/components/dropdowninput/dropdowninput.directive.js
+++ b/zeppelin-web/src/components/dropdowninput/dropdowninput.directive.js
@@ -11,19 +11,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-(function() {
 
-  angular.module('zeppelinWebApp').directive('dropdownInput', dropdownInput);
+angular.module('zeppelinWebApp').directive('dropdownInput', dropdownInput);
 
-  function dropdownInput() {
-    return {
-      restrict: 'A',
-      link: function(scope, element) {
-        element.bind('click', function(event) {
-          event.stopPropagation();
-        });
-      }
-    };
-  }
+function dropdownInput() {
+  return {
+    restrict: 'A',
+    link: function(scope, element) {
+      element.bind('click', function(event) {
+        event.stopPropagation();
+      });
+    }
+  };
+}
 
-})();

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/4c60b27c/zeppelin-web/src/components/editor/codeEditor.directive.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/editor/codeEditor.directive.js b/zeppelin-web/src/components/editor/codeEditor.directive.js
index 7ad74c6..09ef21f 100644
--- a/zeppelin-web/src/components/editor/codeEditor.directive.js
+++ b/zeppelin-web/src/components/editor/codeEditor.directive.js
@@ -11,31 +11,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-(function() {
 
-  angular.module('zeppelinWebApp').directive('codeEditor', codeEditor);
+angular.module('zeppelinWebApp').directive('codeEditor', codeEditor);
 
-  function codeEditor($templateRequest, $compile) {
-    return {
-      restrict: 'AE',
-      scope: {
-        paragraphId: '=paragraphId',
-        paragraph: '=paragraphContext',
-        dirtyText: '=dirtyText',
-        originalText: '=originalText',
-        onLoad: '=onLoad',
-        revisionView: '=revisionView'
-      },
-      link: function(scope, element, attrs, controller) {
-        $templateRequest('components/editor/ace.editor.directive.html').then(function(editorHtml) {
-          var editor = angular.element(editorHtml);
-          editor.attr('id', scope.paragraphId + '_editor');
-          element.append(editor);
-          $compile(editor)(scope);
-          console.log('codeEditor directive revision view is ' + scope.revisionView);
-        });
-      }
-    };
-  }
+function codeEditor($templateRequest, $compile) {
+  return {
+    restrict: 'AE',
+    scope: {
+      paragraphId: '=paragraphId',
+      paragraph: '=paragraphContext',
+      dirtyText: '=dirtyText',
+      originalText: '=originalText',
+      onLoad: '=onLoad',
+      revisionView: '=revisionView'
+    },
+    link: function(scope, element, attrs, controller) {
+      $templateRequest('components/editor/ace.editor.directive.html').then(function(editorHtml) {
+        var editor = angular.element(editorHtml);
+        editor.attr('id', scope.paragraphId + '_editor');
+        element.append(editor);
+        $compile(editor)(scope);
+        console.log('codeEditor directive revision view is ' + scope.revisionView);
+      });
+    }
+  };
+}
 
-})();

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/4c60b27c/zeppelin-web/src/components/elasticInputCtrl/elasticInput.controller.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/elasticInputCtrl/elasticInput.controller.js b/zeppelin-web/src/components/elasticInputCtrl/elasticInput.controller.js
index d647200..f56c172 100644
--- a/zeppelin-web/src/components/elasticInputCtrl/elasticInput.controller.js
+++ b/zeppelin-web/src/components/elasticInputCtrl/elasticInput.controller.js
@@ -11,14 +11,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-(function() {
 
-  angular.module('zeppelinWebApp').controller('ElasticInputCtrl', ElasticInputCtrl);
+angular.module('zeppelinWebApp').controller('ElasticInputCtrl', ElasticInputCtrl);
 
-  function ElasticInputCtrl() {
-    var vm = this;
-    vm.showEditor = false;
-    vm.value = '';
-  }
+function ElasticInputCtrl() {
+  var vm = this;
+  vm.showEditor = false;
+  vm.value = '';
+}
 
-})();

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/4c60b27c/zeppelin-web/src/components/expandCollapse/expandCollapse.directive.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/expandCollapse/expandCollapse.directive.js b/zeppelin-web/src/components/expandCollapse/expandCollapse.directive.js
index 1230934..1f73f64 100644
--- a/zeppelin-web/src/components/expandCollapse/expandCollapse.directive.js
+++ b/zeppelin-web/src/components/expandCollapse/expandCollapse.directive.js
@@ -11,30 +11,28 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-(function() {
 
-  angular.module('zeppelinWebApp').directive('expandCollapse', expandCollapse);
+angular.module('zeppelinWebApp').directive('expandCollapse', expandCollapse);
 
-  function expandCollapse() {
-    return {
-      restrict: 'EA',
-      link: function(scope, element, attrs) {
-        angular.element(element).click(function(event) {
-          if (angular.element(element).find('.expandable:visible').length > 1) {
-            angular.element(element).find('.expandable:visible').slideUp('slow');
-            angular.element(element).find('i.icon-folder-alt').toggleClass('icon-folder icon-folder-alt');
-          } else {
-            angular.element(element).find('.expandable').first().slideToggle('200',function() {
-              // do not toggle trash folder
-              if (angular.element(element).find('.fa-trash-o').length === 0) {
-                angular.element(element).find('i').first().toggleClass('icon-folder icon-folder-alt');
-              }
-            });
-          }
-          event.stopPropagation();
-        });
-      }
-    };
-  }
+function expandCollapse() {
+  return {
+    restrict: 'EA',
+    link: function(scope, element, attrs) {
+      angular.element(element).click(function(event) {
+        if (angular.element(element).find('.expandable:visible').length > 1) {
+          angular.element(element).find('.expandable:visible').slideUp('slow');
+          angular.element(element).find('i.icon-folder-alt').toggleClass('icon-folder icon-folder-alt');
+        } else {
+          angular.element(element).find('.expandable').first().slideToggle('200',function() {
+            // do not toggle trash folder
+            if (angular.element(element).find('.fa-trash-o').length === 0) {
+              angular.element(element).find('i').first().toggleClass('icon-folder icon-folder-alt');
+            }
+          });
+        }
+        event.stopPropagation();
+      });
+    }
+  };
+}
 
-})();

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/4c60b27c/zeppelin-web/src/components/interpreter/interpreter.directive.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/interpreter/interpreter.directive.js b/zeppelin-web/src/components/interpreter/interpreter.directive.js
index f2c0280..b207e34 100644
--- a/zeppelin-web/src/components/interpreter/interpreter.directive.js
+++ b/zeppelin-web/src/components/interpreter/interpreter.directive.js
@@ -11,24 +11,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-(function() {
 
-  angular.module('zeppelinWebApp').directive('interpreterDirective', interpreterDirective);
+angular.module('zeppelinWebApp').directive('interpreterDirective', interpreterDirective);
 
-  interpreterDirective.$inject = ['$timeout'];
+interpreterDirective.$inject = ['$timeout'];
 
-  function interpreterDirective($timeout) {
-    return {
-      restrict: 'A',
-      link: function(scope, element, attr) {
-        if (scope.$last === true) {
-          $timeout(function() {
-            var id = 'ngRenderFinished';
-            scope.$emit(id);
-          });
-        }
+function interpreterDirective($timeout) {
+  return {
+    restrict: 'A',
+    link: function(scope, element, attr) {
+      if (scope.$last === true) {
+        $timeout(function() {
+          var id = 'ngRenderFinished';
+          scope.$emit(id);
+        });
       }
-    };
-  }
+    }
+  };
+}
 
-})();