http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/tabledata/advanced-transformation.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/tabledata/advanced-transformation.js 
b/zeppelin-web/src/app/tabledata/advanced-transformation.js
index 8650de5..7420bed 100644
--- a/zeppelin-web/src/app/tabledata/advanced-transformation.js
+++ b/zeppelin-web/src/app/tabledata/advanced-transformation.js
@@ -12,7 +12,7 @@
  * limitations under the License.
  */
 
-import Transformation from './transformation'
+import Transformation from './transformation';
 
 import {
   getCurrentChart, getCurrentChartAxis, getCurrentChartParam,
@@ -23,46 +23,46 @@ import {
   removeDuplicatedColumnsInMultiDimensionAxis, applyMaxAxisCount,
   isInputWidget, isOptionWidget, isCheckboxWidget, isTextareaWidget, 
parseParameter,
   getTransformer,
-} from './advanced-transformation-util'
+} from './advanced-transformation-util';
 
-const SETTING_TEMPLATE = 'app/tabledata/advanced-transformation-setting.html'
+const SETTING_TEMPLATE = 'app/tabledata/advanced-transformation-setting.html';
 
 export default class AdvancedTransformation extends Transformation {
   constructor(config, spec) {
-    super(config)
+    super(config);
 
-    this.columns = [] /** [{ name, index, comment }] */
-    this.props = {}
-    this.spec = spec
+    this.columns = []; /** [{ name, index, comment }] */
+    this.props = {};
+    this.spec = spec;
 
-    initializeConfig(config, spec)
+    initializeConfig(config, spec);
   }
 
   emitConfigChange(conf) {
-    conf.chartChanged = false
-    conf.parameterChanged = false
-    this.emitConfig(conf)
+    conf.chartChanged = false;
+    conf.parameterChanged = false;
+    this.emitConfig(conf);
   }
 
   emitChartChange(conf) {
-    conf.chartChanged = true
-    conf.parameterChanged = false
-    this.emitConfig(conf)
+    conf.chartChanged = true;
+    conf.parameterChanged = false;
+    this.emitConfig(conf);
   }
 
   emitParameterChange(conf) {
-    conf.chartChanged = false
-    conf.parameterChanged = true
-    this.emitConfig(conf)
+    conf.chartChanged = false;
+    conf.parameterChanged = true;
+    this.emitConfig(conf);
   }
 
   getSetting() {
-    const self = this /** for closure */
-    const configInstance = self.config /** for closure */
+    const self = this; /** for closure */
+    const configInstance = self.config; /** for closure */
 
     if (self.spec.initialized) {
-      self.spec.initialized = false
-      self.emitConfig(configInstance)
+      self.spec.initialized = false;
+      self.emitConfig(configInstance);
     }
 
     return {
@@ -71,148 +71,174 @@ export default class AdvancedTransformation extends 
Transformation {
         config: configInstance,
         columns: self.columns,
         resetAxisConfig: () => {
-          resetAxisConfig(configInstance)
-          self.emitChartChange(configInstance)
+          resetAxisConfig(configInstance);
+          self.emitChartChange(configInstance);
         },
 
         resetParameterConfig: () => {
-          resetParameterConfig(configInstance)
-          self.emitParameterChange(configInstance)
+          resetParameterConfig(configInstance);
+          self.emitParameterChange(configInstance);
         },
 
         toggleColumnPanel: () => {
-          configInstance.panel.columnPanelOpened = 
!configInstance.panel.columnPanelOpened
-          self.emitConfigChange(configInstance)
+          configInstance.panel.columnPanelOpened = 
!configInstance.panel.columnPanelOpened;
+          self.emitConfigChange(configInstance);
         },
 
         toggleParameterPanel: () => {
-          configInstance.panel.parameterPanelOpened = 
!configInstance.panel.parameterPanelOpened
-          self.emitConfigChange(configInstance)
+          configInstance.panel.parameterPanelOpened = 
!configInstance.panel.parameterPanelOpened;
+          self.emitConfigChange(configInstance);
         },
 
         getAxisAnnotation: (axisSpec) => {
-          let anno = `${axisSpec.name}`
+          let anno = `${axisSpec.name}`;
           if (axisSpec.valueType) {
-            anno = `${anno} (${axisSpec.valueType})`
+            anno = `${anno} (${axisSpec.valueType})`;
           }
 
-          return anno
+          return anno;
         },
 
         getAxisTypeAnnotation: (axisSpec) => {
-          let anno = ''
+          let anno = '';
 
-          let minAxisCount = axisSpec.minAxisCount
-          let maxAxisCount = axisSpec.maxAxisCount
+          let minAxisCount = axisSpec.minAxisCount;
+          let maxAxisCount = axisSpec.maxAxisCount;
 
           if (isSingleDimensionAxis(axisSpec)) {
-            maxAxisCount = 1
+            maxAxisCount = 1;
           }
 
-          let comment = ''
-          if (minAxisCount) { comment = `min: ${minAxisCount}` }
-          if (minAxisCount && maxAxisCount) { comment = `${comment}, ` }
-          if (maxAxisCount) { comment = `${comment}max: ${maxAxisCount}` }
+          let comment = '';
+          if (minAxisCount) {
+            comment = `min: ${minAxisCount}`;
+          }
+          if (minAxisCount && maxAxisCount) {
+            comment = `${comment}, `;
+          }
+          if (maxAxisCount) {
+            comment = `${comment}max: ${maxAxisCount}`;
+          }
 
           if (comment !== '') {
-            anno = `${anno} (${comment})`
+            anno = `${anno} (${comment})`;
           }
 
-          return anno
+          return anno;
         },
 
         getAxisAnnotationColor: (axisSpec) => {
           if (isAggregatorAxis(axisSpec)) {
-            return { 'background-color': '#5782bd' }
+            return {'background-color': '#5782bd'};
           } else if (isGroupAxis(axisSpec)) {
-            return { 'background-color': '#cd5c5c' }
+            return {'background-color': '#cd5c5c'};
           } else if (isKeyAxis(axisSpec)) {
-            return { 'background-color': '#906ebd' }
+            return {'background-color': '#906ebd'};
           } else {
-            return { 'background-color': '#62bda9' }
+            return {'background-color': '#62bda9'};
           }
         },
 
-        useSharedAxis: (chartName) => { return useSharedAxis(configInstance, 
chartName) },
-        isGroupAxis: (axisSpec) => { return isGroupAxis(axisSpec) },
-        isKeyAxis: (axisSpec) => { return isKeyAxis(axisSpec) },
-        isAggregatorAxis: (axisSpec) => { return isAggregatorAxis(axisSpec) },
-        isSingleDimensionAxis: (axisSpec) => { return 
isSingleDimensionAxis(axisSpec) },
-        getSingleDimensionAxis: (axisSpec) => { return 
getCurrentChartAxis(configInstance)[axisSpec.name] },
+        useSharedAxis: (chartName) => {
+          return useSharedAxis(configInstance, chartName);
+        },
+        isGroupAxis: (axisSpec) => {
+          return isGroupAxis(axisSpec);
+        },
+        isKeyAxis: (axisSpec) => {
+          return isKeyAxis(axisSpec);
+        },
+        isAggregatorAxis: (axisSpec) => {
+          return isAggregatorAxis(axisSpec);
+        },
+        isSingleDimensionAxis: (axisSpec) => {
+          return isSingleDimensionAxis(axisSpec);
+        },
+        getSingleDimensionAxis: (axisSpec) => {
+          return getCurrentChartAxis(configInstance)[axisSpec.name];
+        },
 
         chartChanged: (selected) => {
-          configInstance.chart.current = selected
-          self.emitChartChange(configInstance)
+          configInstance.chart.current = selected;
+          self.emitChartChange(configInstance);
         },
 
         axisChanged: function(e, ui, axisSpec) {
-          removeDuplicatedColumnsInMultiDimensionAxis(configInstance, axisSpec)
-          applyMaxAxisCount(configInstance, axisSpec)
+          removeDuplicatedColumnsInMultiDimensionAxis(configInstance, 
axisSpec);
+          applyMaxAxisCount(configInstance, axisSpec);
 
-          self.emitChartChange(configInstance)
+          self.emitChartChange(configInstance);
         },
 
         aggregatorChanged: (colIndex, axisSpec, aggregator) => {
           if (isSingleDimensionAxis(axisSpec)) {
-            getCurrentChartAxis(configInstance)[axisSpec.name].aggr = 
aggregator
+            getCurrentChartAxis(configInstance)[axisSpec.name].aggr = 
aggregator;
           } else {
-            getCurrentChartAxis(configInstance)[axisSpec.name][colIndex].aggr 
= aggregator
-            removeDuplicatedColumnsInMultiDimensionAxis(configInstance, 
axisSpec)
+            getCurrentChartAxis(configInstance)[axisSpec.name][colIndex].aggr 
= aggregator;
+            removeDuplicatedColumnsInMultiDimensionAxis(configInstance, 
axisSpec);
           }
 
-          self.emitChartChange(configInstance)
+          self.emitChartChange(configInstance);
         },
 
         removeFromAxis: function(colIndex, axisSpec) {
           if (isSingleDimensionAxis(axisSpec)) {
-            getCurrentChartAxis(configInstance)[axisSpec.name] = null
+            getCurrentChartAxis(configInstance)[axisSpec.name] = null;
           } else {
-            
getCurrentChartAxis(configInstance)[axisSpec.name].splice(colIndex, 1)
+            
getCurrentChartAxis(configInstance)[axisSpec.name].splice(colIndex, 1);
           }
 
-          self.emitChartChange(configInstance)
+          self.emitChartChange(configInstance);
         },
 
-        isInputWidget: function(paramSpec) { return isInputWidget(paramSpec) },
-        isCheckboxWidget: function(paramSpec) { return 
isCheckboxWidget(paramSpec) },
-        isOptionWidget: function(paramSpec) { return isOptionWidget(paramSpec) 
},
-        isTextareaWidget: function(paramSpec) { return 
isTextareaWidget(paramSpec) },
+        isInputWidget: function(paramSpec) {
+          return isInputWidget(paramSpec);
+        },
+        isCheckboxWidget: function(paramSpec) {
+          return isCheckboxWidget(paramSpec);
+        },
+        isOptionWidget: function(paramSpec) {
+          return isOptionWidget(paramSpec);
+        },
+        isTextareaWidget: function(paramSpec) {
+          return isTextareaWidget(paramSpec);
+        },
 
         parameterChanged: (paramSpec) => {
-          configInstance.chartChanged = false
-          configInstance.parameterChanged = true
-          self.emitParameterChange(configInstance)
+          configInstance.chartChanged = false;
+          configInstance.parameterChanged = true;
+          self.emitParameterChange(configInstance);
         },
 
         parameterOnKeyDown: function(event, paramSpec) {
-          const code = event.keyCode || event.which
+          const code = event.keyCode || event.which;
           if (code === 13 && isInputWidget(paramSpec)) {
-            self.emitParameterChange(configInstance)
+            self.emitParameterChange(configInstance);
           } else if (code === 13 && event.shiftKey && 
isTextareaWidget(paramSpec)) {
-            self.emitParameterChange(configInstance)
+            self.emitParameterChange(configInstance);
           }
 
-          event.stopPropagation() /** avoid to conflict with paragraph 
shortcuts */
+          event.stopPropagation(); /** avoid to conflict with paragraph 
shortcuts */
         },
 
-      }
-    }
+      },
+    };
   }
 
   transform(tableData) {
-    this.columns = tableData.columns /** used in `getSetting` */
+    this.columns = tableData.columns; /** used in `getSetting` */
     /** initialize in `transform` instead of `getSetting` because this method 
is called before */
-    serializeSharedAxes(this.config)
+    serializeSharedAxes(this.config);
 
-    const conf = this.config
-    const chart = getCurrentChart(conf)
-    const axis = getCurrentChartAxis(conf)
-    const axisSpecs = getCurrentChartAxisSpecs(conf)
-    const param = getCurrentChartParam(conf)
-    const paramSpecs = getCurrentChartParamSpecs(conf)
-    const parsedParam = parseParameter(paramSpecs, param)
+    const conf = this.config;
+    const chart = getCurrentChart(conf);
+    const axis = getCurrentChartAxis(conf);
+    const axisSpecs = getCurrentChartAxisSpecs(conf);
+    const param = getCurrentChartParam(conf);
+    const paramSpecs = getCurrentChartParamSpecs(conf);
+    const parsedParam = parseParameter(paramSpecs, param);
 
-    let { transformer, column, } = getTransformer(conf, tableData.rows, 
axisSpecs, axis)
+    let {transformer, column} = getTransformer(conf, tableData.rows, 
axisSpecs, axis);
 
     return {
       chartChanged: conf.chartChanged,
@@ -224,6 +250,6 @@ export default class AdvancedTransformation extends 
Transformation {
       column: column,
 
       transformer: transformer,
-    }
+    };
   }
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/tabledata/columnselector.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/tabledata/columnselector.js 
b/zeppelin-web/src/app/tabledata/columnselector.js
index 9fcf2f1..1998f06 100644
--- a/zeppelin-web/src/app/tabledata/columnselector.js
+++ b/zeppelin-web/src/app/tabledata/columnselector.js
@@ -12,7 +12,7 @@
  * limitations under the License.
  */
 
