render_html on components of layout column "Error rendering Bokeh model" *Solved*

Community Support
1

Hi guys,

I am trying to insert a bokeh column layout into my html through the render_html Flask function, but I am getting the error “Error rendering Bokeh model: could not find tag with id: 92f95552-45dc-4ce8-b71b-3248f0b59f74”. The column has a TextInput, Button, and Figure inside of it.

It is worth mentioning that if I just run show() on the output of the smp.similarityGraph function it shows exactly what I expect, a column with a textinput, button, and circle figure plot.

Here is the python code:

@app.route(’/similarity’, methods=[‘POST’])

def similarityView():

app.curpage = "similarity"

if 'similarity' not in app.vars:

    app.vars['similarity'] = True

    app.simplot = smp.similarityGraph(app.vars['searchStr'], '1975', '2017')

    print(app.simplot)

    script, div = components({'column_div': app.simplot})

    print(div)

    ######render

    return render_template('pubview.html', searchstring=app.vars['searchStr'], script=script, div=div, curpage=app.curpage, nav_id=app.nav_id, nav_name=app.nav_name)

``

The two print lines I get in the python console are

Column(id='38b94f66-8415-44c7-bdde-fca4448a628a', ...)
{'column_div': '\n<div class="bk-root">\n <div class="bk-plotdiv" id="92f95552-45dc-4ce8-b71b-3248f0b59f74"></div>\n</div>'}

``

Here is the head of the html file for import of the bokeh scripts:

``

Here is the Jinja2 code used during rendering

{% if curpage == "similarity" %}

{{ div.column_div }}

{% endif %}

``

The output html seems like it should be rendering this item as this script is in the html:

var render_items = [{“docid”:“28bc1c9e-1e87-449d-91a0-5481079187c4”,“elementid”:“92f95552-45dc-4ce8-b71b-3248f0b59f74”,“modelid”:“38b94f66-8415-44c7-bdde-fca4448a628a”}];
Bokeh.embed.embed_items(docs_json,render_items);

``

The output from the Jinja2 code above after rendering looks like this:

<div class="bk-root">
<div class="bk-plotdiv" id="92f95552-45dc-4ce8-b71b-3248f0b59f74"></div>
</div>

``

And finally the bokeh error looks like this:

Error rendering Bokeh model: could not find tag with id: 92f95552-45dc-4ce8-b71b-3248f0b59f74"

``

I am not sure why this column layout isn’t getting embedded. I am doing the same thing for individual plots on different pages of my applications and they work fine with this methodology, seems to be something to do with the column layout specifically.

Thanks for any help guys and gals!

Joe

EDIT:

As I was about to hit post, I figured out the issue and thought I would post anyways to share with others. I needed to modify the jinja2 script to say:

{% if curpage == "similarity" %}

{{ div.column_div | safe }}

{% endif %}

``