OK, a very short minimal example (to be put in a directory, to run as app):
Python code (main.py)
#!/usr/bin/python3.9
# 3.9 minimum required for type hinting
import bokeh.models as bkm
import bokeh.layouts as bkl
def main(doc) -> None:
#define a dropdown (left) for menu
menu1 = ['a','b']
dropdown1 = bkm.Dropdown(label="select discipline", menu=menu1)
pnl = bkl.column(dropdown1, name="menu")
doc.add_root(pnl)
#define a placeholder for the right
div=bkm.Div(text='Placeholder',height=40)
pn2= bkl.column(div, name="tabs")
doc.add_root(pn2)
if __name__.startswith('bokeh_app'):
#run under bokeh serve
from bokeh.plotting import curdoc
main(curdoc())
else:
#run as pythion script
from bokeh.application.handlers.function import FunctionHandler
from bokeh.application import Application
from bokeh.server.server import Server
from tornado.ioloop import IOLoop
io_loop = IOLoop.current()
server = Server(applications={'/app': Application(FunctionHandler(main))},
io_loop=io_loop, port=5001,
index='./templates/index.html'
)
server.start()
server.show('/app')
io_loop.start()
templates/index.html
{% extends base %}
{% block title %}FSE Examination dashboard{% endblock %}
{% block postamble %}
<style>
{% include 'special.css'%}
</style>
{% endblock %}
{% block contents %}
<div class="content">
<div class="row">
<div class="leftcol"> <h2>Data Selector</h2><div class="center">{{ embed(roots.menu) }}</div> </div>
<div class="rightcol"> {{ embed(roots.tabs) }} </div>
</div>
</div>
{% endblock %}
and the custom css with that
html {
width: 100%;
}
body {
min-width: 600px;
max-width: 900px;
width: 75%;
margin: auto;
}
.content {
margin: 2em;
}
h1 {
margin: 2em 0 0 0;
color: #2e484c;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
text-transform: uppercase;
}
a:link {
font-weight: bold;
text-decoration: none;
color: #0d8ba1;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #1a5952;
}
a:hover, a:focus, a:active {
text-decoration: underline;
color: #9685BA;
}
p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.2em;
text-align: justify;
text-justify: inter-word;
}
.row {
display: flex
}
.leftcol {
flex: 15%;
}
.rightcol {
flex: 85%;
}
.center {
align-content: center;
}