From commits-return-5092-archive-asf-public=cust-asf.ponee.io@zeppelin.apache.org Wed Jan 23 05:28:20 2019 Return-Path: X-Original-To: archive-asf-public@cust-asf.ponee.io Delivered-To: archive-asf-public@cust-asf.ponee.io Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by mx-eu-01.ponee.io (Postfix) with SMTP id 617791807BC for ; Wed, 23 Jan 2019 05:28:16 +0100 (CET) Received: (qmail 89335 invoked by uid 500); 23 Jan 2019 04:28:15 -0000 Mailing-List: contact commits-help@zeppelin.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@zeppelin.apache.org Delivered-To: mailing list commits@zeppelin.apache.org Received: (qmail 87044 invoked by uid 99); 23 Jan 2019 04:28:10 -0000 Received: from Unknown (HELO svn01-us-west.apache.org) (209.188.14.144) by apache.org (qpsmtpd/0.29) with ESMTP; Wed, 23 Jan 2019 04:28:10 +0000 Received: from svn01-us-west.apache.org (localhost [127.0.0.1]) by svn01-us-west.apache.org (ASF Mail Server at svn01-us-west.apache.org) with ESMTP id E6ED73A2D1E for ; Wed, 23 Jan 2019 04:28:08 +0000 (UTC) Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit Subject: svn commit: r1851877 [33/46] - in /zeppelin/site/docs: 0.8.1/ 0.8.1/assets/ 0.8.1/assets/themes/ 0.8.1/assets/themes/zeppelin/ 0.8.1/assets/themes/zeppelin/bootstrap/ 0.8.1/assets/themes/zeppelin/bootstrap/css/ 0.8.1/assets/themes/zeppelin/bootstrap/fo... Date: Wed, 23 Jan 2019 04:28:05 -0000 To: commits@zeppelin.apache.org From: zjffdu@apache.org X-Mailer: svnmailer-1.0.9 Message-Id: <20190123042808.E6ED73A2D1E@svn01-us-west.apache.org> Added: zeppelin/site/docs/0.8.1/sitemap.txt URL: http://svn.apache.org/viewvc/zeppelin/site/docs/0.8.1/sitemap.txt?rev=1851877&view=auto ============================================================================== --- zeppelin/site/docs/0.8.1/sitemap.txt (added) +++ zeppelin/site/docs/0.8.1/sitemap.txt Wed Jan 23 04:28:00 2019 @@ -0,0 +1,96 @@ + +http://zeppelin.apache.org/assets/themes/zeppelin/js/search.js +http://zeppelin.apache.org/atom.xml +http://zeppelin.apache.org/development/contribution/how_to_contribute_code.html +http://zeppelin.apache.org/development/contribution/how_to_contribute_website.html +http://zeppelin.apache.org/development/contribution/useful_developer_tools.html +http://zeppelin.apache.org/development/helium/overview.html +http://zeppelin.apache.org/development/helium/writing_application.html +http://zeppelin.apache.org/development/helium/writing_spell.html +http://zeppelin.apache.org/development/helium/writing_visualization_basic.html +http://zeppelin.apache.org/development/helium/writing_visualization_transformation.html +http://zeppelin.apache.org/development/writing_zeppelin_interpreter.html +http://zeppelin.apache.org/index.html +http://zeppelin.apache.org/interpreter/alluxio.html +http://zeppelin.apache.org/interpreter/beam.html +http://zeppelin.apache.org/interpreter/bigquery.html +http://zeppelin.apache.org/interpreter/cassandra.html +http://zeppelin.apache.org/interpreter/elasticsearch.html +http://zeppelin.apache.org/interpreter/flink.html +http://zeppelin.apache.org/interpreter/geode.html +http://zeppelin.apache.org/interpreter/groovy.html +http://zeppelin.apache.org/interpreter/hbase.html +http://zeppelin.apache.org/interpreter/hdfs.html +http://zeppelin.apache.org/interpreter/hive.html +http://zeppelin.apache.org/interpreter/ignite.html +http://zeppelin.apache.org/interpreter/jdbc.html +http://zeppelin.apache.org/interpreter/kylin.html +http://zeppelin.apache.org/interpreter/lens.html +http://zeppelin.apache.org/interpreter/livy.html +http://zeppelin.apache.org/interpreter/mahout.html +http://zeppelin.apache.org/interpreter/markdown.html +http://zeppelin.apache.org/interpreter/neo4j.html +http://zeppelin.apache.org/interpreter/pig.html +http://zeppelin.apache.org/interpreter/postgresql.html +http://zeppelin.apache.org/interpreter/python.html +http://zeppelin.apache.org/interpreter/r.html +http://zeppelin.apache.org/interpreter/sap.html +http://zeppelin.apache.org/interpreter/scalding.html +http://zeppelin.apache.org/interpreter/scio.html +http://zeppelin.apache.org/interpreter/shell.html +http://zeppelin.apache.org/interpreter/spark.html +http://zeppelin.apache.org/pleasecontribute.html +http://zeppelin.apache.org/quickstart/explore_ui.html +http://zeppelin.apache.org/quickstart/install.html +http://zeppelin.apache.org/quickstart/python_with_zeppelin.html +http://zeppelin.apache.org/quickstart/spark_with_zeppelin.html +http://zeppelin.apache.org/quickstart/sql_with_zeppelin.html +http://zeppelin.apache.org/quickstart/tutorial.html +http://zeppelin.apache.org/rss.xml +http://zeppelin.apache.org/screenshots.html +http://zeppelin.apache.org/search.html +http://zeppelin.apache.org/search_data.json +http://zeppelin.apache.org/setup/basics/how_to_build.html +http://zeppelin.apache.org/setup/basics/multi_user_support.html +http://zeppelin.apache.org/setup/deployment/cdh.html +http://zeppelin.apache.org/setup/deployment/docker.html +http://zeppelin.apache.org/setup/deployment/flink_and_spark_cluster.html +http://zeppelin.apache.org/setup/deployment/spark_cluster_mode.html +http://zeppelin.apache.org/setup/deployment/virtual_machine.html +http://zeppelin.apache.org/setup/deployment/yarn_install.html +http://zeppelin.apache.org/setup/operation/configuration.html +http://zeppelin.apache.org/setup/operation/proxy_setting.html +http://zeppelin.apache.org/setup/operation/trouble_shooting.html +http://zeppelin.apache.org/setup/operation/upgrading.html +http://zeppelin.apache.org/setup/security/authentication_nginx.html +http://zeppelin.apache.org/setup/security/datasource_authorization.html +http://zeppelin.apache.org/setup/security/http_security_headers.html +http://zeppelin.apache.org/setup/security/notebook_authorization.html +http://zeppelin.apache.org/setup/security/shiro_authentication.html +http://zeppelin.apache.org/setup/storage/storage.html +http://zeppelin.apache.org/sitemap.txt +http://zeppelin.apache.org/usage/display_system/angular_backend.html +http://zeppelin.apache.org/usage/display_system/angular_frontend.html +http://zeppelin.apache.org/usage/display_system/basic.html +http://zeppelin.apache.org/usage/dynamic_form/intro.html +http://zeppelin.apache.org/usage/interpreter/dependency_management.html +http://zeppelin.apache.org/usage/interpreter/dynamic_loading.html +http://zeppelin.apache.org/usage/interpreter/execution_hooks.html +http://zeppelin.apache.org/usage/interpreter/installation.html +http://zeppelin.apache.org/usage/interpreter/interpreter_binding_mode.html +http://zeppelin.apache.org/usage/interpreter/overview.html +http://zeppelin.apache.org/usage/interpreter/user_impersonation.html +http://zeppelin.apache.org/usage/other_features/cron_scheduler.html +http://zeppelin.apache.org/usage/other_features/customizing_homepage.html +http://zeppelin.apache.org/usage/other_features/notebook_actions.html +http://zeppelin.apache.org/usage/other_features/personalized_mode.html +http://zeppelin.apache.org/usage/other_features/publishing_paragraphs.html +http://zeppelin.apache.org/usage/other_features/zeppelin_context.html +http://zeppelin.apache.org/usage/rest_api/configuration.html +http://zeppelin.apache.org/usage/rest_api/credential.html +http://zeppelin.apache.org/usage/rest_api/helium.html +http://zeppelin.apache.org/usage/rest_api/interpreter.html +http://zeppelin.apache.org/usage/rest_api/notebook.html +http://zeppelin.apache.org/usage/rest_api/notebook_repository.html +http://zeppelin.apache.org/usage/rest_api/zeppelin_server.html + Added: zeppelin/site/docs/0.8.1/usage/display_system/angular_backend.html URL: http://svn.apache.org/viewvc/zeppelin/site/docs/0.8.1/usage/display_system/angular_backend.html?rev=1851877&view=auto ============================================================================== --- zeppelin/site/docs/0.8.1/usage/display_system/angular_backend.html (added) +++ zeppelin/site/docs/0.8.1/usage/display_system/angular_backend.html Wed Jan 23 04:28:00 2019 @@ -0,0 +1,456 @@ + + + + + + Apache Zeppelin 0.8.0 Documentation: Backend Angular API in Apache Zeppelin + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+
+ + +

