You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by pr...@apache.org on 2018/02/23 04:54:47 UTC

[07/12] zeppelin git commit: [ZEPPELIN-3245] checkstyle/eslintrc for zeppelin-web (JavaScript)

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.test.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.test.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.test.js
index 94230de..38d5480 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.test.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.test.js
@@ -1,53 +1,53 @@
-describe('Controller: ParagraphCtrl', function () {
-  beforeEach(angular.mock.module('zeppelinWebApp'))
+describe('Controller: ParagraphCtrl', function() {
+  beforeEach(angular.mock.module('zeppelinWebApp'));
 
-  let scope
-  let websocketMsgSrvMock = {}
+  let scope;
+  let websocketMsgSrvMock = {};
   let paragraphMock = {
     config: {},
     settings: {
-      forms: {}
-    }
-  }
+      forms: {},
+    },
+  };
   let route = {
     current: {
       pathParams: {
-        noteId: 'noteId'
-      }
-    }
-  }
+        noteId: 'noteId',
+      },
+    },
+  };
 
-  beforeEach(inject(function ($controller, $rootScope) {
-    scope = $rootScope.$new()
-    $rootScope.notebookScope = $rootScope.$new(true, $rootScope)
+  beforeEach(inject(function($controller, $rootScope) {
+    scope = $rootScope.$new();
+    $rootScope.notebookScope = $rootScope.$new(true, $rootScope);
 
     $controller('ParagraphCtrl', {
       $scope: scope,
       websocketMsgSrv: websocketMsgSrvMock,
       $element: {},
-      $route: route
-    })
+      $route: route,
+    });
 
-    scope.init(paragraphMock)
-  }))
+    scope.init(paragraphMock);
+  }));
 
   let functions = ['isRunning', 'getIframeDimensions', 'cancelParagraph', 'runParagraph', 'saveParagraph',
     'moveUp', 'moveDown', 'insertNew', 'removeParagraph', 'toggleEditor', 'closeEditor', 'openEditor',
     'closeTable', 'openTable', 'showTitle', 'hideTitle', 'setTitle', 'showLineNumbers', 'hideLineNumbers',
     'changeColWidth', 'columnWidthClass', 'toggleOutput',
-    'aceChanged', 'aceLoaded', 'getEditorValue', 'getProgress', 'getExecutionTime', 'isResultOutdated']
-
-  functions.forEach(function (fn) {
-    it('check for scope functions to be defined : ' + fn, function () {
-      expect(scope[fn]).toBeDefined()
-    })
-  })
-
-  it('should have this array of values for "colWidthOption"', function () {
-    expect(scope.colWidthOption).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12])
-  })
-
-  it('should set default value of "paragraphFocused" as false', function () {
-    expect(scope.paragraphFocused).toEqual(false)
-  })
-})
+    'aceChanged', 'aceLoaded', 'getEditorValue', 'getProgress', 'getExecutionTime', 'isResultOutdated'];
+
+  functions.forEach(function(fn) {
+    it('check for scope functions to be defined : ' + fn, function() {
+      expect(scope[fn]).toBeDefined();
+    });
+  });
+
+  it('should have this array of values for "colWidthOption"', function() {
+    expect(scope.colWidthOption).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
+  });
+
+  it('should set default value of "paragraphFocused" as false', function() {
+    expect(scope.paragraphFocused).toEqual(false);
+  });
+});

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/notebook/paragraph/paragraph.status.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.status.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.status.js
index f839eee..bd70de3 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.status.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.status.js
@@ -19,12 +19,16 @@ export const ParagraphStatus = {
   FINISHED: 'FINISHED',
   ABORT: 'ABORT',
   ERROR: 'ERROR',
-}
+};
 
