Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Update UI from the server

I am writing a simulation application that reads in data from a database, configures the simulation, runs it in the cloud, and then retrieves and plots the result.
It also gets notified of changes to the database so it can update the UI.
Simulation duration ranges from nearly instantaneous to multiple days.

So I’m building this dashboard app thingy for configuring the simulation and plotting the results.
Due to the wide range of simulations, I want to be able to run the UI by itself for simple simulations, in a notebook for custom scripting, or as a script that just saves the output.

The part I’m having trouble with is updating the UI when an external change happens.
All the examples I can find use client-initiated updates, like you drag a slider and that updates the plot.
In my case, the update is external, from the database or the simulation server.

When using a notebook, you can use a FigureWidget, and then when you update its data it just renders automatically. But as a standalone app it doesn’t work, it just updates the figure and never updates.

Is there a method to update the UI from the server that’s portable between an app and a notebook?

from dash import Dash, dcc, html
import plotly.graph_objects as go
from threading import Thread
from time import sleep

app = Dash(__name__)

fig = go.FigureWidget()
fig.add_scatter(y=[2, 1, 4, 3]);

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for your data.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

def update():
    sleep(5)
    print("updating")
    fig.data[0].y = [1, 6, 10, 4]


if __name__ == '__main__':
    Thread(target=update).start()
    app.run_server(debug=True)

Hi,

Welcome to the community!

I don’t have experience running apps from notebooks, so I can’t guarantee if this is a “portable” method. I think that the canonical way to deal with server side updates is via dcc.Interval (docs here). This still is driven from the clientside though.

Thanks. It’s not ideal as it adds polling overhead, but it does seem to be the only way.

Another approach could be to use websockets, but I never tried that… I believe dash-extensions has this capability and it could be worth to investigate.