Backend Angular API in Apache Zeppelin

+ +
+ +

Overview

+ +

Angular display system treats output as a view template for AngularJS. +It compiles templates and displays them inside of Apache Zeppelin. Zeppelin provides a gateway between your interpreter and your compiled AngularJS view templates. +Therefore, you can not only update scope variables from your interpreter but also watch them in the interpreter, which is JVM process.

+ +

Basic Usage

+ +

Print AngularJS view

+ +

To use angular display system, you should start with %angular. +

+ +

Since name is not defined, Hello will display Hello.

+ +
+

Please Note: Display system is backend independent.

+
+ +


+ +

Bind / Unbind Variables

+ +

Through ZeppelinContext, you can bind / unbind variables 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.angularUnbind(String name)
+
+// unbind angular scope variable 'name' in all notebooks related to current interpreter.
+z.angularUnbindGlobal(String name)
+
+

Using the above example, let's bind world variable to name. Then you can see AngularJs view is immediately updated.

+ +

+ +


+ +

Watch / Unwatch Variables

+ +

Through ZeppelinContext, you can watch / unwatch variables 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 a button. When it is clicked, the value of run will be increased 1 by 1.

+ +

+ +

z.angularBind("run", 0) will initialize run to zero. And then, it will be also applied to run in z.angularWatch(). +When the button is clicked, you'll see both run and numWatched are incremented by 1.

