KeyError: "Callback function not found for output '..xid_selections.options...center_selections.options..', perhaps you forgot to prepend the '@'?"

After I added the third output for modal-simple, I started to see this error “Callback function not found for output ‘…xid_selections.options…center_selections.options…’, perhaps you forgot to prepend the ‘@’?”. I’m trying to use this callback to populate the children of dmc.Modal which contains dbpc.Tree component.

dbc.Spinner([
            dbc.Row([
                #dbc.Col(html.P("XID: ",className='mt-3',style={'font-weight':10,'margin-inline-start':100}),width='1'),
                dbc.Col([xid_text := dcc.Dropdown(id = 'xid_selections',
                                                    placeholder='Type A XID', 
                                                    className = 'ms-5 me-2 mt-2',
                                                    multi=True)
                        ],width='4'),
                #dbc.Col(html.H4("Cost Center: ",className='mt-3',style={}),width='1'),
                dbc.Col([center_code_text := dcc.Dropdown(id = 'center_selections',
                                                            placeholder='Type A Cost Center', 
                                                            className = 'me-2 mt-2',
                                                            multi=True)
                        ],width='4'),
                dbc.Col([oracle_submit_button := dmc.Button("Submit", className = 'mt-2')
                        ],width='3')
            ],className='mt-2'),
            dbc.Row([
                dbc.Col(dmc.Button("Hierarchy Browser", id="modal-demo-button"),width='2'),
                dmc.Modal(
                    title="Total Center Hierarchy",
                    id='modal_simple'
                )
            ],className='mt-3 ms-3')
        ],color='primary',fullscreen=True),
@callback(
    [Output('xid_selections', 'options'),
    Output('center_selections', 'options'),
    Output('modal_simple', 'children')],
    Input('url', 'pathname')
)
def initialize_selectors(pathname):
    print(pathname)
    if pathname == '/report':
        print(pool.busy)
        print(os.getpid(), 'Getting XIDS...')
        xid_selections = get_all_xids()
        print('Getting Centers...')
        center_selections = get_all_centers()
        print('Getting center hierarchy...')
        center_hier = get_center_hier()
        print('DONE!')
        modal_simple = \
        dbpc.Tree(
            id='center_tree',
            contents=center_hier
        ),
        dmc.Space(h=20),
        dmc.Group(
            [
                dmc.Button("Submit", id="modal-submit-button"),
                dmc.Button(
                    "Close",
                    color="red",
                    variant="outline",
                    id="modal-close-button",
                ),
            ],
            justify="flex-end",
        )
        return xid_selections, center_selections, modal_simple
    raise PreventUpdate

Also, when I update the code to comment out modal_simple and the output for modal_simple then the app works as expected. So it seems to have something to do with this output.

@callback(
    [Output('xid_selections', 'options'),
    Output('center_selections', 'options')],
    **#Output('modal_simple', 'children')],**
    Input('url', 'pathname')
)
def initialize_selectors(pathname):
    print(pathname)
    if pathname == '/report':
        print(pool.busy)
        print(os.getpid(), 'Getting XIDS...')
        xid_selections = get_all_xids()
        print('Getting Centers...')
        center_selections = get_all_centers()
        print('Getting center hierarchy...')
        center_hier = get_center_hier()
        print('DONE!')
        modal_simple = dbpc.Tree(
            id='center_tree',
            contents=center_hier
        ),
        dmc.Space(h=20),
        dmc.Group(
            [
                dmc.Button("Submit", id='modal-submit-button'),
                dmc.Button(
                    "Close",
                    color="red",
                    variant="outline",
                    id='modal-close-button',
                ),
            ],
            justify="flex-end",
        )
        return xid_selections, center_selections **#, modal_simple**
    raise PreventUpdate

this your definition of modal_simple

What about the rest?

What do you mean by the rest? The other two outputs are there too. Can you be more specific?

So my guess is, that you forgot brackets at some point.

1 Like
@callback(
    Output('xid_selections', 'options'),
    Output('center_selections', 'options'),
    Output('modal_simple', 'children'),
    Input('url', 'pathname')
)
def initialize_selectors(pathname):
    print(pathname)
    if pathname == '/report':
        print(pool.busy)
        print(os.getpid(), 'Getting XIDS...')
        xid_selections = get_all_xids()
        print('Getting Centers...')
        center_selections = get_all_centers()
        print('Getting center hierarchy...')
        center_hier = get_center_hier()
        print('DONE!')
        modal_simple = \
        [dbpc.Tree(
            id='center_tree',
            contents=center_hier
        ),
        dmc.Space(h=20),
        dmc.Group(
            [
                dmc.Button("Submit", id='modal-submit-button'),
                dmc.Button(
                    "Close",
                    color="red",
                    variant="outline",
                    id='modal-close-button',
                ),
            ],
            justify="flex-end",
        )]
        return xid_selections, center_selections, modal_simple 
    raise PreventUpdate

Good catch. I updated with brackets but I’m still seeing the same error.

It’s hard to help you any further. Could you provide an example to reproduce the error on our side?

Sure, I’ll whittle it down and share it soon…

So I simplified the code but could not replicate the error. It still does not populate the Hierarchy Browser modal like I would expect so maybe solving for this will still fix the error I’m experiencing.

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

import dash_mantine_components as dmc

import dash_bootstrap_components as dbc

_dash_renderer._set_react_version("18.2.0")

from dash_iconify import DashIconify

import dash_blueprint_components as dbpc

