bokeh shennanigans

index.html

{% extends base %}

{% block preamble %}
  <style>
      .hidden {
          display: none !important;
      }
      .bk-grid.bk-layout-fixed {
    width: auto !important;
    height: auto !important;
    position: static !important;
}
/*.bk-plot-wrapper {
    position: static !important;
}*/
  </style>
{% endblock %}

{% block contents %}
  {{ super() }}
{% endblock %}

main.py

# myapp.py

from random import random

from bokeh.layouts import row, column, widgetbox
from bokeh.models import Button
from bokeh.palettes import RdYlBu3
from bokeh.plotting import figure, curdoc
from bokeh.models.widgets.panels import Panel, Tabs
from bokeh.models.widgets import RadioButtonGroup
from bokeh.models.layouts import Box, Spacer

from bokeh.models.callbacks import CustomJS

import uuid

# create a plot and style its properties
p = figure(x_range=(0, 100), y_range=(0, 100), toolbar_location=None)
p.border_fill_color = 'black'
p.background_fill_color = 'black'
p.outline_line_color = None
p.grid.grid_line_color = None

# add a text renderer to our plot (no data yet)
r = p.text(x=[], y=[], text=[], text_color=[], text_font_size="20pt",
           text_baseline="middle", text_align="center")

# create a plot and style its properties
p2 = figure(x_range=(0, 100), y_range=(0, 100), toolbar_location=None)
p2.border_fill_color = 'red'
p2.background_fill_color = 'red'
p2.outline_line_color = None
p2.grid.grid_line_color = None

p3 = figure(x_range=(0, 100), y_range=(0, 100), toolbar_location=None)
p3.border_fill_color = 'green'
p3.background_fill_color = 'green'
p3.outline_line_color = None
p3.grid.grid_line_color = None

p4 = figure(x_range=(0, 100), y_range=(0, 100), toolbar_location=None)
p4.border_fill_color = 'blue'
p4.background_fill_color = 'blue'
p4.outline_line_color = None
p4.grid.grid_line_color = None

i = 0

ds = r.data_source

# create a callback that will add a number in a random location
def callback():
    global i
    global buttons

    # BEST PRACTICE --- update .data in one step with a new dict
    new_data = dict()
    new_data['x'] = ds.data['x'] + [random()*70 + 15]
    new_data['y'] = ds.data['y'] + [random()*70 + 15]
    new_data['text_color'] = ds.data['text_color'] + [RdYlBu3[i%3]]
    new_data['text'] = ds.data['text'] + [str(i)]
    ds.data = new_data

    i = i + 1

    buttons.children.append(Button(label='yay'))

# add a button widget and configure with the call back
button = Button(label="Press Me")
button.on_click(callback)

buttons = widgetbox(button)

hacked_tab_group_callback = None

def hacked_tab_group(labels, tabs):
    ''' that this is required is so dumb '''
    if len(labels) != len(tabs):
        raise ValueError('Length of labels must match length of tabs')

    base = str(uuid.uuid4())
    selector = RadioButtonGroup(labels=labels, active=0)
    
    hacked_tab_group_callback = CustomJS(args=dict(radio=selector, base_class=base), code='''
        let active = base_class + '-' + radio.attributes.active
        console.log('Updating elements of base class', base_class, 'active', active)

        for (let elem of document.getElementsByClassName(base_class)) {
            if (elem.classList.contains(active)) {
                elem.classList.remove('hidden')
            } else {
                elem.classList.add('hidden')
            }
        }
    ''')
    selector.js_on_change('active', hacked_tab_group_callback)
   
    for i in range(len(tabs)):
        if not tabs[i].css_classes:
            tabs[i].css_classes = [base, base + '-' + str(i)]
        else:
            tabs[i].css_classes.append(base)
            tabs[i].css_classes.append(base + '-' + str(i))
        if i > 0:
            tabs[i].css_classes.append('hidden')

    return column(
        row(selector),
        column(*tabs),
    )

layout = row(
    column(buttons),
    column(hacked_tab_group(
        ['A', 'B'],
        [p, p2]
    )),
    column(hacked_tab_group(
        ['A', 'B'],
        [p3, p4]
    ))
)

# put the button and plot in a layout and add to the document
curdoc().add_root(layout)