✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Where do I put callback functions in a multi-page app with inputs and interactive graph?

Hello beautiful community,

I am working a multi-page Dash app that take inputs from users and updates a dcc.Graph() accordingly.
I do not know where to place my callback functions.

In one file (‘app_1.py’) I have my first app’s layout.
In a second file (‘app_2.py’) I have my second app’s layout.
In a third file (‘home.py’) I have the layout for my home page.
In a fourth file (‘index.py’) I have my code linking both pages to a home page:

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 == '/':
         return home.layout
    elif pathname == '/simulation1':
         return app_1.layout
    elif pathname == '/simulation2':
         return app_2.layout
    else:
        return '404'

When I make a single page app, I usually place my callback function after my layout, but here, since my ‘index.py’ is only calling the layout, it does not retrieve the callback placed after it.

I was wondering if anyone know where I need to put my callback functions?

Thank you in advance.