custom models: how to get them to render?

I am getting my feet with with some boken custom models in javascript.
Just for something simple to start with, I have created several
classes which inherit from LayoutDOM.

The toplevel component , ComparativeMap, displays itself (perhaps
because it is wrapped in a layout?) but the others do not. Here is
from main.py

vis = ComparativeMap(
    maps=map_renderers
)
layout = HBox(vis)
show(layout)

The properties are defined in python as:

    map_renderers = List(Instance(MapRenderer))

And in javascript as:

ComparativeMap.define({
   map_renderers : [p.Array, ]
});

The ComparativeMap model's properties are getting serialized and
loaded the browser, as I can see all the right stuff if I inspect in
browser, like:

properties->map_renderers->spec->value->array[2]

However, the MapRenderer components do not display (their view's
render() method is never called and neither is the view's constructor
actually). So it seems the views are not getting created at all.

I must be missing something fundamental about the design of bokeh api
here. I have been studying the bokeh core layouts and models, but
having trouble understanding where I went wrong. Thanks for any
advice!

Alex

Without complete code, it's hard to say anything for certain. My first guess is that you need to set default_view class attribute on your model to say what view should be created. See, e.g

  https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/models/layouts/column.coffee#L8

Also I can't tell from this information, but your JS model also needs to extend LayoutDOM on the JS side as well, and your view needs to extend LayoutDOM.View. You can see a complete example that includes a custom LayoutDOM view here:

  http://bokeh.pydata.org/en/latest/docs/user_guide/extensions_gallery/wrapping.html#userguide-extensions-examples-wrapping

Thanks,

Bryan

···

On Dec 7, 2016, at 5:23 PM, Alex Rice <[email protected]> wrote:

I am getting my feet with with some boken custom models in javascript.
Just for something simple to start with, I have created several
classes which inherit from LayoutDOM.

The toplevel component , ComparativeMap, displays itself (perhaps
because it is wrapped in a layout?) but the others do not. Here is
from main.py

vis = ComparativeMap(
   maps=map_renderers
)
layout = HBox(vis)
show(layout)

The properties are defined in python as:

   map_renderers = List(Instance(MapRenderer))

And in javascript as:

ComparativeMap.define({
  map_renderers : [p.Array, ]
});

The ComparativeMap model's properties are getting serialized and
loaded the browser, as I can see all the right stuff if I inspect in
browser, like:

properties->map_renderers->spec->value->array[2]

However, the MapRenderer components do not display (their view's
render() method is never called and neither is the view's constructor
actually). So it seems the views are not getting created at all.

I must be missing something fundamental about the design of bokeh api
here. I have been studying the bokeh core layouts and models, but
having trouble understanding where I went wrong. Thanks for any
advice!

Alex

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CACmK6BvBmQ51QZHW1%3DQ8y9VdrsBpP8oLNusVh3pcqj%2B9OWQmFA%40mail.gmail.com.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Thanks Bryan, hmm yes I believe I am doing those things. I will study
that example and post a Gist if I cant get it working.

Btw not sure but I think
LayoutDOM.View has changed to LayoutDOMView (no dot) in the -dev channel.

···

On Wed, Dec 7, 2016 at 4:42 PM, Bryan Van de Ven <[email protected]> wrote:

Without complete code, it's hard to say anything for certain. My first guess is that you need to set default_view class attribute on your model to say what view should be created. See, e.g

        https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/models/layouts/column.coffee#L8

Also I can't tell from this information, but your JS model also needs to extend LayoutDOM on the JS side as well, and your view needs to extend LayoutDOM.View. You can see a complete example that includes a custom LayoutDOM view here:

        http://bokeh.pydata.org/en/latest/docs/user_guide/extensions_gallery/wrapping.html#userguide-extensions-examples-wrapping

Thanks,

Bryan

On Dec 7, 2016, at 5:23 PM, Alex Rice <[email protected]> wrote:

I am getting my feet with with some boken custom models in javascript.
Just for something simple to start with, I have created several
classes which inherit from LayoutDOM.

