You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by ah...@apache.org on 2017/04/20 04:52:43 UTC

[4/8] zeppelin git commit: [ZEPPELIN-1940] lint rule set is NOT applied at all.

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/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 5708339..71104b5 100644
--- a/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js
@@ -12,25 +12,25 @@
  * limitations under the License.
  */
 
-import TableData from '../../../tabledata/tabledata';
-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 TableData from '../../../tabledata/tabledata'
+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 {
   DefaultDisplayType,
   SpellResult,
 } from '../../../spell'
-import { ParagraphStatus, } from '../paragraph.status';
+import { ParagraphStatus, } from '../paragraph.status'
 
-angular.module('zeppelinWebApp').controller('ResultCtrl', ResultCtrl);
+angular.module('zeppelinWebApp').controller('ResultCtrl', ResultCtrl)
 
-function ResultCtrl($scope, $rootScope, $route, $window, $routeParams, $location,
+function ResultCtrl ($scope, $rootScope, $route, $window, $routeParams, $location,
                     $timeout, $compile, $http, $q, $templateRequest, $sce, websocketMsgSrv,
                     baseUrlSrv, ngToast, saveAsService, noteVarShareService, heliumService) {
-  'ngInject';
+  'ngInject'
 
   /**
    * Built-in visualizations
@@ -70,12 +70,12 @@ function ResultCtrl($scope, $rootScope, $route, $window, $routeParams, $location
       name: 'Scatter Chart',
       icon: '<i class="cf cf-scatter-chart"></i>'
     }
-  ];
+  ]
 
   /**
    * Holds class and actual runtime instance and related infos of built-in visualizations
    */
-  var builtInVisualizations = {
+  let builtInVisualizations = {
     'table': {
       class: TableVisualization,
       instance: undefined   // created from setGraphMode()
@@ -100,95 +100,95 @@ function ResultCtrl($scope, $rootScope, $route, $window, $routeParams, $location
       class: ScatterchartVisualization,
       instance: undefined
     }
-  };
+  }
 
   // type
-  $scope.type;
+  $scope.type = null
 
   // Data of the result
-  var data;
+  let data
 
   // config
-  $scope.config;
+  $scope.config = null
 
   // resultId = paragraph.id + index
-  $scope.id;
+  $scope.id = null
 
   // referece to paragraph
-  var paragraph;
+  let paragraph
 
   // index of the result
-  var resultIndex;
+  let resultIndex
 
   // TableData instance
-  var tableData;
+  let tableData
 
   // available columns in tabledata
-  $scope.tableDataColumns = [];
+  $scope.tableDataColumns = []
 
   // enable helium
-  var enableHelium = false;
+  let enableHelium = false
 
   // graphMode
-  $scope.graphMode;
+  $scope.graphMode = null
 
   // image data
-  $scope.imageData;
+  $scope.imageData = null
 
   // queue for append output
-  const textResultQueueForAppend = [];
+  const textResultQueueForAppend = []
 
-  $scope.init = function(result, config, paragraph, index) {
+  $scope.init = function (result, config, paragraph, index) {
     // register helium plugin vis
-    var visBundles = heliumService.getVisualizationBundles();
-    visBundles.forEach(function(vis) {
+    let visBundles = heliumService.getVisualizationBundles()
+    visBundles.forEach(function (vis) {
       $scope.builtInTableDataVisualizationList.push({
         id: vis.id,
         name: vis.name,
         icon: $sce.trustAsHtml(vis.icon)
-      });
+      })
       builtInVisualizations[vis.id] = {
         class: vis.class
-      };
-    });
+      }
+    })
 
-    updateData(result, config, paragraph, index);
-    renderResult($scope.type);
-  };
+    updateData(result, config, paragraph, index)
+    renderResult($scope.type)
+  }
 
-  function isDOMLoaded(targetElemId) {
-    const elem = angular.element(`#${targetElemId}`);
-    return elem.length;
+  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
     }
 
-    var refresh = !angular.equals(newConfig, $scope.config) ||
+    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
@@ -200,159 +200,158 @@ function ResultCtrl($scope, $rootScope, $route, $window, $routeParams, $location
     if (paragraph.id === data.paragraphId &&
       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)
     }
