You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@zeppelin.apache.org by moon soo Lee <mo...@apache.org> on 2015/03/22 12:57:07 UTC
[DISCUSS] Ability to create rich gui inside of Notebook
Hi,
Zeppelin currently has feature that creates form dynamically. (
http://zeppelin.incubator.apache.org/docs/dynamicform.html)
It's only supporting simple input text and dropdown list.
Recently Damien and Me discussed about ability to create rich GUI, and i'm
bringing the discussion to the online.
Basic idea is adding '%angular' to display system
<http://zeppelin.incubator.apache.org/docs/display.html>.
Like currently supported '%html' that prints output as html code,
'%angular' displays output as angular view. For example,
println("""%angular Your name is {{ z.name }}. <a
ng-click="z.onClickOkay()">ok</a>""")
will compiled and rendered as angular view code. For variable (z.name) and
function (z.onClickOkay()), we can develop some kind of Js(angular
controller) - JVM gateway so user will able to bind Object or Function into
the angular scope, like
val name = "Zeppelin"
z.angularBind("name", name)
def onClickOkay() = {
...}
z.angularBind("onClickOkay", onClickOkay)
In this way, user can implement their own customized visualizations and
user interface without (almost) any limitation.
What do you think?
I'd appreciate any feedback!
Best,
moon
Re: [DISCUSS] Ability to create rich gui inside of Notebook
Posted by madhuka udantha <ma...@gmail.com>.
Hi,
This particular topic and the discussion are interesting to me and it also
has a huge impact on my task[1].
Nice Idea!!!
Since my task involve introducing a chart library to Zeppelin. Charting
library also can be included here. Implementation of charting library can
be compatible to the new rich UI concept as a pluggable or extension.
[1] email subjected: [GSoC 2015][COMDEV-119] Zeppelin GSoC Project: add
more D3 visualization
On Mon, Mar 23, 2015 at 9:22 AM, Corneau Damien <co...@gmail.com>
wrote:
> Right,
> Technically the only thing the user can break would be it's own web browser
> rendering, and it wouldn't affect the other users of the Zeppelin Instance.
> (Also since it's web browser, you can break anything you want using the Dev
> Tool :p)
> However if you can package and distribute your template, or have other user
> on your instance that will use your code, it would be best to try to
> sandbox as much as possible.
>
> Possible good material for cross app communication:
>
> http://stackoverflow.com/questions/15143984/communication-between-two-modules-in-angularjs
> http://embed.plnkr.co/vaieOO
>
> http://stackoverflow.com/questions/17043804/communication-between-modules-in-angularjs
>
> On Mon, Mar 23, 2015 at 11:43 AM, moon soo Lee <le...@gmail.com>
> wrote:
>
> > I think if there're some sort of sandbox technique we can use for html,
> > it'll be really helpful on view side. As far as i know, the only safe
> > sandbox in html is using iframe and it's not seamless and difficult to
> use.
> > So for now, i think causing problem on view side (like overriding css) is
> > up to user.
> >
> > On Sun, Mar 22, 2015 at 11:31 PM Corneau Damien <co...@apache.org>
> > wrote:
> >
> > > I didn't see the original email... :'(
> > >
> > > There should not be any problem with user affecting the current
> notebook
> > > UI, at least on the scope level.
> > > Since we could create a particular scope variable in the app to take
> care
> > > of this kind of values.
> > >
> > > For things like event ($broadcast) and controllers, it could be a bit
> > more
> > > complicated, and we might need to run it as a separate angular app.
> > > That's something we will have to investigate more.
> > >
> > > It would be nice to take it slow, and maybe start with only scope
> > variable
> > > first.
> > >
> > > In some way we could have a similar result with %HTML, but it could
> bring
> > > some nice features:
> > > - Create angular template that could be use to extend Zeppelin UI
> > > - Allowing people to import javascript library (including graph
> library)
> > > - Being able to have angular binding between the result of a query in
> a
> > > paragraph and an angular template in a different paragraph
> > >
> > > One limitation if we decide to go for full angular code, would be that
> > > cross-notebook relations would not work.
> > >
> > >
> > >
> > > On Sun, Mar 22, 2015 at 11:06 PM, RJ Nowling <rn...@gmail.com>
> wrote:
> > >
> > > > This sounds very useful. Would there be issues where users could
> easily
> > > > cause problems with the notebook's own UI?
> > > >
> > > >
> > > > > On Mar 22, 2015, at 7:57 AM, moon soo Lee <mo...@apache.org> wrote:
> > > > >
> > > > > Hi,
> > > > >
> > > > > Zeppelin currently has feature that creates form dynamically. (
> > > > > http://zeppelin.incubator.apache.org/docs/dynamicform.html)
> > > > > It's only supporting simple input text and dropdown list.
> > > > >
> > > > > Recently Damien and Me discussed about ability to create rich GUI,
> > and
> > > > i'm
> > > > > bringing the discussion to the online.
> > > > >
> > > > > Basic idea is adding '%angular' to display system
> > > > > <http://zeppelin.incubator.apache.org/docs/display.html>.
> > > > > Like currently supported '%html' that prints output as html code,
> > > > > '%angular' displays output as angular view. For example,
> > > > >
> > > > > println("""%angular Your name is {{ z.name }}. <a
> > > > > ng-click="z.onClickOkay()">ok</a>""")
> > > > >
> > > > > will compiled and rendered as angular view code. For variable (
> > z.name)
> > > > and
> > > > > function (z.onClickOkay()), we can develop some kind of Js(angular
> > > > > controller) - JVM gateway so user will able to bind Object or
> > Function
> > > > into
> > > > > the angular scope, like
> > > > >
> > > > > val name = "Zeppelin"
> > > > > z.angularBind("name", name)
> > > > >
> > > > > def onClickOkay() = {
> > > > > ...}
> > > > > z.angularBind("onClickOkay", onClickOkay)
> > > > >
> > > > >
> > > > > In this way, user can implement their own customized visualizations
> > and
> > > > > user interface without (almost) any limitation.
> > > > >
> > > > > What do you think?
> > > > > I'd appreciate any feedback!
> > > > >
> > > > > Best,
> > > > > moon
> > > >
> > >
> >
>
--
Cheers,
Madhuka Udantha
http://madhukaudantha.blogspot.com
Re: [DISCUSS] Ability to create rich gui inside of Notebook
Posted by Corneau Damien <co...@gmail.com>.
Right,
Technically the only thing the user can break would be it's own web browser
rendering, and it wouldn't affect the other users of the Zeppelin Instance.
(Also since it's web browser, you can break anything you want using the Dev
Tool :p)
However if you can package and distribute your template, or have other user
on your instance that will use your code, it would be best to try to
sandbox as much as possible.
Possible good material for cross app communication:
http://stackoverflow.com/questions/15143984/communication-between-two-modules-in-angularjs
http://embed.plnkr.co/vaieOO
http://stackoverflow.com/questions/17043804/communication-between-modules-in-angularjs
On Mon, Mar 23, 2015 at 11:43 AM, moon soo Lee <le...@gmail.com> wrote:
> I think if there're some sort of sandbox technique we can use for html,
> it'll be really helpful on view side. As far as i know, the only safe
> sandbox in html is using iframe and it's not seamless and difficult to use.
> So for now, i think causing problem on view side (like overriding css) is
> up to user.
>
> On Sun, Mar 22, 2015 at 11:31 PM Corneau Damien <co...@apache.org>
> wrote:
>
> > I didn't see the original email... :'(
> >
> > There should not be any problem with user affecting the current notebook
> > UI, at least on the scope level.
> > Since we could create a particular scope variable in the app to take care
> > of this kind of values.
> >
> > For things like event ($broadcast) and controllers, it could be a bit
> more
> > complicated, and we might need to run it as a separate angular app.
> > That's something we will have to investigate more.
> >
> > It would be nice to take it slow, and maybe start with only scope
> variable
> > first.
> >
> > In some way we could have a similar result with %HTML, but it could bring
> > some nice features:
> > - Create angular template that could be use to extend Zeppelin UI
> > - Allowing people to import javascript library (including graph library)
> > - Being able to have angular binding between the result of a query in a
> > paragraph and an angular template in a different paragraph
> >
> > One limitation if we decide to go for full angular code, would be that
> > cross-notebook relations would not work.
> >
> >
> >
> > On Sun, Mar 22, 2015 at 11:06 PM, RJ Nowling <rn...@gmail.com> wrote:
> >
> > > This sounds very useful. Would there be issues where users could easily
> > > cause problems with the notebook's own UI?
> > >
> > >
> > > > On Mar 22, 2015, at 7:57 AM, moon soo Lee <mo...@apache.org> wrote:
> > > >
> > > > Hi,
> > > >
> > > > Zeppelin currently has feature that creates form dynamically. (
> > > > http://zeppelin.incubator.apache.org/docs/dynamicform.html)
> > > > It's only supporting simple input text and dropdown list.
> > > >
> > > > Recently Damien and Me discussed about ability to create rich GUI,
> and
> > > i'm
> > > > bringing the discussion to the online.
> > > >
> > > > Basic idea is adding '%angular' to display system
> > > > <http://zeppelin.incubator.apache.org/docs/display.html>.
> > > > Like currently supported '%html' that prints output as html code,
> > > > '%angular' displays output as angular view. For example,
> > > >
> > > > println("""%angular Your name is {{ z.name }}. <a
> > > > ng-click="z.onClickOkay()">ok</a>""")
> > > >
> > > > will compiled and rendered as angular view code. For variable (
> z.name)
> > > and
> > > > function (z.onClickOkay()), we can develop some kind of Js(angular
> > > > controller) - JVM gateway so user will able to bind Object or
> Function
> > > into
> > > > the angular scope, like
> > > >
> > > > val name = "Zeppelin"
> > > > z.angularBind("name", name)
> > > >
> > > > def onClickOkay() = {
> > > > ...}
> > > > z.angularBind("onClickOkay", onClickOkay)
> > > >
> > > >
> > > > In this way, user can implement their own customized visualizations
> and
> > > > user interface without (almost) any limitation.
> > > >
> > > > What do you think?
> > > > I'd appreciate any feedback!
> > > >
> > > > Best,
> > > > moon
> > >
> >
>
Re: [DISCUSS] Ability to create rich gui inside of Notebook
Posted by moon soo Lee <le...@gmail.com>.
I think if there're some sort of sandbox technique we can use for html,
it'll be really helpful on view side. As far as i know, the only safe
sandbox in html is using iframe and it's not seamless and difficult to use.
So for now, i think causing problem on view side (like overriding css) is
up to user.
On Sun, Mar 22, 2015 at 11:31 PM Corneau Damien <co...@apache.org>
wrote:
> I didn't see the original email... :'(
>
> There should not be any problem with user affecting the current notebook
> UI, at least on the scope level.
> Since we could create a particular scope variable in the app to take care
> of this kind of values.
>
> For things like event ($broadcast) and controllers, it could be a bit more
> complicated, and we might need to run it as a separate angular app.
> That's something we will have to investigate more.
>
> It would be nice to take it slow, and maybe start with only scope variable
> first.
>
> In some way we could have a similar result with %HTML, but it could bring
> some nice features:
> - Create angular template that could be use to extend Zeppelin UI
> - Allowing people to import javascript library (including graph library)
> - Being able to have angular binding between the result of a query in a
> paragraph and an angular template in a different paragraph
>
> One limitation if we decide to go for full angular code, would be that
> cross-notebook relations would not work.
>
>
>
> On Sun, Mar 22, 2015 at 11:06 PM, RJ Nowling <rn...@gmail.com> wrote:
>
> > This sounds very useful. Would there be issues where users could easily
> > cause problems with the notebook's own UI?
> >
> >
> > > On Mar 22, 2015, at 7:57 AM, moon soo Lee <mo...@apache.org> wrote:
> > >
> > > Hi,
> > >
> > > Zeppelin currently has feature that creates form dynamically. (
> > > http://zeppelin.incubator.apache.org/docs/dynamicform.html)
> > > It's only supporting simple input text and dropdown list.
> > >
> > > Recently Damien and Me discussed about ability to create rich GUI, and
> > i'm
> > > bringing the discussion to the online.
> > >
> > > Basic idea is adding '%angular' to display system
> > > <http://zeppelin.incubator.apache.org/docs/display.html>.
> > > Like currently supported '%html' that prints output as html code,
> > > '%angular' displays output as angular view. For example,
> > >
> > > println("""%angular Your name is {{ z.name }}. <a
> > > ng-click="z.onClickOkay()">ok</a>""")
> > >
> > > will compiled and rendered as angular view code. For variable (z.name)
> > and
> > > function (z.onClickOkay()), we can develop some kind of Js(angular
> > > controller) - JVM gateway so user will able to bind Object or Function
> > into
> > > the angular scope, like
> > >
> > > val name = "Zeppelin"
> > > z.angularBind("name", name)
> > >
> > > def onClickOkay() = {
> > > ...}
> > > z.angularBind("onClickOkay", onClickOkay)
> > >
> > >
> > > In this way, user can implement their own customized visualizations and
> > > user interface without (almost) any limitation.
> > >
> > > What do you think?
> > > I'd appreciate any feedback!
> > >
> > > Best,
> > > moon
> >
>
Re: [DISCUSS] Ability to create rich gui inside of Notebook
Posted by Corneau Damien <co...@apache.org>.
I didn't see the original email... :'(
There should not be any problem with user affecting the current notebook
UI, at least on the scope level.
Since we could create a particular scope variable in the app to take care
of this kind of values.
For things like event ($broadcast) and controllers, it could be a bit more
complicated, and we might need to run it as a separate angular app.
That's something we will have to investigate more.
It would be nice to take it slow, and maybe start with only scope variable
first.
In some way we could have a similar result with %HTML, but it could bring
some nice features:
- Create angular template that could be use to extend Zeppelin UI
- Allowing people to import javascript library (including graph library)
- Being able to have angular binding between the result of a query in a
paragraph and an angular template in a different paragraph
One limitation if we decide to go for full angular code, would be that
cross-notebook relations would not work.
On Sun, Mar 22, 2015 at 11:06 PM, RJ Nowling <rn...@gmail.com> wrote:
> This sounds very useful. Would there be issues where users could easily
> cause problems with the notebook's own UI?
>
>
> > On Mar 22, 2015, at 7:57 AM, moon soo Lee <mo...@apache.org> wrote:
> >
> > Hi,
> >
> > Zeppelin currently has feature that creates form dynamically. (
> > http://zeppelin.incubator.apache.org/docs/dynamicform.html)
> > It's only supporting simple input text and dropdown list.
> >
> > Recently Damien and Me discussed about ability to create rich GUI, and
> i'm
> > bringing the discussion to the online.
> >
> > Basic idea is adding '%angular' to display system
> > <http://zeppelin.incubator.apache.org/docs/display.html>.
> > Like currently supported '%html' that prints output as html code,
> > '%angular' displays output as angular view. For example,
> >
> > println("""%angular Your name is {{ z.name }}. <a
> > ng-click="z.onClickOkay()">ok</a>""")
> >
> > will compiled and rendered as angular view code. For variable (z.name)
> and
> > function (z.onClickOkay()), we can develop some kind of Js(angular
> > controller) - JVM gateway so user will able to bind Object or Function
> into
> > the angular scope, like
> >
> > val name = "Zeppelin"
> > z.angularBind("name", name)
> >
> > def onClickOkay() = {
> > ...}
> > z.angularBind("onClickOkay", onClickOkay)
> >
> >
> > In this way, user can implement their own customized visualizations and
> > user interface without (almost) any limitation.
> >
> > What do you think?
> > I'd appreciate any feedback!
> >
> > Best,
> > moon
>
Re: [DISCUSS] Ability to create rich gui inside of Notebook
Posted by RJ Nowling <rn...@gmail.com>.
This sounds very useful. Would there be issues where users could easily cause problems with the notebook's own UI?
> On Mar 22, 2015, at 7:57 AM, moon soo Lee <mo...@apache.org> wrote:
>
> Hi,
>
> Zeppelin currently has feature that creates form dynamically. (
> http://zeppelin.incubator.apache.org/docs/dynamicform.html)
> It's only supporting simple input text and dropdown list.
>
> Recently Damien and Me discussed about ability to create rich GUI, and i'm
> bringing the discussion to the online.
>
> Basic idea is adding '%angular' to display system
> <http://zeppelin.incubator.apache.org/docs/display.html>.
> Like currently supported '%html' that prints output as html code,
> '%angular' displays output as angular view. For example,
>
> println("""%angular Your name is {{ z.name }}. <a
> ng-click="z.onClickOkay()">ok</a>""")
>
> will compiled and rendered as angular view code. For variable (z.name) and
> function (z.onClickOkay()), we can develop some kind of Js(angular
> controller) - JVM gateway so user will able to bind Object or Function into
> the angular scope, like
>
> val name = "Zeppelin"
> z.angularBind("name", name)
>
> def onClickOkay() = {
> ...}
> z.angularBind("onClickOkay", onClickOkay)
>
>
> In this way, user can implement their own customized visualizations and
> user interface without (almost) any limitation.
>
> What do you think?
> I'd appreciate any feedback!
>
> Best,
> moon