-export function isParagraphRunning (paragraph) {
-  if (!paragraph) { return false }
-  const status = paragraph.status
-  if (!status) { return false }
+export function isParagraphRunning(paragraph) {
+  if (!paragraph) {
+    return false;
+  }
+  const status = paragraph.status;
+  if (!status) {
+    return false;
+  }
 
-  return status === ParagraphStatus.PENDING || status === ParagraphStatus.RUNNING
+  return status === ParagraphStatus.PENDING || status === ParagraphStatus.RUNNING;
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/notebook/paragraph/resizable.directive.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/paragraph/resizable.directive.js b/zeppelin-web/src/app/notebook/paragraph/resizable.directive.js
index 2893cd5..874f9d8 100644
--- a/zeppelin-web/src/app/notebook/paragraph/resizable.directive.js
+++ b/zeppelin-web/src/app/notebook/paragraph/resizable.directive.js
@@ -12,58 +12,58 @@
  * limitations under the License.
  */
 
-angular.module('zeppelinWebApp').directive('resizable', ResizableDirective)
+angular.module('zeppelinWebApp').directive('resizable', ResizableDirective);
 
-function ResizableDirective () {
+function ResizableDirective() {
   let resizableConfig = {
     autoHide: true,
     handles: 'se',
     helper: 'resizable-helper',
-    stop: function () {
-      angular.element(this).css({'width': '100%', 'height': '100%'})
-    }
-  }
+    stop: function() {
+      angular.element(this).css({'width': '100%', 'height': '100%'});
+    },
+  };
 
   return {
     restrict: 'A',
     scope: {
-      callback: '&onResize'
+      callback: '&onResize',
     },
-    link: function postLink (scope, elem, attrs) {
-      attrs.$observe('resize', function (resize) {
-        let resetResize = function (elem, resize) {
-          let colStep = window.innerWidth / 12
-          elem.off('resizestop')
-          let conf = angular.copy(resizableConfig)
+    link: function postLink(scope, elem, attrs) {
+      attrs.$observe('resize', function(resize) {
+        let resetResize = function(elem, resize) {
+          let colStep = window.innerWidth / 12;
+          elem.off('resizestop');
+          let conf = angular.copy(resizableConfig);
           if (resize.graphType === 'TABLE' || resize.graphType === 'NETWORK' || resize.graphType === 'TEXT') {
-            conf.grid = [colStep, 10]
-            conf.minHeight = 100
+            conf.grid = [colStep, 10];
+            conf.minHeight = 100;
           } else {
-            conf.grid = [colStep, 10000]
-            conf.minHeight = 0
+            conf.grid = [colStep, 10000];
+            conf.minHeight = 0;
           }
-          conf.maxWidth = window.innerWidth
+          conf.maxWidth = window.innerWidth;
 
-          elem.resizable(conf)
-          elem.on('resizestop', function () {
+          elem.resizable(conf);
+          elem.on('resizestop', function() {
             if (scope.callback) {
-              let height = elem.height()
+              let height = elem.height();
               if (height < 50) {
-                height = 300
+                height = 300;
               }
-              scope.callback({width: Math.ceil(elem.width() / colStep), height: height})
+              scope.callback({width: Math.ceil(elem.width() / colStep), height: height});
             }
-          })
-        }
+          });
+        };
 
-        resize = JSON.parse(resize)
+        resize = JSON.parse(resize);
         if (resize.allowresize === 'true') {
-          resetResize(elem, resize)
-          angular.element(window).resize(function () {
-            resetResize(elem, resize)
-          })
+          resetResize(elem, resize);
+          angular.element(window).resize(function() {
+            resetResize(elem, resize);
+          });
         }
-      })
-    }
-  }
+      });
+    },
+  };
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/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 5dfe314..5bf77dc 100644
--- a/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
@@ -12,30 +12,30 @@
  * limitations under the License.
  */
 
-import moment from 'moment'
-
-import DatasetFactory from '../../../tabledata/datasetfactory'
-import TableVisualization from '../../../visualization/builtins/visualization-table'
-import BarchartVisualization from '../../../visualization/builtins/visualization-barchart'
-import PiechartVisualization from '../../../visualization/builtins/visualization-piechart'
-import AreachartVisualization from '../../../visualization/builtins/visualization-areachart'
-import LinechartVisualization from '../../../visualization/builtins/visualization-linechart'
-import ScatterchartVisualization from '../../../visualization/builtins/visualization-scatterchart'
-import NetworkVisualization from '../../../visualization/builtins/visualization-d3network'
-import {DefaultDisplayType, SpellResult} from '../../../spell'
-import {ParagraphStatus} from '../paragraph.status'
-
-const AnsiUp = require('ansi_up')
-const AnsiUpConverter = new AnsiUp.default // eslint-disable-line new-parens,new-cap
-const TableGridFilterTemplate = require('../../../visualization/builtins/visualization-table-grid-filter.html')
-
-angular.module('zeppelinWebApp').controller('ResultCtrl', ResultCtrl)
-
-function ResultCtrl ($scope, $rootScope, $route, $window, $routeParams, $location,
+import moment from 'moment';
+
+import DatasetFactory from '../../../tabledata/datasetfactory';
+import TableVisualization from '../../../visualization/builtins/visualization-table';
+import BarchartVisualization from '../../../visualization/builtins/visualization-barchart';
+import PiechartVisualization from '../../../visualization/builtins/visualization-piechart';
+import AreachartVisualization from '../../../visualization/builtins/visualization-areachart';
+import LinechartVisualization from '../../../visualization/builtins/visualization-linechart';
+import ScatterchartVisualization from '../../../visualization/builtins/visualization-scatterchart';
+import NetworkVisualization from '../../../visualization/builtins/visualization-d3network';
+import {DefaultDisplayType, SpellResult} from '../../../spell';
+import {ParagraphStatus} from '../paragraph.status';
+
+const AnsiUp = require('ansi_up');
+const AnsiUpConverter = new AnsiUp.default; // eslint-disable-line new-parens,new-cap
+const TableGridFilterTemplate = require('../../../visualization/builtins/visualization-table-grid-filter.html');
+
+angular.module('zeppelinWebApp').controller('ResultCtrl', ResultCtrl);
+
+function ResultCtrl($scope, $rootScope, $route, $window, $routeParams, $location,
                     $timeout, $compile, $http, $q, $templateCache, $templateRequest, $sce, websocketMsgSrv,
                     baseUrlSrv, ngToast, saveAsService, noteVarShareService, heliumService,
                     uiGridConstants) {
-  'ngInject'
+  'ngInject';
 
   /**
    * Built-in visualizations
@@ -45,49 +45,49 @@ function ResultCtrl ($scope, $rootScope, $route, $window, $routeParams, $locatio
       id: 'table',   // paragraph.config.graph.mode
       name: 'Table', // human readable name. tooltip
       icon: '<i class="fa fa-table"></i>',
-      supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK]
+      supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK],
     },
     {
       id: 'multiBarChart',
       name: 'Bar Chart',
       icon: '<i class="fa fa-bar-chart"></i>',
       transformation: 'pivot',
-      supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK]
+      supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK],
     },
     {
       id: 'pieChart',
       name: 'Pie Chart',
       icon: '<i class="fa fa-pie-chart"></i>',
       transformation: 'pivot',
-      supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK]
+      supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK],
     },
     {
       id: 'stackedAreaChart',
       name: 'Area Chart',
       icon: '<i class="fa fa-area-chart"></i>',
       transformation: 'pivot',
-      supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK]
+      supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK],
     },
     {
       id: 'lineChart',
       name: 'Line Chart',
       icon: '<i class="fa fa-line-chart"></i>',
       transformation: 'pivot',
-      supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK]
+      supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK],
     },
     {
       id: 'scatterChart',
       name: 'Scatter Chart',
       icon: '<i class="cf cf-scatter-chart"></i>',
-      supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK]
+      supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK],
     },
     {
       id: 'network',
       name: 'Network',
       icon: '<i class="fa fa-share-alt"></i>',
-      supports: [DefaultDisplayType.NETWORK]
-    }
-  ]
+      supports: [DefaultDisplayType.NETWORK],
+    },
+  ];
 
   /**
    * Holds class and actual runtime instance and related infos of built-in visualizations
@@ -95,137 +95,143 @@ function ResultCtrl ($scope, $rootScope, $route, $window, $routeParams, $locatio
   let builtInVisualizations = {
     'table': {
       class: TableVisualization,
-      instance: undefined   // created from setGraphMode()
+      instance: undefined,   // created from setGraphMode()
     },
     'multiBarChart': {
       class: BarchartVisualization,
-      instance: undefined
+      instance: undefined,
     },
     'pieChart': {
       class: PiechartVisualization,
-      instance: undefined
+      instance: undefined,
     },
     'stackedAreaChart': {
       class: AreachartVisualization,
-      instance: undefined
+      instance: undefined,
     },
     'lineChart': {
       class: LinechartVisualization,
-      instance: undefined
+      instance: undefined,
     },
     'scatterChart': {
       class: ScatterchartVisualization,
-      instance: undefined
+      instance: undefined,
     },
     'network': {
       class: NetworkVisualization,
-      instance: undefined
-    }
-  }
+      instance: undefined,
+    },
+  };
 
   // type
-  $scope.type = null
+  $scope.type = null;
 
   // Data of the result
-  let data
+  let data;
 
   // config
-  $scope.config = null
+  $scope.config = null;
 
   // resultId = paragraph.id + index
-  $scope.id = null
+  $scope.id = null;
 
   // referece to paragraph
-  let paragraph
+  let paragraph;
 
   // index of the result
-  let resultIndex
+  let resultIndex;
 
   // TableData instance
-  let tableData
+  let tableData;
 
   // available columns in tabledata
-  $scope.tableDataColumns = []
+  $scope.tableDataColumns = [];
 
   // enable helium
-  let enableHelium = false
+  let enableHelium = false;
 
   // graphMode
-  $scope.graphMode = null
+  $scope.graphMode = null;
 
   // image data
-  $scope.imageData = null
+  $scope.imageData = null;
 
   // queue for append output
-  const textResultQueueForAppend = []
+  const textResultQueueForAppend = [];
 
   // prevent body area scrollbar from blocking due to scroll in paragraph results
-  $scope.mouseOver = false
-  $scope.onMouseOver = function() { $scope.mouseOver = true }
-  $scope.onMouseOut = function() { $scope.mouseOver = false }
+  $scope.mouseOver = false;
+  $scope.onMouseOver = function() {
+    $scope.mouseOver = true;
+  };
+  $scope.onMouseOut = function() {
+    $scope.mouseOver = false;
+  };
   $scope.getPointerEvent = function() {
-    return ($scope.mouseOver) ? {'pointer-events': 'auto' }
-      : {'pointer-events': 'none' }
-  }
+    return ($scope.mouseOver) ? {'pointer-events': 'auto'}
+      : {'pointer-events': 'none'};
+  };
 
-  $scope.init = function (result, config, paragraph, index) {
+  $scope.init = function(result, config, paragraph, index) {
     // register helium plugin vis packages
-    let visPackages = heliumService.getVisualizationCachedPackages()
-    const visPackageOrder = heliumService.getVisualizationCachedPackageOrder()
+    let visPackages = heliumService.getVisualizationCachedPackages();
+    const visPackageOrder = heliumService.getVisualizationCachedPackageOrder();
 
     // push the helium vis packages following the order
-    visPackageOrder.map(visName => {
-      visPackages.map(vis => {
-        if (vis.name !== visName) { return }
+    visPackageOrder.map((visName) => {
+      visPackages.map((vis) => {
+        if (vis.name !== visName) {
+          return;
+        }
         $scope.builtInTableDataVisualizationList.push({
           id: vis.id,
           name: vis.name,
           icon: $sce.trustAsHtml(vis.icon),
-          supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK]
-        })
+          supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK],
+        });
         builtInVisualizations[vis.id] = {
-          class: vis.class
-        }
-      })
-    })
-
-    updateData(result, config, paragraph, index)
-    renderResult($scope.type)
-  }
-
-  function isDOMLoaded (targetElemId) {
-    const elem = angular.element(`#${targetElemId}`)
-    return elem.length
+          class: vis.class,
+        };
+      });
+    });
+
+    updateData(result, config, paragraph, index);
+    renderResult($scope.type);
+  };
+
+  function isDOMLoaded(targetElemId) {
+    const elem = angular.element(`#${targetElemId}`);
+    return elem.length;
   }
 
-  function retryUntilElemIsLoaded (targetElemId, callback) {
-    function retry () {
+  function retryUntilElemIsLoaded(targetElemId, callback) {
+    function retry() {
       if (!isDOMLoaded(targetElemId)) {
-        $timeout(retry, 10)
-        return
+        $timeout(retry, 10);
+        return;
       }
 
-      const elem = angular.element(`#${targetElemId}`)
-      callback(elem)
+      const elem = angular.element(`#${targetElemId}`);
+      callback(elem);
     }
 
-    $timeout(retry)
+    $timeout(retry);
   }
 
-  $scope.$on('updateResult', function (event, result, newConfig, paragraphRef, index) {
+  $scope.$on('updateResult', function(event, result, newConfig, paragraphRef, index) {
     if (paragraph.id !== paragraphRef.id || index !== resultIndex) {
-      return
+      return;
     }
 
     let refresh = !angular.equals(newConfig, $scope.config) ||
       !angular.equals(result.type, $scope.type) ||
-      !angular.equals(result.data, data)
+      !angular.equals(result.data, data);
 
-    updateData(result, newConfig, paragraph, resultIndex)
-    renderResult($scope.type, refresh)
-  })
+    updateData(result, newConfig, paragraph, resultIndex);
+    renderResult($scope.type, refresh);
+  });
 
-  $scope.$on('appendParagraphOutput', function (event, data) {
+  $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
@@ -238,162 +244,162 @@ function ResultCtrl ($scope, $rootScope, $route, $window, $routeParams, $locatio
       resultIndex === data.index &&
       (paragraph.status === ParagraphStatus.PENDING || paragraph.status === ParagraphStatus.RUNNING)) {
       if (DefaultDisplayType.TEXT !== $scope.type) {
-        $scope.type = DefaultDisplayType.TEXT
+        $scope.type = DefaultDisplayType.TEXT;
       }
-      appendTextOutput(data.data)
+      appendTextOutput(data.data);
     }
-  })
+  });
 
-  const updateData = function (result, config, paragraphRef, index) {
-    data = result.data
-    paragraph = paragraphRef
-    resultIndex = parseInt(index)
+  const updateData = function(result, config, paragraphRef, index) {
+    data = result.data;
+    paragraph = paragraphRef;
+    resultIndex = parseInt(index);
 
-    $scope.id = paragraph.id + '_' + index
-    $scope.type = result.type
-    config = config ? config : {}
+    $scope.id = paragraph.id + '_' + index;
+    $scope.type = result.type;
+    config = config ? config : {};
 
     // initialize default config values
     if (!config.graph) {
-      config.graph = {}
+      config.graph = {};
     }
 
     if (!config.graph.mode) {
-      config.graph.mode = 'table'
+      config.graph.mode = 'table';
     }
 
     if (!config.graph.height) {
-      config.graph.height = 300
+      config.graph.height = 300;
     }
 
     if (!config.graph.optionOpen) {
-      config.graph.optionOpen = false
+      config.graph.optionOpen = false;
     }
 
-    $scope.graphMode = config.graph.mode
-    $scope.config = angular.copy(config)
+    $scope.graphMode = config.graph.mode;
+    $scope.config = angular.copy(config);
 
     // enable only when it is last result
-    enableHelium = (index === paragraphRef.results.msg.length - 1)
+    enableHelium = (index === paragraphRef.results.msg.length - 1);
 
     if ($scope.type === 'TABLE' || $scope.type === 'NETWORK') {
-      tableData = new DatasetFactory().createDataset($scope.type)
-      tableData.loadParagraphResult({type: $scope.type, msg: data})
-      $scope.tableDataColumns = tableData.columns
-      $scope.tableDataComment = tableData.comment
+      tableData = new DatasetFactory().createDataset($scope.type);
+      tableData.loadParagraphResult({type: $scope.type, msg: data});
+      $scope.tableDataColumns = tableData.columns;
+      $scope.tableDataComment = tableData.comment;
       if ($scope.type === 'NETWORK') {
-        $scope.networkNodes = tableData.networkNodes
-        $scope.networkRelationships = tableData.networkRelationships
-        $scope.networkProperties = tableData.networkProperties
+        $scope.networkNodes = tableData.networkNodes;
+        $scope.networkRelationships = tableData.networkRelationships;
+        $scope.networkProperties = tableData.networkProperties;
       }
     } else if ($scope.type === 'IMG') {
-      $scope.imageData = data
+      $scope.imageData = data;
     }
-  }
+  };
 
-  $scope.createDisplayDOMId = function (baseDOMId, type) {
+  $scope.createDisplayDOMId = function(baseDOMId, type) {
     if (type === DefaultDisplayType.TABLE || type === DefaultDisplayType.NETWORK) {
-      return `${baseDOMId}_graph`
+      return `${baseDOMId}_graph`;
     } else if (type === DefaultDisplayType.HTML) {
-      return `${baseDOMId}_html`
+      return `${baseDOMId}_html`;
     } else if (type === DefaultDisplayType.ANGULAR) {
-      return `${baseDOMId}_angular`
+      return `${baseDOMId}_angular`;
     } else if (type === DefaultDisplayType.TEXT) {
-      return `${baseDOMId}_text`
+      return `${baseDOMId}_text`;
     } else if (type === DefaultDisplayType.ELEMENT) {
-      return `${baseDOMId}_elem`
+      return `${baseDOMId}_elem`;
     } else {
-      console.error(`Cannot create display DOM Id due to unknown display type: ${type}`)
+      console.error(`Cannot create display DOM Id due to unknown display type: ${type}`);
     }
-  }
+  };
 
-  $scope.renderDefaultDisplay = function (targetElemId, type, data, refresh) {
+  $scope.renderDefaultDisplay = function(targetElemId, type, data, refresh) {
     const afterLoaded = () => {
       if (type === DefaultDisplayType.TABLE || type === DefaultDisplayType.NETWORK) {
-        renderGraph(targetElemId, $scope.graphMode, refresh)
+        renderGraph(targetElemId, $scope.graphMode, refresh);
       } else if (type === DefaultDisplayType.HTML) {
-        renderHtml(targetElemId, data)
+        renderHtml(targetElemId, data);
       } else if (type === DefaultDisplayType.ANGULAR) {
-        renderAngular(targetElemId, data)
+        renderAngular(targetElemId, data);
       } else if (type === DefaultDisplayType.TEXT) {
-        renderText(targetElemId, data, refresh)
+        renderText(targetElemId, data, refresh);
       } else if (type === DefaultDisplayType.ELEMENT) {
-        renderElem(targetElemId, data)
+        renderElem(targetElemId, data);
       } else {
-        console.error(`Unknown Display Type: ${type}`)
+        console.error(`Unknown Display Type: ${type}`);
       }
-    }
+    };
 
-    retryUntilElemIsLoaded(targetElemId, afterLoaded)
+    retryUntilElemIsLoaded(targetElemId, afterLoaded);
 
     // send message to parent that this result is rendered
-    const paragraphId = $scope.$parent.paragraph.id
-    $scope.$emit('resultRendered', paragraphId)
-  }
+    const paragraphId = $scope.$parent.paragraph.id;
+    $scope.$emit('resultRendered', paragraphId);
+  };
 
-  const renderResult = function (type, refresh) {
-    let activeApp
+  const renderResult = function(type, refresh) {
+    let activeApp;
     if (enableHelium) {
-      getSuggestions()
-      getApplicationStates()
-      activeApp = _.get($scope.config, 'helium.activeApp')
+      getSuggestions();
+      getApplicationStates();
+      activeApp = _.get($scope.config, 'helium.activeApp');
     }
 
     if (activeApp) {
-      const appState = _.find($scope.apps, {id: activeApp})
-      renderApp(`p${appState.id}`, appState)
+      const appState = _.find($scope.apps, {id: activeApp});
+      renderApp(`p${appState.id}`, appState);
     } else {
       if (!DefaultDisplayType[type]) {
-        $scope.renderCustomDisplay(type, data)
+        $scope.renderCustomDisplay(type, data);
       } else {
-        const targetElemId = $scope.createDisplayDOMId(`p${$scope.id}`, type)
-        $scope.renderDefaultDisplay(targetElemId, type, data, refresh)
+        const targetElemId = $scope.createDisplayDOMId(`p${$scope.id}`, type);
+        $scope.renderDefaultDisplay(targetElemId, type, data, refresh);
       }
     }
-  }
+  };
 
-  $scope.isDefaultDisplay = function () {
-    return DefaultDisplayType[$scope.type]
-  }
+  $scope.isDefaultDisplay = function() {
+    return DefaultDisplayType[$scope.type];
+  };
 
   /**
    * Render multiple sub results for custom display
    */
-  $scope.renderCustomDisplay = function (type, data) {
+  $scope.renderCustomDisplay = function(type, data) {
     // get result from intp
     if (!heliumService.getSpellByMagic(type)) {
-      console.error(`Can't execute spell due to unknown display type: ${type}`)
-      return
+      console.error(`Can't execute spell due to unknown display type: ${type}`);
+      return;
     }
 
     // custom display result can include multiple subset results
     heliumService.executeSpellAsDisplaySystem(type, data)
-      .then(dataWithTypes => {
-        const containerDOMId = `p${$scope.id}_custom`
+      .then((dataWithTypes) => {
+        const containerDOMId = `p${$scope.id}_custom`;
         const afterLoaded = () => {
-          const containerDOM = angular.element(`#${containerDOMId}`)
+          const containerDOM = angular.element(`#${containerDOMId}`);
           // Spell.interpret() can create multiple outputs
           for (let i = 0; i < dataWithTypes.length; i++) {
-            const dt = dataWithTypes[i]
-            const data = dt.data
-            const type = dt.type
+            const dt = dataWithTypes[i];
+            const data = dt.data;
+            const type = dt.type;
 
             // prepare each DOM to be filled
-            const subResultDOMId = $scope.createDisplayDOMId(`p${$scope.id}_custom_${i}`, type)
-            const subResultDOM = document.createElement('div')
-            containerDOM.append(subResultDOM)
-            subResultDOM.setAttribute('id', subResultDOMId)
+            const subResultDOMId = $scope.createDisplayDOMId(`p${$scope.id}_custom_${i}`, type);
+            const subResultDOM = document.createElement('div');
+            containerDOM.append(subResultDOM);
+            subResultDOM.setAttribute('id', subResultDOMId);
 
-            $scope.renderDefaultDisplay(subResultDOMId, type, data, true)
+            $scope.renderDefaultDisplay(subResultDOMId, type, data, true);
           }
-        }
+        };
 
-        retryUntilElemIsLoaded(containerDOMId, afterLoaded)
-      })
-      .catch(error => {
-        console.error(`Failed to render custom display: ${$scope.type}\n` + error)
+        retryUntilElemIsLoaded(containerDOMId, afterLoaded);
       })
-  }
+      .catch((error) => {
+        console.error(`Failed to render custom display: ${$scope.type}\n` + error);
+      });
+  };
 
   /**
    * generates actually object which will be consumed from `data` property
@@ -405,688 +411,710 @@ function ResultCtrl ($scope, $rootScope, $route, $window, $routeParams, $locatio
    * @param successCallback
    * @param failureCallback
    */
-  const handleData = function (data, type, successCallback, failureCallback) {
+  const handleData = function(data, type, successCallback, failureCallback) {
     if (SpellResult.isFunction(data)) {
       try {
-        successCallback(data())
+        successCallback(data());
       } catch (error) {
-        failureCallback(error)
-        console.error(`Failed to handle ${type} type, function data\n`, error)
+        failureCallback(error);
+        console.error(`Failed to handle ${type} type, function data\n`, error);
       }
     } else if (SpellResult.isObject(data)) {
       try {
-        successCallback(data)
+        successCallback(data);
       } catch (error) {
-        console.error(`Failed to handle ${type} type, object data\n`, error)
+        console.error(`Failed to handle ${type} type, object data\n`, error);
       }
     }
-  }
+  };
 
-  const renderElem = function (targetElemId, data) {
-    const elem = angular.element(`#${targetElemId}`)
-    handleData(() => { data(targetElemId) }, DefaultDisplayType.ELEMENT,
+  const renderElem = function(targetElemId, data) {
+    const elem = angular.element(`#${targetElemId}`);
+    handleData(() => {
+      data(targetElemId);
+    }, DefaultDisplayType.ELEMENT,
       () => {}, /** HTML element will be filled with data. thus pass empty success callback */
-      (error) => { elem.html(`${error.stack}`) }
-    )
-  }
+      (error) => {
+        elem.html(`${error.stack}`);
+      }
+    );
+  };
 
-  const renderHtml = function (targetElemId, data) {
-    const elem = angular.element(`#${targetElemId}`)
+  const renderHtml = function(targetElemId, data) {
+    const elem = angular.element(`#${targetElemId}`);
     handleData(data, DefaultDisplayType.HTML,
       (generated) => {
-        elem.html(generated)
-        elem.find('pre code').each(function (i, e) {
-          hljs.highlightBlock(e)
-        })
+        elem.html(generated);
+        elem.find('pre code').each(function(i, e) {
+          hljs.highlightBlock(e);
+        });
         /* eslint new-cap: [2, {"capIsNewExceptions": ["MathJax.Hub.Queue"]}] */
-        MathJax.Hub.Queue(['Typeset', MathJax.Hub, elem[0]])
+        MathJax.Hub.Queue(['Typeset', MathJax.Hub, elem[0]]);
       },
-      (error) => { elem.html(`${error.stack}`) }
-    )
-  }
+      (error) => {
+        elem.html(`${error.stack}`);
+      }
+    );
+  };
 
-  const renderAngular = function (targetElemId, data) {
-    const elem = angular.element(`#${targetElemId}`)
-    const paragraphScope = noteVarShareService.get(`${paragraph.id}_paragraphScope`)
+  const renderAngular = function(targetElemId, data) {
+    const elem = angular.element(`#${targetElemId}`);
+    const paragraphScope = noteVarShareService.get(`${paragraph.id}_paragraphScope`);
     handleData(data, DefaultDisplayType.ANGULAR,
       (generated) => {
-        elem.html(generated)
-        $compile(elem.contents())(paragraphScope)
+        elem.html(generated);
+        $compile(elem.contents())(paragraphScope);
       },
-      (error) => { elem.html(`${error.stack}`) }
-    )
-  }
+      (error) => {
+        elem.html(`${error.stack}`);
+      }
+    );
+  };
 
-  const getTextResultElemId = function (resultId) {
-    return `p${resultId}_text`
-  }
+  const getTextResultElemId = function(resultId) {
+    return `p${resultId}_text`;
+  };
 
-  const checkAndReplaceCarriageReturn = function (str) {
+  const checkAndReplaceCarriageReturn = function(str) {
     if (/\r/.test(str)) {
-      let newGenerated = ''
-      let strArr = str.split('\n')
+      let newGenerated = '';
+      let strArr = str.split('\n');
       for (let str of strArr) {
         if (/\r/.test(str)) {
-          let splitCR = str.split('\r')
-          newGenerated += splitCR[splitCR.length - 1] + '\n'
+          let splitCR = str.split('\r');
+          newGenerated += splitCR[splitCR.length - 1] + '\n';
         } else {
-          newGenerated += str + '\n'
+          newGenerated += str + '\n';
         }
       }
       // remove last "\n" character
-      return newGenerated.slice(0, -1)
+      return newGenerated.slice(0, -1);
     } else {
-      return str
+      return str;
     }
-  }
+  };
 
-  const renderText = function (targetElemId, data, refresh) {
-    const elem = angular.element(`#${targetElemId}`)
+  const renderText = function(targetElemId, data, refresh) {
+    const elem = angular.element(`#${targetElemId}`);
     handleData(data, DefaultDisplayType.TEXT,
       (generated) => {
         // clear all lines before render
-        removeChildrenDOM(targetElemId)
+        removeChildrenDOM(targetElemId);
 
         if (generated) {
-          generated = checkAndReplaceCarriageReturn(generated)
-          const escaped = AnsiUpConverter.ansi_to_html(generated)
-          const divDOM = angular.element('<div></div>').innerHTML = escaped
+          generated = checkAndReplaceCarriageReturn(generated);
+          const escaped = AnsiUpConverter.ansi_to_html(generated);
+          const divDOM = angular.element('<div></div>').innerHTML = escaped;
           if (refresh) {
-            elem.html(divDOM)
+            elem.html(divDOM);
           } else {
-            elem.append(divDOM)
+            elem.append(divDOM);
           }
         } else if (refresh) {
-          elem.html('')
+          elem.html('');
         }
 
-        elem.bind('mousewheel', (e) => { $scope.keepScrollDown = false })
+        elem.bind('mousewheel', (e) => {
+          $scope.keepScrollDown = false;
+        });
       },
-      (error) => { elem.html(`${error.stack}`) }
-    )
-  }
+      (error) => {
+        elem.html(`${error.stack}`);
+      }
+    );
+  };
 
-  const removeChildrenDOM = function (targetElemId) {
-    const elem = angular.element(`#${targetElemId}`)
+  const removeChildrenDOM = function(targetElemId) {
+    const elem = angular.element(`#${targetElemId}`);
     if (elem.length) {
-      elem.children().remove()
+      elem.children().remove();
     }
-  }
+  };
 
-  function appendTextOutput (data) {
-    const elemId = getTextResultElemId($scope.id)
-    textResultQueueForAppend.push(data)
+  function appendTextOutput(data) {
+    const elemId = getTextResultElemId($scope.id);
+    textResultQueueForAppend.push(data);
 
     // if DOM is not loaded, just push data and return
     if (!isDOMLoaded(elemId)) {
-      return
+      return;
     }
 
-    const elem = angular.element(`#${elemId}`)
+    const elem = angular.element(`#${elemId}`);
 
     // pop all stacked data and append to the DOM
     while (textResultQueueForAppend.length > 0) {
-      const line = elem.html() + AnsiUpConverter.ansi_to_html(textResultQueueForAppend.pop())
-      elem.html(checkAndReplaceCarriageReturn(line))
+      const line = elem.html() + AnsiUpConverter.ansi_to_html(textResultQueueForAppend.pop());
+      elem.html(checkAndReplaceCarriageReturn(line));
       if ($scope.keepScrollDown) {
-        const doc = angular.element(`#${elemId}`)
-        doc[0].scrollTop = doc[0].scrollHeight
+        const doc = angular.element(`#${elemId}`);
+        doc[0].scrollTop = doc[0].scrollHeight;
       }
     }
   }
 
-  const getTrSettingElem = function (scopeId, graphMode) {
-    return angular.element('#trsetting' + scopeId + '_' + graphMode)
-  }
+  const getTrSettingElem = function(scopeId, graphMode) {
+    return angular.element('#trsetting' + scopeId + '_' + graphMode);
+  };
 
-  const getVizSettingElem = function (scopeId, graphMode) {
-    return angular.element('#vizsetting' + scopeId + '_' + graphMode)
-  }
+  const getVizSettingElem = function(scopeId, graphMode) {
+    return angular.element('#vizsetting' + scopeId + '_' + graphMode);
+  };
 
-  const renderGraph = function (graphElemId, graphMode, refresh) {
+  const renderGraph = function(graphElemId, graphMode, refresh) {
     // set graph height
-    const height = $scope.config.graph.height
-    const graphElem = angular.element(`#${graphElemId}`)
-    graphElem.height(height)
+    const height = $scope.config.graph.height;
+    const graphElem = angular.element(`#${graphElemId}`);
+    graphElem.height(height);
 
-    if (!graphMode) { graphMode = 'table' }
+    if (!graphMode) {
+      graphMode = 'table';
+    }
 
-    let builtInViz = builtInVisualizations[graphMode]
+    let builtInViz = builtInVisualizations[graphMode];
     if (!builtInViz) {
       /** helium package is not available, fallback to table vis */
-      graphMode = 'table'
-      $scope.graphMode = graphMode /** html depends on this scope value */
-      builtInViz = builtInVisualizations[graphMode]
+      graphMode = 'table';
+      $scope.graphMode = graphMode; /** html depends on this scope value */
+      builtInViz = builtInVisualizations[graphMode];
     }
 
     // deactive previsouly active visualization
     for (let t in builtInVisualizations) {
-      const v = builtInVisualizations[t].instance
+      if (builtInVisualizations.hasOwnProperty(t)) {
+        const v = builtInVisualizations[t].instance;
 
-      if (t !== graphMode && v && v.isActive()) {
-        v.deactivate()
-        break
+        if (t !== graphMode && v && v.isActive()) {
+          v.deactivate();
+          break;
+        }
       }
     }
 
-    let afterLoaded = function () { /** will be overwritten */ }
+    let afterLoaded = function() { /** will be overwritten */ };
 
     if (!builtInViz.instance) { // not instantiated yet
       // render when targetEl is available
-      afterLoaded = function (loadedElem) {
+      afterLoaded = function(loadedElem) {
         try {
-          const transformationSettingTargetEl = getTrSettingElem($scope.id, graphMode)
-          const visualizationSettingTargetEl = getVizSettingElem($scope.id, graphMode)
+          const transformationSettingTargetEl = getTrSettingElem($scope.id, graphMode);
+          const visualizationSettingTargetEl = getVizSettingElem($scope.id, graphMode);
           // set height
-          loadedElem.height(height)
+          loadedElem.height(height);
 
           // instantiate visualization
-          const config = getVizConfig(graphMode)
-          const Visualization = builtInViz.class
-          builtInViz.instance = new Visualization(loadedElem, config)
+          const config = getVizConfig(graphMode);
+          const Visualization = builtInViz.class;
+          builtInViz.instance = new Visualization(loadedElem, config);
 
           // inject emitter, $templateRequest
-          const emitter = function (graphSetting) {
-            commitVizConfigChange(graphSetting, graphMode)
-          }
-          builtInViz.instance._emitter = emitter
-          builtInViz.instance._compile = $compile
+          const emitter = function(graphSetting) {
+            commitVizConfigChange(graphSetting, graphMode);
+          };
+          builtInViz.instance._emitter = emitter;
+          builtInViz.instance._compile = $compile;
 
           // ui-grid related
-          $templateCache.put('ui-grid/ui-grid-filter', TableGridFilterTemplate)
-          builtInViz.instance._uiGridConstants = uiGridConstants
-          builtInViz.instance._timeout = $timeout
-
-          builtInViz.instance._createNewScope = createNewScope
-          builtInViz.instance._templateRequest = $templateRequest
-          const transformation = builtInViz.instance.getTransformation()
-          transformation._emitter = emitter
-          transformation._templateRequest = $templateRequest
-          transformation._compile = $compile
-          transformation._createNewScope = createNewScope
+          $templateCache.put('ui-grid/ui-grid-filter', TableGridFilterTemplate);
+          builtInViz.instance._uiGridConstants = uiGridConstants;
+          builtInViz.instance._timeout = $timeout;
+
+          builtInViz.instance._createNewScope = createNewScope;
+          builtInViz.instance._templateRequest = $templateRequest;
+          const transformation = builtInViz.instance.getTransformation();
+          transformation._emitter = emitter;
+          transformation._templateRequest = $templateRequest;
+          transformation._compile = $compile;
+          transformation._createNewScope = createNewScope;
 
           // render
-          const transformed = transformation.transform(tableData)
-          transformation.renderSetting(transformationSettingTargetEl)
-          builtInViz.instance.render(transformed)
-          builtInViz.instance.renderSetting(visualizationSettingTargetEl)
-          builtInViz.instance.activate()
+          const transformed = transformation.transform(tableData);
+          transformation.renderSetting(transformationSettingTargetEl);
+          builtInViz.instance.render(transformed);
+          builtInViz.instance.renderSetting(visualizationSettingTargetEl);
+          builtInViz.instance.activate();
           angular.element(window).resize(() => {
-            builtInViz.instance.resize()
-          })
+            builtInViz.instance.resize();
+          });
         } catch (err) {
-          console.error('Graph drawing error %o', err)
+          console.error('Graph drawing error %o', err);
         }
-      }
+      };
     } else if (refresh) {
       // when graph options or data are changed
-      console.log('Refresh data %o', tableData)
-
-      afterLoaded = function (loadedElem) {
-        const transformationSettingTargetEl = getTrSettingElem($scope.id, graphMode)
-        const visualizationSettingTargetEl = getVizSettingElem($scope.id, graphMode)
-        const config = getVizConfig(graphMode)
-        loadedElem.height(height)
-        const transformation = builtInViz.instance.getTransformation()
-        transformation.setConfig(config)
-        const transformed = transformation.transform(tableData)
-        transformation.renderSetting(transformationSettingTargetEl)
-        builtInViz.instance.setConfig(config)
-        builtInViz.instance.render(transformed)
-        builtInViz.instance.renderSetting(visualizationSettingTargetEl)
-        builtInViz.instance.activate()
-      }
+      console.log('Refresh data %o', tableData);
+
+      afterLoaded = function(loadedElem) {
+        const transformationSettingTargetEl = getTrSettingElem($scope.id, graphMode);
+        const visualizationSettingTargetEl = getVizSettingElem($scope.id, graphMode);
+        const config = getVizConfig(graphMode);
+        loadedElem.height(height);
+        const transformation = builtInViz.instance.getTransformation();
+        transformation.setConfig(config);
+        const transformed = transformation.transform(tableData);
+        transformation.renderSetting(transformationSettingTargetEl);
+        builtInViz.instance.setConfig(config);
+        builtInViz.instance.render(transformed);
+        builtInViz.instance.renderSetting(visualizationSettingTargetEl);
+        builtInViz.instance.activate();
+      };
     } else {
-      afterLoaded = function (loadedElem) {
-        loadedElem.height(height)
-        builtInViz.instance.activate()
-      }
+      afterLoaded = function(loadedElem) {
+        loadedElem.height(height);
+        builtInViz.instance.activate();
+      };
     }
 
-    const tableElemId = `p${$scope.id}_${graphMode}`
-    retryUntilElemIsLoaded(tableElemId, afterLoaded)
-  }
+    const tableElemId = `p${$scope.id}_${graphMode}`;
+    retryUntilElemIsLoaded(tableElemId, afterLoaded);
+  };
 
-  $scope.switchViz = function (newMode) {
-    let newConfig = angular.copy($scope.config)
-    let newParams = angular.copy(paragraph.settings.params)
+  $scope.switchViz = function(newMode) {
+    let newConfig = angular.copy($scope.config);
+    let newParams = angular.copy(paragraph.settings.params);
 
     // graph options
-    newConfig.graph.mode = newMode
+    newConfig.graph.mode = newMode;
 
     // see switchApp()
-    _.set(newConfig, 'helium.activeApp', undefined)
+    _.set(newConfig, 'helium.activeApp', undefined);
 
-    commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams)
-  }
+    commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams);
+  };
 