+ +

+ +

Let's make it Simpler and more Intuitive

+ +

In this section, we will introduce a simpler and more intuitive way of using Angular Display System in Zeppelin.

+ +

Here are some usages.

+ +

Import

+
// In notebook scope
+import org.apache.zeppelin.display.angular.notebookscope._
+import AngularElem._
+
+// In paragraph scope
+import org.apache.zeppelin.display.angular.paragraphscope._
+import AngularElem._
+
+

Display Element

+
// automatically convert to string and print with %angular display system directive in front.
+<div></div>.display
+
+

Event Handler

+
// on click
+<div></div>.onClick(() => {
+   my callback routine
+}).display
+
+// on change
+<div></div>.onChange(() => {
+  my callback routine
+}).display
+
+// arbitrary event
+<div></div>.onEvent("ng-click", () => {
+  my callback routine
+}).display
+
+

Bind Model

+
// bind model
+<div></div>.model("myModel").display
+
+// bind model with initial value
+<div></div>.model("myModel", initialValue).display
+
+

Interact with Model

+
// read model
+AngularModel("myModel")()
+
+// update model
+AngularModel("myModel", "newValue")
+
+


+ +

Example: Basic Usage

+ +

Using the above basic usages, you can apply them like below examples.

+ +

Display Elements

+
<div style="color:blue">
+  <h4>Hello Angular Display System</h4>
+</div>.display
+
+

OnClick Event

+
<div class="btn btn-success">
+  Click me
+</div>.onClick{() =>
+  // callback for button click
+}.display
+
+

Bind Model

+
  <div>{{{{myModel}}}}</div>.model("myModel", "Initial Value").display
+
+

Interact With Model

+
// read the value
+AngularModel("myModel")()
+
+// update the value
+AngularModel("myModel", "New value")
+
+

+ +

Example: String Converter

+ +

Using below example, you can convert the lowercase string to uppercase.

+
// clear previously created angular object.
+AngularElem.disassociate
+
+val button = <div class="btn btn-success btn-sm">Convert</div>.onClick{() =>
+  val inputString = AngularModel("input")().toString
+  AngularModel("title", inputString.toUpperCase)
+}
+
+<div>
+  { <h4> {{{{title}}}}</h4>.model("title", "Please type text to convert uppercase") }
+   Your text { <input type="text"></input>.model("input", "") }
+  {button}
+</div>.display
+
+

