{"action":"created","issue":{"url":"https://api.github.com/repos/apache/zeppelin/issues/1842","repository_url":"https://api.github.com/repos/apache/zeppelin","labels_url":"https://api.github.com/repos/apache/zeppelin/issues/1842/labels{/name}","comments_url":"https://api.github.com/repos/apache/zeppelin/issues/1842/comments","events_url":"https://api.github.com/repos/apache/zeppelin/issues/1842/events","html_url":"https://github.com/apache/zeppelin/pull/1842","id":198789168,"number":1842,"title":"[ZEPPELIN-1619] Load js package as a plugin visualization","user":{"login":"Leemoonsoo","id":1540981,"avatar_url":"https://avatars.githubusercontent.com/u/1540981?v=3","gravatar_id":"","url":"https://api.github.com/users/Leemoonsoo","html_url":"https://github.com/Leemoonsoo","followers_url":"https://api.github.com/users/Leemoonsoo/followers","following_url":"https://api.github.com/users/Leemoonsoo/following{/other_user}","gists_url":"https://api.github.com/users/Leemoonsoo/gists{/gist_id}","starred_url":"https://api.github.com/users/Leemoonsoo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Leemoonsoo/subscriptions","organizations_url":"https://api.github.com/users/Leemoonsoo/orgs","repos_url":"https://api.github.com/users/Leemoonsoo/repos","events_url":"https://api.github.com/users/Leemoonsoo/events{/privacy}","received_events_url":"https://api.github.com/users/Leemoonsoo/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":10,"created_at":"2017-01-04T19:24:28Z","updated_at":"2017-01-12T01:23:59Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/apache/zeppelin/pulls/1842","html_url":"https://github.com/apache/zeppelin/pull/1842","diff_url":"https://github.com/apache/zeppelin/pull/1842.diff","patch_url":"https://github.com/apache/zeppelin/pull/1842.patch"},"body":"### What is this PR for?\r\nCurrent 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.\r\n\r\nHowever, 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 barrier for javascript developers.\r\n\r\nThis PR adds capability to load pure javascript package as a visualization.\r\n\r\n### how it works\r\n\r\n1. create (copy, download) 'helium package json' file into `ZEPPELIN_HOME/helium` directory.\r\n  The json file point visualization js package in npm repository or local file system in `artifact` field.   \r\n  `type` field in the json file need to be `VISUALIZATION`\r\n\r\nHere's an example (zeppelin-examples/zeppelin-example-horizontalbar/zeppelin-example-horizontalbar.json)\r\n```\r\n{\r\n  \"type\" : \"VISUALIZATION\",\r\n  \"name\" : \"zeppelin_horizontalbar\",\r\n  \"description\" : \"Horizontal Bar chart (example)\",\r\n  \"artifact\" : \"./zeppelin-examples/zeppelin-example-horizontalbar\",\r\n  \"icon\" : \"<i class='fa fa-bar-chart rotate90flipX'></i>\"\r\n}\r\n```\r\n\r\n2. Go to helium GUI menu. (e.g. http://localhost:8080/#/helium).\r\n  The menu will list all available packages. \r\n<img width=\"796\" alt=\"writing_visualization_helium_menu\" src=\"https://cloud.githubusercontent.com/assets/1540981/21749660/0f401c10-d558-11e6-9961-b6d0a9c023d8.png\">\r\n\r\n \r\n3. click 'enable' in any package want to use. \r\nOnce a visualization package is enabled, `HeliumVisualizationFactory` will collect all enabled visualizations and create js bundle on the fly.\r\n\r\n4. js bundle will be loaded on notebook and additional visualization becomes available\r\n![image](https://cloud.githubusercontent.com/assets/1540981/21749729/709b2b3e-d559-11e6-8318-7f2871e7c39a.png)\r\n\r\n\r\n### Programming API to create new plugin visualization.\r\n\r\nSimply extends [visualization.js](https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/visualization/visualization.js) and overrides some methods, such as\r\n\r\n```\r\n  /**\r\n   * get transformation\r\n   */\r\n  getTransformation() {\r\n    // override this\r\n  };\r\n\r\n  /**\r\n   * Method will be invoked when data or configuration changed\r\n   */\r\n  render(tableData) {\r\n    // override this\r\n  };\r\n\r\n  /**\r\n   * Refresh visualization.\r\n   */\r\n  refresh() {\r\n    // override this\r\n  };\r\n\r\n  /**\r\n   * method will be invoked when visualization need to be destroyed.\r\n   * Don't need to destroy this.targetEl.\r\n   */\r\n  destroy() {\r\n    // override this\r\n  };\r\n\r\n  /**\r\n   * return {\r\n   *   template : angular template string or url (url should end with .html),\r\n   *   scope : an object to bind to template scope\r\n   * }\r\n   */\r\n  getSetting() {\r\n    // override this\r\n  };\r\n```\r\n\r\nThis is exactly the same api that built-in visualization uses.\r\n\r\nan example implementation included `zeppelin-examples/zeppelin-example-horizontalbar/horizontalbar.js`.\r\nActually [all built-in visualizations](https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/visualization/builtins) are example\r\n\r\n\r\n### Packaging and publishing visualization\r\n\r\nEach visualization will need `package.json` file (e.g. `zeppelin-examples/zeppelin-example-horizontalbar/package.json`) to be packaged.\r\nPackage can be published in npm repository or package can be deployed to the local filesystem.\r\n\r\n`zeppelin-examples/zeppelin-example-horizontalbar/` is an example package that is deployed in the local filesystem\r\n\r\n### Development mode\r\n\r\nFirst, locally install and enable your development package by setting `artifact` field to the development directory.\r\nThen run zeppelin-web in visualization development mode with following command\r\n```\r\ncd zeppelin-web\r\nnpm run visdev\r\n```\r\nWhen you have change in your local development package, just reload your notebook. Then Zeppelin will automatically rebuild / reload the package.\r\n\r\n\r\n\r\nAny feedback would be appreciated!\r\n\r\n\r\n### What type of PR is it?\r\nFeature\r\n\r\n### Todos\r\n* [x] - Load plugin visualization js package on runtime\r\n* [x] - Make the feature works in zeppelin Binary package\r\n* [x] - Show loading indicator while 'enable' / 'disable' package\r\n* [x] - Add document\r\n* [x] - Add license of new dependency\r\n* [x] - Development mode\r\n* [x] - Propagate error to front-end\r\n* [x] - Display multiple versions of a package.\r\n\r\n### What is the Jira issue?\r\nhttps://issues.apache.org/jira/browse/ZEPPELIN-1619\r\n\r\n### How should this be tested?\r\nBuild Zeppelin with `-Pexamples` flag. That'll install example visualization package `horizontalbar`.\r\nYou'll able to select `horizontalbar` along with other built-in visualizations\r\n![image](https://cloud.githubusercontent.com/assets/1540981/21655057/27d61740-d26d-11e6-88f2-02c653e102c6.png)\r\n\r\nTo test npm online package install capability,  Place [zeppelin-bubble.json](https://github.com/Leemoonsoo/zeppelin-bubble/blob/master/zeppelin-bubble.json) in hour local registry (`ZEPPELIN_HOME/helium`) and enable it in Helium gui menu.\r\nAnd then zeppelin will download package from npm repository and load.\r\n![bubblechart](https://cloud.githubusercontent.com/assets/1540981/21749717/280aa430-d559-11e6-9209-889a4f86d7e2.gif)\r\n\r\n\r\n### Questions:\r\n* Does the licenses files need update? yes\r\n* Is there breaking changes for older versions? no\r\n* Does this needs documentation? yes\r\n"},"comment":{"url":"https://api.github.com/repos/apache/zeppelin/issues/comments/272048881","html_url":"https://github.com/apache/zeppelin/pull/1842#issuecomment-272048881","issue_url":"https://api.github.com/repos/apache/zeppelin/issues/1842","id":272048881,"user":{"login":"Leemoonsoo","id":1540981,"avatar_url":"https://avatars.githubusercontent.com/u/1540981?v=3","gravatar_id":"","url":"https://api.github.com/users/Leemoonsoo","html_url":"https://github.com/Leemoonsoo","followers_url":"https://api.github.com/users/Leemoonsoo/followers","following_url":"https://api.github.com/users/Leemoonsoo/following{/other_user}","gists_url":"https://api.github.com/users/Leemoonsoo/gists{/gist_id}","starred_url":"https://api.github.com/users/Leemoonsoo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Leemoonsoo/subscriptions","organizations_url":"https://api.github.com/users/Leemoonsoo/orgs","repos_url":"https://api.github.com/users/Leemoonsoo/repos","events_url":"https://api.github.com/users/Leemoonsoo/events{/privacy}","received_events_url":"https://api.github.com/users/Leemoonsoo/received_events","type":"User","site_admin":false},"created_at":"2017-01-12T01:23:59Z","updated_at":"2017-01-12T01:23:59Z","body":"Thanks for the reviews and verifications!\r\n\r\n@AhyoungRyu Addressed all the comments and fixed drag and drop problem.\r\nWhen 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."}}
{"actor":{"display_login":"Leemoonsoo"}}