Show or hide widgets based on values of other widgets

What would be the best way to implement conditional select fields? For example depending on the value of the first Select widget, I would show either A, B, or C and D widgets. Previously when working with flask-wtforms I just used Jquery, and I guess I could do same here as well with customJS callbacks, but I was wondering if there is some specific Bokeh way of doing this? I did find some old posts regarding some issues caused by updating layout dynamically, but I’m not sure if those posts are still relevant.

Jquery approach seems to work at least for now:

action selection

action = Select(
title=‘Action’, value=‘Run’,
options=[‘Run’, ‘Walk’])

what next selection

next= Select(
title=‘foo’, value=‘bar’,
options=[‘foo’, ‘bar’], id=‘next_field’)

action_callback = CustomJS(code=“”"
var action = cb_obj.value;
if (action == ‘Run’) {
('#next_field').hide(); } else { (‘#next_field’).show();
}
“”")

action.js_on_change(‘value’, action_callback)

Only issue I can see at the moment is that initially the field is visible, perhaps that needs to be handled elsewhere.

perjantai 20. huhtikuuta 2018 19.08.34 UTC+2 [email protected] kirjoitti:

···

What would be the best way to implement conditional select fields? For example depending on the value of the first Select widget, I would show either A, B, or C and D widgets. Previously when working with flask-wtforms I just used Jquery, and I guess I could do same here as well with customJS callbacks, but I was wondering if there is some specific Bokeh way of doing this? I did find some old posts regarding some issues caused by updating layout dynamically, but I’m not sure if those posts are still relevant.

I’ll continue to reply to myself, above approach doesn’t work after all,
as it only removes the select field but the title stays, i.e. the id I gave to the field does point to the whole widget like I though it would.
Next I deat is to check if I could just remove the widgets from the widgetbox object which is supplied to the layout, and then later add it back when needed.

perjantai 20. huhtikuuta 2018 19.08.34 UTC+2 [email protected] kirjoitti:

···

What would be the best way to implement conditional select fields? For example depending on the value of the first Select widget, I would show either A, B, or C and D widgets. Previously when working with flask-wtforms I just used Jquery, and I guess I could do same here as well with customJS callbacks, but I was wondering if there is some specific Bokeh way of doing this? I did find some old posts regarding some issues caused by updating layout dynamically, but I’m not sure if those posts are still relevant.

If you use the bokeh server you can put each widget in a widgetbox and act on their css classes.

I have an example code there with a select widget than is used to show/hide others widgets:

https://bitbucket.org/rocheseb/bokeh/src/fdd1dee89118e5155617838c2ce6071ebcb5f8ea/applications/show_hide_widgets/?at=default

Thanks, I have somewhat more complex nested structure in mind but your example gives a good starting point.

maanantai 23. huhtikuuta 2018 17.01.49 UTC+2 Sébastien Roche kirjoitti:

···

If you use the bokeh server you can put each widget in a widgetbox and act on their css classes.

I have an example code there with a select widget than is used to show/hide others widgets:

https://bitbucket.org/rocheseb/bokeh/src/fdd1dee89118e5155617838c2ce6071ebcb5f8ea/applications/show_hide_widgets/?at=default

Although Sébastien’s example works in principle, in my actual application I would need to repeat some of the codes multiple times as the code needs to be inlined in each callback, and I need the current values of other widgets in some cases, and depending on those values I need to hide/show certain widgets.

Anyway, I though that I can still use the css_classes argument of the widgetbox and do separate js script with jquery which would handle the hiding and showing widgets (which worked fine with my previous flask+bokeh app), but for some reason I cannot access the widget elements in external javascript. If I make a customJS callback in python which I add to a widget, containing only line

console.log(document.getElementsByClassName(‘alg_field’)[0]);

I see the widget element in the console. But if I make a JS file with

$( document ).ready(function() {
console.log(document.getElementsByClassName(‘alg_field’)[0]);
});

I get ‘undefined’. And I get the same with using also the full class of the element, bk-widget-box bk-layout-fixed alg_field. The body of index.html is just

{{ plot_div|indent(8) }} {{ plot_script|indent(8) }}
<script src="bokeh_version/static/js/toggle.js"></script>

This is likely just my lack of understanding of JS etc and might be bit off topic, but any pointers would be appreciated. If not, I’ll circumvent the issue with customJS callbacks with some duplicate code.

tiistai 24. huhtikuuta 2018 13.29.48 UTC+2 [email protected] kirjoitti:

···

Thanks, I have somewhat more complex nested structure in mind but your example gives a good starting point.

maanantai 23. huhtikuuta 2018 17.01.49 UTC+2 Sébastien Roche kirjoitti:

If you use the bokeh server you can put each widget in a widgetbox and act on their css classes.

I have an example code there with a select widget than is used to show/hide others widgets:

https://bitbucket.org/rocheseb/bokeh/src/fdd1dee89118e5155617838c2ce6071ebcb5f8ea/applications/show_hide_widgets/?at=default