-  const createNewScope = function () {
-    return $rootScope.$new(true)
-  }
+  const createNewScope = function() {
+    return $rootScope.$new(true);
+  };
 
-  const commitParagraphResult = function (title, text, config, params) {
-    let newParagraphConfig = angular.copy(paragraph.config)
-    newParagraphConfig.results = newParagraphConfig.results || []
-    newParagraphConfig.results[resultIndex] = config
+  const commitParagraphResult = function(title, text, config, params) {
+    let 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)
+        data: data,
+      }, newParagraphConfig.results[resultIndex], paragraph, resultIndex);
+      renderResult($scope.type, true);
     } else {
-      return websocketMsgSrv.commitParagraph(paragraph.id, title, text, newParagraphConfig, params)
+      return websocketMsgSrv.commitParagraph(paragraph.id, title, text, newParagraphConfig, params);
     }
-  }
+  };
 
-  $scope.toggleGraphSetting = function () {
-    let newConfig = angular.copy($scope.config)
+  $scope.toggleGraphSetting = function() {
+    let newConfig = angular.copy($scope.config);
     if (newConfig.graph.optionOpen) {
-      newConfig.graph.optionOpen = false
+      newConfig.graph.optionOpen = false;
     } else {
-      newConfig.graph.optionOpen = true
+      newConfig.graph.optionOpen = true;
     }
 
-    let newParams = angular.copy(paragraph.settings.params)
-    commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams)
-  }
+    let newParams = angular.copy(paragraph.settings.params);
+    commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams);
+  };
 