from dash.exceptions import PreventUpdate

app = Dash()

center_hier = [
    {'id': 'G00000', 
    'label': 'G00000', 
    'hasCaret': 1, 
    'icon': 'folder-close', 
    'childNodes': [
        {'id': 'G11111', 
        'label': 'G11111', 
        'hasCaret': 1, 
        'icon': 'folder-close', 
        'childNodes': [
            {'id': 'G22225', 
            'label': 'G22225', 
            'hasCaret': 1, 
            'icon': 'folder-close', 
            'childNodes': [
                {'id': 'G22222', 
                'label': 'G22222', 
                'hasCaret': 1, 
                'icon': 'folder-close', 
                'childNodes': [
                    {'id': 'G33333', 
                    'label': 'G33333', 
                    'hasCaret': 1, 
                    'icon': 'folder-close', 
                    'childNodes': [
                        {'id': 'G11222', 
                        'label': 'G11222', 
                        'hasCaret': 1, 
                        'icon': 'folder-close', 
                        'childNodes': [
                            {'id': 'G11233', 
                            'label': 'G11233', 
                            'hasCaret': 1, 
                            'icon': 'folder-close', 
                            'childNodes': [
                                {'id': 'G11255', 
                                'label': 'G11255', 
                                'hasCaret': 1, 'icon': 'folder-close', 
                                'childNodes': [
                                    {'id': '110555', 
                                    'label': '110555', 
                                    'hasCaret': 0, 
                                    'icon': 'document'}, 
                                    {'id': '110222', 
                                    'label': '110222', 
                                    'hasCaret': 0, 
                                    'icon': 'document'}
                                ]}]}]}]}]}]}]}]}]

app.layout = \
dmc.MantineProvider([
    dmc.AppShell([
        dmc.AppShellMain([
            dbc.Row([
                dbc.Col([xid_text := dcc.Dropdown(id = 'xid_selections',
                                                    placeholder='Type A XID', 
                                                    className = 'ms-5 me-2 mt-2',
                                                    multi=True)
                        ],width='4'),
                dbc.Col([center_code_text := dcc.Dropdown(id = 'center_selections',
                                                            placeholder='Type A Cost Center', 
                                                            className = 'me-2 mt-2',
                                                            multi=True)
                        ],width='4'),
                dbc.Col([oracle_submit_button := dmc.Button("Submit", className = 'mt-2')
                        ],width='3')
                ],className='mt-2'),
            dbc.Row([
                dbc.Col(dmc.Button("Hierarchy Browser", id="modal-demo-button"),width='2'),
                dmc.Modal([
                    # dbpc.Tree(
                    #     id='center_tree',
                    #     contents=center_hier
                    # ),
                    # dmc.Space(h=20),
                    # dmc.Group([
                    #     dmc.Button("Submit", id='modal-submit-button'),
                    #     dmc.Button(
                    #         "Close",
                    #         color="red",
                    #         variant="outline",
                    #         id='modal-close-button',
                    #     )
                    # ],justify="flex-end")
                ], title="Total Center Hierarchy", id='modal_simple'),
            ],className='mt-3 ms-3'),
            dcc.Location(id='url')
        ])
    ])
])

@app.callback(
    Output('xid_selections', 'options'),
    Output('center_selections', 'options'),
    Output('modal_simple', 'children'),
    Input('url', 'pathname')
)
def initialize_selectors(pathname):
    global center_hier
    print(pathname) 
    if pathname == '/':
        #print(pool.busy)
        #print(os.getpid(), 'Getting XIDS...')
        xid_selections = ['123456','567895']#get_all_xids()
        print('Getting Centers...')
        center_selections = ['555555','444444']#get_all_centers()
        print('Getting center hierarchy...')
        contents = center_hier
        print('DONE!!!!!!')
        print(contents)
        modal_simple = [dbpc.Tree(
            id='center_tree',
            contents=contents
        ),
        dmc.Space(h=20),
        dmc.Group(
            [
                dmc.Button("Submit", id='modal-submit-button'),
                dmc.Button(
                    "Close",
                    color="red",
                    variant="outline",
                    id='modal-close-button',
                )
            ],
            justify="flex-end",
        )]
        return xid_selections, center_selections, modal_simple 
    raise PreventUpdate

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

I was able to get it working by populating the contents of the tree directly with the get_center_hier() function. This works but isn’t ideal because I would like to get it working with a callback and leverage the long_callback functionality since the function takes over 30 seconds to return data.

I might just tag this as the solution if there are no other responses by the end of the week…

dbc.Row([
                dbc.Col(dmc.Button("Hierarchy Browser", id="modal-demo-button"),width='2'),
                dmc.Modal([
                        dbpc.Tree(
                            id='center_tree',
                            contents=get_center_hier()
                        ),
                        dmc.Space(h=20),
                        dmc.Group(
                        [
                            dmc.Button("Submit", id='modal-submit-button'),
                            dmc.Button(
                                "Close",
                                color="red",
                                variant="outline",
                                id='modal-close-button',
                            )
                        ],
                        justify="flex-end"
                        )
                    
                    ], title="Total Center Hierarchy", id='modal_simple'),
            ],className='mt-3 ms-3')

might be similar to this issue. I’m also using Gunicorn with multiple workers. I ran into a similar problem again when trying to do three outputs and the same error occurred. My workaround has been using set_prop when using more than 2 outputs in a callback. I’m currently using Dash 2.18.1