Library for (web based?) GUI that can show widgets, graphs and update information?

Is there a library which would make it easy to implement a GUI which allows me to do the following:

    1. buttons, sliders and other widgets to control my program
    1. dynamically update the text / information shown in the GUI (e.g. show messages from a thread/process running concurrently)
    1. important: show interactive graphics that allow to show e.g. multivariate time series, select a time range and use that selected range for processing in the program

I am currently using Plotly Dash, which allows me to do 3, but the design of that library is otherwise really clumsy to use for anything more “GUI-like”. It is not meant as a single-user app and the basic design is stateless, all processing has to happen in callbacks which must have an input and output and can only send to one output etc.

The other library which seems to be nice for GUI is kivy, but I do not think it is possible there to deal with stuff like plotly (or holoviews) graphs which are basically HTML+Javascript which interact with a python backend for the interactivity.

I think it may be possible to achieve something similar to what I need with jupyter notebooks and jupyter widgets, but that is not a very user-friendly way to use a GUI for non-programmer users.

Is there something obvious which I am missing?

You might want to have a look at Bokeh:

And specifically Bokeh server applications:

Of which there are several examples deployed to a demo site: https://demo.bokeh.org/

Disclaimer: I am a core team contributor to Bokeh.

There are also higher level tools built on top of Bokeh, e.g. Panel (by the same team that created Holoviews): https://panel.holoviz.org/ The Panel/Holoviz team is also pushing very much into the python-wasm space that should one day afford the ability to deploy lots of these kinds of apps as standalone HTML pages.

1 Like

Thank you Bryan,
bokeh is excellent
I develop Earthquake Prediction System based on Precognition and live data fed from seismographs world-wide

I need Python tools to build 3D Earth’s Globe to be fed with earthquake data from USGS and other sources via API, once known from Google Maps - my maps.

3D visualization, transparent Earth’s surface layer is a must to see through

I need to inject fault lines data for such visualization as solid rock objects
to calculate delays of quake signals, recorded by digital seismographs world-wide, since distance doesn’t match delay.

Let me know what can be done with your bokeh ?

thank you

darius

This requirement was missing from the OP. Bokeh is geared for 2D datavis, so it may not be the best choice, at least all on its own. Panel/Holoviews may be some help here since they can also incorporate MPL, Bokeh together in the same output. If there is some specific, existing JS library for the kind of 3D output you need, then there is also the possibility of creating a Custom Extension for Bokeh, but that is a fairly advanced topic.

Thanks! I actually know (well, heard of Bokeh) but I am not sure if it solves the actual problem I have, which is the GUI that contains some kind of interactive graphics.
I should maybe be more precise about what I mean by “interactive graphics” and GUI:

Interactive graphics: show some data in the GUI (web page?) in a way where the selections/interactions with the data get sent back to a running python program. So e.g. if I select a time range in a time series graph, there should be a callback in the python program that gets invoked whenever the selected range changes.
So interactive graphics does NOT mean, uploading the data and the widgets to the web page and then having all the interactivity run in javascript. I need the feedback back to the python code from the figure.
It should also be possible to do do other direction - for the graph to get updated from the Python program without a callback: e.g. a thread running in the program which updates where in the graph a line is drawn. This would happen without any “trigger” from the user.

GUI: additional widgets like sliders, buttons, text areas and text output areas where the interaction triggers callbacks in Python and where Python code can update the information (e.g. a thread showing some status messages in a designated area)

I have tried to achieve this with plotly and plotly dash so far. However the architecture of Dash is extremely limited as any interaction between the web page and the Python program needs to be done via callbacks and those callbacks always need a trigger, and no two callbacks can send data to the same output.

I am not sure in what way the interactive graphs architecture differs between Bokeh and Plotly, but the real problem where I hit a wall so far is embedding the interactive graph in a rich gui which also supports all that other stuff I mentioned.

[Sorry, missed that the earlier reply was a different person and not you]

@johsmi9933 Please check out the examples and linked code at the demo site I have linked above. All of those are Bokeh server applications, which means that plot interactions and UI events trigger Python callbacks in the Bokeh server that is running the app code.

It should also be possible to do do other direction - for the graph to get updated from the Python program without a callback

You might also want to check out these examples locally (they are in the repo but not hosted on the demo site):

I guess the thing to be aware of is that generally Bokeh server applications must be run by the Bokeh server (in pretty much the same way that Jupyter notebooks are run by jupyter notebook or jupypter-lab):

bokeh serve <options> app.py
1 Like

Thank you - I guess it means I have to re-learn how to create the kinds of plots I need with Bokeh and how to interact with the plot e.g. to select the time range.
I will definitely have a look at some of those examples!
Might I just ask you where to look for getting started on the main kind of plot I need:
several stacked line or scatter plots which share the same x-axis but each have their own y axis and where I can use a slide widget to zoom in and scroll within the plot (it is similar to a time series with several tens of thousands of points which could eventually become millions. Plotly supports sampling using the plotly-resampling library if the number of data points becomes so large that the browser would get overwhelmed).
Here is a screenshot to make it easier to understand what i am babbling about:

Bokeh has a RangeTool

Bokeh does not do any sort of automatic or range-based down-sampling, but you could certainly use the range events from a RangeTool to perform your own downsampling in Python or JavaScript callbacks. Alternatively, Holoviews has Bokeh+Datashader integration at a higher level and will do range-based sever-side rendering of large datasets.

1 Like

Thanks - I am not sure though how to achieve a plot with stacked time-series which share the x-axis but have separate y axes and where the ReaneTool manupulates all the stacked graphs at the same time.
Is there an example somewhere how to achieve this?

I have tried to figure this out before but could not find anyone with a solution.

I also tried to consider running the original Plotly graph in Panel instead, which would be a great solution if it works, but unfortunately it is apparently not possible to show a Plotly FigureWidget in Panel.

It is possible to show a Plogly FigureWidget in Voila, but unlike Panel, Voila is restricted to serving notebooks only which restricts the use quite significantly (e.g. no way to pass on command line arguments).

All in all though I probably will have to stick with Plotly graphs since it does not seem to be possible to achieve the same with Bokeh or hvplot and stick with Voila since it is not possible to show an interactive Plotly FigureWidget in Panel or Bokeh server and since what I need does not really work in Plotly Dash either.

Try
2D Matplotlib solution for my project

http://mpld3.github.io/examples/html_tooltips.html

http://mpld3.github.io/examples/

http://mpld3.github.io/index.html

I build Knowledge Visualization Tool for 1,000+ Tab open in Firefox

darius

1 Like