-  });
+  })
 
-  var 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') {
-      tableData = new TableData();
-      tableData.loadParagraphResult({type: $scope.type, msg: data});
-      $scope.tableDataColumns = tableData.columns;
-      $scope.tableDataComment = tableData.comment;
+      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;
+      $scope.imageData = data
     }
-  };
+  }
 
-  $scope.createDisplayDOMId = function(baseDOMId, type) {
+  $scope.createDisplayDOMId = function (baseDOMId, type) {
     if (type === DefaultDisplayType.TABLE) {
-      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) {
-        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);
+        renderText(targetElemId, data)
       } 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`;
+        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;
+          for (let i = 0; i < dataWithTypes.length; i++) {
+            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);
+        retryUntilElemIsLoaded(containerDOMId, afterLoaded)
       })
       .catch(error => {
-        console.error(`Failed to render custom display: ${$scope.type}\n` + error);
-      });
-  };
+        console.error(`Failed to render custom display: ${$scope.type}\n` + error)
+      })
+  }
 
   /**
    * generates actually object which will be consumed from `data` property
@@ -364,271 +363,269 @@ function ResultCtrl($scope, $rootScope, $route, $window, $routeParams, $location
    * @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}`);
+  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);
-        });
-        /*eslint new-cap: [2, {"capIsNewExceptions": ["MathJax.Hub.Queue"]}]*/
-        MathJax.Hub.Queue(['Typeset', MathJax.Hub, elem[0]]);
+        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]])
       },
-      (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`;
-  };
+    return `p${resultId}_text`
+  }
 
-  const renderText = function(targetElemId, data) {
-    const elem = angular.element(`#${targetElemId}`);
+  const renderText = function (targetElemId, data) {
+    const elem = angular.element(`#${targetElemId}`)
     handleData(data, DefaultDisplayType.TEXT,
       (generated) => {
         // clear all lines before render
-        removeChildrenDOM(targetElemId);
+        removeChildrenDOM(targetElemId)
 
         if (generated) {
-          const divDOM = angular.element('<div></div>').text(generated);
-          elem.append(divDOM);
+          const divDOM = angular.element('<div></div>').text(generated)
+          elem.append(divDOM)
         }
 
-        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 = textResultQueueForAppend.pop();
-      elem.append(angular.element('<div></div>').text(line));
+      const line = textResultQueueForAppend.pop()
+      elem.append(angular.element('<div></div>').text(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) {
+  const getTrSettingElem = function (scopeId, graphMode) {
     return angular.element('#trsetting' + scopeId + '_' + graphMode)
   }
 
-  const getVizSettingElem = function(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' }
 
-    const builtInViz = builtInVisualizations[graphMode];
-    if (!builtInViz) { return; }
+    const builtInViz = builtInVisualizations[graphMode]
+    if (!builtInViz) { return }
 
     // deactive previsouly active visualization
     for (let t in builtInVisualizations) {
-      const v = builtInVisualizations[t].instance;
+      const v = builtInVisualizations[t].instance
 
       if (t !== graphMode && v && v.isActive()) {
-        v.deactivate();
-        break;
+        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)
           // 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;
-          builtInViz.instance._createNewScope = createNewScope;
-          const transformation = builtInViz.instance.getTransformation();
-          transformation._emitter = emitter;
-          transformation._templateRequest = $templateRequest;
-          transformation._compile = $compile;
-          transformation._createNewScope = createNewScope;
+          const emitter = function (graphSetting) {
+            commitVizConfigChange(graphSetting, graphMode)
+          }
+          builtInViz.instance._emitter = emitter
+          builtInViz.instance._compile = $compile
+          builtInViz.instance._createNewScope = createNewScope
+          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);
+      console.log('Refresh data %o', tableData)
 
-      afterLoaded = function(loadedElem) {
+      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);
-      };
-
+        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)
+      }
     } 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) {
-    var newConfig = angular.copy($scope.config);
-    var 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)
+  }
 
-  var createNewScope = function() {
-    return $rootScope.$new(true);
-  };
+  const 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;
+  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);
+      }, newParagraphConfig.results[resultIndex], paragraph, resultIndex)
+      renderResult($scope.type, true)
     } else {
-      websocketMsgSrv.commitParagraph(paragraph.id, title, text, newParagraphConfig, params);
+      websocketMsgSrv.commitParagraph(paragraph.id, title, text, newParagraphConfig, params)
     }
