plotly / plotly/dash

Error message needed if ids are not unique in multi-page apps

Open
#1,816 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P3
Dominant language
Python
Stars
24.4k
Forks
2.3k
Avg merge
2d 7h
Merged PRs (30d)
13

Description

Currently if id's in multi-page apps are not unique, and they are used as an input in a callback, the callback fails silently.

In the MWE below, it's obvious what the problem is, but in a large app, this can be difficult to debug without an error message. Only the last instance of the component with the duplicate id will trigger the callback. If you intended the callback to control the first input - everything about the callback appears to be correct. When it doesn't fire, you just need to know to look for a duplicate id somewhere in the app.

@alexcjohnson suggested the error could be caught here: https://github.com/plotly/dash/blob/dev/dash/dash-renderer/src/actions/paths.js#L23

duplicate_ids

- app.py
- pages   
   |-- page1.py
   |-- page2.py

page1.py

from dash import  html, dcc

layout = html.Div(
    [
        dcc.Link('Go to App 2', href='/pages/page2'),
        html.Div("Hello Multi-page app")
    ]
)

page2.py

from dash import Dash, dcc, html, Output, Input, callback

layout = html.Div([
    dcc.Link('Go to App 1', href='/pages/page1'),
    dcc.Input(id='input1'),
    dcc.Input(id='input1'),
    html.Div(id='output2')
])

@callback(Output('output2', 'children'), Input('input1', 'value'))
def update(value):
    return f'you have entered {value}'

app.py


from dash import Dash, dcc, html, Input, Output, callback
from pages import page1, page2

app = Dash(__name__, suppress_callback_exceptions=True)

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])


@app.callback(Output('page-content', 'children'),
              Input('url', 'pathname'))
def display_page(pathname):
    if pathname == '/pages/page1':
        return page1.layout
    elif pathname == '/pages/page2':
        return page2.layout
    elif pathname == '/':
        return page1.layout
    else:
        "404"

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the duplicate-id callback behavior described in the MWE and inspect dash-renderer/src/actions/paths.js at the linked location. Reproduce the multi-page example, then determine how the renderer should report duplicate IDs; done means the silent failure produces a useful error message for the affected callback.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, python
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.