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

Question about Jupyter-Dash App's interaction with "global" variables

Hello! I have already created a topic about heatmap live update.

To recap: I have a dataframe that updates at a rate of a few milliseconds. I would like heatmap to display this data and update every few seconds. However, the program doesn’t work correctly and after a while I get an error Callback error updating heatmap.figure.

Initially I assumed I had written the code for the dash app wrong, but I don’t think there are any mistakes in it. Therefore, I have a question: Can this happen because the dataframe itself is updating outside of the dash app? Here is my implementation:

  1. I initially start the server with the app. At this stage data.raw_frame is empty.
# initialise dataframe and figure
fig = go.Figure(data=go.Heatmap(z=[],x=[],y=[]))
fig.update_xaxes(range=[data.x_min,data.x_max])
fig.update_yaxes(range=[data.y_min,data.y_max]) 



# Build App
app = JupyterDash(__name__)
app.layout = html.Div(
    [
        dcc.Graph(id="heatmap", figure=fig),
        dcc.Interval(id="animateInterval", interval=3*1000, n_intervals=0),
    ],
)

@app.callback(
    Output("heatmap", "figure"),
    Input("animateInterval", "n_intervals"),
)
def doUpdate(i):
    
    df = data.raw_frame.copy()
    z_val = df.heat_value
    x_val = df.x_value
    y_val = df.y_value

    return go.Figure(fig).update_traces(go.Heatmap(z=z_val,
                                                   x=x_val,
                                                   y=y_val))



app.run_server(mode="external", port=8051, debug=True)
  1. Then (in another jupyter cell) I run code that fills my dataframe within the given limits. Let it be filled with random numbers for simplicity
data.iter_setup()
 
for i in range(len(data.load)):

    data.write(load = data.load[i],
               frequency = data.frequency[i],
               response = np.random.rand())
    time.sleep(0.0001)

Thus, every iteration new values are added to the data.raw_frame, and every few seconds the App accesses this dataframe and builds a heatmap based on it. That’s why I thought, maybe the error is caused by the fact, that the dataframe is updated outside the APP?
At first I thought there couldn’t be a problem with this, since, if I understand correctly, Dash uses multithreading and it can’t be a problem for it to access any variables in the whole jupyter notebook. I would like to get your feedback on this issue.
Thank you!