-import Transformation from './transformation'
+import Transformation from './transformation';
 
 /**
  * select columns
@@ -26,55 +26,55 @@ import Transformation from './transformation'
  *   ]
  */
 export default class ColumnselectorTransformation extends Transformation {
-  constructor (config, columnSelectorProp) {
-    super(config)
-    this.props = columnSelectorProp
+  constructor(config, columnSelectorProp) {
+    super(config);
+    this.props = columnSelectorProp;
   }
 
-  getSetting () {
-    let self = this
-    let configObj = self.config
+  getSetting() {
+    let self = this;
+    let configObj = self.config;
     return {
       template: 'app/tabledata/columnselector_settings.html',
       scope: {
         config: self.config,
         props: self.props,
         tableDataColumns: self.tableDataColumns,
-        save: function () {
-          self.emitConfig(configObj)
+        save: function() {
+          self.emitConfig(configObj);
         },
-        remove: function (selectorName) {
-          configObj[selectorName] = null
-          self.emitConfig(configObj)
-        }
-      }
-    }
+        remove: function(selectorName) {
+          configObj[selectorName] = null;
+          self.emitConfig(configObj);
+        },
+      },
+    };
   }
 
   /**
    * Method will be invoked when tableData or config changes
    */
-  transform (tableData) {
-    this.tableDataColumns = tableData.columns
-    this.removeUnknown()
-    return tableData
+  transform(tableData) {
+    this.tableDataColumns = tableData.columns;
+    this.removeUnknown();
+    return tableData;
   }
 
-  removeUnknown () {
-    let fields = this.config
+  removeUnknown() {
+    let fields = this.config;
     for (let f in fields) {
       if (fields[f]) {
-        let found = false
+        let found = false;
         for (let i = 0; i < this.tableDataColumns.length; i++) {
-          let a = fields[f]
-          let b = this.tableDataColumns[i]
+          let a = fields[f];
+          let b = this.tableDataColumns[i];
           if (a.index === b.index && a.name === b.name) {
-            found = true
-            break
+            found = true;
+            break;
           }
         }
         if (!found && (fields[f] instanceof Object) && !(fields[f] instanceof 
Array)) {
-          fields[f] = null
+          fields[f] = null;
         }
       }
     }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/tabledata/dataset.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/tabledata/dataset.js 
b/zeppelin-web/src/app/tabledata/dataset.js
index 762e300..ba3ee7d 100644
--- a/zeppelin-web/src/app/tabledata/dataset.js
+++ b/zeppelin-web/src/app/tabledata/dataset.js
@@ -30,7 +30,7 @@ class Dataset {
  */
 const DatasetType = Object.freeze({
   NETWORK: 'NETWORK',
-  TABLE: 'TABLE'
-})
+  TABLE: 'TABLE',
+});
 
-export {Dataset, DatasetType}
+export {Dataset, DatasetType};

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/tabledata/datasetfactory.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/tabledata/datasetfactory.js 
b/zeppelin-web/src/app/tabledata/datasetfactory.js
index f2f69c9..6d19a98 100644
--- a/zeppelin-web/src/app/tabledata/datasetfactory.js
+++ b/zeppelin-web/src/app/tabledata/datasetfactory.js
@@ -12,9 +12,9 @@
  * limitations under the License.
  */
 
-import TableData from './tabledata'
-import NetworkData from './networkdata'
-import {DatasetType} from './dataset'
+import TableData from './tabledata';
+import NetworkData from './networkdata';
+import {DatasetType} from './dataset';
 
 /**
  * Create table data object from paragraph table type result
@@ -23,11 +23,11 @@ export default class DatasetFactory {
   createDataset(datasetType) {
     switch (datasetType) {
       case DatasetType.NETWORK:
-        return new NetworkData()
+        return new NetworkData();
       case DatasetType.TABLE:
-        return new TableData()
+        return new TableData();
       default:
-        throw new Error('Dataset type not found')
+        throw new Error('Dataset type not found');
     }
   }
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/tabledata/datasetfactory.test.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/tabledata/datasetfactory.test.js 
b/zeppelin-web/src/app/tabledata/datasetfactory.test.js
index 0beb137..807456a 100644
--- a/zeppelin-web/src/app/tabledata/datasetfactory.test.js
+++ b/zeppelin-web/src/app/tabledata/datasetfactory.test.js
@@ -12,35 +12,37 @@
  * limitations under the License.
  */
 
-import NetworkData from './networkdata.js'
-import TableData from './tabledata.js'
-import {DatasetType} from './dataset.js'
-import DatasetFactory from './datasetfactory.js'
+import NetworkData from './networkdata.js';
+import TableData from './tabledata.js';
+import {DatasetType} from './dataset.js';
+import DatasetFactory from './datasetfactory.js';
 
 describe('DatasetFactory build', function() {
-  let df
+  let df;
 
   beforeAll(function() {
-    df = new DatasetFactory()
-  })
+    df = new DatasetFactory();
+  });
 
   it('should create a TableData instance', function() {
-    let td = df.createDataset(DatasetType.TABLE)
-    expect(td instanceof TableData).toBeTruthy()
-    expect(td.columns.length).toBe(0)
-    expect(td.rows.length).toBe(0)
-  })
+    let td = df.createDataset(DatasetType.TABLE);
+    expect(td instanceof TableData).toBeTruthy();
+    expect(td.columns.length).toBe(0);
+    expect(td.rows.length).toBe(0);
+  });
 
   it('should create a NetworkData instance', function() {
-    let nd = df.createDataset(DatasetType.NETWORK)
-    expect(nd instanceof NetworkData).toBeTruthy()
-    expect(nd.columns.length).toBe(0)
-    expect(nd.rows.length).toBe(0)
-    expect(nd.graph).toEqual({})
-  })
+    let nd = df.createDataset(DatasetType.NETWORK);
+    expect(nd instanceof NetworkData).toBeTruthy();
+    expect(nd.columns.length).toBe(0);
+    expect(nd.rows.length).toBe(0);
+    expect(nd.graph).toEqual({});
+  });
 
   it('should thrown an Error', function() {
-    expect(function() { df.createDataset('text') })
-        .toThrow(new Error('Dataset type not found'))
-  })
-})
+    expect(function() {
+      df.createDataset('text');
+    })
+    .toThrow(new Error('Dataset type not found'));
+  });
+});

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/tabledata/network.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/tabledata/network.js 
b/zeppelin-web/src/app/tabledata/network.js
index 403ea5b..3566722 100644
--- a/zeppelin-web/src/app/tabledata/network.js
+++ b/zeppelin-web/src/app/tabledata/network.js
@@ -12,37 +12,37 @@
  * limitations under the License.
  */
 
-import Transformation from './transformation'
+import Transformation from './transformation';
 
 /**
  * trasformation settings for network visualization
  */
 export default class NetworkTransformation extends Transformation {
   getSetting() {
-    let self = this
-    let configObj = self.config
+    let self = this;
+    let configObj = self.config;
     return {
       template: 'app/tabledata/network_settings.html',
       scope: {
         config: configObj,
         isEmptyObject: function(obj) {
-          obj = obj || {}
-          return angular.equals(obj, {})
+          obj = obj || {};
+          return angular.equals(obj, {});
         },
         setNetworkLabel: function(label, value) {
-          configObj.properties[label].selected = value
+          configObj.properties[label].selected = value;
         },
         saveConfig: function() {
-          self.emitConfig(configObj)
-        }
-      }
-    }
+          self.emitConfig(configObj);
+        },
+      },
+    };
   }
 
   setConfig(config) {
   }
 
   transform(networkData) {
-    return networkData
+    return networkData;
   }
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/tabledata/networkdata.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/tabledata/networkdata.js 
b/zeppelin-web/src/app/tabledata/networkdata.js
index 70cd86b..368254d 100644
--- a/zeppelin-web/src/app/tabledata/networkdata.js
+++ b/zeppelin-web/src/app/tabledata/networkdata.js
@@ -12,74 +12,74 @@
  * limitations under the License.
  */
 
