visualization development mode

docs/development/writingzeppelinvisualization.md

@@ -72,11 +72,11 @@ User can use just like any other built-in visualizations.
 
 
 
-## Write my Visualization
+## Write new Visualization
 
 #### 1. Create a npm package
 
-Create a [package.json](https://docs.npmjs.com/files/package.json) in your new Visualization directory. Normally, you can add any dependencies in package.json however Zeppelin Visualization package only allows two dependencies: `zeppelin-vis` and `zeppelin-tabledata`.
+Create a [package.json](https://docs.npmjs.com/files/package.json) in your new Visualization directory. Normally, you can add any dependencies in package.json however Zeppelin Visualization package only allows two dependencies: [zeppelin-vis](https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/visualization) and [zeppelin-tabledata](https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/tabledata).
 
 Here's an example
 
@@ -97,9 +97,9 @@ Here's an example
 
 #### 2. Create your own visualization
 
-To create your own visualization, you need to create a js file and import `Visualization` class from `zeppelin-vis` package and extend the class. `zeppelin-tabledata` package provides some useful transformations, like pivot, you can use in your visualization. (you can create your own transformation, too).
+To create your own visualization, you need to create a js file and import [Visualization](https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/visualization/visualization.js) class from [zeppelin-vis](https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/visualization) package and extend the class. [zeppelin-tabledata](https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/tabledata) package provides some useful transformations, like pivot, you can use in your visualization. (you can create your own transformation, too).
 
-`Visualization` class, there're several methods that you need to override and implement. Here's simple visualition that just prints `Hello world`.
+[Visualization](https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/visualization/visualization.js) class, there're several methods that you need to override and implement. Here's simple visualition that just prints `Hello world`.
 
 ```
 import Visualization from 'zeppelin-vis'
@@ -148,16 +148,16 @@ Json file contains the following information
 When you're creating a visualization, 'type' should be 'VISUALIZATION'.
 Check [application](./writingzeppelinapplication.html) type if you're interested in the other types of package.
 
-#### name
+##### name
 
 Name of visualization. Should be unique. Allows `[A-Za-z90-9_]`.
 
 
-#### description
+##### description
 
 A short description about visualization.
 
-#### artifact
+##### artifact
 
 Localtion of the visualization npm package. Support npm package with version or local filesystem path.
 
@@ -176,7 +176,7 @@ When artifact exists in local file system
 artifact: "/path/to/my/visualization"
 ```
 
-#### icon
+##### icon
 
 Icon to be used in visualization select button. String in this field will be rendered as a HTML tag.
 
@@ -185,3 +185,16 @@ e.g.
 ```
 icon: "<i class='fa fa-coffee'></i>"
 ```
+
+
+#### 4. Run in dev mode
+
+Place your __Helium package file__ in local registry (ZEPPELIN_HOME/helium).
+Run Zeppelin. And then run zeppelin-web in visualization dev mode.
+
+```
+cd zeppelin-web
+npm run visdev
+```
+
+You can browse localhost:9000. Everytime refresh your browser, Zeppelin will rebuild your visualization and reload changes.

zeppelin-server/src/main/java/org/apache/zeppelin/rest/HeliumRestApi.java

@@ -108,11 +108,15 @@ public class HeliumRestApi {
   @GET
   @Path("visualizations/load")
   @Produces("text/javascript")
-  public Response visualizationLoad() {
-    List<HeliumPackage> packages = helium.getVisualizationPackagesToBundle();
-
+  public Response visualizationLoad(@QueryParam("refresh") String refresh) {
     try {
-      File bundle = helium.getVisualizationFactory().getCurrentBundle();
+      File bundle;
+      if (refresh != null && refresh.equals("true")) {
+        bundle = helium.recreateVisualizationBundle();
+      } else {
+        bundle = helium.getVisualizationFactory().getCurrentBundle();
+      }
+
       if (bundle == null) {
         return Response.ok().build();
       } else {

zeppelin-web/.eslintrc

@@ -26,7 +26,8 @@
     "BootstrapDialog": false,
     "Handsontable": false,
     "moment": false,
-    "zeppelin" : false
+    "zeppelin" : false,
+    "process": false
   },
   "rules": {
     "no-bitwise": 2,

zeppelin-web/package.json

@@ -12,8 +12,10 @@
     "build": "grunt pre-webpack-dist && webpack && grunt post-webpack-dist",
     "predev": "npm-run-all clean && grunt pre-webpack-dev",
     "dev:server": "webpack-dev-server --hot",
+    "visdev:server": "HELIUM_VIS_DEV=true webpack-dev-server --hot",
     "dev:watch": "grunt watch-webpack-dev",
     "dev": "npm-run-all --parallel dev:server dev:watch",
+    "visdev": "npm-run-all --parallel visdev:server dev:watch",
     "pretest": "npm install karma-phantomjs-launcher",
     "test": "karma start test/karma.conf.js"
   },

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

@@ -21,6 +21,9 @@
   function heliumService($http, baseUrlSrv) {
 
     var url = baseUrlSrv.getRestApiBase() + '/helium/visualizations/load';
+    if (process.env.HELIUM_VIS_DEV) {
+      url = url + '?refresh=true';
+    }
     var visualizations = [];
 
     // load should be promise

zeppelin-web/webpack.config.js

@@ -205,7 +205,14 @@ module.exports = function makeWebpackConfig () {
       // Reference: https://github.com/webpack/extract-text-webpack-plugin
       // Extract css files
       // Disabled when in test mode or not in build mode
-      new ExtractTextPlugin('[name].[hash].css', {disable: !isProd})
+      new ExtractTextPlugin('[name].[hash].css', {disable: !isProd}),
+
+      // Reference: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+      new webpack.DefinePlugin({
+        'process.env': {
+          HELIUM_VIS_DEV: process.env.HELIUM_VIS_DEV
+        }
+      })
     )
   }
 

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

@@ -183,6 +183,10 @@ public class Helium {
     return null;
   }
 
+  public File recreateVisualizationBundle() throws IOException, TaskRunnerException {
+    return visualizationFactory.bundle(getVisualizationPackagesToBundle(), true);
+  }
+
   public void enable(String name, String artifact) throws IOException, TaskRunnerException {
     HeliumPackageSearchResult pkgInfo = getPackageInfo(name, artifact);
 

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

@@ -21,11 +21,15 @@ import com.google.common.base.Charsets;
 import com.google.common.io.Resources;
 import com.google.gson.Gson;
 import org.apache.commons.io.FileUtils;
+import org.slf4j.ILoggerFactory;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
 import java.io.File;
 import java.io.IOException;
+import java.lang.reflect.Field;
+import java.lang.reflect.InvocationTargetException;
+import java.lang.reflect.Method;
 import java.net.URL;
 import java.util.HashMap;
 import java.util.LinkedList;
@@ -88,6 +92,11 @@ public class HeliumVisualizationFactory {
   }
 
   public File bundle(List<HeliumPackage> pkgs) throws IOException, TaskRunnerException {
+    return bundle(pkgs, false);
+  }
+
+  public File bundle(List<HeliumPackage> pkgs, boolean forceRefresh)
+      throws IOException, TaskRunnerException {
     // package.json
     URL pkgUrl = Resources.getResource("helium/package.json");
     String pkgJson = Resources.toString(pkgUrl, Charsets.UTF_8);
@@ -112,7 +121,7 @@ public class HeliumVisualizationFactory {
     pkgJson = pkgJson.replaceFirst("DEPENDENCIES", dependencies.toString());
 
     // check if we can use previous bundle or not
-    if (dependencies.toString().equals(bundleCacheKey) && currentBundle.isFile()) {
+    if (dependencies.toString().equals(bundleCacheKey) && currentBundle.isFile() && !forceRefresh) {
       return currentBundle;
     }