-  const getVizConfig = function (vizId) {
-    let config
-    let graph = $scope.config.graph
+  const getVizConfig = function(vizId) {
+    let config;
+    let graph = $scope.config.graph;
     if (graph) {
       // copy setting for vizId
       if (graph.setting) {
-        config = angular.copy(graph.setting[vizId])
+        config = angular.copy(graph.setting[vizId]);
       }
 
       if (!config) {
-        config = {}
+        config = {};
       }
 
       // copy common setting
-      config.common = angular.copy(graph.commonSetting) || {}
+      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)
-        }
+          values: angular.copy(graph.values),
+        };
       }
     }
-    console.debug('getVizConfig', config)
-    return config
-  }
+    console.debug('getVizConfig', config);
+    return config;
+  };
 
-  const commitVizConfigChange = function (config, vizId) {
-    let newConfig = angular.copy($scope.config)
+  const commitVizConfigChange = function(config, vizId) {
+    let newConfig = angular.copy($scope.config);
     if (!newConfig.graph) {
-      newConfig.graph = {}
+      newConfig.graph = {};
     }
 
     // copy setting for vizId
     if (!newConfig.graph.setting) {
-      newConfig.graph.setting = {}
+      newConfig.graph.setting = {};
     }
-    newConfig.graph.setting[vizId] = angular.copy(config)
+    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
+      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
+      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.debug('committVizConfig', newConfig)
-    let newParams = angular.copy(paragraph.settings.params)
-    commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams)
-  }
+    console.debug('committVizConfig', newConfig);
+    let newParams = angular.copy(paragraph.settings.params);
+    commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams);
+  };
 