-import TableData from './tabledata'
-import {DatasetType} from './dataset'
+import TableData from './tabledata';
+import {DatasetType} from './dataset';
 
 /**
  * Create network data object from paragraph graph type result
  */
 export default class NetworkData extends TableData {
   constructor(graph) {
-    super()
-    this.graph = graph || {}
+    super();
+    this.graph = graph || {};
     if (this.graph.nodes) {
-      this.loadParagraphResult({msg: JSON.stringify(graph), type: 
DatasetType.NETWORK})
+      this.loadParagraphResult({msg: JSON.stringify(graph), type: 
DatasetType.NETWORK});
     }
   }
 
   loadParagraphResult(paragraphResult) {
     if (!paragraphResult || paragraphResult.type !== DatasetType.NETWORK) {
-      console.log('Can not load paragraph result')
-      return
+      console.log('Can not load paragraph result');
+      return;
     }
 
-    this.graph = JSON.parse(paragraphResult.msg.trim() || '{}')
+    this.graph = JSON.parse(paragraphResult.msg.trim() || '{}');
 
     if (!this.graph.nodes) {
-      console.log('Graph result is empty')
-      return
+      console.log('Graph result is empty');
+      return;
     }
 
-    this.graph.edges = this.graph.edges || []
+    this.graph.edges = this.graph.edges || [];
     this.networkNodes = angular.equals({}, this.graph.labels || {})
-            ? null : {count: this.graph.nodes.length, labels: 
this.graph.labels}
+      ? null : {count: this.graph.nodes.length, labels: this.graph.labels};
     this.networkRelationships = angular.equals([], this.graph.types || [])
-            ? null : {count: this.graph.edges.length, types: this.graph.types}
+      ? null : {count: this.graph.edges.length, types: this.graph.types};
 
-    const rows = []
-    const comment = ''
-    const entities = this.graph.nodes.concat(this.graph.edges)
-    const baseColumnNames = [{name: 'id', index: 0, aggr: 'sum'}]
-    const containsLabelField = _.find(entities, (entity) => 'label' in entity) 
!= null
+    const rows = [];
+    const comment = '';
+    const entities = this.graph.nodes.concat(this.graph.edges);
+    const baseColumnNames = [{name: 'id', index: 0, aggr: 'sum'}];
+    const containsLabelField = _.find(entities, (entity) => 'label' in entity) 
!== undefined;
     if (this.graph.labels || this.graph.types || containsLabelField) {
-      baseColumnNames.push({name: 'label', index: 1, aggr: 'sum'})
+      baseColumnNames.push({name: 'label', index: 1, aggr: 'sum'});
     }
     const internalFieldsToJump = ['count', 'size', 'totalCount',
-      'data', 'x', 'y', 'labels', 'source', 'target']
-    const baseCols = _.map(baseColumnNames, (col) => col.name)
-    let keys = _.map(entities, (elem) => Object.keys(elem.data || {}))
-    keys = _.flatten(keys)
-    keys = _.uniq(keys).filter((key) => baseCols.indexOf(key) === -1)
+      'data', 'x', 'y', 'labels', 'source', 'target'];
+    const baseCols = _.map(baseColumnNames, (col) => col.name);
+    let keys = _.map(entities, (elem) => Object.keys(elem.data || {}));
+    keys = _.flatten(keys);
+    keys = _.uniq(keys).filter((key) => baseCols.indexOf(key) === -1);
     const entityColumnNames = _.map(keys, (elem, i) => {
-      return {name: elem, index: i + baseColumnNames.length, aggr: 'sum'}
-    })
-    const columnNames = baseColumnNames.concat(entityColumnNames)
+      return {name: elem, index: i + baseColumnNames.length, aggr: 'sum'};
+    });
+    const columnNames = baseColumnNames.concat(entityColumnNames);
     for (let i = 0; i < entities.length; i++) {
-      const entity = entities[i]
-      const col = []
-      entity.data = entity.data || {}
+      const entity = entities[i];
+      const col = [];
+      entity.data = entity.data || {};
       for (let j = 0; j < columnNames.length; j++) {
-        const name = columnNames[j].name
+        const name = columnNames[j].name;
         const value = name in entity && internalFieldsToJump.indexOf(name) === 
-1
-            ? entity[name] : entity.data[name]
-        const parsedValue = value === null || value === undefined ? '' : value
-        col.push(parsedValue)
+          ? entity[name] : entity.data[name];
+        const parsedValue = value === null || value === undefined ? '' : value;
+        col.push(parsedValue);
       }
-      rows.push(col)
+      rows.push(col);
     }
 
-    this.comment = comment
-    this.columns = columnNames
-    this.rows = rows
+    this.comment = comment;
+    this.columns = columnNames;
+    this.rows = rows;
   }
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/tabledata/networkdata.test.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/tabledata/networkdata.test.js 
b/zeppelin-web/src/app/tabledata/networkdata.test.js
index 739ac19..cd3a12f 100644
--- a/zeppelin-web/src/app/tabledata/networkdata.test.js
+++ b/zeppelin-web/src/app/tabledata/networkdata.test.js
@@ -12,56 +12,56 @@
  * limitations under the License.
  */
 
-import NetworkData from './networkdata.js'
-import {DatasetType} from './dataset.js'
+import NetworkData from './networkdata.js';
+import {DatasetType} from './dataset.js';
 
 describe('NetworkData build', function() {
-  let nd
+  let nd;
 
   beforeEach(function() {
-    nd = new NetworkData()
-  })
+    nd = new NetworkData();
+  });
 
   it('should initialize the default value', function() {
-    expect(nd.columns.length).toBe(0)
-    expect(nd.rows.length).toBe(0)
-    expect(nd.graph).toEqual({})
-  })
+    expect(nd.columns.length).toBe(0);
+    expect(nd.rows.length).toBe(0);
+    expect(nd.graph).toEqual({});
+  });
 
   it('should able to create NetowkData from paragraph result', function() {
-    let jsonExpected = {nodes: [{id: 1}, {id: 2}], edges: [{source: 2, target: 
1, id: 1}]}
+    let jsonExpected = {nodes: [{id: 1}, {id: 2}], edges: [{source: 2, target: 
1, id: 1}]};
     nd.loadParagraphResult({
       type: DatasetType.NETWORK,
-      msg: JSON.stringify(jsonExpected)
-    })
+      msg: JSON.stringify(jsonExpected),
+    });
 
-    expect(nd.columns.length).toBe(1)
-    expect(nd.rows.length).toBe(3)
-    expect(nd.graph.nodes[0].id).toBe(jsonExpected.nodes[0].id)
-    expect(nd.graph.nodes[1].id).toBe(jsonExpected.nodes[1].id)
-    expect(nd.graph.edges[0].id).toBe(jsonExpected.edges[0].id)
-    expect(nd.graph.edges[0].source).toBe(jsonExpected.edges[0].source)
-    expect(nd.graph.edges[0].target).toBe(jsonExpected.edges[0].target)
-  })
+    expect(nd.columns.length).toBe(1);
+    expect(nd.rows.length).toBe(3);
+    expect(nd.graph.nodes[0].id).toBe(jsonExpected.nodes[0].id);
+    expect(nd.graph.nodes[1].id).toBe(jsonExpected.nodes[1].id);
+    expect(nd.graph.edges[0].id).toBe(jsonExpected.edges[0].id);
+    expect(nd.graph.edges[0].source).toBe(jsonExpected.edges[0].source);
+    expect(nd.graph.edges[0].target).toBe(jsonExpected.edges[0].target);
+  });
 
   it('should able to show data fields source and target', function() {
     let jsonExpected = {nodes: [{id: 1, data: {source: 'Source'}}, {id: 2, 
data: {target: 'Target'}}],
-      edges: [{source: 2, target: 1, id: 1, data: {source: 'Source Edge Data', 
target: 'Target Edge Data'}}]}
+      edges: [{source: 2, target: 1, id: 1, data: {source: 'Source Edge Data', 
target: 'Target Edge Data'}}]};
     nd.loadParagraphResult({
       type: DatasetType.NETWORK,
-      msg: JSON.stringify(jsonExpected)
-    })
+      msg: JSON.stringify(jsonExpected),
+    });
 
-    expect(nd.columns.length).toBe(3)
-    expect(nd.rows.length).toBe(3)
-    expect(nd.graph.nodes[0].id).toBe(jsonExpected.nodes[0].id)
-    expect(nd.graph.nodes[1].id).toBe(jsonExpected.nodes[1].id)
-    expect(nd.graph.edges[0].id).toBe(jsonExpected.edges[0].id)
-    expect(nd.graph.edges[0].source).toBe(jsonExpected.edges[0].source)
-    expect(nd.graph.edges[0].target).toBe(jsonExpected.edges[0].target)
-    
expect(nd.graph.nodes[0].data.source).toBe(jsonExpected.nodes[0].data.source)
-    
expect(nd.graph.nodes[1].data.target).toBe(jsonExpected.nodes[1].data.target)
-    
expect(nd.graph.edges[0].data.source).toBe(jsonExpected.edges[0].data.source)
-    
expect(nd.graph.edges[0].data.target).toBe(jsonExpected.edges[0].data.target)
-  })
-})
+    expect(nd.columns.length).toBe(3);
+    expect(nd.rows.length).toBe(3);
+    expect(nd.graph.nodes[0].id).toBe(jsonExpected.nodes[0].id);
+    expect(nd.graph.nodes[1].id).toBe(jsonExpected.nodes[1].id);
+    expect(nd.graph.edges[0].id).toBe(jsonExpected.edges[0].id);
+    expect(nd.graph.edges[0].source).toBe(jsonExpected.edges[0].source);
+    expect(nd.graph.edges[0].target).toBe(jsonExpected.edges[0].target);
+    
expect(nd.graph.nodes[0].data.source).toBe(jsonExpected.nodes[0].data.source);
+    
expect(nd.graph.nodes[1].data.target).toBe(jsonExpected.nodes[1].data.target);
+    
expect(nd.graph.edges[0].data.source).toBe(jsonExpected.edges[0].data.source);
+    
expect(nd.graph.edges[0].data.target).toBe(jsonExpected.edges[0].data.target);
+  });
+});

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/tabledata/passthrough.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/tabledata/passthrough.js 
b/zeppelin-web/src/app/tabledata/passthrough.js
index e376c43..772b7be 100644
--- a/zeppelin-web/src/app/tabledata/passthrough.js
+++ b/zeppelin-web/src/app/tabledata/passthrough.js
@@ -12,21 +12,21 @@
  * limitations under the License.
  */
 