-  };
+  }
 
-  $scope.toggleGraphSetting = function() {
-    var 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
     }
-    var newParams = angular.copy(paragraph.settings.params);
+    let newParams = angular.copy(paragraph.settings.params)
 
-    commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams);
-  };
+    commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams)
+  }
 
-  var getVizConfig = function(vizId) {
-    var config;
-    var 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) {
@@ -636,300 +633,300 @@ function ResultCtrl($scope, $rootScope, $route, $window, $routeParams, $location
           keys: angular.copy(graph.keys),
           groups: angular.copy(graph.groups),
           values: angular.copy(graph.values)
-        };
+        }
       }
     }
-    console.log('getVizConfig', config);
-    return config;
-  };
+    console.log('getVizConfig', config)
+    return config
+  }
 
-  var commitVizConfigChange = function(config, vizId) {
-    var 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;
-    }
-    console.log('committVizConfig', newConfig);
-    var newParams = angular.copy(paragraph.settings.params);
-    commitParagraphResult(paragraph.title, paragraph.text, newConfig, newParams);
-  };
+      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)
+    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) {
-      var builtInViz = builtInVisualizations[$scope.graphMode];
+      let builtInViz = builtInVisualizations[$scope.graphMode]
       if (builtInViz && builtInViz.instance) {
-        builtInViz.instance.resize();
+        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);
+  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) {
-    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) {
+    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 (var titleIndex in tableData.columns) {
-      dsv += tableData.columns[titleIndex].name + delimiter;
+    for (let 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();
+    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;
+          dsvRow += '"' + stringValue + '"' + delimiter
         } else {
-          dsvRow += row[index] + delimiter;
+          dsvRow += row[index] + delimiter
         }
       }
-      dsv += dsvRow.substring(0, dsvRow.length - 1) + '\n';
+      dsv += dsvRow.substring(0, dsvRow.length - 1) + '\n'
     }
-    var 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 ----------------
-  var 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) {
-    var newConfig = angular.copy($scope.config);
-    var 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) {
-    var 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);
-      });
-  };
+  }
 
-  var commitConfig = function(config, params) {
-    commitParagraphResult(paragraph.title, paragraph.text, config, params);
-  };
+  const commitConfig = function (config, params) {
+    commitParagraphResult(paragraph.title, paragraph.text, config, params)
+  }
 
-  var getApplicationStates = function() {
-    var 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
-        });
-      });
+        })
+      })
     }
 
     // update or remove app states no longer exists
-    _.forEach($scope.apps, function(currentAppState, idx) {
-      var 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)
       }
-    });
-  };
+    })
+  }
 
-  var getSuggestions = function() {
+  const getSuggestions = function () {
     // Get suggested apps
-    var 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;
+      .success(function (data, status, headers, config) {
+        $scope.suggestion = data.body
       })
-      .error(function(err, status, headers, config) {
-        console.log('Error %o', err);
-      });
-  };
+      .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) {
-      var 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
 
-        var paragraphAppState = _.find(paragraph.apps, {id: data.appId});
-        paragraphAppState.output = app.output;
+        let 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);
+        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) {
-      var 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
 
-        var paragraphAppState = _.find(paragraph.apps, {id: data.appId});
-        paragraphAppState.output = app.output;
+        let 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');
+        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) {
-      var 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: ''
-        };
+        }
 
-        $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) {
-      var app = _.find($scope.apps, {id: data.appId});
+      let 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;
+        app.status = data.status
+        let paragraphAppState = _.find(paragraph.apps, {id: data.appId})
+        paragraphAppState.status = app.status
       }
     }
-  });
+  })
 
-  var getAppRegistry = function(appState) {
+  let getAppRegistry = function (appState) {
     if (!appState.registry) {
-      appState.registry = {};
+      appState.registry = {}
     }
 
-    return appState.registry;
-  };
+    return appState.registry
+  }
 