-  $scope.$on('paragraphResized', function (event, paragraphId) {
+  $scope.$on('paragraphResized', function(event, paragraphId) {
     // paragraph col width changed
     if (paragraphId === paragraph.id) {
-      let builtInViz = builtInVisualizations[$scope.graphMode]
+      let builtInViz = builtInVisualizations[$scope.graphMode];
       if (builtInViz && builtInViz.instance) {
-        $timeout(_ => builtInViz.instance.resize(), 200)
+        $timeout(() => builtInViz.instance.resize(), 200);
       }
     }
-  })
+  });
 
-  $scope.resize = function (width, height) {
-    $timeout(function () {
-      changeHeight(width, height)
-    }, 200)
-  }
+  $scope.resize = function(width, height) {
+    $timeout(function() {
+      changeHeight(width, height);
+    }, 200);
+  };
 
-  const changeHeight = function (width, height) {
-    let newParams = angular.copy(paragraph.settings.params)
-    let newConfig = angular.copy($scope.config)
+  const changeHeight = function(width, height) {
+    let newParams = angular.copy(paragraph.settings.params);
+    let 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) {
-    let dsv = ''
-    let dateFinished = moment(paragraph.dateFinished).format('YYYY-MM-DD hh:mm:ss A')
-    let exportedFileName = paragraph.title ? paragraph.title + '_' + dateFinished : 'data_' + dateFinished
+  $scope.exportToDSV = function(delimiter) {
+    let dsv = '';
+    let dateFinished = moment(paragraph.dateFinished).format('YYYY-MM-DD hh:mm:ss A');
+    let exportedFileName = paragraph.title ? paragraph.title + '_' + dateFinished : 'data_' + dateFinished;
 
     for (let titleIndex in tableData.columns) {
-      dsv += tableData.columns[titleIndex].name + delimiter
+      if (tableData.columns.hasOwnProperty(titleIndex)) {
+        dsv += tableData.columns[titleIndex].name + delimiter;
+      }
     }
-    dsv = dsv.substring(0, dsv.length - 1) + '\n'
+    dsv = dsv.substring(0, dsv.length - 1) + '\n';
     for (let r in tableData.rows) {
-      let row = tableData.rows[r]
-      let dsvRow = ''
-      for (let index in row) {
-        let stringValue = (row[index]).toString()
-        if (stringValue.indexOf(delimiter) > -1) {
-          dsvRow += '"' + stringValue + '"' + delimiter
-        } else {
-          dsvRow += row[index] + delimiter
+      if (tableData.rows.hasOwnProperty(r)) {
+        let row = tableData.rows[r];
+        let dsvRow = '';
+        for (let index in row) {
+          if (row.hasOwnProperty(index)) {
+            let 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';
       }
-      dsv += dsvRow.substring(0, dsvRow.length - 1) + '\n'
     }
-    let extension = ''
+    let extension = '';
     if (delimiter === '\t') {
-      extension = 'tsv'
+      extension = 'tsv';
     } else if (delimiter === ',') {
-      extension = 'csv'
+      extension = 'csv';
     }
-    saveAsService.saveAs(dsv, exportedFileName, extension)
-  }
+    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 ----------------
-  let ANGULAR_FUNCTION_OBJECT_NAME_PREFIX = '_Z_ANGULAR_FUNC_'
+  let ANGULAR_FUNCTION_OBJECT_NAME_PREFIX = '_Z_ANGULAR_FUNC_';
 
   // app states
-  $scope.apps = []
+  $scope.apps = [];
 
   // suggested apps
-  $scope.suggestion = {}
+  $scope.suggestion = {};
 
-  $scope.switchApp = function (appId) {
-    let newConfig = angular.copy($scope.config)
-    let newParams = angular.copy(paragraph.settings.params)
+  $scope.switchApp = function(appId) {
+    let newConfig = angular.copy($scope.config);
+    let newParams = angular.copy(paragraph.settings.params);
 
     // 'helium.activeApp' can be cleared by switchViz()
-    _.set(newConfig, 'helium.activeApp', appId)
+    _.set(newConfig, 'helium.activeApp', appId);
 
-    commitConfig(newConfig, newParams)
-  }
+    commitConfig(newConfig, newParams);
+  };
 
-  $scope.loadApp = function (heliumPackage) {
-    let noteId = $route.current.pathParams.noteId
+  $scope.loadApp = function(heliumPackage) {
+    let 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)
+      .success(function(data, status, headers, config) {
+        console.log('Load app %o', data);
       })
-      .error(function (err, status, headers, config) {
-        console.log('Error %o', err)
-      })
-  }
+      .error(function(err, status, headers, config) {
+        console.log('Error %o', err);
+      });
+  };
 
-  const commitConfig = function (config, params) {
-    commitParagraphResult(paragraph.title, paragraph.text, config, params)
-  }
+  const commitConfig = function(config, params) {
+    commitParagraphResult(paragraph.title, paragraph.text, config, params);
+  };
 
-  const getApplicationStates = function () {
-    let appStates = []
+  const getApplicationStates = function() {
+    let appStates = [];
 
     // Display ApplicationState
     if (paragraph.apps) {
-      _.forEach(paragraph.apps, function (app) {
+      _.forEach(paragraph.apps, function(app) {
         appStates.push({
           id: app.id,
           pkg: app.pkg,
           status: app.status,
-          output: app.output
-        })
-      })
+          output: app.output,
+        });
+      });
     }
 
     // update or remove app states no longer exists
-    _.forEach($scope.apps, function (currentAppState, idx) {
-      let newAppState = _.find(appStates, {id: currentAppState.id})
+    _.forEach($scope.apps, function(currentAppState, idx) {
+      let newAppState = _.find(appStates, {id: currentAppState.id});
       if (newAppState) {
-        angular.extend($scope.apps[idx], newAppState)
+        angular.extend($scope.apps[idx], newAppState);
       } else {
-        $scope.apps.splice(idx, 1)
+        $scope.apps.splice(idx, 1);
       }
-    })
+    });
 
     // add new app states
-    _.forEach(appStates, function (app, idx) {
+    _.forEach(appStates, function(app, idx) {
       if ($scope.apps.length <= idx || $scope.apps[idx].id !== app.id) {
-        $scope.apps.splice(idx, 0, app)
+        $scope.apps.splice(idx, 0, app);
       }
-    })
-  }
+    });
+  };
 
-  const getSuggestions = function () {
+  const getSuggestions = function() {
     // Get suggested apps
-    let noteId = $route.current.pathParams.noteId
+    let noteId = $route.current.pathParams.noteId;
     if (!noteId) {
-      return
+      return;
     }
     $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)
+      .success(function(data, status, headers, config) {
+        $scope.suggestion = data.body;
       })
-  }
+      .error(function(err, status, headers, config) {
+        console.log('Error %o', err);
+      });
+  };
 
-  const renderApp = function (targetElemId, appState) {
+  const renderApp = function(targetElemId, appState) {
     const afterLoaded = (loadedElem) => {
       try {
-        console.log('renderApp %o', appState)
-        loadedElem.html(appState.output)
-        $compile(loadedElem.contents())(getAppScope(appState))
+        console.log('renderApp %o', appState);
+        loadedElem.html(appState.output);
+        $compile(loadedElem.contents())(getAppScope(appState));
       } catch (err) {
-        console.log('App rendering error %o', err)
+        console.log('App rendering error %o', err);
       }
-    }
-    retryUntilElemIsLoaded(targetElemId, afterLoaded)
-  }
+    };
+    retryUntilElemIsLoaded(targetElemId, afterLoaded);
+  };
 
   /*
    ** $scope.$on functions below
    */
-  $scope.$on('appendAppOutput', function (event, data) {
+  $scope.$on('appendAppOutput', function(event, data) {
     if (paragraph.id === data.paragraphId) {
-      let app = _.find($scope.apps, {id: data.appId})
+      let app = _.find($scope.apps, {id: data.appId});
       if (app) {
-        app.output += data.data
+        app.output += data.data;
 
-        let paragraphAppState = _.find(paragraph.apps, {id: data.appId})
-        paragraphAppState.output = app.output
+        let paragraphAppState = _.find(paragraph.apps, {id: data.appId});
+        paragraphAppState.output = app.output;
 
-        let 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)
+        let 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) {
+  $scope.$on('updateAppOutput', function(event, data) {
     if (paragraph.id === data.paragraphId) {
-      let app = _.find($scope.apps, {id: data.appId})
+      let app = _.find($scope.apps, {id: data.appId});
       if (app) {
-        app.output = data.data
+        app.output = data.data;
 
-        let paragraphAppState = _.find(paragraph.apps, {id: data.appId})
-        paragraphAppState.output = app.output
+        let paragraphAppState = _.find(paragraph.apps, {id: data.appId});
+        paragraphAppState.output = app.output;
 
-        let targetEl = angular.element(document.getElementById('p' + app.id))
-        targetEl.html(app.output)
-        $compile(targetEl.contents())(getAppScope(app))
-        console.log('append app output')
+        let 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) {
+  $scope.$on('appLoad', function(event, data) {
     if (paragraph.id === data.paragraphId) {
-      let app = _.find($scope.apps, {id: data.appId})
+      let app = _.find($scope.apps, {id: data.appId});
       if (!app) {
         app = {
           id: data.appId,
           pkg: data.pkg,
           status: 'UNLOADED',
-          output: ''
-        }
+          output: '',
+        };
 
-        $scope.apps.push(app)
-        paragraph.apps.push(app)
-        $scope.switchApp(app.id)
+        $scope.apps.push(app);
+        paragraph.apps.push(app);
+        $scope.switchApp(app.id);
       }
     }
-  })
+  });
 
-  $scope.$on('appStatusChange', function (event, data) {
+  $scope.$on('appStatusChange', function(event, data) {
     if (paragraph.id === data.paragraphId) {
-      let app = _.find($scope.apps, {id: data.appId})
+      let app = _.find($scope.apps, {id: data.appId});
       if (app) {
-        app.status = data.status
-        let paragraphAppState = _.find(paragraph.apps, {id: data.appId})
-        paragraphAppState.status = app.status
+        app.status = data.status;
+        let paragraphAppState = _.find(paragraph.apps, {id: data.appId});
+        paragraphAppState.status = app.status;
       }
     }
-  })
+  });
 
-  let getAppRegistry = function (appState) {
+  let getAppRegistry = function(appState) {
     if (!appState.registry) {
-      appState.registry = {}
+      appState.registry = {};
     }
 
-    return appState.registry
-  }
+    return appState.registry;
+  };
 
-  const getAppScope = function (appState) {
+  const getAppScope = function(appState) {
     if (!appState.scope) {
-      appState.scope = $rootScope.$new(true, $rootScope)
+      appState.scope = $rootScope.$new(true, $rootScope);
     }
-    return appState.scope
-  }
+    return appState.scope;
+  };
 
-  $scope.$on('angularObjectUpdate', function (event, data) {
-    let noteId = $route.current.pathParams.noteId
+  $scope.$on('angularObjectUpdate', function(event, data) {
+    let noteId = $route.current.pathParams.noteId;
     if (!data.noteId || data.noteId === noteId) {
-      let scope
-      let registry
+      let scope;
+      let registry;
 
-      let app = _.find($scope.apps, {id: data.paragraphId})
+      let app = _.find($scope.apps, {id: data.paragraphId});
       if (app) {
-        scope = getAppScope(app)
-        registry = getAppRegistry(app)
+        scope = getAppScope(app);
+        registry = getAppRegistry(app);
       } else {
         // no matching app in this paragraph
-        return
+        return;
       }
 
-      let varName = data.angularObject.name
+      let varName = data.angularObject.name;
 
       if (angular.equals(data.angularObject.object, scope[varName])) {
         // return when update has no change
-        return
+        return;
       }
 
       if (!registry[varName]) {
         registry[varName] = {
           interpreterGroupId: data.interpreterGroupId,
           noteId: data.noteId,
-          paragraphId: data.paragraphId
-        }
+          paragraphId: data.paragraphId,
+        };
       } else {
-        registry[varName].noteId = registry[varName].noteId || data.noteId
-        registry[varName].paragraphId = registry[varName].paragraphId || data.paragraphId
+        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])
+        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
+            registry[varName].skipEmit = false;
+            return;
           }
           websocketMsgSrv.updateAngularObject(
             registry[varName].noteId,
             registry[varName].paragraphId,
             varName,
             newValue,
-            registry[varName].interpreterGroupId)
-        })
+            registry[varName].interpreterGroupId);
+        });
       }
-      console.log('angular object (paragraph) created %o', varName)
-      scope[varName] = data.angularObject.object
+      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) {
-        let funcName = varName.substring((ANGULAR_FUNCTION_OBJECT_NAME_PREFIX).length)
-        scope[funcName] = function () {
+        let funcName = varName.substring((ANGULAR_FUNCTION_OBJECT_NAME_PREFIX).length);
+        scope[funcName] = function() {
           // eslint-disable-next-line prefer-rest-params
-          scope[varName] = arguments
+          scope[varName] = arguments;
           // eslint-disable-next-line prefer-rest-params
-          console.log('angular function (paragraph) invoked %o', arguments)
-        }
+          console.log('angular function (paragraph) invoked %o', arguments);
+        };
 
-        console.log('angular function (paragraph) created %o', scope[funcName])
+        console.log('angular function (paragraph) created %o', scope[funcName]);
       }
     }
-  })
+  });
 
