feat: Support FRONTEND_INTERPRETER type in frontend

zeppelin-web/src/app/helium/helium.controller.js

@@ -22,8 +22,8 @@
     $scope.packageInfos = {};
     $scope.defaultVersions = {};
     $scope.showVersions = {};
-    $scope.visualizationOrder = [];
-    $scope.visualizationOrderChanged = false;
+    $scope.bundleOrder = [];
+    $scope.bundleOrderChanged = false;
 
     var buildDefaultVersionListToDisplay = function(packageInfos) {
       var defaultVersions = {};
@@ -60,33 +60,33 @@
         });
     };
 
-    var getVisualizationOrder = function() {
-      heliumService.getVisualizationOrder().
+    var getBundleOrder = function() {
+      heliumService.getBundleOrder().
         success(function(data, status) {
-          $scope.visualizationOrder = data.body;
+          $scope.bundleOrder = data.body;
         }).
         error(function(data, status) {
-          console.log('Can not get visualization order %o %o', status, data);
+          console.log('Can not get bundle order %o %o', status, data);
         });
     };
 
-    $scope.visualizationOrderListeners = {
+    $scope.bundleOrderListeners = {
       accept: function(sourceItemHandleScope, destSortableScope) {return true;},
       itemMoved: function(event) {},
       orderChanged: function(event) {
-        $scope.visualizationOrderChanged = true;
+        $scope.bundleOrderChanged = true;
       }
     };
 
     var init = function() {
       getAllPackageInfo();
-      getVisualizationOrder();
-      $scope.visualizationOrderChanged = false;
+      getBundleOrder();
+      $scope.bundleOrderChanged = false;
     };
 
     init();
 
-    $scope.saveVisualizationOrder = function() {
+    $scope.saveBundleOrder = function() {
       var confirm = BootstrapDialog.confirm({
         closable: false,
         closeByBackdrop: false,
@@ -98,7 +98,7 @@
             confirm.$modalFooter.find('button').addClass('disabled');
             confirm.$modalFooter.find('button:contains("OK")')
               .html('<i class="fa fa-circle-o-notch fa-spin"></i> Enabling');
-            heliumService.setVisualizationOrder($scope.visualizationOrder).
+            heliumService.setBundleOrder($scope.bundleOrder).
               success(function(data, status) {
                 init();
                 confirm.close();

zeppelin-web/src/app/helium/helium.css

@@ -77,12 +77,12 @@
   margin-top: 10px;
 }
 
-.heliumVisualizationOrder {
+.heliumBundleOrder {
   display: inline-block;
 }
 
-.heliumVisualizationOrder .as-sortable-item,
-.heliumVisualizationOrder .as-sortable-placeholder {
+.heliumBundleOrder .as-sortable-item,
+.heliumBundleOrder .as-sortable-placeholder {
   display: inline-block;
   float: left;
 }
@@ -97,7 +97,7 @@
   height: 100%;
 }
 
-.heliumVisualizationOrder .saveLink {
+.heliumBundleOrder .saveLink {
   margin-left:10px;
   margin-top:5px;
   cursor:pointer;

zeppelin-web/src/app/helium/helium.html

@@ -20,13 +20,13 @@ limitations under the License.
         </h3>
       </div>
     </div>
-    <div ng-show="visualizationOrder.length > 1"
-         class="row heliumVisualizationOrder">
-      <div style="margin:0 0 5px 15px">Visualization package display order (drag and drop to reorder)</div>
+    <div ng-show="bundleOrder.length > 1"
+         class="row heliumBundleOrder">
+      <div style="margin:0 0 5px 15px">Bundle package display order (drag and drop to reorder)</div>
       <div class="col-md-12 sortable-row btn-group"
-           as-sortable="visualizationOrderListeners"
-           data-ng-model="visualizationOrder">
-        <div class="btn-group" data-ng-repeat="pkgName in visualizationOrder"
+           as-sortable="bundleOrderListeners"
+           data-ng-model="bundleOrder">
+        <div class="btn-group" data-ng-repeat="pkgName in bundleOrder"
              as-sortable-item>
           <div class="btn btn-default btn-sm"
                ng-bind-html='defaultVersions[pkgName].pkg.icon'
@@ -34,8 +34,8 @@ limitations under the License.
           </div>
         </div>
         <span class="saveLink"
-           ng-show="visualizationOrderChanged"
-           ng-click="saveVisualizationOrder()">
+           ng-show="bundleOrderChanged"
+           ng-click="saveBundleOrder()">
           save
         </span>
       </div>

zeppelin-web/src/components/helium/helium-type.js

@@ -0,0 +1,4 @@
+export const HeliumType = {
+  VISUALIZATION: 'VISUALIZATION',
+  FRONTEND_INTERPRETER: 'FRONTEND_INTERPRETER',
+}

zeppelin-web/src/components/helium/helium.service.js

@@ -12,39 +12,89 @@
  * limitations under the License.
  */
 
-(function() {
+import { HeliumType, } from './helium-type';
+import {
+  AbstractFrontendInterpreter,
+  DefaultDisplayType
+} from '../../app/frontend-interpreter'
 
+(function() {
   angular.module('zeppelinWebApp').service('heliumService', heliumService);
 
   heliumService.$inject = ['$http', 'baseUrlSrv', 'ngToast'];
 
   function heliumService($http, baseUrlSrv, ngToast) {
 
-    var url = baseUrlSrv.getRestApiBase() + '/helium/visualizations/load';
-    if (process.env.HELIUM_VIS_DEV) {
+    var url = baseUrlSrv.getRestApiBase() + '/helium/bundle/load';
+    if (process.env.HELIUM_BUNDLE_DEV) {
       url = url + '?refresh=true';
     }
-    var visualizations = [];
+    // name `heliumBundles` should be same as `HelumBundleFactory.HELIUM_BUNDLES_VAR`
+    var heliumBundles = [];
+    // map for `{ magic: interpreter }`
+    let frontendIntpWithMagic = {};
+    // map for `{ displayType: interpreter }`
+    let frontendIntpWithDisplayType = {};
+    let visualizationBundles = [];
 
     // load should be promise
     this.load = $http.get(url).success(function(response) {
       if (response.substring(0, 'ERROR:'.length) !== 'ERROR:') {
+        // evaluate bundles
         eval(response);
+
+        // extract bundles by type
+        heliumBundles.map(b => {
+          if (b.type === HeliumType.FRONTEND_INTERPRETER) {
+            const interpreter = new b.class(); // eslint-disable-line new-cap
+
+            // add frontend interpreter if `interpret` method is available
+            if (AbstractFrontendInterpreter.useInterpret(interpreter)) {
+              frontendIntpWithMagic[interpreter.getMagic()] = interpreter;
+            }
+
+            // add frontend interpreter if `display` method is available
+            // and its display type is in default display types.
+            if (AbstractFrontendInterpreter.useDisplay(interpreter) &&
+                DefaultDisplayType[interpreter.getDisplayType()]) {
+              frontendIntpWithDisplayType[interpreter.getDisplayType()] = interpreter;
+            }
+
+          } else if (b.type === HeliumType.VISUALIZATION) {
+            visualizationBundles.push(b);
+          }
+        });
       } else {
         console.error(response);
       }
     });
 
-    this.get = function() {
-      return visualizations;
+    /**
+     * @param magic {string} e.g `%flowchart`
+     * @returns {FrontendInterpreterBase} undefined for non-available magic
+     */
+    this.getFrontendInterpreterUsingMagic = function(magic) {
+      return frontendIntpWithMagic[magic];
     };
 
-    this.getVisualizationOrder = function() {
-      return $http.get(baseUrlSrv.getRestApiBase() + '/helium/visualizationOrder');
+    /**
+     * @param displayType {string} e.g `ELEMENT`
+     * @returns {FrontendInterpreterBase} undefined for non-available displayType
+     */
+    this.getFrontendInterpreterWithDisplayType = function(displayType) {
+      return frontendIntpWithDisplayType[displayType];
     };
 
-    this.setVisualizationOrder = function(list) {
-      return $http.post(baseUrlSrv.getRestApiBase() + '/helium/visualizationOrder', list);
+    this.getVisualizationBundles = function() {
+      return visualizationBundles;
+    };
+
+    this.getBundleOrder = function() {
+      return $http.get(baseUrlSrv.getRestApiBase() + '/helium/bundleOrder');
+    };
+
+    this.setBundleOrder = function(list) {
+      return $http.post(baseUrlSrv.getRestApiBase() + '/helium/bundleOrder', list);
     };
 
     this.getAllPackageInfo = function() {