Bokeh app with multiple pages/tabs/modes

pepijndevos · January 20, 2022, 3:51pm

I am building a simulator interface, where the user can select a type of simulation, configure all the parameters, and then run it and inspect the results.

The “inspect results” is very typical Bokeh fare, but all the examples in the gallery I’ve seen are a single pages with a static set of controls.

Here, I need to at least be able to change the controls depending on the selected simulation, but because there are a lot of parameters and simulations can be quite long-running I’m also considering to implement it more as a wizard where the “run” button takes you to a different view.

But for simplicity I could just have sections on a single page, also makes it easy to interactively change things. So then the main thing is dynamically updating the set of controls. Is that something that can be done?

Bryan · January 20, 2022, 6:03pm

Currently, it is possible to run multiple separate apps at different endpoints. There is no mechanism to have a single app handle multiple endpoints. So, you would need to run multiple apps and allow them to communicate relevant state to one another (lots of ways this could be done, e.g. through a database, depends on your needs).

pepijndevos · January 26, 2022, 2:07pm

I found there is a Tabs widget that is very close to what I need. Maybe it would be possible to add a similar Wizard component that has next and back buttons instead of tabs?

Or as some UI frameworks have: a stacked panel without built-in tabs UI. You can then build a tabs widget out of it by binding a RadioButtonGroup to it for example.

I found the Python code and the TypeScript code, but I’m not sure what the correct procedure would be to add a new component.

github.com

bokeh/bokeh/blob/branch-3.0/bokehjs/src/lib/models/layouts/tabs.ts

import {Grid, ContentBox, Layoutable, Sizeable} from "core/layout"
import {div, position, size, scroll_size, show, hide, display, undisplay, children} from "core/dom"
import {sum, remove_at} from "core/util/array"
import {clamp} from "core/util/math"
import {Location} from "core/enums"
import * as p from "core/properties"

import {LayoutDOM, LayoutDOMView} from "./layout_dom"
import {Panel} from "./panel"

import tabs_css, * as tabs from "styles/tabs.css"
import buttons_css, * as buttons from "styles/buttons.css"
import caret_css, * as caret from "styles/caret.css"

export class TabsView extends LayoutDOMView {
  override model: Tabs

  protected header: Layoutable

  protected header_el: HTMLElement

This file has been truncated. show original

The simplest way I can think of is to add tab_location=None option to Tabs so that you can add your own UI for the actual tabs.

system · April 26, 2022, 2:07pm

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.