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 <[email protected]>
Date: 2016-12-18T15:52:37Z
bundle visualization package from npm repository on the fly
commit 2a980ddd7c0b0cd465e8697def6c45497fc4a606
Author: Lee moon soo <[email protected]>
Date: 2016-12-29T05:03:58Z
initial implementation of helium menu
commit 67d988eda1c2225fe08b6660ee7158cb9086ecfb
Author: Lee moon soo <[email protected]>
Date: 2016-12-29T05:33:14Z
import helium service js
commit d3d591f7258d162bf727c21074be350258963fc0
Author: Lee moon soo <[email protected]>
Date: 2016-12-30T04:31:09Z
pass bundled visualization to result.controller.js
commit 9e9bfac5926b8ab1c9e19e133d8b16c7e95881ee
Author: Lee moon soo <[email protected]>
Date: 2016-12-29T05:03:58Z
initial implementation of helium menu
commit a2b1ad8924b6de48dfcd6080295e0eb87d114f24
Author: Lee moon soo <[email protected]>
Date: 2016-12-29T05:33:14Z
import helium service js
commit 45a9dde43c6deff89d847ef5f3e4fb2f22e2ab43
Author: Lee moon soo <[email protected]>
Date: 2016-12-30T04:31:09Z
pass bundled visualization to result.controller.js
commit 8d8c72f338ef301364a5fe2ea0c4460809db8486
Author: Lee moon soo <[email protected]>
Date: 2017-01-01T20:37:31Z
connect visualization factory with restapi
commit a0b23d4a79bf1a4a6dd495cb90d50bbc12e81027
Author: Lee moon soo <[email protected]>
Date: 2017-01-02T04:53:38Z
Convert horizontalbar to VISUALIZATION example
commit 31e2d2eaeb440e15afc6521cb6ab4765581b0584
Author: Lee moon soo <[email protected]>
Date: 2017-01-02T04:55:08Z
load visualization and tabledata module from source instead npm if
accessible
commit 2d69ec8d8a1b5e7f949ee195d15d0cf7e0b2e6c9
Author: Lee moon soo <[email protected]>
Date: 2017-01-02T20:57:23Z
add result.css
commit d73599de5175052470a5e42a8879bf7c0ca41918
Author: Lee moon soo <[email protected]>
Date: 2017-01-02T20:58:07Z
Add conf/helium.json in .gitignore
commit be7f6494f4e7630669d142544249126061344f7b
Author: Lee moon soo <[email protected]>
Date: 2017-01-04T17:57:23Z
Resolve dependency conflict
commit 63cb86ec00797915d7ef28851146b064bb03719d
Author: Lee moon soo <[email protected]>
Date: 2017-01-04T17:57:40Z
update unittest
commit bdf115a38e9118fe6fb534e769359426cf2805a8
Author: Lee moon soo <[email protected]>
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 [email protected] or file a JIRA ticket
with INFRA.
---
