How can I have a same callback use different Input, Output and State arguments

Dash Python
1 
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__)

plot_layout={'title': {'text': 'Empty graph'},
             'xaxis': {'title': {'text': 'time, s'}},
             'yaxis': {'title': {'text': 'Variable, unit'}}}

display = [True, False, False]
default_display_return = [{'display': 'block'}, {'display': 'none'}, {'display': 'none'}]


app.layout = html.Div(children=[
    
    html.Div(id='input-div', children=[
        html.Div(id='input-level-1', children=[
            html.Div(children = [
                html.Button('new plot', id='new-plt', n_clicks=0),
            ]),
        ]),
        html.Div(id='div-1', children=[
            html.Button('🗑️', id='delete-btn-1', n_clicks=0),
            dcc.Dropdown(id='dropdown-1',options=[],multi=True,value=[]),
            dcc.Graph(id='graph-1', figure=dict(data=[],layout=plot_layout), animate=True),
        ]),
        html.Div(id='div-2', children=[
            html.Button('🗑️', id='delete-btn-2', n_clicks=0),
            dcc.Dropdown(id='dropdown-2',options=[],multi=True,value=[]),
            dcc.Graph(id='graph-2', figure=dict(data=[],layout=plot_layout), animate=True),
        ]),
        html.Div(id='div-3', children=[
            html.Button('🗑️', id='delete-btn-3', n_clicks=0),
            dcc.Dropdown(id='dropdown-3',options=[],multi=True,value=[]),
            dcc.Graph(id='graph-3', figure=dict(data=[],layout=plot_layout), animate=True),
        ]),
    ]),
    
    dcc.Interval(id='interval-component',interval=1*1000)
])


@app.callback([Output('div-1', 'style'),
                Output('div-2', 'style'),
                Output('div-3', 'style')],
              [Input('new-plt', 'n_clicks'),
                Input('delete-btn-1', 'n_clicks'),
                Input('delete-btn-2', 'n_clicks'),
                Input('delete-btn-3', 'n_clicks')], 
              prevent_initial_call=True)
def display_graph(new_plot, del1, del2, del3):
    source = dash.callback_context.triggered[0]['prop_id'].split('.')[0] 
   
    if source == 'new-plt':
        graph_idx = display.index(False)
        default_display_return[graph_idx] = {'display': 'block'}
        display[graph_idx] = True

        return default_display_return
    else:
        del_idx = int(source[-1]) - 1
        default_display_return[del_idx] = {'display': 'none'}
        display[del_idx] = False

        return default_display_return

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

As you can see from this code, the callback has a lot of inputs and outputs. This gets worse when I have more HTML.Div(s)… let’s say about 100.

Suppose I want to plot lines in the graph contained in the 56th div. How can I have a single callback do that and not feed it a huge list of arguments of all the 100 different graphs?

Is there any way I can prepare a custom argument list targeting only one specific div, instead of feeding all 100 id(s) associated with 100 different div(s) even though they are supposed to perform the same function?

2

Hi,

Please take a look on the examples of pattern matching callback:

https://dash.plotly.com/pattern-matching-callbacks