I’m developing a dashboard with Bokeh server, which should provide several different visualizations of measurement data.
The different visualizations should be managed in tabs. The last tab always allows to choose the next generated visualization tab. The visualizations are Bokeh layouts containing for example multiple Bokeh Buttons or Figures structured in sub-layouts.
My first attempt was apparently using a Bokeh Tabs object and adding new Bokeh Panels containing those layouts.
tabs.tabs.insert(-1, panel)
First of all, it’s important to know, my implementations of the visualizations need some time to be added to a layout due to the amount of elements and data (also a issue I’m working on); recognizable after adding the first visualization’s panel to the tabs object (about 10 seconds).
But if I add the next panel (a different object, but containing the same information), the loading time is approximately twice as long as before. With each new tab the loading time seams to increase linearly.
First idea: the whole tabs object is reloaded and resend to the server, if one panel is added.
So I thought about giving the tabs object a fixed amount of panels with an empty layout object and just changing the layout’s children to my visualization layouts (avoiding a change of the list of tabs): the same problem occurred.
But all in all I think there should be a way, which allows that kind of flexibility.
I work with PyCharm so I debugged my python code and there is no long loading time in Python. In addition the browser stops working after some panels are added, so the problem has to be related to JavaScript or the transition from Python to JavaScript.
Side information: using empty or light weight layouts is proving the general concept, although the loading times may increase linearly too (0*0=0 ;D).
So now I have a few questions:
- Any suggestions for a reason?
- Could there be a easy JavaScript fix (I do not know much about it) I can implement, because it’s a bug or a new feature?
- How can I investigate further which information and data is sent from Python to JavaScript?
- Where can I find the code of that transition, because I didn’t get how a Python object is transmitted to a JavaScript object yet (didn’t find it in the Docs)?
- Why is It inefficient to add just 10 layouts stacked in each other containing no more information (maybe that is worth a new topic)?
Hopefully, that was detailed enough. I can submit some code later, but I thought, it’s more a general question. Thank you.