-  $scope.$on('angularObjectRemove', function (event, data) {
-    let noteId = $route.current.pathParams.noteId
+  $scope.$on('angularObjectRemove', function(event, data) {
+    let noteId = $route.current.pathParams.noteId;
     if (!data.noteId || data.noteId === noteId) {
-      let scope
-      let registry
+      let scope;
+      let registry;
 
-      let app = _.find($scope.apps, {id: data.paragraphId})
+      let app = _.find($scope.apps, {id: data.paragraphId});
       if (app) {
-        scope = getAppScope(app)
-        registry = getAppRegistry(app)
+        scope = getAppScope(app);
+        registry = getAppRegistry(app);
       } else {
         // no matching app in this paragraph
-        return
+        return;
       }
 
-      let varName = data.name
+      let varName = data.name;
 
       // clear watcher
       if (registry[varName]) {
-        registry[varName].clearWatcher()
-        registry[varName] = undefined
+        registry[varName].clearWatcher();
+        registry[varName] = undefined;
       }
 
       // remove scope variable
-      scope[varName] = undefined
+      scope[varName] = undefined;
 
       // remove proxy for AngularFunction
       if (varName.indexOf(ANGULAR_FUNCTION_OBJECT_NAME_PREFIX) === 0) {
-        let funcName = varName.substring((ANGULAR_FUNCTION_OBJECT_NAME_PREFIX).length)
-        scope[funcName] = undefined
+        let funcName = varName.substring((ANGULAR_FUNCTION_OBJECT_NAME_PREFIX).length);
+        scope[funcName] = undefined;
       }
     }
-  })
+  });
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/notebook/revisions-comparator/revisions-comparator.component.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/revisions-comparator/revisions-comparator.component.js b/zeppelin-web/src/app/notebook/revisions-comparator/revisions-comparator.component.js
index 45db38a..debdb6e 100644
--- a/zeppelin-web/src/app/notebook/revisions-comparator/revisions-comparator.component.js
+++ b/zeppelin-web/src/app/notebook/revisions-comparator/revisions-comparator.component.js
@@ -12,81 +12,81 @@
  * limitations under the License.
  */
 
