Dash: Intervals not working with multi-page apps

[Mondrik]

I'm trying to create a muti-page app, one page of which queries a DB and updates plots on a defined dcc.Interval. As a single page app, the program works as expected. However, when I modify the app to the multi-page format specified at https://dash.plot.ly/urls, the terminal prints

127.0.0.1 - - [29/Jun/2018 15:25:20] "GET /apps/app1 HTTP/1.1" 200 - 127.0.0.1 - - [29/Jun/2018 15:25:27] "GET /_dash-layout HTTP/1.1" 200 - 127.0.0.1 - - [29/Jun/2018 15:25:27] "GET /_dash-dependencies HTTP/1.1" 200 - 127.0.0.1 - - [29/Jun/2018 15:25:27] "GET /favicon.ico HTTP/1.1" 200 - None 127.0.0.1 - - [29/Jun/2018 15:25:27] "POST /_dash-update-component HTTP/1.1" 200 - /apps/app1 127.0.0.1 - - [29/Jun/2018 15:25:27] "POST /_dash-update-component HTTP/1.1" 200 - /apps/app1 127.0.0.1 - - [29/Jun/2018 15:25:27] "POST /_dash-update-component HTTP/1.1" 200 - /apps/app1

the last line repeats ad infinitum at a much faster rate than the defined interval. I've made a MWE, structured in the following way:

- app.py
- index.py
- apps/
|-- __init__.py
|-- app1.py

The contents of the files are:

app.py:

import dash
from flask import Flask

server = Flask(__name__)
app = dash.Dash(server=server)
app.title = 'ATEEM'
app.config.suppress_callback_exceptions = True

index.py:

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input,Output

from app import app
from apps import app1

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

@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
        print(pathname)
        if pathname == '/apps/app1':
            return app1.layout
        else:
            return '404'

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

app1.py:

import dash
import dash_core_components as dcc
import dash_html_components as html

from app import app


layout = html.Div([
    dcc.Location(id='url', refresh=False), #represents URL bar
    dcc.Interval(id='interval-component',interval=60.*1000,n_intervals=10),  
    html.Div(id='output-block')
])

@app.callback(
    dash.dependencies.Output('output-block', 'children'),
     [dash.dependencies.Input('interval-component','n_intervals')])
def update(interval_value):
    print('Internal interval value: {}'.format(interval_value))
    return 'The interval value is: {}'.format(interval_value)

Navigating to 127.0.0.1:8050/apps/app1 will then result in nothing but a load screen and the terminal printing the message above.

Are Intervals known to work with the multi-page setup for Dash apps?

[T4rk1n]

You are updating the layout with another dcc.Location(id='url') if path == '/apps/app1', that will mount a new Location component and trigger the callback again, resulting in an infinite update loop.

[Mondrik]

Ahh, I see. Thanks!

[dilinmao]

May I know what is the solution for this problem?