-  var 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) {
-    var noteId = $route.current.pathParams.noteId;
+  $scope.$on('angularObjectUpdate', function (event, data) {
+    let noteId = $route.current.pathParams.noteId
     if (!data.noteId || data.noteId === noteId) {
-      var scope;
-      var registry;
+      let scope
+      let registry
 
-      var 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
       }
 
-      var 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]) {
@@ -937,76 +934,78 @@ function ResultCtrl($scope, $rootScope, $route, $window, $routeParams, $location
           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].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) {
-        var funcName = varName.substring((ANGULAR_FUNCTION_OBJECT_NAME_PREFIX).length);
-        scope[funcName] = function() {
-          scope[varName] = arguments;
-          console.log('angular function (paragraph) invoked %o', arguments);
-        };
+        let funcName = varName.substring((ANGULAR_FUNCTION_OBJECT_NAME_PREFIX).length)
+        scope[funcName] = function () {
+          // eslint-disable-next-line prefer-rest-params
+          scope[varName] = arguments
+          // eslint-disable-next-line prefer-rest-params
+          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) {
-    var noteId = $route.current.pathParams.noteId;
+  $scope.$on('angularObjectRemove', function (event, data) {
+    let noteId = $route.current.pathParams.noteId
     if (!data.noteId || data.noteId === noteId) {
-      var scope;
-      var registry;
+      let scope
+      let registry
 
-      var 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
       }
 
-      var 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) {
-        var 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/19b0f30f/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 14357fd..2e35338 100644
--- a/zeppelin-web/src/app/notebookRepos/notebookRepos.controller.js
+++ b/zeppelin-web/src/app/notebookRepos/notebookRepos.controller.js
@@ -12,77 +12,76 @@
  * limitations under the License.
  */
 
-angular.module('zeppelinWebApp').controller('NotebookReposCtrl', NotebookReposCtrl);
+angular.module('zeppelinWebApp').controller('NotebookReposCtrl', NotebookReposCtrl)
 
-function NotebookReposCtrl($http, baseUrlSrv, ngToast) {
-  'ngInject';
+function NotebookReposCtrl ($http, baseUrlSrv, ngToast) {
+  'ngInject'
 
-  var vm = this;
-  vm.notebookRepos = [];
-  vm.showDropdownSelected = showDropdownSelected;
-  vm.saveNotebookRepo = saveNotebookRepo;
+  let vm = this
+  vm.notebookRepos = []
+  vm.showDropdownSelected = showDropdownSelected
+  vm.saveNotebookRepo = saveNotebookRepo
 
-  _init();
+  _init()
 
   // Public functions
 
-  function saveNotebookRepo(valueform, repo, data) {
-    console.log('data %o', data);
+  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});
+    }).success(function (data) {
+      let 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);
+        vm.notebookRepos[index] = data.body
+        console.log('repos %o, data %o', vm.notebookRepos, data.body)
       }
-      valueform.$show();
-    }).error(function() {
+      valueform.$show()
+    }).error(function () {
       ngToast.danger({
         content: 'We couldn\'t save that NotebookRepo\'s settings',
         verticalPosition: 'bottom',
         timeout: '3000'
-      });
-      valueform.$show();
-    });
+      })
+      valueform.$show()
+    })
 
-    return 'manual';
+    return 'manual'
   }
 
-  function showDropdownSelected(setting) {
-    var index = _.findIndex(setting.value, {'value': setting.selected});
+  function showDropdownSelected (setting) {
+    let index = _.findIndex(setting.value, {'value': setting.selected})
     if (index < 0) {
-      return 'No value';
+      return 'No value'
     } else {
-      return setting.value[index].name;
+      return setting.value[index].name
     }
   }
 
   // Private functions
 
-  function _getInterpreterSettings() {
+  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);
-    });
+      .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();
-  };
+  function _init () {
+    _getInterpreterSettings()
+  }
 }