-import Transformation from './transformation'
+import Transformation from './transformation';
 
 /**
  * passthough the data
  */
 export default class PassthroughTransformation extends Transformation {
   // eslint-disable-next-line no-useless-constructor
-  constructor (config) {
-    super(config)
+  constructor(config) {
+    super(config);
   }
 
   /**
    * Method will be invoked when tableData or config changes
    */
-  transform (tableData) {
-    return tableData
+  transform(tableData) {
+    return tableData;
   }
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/tabledata/pivot.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/tabledata/pivot.js 
b/zeppelin-web/src/app/tabledata/pivot.js
index da29900..2baa6b5 100644
--- a/zeppelin-web/src/app/tabledata/pivot.js
+++ b/zeppelin-web/src/app/tabledata/pivot.js
@@ -12,192 +12,192 @@
  * limitations under the License.
  */
 
-import Transformation from './transformation'
+import Transformation from './transformation';
 
 /**
  * pivot table data and return d3 chart data
  */
 export default class PivotTransformation extends Transformation {
   // eslint-disable-next-line no-useless-constructor
-  constructor (config) {
-    super(config)
+  constructor(config) {
+    super(config);
   }
 
-  getSetting () {
-    let self = this
+  getSetting() {
+    let self = this;
 
-    let configObj = self.config
-    console.log('getSetting', configObj)
+    let configObj = self.config;
+    console.log('getSetting', configObj);
     return {
       template: 'app/tabledata/pivot_settings.html',
       scope: {
         config: configObj.common.pivot,
         tableDataColumns: self.tableDataColumns,
-        save: function () {
-          self.emitConfig(configObj)
+        save: function() {
+          self.emitConfig(configObj);
         },
-        removeKey: function (idx) {
-          configObj.common.pivot.keys.splice(idx, 1)
-          self.emitConfig(configObj)
+        removeKey: function(idx) {
+          configObj.common.pivot.keys.splice(idx, 1);
+          self.emitConfig(configObj);
         },
-        removeGroup: function (idx) {
-          configObj.common.pivot.groups.splice(idx, 1)
-          self.emitConfig(configObj)
+        removeGroup: function(idx) {
+          configObj.common.pivot.groups.splice(idx, 1);
+          self.emitConfig(configObj);
         },
-        removeValue: function (idx) {
-          configObj.common.pivot.values.splice(idx, 1)
-          self.emitConfig(configObj)
+        removeValue: function(idx) {
+          configObj.common.pivot.values.splice(idx, 1);
+          self.emitConfig(configObj);
         },
-        setValueAggr: function (idx, aggr) {
-          configObj.common.pivot.values[idx].aggr = aggr
-          self.emitConfig(configObj)
-        }
-      }
-    }
+        setValueAggr: function(idx, aggr) {
+          configObj.common.pivot.values[idx].aggr = aggr;
+          self.emitConfig(configObj);
+        },
+      },
+    };
   }
 
   /**
    * Method will be invoked when tableData or config changes
    */
-  transform (tableData) {
-    this.tableDataColumns = tableData.columns
-    this.config.common = this.config.common || {}
-    this.config.common.pivot = this.config.common.pivot || {}
-    let config = this.config.common.pivot
-    let firstTime = (!config.keys && !config.groups && !config.values)
+  transform(tableData) {
+    this.tableDataColumns = tableData.columns;
+    this.config.common = this.config.common || {};
+    this.config.common.pivot = this.config.common.pivot || {};
+    let config = this.config.common.pivot;
+    let firstTime = (!config.keys && !config.groups && !config.values);
 
-    config.keys = config.keys || []
-    config.groups = config.groups || []
-    config.values = config.values || []
+    config.keys = config.keys || [];
+    config.groups = config.groups || [];
+    config.values = config.values || [];
 
-    this.removeUnknown()
+    this.removeUnknown();
     if (firstTime) {
-      this.selectDefault()
+      this.selectDefault();
     }
     return this.pivot(
       tableData,
       config.keys,
       config.groups,
-      config.values)
+      config.values);
   }
 
-  removeUnknown () {
-    let config = this.config.common.pivot
-    let tableDataColumns = this.tableDataColumns
-    let unique = function (list) {
+  removeUnknown() {
+    let config = this.config.common.pivot;
+    let tableDataColumns = this.tableDataColumns;
+    let unique = function(list) {
       for (let i = 0; i < list.length; i++) {
         for (let j = i + 1; j < list.length; j++) {
           if (angular.equals(list[i], list[j])) {
-            list.splice(j, 1)
-            j--
+            list.splice(j, 1);
+            j--;
           }
         }
       }
-    }
+    };
 
-    let removeUnknown = function (list) {
+    let removeUnknown = function(list) {
       for (let i = 0; i < list.length; i++) {
         // remove non existing column
-        let found = false
+        let found = false;
         for (let j = 0; j < tableDataColumns.length; j++) {
-          let a = list[i]
-          let b = tableDataColumns[j]
+          let a = list[i];
+          let b = tableDataColumns[j];
           if (a.index === b.index && a.name === b.name) {
-            found = true
-            break
+            found = true;
+            break;
           }
         }
         if (!found) {
-          list.splice(i, 1)
+          list.splice(i, 1);
         }
       }
-    }
+    };
 
-    unique(config.keys)
-    removeUnknown(config.keys)
-    unique(config.groups)
-    removeUnknown(config.groups)
-    removeUnknown(config.values)
+    unique(config.keys);
+    removeUnknown(config.keys);
+    unique(config.groups);
+    removeUnknown(config.groups);
+    removeUnknown(config.values);
   }
 
-  selectDefault () {
-    let config = this.config.common.pivot
+  selectDefault() {
+    let config = this.config.common.pivot;
     if (config.keys.length === 0 &&
         config.groups.length === 0 &&
         config.values.length === 0) {
       if (config.keys.length === 0 && this.tableDataColumns.length > 0) {
-        config.keys.push(this.tableDataColumns[0])
+        config.keys.push(this.tableDataColumns[0]);
       }
 
       if (config.values.length === 0 && this.tableDataColumns.length > 1) {
-        config.values.push(this.tableDataColumns[1])
+        config.values.push(this.tableDataColumns[1]);
       }
     }
   }
 
-  pivot (data, keys, groups, values) {
+  pivot(data, keys, groups, values) {
     let aggrFunc = {
-      sum: function (a, b) {
-        let varA = (a !== undefined) ? (isNaN(a) ? 0 : parseFloat(a)) : 0
-        let varB = (b !== undefined) ? (isNaN(b) ? 0 : parseFloat(b)) : 0
-        return varA + varB
+      sum: function(a, b) {
+        let varA = (a !== undefined) ? (isNaN(a) ? 0 : parseFloat(a)) : 0;
+        let varB = (b !== undefined) ? (isNaN(b) ? 0 : parseFloat(b)) : 0;
+        return varA + varB;
       },
-      count: function (a, b) {
-        let varA = (a !== undefined) ? parseInt(a) : 0
-        let varB = (b !== undefined) ? 1 : 0
-        return varA + varB
+      count: function(a, b) {
+        let varA = (a !== undefined) ? parseInt(a) : 0;
+        let varB = (b !== undefined) ? 1 : 0;
+        return varA + varB;
       },
-      min: function (a, b) {
-        let aIsValid = isValidNumber(a)
-        let bIsValid = isValidNumber(b)
+      min: function(a, b) {
+        let aIsValid = isValidNumber(a);
+        let bIsValid = isValidNumber(b);
         if (!aIsValid) {
-          return parseFloat(b)
+          return parseFloat(b);
         } else if (!bIsValid) {
-          return parseFloat(a)
+          return parseFloat(a);
         } else {
-          return Math.min(parseFloat(a), parseFloat(b))
+          return Math.min(parseFloat(a), parseFloat(b));
         }
       },
-      max: function (a, b) {
-        let aIsValid = isValidNumber(a)
-        let bIsValid = isValidNumber(b)
+      max: function(a, b) {
+        let aIsValid = isValidNumber(a);
+        let bIsValid = isValidNumber(b);
         if (!aIsValid) {
-          return parseFloat(b)
+          return parseFloat(b);
         } else if (!bIsValid) {
-          return parseFloat(a)
+          return parseFloat(a);
         } else {
-          return Math.max(parseFloat(a), parseFloat(b))
+          return Math.max(parseFloat(a), parseFloat(b));
         }
       },
-      avg: function (a, b, c) {
-        let varA = (a !== undefined) ? (isNaN(a) ? 0 : parseFloat(a)) : 0
-        let varB = (b !== undefined) ? (isNaN(b) ? 0 : parseFloat(b)) : 0
-        return varA + varB
-      }
-    }
+      avg: function(a, b, c) {
+        let varA = (a !== undefined) ? (isNaN(a) ? 0 : parseFloat(a)) : 0;
+        let varB = (b !== undefined) ? (isNaN(b) ? 0 : parseFloat(b)) : 0;
+        return varA + varB;
+      },
+    };
 
     let isValidNumber = function(num) {
-      return num !== undefined && !isNaN(num)
-    }
+      return num !== undefined && !isNaN(num);
+    };
 
     let aggrFuncDiv = {
       sum: false,
       count: false,
       min: false,
       max: false,
-      avg: true
-    }
+      avg: true,
+    };
 
-    let schema = {}
-    let rows = {}
+    let schema = {};
+    let rows = {};
 
     for (let i = 0; i < data.rows.length; i++) {
-      let row = data.rows[i]
-      let s = schema
-      let p = rows
+      let row = data.rows[i];
+      let s = schema;
+      let p = rows;
 
       for (let k = 0; k < keys.length; k++) {
-        let key = keys[k]
+        let key = keys[k];
 
         // add key to schema
         if (!s[key.name]) {
@@ -205,22 +205,22 @@ export default class PivotTransformation extends 
Transformation {
             order: k,
             index: key.index,
             type: 'key',
-            children: {}
-          }
+            children: {},
+          };
         }
-        s = s[key.name].children
+        s = s[key.name].children;
 
         // add key to row
-        let keyKey = row[key.index]
+        let keyKey = row[key.index];
         if (!p[keyKey]) {
-          p[keyKey] = {}
+          p[keyKey] = {};
         }
-        p = p[keyKey]
+        p = p[keyKey];
       }
 
       for (let g = 0; g < groups.length; g++) {
-        let group = groups[g]
-        let groupKey = row[group.index]
+        let group = groups[g];
+        let groupKey = row[group.index];
 
         // add group to schema
         if (!s[groupKey]) {
@@ -228,42 +228,42 @@ export default class PivotTransformation extends 
Transformation {
             order: g,
             index: group.index,
             type: 'group',
-            children: {}
-          }
+            children: {},
+          };
         }
-        s = s[groupKey].children
+        s = s[groupKey].children;
 
         // add key to row
         if (!p[groupKey]) {
-          p[groupKey] = {}
+          p[groupKey] = {};
         }
-        p = p[groupKey]
+        p = p[groupKey];
       }
 
       for (let v = 0; v < values.length; v++) {
-        let value = values[v]
-        let valueKey = value.name + '(' + value.aggr + ')'
+        let value = values[v];
+        let valueKey = value.name + '(' + value.aggr + ')';
 
         // add value to schema
         if (!s[valueKey]) {
           s[valueKey] = {
             type: 'value',
             order: v,
-            index: value.index
-          }
+            index: value.index,
+          };
         }
 
         // add value to row
         if (!p[valueKey]) {
           p[valueKey] = {
             value: (value.aggr !== 'count') ? row[value.index] : 1,
-            count: 1
-          }
+            count: 1,
+          };
         } else {
           p[valueKey] = {
             value: aggrFunc[value.aggr](p[valueKey].value, row[value.index], 
p[valueKey].count + 1),
-            count: (aggrFuncDiv[value.aggr]) ? p[valueKey].count + 1 : 
p[valueKey].count
-          }
+            count: (aggrFuncDiv[value.aggr]) ? p[valueKey].count + 1 : 
p[valueKey].count,
+          };
         }
       }
     }
@@ -274,7 +274,7 @@ export default class PivotTransformation extends 
Transformation {
       groups: groups,
       values: values,
       schema: schema,
-      rows: rows
-    }
+      rows: rows,
+    };
   }
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/tabledata/tabledata.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/tabledata/tabledata.js 
b/zeppelin-web/src/app/tabledata/tabledata.js
index 3fe01b7..745ab17 100644
--- a/zeppelin-web/src/app/tabledata/tabledata.js
+++ b/zeppelin-web/src/app/tabledata/tabledata.js
@@ -11,65 +11,65 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {Dataset, DatasetType} from './dataset'
+import {Dataset, DatasetType} from './dataset';
 
 /**
  * Create table data object from paragraph table type result
  */
 export default class TableData extends Dataset {
-  constructor (columns, rows, comment) {
-    super()
-    this.columns = columns || []
-    this.rows = rows || []
-    this.comment = comment || ''
+  constructor(columns, rows, comment) {
+    super();
+    this.columns = columns || [];
+    this.rows = rows || [];
+    this.comment = comment || '';
   }
 
-  loadParagraphResult (paragraphResult) {
+  loadParagraphResult(paragraphResult) {
     if (!paragraphResult || paragraphResult.type !== DatasetType.TABLE) {
-      console.log('Can not load paragraph result')
-      return
+      console.log('Can not load paragraph result');
+      return;
     }
 
-    let columnNames = []
-    let rows = []
-    let array = []
-    let textRows = paragraphResult.msg.split('\n')
-    let comment = ''
-    let commentRow = false
+    let columnNames = [];
+    let rows = [];
+    let array = [];
+    let textRows = paragraphResult.msg.split('\n');
+    let comment = '';
+    let commentRow = false;
 
     for (let i = 0; i < textRows.length; i++) {
-      let textRow = textRows[i]
+      let textRow = textRows[i];
 
       if (commentRow) {
-        comment += textRow
-        continue
+        comment += textRow;
+        continue;
       }
 
       if (textRow === '' || textRow === '<!--TABLE_COMMENT-->') {
         if (rows.length > 0) {
-          commentRow = true
+          commentRow = true;
         }
-        continue
+        continue;
       }
-      let textCols = textRow.split('\t')
-      let cols = []
-      let cols2 = []
+      let textCols = textRow.split('\t');
+      let cols = [];
+      let cols2 = [];
       for (let j = 0; j < textCols.length; j++) {
-        let col = textCols[j]
+        let col = textCols[j];
         if (i === 0) {
-          columnNames.push({name: col, index: j, aggr: 'sum'})
+          columnNames.push({name: col, index: j, aggr: 'sum'});
         } else {
-          cols.push(col)
-          cols2.push({key: (columnNames[i]) ? columnNames[i].name : undefined, 
value: col})
+          cols.push(col);
+          cols2.push({key: (columnNames[i]) ? columnNames[i].name : undefined, 
value: col});
         }
       }
       if (i !== 0) {
-        rows.push(cols)
-        array.push(cols2)
+        rows.push(cols);
+        array.push(cols2);
       }
     }
-    this.comment = comment
-    this.columns = columnNames
-    this.rows = rows
+    this.comment = comment;
+    this.columns = columnNames;
+    this.rows = rows;
   }
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/tabledata/tabledata.test.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/tabledata/tabledata.test.js 
b/zeppelin-web/src/app/tabledata/tabledata.test.js
index e24b073..931cc2d 100644
--- a/zeppelin-web/src/app/tabledata/tabledata.test.js
+++ b/zeppelin-web/src/app/tabledata/tabledata.test.js
@@ -12,42 +12,42 @@
  * limitations under the License.
  */
 
-import TableData from './tabledata.js'
-import PivotTransformation from './pivot.js'
+import TableData from './tabledata.js';
+import PivotTransformation from './pivot.js';
 
-describe('TableData build', function () {
-  let td
+describe('TableData build', function() {
+  let td;
 
-  beforeEach(function () {
-    console.log(TableData)
-    td = new TableData()
-  })
+  beforeEach(function() {
+    console.log(TableData);
+    td = new TableData();
+  });
 
-  it('should initialize the default value', function () {
-    expect(td.columns.length).toBe(0)
-    expect(td.rows.length).toBe(0)
-    expect(td.comment).toBe('')
-  })
+  it('should initialize the default value', function() {
+    expect(td.columns.length).toBe(0);
+    expect(td.rows.length).toBe(0);
+    expect(td.comment).toBe('');
+  });
 
-  it('should able to create Tabledata from paragraph result', function () {
+  it('should able to create Tabledata from paragraph result', function() {
     td.loadParagraphResult({
       type: 'TABLE',
-      msg: 'key\tvalue\na\t10\nb\t20\n\nhello'
-    })
+      msg: 'key\tvalue\na\t10\nb\t20\n\nhello',
+    });
 
-    expect(td.columns.length).toBe(2)
-    expect(td.rows.length).toBe(2)
-    expect(td.comment).toBe('hello')
-  })
-})
+    expect(td.columns.length).toBe(2);
+    expect(td.rows.length).toBe(2);
+    expect(td.comment).toBe('hello');
+  });
+});
 
 describe('PivotTransformation build', function() {
-  let pt
+  let pt;
 
-  beforeEach(function () {
-    console.log(PivotTransformation)
-    pt = new PivotTransformation()
-  })
+  beforeEach(function() {
+    console.log(PivotTransformation);
+    pt = new PivotTransformation();
+  });
 
   it('check the result of keys, groups and values unique', function() {
     // set inited mock data
@@ -63,33 +63,33 @@ describe('PivotTransformation build', function() {
                  {index: 3, name: '3'},
                  {index: 5, name: '5'}],
           groups: [],
-          values: []
-        }
-      }
-    }
+          values: [],
+        },
+      },
+    };
     pt.tableDataColumns = [
         {index: 1, name: '1'},
         {index: 2, name: '2'},
         {index: 3, name: '3'},
         {index: 4, name: '4'},
-        {index: 5, name: '5'}]
+        {index: 5, name: '5'}];
 
-    pt.setConfig(config)
+    pt.setConfig(config);
 
-    pt.removeUnknown()
+    pt.removeUnknown();
 
-    expect(config.common.pivot.keys.length).toBe(3)
-    expect(config.common.pivot.keys[0].index).toBe(4)
-    expect(config.common.pivot.keys[1].index).toBe(3)
-    expect(config.common.pivot.keys[2].index).toBe(5)
-  })
+    expect(config.common.pivot.keys.length).toBe(3);
+    expect(config.common.pivot.keys[0].index).toBe(4);
+    expect(config.common.pivot.keys[1].index).toBe(3);
+    expect(config.common.pivot.keys[2].index).toBe(5);
+  });
 
   it('should aggregate values correctly', function() {
-    let td = new TableData()
+    let td = new TableData();
     td.loadParagraphResult({
       type: 'TABLE',
-      msg: 'key\tvalue\na\t10\na\tnull\na\t0\na\t1\n'
-    })
+      msg: 'key\tvalue\na\t10\na\tnull\na\t0\na\t1\n',
+    });
 
     let config = {
       common: {
@@ -98,34 +98,34 @@ describe('PivotTransformation build', function() {
             {
               'name': 'key',
               'index': 0.0,
-            }
+            },
           ],
           groups: [],
           values: [
             {
               'name': 'value',
               'index': 1.0,
-              'aggr': 'sum'
-            }
-          ]
-        }
-      }
-    }
-
-    pt.setConfig(config)
-    let transformed = pt.transform(td)
-    expect(transformed.rows['a']['value(sum)'].value).toBe(11)
-
-    pt.config.common.pivot.values[0].aggr = 'max'
-    transformed = pt.transform(td)
-    expect(transformed.rows['a']['value(max)'].value).toBe(10)
-
-    pt.config.common.pivot.values[0].aggr = 'min'
-    transformed = pt.transform(td)
-    expect(transformed.rows['a']['value(min)'].value).toBe(0)
-
-    pt.config.common.pivot.values[0].aggr = 'count'
-    transformed = pt.transform(td)
-    expect(transformed.rows['a']['value(count)'].value).toBe(4)
-  })
-})
+              'aggr': 'sum',
+            },
+          ],
+        },
+      },
+    };
+
+    pt.setConfig(config);
+    let transformed = pt.transform(td);
+    expect(transformed.rows['a']['value(sum)'].value).toBe(11);
+
+    pt.config.common.pivot.values[0].aggr = 'max';
+    transformed = pt.transform(td);
+    expect(transformed.rows['a']['value(max)'].value).toBe(10);
+
+    pt.config.common.pivot.values[0].aggr = 'min';
+    transformed = pt.transform(td);
+    expect(transformed.rows['a']['value(min)'].value).toBe(0);
+
+    pt.config.common.pivot.values[0].aggr = 'count';
+    transformed = pt.transform(td);
+    expect(transformed.rows['a']['value(count)'].value).toBe(4);
+  });
+});

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/tabledata/transformation.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/tabledata/transformation.js 
b/zeppelin-web/src/app/tabledata/transformation.js
index f142618..a15e12b 100644
--- a/zeppelin-web/src/app/tabledata/transformation.js
+++ b/zeppelin-web/src/app/tabledata/transformation.js
@@ -16,9 +16,9 @@
  * Base class for visualization
  */
 export default class Transformation {
-  constructor (config) {
-    this.config = config
-    this._emitter = () => {}
+  constructor(config) {
+    this.config = config;
+    this._emitter = () => {};
   }
 
   /**
@@ -27,77 +27,81 @@ export default class Transformation {
    *   scope : an object to bind to template scope
    * }
    */
-  getSetting () {
+  getSetting() {
     // override this
   }
 
   /**
    * Method will be invoked when tableData or config changes
    */
-  transform (tableData) {
+  transform(tableData) {
     // override this
   }
 
   /**
    * render setting
    */
-  renderSetting (targetEl) {
-    let setting = this.getSetting()
+  renderSetting(targetEl) {
+    let setting = this.getSetting();
     if (!setting) {
-      return
+      return;
     }
 
     // already readered
     if (this._scope) {
-      let self = this
-      this._scope.$apply(function () {
+      let self = this;
+      this._scope.$apply(function() {
         for (let k in setting.scope) {
-          self._scope[k] = setting.scope[k]
+          if(setting.scope.hasOwnProperty(k)) {
+            self._scope[k] = setting.scope[k];
+          }
         }
 
         for (let k in self._prevSettingScope) {
           if (!setting.scope[k]) {
-            self._scope[k] = setting.scope[k]
+            self._scope[k] = setting.scope[k];
           }
         }
-      })
-      return
+      });
+      return;
     } else {
-      this._prevSettingScope = setting.scope
+      this._prevSettingScope = setting.scope;
     }
 
-    let scope = this._createNewScope()
+    let scope = this._createNewScope();
     for (let k in setting.scope) {
-      scope[k] = setting.scope[k]
+      if(setting.scope.hasOwnProperty(k)) {
+        scope[k] = setting.scope[k];
+      }
     }
-    let template = setting.template
+    let template = setting.template;
 
     if (template.split('\n').length === 1 &&
         template.endsWith('.html')) { // template is url
-      let self = this
-      this._templateRequest(template).then(function (t) {
-        self._render(targetEl, t, scope)
-      })
+      let self = this;
+      this._templateRequest(template).then(function(t) {
+        self._render(targetEl, t, scope);
+      });
     } else {
-      this._render(targetEl, template, scope)
+      this._render(targetEl, template, scope);
     }
   }
 
-  _render (targetEl, template, scope) {
-    this._targetEl = targetEl
-    targetEl.html(template)
-    this._compile(targetEl.contents())(scope)
-    this._scope = scope
+  _render(targetEl, template, scope) {
+    this._targetEl = targetEl;
+    targetEl.html(template);
+    this._compile(targetEl.contents())(scope);
+    this._scope = scope;
   }
 
-  setConfig (config) {
-    this.config = config
+  setConfig(config) {
+    this.config = config;
   }
 
   /**
    * Emit config. config will sent to server and saved.
    */
-  emitConfig (config) {
-    this._emitter(config)
+  emitConfig(config) {
+    this._emitter(config);
   }
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/visualization/builtins/visualization-areachart.js
----------------------------------------------------------------------
diff --git 
a/zeppelin-web/src/app/visualization/builtins/visualization-areachart.js 
b/zeppelin-web/src/app/visualization/builtins/visualization-areachart.js
index 494f8ae..886aec9 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-areachart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-areachart.js
@@ -12,34 +12,34 @@
  * limitations under the License.
  */
 
-import Nvd3ChartVisualization from './visualization-nvd3chart'
-import PivotTransformation from '../../tabledata/pivot'
+import Nvd3ChartVisualization from './visualization-nvd3chart';
+import PivotTransformation from '../../tabledata/pivot';
 
 /**
  * Visualize data in area chart
  */
 export default class AreachartVisualization extends Nvd3ChartVisualization {
-  constructor (targetEl, config) {
-    super(targetEl, config)
+  constructor(targetEl, config) {
+    super(targetEl, config);
 
-    this.pivot = new PivotTransformation(config)
+    this.pivot = new PivotTransformation(config);
 
     try {
-      this.config.rotate = {degree: config.rotate.degree}
+      this.config.rotate = {degree: config.rotate.degree};
     } catch (e) {
-      this.config.rotate = {degree: '-45'}
+      this.config.rotate = {degree: '-45'};
     }
   }
 
-  type () {
-    return 'stackedAreaChart'
+  type() {
+    return 'stackedAreaChart';
   }
 
-  getTransformation () {
-    return this.pivot
+  getTransformation() {
+    return this.pivot;
   }
 
-  render (pivot) {
+  render(pivot) {
     let d3Data = this.d3DataFromPivot(
       pivot.schema,
       pivot.rows,
@@ -48,108 +48,112 @@ export default class AreachartVisualization extends 
Nvd3ChartVisualization {
       pivot.values,
       false,
       true,
-      false)
+      false);
 
-    this.xLabels = d3Data.xLabels
-    super.render(d3Data)
-    this.config.changeXLabel(this.config.xLabelStatus)
+    this.xLabels = d3Data.xLabels;
+    super.render(d3Data);
+    this.config.changeXLabel(this.config.xLabelStatus);
   }
 
   /**
    * Set new config
    */
-  setConfig (config) {
-    super.setConfig(config)
-    this.pivot.setConfig(config)
+  setConfig(config) {
+    super.setConfig(config);
+    this.pivot.setConfig(config);
   }
 
-  configureChart (chart) {
-    let self = this
-    let configObj = self.config
+  configureChart(chart) {
+    let self = this;
+    let configObj = self.config;
 
-    chart.xAxis.tickFormat(function (d) { return self.xAxisTickFormat(d, 
self.xLabels) })
-    chart.yAxis.tickFormat(function (d) { return self.yAxisTickFormat(d) })
-    chart.yAxis.axisLabelDistance(50)
-    chart.useInteractiveGuideline(true) // for better UX and performance 
issue. (https://github.com/novus/nvd3/issues/691)
+    chart.xAxis.tickFormat(function(d) {
+      return self.xAxisTickFormat(d, self.xLabels);
+    });
+    chart.yAxis.tickFormat(function(d) {
+      return self.yAxisTickFormat(d);
+    });
+    chart.yAxis.axisLabelDistance(50);
+    chart.useInteractiveGuideline(true); // for better UX and performance 
issue. (https://github.com/novus/nvd3/issues/691)
 
     self.config.changeXLabel = function(type) {
       switch (type) {
         case 'default':
-          self.chart._options['showXAxis'] = true
-          self.chart._options['margin'] = {bottom: 50}
-          self.chart.xAxis.rotateLabels(0)
-          configObj.xLabelStatus = 'default'
-          break
+          self.chart._options['showXAxis'] = true;
+          self.chart._options['margin'] = {bottom: 50};
+          self.chart.xAxis.rotateLabels(0);
+          configObj.xLabelStatus = 'default';
+          break;
         case 'rotate':
-          self.chart._options['showXAxis'] = true
-          self.chart._options['margin'] = {bottom: 140}
-          self.chart.xAxis.rotateLabels(configObj.rotate.degree)
-          configObj.xLabelStatus = 'rotate'
-          break
+          self.chart._options['showXAxis'] = true;
+          self.chart._options['margin'] = {bottom: 140};
+          self.chart.xAxis.rotateLabels(configObj.rotate.degree);
+          configObj.xLabelStatus = 'rotate';
+          break;
         case 'hide':
-          self.chart._options['showXAxis'] = false
-          self.chart._options['margin'] = {bottom: 50}
-          d3.select('#' + self.targetEl[0].id + '> 
svg').select('g.nv-axis.nv-x').selectAll('*').remove()
-          configObj.xLabelStatus = 'hide'
-          break
+          self.chart._options['showXAxis'] = false;
+          self.chart._options['margin'] = {bottom: 50};
+          d3.select('#' + self.targetEl[0].id + '> 
svg').select('g.nv-axis.nv-x').selectAll('*').remove();
+          configObj.xLabelStatus = 'hide';
+          break;
       }
-      self.emitConfig(configObj)
-    }
+      self.emitConfig(configObj);
+    };
 
     self.config.isXLabelStatus = function(type) {
       if (configObj.xLabelStatus === type) {
-        return true
+        return true;
       } else {
-        return false
+        return false;
       }
-    }
+    };
 
     self.config.setDegree = function(type) {
-      configObj.rotate.degree = type
-      self.chart.xAxis.rotateLabels(type)
-      self.emitConfig(configObj)
-    }
+      configObj.rotate.degree = type;
+      self.chart.xAxis.rotateLabels(type);
+      self.emitConfig(configObj);
+    };
 
     self.config.isDegreeEmpty = function() {
       if (configObj.rotate.degree.length > 0) {
-        return true
+        return true;
       } else {
-        configObj.rotate.degree = '-45'
-        self.emitConfig(configObj)
-        return false
+        configObj.rotate.degree = '-45';
+        self.emitConfig(configObj);
+        return false;
       }
-    }
+    };
 
-    this.chart.style(this.config.style || 'stack')
+    this.chart.style(this.config.style || 'stack');
 
-    this.chart.dispatch.on('stateChange', function (s) {
-      self.config.style = s.style
+    this.chart.dispatch.on('stateChange', function(s) {
+      self.config.style = s.style;
 
       // give some time to animation finish
-      setTimeout(function () {
-        self.emitConfig(self.config)
-      }, 500)
-    })
+      setTimeout(function() {
+        self.emitConfig(self.config);
+      }, 500);
+    });
   }
   getSetting(chart) {
-    let self = this
-    let configObj = self.config
+    let self = this;
+    let configObj = self.config;
 
     // default to visualize xLabel
     if (typeof (configObj.xLabelStatus) === 'undefined') {
-      configObj.changeXLabel('default')
+      configObj.changeXLabel('default');
     }
 
     if (typeof (configObj.rotate.degree) === 'undefined' || 
configObj.rotate.degree === '') {
-      configObj.rotate.degree = '-45'
-      self.emitConfig(configObj)
+      configObj.rotate.degree = '-45';
+      self.emitConfig(configObj);
     }
 
     return {
       template: 'app/visualization/builtins/visualization-displayXAxis.html',
       scope: {
-        config: configObj
-      }
-    }
+        config: configObj,
+      },
+    };
   }
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/visualization/builtins/visualization-barchart.js
----------------------------------------------------------------------
diff --git 
a/zeppelin-web/src/app/visualization/builtins/visualization-barchart.js 
b/zeppelin-web/src/app/visualization/builtins/visualization-barchart.js
index 2653af2..e0279d9 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-barchart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-barchart.js
@@ -12,34 +12,34 @@
  * limitations under the License.
  */
 
-import Nvd3ChartVisualization from './visualization-nvd3chart'
-import PivotTransformation from '../../tabledata/pivot'
+import Nvd3ChartVisualization from './visualization-nvd3chart';
+import PivotTransformation from '../../tabledata/pivot';
 
 /**
  * Visualize data in bar char
  */
 export default class BarchartVisualization extends Nvd3ChartVisualization {
-  constructor (targetEl, config) {
-    super(targetEl, config)
+  constructor(targetEl, config) {
+    super(targetEl, config);
 
-    this.pivot = new PivotTransformation(config)
+    this.pivot = new PivotTransformation(config);
 
     try {
-      this.config.rotate = {degree: config.rotate.degree}
+      this.config.rotate = {degree: config.rotate.degree};
     } catch (e) {
-      this.config.rotate = {degree: '-45'}
+      this.config.rotate = {degree: '-45'};
     }
   }
 
-  type () {
-    return 'multiBarChart'
+  type() {
+    return 'multiBarChart';
   }
 
-  getTransformation () {
-    return this.pivot
+  getTransformation() {
+    return this.pivot;
   }
 
-  render (pivot) {
+  render(pivot) {
     let d3Data = this.d3DataFromPivot(
       pivot.schema,
       pivot.rows,
@@ -48,96 +48,98 @@ export default class BarchartVisualization extends 
Nvd3ChartVisualization {
       pivot.values,
       true,
       true,
-      true)
+      true);
 
-    super.render(d3Data)
-    this.config.changeXLabel(this.config.xLabelStatus)
+    super.render(d3Data);
+    this.config.changeXLabel(this.config.xLabelStatus);
   }
 
   /**
    * Set new config
    */
-  setConfig (config) {
-    super.setConfig(config)
-    this.pivot.setConfig(config)
+  setConfig(config) {
+    super.setConfig(config);
+    this.pivot.setConfig(config);
   }
 
-  configureChart (chart) {
-    let self = this
-    let configObj = self.config
+  configureChart(chart) {
+    let self = this;
+    let configObj = self.config;
 
-    chart.yAxis.axisLabelDistance(50)
-    chart.yAxis.tickFormat(function (d) { return self.yAxisTickFormat(d) })
+    chart.yAxis.axisLabelDistance(50);
+    chart.yAxis.tickFormat(function(d) {
+      return self.yAxisTickFormat(d);
+    });
 
-    self.chart.stacked(this.config.stacked)
+    self.chart.stacked(this.config.stacked);
 
     self.config.changeXLabel = function(type) {
       switch (type) {
         case 'default':
-          self.chart._options['showXAxis'] = true
-          self.chart._options['margin'] = {bottom: 50}
-          self.chart.xAxis.rotateLabels(0)
-          configObj.xLabelStatus = 'default'
-          break
+          self.chart._options['showXAxis'] = true;
+          self.chart._options['margin'] = {bottom: 50};
+          self.chart.xAxis.rotateLabels(0);
+          configObj.xLabelStatus = 'default';
+          break;
         case 'rotate':
-          self.chart._options['showXAxis'] = true
-          self.chart._options['margin'] = {bottom: 140}
-          self.chart.xAxis.rotateLabels(configObj.rotate.degree)
-          configObj.xLabelStatus = 'rotate'
-          break
+          self.chart._options['showXAxis'] = true;
+          self.chart._options['margin'] = {bottom: 140};
+          self.chart.xAxis.rotateLabels(configObj.rotate.degree);
+          configObj.xLabelStatus = 'rotate';
+          break;
         case 'hide':
-          self.chart._options['showXAxis'] = false
-          self.chart._options['margin'] = {bottom: 50}
-          d3.select('#' + self.targetEl[0].id + '> 
svg').select('g.nv-axis.nv-x').selectAll('*').remove()
-          configObj.xLabelStatus = 'hide'
-          break
+          self.chart._options['showXAxis'] = false;
+          self.chart._options['margin'] = {bottom: 50};
+          d3.select('#' + self.targetEl[0].id + '> 
svg').select('g.nv-axis.nv-x').selectAll('*').remove();
+          configObj.xLabelStatus = 'hide';
+          break;
       }
-      self.emitConfig(configObj)
-    }
+      self.emitConfig(configObj);
+    };
 
     self.config.isXLabelStatus = function(type) {
       if (configObj.xLabelStatus === type) {
-        return true
+        return true;
       } else {
-        return false
+        return false;
       }
-    }
+    };
 
     self.config.setDegree = function(type) {
-      configObj.rotate.degree = type
-      self.chart.xAxis.rotateLabels(type)
-      self.emitConfig(configObj)
-    }
+      configObj.rotate.degree = type;
+      self.chart.xAxis.rotateLabels(type);
+      self.emitConfig(configObj);
+    };
 
     this.chart.dispatch.on('stateChange', function(s) {
-      configObj.stacked = s.stacked
+      configObj.stacked = s.stacked;
 
       // give some time to animation finish
       setTimeout(function() {
-        self.emitConfig(configObj)
-      }, 500)
-    })
+        self.emitConfig(configObj);
+      }, 500);
+    });
   }
 
   getSetting(chart) {
-    let self = this
-    let configObj = self.config
+    let self = this;
+    let configObj = self.config;
 
     // default to visualize xLabel
     if (typeof (configObj.xLabelStatus) === 'undefined') {
-      configObj.changeXLabel('default')
+      configObj.changeXLabel('default');
     }
 
     if (typeof (configObj.rotate.degree) === 'undefined' || 
configObj.rotate.degree === '') {
-      configObj.rotate.degree = '-45'
-      self.emitConfig(configObj)
+      configObj.rotate.degree = '-45';
+      self.emitConfig(configObj);
     }
 
     return {
       template: 'app/visualization/builtins/visualization-displayXAxis.html',
       scope: {
-        config: configObj
-      }
-    }
+        config: configObj,
+      },
+    };
   }
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/visualization/builtins/visualization-d3network.js
----------------------------------------------------------------------
diff --git 
a/zeppelin-web/src/app/visualization/builtins/visualization-d3network.js 
b/zeppelin-web/src/app/visualization/builtins/visualization-d3network.js
index 46ee251..749e434 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-d3network.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-d3network.js
@@ -12,18 +12,18 @@
  * limitations under the License.
  */
 
-import Visualization from '../visualization'
-import NetworkTransformation from '../../tabledata/network'
+import Visualization from '../visualization';
+import NetworkTransformation from '../../tabledata/network';
 
 /**
  * Visualize data in network format
  */
 export default class NetworkVisualization extends Visualization {
   constructor(targetEl, config) {
-    super(targetEl, config)
-    console.log('Init network viz')
+    super(targetEl, config);
+    console.log('Init network viz');
     if (!config.properties) {
-      config.properties = {}
+      config.properties = {};
     }
     if (!config.d3Graph) {
       config.d3Graph = {
@@ -33,101 +33,101 @@ export default class NetworkVisualization extends 
Visualization {
           linkDistance: 80,
         },
         zoom: {
-          minScale: 1.3
-        }
-      }
+          minScale: 1.3,
+        },
+      };
     }
-    this.targetEl.addClass('network')
-    this.containerId = this.targetEl.prop('id')
-    this.force = null
-    this.svg = null
-    this.$timeout = angular.injector(['ng']).get('$timeout')
-    this.$interpolate = angular.injector(['ng']).get('$interpolate')
-    this.transformation = new NetworkTransformation(config)
+    this.targetEl.addClass('network');
+    this.containerId = this.targetEl.prop('id');
+    this.force = null;
+    this.svg = null;
+    this.$timeout = angular.injector(['ng']).get('$timeout');
+    this.$interpolate = angular.injector(['ng']).get('$interpolate');
+    this.transformation = new NetworkTransformation(config);
   }
 
   refresh() {
-    console.log('refresh')
+    console.log('refresh');
   }
 
   render(networkData) {
     if (!('graph' in networkData)) {
-      console.log('graph not found')
-      return
+      console.log('graph not found');
+      return;
     }
     if (!networkData.isRendered) {
-      networkData.isRendered = true
+      networkData.isRendered = true;
     } else {
-      return
+      return;
     }
-    console.log('Rendering the graph')
+    console.log('Rendering the graph');
 
     if (networkData.graph.edges.length &&
         !networkData.isDefaultSet) {
-      networkData.isDefaultSet = true
-      this._setEdgesDefaults(networkData.graph)
+      networkData.isDefaultSet = true;
+      this._setEdgesDefaults(networkData.graph);
     }
 
-    const transformationConfig = this.transformation.getSetting().scope.config
-    console.log('cfg', transformationConfig)
+    const transformationConfig = this.transformation.getSetting().scope.config;
+    console.log('cfg', transformationConfig);
     if (transformationConfig && angular.equals({}, 
transformationConfig.properties)) {
-      transformationConfig.properties = 
this.getNetworkProperties(networkData.graph)
+      transformationConfig.properties = 
this.getNetworkProperties(networkData.graph);
     }
 
-    this.targetEl.empty().append('<svg></svg>')
+    this.targetEl.empty().append('<svg></svg>');
 
-    const width = this.targetEl.width()
-    const height = this.targetEl.height()
-    const self = this
-    const defaultOpacity = 0
-    const nodeSize = 10
-    const textOffset = 3
-    const linkSize = 10
+    const width = this.targetEl.width();
+    const height = this.targetEl.height();
+    const self = this;
+    const defaultOpacity = 0;
+    const nodeSize = 10;
+    const textOffset = 3;
+    const linkSize = 10;
 
     const arcPath = (leftHand, d) => {
-      let start = leftHand ? d.source : d.target
-      let end = leftHand ? d.target : d.source
-      let dx = end.x - start.x
-      let dy = end.y - start.y
+      let start = leftHand ? d.source : d.target;
+      let end = leftHand ? d.target : d.source;
+      let dx = end.x - start.x;
+      let dy = end.y - start.y;
       let dr = d.totalCount === 1
-              ? 0 : Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)) / (1 + (1 / 
d.totalCount) * (d.count - 1))
-      let sweep = leftHand ? 0 : 1
-      return `M${start.x},${start.y}A${dr},${dr} 0 0,${sweep} 
${end.x},${end.y}`
-    }
+              ? 0 : Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)) / (1 + (1 / 
d.totalCount) * (d.count - 1));
+      let sweep = leftHand ? 0 : 1;
+      return `M${start.x},${start.y}A${dr},${dr} 0 0,${sweep} 
${end.x},${end.y}`;
+    };
     // Use elliptical arc path segments to doubly-encode directionality.
     const tick = () => {
       // Links
       linkPath.attr('d', function(d) {
-        return arcPath(true, d)
-      })
+        return arcPath(true, d);
+      });
       textPath.attr('d', function(d) {
-        return arcPath(d.source.x < d.target.x, d)
-      })
+        return arcPath(d.source.x < d.target.x, d);
+      });
       // Nodes
-      circle.attr('transform', (d) => `translate(${d.x},${d.y})`)
-      text.attr('transform', (d) => `translate(${d.x},${d.y})`)
-    }
+      circle.attr('transform', (d) => `translate(${d.x},${d.y})`);
+      text.attr('transform', (d) => `translate(${d.x},${d.y})`);
+    };
 
     const setOpacity = (scale) => {
-      let opacity = scale >= +transformationConfig.d3Graph.zoom.minScale ? 1 : 0
+      let opacity = scale >= +transformationConfig.d3Graph.zoom.minScale ? 1 : 
0;
       this.svg.selectAll('.nodeLabel')
-        .style('opacity', opacity)
+        .style('opacity', opacity);
       this.svg.selectAll('textPath')
-        .style('opacity', opacity)
-    }
+        .style('opacity', opacity);
+    };
 
     const zoom = d3.behavior.zoom()
       .scaleExtent([1, 10])
       .on('zoom', () => {
-        console.log('zoom')
-        setOpacity(d3.event.scale)
-        container.attr('transform', 
`translate(${d3.event.translate})scale(${d3.event.scale})`)
-      })
+        console.log('zoom');
+        setOpacity(d3.event.scale);
+        container.attr('transform', 
`translate(${d3.event.translate})scale(${d3.event.scale})`);
+      });
 
     this.svg = d3.select(`#${this.containerId} svg`)
       .attr('width', width)
       .attr('height', height)
