Django pull_session into template with bokeh using it's own templates and CSS

Hello,

I am looking for some guidance, as searching on the internet and through the issues didn’t pan out what I was looking for. I am working with Bokeh (v2.4.3), created a standalone app that uses jinja2 templates with bootstrap. This is following the directory structure project.

The bokeh server serves all the content with bokeh serve --allow-websocket-origin=localhost:8000 myapp, including css, js and all the layouts I set up in the template accessed from http://localhost:5006

I then wanted to integrate this with django (v4+), and saw the pull_session, server_session and server_document functions. However, these just return a script, which when embedding into my template from django, only renders the components as defined in the bokeh myapp/main.py, with none of the css or any layouts before as defined in the templates folder of the bokeh app.

eg.

# End of myapp/main.py
...
p = figure(..., name="myplot")
select = Select(..., name="myselect")
...
curdoc().add_root(p)
curdoc().add_root(slider)
# and more components
# django views.py
def myview(request)
    with pull_session(url="http://localhost:5006/myapp") as session:
        script = server_session(session_id=session.id, url="http://localhost:5006/myapp")
        return render(request, 'mydjangotemplate.html', {"script" : script})
<!-- mydjangotemplate.html -->
{% extends base.html %}
{% block content %}
{{ script | safe }}
{% endblock %}
<!-- base.html -->
<!doctype html>
<html>
    <head>
       <!-- CSS/JS only for django, not bokeh server -->
       <link href="{% static "css/bootstrap/bootstrap.min.css" %}" rel="stylesheet">
       <link href="{% static "css/mystyle.css" %}" rel="stylesheet">
    </head>
    <body>
        <!-- Other layout code for main site functionality -->
        {% block content %}
        {% endblock %}
        <!-- end of main site layout -->
    </body>
</html>

My question is, do I need to pass the bootstrap CSS/JS and bokehJS files to the django template? Or am I approaching this wrong? Which I feel is the case. My impression was to just embed the view where the {{ script |safe }} would go. I double checked using the bokeh built-in layouts and those work fine, but I would like to have mobile and responsive layouts.

Any advice or help would be greatly appreciated!

Cheers,

PS. An testable example would be embedding the bokeh.git/examples/app/dash app into a django template.

However, these just return a script, which when embedding into my template from django, only renders the components as defined in the bokeh myapp/main.py , with none of the css or any layouts before as defined in the templates folder of the bokeh app.

That’s all it can really do. The template in the app templates folder is a template for an entire page to embed the Bokeh app into. If you want to embed the Bokeh app part in some external page, that page is a replacement for anything in the templates folder. It will need to carry its own baggage.

So to be clear, the templates/index.html template is not rendered? (Which makes sense since it only extends base). If that is the case, would I then need to use bokeh.embed.components? Returning the script, and series of divs that I would like to layout in an external template with Django which can be accessed by the session.document.(whatever_it_is_called) from the pull_session? Which likely means including the Bokeh CSS/JS in that external template?

I am just unsure how to properly access the individual elements for layout purposes when using server_session in an external template.

No that is only for standalone (plain HTML + JS) output, it cannot embed Bokeh server apps.

I think I had missed that you want to template individual components separately in your own template, rather that the app as a whole into the template. I am not actually sure this is currently possible, unfortunately. Or if it is, I don’t actually know how to accomplish it offhand. cc @mateusz who can possibly comment about current and/or upcoming Bokeh 3.0 status.

Perfect, makes sense.

I think I had missed that you want to template individual components separately in your own template, rather that the app as a whole into the template. I am not actually sure this is currently possible, unfortunately. Or if it is, I don’t actually know how to accomplish it offhand. cc @mateusz who can possibly comment about current and/or upcoming Bokeh 3.0 status.

That was my bad for not being too clear, and totally okay if you don’t know! I was searching online and it sounded like that functionality existed at one point and was removed. I was looking on github and saw that bokeh 3.0 was around the corner.

We are just trying to build and assess data app frameworks for a project with multiple clients, with a lot of data apps; hence, my eager questions all over the place (all my topics). My search so far hasn’t shown that any of the main frameworks have said functionality (or functionalities), or it is very hard to find. I fear that we need to go down a completely custom route with jquery and d3.js, which is not necessarily ideal (for me). The use case (in my mind) for inter-app communication and layouts of widgets embedded in another framework seems like a desirable set of features that dashboards would want. It just opens up more flexibility in my mind.