-

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/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 f3ceb6a..cd7542d 100644
--- a/zeppelin-web/src/app/search/result-list.controller.js
+++ b/zeppelin-web/src/app/search/result-list.controller.js
@@ -12,108 +12,107 @@
  * limitations under the License.
  */
 
-angular.module('zeppelinWebApp').controller('SearchResultCtrl', SearchResultCtrl);
+angular.module('zeppelinWebApp').controller('SearchResultCtrl', SearchResultCtrl)
 
-function SearchResultCtrl($scope, $routeParams, searchService) {
-  'ngInject';
+function SearchResultCtrl ($scope, $routeParams, searchService) {
+  'ngInject'
 
-  $scope.isResult = true ;
-  $scope.searchTerm = $routeParams.searchTerm;
-  var results = searchService.search({'q': $routeParams.searchTerm}).query();
+  $scope.isResult = true
+  $scope.searchTerm = $routeParams.searchTerm
+  let results = searchService.search({'q': $routeParams.searchTerm}).query()
 
-  results.$promise.then(function(result) {
-    $scope.notes = result.body.map(function(note) {
+  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;
+        return note
       }
 
       note.id = note.id.replace('paragraph/', '?paragraph=') +
-        '&term=' + $routeParams.searchTerm;
+        '&term=' + $routeParams.searchTerm
 
-      return note;
-    });
+      return note
+    })
     if ($scope.notes.length === 0) {
-      $scope.isResult = false;
+      $scope.isResult = false
     } else {
-      $scope.isResult = true;
+      $scope.isResult = true
     }
 
-    $scope.$on('$routeChangeStart', function(event, next, current) {
+    $scope.$on('$routeChangeStart', function (event, next, current) {
       if (next.originalPath !== '/search/:searchTerm') {
-        searchService.searchTerm = '';
+        searchService.searchTerm = ''
       }
-    });
-  });
+    })
+  })
 
-  $scope.page = 0;
-  $scope.allResults = false;
+  $scope.page = 0
+  $scope.allResults = false
 
-  $scope.highlightSearchResults = function(note) {
-    return function(_editor) {
-      function getEditorMode(text) {
-        var editorModes = {
+  $scope.highlightSearchResults = function (note) {
+    return function (_editor) {
+      function getEditorMode (text) {
+        let 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');
+        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;
+      let 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));
+      _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;
+      function getIndeces (term) {
+        return function (str) {
+          let indeces = []
+          let i = -1
           while ((i = str.indexOf(term, i + 1)) >= 0) {
-            indeces.push(i);
+            indeces.push(i)
           }
-          return indeces;
-        };
+          return indeces
+        }
       }
 
-      var result = '';
+      let result = ''
       if (note.header !== '') {
-        result = note.header + '\n\n' + note.snippet;
+        result = note.header + '\n\n' + note.snippet
       } else {
-        result = note.snippet;
+        result = note.snippet
       }
 
-      var lines = result
+      let lines = result
         .split('\n')
-        .map(function(line, row) {
-
-          var match = line.match(/<B>(.+?)<\/B>/);
+        .map(function (line, row) {
+          let match = line.match(/<B>(.+?)<\/B>/)
 
           // return early if nothing to highlight
           if (!match) {
-            return line;
+            return line
           }
 
-          var term = match[1];
-          var __line = line
+          let term = match[1]
+          let __line = line
             .replace(/<B>/g, '')
-            .replace(/<\/B>/g, '');
+            .replace(/<\/B>/g, '')
 
-          var indeces = getIndeces(term)(__line);
+          let indeces = getIndeces(term)(__line)
 
-          indeces.forEach(function(start) {
-            var end = start + term.length;
+          indeces.forEach(function (start) {
+            let end = start + term.length
             if (note.header !== '' && row === 0) {
               _editor
                 .getSession()
@@ -121,14 +120,14 @@ function SearchResultCtrl($scope, $routeParams, searchService) {
                   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()
@@ -136,21 +135,19 @@ function SearchResultCtrl($scope, $routeParams, searchService) {
                   new Range(row, start, row, end),
                   'search-results-highlight',
                   'line'
-                );
+                )
             }
-          });
-          return __line;
-        });
+          })
+          return __line
+        })
 
       // 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'));
+        lines.reduce(function (len, line) { return len + line.length }, 0)
+      )
 
-    };
-  };
+      _editor.getSession().setValue(lines.join('\n'))
+    }
+  }
 }
