# Complex UI with Dash and duplicate callback output errors

**URL:** <https://community.plotly.com/t/complex-ui-with-dash-and-duplicate-callback-output-errors/73175>\
**Category:** Dash Python\
**Created:** [March 1, 2023, 6:41pm UTC](https://community.plotly.com/t/complex-ui-with-dash-and-duplicate-callback-output-errors/73175 "2023-03-01T18:41:44Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![FredGR](https://avatars.discourse-cdn.com/v4/letter/f/bc79bd/32.png) [@FredGR](https://community.plotly.com/u/FredGR)\
**Post date:** [March 1, 2023, 6:41pm UTC](https://community.plotly.com/t/complex-ui-with-dash-and-duplicate-callback-output-errors/73175/1 "2023-03-01T18:41:44Z")

</div>

Hello,  
We are developping a dataviz application with Dash and our UI has many interactions so that we end up with a huge Callback with many ‘case’. We find impossible to split our callback into smaller ones mainly because of the “duplicate callback output error”.  
Is there any way (and good practice) to get around this and have a better structure code ?

Regards.

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [March 1, 2023, 7:08pm UTC](https://community.plotly.com/t/complex-ui-with-dash-and-duplicate-callback-output-errors/73175/2 "2023-03-01T19:08:44Z")

</div>

Hi @FredGR, welcome to the forums.

You could use @Emil’s `dash-extensions`:

> **[MultiplexerTransform](https://www.dash-extensions.com/transforms/multiplexer_transform)**

---

<div class="post-metadata">

**Author:** ![jcuypers](https://avatars.discourse-cdn.com/v4/letter/j/ebca7d/32.png) [@jcuypers](https://community.plotly.com/u/jcuypers)\
**Post date:** [March 1, 2023, 9:17pm UTC](https://community.plotly.com/t/complex-ui-with-dash-and-duplicate-callback-output-errors/73175/3 "2023-03-01T21:17:47Z")

</div>

Hi, I think it was also implemented very recently or planned to be part of standard dash no? ,(Multiple callback targeting the same output)

See [Duplicate Callback Outputs - Solution & API Discussion - #21 by chriddyp](https://community.plotly.com/t/duplicate-callback-outputs-solution-api-discussion/55909/21)

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [March 1, 2023, 9:29pm UTC](https://community.plotly.com/t/complex-ui-with-dash-and-duplicate-callback-output-errors/73175/4 "2023-03-01T21:29:19Z")

</div>

Yes, but it’s not yet available @jcuypers 🤞

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [March 1, 2023, 9:46pm UTC](https://community.plotly.com/t/complex-ui-with-dash-and-duplicate-callback-output-errors/73175/5 "2023-03-01T21:46:10Z")

</div>

If you dont want to wait, you can do something like this (if multiplexer is something you dont want to use):

> **[Too Many If-Elif Conditions in Python? Use Dictionaries Instead](https://betterprogramming.pub/too-many-if-elif-conditions-in-python-use-dictionaries-instead-5486299af27e?gi=3aea1addf946)**
>
> An unconventional way Python dictionaries can clean up your code

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [March 2, 2023, 11:34pm UTC](https://community.plotly.com/t/complex-ui-with-dash-and-duplicate-callback-output-errors/73175/6 "2023-03-02T23:34:23Z")

</div>

Should be out in a week or so 🙂

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [March 2, 2023, 11:38pm UTC](https://community.plotly.com/t/complex-ui-with-dash-and-duplicate-callback-output-errors/73175/7 "2023-03-02T23:38:29Z")

</div>

> [@FredGR](#):
>
> we end up with a huge Callback with many ‘case’.

As the others have mentioned, we’ll allow multiple callbacks targeting the same output soon.

In the meantime, I’d recommend breaking your long callback out into multiple functions. Here’s an example of how to organize your code:

```python
@app.callback(
    Output('graph', 'figure'),
    Input('reset', 'n_clicks'),
    Input('draw', 'n_clicks'),
    prevent_initial_call=True
)
def update_graph(b1, b2):
    triggered_id = callback_context.triggered[0]['prop_id']
    if 'reset.n_clicks' == triggered_id:
         return reset_graph()
    elif 'draw.n_clicks' == triggered_id:
         return draw_graph()

def draw_graph():
    df = px.data.iris()
    return px.scatter(df, x=df.columns[0], y=df.columns[1])

def reset_graph():
    return go.Figure()

```

You will still have the `if`/`elif` statements, but don’t include any more code within those statements than necessary… just call a separate function. This will clean up your code a fair bit. Then, if you really want to remove the `if/elif`, you’ll be able to refactor your code to this in a week or so:

```python
app = Dash( __name__ )

app.layout = html.Div([
    html.Button('Draw Graph', id='draw'),
    html.Button('Reset Graph', id='reset'),
    dcc.Graph(id='graph')
])

@app.callback(
    Output('graph', 'figure'),
    Input('draw', 'n_clicks'),
    prevent_initial_call=True
)
def draw_graph(_):
    df = px.data.iris()
    return px.scatter(df, x=df.columns[0], y=df.columns[1])

@app.callback(
    Output('graph', 'figure'),
    Input('reset', 'n_clicks'),
    prevent_initial_call=True
)
def reset_graph(_):
    return go.Figure()

app.run_server(debug=True)

```