Repository: incubator-zeppelin Updated Branches: refs/heads/gh-pages 8398b083d -> 695668605
ZEPPELIN-60 Document angular display system. and more This PR adds / modify website * [x] Add documentation for Angular display system * [x] Add how to contribute to website * [x] Restructure documentation : list all interpreters and display systems. Author: Lee moon soo <[email protected]> Author: Lee moon soo <[email protected]> Closes #188 from Leemoonsoo/ZEPPELIN-60 and squashes the following commits: 0ff45aa [Lee moon soo] Add information of availability of angular display related functions ba495be [Lee moon soo] Better sentence 19d86a6 [Lee moon soo] it's -> its 55e0b74 [Lee moon soo] bind -> watch 4cbf393 [Lee moon soo] Remove old link 6a886ab [Lee moon soo] hash link to html section 6cd62b5 [Lee moon soo] Add angular display system usage d96a947 [Lee moon soo] Update display system Project: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/commit/69566860 Tree: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/tree/69566860 Diff: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/diff/69566860 Branch: refs/heads/gh-pages Commit: 6956686050d1655eb4d63f91a540cd0b377e066c Parents: 8398b08 Author: Lee moon soo <[email protected]> Authored: Sun Aug 9 17:03:08 2015 -0700 Committer: Lee moon soo <[email protected]> Committed: Thu Aug 13 09:43:53 2015 -0700 ---------------------------------------------------------------------- .../img/screenshots/display_angular.png | Bin 0 -> 69621 bytes .../img/screenshots/display_angular1.png | Bin 0 -> 97217 bytes .../img/screenshots/display_angular2.png | Bin 0 -> 94041 bytes .../img/screenshots/display_angular3.png | Bin 0 -> 76267 bytes .../zeppelin/img/screenshots/display_html.png | Bin 18251 -> 28401 bytes .../zeppelin/img/screenshots/display_table.png | Bin 22082 -> 30912 bytes .../zeppelin/img/screenshots/display_table1.png | Bin 0 -> 41254 bytes .../img/screenshots/display_table_html.png | Bin 30295 -> 33133 bytes .../zeppelin/img/screenshots/display_text.png | Bin 13490 -> 21517 bytes .../zeppelin/img/screenshots/display_text1.png | Bin 0 -> 22977 bytes docs/development/howtocontribute.md | 2 +- docs/development/howtocontributewebsite.md | 63 ++++++++++++++ docs/display.md | 47 ---------- docs/displaysystem/angular.md | 85 +++++++++++++++++++ docs/displaysystem/display.md | 32 +++++++ docs/displaysystem/table.md | 24 ++++++ docs/index.md | 21 ++++- docs/pleasecontribute.md | 15 ++++ 18 files changed, 237 insertions(+), 52 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/69566860/assets/themes/zeppelin/img/screenshots/display_angular.png ---------------------------------------------------------------------- diff --git a/assets/themes/zeppelin/img/screenshots/display_angular.png b/assets/themes/zeppelin/img/screenshots/display_angular.png new file mode 100644 index 0000000..923f0a5 Binary files /dev/null and b/assets/themes/zeppelin/img/screenshots/display_angular.png differ http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/69566860/assets/themes/zeppelin/img/screenshots/display_angular1.png ---------------------------------------------------------------------- diff --git a/assets/themes/zeppelin/img/screenshots/display_angular1.png b/assets/themes/zeppelin/img/screenshots/display_angular1.png new file mode 100644 index 0000000..b24810c Binary files /dev/null and b/assets/themes/zeppelin/img/screenshots/display_angular1.png differ http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/69566860/assets/themes/zeppelin/img/screenshots/display_angular2.png ---------------------------------------------------------------------- diff --git a/assets/themes/zeppelin/img/screenshots/display_angular2.png b/assets/themes/zeppelin/img/screenshots/display_angular2.png new file mode 100644 index 0000000..e2c366b Binary files /dev/null and b/assets/themes/zeppelin/img/screenshots/display_angular2.png differ http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/69566860/assets/themes/zeppelin/img/screenshots/display_angular3.png ---------------------------------------------------------------------- diff --git a/assets/themes/zeppelin/img/screenshots/display_angular3.png b/assets/themes/zeppelin/img/screenshots/display_angular3.png new file mode 100644 index 0000000..a5f622d Binary files /dev/null and b/assets/themes/zeppelin/img/screenshots/display_angular3.png differ http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/69566860/assets/themes/zeppelin/img/screenshots/display_html.png ---------------------------------------------------------------------- diff --git a/assets/themes/zeppelin/img/screenshots/display_html.png b/assets/themes/zeppelin/img/screenshots/display_html.png index 5ccd0bf..745c27e 100644 Binary files a/assets/themes/zeppelin/img/screenshots/display_html.png and b/assets/themes/zeppelin/img/screenshots/display_html.png differ http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/69566860/assets/themes/zeppelin/img/screenshots/display_table.png ---------------------------------------------------------------------- diff --git a/assets/themes/zeppelin/img/screenshots/display_table.png b/assets/themes/zeppelin/img/screenshots/display_table.png index 47be3e5..255860c 100644 Binary files a/assets/themes/zeppelin/img/screenshots/display_table.png and b/assets/themes/zeppelin/img/screenshots/display_table.png differ http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/69566860/assets/themes/zeppelin/img/screenshots/display_table1.png ---------------------------------------------------------------------- diff --git a/assets/themes/zeppelin/img/screenshots/display_table1.png b/assets/themes/zeppelin/img/screenshots/display_table1.png new file mode 100644 index 0000000..ce2946d Binary files /dev/null and b/assets/themes/zeppelin/img/screenshots/display_table1.png differ http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/69566860/assets/themes/zeppelin/img/screenshots/display_table_html.png ---------------------------------------------------------------------- diff --git a/assets/themes/zeppelin/img/screenshots/display_table_html.png b/assets/themes/zeppelin/img/screenshots/display_table_html.png index b4d2d97..bce874c 100644 Binary files a/assets/themes/zeppelin/img/screenshots/display_table_html.png and b/assets/themes/zeppelin/img/screenshots/display_table_html.png differ http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/69566860/assets/themes/zeppelin/img/screenshots/display_text.png ---------------------------------------------------------------------- diff --git a/assets/themes/zeppelin/img/screenshots/display_text.png b/assets/themes/zeppelin/img/screenshots/display_text.png index 6ce26bc..d177404 100644 Binary files a/assets/themes/zeppelin/img/screenshots/display_text.png and b/assets/themes/zeppelin/img/screenshots/display_text.png differ http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/69566860/assets/themes/zeppelin/img/screenshots/display_text1.png ---------------------------------------------------------------------- diff --git a/assets/themes/zeppelin/img/screenshots/display_text1.png b/assets/themes/zeppelin/img/screenshots/display_text1.png new file mode 100644 index 0000000..c39eb09 Binary files /dev/null and b/assets/themes/zeppelin/img/screenshots/display_text1.png differ http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/69566860/docs/development/howtocontribute.md ---------------------------------------------------------------------- diff --git a/docs/development/howtocontribute.md b/docs/development/howtocontribute.md index 1065a62..b2eea1e 100644 --- a/docs/development/howtocontribute.md +++ b/docs/development/howtocontribute.md @@ -100,7 +100,7 @@ thrift -out zeppelin-interpreter/src/main/java/ --gen java zeppelin-interpreter/ ### JIRA -Zeppelin manages it's issues in Jira. [https://issues.apache.org/jira/browse/ZEPPELIN](https://issues.apache.org/jira/browse/ZEPPELIN) +Zeppelin manages its issues in Jira. [https://issues.apache.org/jira/browse/ZEPPELIN](https://issues.apache.org/jira/browse/ZEPPELIN) ### Stay involved Contributors should join the Zeppelin mailing lists. http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/69566860/docs/development/howtocontributewebsite.md ---------------------------------------------------------------------- diff --git a/docs/development/howtocontributewebsite.md b/docs/development/howtocontributewebsite.md new file mode 100644 index 0000000..c8ea80a --- /dev/null +++ b/docs/development/howtocontributewebsite.md @@ -0,0 +1,63 @@ +--- +layout: page +title: "How to contribute (website)" +description: "How to contribute (website)" +group: development +--- + +## IMPORTANT + +Apache Zeppelin (incubating) is an [Apache2 License](http://www.apache.org/licenses/LICENSE-2.0.html) Software. +Any contribution to Zeppelin (Source code, Documents, Image, Website) means you agree license all your contributions as Apache2 License. + + + +### Modifying the website + + +<br /> +#### Getting the source code +First of all, you need the website source code. The official location of mirror for Zeppelin is [https://github.com/apache/incubator-zeppelin](https://github.com/apache/incubator-zeppelin). Website is hosted in branch 'gh-pages'. + +Get the source code on your development machine using git. + +``` +git clone -b gh-pages https://github.com/apache/incubator-zeppelin.git zeppelin-pages +``` + +<br /> +#### Build + +To build, you'll need to install some prerequisites. + +Please check 'Build' section on [https://github.com/apache/incubator-zeppelin/blob/gh-pages/README.md#build](https://github.com/apache/incubator-zeppelin/blob/gh-pages/README.md#build) + +<br /> +#### Run website in development mode + +While you're modifying website, you'll want to see preview of it. + +Please check 'Run' section on [https://github.com/apache/incubator-zeppelin/blob/gh-pages/README.md#run](https://github.com/apache/incubator-zeppelin/blob/gh-pages/README.md#run) + +You'll able to access localhost:4000 with your webbrowser. + +<br /> +#### Pull request + +When you're ready, just make a pull-request. + + +<br /> +### Alternative way + +You can directly edit .md files in github's web interface and make pullrequest. + + +<br /> +### JIRA +Zeppelin manages its issues in Jira. [https://issues.apache.org/jira/browse/ZEPPELIN](https://issues.apache.org/jira/browse/ZEPPELIN) + +### Stay involved +Contributors should join the Zeppelin mailing lists. + +* [[email protected]](http://mail-archives.apache.org/mod_mbox/incubator-zeppelin-dev/) is for people who want to contribute code to Zeppelin. [subscribe](mailto:[email protected]?subject=send this email to subscribe), [unsubscribe](mailto:[email protected]?subject=send this email to unsubscribe), [archives](http://mail-archives.apache.org/mod_mbox/incubator-zeppelin-dev/) http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/69566860/docs/display.md ---------------------------------------------------------------------- diff --git a/docs/display.md b/docs/display.md deleted file mode 100644 index 816443d..0000000 --- a/docs/display.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -layout: page -title: "Display" -description: "" -group: manual ---- -{% include JB/setup %} - - -### Display - -Zeppelin prints output of language backend in text, by default. -However, if output contains some magic keyword, Zeppelin automatically formatting the output as Table, Chart, Image, or Html. - -<br /> -#### Display as Text - -If output has no magic keyword provided Zeppelin print the output in text. - -<img src="../assets/themes/zeppelin/img/screenshots/display_text.png" /> - -<br /> -#### Display as Html - -If output starts with %html, it is interpreted as an html code. - -<img src="../assets/themes/zeppelin/img/screenshots/display_html.png" /> - -<br /> -#### Display as Table, Chart - -If output starts with %table, it is interpreted as a table. Table can be seen as chart. - -Output's format should be, row separated by '\n' (newline) and column separated by '\t' (tab). First row is header. - -<img src="../assets/themes/zeppelin/img/screenshots/display_table.png" /> - -If table contents start with %html, it is interpreted as an HTML. - -<img src="../assets/themes/zeppelin/img/screenshots/display_table_html.png" /> - -<br /> -#### Display as Image - -If output starts with %img, it is interpreted as base64 encoded image. - -<img src="../assets/themes/zeppelin/img/screenshots/display_image.png" /> http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/69566860/docs/displaysystem/angular.md ---------------------------------------------------------------------- diff --git a/docs/displaysystem/angular.md b/docs/displaysystem/angular.md new file mode 100644 index 0000000..b6472af --- /dev/null +++ b/docs/displaysystem/angular.md @@ -0,0 +1,85 @@ +--- +layout: page +title: "Angular Display System" +description: "" +group: display +--- +{% include JB/setup %} + + +### Angular (Beta) + +Angular display system treats output as an view template of [AngularJS](https://angularjs.org/). +It compiles templates and display inside of Zeppelin. + +Zeppelin provides gateway between your interpreter and your compiled AngularJS view teamplates. +Therefore, you can not only update scope variable from your interpreter but also watch your scope variable in the interpreter, which is JVM process. + +<br /> +#### Print AngularJS view + +To use angular display system, your output should starts with "%angular". +<img src="../../assets/themes/zeppelin/img/screenshots/display_angular.png" width=600px /> + +Note that display system is backend independnet. + +Because of variable 'name' is not defined, 'Hello \{\{name\}\}' display 'Hello '. + +<br /> +#### Bind/Unbind variable + +Through ZeppelinContext, you can bind/unbind variable to AngularJS view. + +Currently it only works in Spark Interpreter (scala). + +``` +// bind my 'object' as angular scope variable 'name' in current notebook. +z.angularBind(String name, Object object) + +// bind my 'object' as angular scope variable 'name' in all notebooks related to current interpreter. +z.angularBindGlobal(String name, Object object) + +// unbind angular scope variable 'name' in current notebook. +z.angularBind(String name) + +// unbind angular scope variable 'name' in all notebooks related to current interpreter. +z.angularBindGlobal(String name) + +``` + +In the example, let's bind "world" variable 'name'. Then you can see AngularJs view are updated immediately. + +<img src="../../assets/themes/zeppelin/img/screenshots/display_angular1.png" width=600px /> + + +<br /> +#### Watch/Unwatch variable + +Through ZeppelinContext, you can watch/unwatch variable in AngularJs view. + +Currently it only works in Spark Interpreter (scala). + +``` +// register for angular scope variable 'name' (notebook) +z.angularWatch(String name, (before, after) => { ... }) + +// unregister watcher for angular variable 'name' (notebook) +z.angularUnwatch(String name) + +// register for angular scope variable 'name' (global) +z.angularWatchGlobal(String name, (before, after) => { ... }) + +// unregister watcher for angular variable 'name' (global) +z.angularUnwatchGlobal(String name) + + +``` + +Let's make an button, that increment 'run' variable by 1 when it is clicked. +z.angularBind("run", 0) will initialize 'run' to zero. And then register watcher of 'run'. + +<img src="../../assets/themes/zeppelin/img/screenshots/display_angular2.png" width=600px /> + +After clicked button, you'll see both 'run' and numWatched are increased by 1 + +<img src="../../assets/themes/zeppelin/img/screenshots/display_angular3.png" width=600px /> http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/69566860/docs/displaysystem/display.md ---------------------------------------------------------------------- diff --git a/docs/displaysystem/display.md b/docs/displaysystem/display.md new file mode 100644 index 0000000..1c1ebd5 --- /dev/null +++ b/docs/displaysystem/display.md @@ -0,0 +1,32 @@ +--- +layout: page +title: "Text/Html Display System" +description: "" +group: display +--- +{% include JB/setup %} + + +<a name="text"> </a> +<br /> +<br /> +### Text + +Zeppelin prints output of language backend in text, by default. + +<img src="../../assets/themes/zeppelin/img/screenshots/display_text.png" /> + +You can explicitly say you're using text display system. + +<img src="../../assets/themes/zeppelin/img/screenshots/display_text1.png" /> + +Note that display system is backend independent. + +<a name="html"> </a> +<br /> +<br /> +### Html + +With '%html' directive, Zeppelin treats your output as html + +<img src="../../assets/themes/zeppelin/img/screenshots/display_html.png" /> http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/69566860/docs/displaysystem/table.md ---------------------------------------------------------------------- diff --git a/docs/displaysystem/table.md b/docs/displaysystem/table.md new file mode 100644 index 0000000..188681c --- /dev/null +++ b/docs/displaysystem/table.md @@ -0,0 +1,24 @@ +--- +layout: page +title: "Table Display System" +description: "" +group: display +--- +{% include JB/setup %} + + +### Table + +If you have data that row seprated by '\n' (newline) and column separated by '\t' (tab) with first row as header row, for example + +<img src="../../assets/themes/zeppelin/img/screenshots/display_table.png" /> + +You can simply use %table display system to leverage Zeppelin's built in visualization. + +<img src="../../assets/themes/zeppelin/img/screenshots/display_table1.png" /> + +Note that display system is backend independent. + +If table contents start with %html, it is interpreted as an HTML. + +<img src="../../assets/themes/zeppelin/img/screenshots/display_table_html.png" /> http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/69566860/docs/index.md ---------------------------------------------------------------------- diff --git a/docs/index.md b/docs/index.md index e90ef61..8267685 100644 --- a/docs/index.md +++ b/docs/index.md @@ -16,19 +16,32 @@ group: nav-right ### Interpreter -* [Spark](./interpreter/spark.html) +* [flink](../docs/pleasecontribute.html) +* [hive](../docs/pleasecontribute.html) +* [ignite](../docs/pleasecontribute.html) +* [lens](../docs/pleasecontribute.html) +* [md](../docs/pleasecontribute.html) +* [sh](../docs/pleasecontribute.html) +* [spark](./interpreter/spark.html) +* [tajo](../docs/pleasecontribute.html) + +### Display System + +* [text](./displaysystem/display.html) +* [html](./displaysystem/display.html#html) +* [table](./displaysystem/table.html) +* [angular](./displaysystem/angular.html) (Beta) ### Manual * [Dynamic Form](./dynamicform.html) -* [Display System](./display.html) ### Development * [Writing Zeppelin Interpreter](./development/writingzeppelininterpreter.html) -* [How to contribute](./development/howtocontribute.html) - +* [How to contribute (code)](./development/howtocontribute.html) +* [How to contribute (website)](./development/howtocontributewebsite.html) http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/69566860/docs/pleasecontribute.md ---------------------------------------------------------------------- diff --git a/docs/pleasecontribute.md b/docs/pleasecontribute.md new file mode 100644 index 0000000..4724a66 --- /dev/null +++ b/docs/pleasecontribute.md @@ -0,0 +1,15 @@ +--- +layout: page +title: "Please contribute" +description: "" +group: development +--- +{% include JB/setup %} + + +### Waiting for your help +The content does not exist yet. + +We're always welcoming contribution. + +If you're interested, please check [How to contribute (website)](./development/howtocontributewebsite.html).
