refactor: Remove util and add Widget funcs

zeppelin-web/src/app/tabledata/advanced-transformation-api.js

@@ -1,37 +0,0 @@
-/*
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export function getCurrentChart(config) {
-  return config.chart.current;
-}
-
-export function getCurrentChartTransform(config) {
-  return config.spec.charts[getCurrentChart(config)].transform
-}
-
-export function getCurrentChartAxis(config) {
-  return config.axis[getCurrentChart(config)]
-}
-
-export function getCurrentChartParam(config) {
-  return config.parameter[getCurrentChart(config)]
-}
-
-export function getCurrentChartAxisSpecs(config) {
-  return config.axisSpecs[getCurrentChart(config)]
-}
-
-export function getCurrentChartParamSpecs(config) {
-  return config.paramSpecs[getCurrentChart(config)]
-}

zeppelin-web/src/app/tabledata/advanced-transformation-setting.html

@@ -227,7 +227,7 @@ limitations under the License.
         <td style="font-weight: 400; vertical-align: middle;">{{paramSpec.valueType}}</td>
         <td style="font-weight: 400; vertical-align: middle;">{{paramSpec.description}}</td>
         <td>
-          <div ng-if="!paramSpec.widget || paramSpec.widget === 'input'"
+          <div ng-if="isInputWidget(paramSpec)"
                class="input-group">
             <input type="text" class="form-control input-sm"
                    style="font-weight: 400; font-size: 12px; vertical-align:middle; border-radius: 5px;"
@@ -235,7 +235,7 @@ limitations under the License.
                    data-ng-model="config.parameter[config.chart.current][paramSpec.name]" />
           </div>
           <div class="btn-group"
-               ng-if="paramSpec.widget === 'option'">
+               ng-if="isOptionWidget(paramSpec)">
             <select class="form-control input-sm"
                     ng-change="parameterChanged(paramSpec)"
                     data-ng-model="config.parameter[config.chart.current][paramSpec.name]"
@@ -244,14 +244,14 @@ limitations under the License.
             </select>
           </div>
 
-          <div ng-if="paramSpec.widget === 'checkbox'">
+          <div ng-if="isCheckboxWidget(paramSpec)">
             <input type="checkbox"
                    ng-click="parameterChanged(paramSpec)"
                    data-ng-model="config.parameter[config.chart.current][paramSpec.name]"
                    data-ng-checked="config.parameter[config.chart.current][paramSpec.name]" />
           </div>
 
-          <div ng-if="paramSpec.widget === 'textarea'">
+          <div ng-if="isTextareaWidget(paramSpec)">
             <textarea class="form-control" rows="3"
                       ng-keypress="keyEventOnDynamicParameter($event)"
                       data-ng-model="config.parameter[config.chart.current][paramSpec.name]"

zeppelin-web/src/app/tabledata/advanced-transformation-util.js

@@ -12,10 +12,52 @@
  * limitations under the License.
  */
 
