Embedding text in template without auto-generated divs

Community Support
1

Hello! First off, great work with Bokeh.

I am building a dashboard on Bokeh server. It checks all boxes on my list except one. I want to display and update values along with text, outside of figures. Currently, the available models to add to the document are Div, Paragraph and PreText. By default these work great except for when applying templating with Bootstrap 4.

For instance, this simple card:

<div class="card bg-secondary">
    <div class="card-body">
        <h4 class="card-title">Number of Stuff:</h4>
        <h3 class="card-text text-center">number-from-callback</h3>
    </div>
</div>

will not display properly when using either the Div or Paragraph models because Bokeh wraps this html bit with auto-generated divs of class bk-root and bk. Is there a way to disable this wrapping? It would allow for further customization with Bootstrap 4, ideally enabling embedding such as:

{% extends base %}

{% block postamble %}
    <style>{% include 'bootstrap.min.css' %}</style>
{% endblock postamble %}

{% block contents %}
<div class="container">
    <div class="card bg-secondary">
        <div class="card-body">
            <h4 class="card-title">Number of Stuff:</h4>
            <h3 class="card-text text-center">{{ embed(roots.number_of_stuff) }}</h3>
        </div>
    </div>
</div>
{% endblock contents %}

where only the text is passed to the template, without extra divs. Thank you very much for your time.

2

Is there a way to disable this wrapping?

It’s definitely not possible currently, AFAIK. @mateusz might have some ideas about how best to address this with current releases.

FWIW I very much would like to look in to adding some simple DOM adapters that would allow Bokeh to interact with DOM elements purely at a data level, without trying to manage any layout or styling. E.g. in this case I could imaging creating a “div adapter” that you configure with just an DOM id, and then Bokeh can dump text into that div any time, but otherwise you control where it is in the page and any styling. I think this sort of thing would be most useful for the dashboarding use case.

3

Thanks! Yes, that would be great. The simplicity of laying out figures and widgets within Bokeh is excellent, however, being able to arrange items in the template has many benefits, responsiveness in particular, and could lead to even more elegant dashboards.

I am willing to work on it and contribute if you can point me in the right direction.