+ +
+
+ + +
+
+ +
+
+ + + + + + + + + + + Added: zeppelin/site/docs/0.8.1/usage/display_system/angular_frontend.html URL: http://svn.apache.org/viewvc/zeppelin/site/docs/0.8.1/usage/display_system/angular_frontend.html?rev=1851877&view=auto ============================================================================== --- zeppelin/site/docs/0.8.1/usage/display_system/angular_frontend.html (added) +++ zeppelin/site/docs/0.8.1/usage/display_system/angular_frontend.html Wed Jan 23 04:28:00 2019 @@ -0,0 +1,419 @@ + + + + + + Apache Zeppelin 0.8.0 Documentation: Frontend Angular API in Apache Zeppelin + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+
+ + +

Frontend Angular API in Apache Zeppelin

+ +
+ +

Basic Usage

+ +

In addition to the backend Angular API to handle Angular objects binding, Apache Zeppelin also exposes a simple AngularJS z object on the front-end side to expose the same capabilities. +This z object is accessible in the Angular isolated scope for each paragraph.

+ +

Bind / Unbind Variables

+ +

Through the z, you can bind / unbind variables to AngularJS view. +Bind a value to an angular object and a mandatory target paragraph:

+
%angular
+
+<form class="form-inline">
+  <div class="form-group">
+    <label for="superheroId">Super Hero: </label>
+    <input type="text" class="form-control" id="superheroId" placeholder="Superhero name ..." ng-model="superhero"></input>
+  </div>
+  <button type="submit" class="btn btn-primary" ng-click="z.angularBind('superhero',superhero,'20160222-232336_1472609686')"> Bind</button>
+</form>
+
+

+ +
+ +

Unbind/remove a value from angular object and a mandatory target paragraph:

+
%angular
+
+<form class="form-inline">
+  <button type="submit" class="btn btn-primary" ng-click="z.angularUnbind('superhero','20160222-232336_1472609686')"> UnBind</button>
+</form>
+
+

+ +

The signature for the z.angularBind() / z.angularUnbind() functions are:

+
// Bind
+z.angularBind(angularObjectName, angularObjectValue, paragraphId);
+
+// Unbind
+z.angularUnbind(angularObjectName, angularObjectValue, paragraphId);
+
+

All the parameters are mandatory.

+ +


+ +

Run Paragraph

+ +

You can also trigger paragraph execution by calling z.runParagraph() function passing the appropriate paragraphId:

+
%angular
+
+<form class="form-inline">
+  <div class="form-group">
+    <label for="paragraphId">Paragraph Id: </label>
+    <input type="text" class="form-control" id="paragraphId" placeholder="Paragraph Id ..." ng-model="paragraph"></input>
+  </div>
+  <button type="submit" class="btn btn-primary" ng-click="z.runParagraph(paragraph)"> Run Paragraph</button>
+</form>
+
+

+ +


+ +

Overriding dynamic form with Angular Object

+ +

The front-end Angular Interaction API has been designed to offer richer form capabilities and variable binding. With the existing Dynamic Form system you can already create input text, select and checkbox forms but the choice is rather limited and the look & feel cannot be changed.

+ +

The idea is to create a custom form using plain HTML/AngularJS code and bind actions on this form to push/remove Angular variables to targeted paragraphs using this new API.

+ +

Consequently if you use the Dynamic Form syntax in a paragraph and there is a bound Angular object having the same name as the ${formName}, the Angular object will have higher priority and the Dynamic Form will not be displayed. Example:

+ +

+ +


+ +

Feature matrix comparison

+ +

How does the front-end AngularJS API compares to the backend Angular API? Below is a comparison matrix for both APIs:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ActionsFront-end APIBack-end API
Initiate bindingz.angularbind(var, initialValue, paragraphId)z.angularBind(var, initialValue)
Update valuesame to ordinary angularjs scope variable, or z.angularbind(var, newValue, paragraphId)z.angularBind(var, newValue)
Watching valuesame to ordinary angularjs scope variablez.angularWatch(var, (oldVal, newVal) => ...)
Destroy bindingz.angularUnbind(var, paragraphId)z.angularUnbind(var)
Executing Paragraphz.runParagraph(paragraphId)z.run(paragraphId)
Executing Paragraph (Specific paragraphs in other notes) (z.run(noteid, paragraphId)
Executing notez.runNote(noteId)
+ +

Both APIs are pretty similar, except for value watching where it is done naturally by AngularJS internals on the front-end and by user custom watcher functions in the back-end.

+ +

There is also a slight difference in term of scope. Front-end API limits the Angular object binding to a paragraph scope whereas back-end API allows you to bind an Angular object at the global or note scope. This restriction has been designed purposely to avoid Angular object leaks and scope pollution.

+ +
+
+ + +
+
+ +
+
+ + + + + + + + + + +