load visualization and tabledata module from source instead npm if accessible

zeppelin-server/src/main/java/org/apache/zeppelin/server/ZeppelinServer.java

@@ -99,8 +99,12 @@ public class ZeppelinServer extends Application {
         conf.getString(ConfVars.ZEPPELIN_INTERPRETER_LOCALREPO));
 
     HeliumApplicationFactory heliumApplicationFactory = new HeliumApplicationFactory();
-    HeliumVisualizationFactory heliumVisualizationFactory = new HeliumVisualizationFactory(
-        new File(conf.getRelativeDir(ConfVars.ZEPPELIN_DEP_LOCALREPO)));
+    HeliumVisualizationFactory heliumVisualizationFactory;
+
+    heliumVisualizationFactory = new HeliumVisualizationFactory(
+        new File(conf.getRelativeDir(ConfVars.ZEPPELIN_DEP_LOCALREPO)),
+        new File(conf.getRelativeDir("zeppelin-web/src/app/tabledata")),
+        new File(conf.getRelativeDir("zeppelin-web/src/app/visualization")));
 
     this.helium = new Helium(
         conf.getHeliumConfPath(),
@@ -108,7 +112,6 @@ public class ZeppelinServer extends Application {
         heliumVisualizationFactory,
         heliumApplicationFactory);
 
-
     this.schedulerFactory = new SchedulerFactory();
     this.replFactory = new InterpreterFactory(conf, notebookWsServer,
         notebookWsServer, heliumApplicationFactory, depResolver, SecurityUtils.isAuthenticated());

zeppelin-web/src/app/notebook/paragraph/result/result-chart-selector.html

@@ -14,14 +14,15 @@ limitations under the License.
 
 <div id="{{id}}_switch"
      ng-if="(type == 'TABLE' || apps.length > 0 || suggestion.available && suggestion.available.length > 0) && !asIframe && !viewOnly"
-     class="btn-group"
+     class="btn-group result-chart-selector"
      style="margin-bottom: 10px;">
 
   <button type="button" class="btn btn-default btn-sm"
           ng-if="type == 'TABLE'"
           ng-repeat="viz in builtInTableDataVisualizationList track by $index"
           ng-class="{'active' : viz.id == graphMode && !config.helium.activeApp}"
-          ng-click="switchViz(viz.id)"><i ng-class="viz.icon"></i>
+          ng-click="switchViz(viz.id)"
+          ng-bind-html="viz.icon">
   </button>
 
   <button type="button"

zeppelin-web/src/app/notebook/paragraph/result/result.controller.js

@@ -55,36 +55,36 @@ import ScatterchartVisualization from '../../../visualization/builtins/visualiza
       {
         id: 'table',   // paragraph.config.graph.mode
         name: 'Table', // human readable name. tooltip
-        icon: 'fa fa-table'
+        icon: '<i class="fa fa-table"></i>'
       },
       {
         id: 'multiBarChart',
         name: 'Bar Chart',
-        icon: 'fa fa-bar-chart',
+        icon: '<i class="fa fa-bar-chart"></i>',
         transformation: 'pivot'
       },
       {
         id: 'pieChart',
         name: 'Pie Chart',
-        icon: 'fa fa-pie-chart',
+        icon: '<i class="fa fa-pie-chart"></i>',
         transformation: 'pivot'
       },
       {
         id: 'stackedAreaChart',
         name: 'Area Chart',
-        icon: 'fa fa-area-chart',
+        icon: '<i class="fa fa-area-chart"></i>',
         transformation: 'pivot'
       },
       {
         id: 'lineChart',
         name: 'Line Chart',
-        icon: 'fa fa-line-chart',
+        icon: '<i class="fa fa-line-chart"></i>',
         transformation: 'pivot'
       },
       {
         id: 'scatterChart',
         name: 'Scatter Chart',
-        icon: 'cf cf-scatter-chart'
+        icon: '<i class="cf cf-scatter-chart"></i>'
       }
     ];
 

zeppelin-web/src/index.html

@@ -57,6 +57,7 @@ limitations under the License.
     <link rel="stylesheet" href="app/search/search.css" />
     <link rel="stylesheet" href="app/notebook/notebook.css" />
     <link rel="stylesheet" href="app/notebook/paragraph/paragraph.css" />
+    <link rel="stylesheet" href="app/notebook/paragraph/result/result.css" />
     <link rel="stylesheet" href="app/jobmanager/jobmanager.css" />
     <link rel="stylesheet" href="app/jobmanager/jobs/job.css" />
     <link rel="stylesheet" href="app/interpreter/interpreter.css" />

zeppelin-zengine/src/main/java/org/apache/zeppelin/helium/HeliumVisualizationFactory.java

@@ -45,6 +45,7 @@ public class HeliumVisualizationFactory {
   private final File workingDirectory;
   private File tabledataModulePath;
   private File visualizationModulePath;
+  private Gson gson;
 
   String bundleCacheKey = "";
   File currentBundle;
@@ -60,13 +61,14 @@ public class HeliumVisualizationFactory {
 
   public HeliumVisualizationFactory(File moduleDownloadPath)
       throws InstallationException, TaskRunnerException {
-    this.workingDirectory = moduleDownloadPath;
-    File installDirectory = moduleDownloadPath;
+    this.workingDirectory = new File(moduleDownloadPath, "vis");
+    File installDirectory = workingDirectory;
 
     frontEndPluginFactory = new FrontendPluginFactory(
         workingDirectory, installDirectory);
 
     currentBundle = new File(workingDirectory, "vis.bundle.cache.js");
+    gson = new Gson();
     installNodeAndNpm();
   }
 
@@ -129,17 +131,19 @@ public class HeliumVisualizationFactory {
       }
       loadJsImport.append(
           "import " + moduleNameVersion[0] + " from \"" + moduleNameVersion[0] + "\"\n");
-      loadJsRegister.append("visualizations.push({" +
-          "id: '" + moduleNameVersion[0] + "'," +
-          "name: '" + pkg.getName() + "'," +
-          "icon: '" + pkg.getIcon() + "'," +
-          "class: " + moduleNameVersion[0] +
-          "})\n");
+
+      loadJsRegister.append("visualizations.push({\n");
+      loadJsRegister.append("id: \"" + moduleNameVersion[0] + "\",\n");
+      loadJsRegister.append("name: \"" + pkg.getName() + "\",\n");
+      loadJsRegister.append("icon: " + gson.toJson(pkg.getIcon()) + ",\n");
+      loadJsRegister.append("class: " + moduleNameVersion[0] + "\n");
+      loadJsRegister.append("})\n");
     }
 
     FileUtils.write(new File(workingDirectory, "package.json"), pkgJson);
     FileUtils.write(new File(workingDirectory, "webpack.config.js"), webpackConfig);
-    FileUtils.write(new File(workingDirectory, "load.js"), loadJsImport.append(loadJsRegister).toString());
+    FileUtils.write(new File(workingDirectory, "load.js"),
+        loadJsImport.append(loadJsRegister).toString());
 
     // install tabledata module
     File tabledataModuleInstallPath = new File(workingDirectory,

zeppelin-zengine/src/test/resources/helium/vis1/vis1.js

@@ -1,3 +1,19 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You 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.
+ */
 import Visualization from 'zeppelin-vis'
 import PassthroughTransformation from 'zeppelin-tabledata/passthrough'