GitHub user Leemoonsoo opened a pull request:

    https://github.com/apache/zeppelin/pull/1842

    [WIP] [ZEPPELIN-1619] Load js package as a plugin visualization

    ### What is this PR for?
    Current helium plugin application api (experimental) requires create 
library in java class, and need to create both backend / frontend code in the 
package. Which is good if your plugin requires both frontend and backend code 
running.
    
    However, when user just want to make new visualization which completely 
runs on front-end side in javascript, creating helium application in java 
project and taking care of backend code can be bit of overhead and obstacle for 
javascript developers.
    
    This PR adds capability to load pure javascript package as a visualization.
    
    ### how it works
    
    1. create (copy, download) 'helium package json' (e.g. 
`zeppelin-examples/zeppelin-example-horizontalbar/zeppelin-example-horizontalbar.json`)
 file into `ZEPPELIN_HOME/helium` directory.
      The json file point visualization js package in npm repository or local 
file system in `artifact` field.   
      `type` field in the json file need to be `VISUALIZATION`
    
    2. Go to helium GUI menu. (e.g. http://localhost:8080/#/helium).
      The menu will list all available packages. 
    
![image](https://cloud.githubusercontent.com/assets/1540981/21654974/bda34abe-d26c-11e6-8d16-db482faef9a2.png)
     
    3. click 'enable' in any package want to use. 
    Once a visualization package is enabled, `HeliumVisualizationFactory` will 
collect all enabled visualizations and create js bundle on the fly.
    
    4. js bundle will be loaded on notebook and additional visualization 
becomes available
    
![image](https://cloud.githubusercontent.com/assets/1540981/21655057/27d61740-d26d-11e6-88f2-02c653e102c6.png)
    
    
    ### Programming API to create new plugin visualization.
    
    Simply extends 
[visualization.js](https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/visualization/visualization.js)
 and overrides some methods, such as
    
    ```
      /**
       * get transformation
       */
      getTransformation() {
        // override this
      };
    
      /**
       * Method will be invoked when data or configuration changed
       */
      render(tableData) {
        // override this
      };
    
      /**
       * Refresh visualization.
       */
      refresh() {
        // override this
      };
    
      /**
       * method will be invoked when visualization need to be destroyed.
       * Don't need to destroy this.targetEl.
       */
      destroy() {
        // override this
      };
    
      /**
       * return {
       *   template : angular template string or url (url should end with 
.html),
       *   scope : an object to bind to template scope
       * }
       */
      getSetting() {
        // override this
      };
    ```
    
    This is exactly the same api that built-in visualization uses.
    
    an example implementation included 
`zeppelin-examples/zeppelin-example-horizontalbar/horizontalbar.js`.
    Actually [all built-in 
visualizations](https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/visualization/builtins)
 are example
    
    
    ### Packaging and publishing visualization
    
    Each visualization will need `package.json` file (e.g. 
`zeppelin-examples/zeppelin-example-horizontalbar/package.json`) to be packaged.
    Package can be published in npm repository or package can be deployed to 
the local filesystem.
    
    `zeppelin-examples/zeppelin-example-horizontalbar/` is an example package 
that is deployed in the local filesystem
    
    ### Future work
    
    Development mode is not implemented here. Currently, developer need to 
create a locally deployed package. And click 'disable' -> 'enable' package in 
helium gui menu everytime developer made code change, so Zeppelin can bundle 
and reload updated code and display.
    
    There must be faster way to apply code change in plugin visualization 
development mode. This can be the future work.
    
    
    Any feedback would be appreciated!
    
    
    ### What type of PR is it?
    Feature
    
    ### Todos
    * [x] - Load plugin visualization js package on runtime
    * [ ] - Make the feature works in zeppelin Binary package
    * [ ] - Show loading indicator while 'enable' / 'disable' package
    * [ ] - Add document
    * [ ] - Add license of new dependency
    
    ### What is the Jira issue?
    https://issues.apache.org/jira/browse/ZEPPELIN-1619
    
    ### How should this be tested?
    Build Zeppelin with `-Pexamples` flag. That'll install example 
visualization package `horizontalbar`.
    You'll able to select `horizontalbar` along with other built-in 
visualizations
    
    ### Questions:
    * Does the licenses files need update? yes
    * Is there breaking changes for older versions? no
    * Does this needs documentation? yes


You can merge this pull request into a Git repository by running:

    $ git pull https://github.com/Leemoonsoo/zeppelin ZEPPELIN-1619-rebased

Alternatively you can review and apply these changes as the patch at:

    https://github.com/apache/zeppelin/pull/1842.patch

To close this pull request, make a commit to your master/trunk branch
with (at least) the following in the commit message:

    This closes #1842
    
----
commit 2f7c2431bb16e2102bcab7e9bd8932177c609abd
Author: Lee moon soo <m...@apache.org>
Date:   2016-12-18T15:52:37Z

    bundle visualization package from npm repository on the fly

commit 2a980ddd7c0b0cd465e8697def6c45497fc4a606
Author: Lee moon soo <m...@apache.org>
Date:   2016-12-29T05:03:58Z

    initial implementation of helium menu

commit 67d988eda1c2225fe08b6660ee7158cb9086ecfb
Author: Lee moon soo <m...@apache.org>
Date:   2016-12-29T05:33:14Z

    import helium service js

commit d3d591f7258d162bf727c21074be350258963fc0
Author: Lee moon soo <m...@apache.org>
Date:   2016-12-30T04:31:09Z

    pass bundled visualization to result.controller.js

commit 9e9bfac5926b8ab1c9e19e133d8b16c7e95881ee
Author: Lee moon soo <m...@apache.org>
Date:   2016-12-29T05:03:58Z

    initial implementation of helium menu

commit a2b1ad8924b6de48dfcd6080295e0eb87d114f24
Author: Lee moon soo <m...@apache.org>
Date:   2016-12-29T05:33:14Z

    import helium service js

commit 45a9dde43c6deff89d847ef5f3e4fb2f22e2ab43
Author: Lee moon soo <m...@apache.org>
Date:   2016-12-30T04:31:09Z

    pass bundled visualization to result.controller.js

commit 8d8c72f338ef301364a5fe2ea0c4460809db8486
Author: Lee moon soo <m...@apache.org>
Date:   2017-01-01T20:37:31Z

    connect visualization factory with restapi

commit a0b23d4a79bf1a4a6dd495cb90d50bbc12e81027
Author: Lee moon soo <m...@apache.org>
Date:   2017-01-02T04:53:38Z

    Convert horizontalbar to VISUALIZATION example

commit 31e2d2eaeb440e15afc6521cb6ab4765581b0584
Author: Lee moon soo <m...@apache.org>
Date:   2017-01-02T04:55:08Z

    load visualization and tabledata module from source instead npm if 
accessible

commit 2d69ec8d8a1b5e7f949ee195d15d0cf7e0b2e6c9
Author: Lee moon soo <m...@apache.org>
Date:   2017-01-02T20:57:23Z

    add result.css

commit d73599de5175052470a5e42a8879bf7c0ca41918
Author: Lee moon soo <m...@apache.org>
Date:   2017-01-02T20:58:07Z

    Add conf/helium.json in .gitignore

commit be7f6494f4e7630669d142544249126061344f7b
Author: Lee moon soo <m...@apache.org>
Date:   2017-01-04T17:57:23Z

    Resolve dependency conflict

commit 63cb86ec00797915d7ef28851146b064bb03719d
Author: Lee moon soo <m...@apache.org>
Date:   2017-01-04T17:57:40Z

    update unittest

commit bdf115a38e9118fe6fb534e769359426cf2805a8
Author: Lee moon soo <m...@apache.org>
Date:   2017-01-04T18:29:22Z

    refactor code to fix HeliumTest

----


---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastruct...@apache.org or file a JIRA ticket
with INFRA.
---

Reply via email to