-import revisionsComparatorTemplate from './revisions-comparator.html'
-import './revisions-comparator.css'
-import moment from 'moment'
+import revisionsComparatorTemplate from './revisions-comparator.html';
+import './revisions-comparator.css';
+import moment from 'moment';
 
 function RevisionsComparatorController($scope, websocketMsgSrv, $routeParams) {
-  'ngInject'
+  'ngInject';
 
-  $scope.firstNoteRevisionForCompare = null
-  $scope.secondNoteRevisionForCompare = null
-  $scope.mergeNoteRevisionsForCompare = null
-  $scope.currentParagraphDiffDisplay = null
-  $scope.currentFirstRevisionForCompare = 'Choose...'
-  $scope.currentSecondRevisionForCompare = 'Choose...'
+  $scope.firstNoteRevisionForCompare = null;
+  $scope.secondNoteRevisionForCompare = null;
+  $scope.mergeNoteRevisionsForCompare = null;
+  $scope.currentParagraphDiffDisplay = null;
+  $scope.currentFirstRevisionForCompare = 'Choose...';
+  $scope.currentSecondRevisionForCompare = 'Choose...';
 
-  $scope.getNoteRevisionForReview = function (revision, position) {
+  $scope.getNoteRevisionForReview = function(revision, position) {
     if (position) {
       if (position === 'first') {
-        $scope.currentFirstRevisionForCompare = revision.message
+        $scope.currentFirstRevisionForCompare = revision.message;
       } else {
-        $scope.currentSecondRevisionForCompare = revision.message
+        $scope.currentSecondRevisionForCompare = revision.message;
       }
-      websocketMsgSrv.getNoteByRevisionForCompare($routeParams.noteId, revision.id, position)
+      websocketMsgSrv.getNoteByRevisionForCompare($routeParams.noteId, revision.id, position);
     }
-  }
+  };
 
   // compare revisions
-  $scope.compareRevisions = function () {
+  $scope.compareRevisions = function() {
     if ($scope.firstNoteRevisionForCompare && $scope.secondNoteRevisionForCompare) {
-      let paragraphs1 = $scope.firstNoteRevisionForCompare.note.paragraphs
-      let paragraphs2 = $scope.secondNoteRevisionForCompare.note.paragraphs
-      let added = 'added'
-      let deleted = 'deleted'
-      let compared = 'compared'
-      let merge = []
+      let paragraphs1 = $scope.firstNoteRevisionForCompare.note.paragraphs;
+      let paragraphs2 = $scope.secondNoteRevisionForCompare.note.paragraphs;
+      let added = 'added';
+      let deleted = 'deleted';
+      let compared = 'compared';
+      let merge = [];
       for (let p1 of paragraphs1) {
-        let p2 = null
+        let p2 = null;
         for (let p of paragraphs2) {
           if (p1.id === p.id) {
-            p2 = p
-            break
+            p2 = p;
+            break;
           }
         }
         if (p2 === null) {
-          merge.push({paragraph: p1, firstString: (p1.text || '').split('\n')[0], type: deleted})
+          merge.push({paragraph: p1, firstString: (p1.text || '').split('\n')[0], type: deleted});
         } else {
-          let colorClass = ''
-          let span = null
-          let text1 = p1.text || ''
-          let text2 = p2.text || ''
-
-          let diff = window.JsDiff.diffLines(text1, text2)
-          let diffHtml = document.createDocumentFragment()
-          let identical = true
-          let identicalClass = 'color-black'
-
-          diff.forEach(function (part) {
-            colorClass = part.added ? 'color-green-row' : part.removed ? 'color-red-row' : identicalClass
-            span = document.createElement('span')
-            span.className = colorClass
+          let colorClass = '';
+          let span = null;
+          let text1 = p1.text || '';
+          let text2 = p2.text || '';
+
+          let diff = window.JsDiff.diffLines(text1, text2);
+          let diffHtml = document.createDocumentFragment();
+          let identical = true;
+          let identicalClass = 'color-black';
+
+          diff.forEach(function(part) {
+            colorClass = part.added ? 'color-green-row' : part.removed ? 'color-red-row' : identicalClass;
+            span = document.createElement('span');
+            span.className = colorClass;
             if (identical && colorClass !== identicalClass) {
-              identical = false
+              identical = false;
             }
 
-            let str = part.value
+            let str = part.value;
 
             if (str[str.length - 1] !== '\n') {
-              str = str + '\n'
+              str = str + '\n';
             }
 
-            span.appendChild(document.createTextNode(str))
-            diffHtml.appendChild(span)
-          })
+            span.appendChild(document.createTextNode(str));
+            diffHtml.appendChild(span);
+          });
 
-          let pre = document.createElement('pre')
-          pre.appendChild(diffHtml)
+          let pre = document.createElement('pre');
+          pre.appendChild(diffHtml);
 
           merge.push(
             {
@@ -94,88 +94,88 @@ function RevisionsComparatorController($scope, websocketMsgSrv, $routeParams) {
               diff: pre.innerHTML,
               identical: identical,
               firstString: (p1.text || '').split('\n')[0],
-              type: compared
-            })
+              type: compared,
+            });
         }
       }
 
       for (let p2 of paragraphs2) {
-        let p1 = null
+        let p1 = null;
         for (let p of paragraphs1) {
           if (p2.id === p.id) {
-            p1 = p
-            break
+            p1 = p;
+            break;
           }
         }
         if (p1 === null) {
-          merge.push({paragraph: p2, firstString: (p2.text || '').split('\n')[0], type: added})
+          merge.push({paragraph: p2, firstString: (p2.text || '').split('\n')[0], type: added});
         }
       }
 
-      merge.sort(function (a, b) {
+      merge.sort(function(a, b) {
         if (a.type === added) {
-          return -1
+          return -1;
         }
         if (a.type === compared) {
-          return 1
+          return 1;
         }
         if (a.type === deleted) {
           if (b.type === compared) {
-            return -1
+            return -1;
           } else {
-            return 1
+            return 1;
           }
         }
-      })
+      });
 
-      $scope.mergeNoteRevisionsForCompare = merge
+      $scope.mergeNoteRevisionsForCompare = merge;
 
       if ($scope.currentParagraphDiffDisplay !== null) {
-        $scope.changeCurrentParagraphDiffDisplay($scope.currentParagraphDiffDisplay.paragraph.id)
+        $scope.changeCurrentParagraphDiffDisplay($scope.currentParagraphDiffDisplay.paragraph.id);
       }
     }
-  }
+  };
 
