Announcing Dash Bio 1.0.0 πŸŽ‰ : a one-stop-shop for bioinformatics and drug development visualizations.

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

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?

Hi,

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

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