Bokeh core dom API IMG element

In bokeh 0.12.7 typescript support for templates in custom models was replaced with the coffeescript core dom API. Looking through the bokehjs/SRC/coffee/core/dom.ts file on github I do not see support for a IMG element. Previously, this was possible in the tsx format with img tags. Is there a way to do the same with this API? I have tried importing img from core/dom and using it like: img({id: "img_name", src: "app/static/image.gif"}) within a server application following some extrapation from the one example in the documentation for similar elements without success.

Hi,

This would probably not be hard to add an omg call to the dom API. I would suggest a GH issue to discuss. I can also ping the other dev who will be better suited to suggest any immediate workarounds more easily on GH.

Thanks,

Bryan

···

On Oct 4, 2017, at 09:40, [email protected] wrote:

In bokeh 0.12.7 typescript support for templates in custom models was replaced with the coffeescript core dom API. Looking through the bokehjs/SRC/coffee/core/dom.ts file on github I do not see support for a IMG element. Previously, this was possible in the tsx format with img tags. Is there a way to do the same with this API? I have tried importing img from core/dom and using it like: img({id: "img_name", src: "app/static/image.gif"}) within a server application following some extrapation from the one example in the documentation for similar elements without success.

--
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/fb5aa476-2156-45a6-a842-e701a3ca2b38%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Hi,

···

On Wed, Oct 4, 2017 at 4:40 PM, [email protected] wrote:

In bokeh 0.12.7 typescript support for templates in custom models was replaced with the coffeescript core dom API. Looking through the bokehjs/SRC/coffee/core/dom.ts file on github I do not see support for a IMG element. Previously, this was possible in the tsx format with img tags. Is there a way to do the same with this API? I have tried importing img from core/dom and using it like: img({id: “img_name”, src: “app/static/image.gif”}) within a server application following some extrapation from the one example in the documentation for similar elements without success.

we got rid of TSX templates, because they are more confusing than actually helpful (integrating HTML in JS seems like a good idea on paper, but fails in practice). Instead there is an API in typescript (core/dom) that allows you the create DOM nodes. In core/dom we only implement tags that we actually use, but you can create any kinds of nodes with createElement(), e.g. createElement(“img”, attrs, children). You can create yourself an equivalent img() function with:

function img() {

return createElement.apply(null, [“img”].concat(Array.prototype.slice.call(arguments)));

}

Perhaps we could add other tags, as it’s not that much extra code (though bokehjs really needs to go on a diet).

Mateusz

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/fb5aa476-2156-45a6-a842-e701a3ca2b38%40continuum.io.

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

Hi,

Thanks for the answer; I’m sorry I am just circling back to this now, but I do have one point to clarify. Would the new img function you provided need to be implemented in the Bokehjs source code and rebuilt for my project or is the createElement function available through coffeescript via HTML or Bokehjs? If it is available, how would I access it from within the coffescript files (i.e. document.createElement(‘img’))? If so, I would also need to slightly translate the javascript code provided to coffeescript in that case, correct?

-Andrew

···

On Wednesday, October 4, 2017 at 11:58:05 AM UTC-4, mateusz.paprocki wrote:

Hi,

On Wed, Oct 4, 2017 at 4:40 PM, [email protected] wrote:

In bokeh 0.12.7 typescript support for templates in custom models was replaced with the coffeescript core dom API. Looking through the bokehjs/SRC/coffee/core/dom.ts file on github I do not see support for a IMG element. Previously, this was possible in the tsx format with img tags. Is there a way to do the same with this API? I have tried importing img from core/dom and using it like: img({id: “img_name”, src: “app/static/image.gif”}) within a server application following some extrapation from the one example in the documentation for similar elements without success.

we got rid of TSX templates, because they are more confusing than actually helpful (integrating HTML in JS seems like a good idea on paper, but fails in practice). Instead there is an API in typescript (core/dom) that allows you the create DOM nodes. In core/dom we only implement tags that we actually use, but you can create any kinds of nodes with createElement(), e.g. createElement(“img”, attrs, children). You can create yourself an equivalent img() function with:

function img() {

return createElement.apply(null, [“img”].concat(Array.prototype.slice.call(arguments)));

}

Perhaps we could add other tags, as it’s not that much extra code (though bokehjs really needs to go on a diet).

Mateusz

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/fb5aa476-2156-45a6-a842-e701a3ca2b38%40continuum.io.

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

Hi,

We are actually in the middle of a long slow process to port BokehJS to TypeScript, and this module is already covered to TypeScript. Looking at dom.ts, there's a generic function for creating elements, so I believe all that may be required is to add one line to the BokehJS file here:

  https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/core/dom.ts#L63-L79

Then recompile. I'd encourage you to submit a PR with this change, then I can ping the other core dev who can expand on things in case I am wrong about more work being needed.

Thanks,

Bryan

···

On Oct 9, 2017, at 07:37, [email protected] wrote:

Hi,

Thanks for the answer; I'm sorry I am just circling back to this now, but I do have one point to clarify. Would the new img function you provided need to be implemented in the Bokehjs source code and rebuilt for my project or is the createElement function available through coffeescript via HTML or Bokehjs? If it is available, how would I access it from within the coffescript files (i.e. document.createElement('img'))? If so, I would also need to slightly translate the javascript code provided to coffeescript in that case, correct?