-  $scope.$on('noteRevisionForCompare', function (event, data) {
-    console.debug('received note revision for compare %o', data)
+  $scope.$on('noteRevisionForCompare', function(event, data) {
+    console.debug('received note revision for compare %o', data);
     if (data.note && data.position) {
       if (data.position === 'first') {
-        $scope.firstNoteRevisionForCompare = data
+        $scope.firstNoteRevisionForCompare = data;
       } else {
-        $scope.secondNoteRevisionForCompare = data
+        $scope.secondNoteRevisionForCompare = data;
       }
 
       if ($scope.firstNoteRevisionForCompare !== null && $scope.secondNoteRevisionForCompare !== null &&
         $scope.firstNoteRevisionForCompare.revisionId !== $scope.secondNoteRevisionForCompare.revisionId) {
-        $scope.compareRevisions()
+        $scope.compareRevisions();
       }
     }
-  })
+  });
 
-  $scope.formatRevisionDate = function (date) {
-    return moment.unix(date).format('MMMM Do YYYY, h:mm:ss a')
-  }
+  $scope.formatRevisionDate = function(date) {
+    return moment.unix(date).format('MMMM Do YYYY, h:mm:ss a');
+  };
 
-  $scope.changeCurrentParagraphDiffDisplay = function (paragraphId) {
+  $scope.changeCurrentParagraphDiffDisplay = function(paragraphId) {
     for (let p of $scope.mergeNoteRevisionsForCompare) {
       if (p.paragraph.id === paragraphId) {
-        $scope.currentParagraphDiffDisplay = p
-        return
+        $scope.currentParagraphDiffDisplay = p;
+        return;
       }
     }
-    $scope.currentParagraphDiffDisplay = null
-  }
+    $scope.currentParagraphDiffDisplay = null;
+  };
 }
 
 export const RevisionsComparatorComponent = {
   template: revisionsComparatorTemplate,
   controller: RevisionsComparatorController,
   bindings: {
-    noteRevisions: '<'
-  }
-}
+    noteRevisions: '<',
+  },
+};
 
 export const RevisionsComparatorModule = angular
   .module('zeppelinWebApp')
   .component('revisionsComparator', RevisionsComparatorComponent)
-  .name
+  .name;

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/notebook/save-as/browser-detect.service.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/save-as/browser-detect.service.js b/zeppelin-web/src/app/notebook/save-as/browser-detect.service.js
index a31e9af..0c74b45 100644
--- a/zeppelin-web/src/app/notebook/save-as/browser-detect.service.js
+++ b/zeppelin-web/src/app/notebook/save-as/browser-detect.service.js
@@ -12,28 +12,28 @@
  * limitations under the License.
  */
 
-angular.module('zeppelinWebApp').service('browserDetectService', BrowserDetectService)
+angular.module('zeppelinWebApp').service('browserDetectService', BrowserDetectService);
 
-function BrowserDetectService () {
-  this.detectIE = function () {
-    let ua = window.navigator.userAgent
-    let msie = ua.indexOf('MSIE ')
+function BrowserDetectService() {
+  this.detectIE = function() {
+    let ua = window.navigator.userAgent;
+    let msie = ua.indexOf('MSIE ');
     if (msie > 0) {
       // IE 10 or older => return version number
-      return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10)
+      return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
     }
-    let trident = ua.indexOf('Trident/')
+    let trident = ua.indexOf('Trident/');
     if (trident > 0) {
       // IE 11 => return version number
-      let rv = ua.indexOf('rv:')
-      return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10)
+      let rv = ua.indexOf('rv:');
+      return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
     }
-    let edge = ua.indexOf('Edge/')
+    let edge = ua.indexOf('Edge/');
     if (edge > 0) {
       // IE 12 (aka Edge) => return version number
-      return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10)
+      return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
     }
     // other browser
-    return false
-  }
+    return false;
+  };
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/notebook/save-as/save-as.service.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/save-as/save-as.service.js b/zeppelin-web/src/app/notebook/save-as/save-as.service.js
index ff463c8..72a54d1 100644
--- a/zeppelin-web/src/app/notebook/save-as/save-as.service.js
+++ b/zeppelin-web/src/app/notebook/save-as/save-as.service.js
@@ -12,45 +12,45 @@
  * limitations under the License.
  */
 
-angular.module('zeppelinWebApp').service('saveAsService', SaveAsService)
+angular.module('zeppelinWebApp').service('saveAsService', SaveAsService);
 
-function SaveAsService (browserDetectService) {
-  'ngInject'
+function SaveAsService(browserDetectService) {
+  'ngInject';
 
-  this.saveAs = function (content, filename, extension) {
-    let BOM = '\uFEFF'
+  this.saveAs = function(content, filename, extension) {
+    let BOM = '\uFEFF';
     if (browserDetectService.detectIE()) {
-      angular.element('body').append('<iframe id="SaveAsId" style="display: none"></iframe>')
-      let frameSaveAs = angular.element('body > iframe#SaveAsId')[0].contentWindow
-      content = BOM + content
-      frameSaveAs.document.open('text/json', 'replace')
-      frameSaveAs.document.write(content)
-      frameSaveAs.document.close()
-      frameSaveAs.focus()
-      let t1 = Date.now()
-      frameSaveAs.document.execCommand('SaveAs', false, filename + '.' + extension)
-      let t2 = Date.now()
+      angular.element('body').append('<iframe id="SaveAsId" style="display: none"></iframe>');
+      let frameSaveAs = angular.element('body > iframe#SaveAsId')[0].contentWindow;
+      content = BOM + content;
+      frameSaveAs.document.open('text/json', 'replace');
+      frameSaveAs.document.write(content);
+      frameSaveAs.document.close();
+      frameSaveAs.focus();
+      let t1 = Date.now();
+      frameSaveAs.document.execCommand('SaveAs', false, filename + '.' + extension);
+      let t2 = Date.now();
 
       // This means, this version of IE dosen't support auto download of a file with extension provided in param
       // falling back to ".txt"
       if (t1 === t2) {
-        frameSaveAs.document.execCommand('SaveAs', true, filename + '.txt')
+        frameSaveAs.document.execCommand('SaveAs', true, filename + '.txt');
       }
-      angular.element('body > iframe#SaveAsId').remove()
+      angular.element('body > iframe#SaveAsId').remove();
     } else {
-      let binaryData = []
-      binaryData.push(BOM)
-      binaryData.push(content)
-      content = window.URL.createObjectURL(new Blob(binaryData))
+      let binaryData = [];
+      binaryData.push(BOM);
+      binaryData.push(content);
+      content = window.URL.createObjectURL(new Blob(binaryData));
 
-      angular.element('body').append('<a id="SaveAsId"></a>')
-      let saveAsElement = angular.element('body > a#SaveAsId')
-      saveAsElement.attr('href', content)
-      saveAsElement.attr('download', filename + '.' + extension)
-      saveAsElement.attr('target', '_blank')
-      saveAsElement[0].click()
-      saveAsElement.remove()
-      window.URL.revokeObjectURL(content)
+      angular.element('body').append('<a id="SaveAsId"></a>');
+      let saveAsElement = angular.element('body > a#SaveAsId');
+      saveAsElement.attr('href', content);
+      saveAsElement.attr('download', filename + '.' + extension);
+      saveAsElement.attr('target', '_blank');
+      saveAsElement[0].click();
+      saveAsElement.remove();
+      window.URL.revokeObjectURL(content);
     }
-  }
+  };
 }