Get HTML canvas from plot ID in JavaScript

Hi

How can I get the HTML canvas in JS from a plot id?
Before version 0.12.6 I could do $(’#modelid_’+plot_id), but that got changed/removed with the latest release.

Background:
I want to add link anchors to certain plots (but not all of them) for navigation, and I currently use this: I pass the plot id’s via jinja template arguments to JS, and use the following JS code after the plots are initialized:

    $('#modelid_'+plot_id).before('<a id="'+plot_name+'" class="fragment bk-plot-layout" href="#'+plot_name+'">&para;</a>');

Any help is appreciated
cheers
Beat

Hi,

I have a vague recollection that the div id's are now just bare UUID's but I am not certain of that, so I have asked another core dev to comment on this thread when they can.

Thanks,

Bryan

···

On Jun 22, 2017, at 00:13, Beat Küng <[email protected]> wrote:

Hi

How can I get the HTML canvas in JS from a plot id?
Before version 0.12.6 I could do $('#modelid_'+plot_id), but that got changed/removed with the latest release.

Background:
I want to add link anchors to certain plots (but not all of them) for navigation, and I currently use this: I pass the plot id's via jinja template arguments to JS, and use the following JS code after the plots are initialized:

        $('#modelid_'+plot_id).before('<a id="'+plot_name+'" class="fragment bk-plot-layout" href="#'+plot_name+'">&para;</a>');

Any help is appreciated
cheers
Beat

--
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/4dd4452b-1a88-4386-afb3-c4748f565502%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Hi,

···

On Thu, Jun 22, 2017 at 7:13 AM, Beat Küng [email protected] wrote:

Hi

How can I get the HTML canvas in JS from a plot id?
Before version 0.12.6 I could do $(‘#modelid_’+plot_id), but that got changed/removed with the latest release.

Background:
I want to add link anchors to certain plots (but not all of them) for navigation, and I currently use this: I pass the plot id’s via jinja template arguments to JS, and use the following JS code after the plots are initialized:

    $('#modelid_'+plot_id).before('<a id="'+plot_name+'" class="fragment bk-plot-layout" href="#'+plot_name+'">&para;</a>');

the best solution would be to use an annotation for this purpose. Unfortunately we don’t have a link or generic HTML annotations at this point, just text label. This was supposed to be added to replace custom code we use for attributions. Previously there were model IDs assigned to DOM nodes, but that was intended mostly for testing purpose, and didn’t result best quality tests, so was removed. In my view, though we don’t have agreement on this yet, generated DOM nodes are private to bokehjs and thus shouldn’t be modified directly, unless there is really no other way to proceed. For now you can use the following:

function foreach_plot_view(view, fn) {

if (view.model instanceof Bokeh.Models(“Plot”)) {

fn(view);

} else if (view.model instanceof Bokeh.Models(“LayoutDOM”)) {

for (var id in view.child_views) {

foreach_plot_view(view.child_views[id], fn);

}

}

}

var root = Object.keys(Bokeh.index)[0] // if you have only one root

foreach_plot_view(root, function(plot_view) { console.log(plot_view.plot_canvas_view.canvas_view.canvas_el) })

Then you can filter plots you want to modify:

var ids = […];

foreach_plot_view(root, function(plot_view) { if (ids.indexOf(plot_view.model.id)) { plot_view.plot_canvas_view.canvas_view.canvas_el.appendChild(…) } })

Mateusz

Any help is appreciated
cheers
Beat

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/4dd4452b-1a88-4386-afb3-c4748f565502%40continuum.io.

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

Hi Mateusz

I remember having looked at annotations, but as you say, I saw now way to add link anchors. Your suggestion works, thanks!

Do you plan to add an ‘official’ way for that?

cheers
Beat

···

On Monday, June 26, 2017 at 9:18:32 PM UTC+2, mateusz.paprocki wrote:

Hi,

On Thu, Jun 22, 2017 at 7:13 AM, Beat Küng [email protected] wrote:

Hi

How can I get the HTML canvas in JS from a plot id?
Before version 0.12.6 I could do $(‘#modelid_’+plot_id), but that got changed/removed with the latest release.

Background:
I want to add link anchors to certain plots (but not all of them) for navigation, and I currently use this: I pass the plot id’s via jinja template arguments to JS, and use the following JS code after the plots are initialized:

    $('#modelid_'+plot_id).before('<a id="'+plot_name+'" class="fragment bk-plot-layout" href="#'+plot_name+'">&para;</a>');

the best solution would be to use an annotation for this purpose. Unfortunately we don’t have a link or generic HTML annotations at this point, just text label. This was supposed to be added to replace custom code we use for attributions. Previously there were model IDs assigned to DOM nodes, but that was intended mostly for testing purpose, and didn’t result best quality tests, so was removed. In my view, though we don’t have agreement on this yet, generated DOM nodes are private to bokehjs and thus shouldn’t be modified directly, unless there is really no other way to proceed. For now you can use the following:

function foreach_plot_view(view, fn) {

if (view.model instanceof Bokeh.Models(“Plot”)) {

fn(view);

} else if (view.model instanceof Bokeh.Models(“LayoutDOM”)) {

for (var id in view.child_views) {

foreach_plot_view(view.child_views[id], fn);

}

}

}

var root = Object.keys(Bokeh.index)[0] // if you have only one root

foreach_plot_view(root, function(plot_view) { console.log(plot_view.plot_canvas_view.canvas_view.canvas_el) })

Then you can filter plots you want to modify:

var ids = […];

foreach_plot_view(root, function(plot_view) { if (ids.indexOf(plot_view.model.id)) { plot_view.plot_canvas_view.canvas_view.canvas_el.appendChild(…) } })

Mateusz

Any help is appreciated
cheers
Beat

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/4dd4452b-1a88-4386-afb3-c4748f565502%40continuum.io.

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

Hi,

···

On Tue, Jun 27, 2017 at 11:10 AM, Beat Küng [email protected] wrote:

Hi Mateusz

I remember having looked at annotations, but as you say, I saw now way to add link anchors. Your suggestion works, thanks!

Do you plan to add an ‘official’ way for that?

yes, this can be done for the next release.

Mateusz

cheers
Beat

On Monday, June 26, 2017 at 9:18:32 PM UTC+2, mateusz.paprocki wrote:

Hi,

On Thu, Jun 22, 2017 at 7:13 AM, Beat Küng [email protected] wrote:

Hi

How can I get the HTML canvas in JS from a plot id?
Before version 0.12.6 I could do $(‘#modelid_’+plot_id), but that got changed/removed with the latest release.

Background:
I want to add link anchors to certain plots (but not all of them) for navigation, and I currently use this: I pass the plot id’s via jinja template arguments to JS, and use the following JS code after the plots are initialized:

    $('#modelid_'+plot_id).before('<a id="'+plot_name+'" class="fragment bk-plot-layout" href="#'+plot_name+'">&para;</a>');

the best solution would be to use an annotation for this purpose. Unfortunately we don’t have a link or generic HTML annotations at this point, just text label. This was supposed to be added to replace custom code we use for attributions. Previously there were model IDs assigned to DOM nodes, but that was intended mostly for testing purpose, and didn’t result best quality tests, so was removed. In my view, though we don’t have agreement on this yet, generated DOM nodes are private to bokehjs and thus shouldn’t be modified directly, unless there is really no other way to proceed. For now you can use the following:

function foreach_plot_view(view, fn) {

if (view.model instanceof Bokeh.Models(“Plot”)) {

fn(view);

} else if (view.model instanceof Bokeh.Models(“LayoutDOM”)) {

for (var id in view.child_views) {

foreach_plot_view(view.child_views[id], fn);

}

}

}

var root = Object.keys(Bokeh.index)[0] // if you have only one root

foreach_plot_view(root, function(plot_view) { console.log(plot_view.plot_canvas_view.canvas_view.canvas_el) })

Then you can filter plots you want to modify:

var ids = […];

foreach_plot_view(root, function(plot_view) { if (ids.indexOf(plot_view.model.id)) { plot_view.plot_canvas_view.canvas_view.canvas_el.appendChild(…) } })

Mateusz

Any help is appreciated
cheers
Beat

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/4dd4452b-1a88-4386-afb3-c4748f565502%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/e57c5fe0-f4db-4a98-ab99-5d0d161ea209%40continuum.io.

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