Clientside callback to update figure not working

Brent · May 22, 2023, 7:51pm

I am trying to have a clientside callback update a graph figure to make it faster. I am getting an error:
dc[namespace] is undefined. What am I doing wrong? Here is a minimal dash program:

#!/usr/bin/env python3
"""Minimal dash program."""

from dash import callback, Dash, dcc, html, Input, Output
import dash_bootstrap_components as dbc
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP], suppress_callback_exceptions=True)

app.layout = dbc.Container([dcc.Location(id='url'),
                            dbc.Card([dbc.CardBody([html.Div(id='page-content')])]),
                            dcc.Store(id='graph-store')])

@callback(Output('page-content', 'children'),
          Output('graph-store', 'data'),
          Input('url', 'pathname'))
def render_page_content(pathname):
    dataframe = pd.DataFrame({'x': [1, 3, 5], 'y': [2, 4, 6]})
    figure = px.line(dataframe, x='x', y='y')
    return dbc.Card(dbc.CardBody([dcc.Graph(id='graph', figure=go.Figure()),
                                  dcc.RangeSlider(1, 5, value=[1, 5], id='range-slider')])), figure

app.clientside_callback(
    """
    function(range, fig) {
        new_fig = JSON.parse(JSON.stringify(fig))
        new_fig['layout']['xaxis']['range'] = range
        new_fig['layout']['xaxis']['autorange'] = false
        return new_fig
    }
    """,
    Output('graph', 'figure'),
    Input('range-slider', 'value'),
    Input('graph-store', 'data'),
    prevent_initial_call=True)


if __name__ == '__main__':
    app.run_server(debug=True)

AIMPED · May 22, 2023, 8:19pm

HI @Brent,

your code works fine on my side.

dash 2.9.0
plotly 5.14.1
python 3.10.4
Linux

Brent · May 22, 2023, 8:39pm

That is interesting. Here is my setup.

dash 2.9.3
plotly 5.14.1
python 3.11.2
Debian GNU Linux

Here is the Error I am getting:

This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)

_callee3$@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:580:13

tryCatch@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:411:2404

wrap/generator._invoke</<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:411:1972

defineIteratorMethods/</<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:411:3255

asyncGeneratorStep@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:415:103

_next@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:416:212

_asyncToGenerator/</<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:416:369

_asyncToGenerator/<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:416:97

handleClientside@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:532:28

_callee2$@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:943:24

tryCatch@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:411:2404

wrap/generator._invoke</<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:411:1972

defineIteratorMethods/</<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:411:3255

asyncGeneratorStep@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:415:103

_next@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:416:212

_asyncToGenerator/</<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:416:369

_asyncToGenerator/<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:416:97

__execute@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:1107:22

executeCallback@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:1111:25

_callee2$/<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:2206:93

_map@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:85001:19

map@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:87605:74

_dispatchable/<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:84160:15

f2@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:83988:14

_callee2$@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:2205:315

tryCatch@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:2128:2404

wrap/generator._invoke</<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:2128:1972

defineIteratorMethods/</<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:2128:3255

asyncGeneratorStep@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:2136:103

_next@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:2137:212

_asyncToGenerator/</<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:2137:369

_asyncToGenerator/<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:2137:97

observer@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:2261:24

StoreObserver/</<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:355:9

forEach@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:81582:7

_checkForMethod/<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:83732:119

f2@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:83988:14

StoreObserver/<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:353:51

dispatch@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:76197:7

middleware/</<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:75867:16

_callee$@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:2499:23

tryCatch@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:2285:2404

wrap/generator._invoke</<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:2285:1972

defineIteratorMethods/</<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:2285:3255

asyncGeneratorStep@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:2289:103

_next@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684766408.dev.js:2290:212

RenaudLN · May 22, 2023, 9:55pm

Try to refresh the page, clientside callbacks written inline are currently not updated on hot reloads.

It should also work next time you start your app.

AIMPED · May 23, 2023, 8:39am

I tried with dash 2.9.3, no errors.

Brent · May 23, 2023, 12:17pm

I’m guessing it might be Firefox causing the issue. I am using Firefox 102.9.0esr on Debian GNU/Linux. This is a remote machine I am using x2go to get to and firefox is the only browser I have been able to get to work this way. I think I am going to have to go back to a regular callback anyway as the graphs I am generating are too big to use with the store and clientside callback.

Topic		Replies	Views
Clientside callback to filter data and update graph Dash Python question	3	2190	August 11, 2022
Clientside_callback doesn't update dcc.Graph Dash Python	6	804	November 30, 2021
Clientside and figure update Dash Python	2	201	April 1, 2024
Callback Error when updating dcc.graph 📊 Plotly Python	0	605	August 5, 2021
Updating plotly express imshow data in clientside callback Dash Python question	8	1967	September 29, 2022

Clientside callback to update figure not working

Related topics