-      .call(zoom)
+      .call(zoom);
 
     this.force = d3.layout.force()
       .charge(transformationConfig.d3Graph.forceLayout.charge)
@@ -137,54 +137,56 @@ export default class NetworkVisualization extends 
Visualization {
       .links(networkData.graph.edges)
       .size([width, height])
       .on('start', () => {
-        console.log('force layout start')
-        this.$timeout(() => { this.force.stop() }, 
transformationConfig.d3Graph.forceLayout.timeout)
+        console.log('force layout start');
+        this.$timeout(() => {
+          this.force.stop();
+        }, transformationConfig.d3Graph.forceLayout.timeout);
       })
       .on('end', () => {
-        console.log('force layout stop')
-        setOpacity(zoom.scale())
+        console.log('force layout stop');
+        setOpacity(zoom.scale());
       })
-      .start()
+      .start();
 
     const renderFooterOnClick = (entity, type) => {
-      const footerId = this.containerId + '_footer'
-      const obj = {id: entity.id, label: entity.defaultLabel || entity.label, 
type: type}
-      let html = [`<li><b>${obj.type}_id:</b>&nbsp${obj.id}</li>`]
+      const footerId = this.containerId + '_footer';
+      const obj = {id: entity.id, label: entity.defaultLabel || entity.label, 
type: type};
+      let html = [`<li><b>${obj.type}_id:</b>&nbsp${obj.id}</li>`];
       if (obj.label) {
-        html.push(`<li><b>${obj.type}_type:</b>&nbsp${obj.label}</li>`)
+        html.push(`<li><b>${obj.type}_type:</b>&nbsp${obj.label}</li>`);
       }
       html = html.concat(_.map(entity.data, (v, k) => {
-        return `<li><b>${k}:</b>&nbsp${v}</li>`
-      }))
+        return `<li><b>${k}:</b>&nbsp${v}</li>`;
+      }));
       angular.element('#' + footerId)
         .find('.list-inline')
         .empty()
