Utilities for Angular Display system

[Leemoonsoo]

What is this PR for?

Angular display system provides way to Interpreter interact with front-end.

However, the api was pretty much low level and not very much intuitive, it was difficult to make readable code. This PR provides simple intuitive API for using angular display system by leveraging scala.xml. Following is usage

Import

// notebook scope
import org.apache.zeppelin.display.angular.notebookscope._
import AngularElem._

or

// 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")

What type of PR is it?

Feature

Todos

Is there a relevant Jira issue?

How should this be tested?

See usage and screenshot

Screenshots (if appropriate)

Example of basic usage

Example of string converter

Questions:

• Does the licenses files need update? no
• Is there breaking changes for older versions? no
• Does this needs documentation? documentation will follow

[Leemoonsoo]

Please review this PR

[felixcheung]

shouldn't this be from the parent pom?

[Leemoonsoo]

Zeppelin submodule can have different scala.version dependency, especially for interpreter. While one interpreter uses scala 2.10, the other uses scala 2.11. So i think it's better not having scala.version in root pom file.

[felixcheung]

Sure, it makes sense. Wouldn't the display module running in the Spark interpreter process and would need to match scala build to work?

[Leemoonsoo]

Right, If there're interpreter that uses scala 2.11 for example, then display module may add support for scala 2.11.

[felixcheung]

looks good, could you follow up with updating the doc http://zeppelin.incubator.apache.org/docs/0.6.0-incubating-SNAPSHOT/displaysystem/angular.html or similar?

[doanduyhai]

@Leemoonsoo Can you provide a screen capture/code sample to show how we can use those utilities function to update an Angular object server-side from the front-end ?

My intention is to have a paragraph with %angular interpreter that "pushes" a value to the angular object repository server-side and to be re-used by another interpreter in another paragraph. Example:

-------- paragraph1 --------
%angular

//Some manual Bootstrap form
Login : <input onClick="pushToBackEnd('login')">....</input> ...

-------- paragraph2 --------
%cassandra

SELECT * FROM users WHERE login={{login}};

The pushToBackEnd() method will be responsible for that feature.

Can this PR meet the feature above ?

[Leemoonsoo]

@doanduyhai The examples in this PR's description can be run on %spark interpreter.
Currently, push new angular object from front-end is not possible. I think that's useful feature to have and can be handled in the different PR, while this PR trying to provide some convenient utility function for existing angular object.

[doanduyhai]

Thanks for the clarifications @Leemoonsoo. I'll try to push a small PR for the front-end angular value push

[Leemoonsoo]

I've made small change after #588 merged.
Now it provides two packages org.apache.zeppelin.display.angular.notebookscope and org.apache.zeppelin.display.angular.paragraphscope. One work in notebook scope and the other work in paragraph scope.

Usage now slightly changed, when import these utilities.

When you want to work in notebook scope

import org.apache.zeppelin.display.angular.notebookscope._
import AngularElem._

When you want to work in paragraph scope

import org.apache.zeppelin.display.angular.paragraphscope._
import AngularElem._

[corneadoug]

#650 needs to be updated too then

[AhyoungRyu]

#650 is updated.

[Leemoonsoo]

Merge #591 and #650 if there're no more discussions.