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.  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  ### 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. ---