Callback not firing - possible layout issue but how to work around it?

Dash Python
1

Hi

I have a multipage app and within the header I have a daterangepicker. I then want to access the dates selected in the daterangepicker as input to charts on each of my apps page.

App layout looks like so:

# Describe the layout/ UI of the app
app.layout = html.Div([
    html.Div([Header(app)]),
    dcc.Location(id="url", refresh=False),
    html.Div(id="page-content")
], className='page')


# Update page
@app.callback(Output("page-content", "children"), [Input("url", "pathname")])
def display_page(pathname):
    if pathname == "/page1":
        return page1.create_layout(app)
    elif pathname == "/page2":
        return page2.create_layout(app)
    elif pathname == "/page3":
        return page3.create_layout(app)
    elif pathname == "/page4":
        return page4.create_layout(app)

My DatePickerRange is populated with initial dates (e.g. last 30 days).

However, the callbacks for the charts on, say, page 1 are not fired when the page initially loads. The callbacks look like so:

@app.callback(Output('kpi_chart', 'figure'),
              [Input('date_selector', 'start_date'),
              Input('date_selector', 'end_date')])
def kpi_chart(start_date, end_date):

If I then change the date (even to same dates), the chart obviously populates. But when I navigate to another page and back again I have the same issue with the chart not rendering.

Now I suspect I’m experiencing one of the layout issues mentioned here (https://dash.plotly.com/callback-gotchas) but I’m unsure how best to work around this?

I could have a separate DateRangePicker for each page, but then the use would have to keep selecting the date range they want rather than selecting it once and applying to all pages.

Is it possible?