The toplevel component , ComparativeMap, displays itself (perhaps
because it is wrapped in a layout?) but the others do not. Here is
from main.py

vis = ComparativeMap(
   maps=map_renderers
)
layout = HBox(vis)
show(layout)

The properties are defined in python as:

   map_renderers = List(Instance(MapRenderer))

And in javascript as:

ComparativeMap.define({
  map_renderers : [p.Array, ]
});

The ComparativeMap model's properties are getting serialized and
loaded the browser, as I can see all the right stuff if I inspect in
browser, like:

properties->map_renderers->spec->value->array[2]

However, the MapRenderer components do not display (their view's
render() method is never called and neither is the view's constructor
actually). So it seems the views are not getting created at all.

I must be missing something fundamental about the design of bokeh api
here. I have been studying the bokeh core layouts and models, but
having trouble understanding where I went wrong. Thanks for any
advice!

Alex

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CACmK6BvBmQ51QZHW1%3DQ8y9VdrsBpP8oLNusVh3pcqj%2B9OWQmFA%40mail.gmail.com.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/BBCAB3E0-D371-4598-A2D1-B44B7FC4B63A%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Alex,

You are correct about LayoutDOMView, as can be seen in the dev docs:

  http://bokeh.pydata.org/en/dev/docs/user_guide/extensions_gallery/wrapping.html#userguide-extensions-examples-wrapping

Thanks for reminding we will definitely include a migration note about that.

If you can't get things going definitely please post a gist. If I can actually try out code that dramatically raises the probability that I am able to help. :slight_smile:

Thanks,

Bryan

···

On Dec 7, 2016, at 5:42 PM, Bryan Van de Ven <[email protected]> wrote:

Without complete code, it's hard to say anything for certain. My first guess is that you need to set default_view class attribute on your model to say what view should be created. See, e.g

  https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/models/layouts/column.coffee#L8

Also I can't tell from this information, but your JS model also needs to extend LayoutDOM on the JS side as well, and your view needs to extend LayoutDOM.View. You can see a complete example that includes a custom LayoutDOM view here:

  http://bokeh.pydata.org/en/latest/docs/user_guide/extensions_gallery/wrapping.html#userguide-extensions-examples-wrapping

Thanks,

Bryan

On Dec 7, 2016, at 5:23 PM, Alex Rice <[email protected]> wrote:

I am getting my feet with with some boken custom models in javascript.
Just for something simple to start with, I have created several
classes which inherit from LayoutDOM.

The toplevel component , ComparativeMap, displays itself (perhaps
because it is wrapped in a layout?) but the others do not. Here is
from main.py

vis = ComparativeMap(
  maps=map_renderers
)
layout = HBox(vis)
show(layout)

The properties are defined in python as:

  map_renderers = List(Instance(MapRenderer))

And in javascript as:

ComparativeMap.define({
map_renderers : [p.Array, ]
});

The ComparativeMap model's properties are getting serialized and
loaded the browser, as I can see all the right stuff if I inspect in
browser, like:

properties->map_renderers->spec->value->array[2]

However, the MapRenderer components do not display (their view's
render() method is never called and neither is the view's constructor
actually). So it seems the views are not getting created at all.

I must be missing something fundamental about the design of bokeh api
here. I have been studying the bokeh core layouts and models, but
having trouble understanding where I went wrong. Thanks for any
advice!

Alex

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CACmK6BvBmQ51QZHW1%3DQ8y9VdrsBpP8oLNusVh3pcqj%2B9OWQmFA%40mail.gmail.com.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Hi Alex, Bryan,

I think you just need to include all your custom models in a layout for them to render. See the docs example, where a custom model has a slider attribute, and both the custom model and slider instances are put into a column layout.

However if not, I’m doing something similar, and potentially running into similar issues making an Audio Player. I have a custom model which inherits directly from Bokeh Model, since it isn’t a graphic itself, rather it composes a bunch of widgets.

What I’m doing to make it render (and actually play audio) is to add both the custom model, and a layout with all of its widgets to a document. The problem I’m having is that I can save the document, but not show the document; and without using documents I can’t figure out another way to get both the custom model and layout to render. I’m not sure I fully understand how the document system is supposed to work, or if I’m doing it right.