-import {
-  getCurrentChartAxis,
-  getCurrentChartTransform,
-} from './advanced-transformation-api'
+export function getCurrentChart(config) {
+  return config.chart.current;
+}
+
+export function getCurrentChartTransform(config) {
+  return config.spec.charts[getCurrentChart(config)].transform
+}
+
+export function getCurrentChartAxis(config) {
+  return config.axis[getCurrentChart(config)]
+}
+
+export function getCurrentChartParam(config) {
+  return config.parameter[getCurrentChart(config)]
+}
+
+export function getCurrentChartAxisSpecs(config) {
+  return config.axisSpecs[getCurrentChart(config)]
+}
+
+export function getCurrentChartParamSpecs(config) {
+  return config.paramSpecs[getCurrentChart(config)]
+}
+
+export const Widget = {
+  INPUT: 'input', /** default */
+  OPTION: 'option',
+  CHECKBOX: 'checkbox',
+  TEXTAREA: 'textarea',
+}
+
+export function isInputWidget(paramSpec) {
+  return (paramSpec && !paramSpec.widget) || (paramSpec && paramSpec.widget === Widget.INPUT);
+}
+
+export function isOptionWidget(paramSpec) {
+  return paramSpec && paramSpec.widget === Widget.OPTION;
+}
+
+export function isCheckboxWidget(paramSpec) {
+  return paramSpec && paramSpec.widget === Widget.CHECKBOX;
+}
+
+export function isTextareaWidget(paramSpec) {
+  return paramSpec && paramSpec.widget === Widget.TEXTAREA;
+}
 
 export const Aggregator = {
   SUM: 'sum',
@@ -25,16 +67,16 @@ export const Aggregator = {
   MAX: 'max',
 }
 
-export function isAggregator(axisSpec) {
+export function isAggregatorAxis(axisSpec) {
   return axisSpec && axisSpec.axisType === 'aggregator';
 }
-export function isGroup(axisSpec) {
+export function isGroupAxis(axisSpec) {
   return axisSpec && axisSpec.axisType === 'group';
 }
-export function isKey(axisSpec) {
+export function isKeyAxis(axisSpec) {
   return axisSpec && axisSpec.axisType === 'key';
 }
-export function isSingleDimension(axisSpec) {
+export function isSingleDimensionAxis(axisSpec) {
   return axisSpec && axisSpec.dimension === 'single';
 }
 
@@ -65,7 +107,7 @@ export function getAvailableChartNames(charts) {
 }
 
 export function applyMaxAxisCount(config, axisSpec) {
-  if (isSingleDimension(axisSpec) || typeof axisSpec.maxAxisCount === 'undefined') {
+  if (isSingleDimensionAxis(axisSpec) || typeof axisSpec.maxAxisCount === 'undefined') {
     return;
   }
 
@@ -77,7 +119,7 @@ export function applyMaxAxisCount(config, axisSpec) {
 }
 
 export function removeDuplicatedColumnsInMultiDimensionAxis(config, axisSpec) {
-  if (isSingleDimension(axisSpec)) { return config; }
+  if (isSingleDimensionAxis(axisSpec)) { return config; }
 
   const columns = getCurrentChartAxis(config)[axisSpec.name]
   const uniqObject = columns.reduce((acc, col) => {
@@ -135,7 +177,8 @@ export function initializeConfig(config, spec) {
 
     for (let i = 0; i < axisSpecs.length; i++) {
       const axisSpec = axisSpecs[i]
-      if (!isSingleDimension(axisSpec) && !Array.isArray(config.axis[chartName][axisSpec.name])) {
+      if (!isSingleDimensionAxis(axisSpec) &&
+        !Array.isArray(config.axis[chartName][axisSpec.name])) {
         config.axis[chartName][axisSpec.name] = []
       }
     }
@@ -179,9 +222,9 @@ export function getColumnsFromAxis(axisSpecs, axis) {
   for(let i = 0; i < axisSpecs.length; i++) {
     const axisSpec = axisSpecs[i];
 
-    if (isKey(axisSpec)) { keyAxisNames.push(axisSpec.name); }
-    else if (isGroup(axisSpec)) { groupAxisNames.push(axisSpec.name); }
-    else if (isAggregator(axisSpec)) { aggrAxisNames.push(axisSpec.name); }
+    if (isKeyAxis(axisSpec)) { keyAxisNames.push(axisSpec.name); }
+    else if (isGroupAxis(axisSpec)) { groupAxisNames.push(axisSpec.name); }
+    else if (isAggregatorAxis(axisSpec)) { aggrAxisNames.push(axisSpec.name); }
   }
 
   let keyColumns = [];

zeppelin-web/src/app/tabledata/advanced-transformation.js

@@ -15,20 +15,14 @@
 import Transformation from './transformation';
 
 import {
-  isAggregator, isGroup, isKey, isSingleDimension,
+  getCurrentChart, getCurrentChartAxis, getCurrentChartAxisSpecs, getCurrentChartParam,
+  isAggregatorAxis, isGroupAxis, isKeyAxis, isSingleDimensionAxis,
   clearConfig, initializeConfig,
-  removeDuplicatedColumnsInMultiDimensionAxis, applyMaxAxisCount,
-  getColumnsFromAxis,
+  removeDuplicatedColumnsInMultiDimensionAxis, applyMaxAxisCount, getColumnsFromAxis,
   getTransformer,
+  isInputWidget, isOptionWidget, isCheckboxWidget, isTextareaWidget,
 } from './advanced-transformation-util';
 
-import {
-  getCurrentChart,
-  getCurrentChartAxis,
-  getCurrentChartAxisSpecs,
-  getCurrentChartParam,
-} from './advanced-transformation-api'
-
 const SETTING_TEMPLATE = 'app/tabledata/advanced-transformation-setting.html';
 
 class AdvancedTransformation extends Transformation {
@@ -52,6 +46,22 @@ class AdvancedTransformation extends Transformation {
         config: configInstance,
         columns: self.columns,
 
+        clearConfig: () => {
+          clearConfig(configInstance)
+          initializeConfig(configInstance, self.spec)
+          self.emitConfig(configInstance)
+        },
+
+        toggleColumnPanel: () => {
+          configInstance.panel.columnPanelOpened = !configInstance.panel.columnPanelOpened
+          self.emitConfig(configInstance)
+        },
+
+        toggleParameterPanel: () => {
+          configInstance.panel.parameterPanelOpened = !configInstance.panel.parameterPanelOpened
+          self.emitConfig(configInstance)
+        },
+
         getAxisAnnotation: (axisSpec) => {
           let anno = `${axisSpec.name}`
           if (axisSpec.valueType) {
@@ -71,47 +81,57 @@ class AdvancedTransformation extends Transformation {
         },
 
         getAxisTypeAnnotationColor: (axisSpec) => {
-          if (isAggregator(axisSpec)) {
+          if (isAggregatorAxis(axisSpec)) {
             return { 'background-color': '#5782bd' };
-          } else if (isGroup(axisSpec)) {
+          } else if (isGroupAxis(axisSpec)) {
             return { 'background-color': '#cd5c5c' };
-          } else if (isKey(axisSpec)) {
+          } else if (isKeyAxis(axisSpec)) {
             return { 'background-color': '#906ebd' };
           } else {
             return { 'background-color': '#62bda9' };
           }
         },
 
-        getSingleDimensionAxis: (axisSpec) => {
-          return getCurrentChartAxis(configInstance)[axisSpec.name]
-        },
-
-        toggleColumnPanel: () => {
-          configInstance.panel.columnPanelOpened = !configInstance.panel.columnPanelOpened
-          self.emitConfig(configInstance)
-        },
-
-        toggleParameterPanel: () => {
-          configInstance.panel.parameterPanelOpened = !configInstance.panel.parameterPanelOpened
-          self.emitConfig(configInstance)
-        },
-
-        clearConfig: () => {
-          clearConfig(configInstance)
-          initializeConfig(configInstance, self.spec)
-          self.emitConfig(configInstance)
-        },
-
-        isGroupAxis: (axisSpec) => { return isGroup(axisSpec) },
-        isKeyAxis: (axisSpec) => { return isKey(axisSpec) },
-        isAggregatorAxis: (axisSpec) => { return isAggregator(axisSpec) },
-        isSingleDimensionAxis: (axisSpec) => { return isSingleDimension(axisSpec) },
+        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.emitConfig(configInstance)
         },
 
+        axisChanged: function(e, ui, axisSpec) {
+          removeDuplicatedColumnsInMultiDimensionAxis(configInstance, axisSpec)
+          applyMaxAxisCount(configInstance, axisSpec)
+          self.emitConfig(configInstance)
+        },
+
+        aggregatorChanged: (colIndex, axisSpec, aggregator) => {
+          if (isSingleDimensionAxis(axisSpec)) {
+            getCurrentChartAxis(configInstance)[axisSpec.name].aggr = aggregator
+          } else {
+            getCurrentChartAxis(configInstance)[axisSpec.name][colIndex].aggr = aggregator
+          }
+          self.emitConfig(configInstance)
+        },
+
+        removeFromAxis: function(colIndex, axisSpec) {
+          if (isSingleDimensionAxis(axisSpec)) {
+            getCurrentChartAxis(configInstance)[axisSpec.name] = null
+          } else {
+            getCurrentChartAxis(configInstance)[axisSpec.name].splice(colIndex, 1)
+          }
+          self.emitConfig(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) },
+
         parameterChanged: (paramSpec) => {
           console.log(configInstance.parameter[configInstance.chart.current])
           self.emitConfig(configInstance)
@@ -124,30 +144,6 @@ class AdvancedTransformation extends Transformation {
             self.emitConfig(configInstance)
           }
         },
-
-        axisChanged: function(e, ui, axisSpec) {
-          removeDuplicatedColumnsInMultiDimensionAxis(configInstance, axisSpec)
-          applyMaxAxisCount(configInstance, axisSpec)
-          self.emitConfig(configInstance)
-        },
-
-        aggregatorChanged: (colIndex, axisSpec, aggregator) => {
-          if (isSingleDimension(axisSpec)) {
-            getCurrentChartAxis(configInstance)[axisSpec.name].aggr = aggregator
-          } else {
-            getCurrentChartAxis(configInstance)[axisSpec.name][colIndex].aggr = aggregator
-          }
-          self.emitConfig(configInstance)
-        },
-
-        removeFromAxis: function(colIndex, axisSpec) {
-          if (isSingleDimension(axisSpec)) {
-            getCurrentChartAxis(configInstance)[axisSpec.name] = null
-          } else {
-            getCurrentChartAxis(configInstance)[axisSpec.name].splice(colIndex, 1)
-          }
-          self.emitConfig(configInstance)
-        }
       }
     }
   }