NonExistentIdException when using dcc.Location and Dash_bootstrap

Dash Python
1

Hi!
I have a problem when trying to run this code:

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_reusable_components as drc

import pandas as pd
import plotly.graph_objects as go
import plotly.express as px


from preProcesadoDatos import cleansingData
from datetime import datetime as dt
from dash.dependencies import Input, Output, State

dataFrame = cleansingData()

fechaMinIngreso = dataFrame["FECHA_INGRESO"].min()
fechaMinSintomas = dataFrame["FECHA_SINTOMAS"].min()
fechaMinDefuncion = dataFrame["FECHA_DEF"].min()
fechaMaxIngreso = dataFrame["FECHA_INGRESO"].max()
fechaMaxSintomas = dataFrame["FECHA_SINTOMAS"].max()
fechaMaxDefuncion = dataFrame["FECHA_DEF"].max()

fechaMinima = min(fechaMinIngreso, fechaMinSintomas, fechaMinDefuncion)
fechaMaxima = max(fechaMaxIngreso, fechaMaxSintomas, fechaMaxDefuncion)

yearMin = fechaMinima.year
monthMin = fechaMinima.month
dayMin = fechaMinima.day

yearMax = fechaMaxima.year
monthMax = fechaMaxima.month
dayMax = fechaMaxima.day

entidades = list(dataFrame["ENTIDAD_RES"].unique())

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

navbar = dbc.NavbarSimple(
			children=[
				dbc.DropdownMenu(
					children=[
						dbc.DropdownMenuItem("Más páginas", header=True),
						dbc.DropdownMenuItem("Serie de Tiempo", href="/timeSeries"),
						dbc.DropdownMenuItem("Indicadores", href="/indicadores")
						],
					nav=True,
					in_navbar=True,
					label="Más",
					)
				],
			brand="Práctica Estadística",
    		brand_href="/timeSeries",
    		color="primary",
    		dark=True,
    	)

card_timeSeries = dbc.Card(
	[
		dbc.FormGroup([
				drc.NamedDates(
						name="Seleccionar Fechas",
						id="seleccionar-fecha",
						min_date_allowed=dt(yearMin, monthMin, dayMin),
						max_date_allowed=dt(yearMax, monthMax, dayMax),
						initial_visible_month=dt(yearMin, monthMin, dayMin),
						end_date=dt(yearMax, monthMax, dayMax),
						start_date=dt(yearMin, monthMin, dayMin))]),
		dbc.FormGroup([
				drc.NamedDropdown(
						name="Tipo de Fecha",
						id="tipo-fecha",
						options=[
							{"label":"Sintomas", "value": "FECHA_SINTOMAS"},
							{"label":"Ingreso", "value": "FECHA_INGRESO"}],
						value="FECHA_SINTOMAS")]),
		dbc.FormGroup([
				drc.NamedDropdown(
						name="Seleccionar Entidad",
						id="dropdown-entidades",
						options=drc.DropdownOptionsList(entidades),
						value=entidades[0],
						clearable=False,
						multi=True)]),
		dbc.FormGroup([
				drc.NamedDropdown(
						name="Resultado",
						id="resultado-covid",
						options=[
							{"label":"Positivo", "value":"POSITIVO SARS-COV-2"},
							{"label":"Negativo", "value":"NO POSITIVO SARS-COV-2"}],
						value="POSITIVO SARS-COV-2")])
	],
	body=True
)

layoutTime = dbc.Container(
	[
		html.H1("Series de tiempo"),
		html.Hr(),
		dbc.Row(
            [
                dbc.Col(card_timeSeries, md=4),
                dbc.Col(dcc.Graph(id="time-line"), md=8),
            ],
            align="center",
        ),
	],
	fluid=True
)

content = html.Div(id="page-content")
app.layout = html.Div([dcc.Location(id="url", href="/timeSeries", refresh=True), navbar, html.Hr(), content])

@app.callback(Output("page-content", "children"), 
			[Input("url", "pathname")])
def render_page_content(pathname):
    if pathname == "/timeSeries":
        return html.Div([layoutTime])
    elif pathname == "/indicadores":
        return html.P("Indicadores")

@app.callback(Output("time-line", "figure"),
			[Input("seleccionar-fecha", "start_date"),
			Input("seleccionar-fecha", "end_date"),
			Input("dropdown-entidades","value"),
			Input("tipo-fecha", "value"),
			Input("resultado-covid", "value")])
def updatePlot(start_date, end_date, entidad, tipo_fecha, resultado):
	if type(entidad) == str:
		entidad = [entidad]

	dataFrameRes = dataFrame[(dataFrame[tipo_fecha] >= start_date) & 
							 (dataFrame[tipo_fecha] <= end_date) &
							 (dataFrame["ENTIDAD_RES"].isin(entidad)) &
							 (dataFrame["RESULTADO"] == resultado)]

	groupData = dataFrameRes.groupby([tipo_fecha, "ENTIDAD_RES"])["ORIGEN"].count()
	groupData = groupData.reset_index()
	return px.line(groupData, 
				  x=tipo_fecha, 
				  y="ORIGEN",
				  color="ENTIDAD_RES")
app.run_server(debug=True)

When I run the code I get an Error

dash.exceptions.NonExistentIdException: 
                            Attempting to assign a callback to the
                            component with the id "time-line" but no
                            components with id "time-line" exist in the
                            app's layout.


                            Here is a list of IDs in layout:
['url', 'page-content']


                            If you are assigning callbacks to components
                            that are generated by other callbacks
                            (and therefore not in the initial layout), then
                            you can suppress this exception by setting
                            `suppress_callback_exceptions=True`.

What I’m trying to do is to create a MultiPage Dashboard. So when the user hits “indicadores” or “timeSeries” he sees other graphs and other components

2

Hello and welcome to the community !
the issue you are having is related to the fact that Dash loads the layout and callbacks when starting, and since your initial layout doesn’t have the element with id time-line yet, the exception will rise telling you that there is a missing element,
the solution is to add this before running the server :

app.config.suppress_callback_exceptions = True

Like it is presented in previous Topic

1 Like
3

This work great!
Thank you so much.