You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@zeppelin.apache.org by Leemoonsoo <gi...@git.apache.org> on 2017/01/04 19:24:32 UTC
[GitHub] zeppelin pull request #1842: [WIP] [ZEPPELIN-1619] Load js package as a plug...
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 <mo...@apache.org>
Date: 2016-12-18T15:52:37Z
bundle visualization package from npm repository on the fly
commit 2a980ddd7c0b0cd465e8697def6c45497fc4a606
Author: Lee moon soo <mo...@apache.org>
Date: 2016-12-29T05:03:58Z
initial implementation of helium menu
commit 67d988eda1c2225fe08b6660ee7158cb9086ecfb
Author: Lee moon soo <mo...@apache.org>
Date: 2016-12-29T05:33:14Z
import helium service js
commit d3d591f7258d162bf727c21074be350258963fc0
Author: Lee moon soo <mo...@apache.org>
Date: 2016-12-30T04:31:09Z
pass bundled visualization to result.controller.js
commit 9e9bfac5926b8ab1c9e19e133d8b16c7e95881ee
Author: Lee moon soo <mo...@apache.org>
Date: 2016-12-29T05:03:58Z
initial implementation of helium menu
commit a2b1ad8924b6de48dfcd6080295e0eb87d114f24
Author: Lee moon soo <mo...@apache.org>
Date: 2016-12-29T05:33:14Z
import helium service js
commit 45a9dde43c6deff89d847ef5f3e4fb2f22e2ab43
Author: Lee moon soo <mo...@apache.org>
Date: 2016-12-30T04:31:09Z
pass bundled visualization to result.controller.js
commit 8d8c72f338ef301364a5fe2ea0c4460809db8486
Author: Lee moon soo <mo...@apache.org>
Date: 2017-01-01T20:37:31Z
connect visualization factory with restapi
commit a0b23d4a79bf1a4a6dd495cb90d50bbc12e81027
Author: Lee moon soo <mo...@apache.org>
Date: 2017-01-02T04:53:38Z
Convert horizontalbar to VISUALIZATION example
commit 31e2d2eaeb440e15afc6521cb6ab4765581b0584
Author: Lee moon soo <mo...@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 <mo...@apache.org>
Date: 2017-01-02T20:57:23Z
add result.css
commit d73599de5175052470a5e42a8879bf7c0ca41918
Author: Lee moon soo <mo...@apache.org>
Date: 2017-01-02T20:58:07Z
Add conf/helium.json in .gitignore
commit be7f6494f4e7630669d142544249126061344f7b
Author: Lee moon soo <mo...@apache.org>
Date: 2017-01-04T17:57:23Z
Resolve dependency conflict
commit 63cb86ec00797915d7ef28851146b064bb03719d
Author: Lee moon soo <mo...@apache.org>
Date: 2017-01-04T17:57:40Z
update unittest
commit bdf115a38e9118fe6fb534e769359426cf2805a8
Author: Lee moon soo <mo...@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 infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] zeppelin issue #1842: [ZEPPELIN-1619] Load js package as a plugin visualizat...
Posted by Leemoonsoo <gi...@git.apache.org>.
Github user Leemoonsoo commented on the issue:
https://github.com/apache/zeppelin/pull/1842
Ci is green. I think this is ready. Please review this.
---
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 infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] zeppelin issue #1842: [ZEPPELIN-1619] Load js package as a plugin visualizat...
Posted by AhyoungRyu <gi...@git.apache.org>.
Github user AhyoungRyu commented on the issue:
https://github.com/apache/zeppelin/pull/1842
When I enable zero or only one vizualization,
<img width="980" alt="screen shot 2017-01-12 at 12 13 32 am" src="https://cloud.githubusercontent.com/assets/10060731/21853851/fd09d836-d85b-11e6-99ee-4320e309676c.png">
I didn't no that there is reordering feature. It'll be better to show some messages in this case as well so that ppl can know about this. What do you think?
And when I tried to reorder the icons, it doesn't work `left -> right`. It only works `right -> left` like below.
---
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 infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] zeppelin issue #1842: [ZEPPELIN-1619] Load js package as a plugin visualizat...
Posted by AhyoungRyu <gi...@git.apache.org>.
Github user AhyoungRyu commented on the issue:
https://github.com/apache/zeppelin/pull/1842
@Leemoonsoo Thanks! I just suggested to have some default message like other pages (e.g. localhost:8080/#/interpreter -> there is "Manage interpreters settings. You can create / edit / remove settings. Note can bind / unbind these interpreter settings.")But it's just minor suggestion :)
I tried to create new visualization package using HighCharts as you described in documentation, I didn't face any problem and it's definitely easier to create than before \U0001f44d
---
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 infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] zeppelin issue #1842: [WIP] [ZEPPELIN-1619] Load js package as a plugin visu...
Posted by jongyoul <gi...@git.apache.org>.
Github user jongyoul commented on the issue:
https://github.com/apache/zeppelin/pull/1842
It's ok of you to have a plan to divide them. Thanks.
---
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 infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] zeppelin issue #1842: [ZEPPELIN-1619] Load js package as a plugin visualizat...
Posted by Leemoonsoo <gi...@git.apache.org>.
Github user Leemoonsoo commented on the issue:
https://github.com/apache/zeppelin/pull/1842
Thanks for the reviews and verifications!
@AhyoungRyu Addressed all the comments and fixed drag and drop problem.
When there is 0 or 1 visualization, reorder doesn't make any sense and i think we don't need to bother user with reorder feature in this case.
---
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 infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] zeppelin issue #1842: [ZEPPELIN-1619] Load js package as a plugin visualizat...
Posted by jongyoul <gi...@git.apache.org>.
Github user jongyoul commented on the issue:
https://github.com/apache/zeppelin/pull/1842
Good job! @Leemoonsoo
---
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 infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] zeppelin issue #1842: [ZEPPELIN-1619] Load js package as a plugin visualizat...
Posted by Leemoonsoo <gi...@git.apache.org>.
Github user Leemoonsoo commented on the issue:
https://github.com/apache/zeppelin/pull/1842
@AhyoungRyu Thanks for the review. Great to see High chart working nicely.
A lot more improvements on Helium menu will be required, like search page, grouping packages by type, package list sort, etc. I'd like to address further improvements on Helium menu in separate PR.
---
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 infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] zeppelin issue #1842: [ZEPPELIN-1619] Load js package as a plugin visualizat...
Posted by cloverhearts <gi...@git.apache.org>.
Github user cloverhearts commented on the issue:
https://github.com/apache/zeppelin/pull/1842
Awesome! LGTM!
---
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 infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] zeppelin issue #1842: [ZEPPELIN-1619] Load js package as a plugin visualizat...
Posted by soralee <gi...@git.apache.org>.
Github user soralee commented on the issue:
https://github.com/apache/zeppelin/pull/1842
It's very cool feature!
Tested and It works very nice like below.
**[Test result]**
When I clicked `Enable` button for using `zeppelin_horizontalbar` visualization package.
When using `Disable` button
---
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 infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] zeppelin pull request #1842: [ZEPPELIN-1619] Load js package as a plugin vis...
Posted by asfgit <gi...@git.apache.org>.
Github user asfgit closed the pull request at:
https://github.com/apache/zeppelin/pull/1842
---
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 infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] zeppelin issue #1842: [ZEPPELIN-1619] Load js package as a plugin visualizat...
Posted by AhyoungRyu <gi...@git.apache.org>.
Github user AhyoungRyu commented on the issue:
https://github.com/apache/zeppelin/pull/1842
@Leemoonsoo Tested and it works well. It's really awesome! And \U0001f44d for having really well described docs. Let me create my own viz application as explained in the documentation with real user's point of view. I will leave another comment after that :)
---
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 infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] zeppelin issue #1842: [WIP] [ZEPPELIN-1619] Load js package as a plugin visu...
Posted by Leemoonsoo <gi...@git.apache.org>.
Github user Leemoonsoo commented on the issue:
https://github.com/apache/zeppelin/pull/1842
@jongyoul I think helium related code can be extracted from zeppelin-zengine to a new module, zeppelin-helium. However, extracting code and create new module is not this PR's scope. that can be handled in separate issue.
---
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 infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] zeppelin issue #1842: [ZEPPELIN-1619] Load js package as a plugin visualizat...
Posted by Leemoonsoo <gi...@git.apache.org>.
Github user Leemoonsoo commented on the issue:
https://github.com/apache/zeppelin/pull/1842
Merge to master if no more comments!
---
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 infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] zeppelin issue #1842: [ZEPPELIN-1619] Load js package as a plugin visualizat...
Posted by 1ambda <gi...@git.apache.org>.
Github user 1ambda commented on the issue:
https://github.com/apache/zeppelin/pull/1842
Let me review this PR. I wil comment again :)
---
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 infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] zeppelin issue #1842: [WIP] [ZEPPELIN-1619] Load js package as a plugin visu...
Posted by jongyoul <gi...@git.apache.org>.
Github user jongyoul commented on the issue:
https://github.com/apache/zeppelin/pull/1842
@Leemoonsoo I like this idea to show new menu for helium but how about creating a new module like zeppelin-helium? It would be more helpful to understand whole structure. What do you think of it?
---
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 infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] zeppelin issue #1842: [ZEPPELIN-1619] Load js package as a plugin visualizat...
Posted by soralee <gi...@git.apache.org>.
Github user soralee commented on the issue:
https://github.com/apache/zeppelin/pull/1842
And when I test npm online package for using bubble chart, It works very well!
LGTM!
---
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 infrastructure@apache.org or file a JIRA ticket
with INFRA.
---