-

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/app/spell/index.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/spell/index.js b/zeppelin-web/src/app/spell/index.js
index 8ec4753..ac4343c 100644
--- a/zeppelin-web/src/app/spell/index.js
+++ b/zeppelin-web/src/app/spell/index.js
@@ -18,8 +18,8 @@
 export {
   DefaultDisplayType,
   SpellResult,
-} from './spell-result';
+} from './spell-result'
 
 export {
   SpellBase,
-} from './spell-base';
+} from './spell-base'

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/app/spell/spell-base.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/spell/spell-base.js b/zeppelin-web/src/app/spell/spell-base.js
index 6dcb576..0b4216f 100644
--- a/zeppelin-web/src/app/spell/spell-base.js
+++ b/zeppelin-web/src/app/spell/spell-base.js
@@ -15,16 +15,16 @@
  * limitations under the License.
  */
 
-/*eslint-disable no-unused-vars */
+/* eslint-disable no-unused-vars */
 import {
   DefaultDisplayType,
   SpellResult,
-} from './spell-result';
-/*eslint-enable no-unused-vars */
+} from './spell-result'
+/* eslint-enable no-unused-vars */
 
 export class SpellBase {
-  constructor(magic) {
-    this.magic = magic;
+  constructor (magic) {
+    this.magic = magic
   }
 
   /**
@@ -34,8 +34,8 @@ export class SpellBase {
    * @param config {Object}
    * @return {SpellResult}
    */
-  interpret(paragraphText, config) {
-    throw new Error('SpellBase.interpret() should be overrided');
+  interpret (paragraphText, config) {
+    throw new Error('SpellBase.interpret() should be overrided')
   }
 
   /**
@@ -43,7 +43,7 @@ export class SpellBase {
    * (e.g `%flowchart`)
    * @return {string}
    */
-  getMagic() {
-    return this.magic;
+  getMagic () {
+    return this.magic
   }
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/app/spell/spell-result.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/spell/spell-result.js b/zeppelin-web/src/app/spell/spell-result.js
index d62e97a..e8e2a0a 100644
--- a/zeppelin-web/src/app/spell/spell-result.js
+++ b/zeppelin-web/src/app/spell/spell-result.js
@@ -21,7 +21,7 @@ export const DefaultDisplayType = {
   HTML: 'HTML',
   ANGULAR: 'ANGULAR',
   TEXT: 'TEXT',
-};
+}
 
 export const DefaultDisplayMagic = {
   '%element': DefaultDisplayType.ELEMENT,
@@ -29,12 +29,12 @@ export const DefaultDisplayMagic = {
   '%html': DefaultDisplayType.HTML,
   '%angular': DefaultDisplayType.ANGULAR,
   '%text': DefaultDisplayType.TEXT,
-};
+}
 
 export class DataWithType {
-  constructor(data, type, magic, text) {
-    this.data = data;
-    this.type = type;
+  constructor (data, type, magic, text) {
+    this.data = data
+    this.type = type
 
     /**
      * keep for `DefaultDisplayType.ELEMENT` (function data type)
@@ -44,29 +44,29 @@ export class DataWithType {
      * since they don't have context where they are created.
      */
 
-    this.magic = magic;
-    this.text = text;
+    this.magic = magic
+    this.text = text
   }
 
-  static handleDefaultMagic(m) {
+  static handleDefaultMagic (m) {
     // let's use default display type instead of magic in case of default
     // to keep consistency with backend interpreter
     if (DefaultDisplayMagic[m]) {
-      return DefaultDisplayMagic[m];
+      return DefaultDisplayMagic[m]
     } else {
-      return m;
+      return m
     }
   }
 
-  static createPropagable(dataWithType) {
+  static createPropagable (dataWithType) {
     if (!SpellResult.isFunction(dataWithType.data)) {
-      return dataWithType;
+      return dataWithType
     }
 
-    const data = dataWithType.getText();
-    const type = dataWithType.getMagic();
+    const data = dataWithType.getText()
+    const type = dataWithType.getMagic()
 
-    return new DataWithType(data, type);
+    return new DataWithType(data, type)
   }
 
   /**
@@ -75,45 +75,45 @@ export class DataWithType {
    * @param customDisplayType
    * @return {Array<DataWithType>}
    */
-  static parseStringData(data, customDisplayMagic) {
-    function availableMagic(magic) {
-      return magic && (DefaultDisplayMagic[magic] || customDisplayMagic[magic]);
+  static parseStringData (data, customDisplayMagic) {
+    function availableMagic (magic) {
+      return magic && (DefaultDisplayMagic[magic] || customDisplayMagic[magic])
     }
 
-    const splited = data.split('\n');
+    const splited = data.split('\n')
 
-    const gensWithTypes = [];
-    let mergedGens = [];
-    let previousMagic = DefaultDisplayType.TEXT;
+    const gensWithTypes = []
+    let mergedGens = []
+    let previousMagic = DefaultDisplayType.TEXT
 
     // create `DataWithType` whenever see available display type.
-    for(let i = 0; i < splited.length; i++) {
-      const g = splited[i];
-      const magic = SpellResult.extractMagic(g);
+    for (let i = 0; i < splited.length; i++) {
+      const g = splited[i]
+      const magic = SpellResult.extractMagic(g)
 
       // create `DataWithType` only if see new magic
       if (availableMagic(magic) && mergedGens.length > 0) {
-        gensWithTypes.push(new DataWithType(mergedGens.join(''), previousMagic));
-        mergedGens = [];
+        gensWithTypes.push(new DataWithType(mergedGens.join(''), previousMagic))
+        mergedGens = []
       }
 
       // accumulate `data` to mergedGens
       if (availableMagic(magic)) {
-        const withoutMagic = g.split(magic)[1];
-        mergedGens.push(`${withoutMagic}\n`);
-        previousMagic = DataWithType.handleDefaultMagic(magic);
+        const withoutMagic = g.split(magic)[1]
+        mergedGens.push(`${withoutMagic}\n`)
+        previousMagic = DataWithType.handleDefaultMagic(magic)
       } else {
-        mergedGens.push(`${g}\n`);
+        mergedGens.push(`${g}\n`)
       }
     }
 
     // cleanup the last `DataWithType`
     if (mergedGens.length > 0) {
-      previousMagic = DataWithType.handleDefaultMagic(previousMagic);
-      gensWithTypes.push(new DataWithType(mergedGens.join(''), previousMagic));
+      previousMagic = DataWithType.handleDefaultMagic(previousMagic)
+      gensWithTypes.push(new DataWithType(mergedGens.join(''), previousMagic))
     }
 
-    return gensWithTypes;
+    return gensWithTypes
   }
 
   /**
@@ -126,45 +126,44 @@ export class DataWithType {
    * @param textWithoutMagic
    * @return {Promise<Array<DataWithType>>}
    */
-  static produceMultipleData(dataWithType, customDisplayType,
+  static produceMultipleData (dataWithType, customDisplayType,
                              magic, textWithoutMagic) {
-    const data = dataWithType.getData();
-    const type = dataWithType.getType();
+    const data = dataWithType.getData()
+    const type = dataWithType.getType()
 
     // if the type is specified, just return it
     // handle non-specified dataWithTypes only
     if (type) {
-      return new Promise((resolve) => { resolve([dataWithType]); });
+      return new Promise((resolve) => { resolve([dataWithType]) })
     }
 
-    let wrapped;
+    let wrapped
 
     if (SpellResult.isFunction(data)) {
       // if data is a function, we consider it as ELEMENT type.
       wrapped = new Promise((resolve) => {
         const dt = new DataWithType(
-          data, DefaultDisplayType.ELEMENT, magic, textWithoutMagic);
-        const result = [dt];
-        return resolve(result);
-      });
+          data, DefaultDisplayType.ELEMENT, magic, textWithoutMagic)
+        const result = [dt]
+        return resolve(result)
+      })
     } else if (SpellResult.isPromise(data)) {
       // if data is a promise,
       wrapped = data.then(generated => {
         const result =
-          DataWithType.parseStringData(generated, customDisplayType);
-        return result;
+          DataWithType.parseStringData(generated, customDisplayType)
+        return result
       })
-
     } else {
       // if data is a object, parse it to multiples
       wrapped = new Promise((resolve) => {
         const result =
-          DataWithType.parseStringData(data, customDisplayType);
-        return resolve(result);
-      });
+          DataWithType.parseStringData(data, customDisplayType)
+        return resolve(result)
+      })
     }
 
-    return wrapped;
+    return wrapped
   }
 
   /**
@@ -176,8 +175,8 @@ export class DataWithType {
    *   will be called in `then()` of this promise.
    * @returns {*} `data` which can be object, function or promise.
    */
-  getData() {
-    return this.data;
+  getData () {
+    return this.data
   }
 
   /**
@@ -186,66 +185,66 @@ export class DataWithType {
    * by `SpellResult.parseStringData()`
    * @returns {string}
    */
-  getType() {
-    return this.type;
+  getType () {
+    return this.type
   }
 
-  getMagic() {
-    return this.magic;
+  getMagic () {
+    return this.magic
   }
 
-  getText() {
-    return this.text;
+  getText () {
+    return this.text
   }
 }
 
 export class SpellResult {
-  constructor(resultData, resultType) {
-    this.dataWithTypes = [];
-    this.add(resultData, resultType);
+  constructor (resultData, resultType) {
+    this.dataWithTypes = []
+    this.add(resultData, resultType)
   }
 
-  static isFunction(data) {
-    return (data && typeof data === 'function');
+  static isFunction (data) {
+    return (data && typeof data === 'function')
   }
 
-  static isPromise(data) {
-    return (data && typeof data.then === 'function');
+  static isPromise (data) {
+    return (data && typeof data.then === 'function')
   }
 
-  static isObject(data) {
+  static isObject (data) {
     return (data &&
       !SpellResult.isFunction(data) &&
-      !SpellResult.isPromise(data));
+      !SpellResult.isPromise(data))
   }
 
-  static extractMagic(allParagraphText) {
-    const pattern = /^\s*%(\S+)\s*/g;
+  static extractMagic (allParagraphText) {
+    const pattern = /^\s*%(\S+)\s*/g
     try {
-      let match = pattern.exec(allParagraphText);
+      let match = pattern.exec(allParagraphText)
       if (match) {
-        return `%${match[1].trim()}`;
+        return `%${match[1].trim()}`
       }
     } catch (error) {
       // failed to parse, ignore
     }
 
-    return undefined;
+    return undefined
   }
 
-  static createPropagable(resultMsg) {
+  static createPropagable (resultMsg) {
     return resultMsg.map(dt => {
-      return DataWithType.createPropagable(dt);
+      return DataWithType.createPropagable(dt)
     })
   }
 
-  add(resultData, resultType) {
+  add (resultData, resultType) {
     if (resultData) {
       this.dataWithTypes.push(
-        new DataWithType(resultData, resultType));
+        new DataWithType(resultData, resultType))
     }
 
-    return this;
+    return this
   }
 
   /**
@@ -253,23 +252,23 @@ export class SpellResult {
    * @param textWithoutMagic
    * @return {Promise<Array<DataWithType>>}
    */
-  getAllParsedDataWithTypes(customDisplayType, magic, textWithoutMagic) {
+  getAllParsedDataWithTypes (customDisplayType, magic, textWithoutMagic) {
     const promises = this.dataWithTypes.map(dt => {
       return DataWithType.produceMultipleData(
-        dt, customDisplayType, magic, textWithoutMagic);
-    });
+        dt, customDisplayType, magic, textWithoutMagic)
+    })
 
     // some promises can include an array so we need to flatten them
     const flatten = Promise.all(promises).then(values => {
       return values.reduce((acc, cur) => {
         if (Array.isArray(cur)) {
-          return acc.concat(cur);
+          return acc.concat(cur)
         } else {
-          return acc.concat([cur]);
+          return acc.concat([cur])
         }
       })
-    });
+    })
 
-    return flatten;
+    return flatten
   }
 }