-        .append(html.join(''))
-    }
+        .append(html.join(''));
+    };
 
     const drag = d3.behavior.drag()
       .origin((d) => d)
       .on('dragstart', function(d) {
-        console.log('dragstart')
-        d3.event.sourceEvent.stopPropagation()
-        d3.select(this).classed('dragging', true)
-        self.force.stop()
+        console.log('dragstart');
+        d3.event.sourceEvent.stopPropagation();
+        d3.select(this).classed('dragging', true);
+        self.force.stop();
       })
       .on('drag', function(d) {
-        console.log('drag')
-        d.px += d3.event.dx
-        d.py += d3.event.dy
-        d.x += d3.event.dx
-        d.y += d3.event.dy
+        console.log('drag');
+        d.px += d3.event.dx;
+        d.py += d3.event.dy;
+        d.x += d3.event.dx;
+        d.y += d3.event.dy;
       })
       .on('dragend', function(d) {
-        console.log('dragend')
-        d.fixed = true
-        d3.select(this).classed('dragging', false)
-        self.force.resume()
-      })
+        console.log('dragend');
+        d.fixed = true;
+        d3.select(this).classed('dragging', false);
+        self.force.resume();
+      });
 
-    const container = this.svg.append('g')
+    const container = this.svg.append('g');
     if (networkData.graph.directed) {
       container.append('svg:defs').selectAll('marker')
         .data(['arrowMarker-' + this.containerId])
@@ -198,26 +200,26 @@ export default class NetworkVisualization extends 
Visualization {
         .attr('markerHeight', 4)
         .attr('orient', 'auto')
         .append('svg:path')
-        .attr('d', 'M0,-5L10,0L0,5')
+        .attr('d', 'M0,-5L10,0L0,5');
     }
     // Links
     const link = container.append('svg:g')
       .on('click', () => {
-        renderFooterOnClick(d3.select(d3.event.target).datum(), 'edge')
+        renderFooterOnClick(d3.select(d3.event.target).datum(), 'edge');
       })
       .selectAll('g.link')
       .data(self.force.links())
       .enter()
-      .append('g')
-    const getPathId = (d) => this.containerId + '_' + d.source.index + '_' + 
d.target.index + '_' + d.count
-    const showLabel = (d) => this._showNodeLabel(d)
+      .append('g');
+    const getPathId = (d) => this.containerId + '_' + d.source.index + '_' + 
d.target.index + '_' + d.count;
+    const showLabel = (d) => this._showNodeLabel(d);
     const linkPath = link.append('svg:path')
       .attr('class', 'link')
       .attr('size', linkSize)
-      .attr('marker-end', `url(#arrowMarker-${this.containerId})`)
+      .attr('marker-end', `url(#arrowMarker-${this.containerId})`);
     const textPath = link.append('svg:path')
       .attr('id', getPathId)
-      .attr('class', 'textpath')
+      .attr('class', 'textpath');
     container.append('svg:g')
       .selectAll('.pathLabel')
       .data(self.force.links())
@@ -229,11 +231,11 @@ export default class NetworkVisualization extends 
Visualization {
       .attr('text-anchor', 'middle')
       .attr('xlink:href', (d) => '#' + getPathId(d))
       .text((d) => d.label)
-      .style('opacity', defaultOpacity)
+      .style('opacity', defaultOpacity);
     // Nodes
     const circle = container.append('svg:g')
       .on('click', () => {
-        renderFooterOnClick(d3.select(d3.event.target).datum(), 'node')
+        renderFooterOnClick(d3.select(d3.event.target).datum(), 'node');
       })
       .selectAll('circle')
       .data(self.force.nodes())
@@ -241,37 +243,37 @@ export default class NetworkVisualization extends 
Visualization {
       .attr('r', (d) => nodeSize)
       .attr('fill', (d) => networkData.graph.labels && d.label in 
networkData.graph.labels
                   ? networkData.graph.labels[d.label] : '#000000')
-      .call(drag)
+      .call(drag);
     const text = container.append('svg:g').selectAll('g')
       .data(self.force.nodes())
-      .enter().append('svg:g')
+      .enter().append('svg:g');
     text.append('svg:text')
         .attr('x', (d) => nodeSize + textOffset)
         .attr('size', nodeSize)
         .attr('y', '.31em')
         .attr('class', (d) => 'nodeLabel shadow label-' + d.label)
         .text(showLabel)
-        .style('opacity', defaultOpacity)
+        .style('opacity', defaultOpacity);
     text.append('svg:text')
         .attr('x', (d) => nodeSize + textOffset)
         .attr('size', nodeSize)
         .attr('y', '.31em')
         .attr('class', (d) => 'nodeLabel label-' + d.label)
         .text(showLabel)
-        .style('opacity', defaultOpacity)
+        .style('opacity', defaultOpacity);
   }
 
   destroy() {
   }
 
   _showNodeLabel(d) {
-    const transformationConfig = this.transformation.getSetting().scope.config
-    const selectedLabel = (transformationConfig.properties[d.label] || 
{selected: 'label'}).selected
-    return d.data[selectedLabel] || d[selectedLabel]
+    const transformationConfig = this.transformation.getSetting().scope.config;
+    const selectedLabel = (transformationConfig.properties[d.label] || 
{selected: 'label'}).selected;
+    return d.data[selectedLabel] || d[selectedLabel];
   }
 
   getTransformation() {
-    return this.transformation
+    return this.transformation;
   }
 
   setNodesDefaults() {
@@ -281,56 +283,56 @@ export default class NetworkVisualization extends 
Visualization {
     graph.edges
       .sort((a, b) => {
         if (a.source > b.source) {
-          return 1
+          return 1;
         } else if (a.source < b.source) {
-          return -1
+          return -1;
         } else if (a.target > b.target) {
-          return 1
+          return 1;
         } else if (a.target < b.target) {
-          return -1
+          return -1;
         } else {
-          return 0
+          return 0;
         }
-      })
+      });
     graph.edges
       .forEach((edge, index) => {
-        let prevEdge = graph.edges[index - 1]
+        let prevEdge = graph.edges[index - 1];
         edge.count = (index > 0 && +edge.source === +prevEdge.source && 
+edge.target === +prevEdge.target
-            ? prevEdge.count : 0) + 1
+            ? prevEdge.count : 0) + 1;
         edge.totalCount = graph.edges
           .filter((innerEdge) => +edge.source === +innerEdge.source && 
+edge.target === +innerEdge.target)
-          .length
-      })
+          .length;
+      });
     graph.edges
       .forEach((edge) => {
         if (typeof +edge.source === 'number') {
           // edge.source = graph.nodes.filter((node) => +edge.source === 
+node.id)[0] || null
-          edge.source = _.find(graph.nodes, (node) => +edge.source === 
+node.id)
+          edge.source = _.find(graph.nodes, (node) => +edge.source === 
+node.id);
         }
         if (typeof +edge.target === 'number') {
           // edge.target = graph.nodes.filter((node) => +edge.target === 
+node.id)[0] || null
-          edge.target = _.find(graph.nodes, (node) => +edge.target === 
+node.id)
+          edge.target = _.find(graph.nodes, (node) => +edge.target === 
+node.id);
         }
-      })
+      });
   }
 
   getNetworkProperties(graph) {
-    const baseCols = ['id', 'label']
-    const properties = {}
+    const baseCols = ['id', 'label'];
+    const properties = {};
     graph.nodes.forEach(function(node) {
-      const hasLabel = 'label' in node && node.label !== ''
+      const hasLabel = 'label' in node && node.label !== '';
       if (!hasLabel) {
-        return
+        return;
       }
-      const label = node.label
-      const hasKey = hasLabel && label in properties
+      const label = node.label;
+      const hasKey = hasLabel && label in properties;
       const keys = _.uniq(Object.keys(node.data || {})
-              .concat(hasKey ? properties[label].keys : baseCols))
+              .concat(hasKey ? properties[label].keys : baseCols));
       if (!hasKey) {
-        properties[label] = {selected: 'label'}
+        properties[label] = {selected: 'label'};
       }
-      properties[label].keys = keys
-    })
-    return properties
+      properties[label].keys = keys;
+    });
+    return properties;
   }
 }

Reply via email to