How to embed a templated dashboard in a webpage?

Community Support
1

I’ve created a bokeh server that serves a dashboard.
The dashboard has a template that looks like:

{% extends base %}

<!-- goes in head -->
{% block preamble %}
    <style type="text/css">{% include 'styles.css' %}</style>
{% endblock %}

<!-- goes in body -->
{% block contents %}

    <div id="main">
        <div id="caption">
            <div id="loaderContainer">
            <div id="loaderTrigger">
                {{ embed(roots.loaderTrigger) }}
            </div>
            <div id="loader"></div>
        </div>
            {{ embed(roots.caption) }}
        </div>
        <div id="contentArea">
            <div id = "tableArea">
                <div id = "selectFilters">
                    <div id = "selectFilter1">
                        {{ embed(roots.select_features1) }}
                    </div>
                    <div id = "selectFilter2">
                        {{ embed(roots.select_features2) }}
                    </div>
                </div>
                <div id = "dataTable">
                    {{ embed(roots.DataTable) }}
                </div>
            </div>
            <div id="plotArea">
                {{ embed(roots.plot) }}
            </div>
        </div>
    </div>
{% endblock %}

Now, I’ve created a Flask app and I want to embed this dashboard by pulling a session from the bokeh server. I tried to follow this example but the dashboard there includes a single plot and has no template and styling.
How can I embed this dashboard so it will have the same html structure and styling as in the bokeh server?

2

You need to show us what you have tried, i.e. provide a complete Minimal Reproducible Example.

3

@Bryan
I have the following dashboard on the bokeh server:
main.py:

from bokeh.io import curdoc
from bokeh.models.widgets.markups import Div

div = Div(text="Hello world", name="div")

curdoc().add_root(div)

index.html:

{% extends base %}

<!-- goes in head -->
{% block preamble %}
    <style type="text/css">{% include 'styles.css' %}</style>
{% endblock %}

<!-- goes in body -->
{% block contents %}
    <div id="main">
        <div id="caption">
            {{ embed(roots.div) }}
        </div>
    </div>
{% endblock %}

styles.css:

#caption {
    background-color: red;
    padding-left: 20px;
}

The Flask app looks like:
__init__.py:

from flask import Flask, render_template
from bokeh.client import pull_session
from bokeh.embed import server_session


def create_app() -> Flask:

    app = Flask(__name__)

    @app.route("/dashboards/<string:dashboard_name>", methods=["GET"])
    def dashboards(dashboard_name):
        dashboard_url = f"http://localhost:5100/{dashboard_name}"

        with pull_session(url=dashboard_url) as session:

            # generate a script to load the customized session
            script = server_session(session_id=session.id, url=dashboard_url)

            # use the script in the rendered page
            return render_template("embed_dashboard.html", script=script, dashboard_name=dashboard_name)

    return app

embed_dashboard.html:

<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ dashboard_name }} Dashboard</title>
  </head>

  <body>
    {{ script|safe }}
  </body>
</html>

The file system looks like:
project/
  dashboards/
    Test/
      templates/
        index.html
        styles.css
      main.py
  app/
    __init__.py
    templates/
      embed_dashboard.html

I run the bokeh server:
bokeh serve --port 5100 --allow-websocket-origin localhost:5000 --allow-websocket-origin 127.0.0.1:5000 --glob dashboards/*

and then the app:
export FLASK_APP=app/__init__.py
flask run

4

@Bryan Can I assume it’s not possible and just use an iframe?

5

There are lots of combinations of possibilities, and I simply don’t know the answer about this specific combination, I am afraid. I can only say that the motivating usage scenario for Bokeh server templates was for the case that the Bokeh server was what was serving the entire page, not any embedding scenario.

6

I understand. Thanks!:pray: