Callback/update is to slow if to many components are used in one tab

Dash Python
1

Hey everyone, in my app I am using 3 Tabs and in one tab I have Checklist to control a histogram an additionally I have a lot of static Pie-Charts (30 Charts) which I create with a for loop in the div. I use a callback to change the histogram if i select some values on the checklist.

The problem is, that the reaction on my click is to slow if I include all my 30 Charts on the same tab. The Pie-Charts are static and should not change by the callback/click-event. Without all the Pie-Chars the update/reaction-on-click is really fast and with all this charts, its takes several seconds to update my Figure. It seems to me, that Dash updates all the Figures on the Tab no mater which one I really update but takes the same values for the Static-Charts. At least it explains why the reaction and my Figure update takes longer if I include more Charts in same tab.

Do you have any idea how to avoid this behavior and make the update faster if i have o use a lo of components on he same tab ?

I use:
python 3.6
0.36.0 # The core dash backend
dash-html-components==0.13.5 # HTML components
dash-core-components==0.43.0 # Supercharged components
dash-table==3.1.11 # Interactive DataTable component (new!)

2

A small reproducible code sample would help work out what’s going on :slight_smile:

3

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objs as go
from dash.dependencies import Input, Output, State

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)

number_of_static_figures = 20

def get_figure():
trace1 = go.Bar(
x=[‘giraffes’, ‘orangutans’, ‘monkeys’],
y=[20, 14, 23],
name=‘SF Zoo’
)
trace2 = go.Bar(
x=[‘giraffes’, ‘orangutans’, ‘monkeys’],
y=[12, 18, 29],
name=‘LA Zoo’
)

data = [trace1, trace2]
layout = go.Layout(barmode='group')

return go.Figure(data=data, layout=layout)

def get_figure_list(count):

figures = []
for c in range(count):
    figures.append(get_figure())

return figures

app.layout = html.Div([
dcc.Tabs(id=“tabs”, children=[
dcc.Tab(label=‘Tab one’, children=[
html.Div([
dcc.Checklist(
id=‘example_checklist’,
options=[

                    {'label': 'Montréal', 'value': 'MTL'},
                    {'label': 'San Francisco', 'value': 'SF'}
                ],
                values=['MTL', 'SF']
            ),
            dcc.Graph(
                id='example-graph',
                figure={
                    'data': [
                        {'x': [1, 2, 3], 'y': [4, 1, 2],
                            'type': 'bar', 'name': 'SF'},
                        {'x': [1, 2, 3], 'y': [2, 4, 5],
                         'type': 'bar', 'name': 'MTL'},
                    ]
                }
            ),

        html.Div(
            [html.Div([dcc.Graph(
                figure=chart,
            )],
                style={
                    'display': 'inline-block',
                    'float': 'left',
                },
            ) for chart in get_figure_list(number_of_static_figures)],
            className='eight columns',
            style={
                'width': '50%',
                'align': 'left',
            },
            id='charts',
         ),

        ])
    ]),

])

])

@app.callback(Output(component_id=‘example-graph’, component_property=‘figure’),
[Input(component_id=‘example_checklist’, component_property=‘values’)],
[State(component_id=‘example-graph’, component_property=‘figure’)]
)
def update_graph(values, curr_fig):

curr_data = curr_fig['data']
for idx in range(len(curr_data)):
    if curr_data[idx]['name'] in values:
        curr_data[idx]['visible'] = True
    else:
         curr_data[idx]['visible'] = False
curr_fig['data']=curr_data
return curr_fig

if name == ‘main’:
app.run_server(debug=True)