-Andrew

On Wednesday, October 4, 2017 at 11:58:05 AM UTC-4, mateusz.paprocki wrote:
Hi,

On Wed, Oct 4, 2017 at 4:40 PM, <[email protected]> wrote:
In bokeh 0.12.7 typescript support for templates in custom models was replaced with the coffeescript core dom API. Looking through the bokehjs/SRC/coffee/core/dom.ts file on github I do not see support for a IMG element. Previously, this was possible in the tsx format with img tags. Is there a way to do the same with this API? I have tried importing img from core/dom and using it like: img({id: "img_name", src: "app/static/image.gif"}) within a server application following some extrapation from the one example in the documentation for similar elements without success.

we got rid of TSX templates, because they are more confusing than actually helpful (integrating HTML in JS seems like a good idea on paper, but fails in practice). Instead there is an API in typescript (core/dom) that allows you the create DOM nodes. In core/dom we only implement tags that we actually use, but you can create any kinds of nodes with createElement(), e.g. createElement("img", attrs, children). You can create yourself an equivalent img() function with:

function img() {
  return createElement.apply(null, ["img"].concat(Array.prototype.slice.call(arguments)));
}

Perhaps we could add other tags, as it's not that much extra code (though bokehjs really needs to go on a diet).

Mateusz

--
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 bokeh+un...@continuum.io.
To post to this group, send email to bo...@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/fb5aa476-2156-45a6-a842-e701a3ca2b38%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/2381efbb-d4fe-4dc6-8805-a4dfc1b20e17%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Thanks Brian.

I did see the list of exported functions in core/dom and figured that would be the place to start. However, I’ve actually been having some problems getting the development version of Bokehjs compiled on my work computer (the setup and build process seems fine on my personal computer) so that was why I was looking for a workaround. I was able to use Mateusz suggestion with the document.createElement and setAttribute functions to create the objects I need in the coffeescript files for the time being though. I’ll see if I can test this with a rebuilt Bokehjs project if I get a chance, but that seems like the proper solution with things as they are currently set up.

Thanks again for all of your help.

-Andrew

···

On Monday, October 9, 2017 at 8:54:19 AM UTC-4, Bryan Van de ven wrote:

Hi,

We are actually in the middle of a long slow process to port BokehJS to TypeScript, and this module is already covered to TypeScript. Looking at dom.ts, there’s a generic function for creating elements, so I believe all that may be required is to add one line to the BokehJS file here:

    [https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/core/dom.ts#L63-L79](https://www.google.com/url?q=https%3A%2F%2Fgithub.com%2Fbokeh%2Fbokeh%2Fblob%2Fmaster%2Fbokehjs%2Fsrc%2Fcoffee%2Fcore%2Fdom.ts%23L63-L79&sa=D&sntz=1&usg=AFQjCNEGvlf-qExOs5mWFg2hNP-6lRe9qw)

Then recompile. I’d encourage you to submit a PR with this change, then I can ping the other core dev who can expand on things in case I am wrong about more work being needed.

Thanks,

Bryan

On Oct 9, 2017, at 07:37, [email protected] wrote:

Hi,

Thanks for the answer; I’m sorry I am just circling back to this now, but I do have one point to clarify. Would the new img function you provided need to be implemented in the Bokehjs source code and rebuilt for my project or is the createElement function available through coffeescript via HTML or Bokehjs? If it is available, how would I access it from within the coffescript files (i.e. document.createElement(‘img’))? If so, I would also need to slightly translate the javascript code provided to coffeescript in that case, correct?

-Andrew

On Wednesday, October 4, 2017 at 11:58:05 AM UTC-4, mateusz.paprocki wrote:

Hi,

On Wed, Oct 4, 2017 at 4:40 PM, [email protected] wrote:

In bokeh 0.12.7 typescript support for templates in custom models was replaced with the coffeescript core dom API. Looking through the bokehjs/SRC/coffee/core/dom.ts file on github I do not see support for a IMG element. Previously, this was possible in the tsx format with img tags. Is there a way to do the same with this API? I have tried importing img from core/dom and using it like: img({id: “img_name”, src: “app/static/image.gif”}) within a server application following some extrapation from the one example in the documentation for similar elements without success.

we got rid of TSX templates, because they are more confusing than actually helpful (integrating HTML in JS seems like a good idea on paper, but fails in practice). Instead there is an API in typescript (core/dom) that allows you the create DOM nodes. In core/dom we only implement tags that we actually use, but you can create any kinds of nodes with createElement(), e.g. createElement(“img”, attrs, children). You can create yourself an equivalent img() function with:

function img() {

return createElement.apply(null, [“img”].concat(Array.prototype.slice.call(arguments)));

}

Perhaps we could add other tags, as it’s not that much extra code (though bokehjs really needs to go on a diet).

Mateusz

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/fb5aa476-2156-45a6-a842-e701a3ca2b38%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/2381efbb-d4fe-4dc6-8805-a4dfc1b20e17%40continuum.io.

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