Thanks,

Adam

···

On Thursday, December 8, 2016 at 11:49:15 AM UTC-5, Bryan Van de ven wrote:

Alex,

You are correct about LayoutDOMView, as can be seen in the dev docs:

    [http://bokeh.pydata.org/en/dev/docs/user_guide/extensions_gallery/wrapping.html#userguide-extensions-examples-wrapping](http://bokeh.pydata.org/en/dev/docs/user_guide/extensions_gallery/wrapping.html#userguide-extensions-examples-wrapping)

Thanks for reminding we will definitely include a migration note about that.

If you can’t get things going definitely please post a gist. If I can actually try out code that dramatically raises the probability that I am able to help. :slight_smile:

Thanks,

Bryan

On Dec 7, 2016, at 5:42 PM, Bryan Van de Ven [email protected] wrote:

Without complete code, it’s hard to say anything for certain. My first guess is that you need to set default_view class attribute on your model to say what view should be created. See, e.g

    [https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/models/layouts/column.coffee#L8](https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/models/layouts/column.coffee#L8)

Also I can’t tell from this information, but your JS model also needs to extend LayoutDOM on the JS side as well, and your view needs to extend LayoutDOM.View. You can see a complete example that includes a custom LayoutDOM view here:

    [http://bokeh.pydata.org/en/latest/docs/user_guide/extensions_gallery/wrapping.html#userguide-extensions-examples-wrapping](http://bokeh.pydata.org/en/latest/docs/user_guide/extensions_gallery/wrapping.html#userguide-extensions-examples-wrapping)

Thanks,

Bryan

On Dec 7, 2016, at 5:23 PM, Alex Rice [email protected] wrote:

I am getting my feet with with some boken custom models in javascript.

Just for something simple to start with, I have created several

classes which inherit from LayoutDOM.

The toplevel component , ComparativeMap, displays itself (perhaps

because it is wrapped in a layout?) but the others do not. Here is

from main.py

vis = ComparativeMap(

maps=map_renderers

)

layout = HBox(vis)

show(layout)

The properties are defined in python as:

map_renderers = List(Instance(MapRenderer))

And in javascript as:

ComparativeMap.define({

map_renderers : [p.Array, ]

});

The ComparativeMap model’s properties are getting serialized and

loaded the browser, as I can see all the right stuff if I inspect in

browser, like:

properties->map_renderers->spec->value->array[2]

However, the MapRenderer components do not display (their view’s

render() method is never called and neither is the view’s constructor

actually). So it seems the views are not getting created at all.

I must be missing something fundamental about the design of bokeh api

here. I have been studying the bokeh core layouts and models, but

having trouble understanding where I went wrong. Thanks for any

advice!

Alex


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CACmK6BvBmQ51QZHW1%3DQ8y9VdrsBpP8oLNusVh3pcqj%2B9OWQmFA%40mail.gmail.com.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Hi Bryan et al:

I have posted a Gist showing some questions with custom models not
rendering. The files uploaded out of order, but main.py is the bohek
document:

What I expected to happen was for the 3 entities to display their own
text in their div. (In future they would draw using Canvas instead,
but want to get the basic workfow down and just figure out how to
instantiate custom models correctly)

For some background, we have a complex UML-type of diagram of a data
model we are wanting to translate into Bokeh custom models. We want
need to embed custom models within other custom models, to represent
the relationships in our data, and then do most of the layouting and
rendering on the client side.

What happens is only the topmost component, ComparativeMap, displays
in it's div. But it's composed elements, an array of MapRenderers,
they are not being instantiated correctly. The odd thing is, on line
18 of comparative_map.js, the console.log(this.model); prints a model
which does contain an array of MapRenderer objects, with the correct
.name property set (including a screenshot of the console.log output.
So they are getting serialized to the client, but no views getting
instantiated, because the console.log() in map_renderer.js do not
print, so I assume it's view is not being instantiated at all.

If putting these files into a github feature branch would be easier
than a Gist, just let me know.

I do not know BackboneJs, so it may be something simple I am
overlooking. Or just not understanding how Bokeh wires things up on
the browser side.

···

--
Alex Rice <[email protected]>
Software Engineer
National Center for Genome Resources (NCGR)
http://ncgr.org
+1 505-995-4457

On Thu, Dec 8, 2016 at 9:49 AM, Bryan Van de Ven <[email protected]> wrote:

Alex,

You are correct about LayoutDOMView, as can be seen in the dev docs:

        http://bokeh.pydata.org/en/dev/docs/user_guide/extensions_gallery/wrapping.html#userguide-extensions-examples-wrapping

Thanks for reminding we will definitely include a migration note about that.

If you can't get things going definitely please post a gist. If I can actually try out code that dramatically raises the probability that I am able to help. :slight_smile:

Thanks,

Bryan

On Dec 7, 2016, at 5:42 PM, Bryan Van de Ven <[email protected]> wrote:

Without complete code, it's hard to say anything for certain. My first guess is that you need to set default_view class attribute on your model to say what view should be created. See, e.g

      https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/models/layouts/column.coffee#L8

Also I can't tell from this information, but your JS model also needs to extend LayoutDOM on the JS side as well, and your view needs to extend LayoutDOM.View. You can see a complete example that includes a custom LayoutDOM view here:

      http://bokeh.pydata.org/en/latest/docs/user_guide/extensions_gallery/wrapping.html#userguide-extensions-examples-wrapping

Thanks,

Bryan

On Dec 7, 2016, at 5:23 PM, Alex Rice <[email protected]> wrote:

I am getting my feet with with some boken custom models in javascript.
Just for something simple to start with, I have created several
classes which inherit from LayoutDOM.

The toplevel component , ComparativeMap, displays itself (perhaps
because it is wrapped in a layout?) but the others do not. Here is
from main.py

vis = ComparativeMap(
  maps=map_renderers
)
layout = HBox(vis)
show(layout)

The properties are defined in python as:

  map_renderers = List(Instance(MapRenderer))

And in javascript as:

ComparativeMap.define({
map_renderers : [p.Array, ]
});

The ComparativeMap model's properties are getting serialized and
loaded the browser, as I can see all the right stuff if I inspect in
browser, like:

properties->map_renderers->spec->value->array[2]

However, the MapRenderer components do not display (their view's
render() method is never called and neither is the view's constructor
actually). So it seems the views are not getting created at all.

I must be missing something fundamental about the design of bokeh api
here. I have been studying the bokeh core layouts and models, but
having trouble understanding where I went wrong. Thanks for any
advice!

Alex

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CACmK6BvBmQ51QZHW1%3DQ8y9VdrsBpP8oLNusVh3pcqj%2B9OWQmFA%40mail.gmail.com.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/31D0CB83-FEEF-4476-87D7-5CE6D8A99FF0%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Hi,

···

On Mon, Dec 12, 2016 at 6:08 PM, Alex Rice [email protected] wrote:

Hi Bryan et al:

I have posted a Gist showing some questions with custom models not

rendering. The files uploaded out of order, but main.py is the bohek

document:

https://gist.github.com/guidorice/54f4c0e121d7f1bb195177d18e0e9bb9

What I expected to happen was for the 3 entities to display their own

text in their div. (In future they would draw using Canvas instead,

but want to get the basic workfow down and just figure out how to

instantiate custom models correctly)

For some background, we have a complex UML-type of diagram of a data

model we are wanting to translate into Bokeh custom models. We want

need to embed custom models within other custom models, to represent

the relationships in our data, and then do most of the layouting and

rendering on the client side.

What happens is only the topmost component, ComparativeMap, displays

in it’s div. But it’s composed elements, an array of MapRenderers,

they are not being instantiated correctly. The odd thing is, on line

18 of comparative_map.js, the console.log(this.model); prints a model

which does contain an array of MapRenderer objects, with the correct

.name property set (including a screenshot of the console.log output.

So they are getting serialized to the client, but no views getting

instantiated, because the console.log() in map_renderer.js do not

print, so I assume it’s view is not being instantiated at all.

If putting these files into a github feature branch would be easier

than a Gist, just let me know.

I do not know BackboneJs, so it may be something simple I am

overlooking. Or just not understanding how Bokeh wires things up on

the browser side.

if you want to maintain children in ComparativeMap, you have to inherit from Box (or other composite layoutables). LayoutDOM gives just the ability to be part of a layout, but not to lay any children out. If you need anything fancy or whatever that Box at al. doesn’t provide, then you can implement things from scratch, but that’s a hell lot of work.

Besides this, you shouldn’t use constructor, but initialize method. That’s a backbone’s thing. However, you shouldn’t also call render() in constructor/initialize. render() is called by the layout manager or else (there are different pipelines for laying out DOM and canvas). So, you can safely remove all those constructors (unless you want to know when models are initialized).

Mateusz

Alex Rice [email protected]

Software Engineer

National Center for Genome Resources (NCGR)

http://ncgr.org

+1 505-995-4457

On Thu, Dec 8, 2016 at 9:49 AM, Bryan Van de Ven [email protected] wrote:

Alex,

You are correct about LayoutDOMView, as can be seen in the dev docs:

    [http://bokeh.pydata.org/en/dev/docs/user_guide/extensions_gallery/wrapping.html#userguide-extensions-examples-wrapping](http://bokeh.pydata.org/en/dev/docs/user_guide/extensions_gallery/wrapping.html#userguide-extensions-examples-wrapping)

Thanks for reminding we will definitely include a migration note about that.

If you can’t get things going definitely please post a gist. If I can actually try out code that dramatically raises the probability that I am able to help. :slight_smile:

Thanks,

Bryan

On Dec 7, 2016, at 5:42 PM, Bryan Van de Ven [email protected] wrote:

Without complete code, it’s hard to say anything for certain. My first guess is that you need to set default_view class attribute on your model to say what view should be created. See, e.g

  [https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/models/layouts/column.coffee#L8](https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/models/layouts/column.coffee#L8)

Also I can’t tell from this information, but your JS model also needs to extend LayoutDOM on the JS side as well, and your view needs to extend LayoutDOM.View. You can see a complete example that includes a custom LayoutDOM view here:

  [http://bokeh.pydata.org/en/latest/docs/user_guide/extensions_gallery/wrapping.html#userguide-extensions-examples-wrapping](http://bokeh.pydata.org/en/latest/docs/user_guide/extensions_gallery/wrapping.html#userguide-extensions-examples-wrapping)

Thanks,

Bryan

On Dec 7, 2016, at 5:23 PM, Alex Rice [email protected] wrote:

I am getting my feet with with some boken custom models in javascript.

Just for something simple to start with, I have created several

classes which inherit from LayoutDOM.

The toplevel component , ComparativeMap, displays itself (perhaps

because it is wrapped in a layout?) but the others do not. Here is

from main.py

vis = ComparativeMap(

maps=map_renderers

)

layout = HBox(vis)

show(layout)

The properties are defined in python as:

map_renderers = List(Instance(MapRenderer))

And in javascript as:

ComparativeMap.define({

map_renderers : [p.Array, ]

});

The ComparativeMap model’s properties are getting serialized and

loaded the browser, as I can see all the right stuff if I inspect in

browser, like:

properties->map_renderers->spec->value->array[2]

However, the MapRenderer components do not display (their view’s

render() method is never called and neither is the view’s constructor

actually). So it seems the views are not getting created at all.

I must be missing something fundamental about the design of bokeh api

here. I have been studying the bokeh core layouts and models, but

having trouble understanding where I went wrong. Thanks for any

advice!

Alex

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CACmK6BvBmQ51QZHW1%3DQ8y9VdrsBpP8oLNusVh3pcqj%2B9OWQmFA%40mail.gmail.com.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/31D0CB83-FEEF-4476-87D7-5CE6D8A99FF0%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CACmK6Bsx3pwJnCFa-ck%2B-8_0ZJ93HSZHeG%2BDWUtGtwcrbPwf8w%40mail.gmail.com.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.