I am constructing multipage dash app. I want to update second page based on first page dropdown. When I select dropdown value from first page then it should populate into my second page. Now, what I have observed is that, some of the time it works but again if I try next time then it does not work. Please help me.
app.py
import dash
# meta_tags are required for the app layout to be mobile responsive
app = dash.Dash(__name__, suppress_callback_exceptions = True,
meta_tags = [{'name' : 'viewport',
'content': 'width=device-width, initial-scale=1.0'}]
)
server = app.server
index.py
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from flask import after_this_request
from apps import home, report
from app import app
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 == '/apps/home'):
return home.layout
if (pathname == '/apps/report'):
return report.layout
else:
return '404'
if __name__ == '__main__':
app.run_server(debug = True)
apps/home.py
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_daq as daq
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
from dash.dependencies import Input, Output, State
from app import app
from data.database_connection import FetchData
from data.fetch_log_file import fetch_filelist
fetch_data = FetchData()
filename = fetch_filelist()
data = []
all_thermocouple = ["thermocouple_1", "thermocouple_2", "thermocouple_3", "thermocouple_4", "thermocouple_5",
"thermocouple_6", "thermocouple_7", "thermocouple_8", "thermocouple_9", "thermocouple_10",
"thermocouple_11", "thermocouple_12"]
default_graph_data = {
'data': [go.Scatter(
x = [1, 2, 3, 4],
y = [5, 5, 5, 5],
mode = 'lines')
]
}
thermocouple_list = [{'label': 'All', 'value': 'All'},
{'label': 'Thermocouple 1', 'value': 'thermocouple_1'},
{'label': 'Thermocouple 2', 'value': 'thermocouple_2'},
{'label': 'Thermocouple 3', 'value': 'thermocouple_3'},
{'label': 'Thermocouple 4', 'value': 'thermocouple_4'},
{'label': 'Thermocouple 5', 'value': 'thermocouple_5'},
{'label': 'Thermocouple 6', 'value': 'thermocouple_6'},
{'label': 'Thermocouple 7', 'value': 'thermocouple_7'},
{'label': 'Thermocouple 8', 'value': 'thermocouple_8'},
{'label': 'Thermocouple 9', 'value': 'thermocouple_9'},
{'label': 'Thermocouple 10', 'value': 'thermocouple_10'},
{'label': 'Thermocouple 11', 'value': 'thermocouple_11'},
{'label': 'Thermocouple 12', 'value': 'thermocouple_12'}]
layout = html.Div(
id = 'main',
children = [
html.Div(
id = 'first_row',
children = [
html.Div(
id = 'filename_grp',
children = [
dbc.FormGroup(
children = [
dbc.Label(
children = "Filename",
),
dcc.Dropdown(
id = "filename_dropdown",
options = [
dict(
label = i,
value = i
) for i in filename
],
className = "dropdown_element",
multi = True
)
]
)
]
),
html.Div(
id = 'thermocouple_grp',
children = [
dbc.FormGroup(
children = [
dbc.Label(
children = "Thermocouple",
),
dcc.Dropdown(
id = "thermocouple_dropdown",
options = thermocouple_list,
className = "dropdown_element",
multi = True
)
]
)
]
),
html.Div(
id = "graph_btn",
children = [
dbc.Button(
id = 'generate_graph',
children = "Generate Graph",
outline = True,
className = "mr-1"
)
]
),
html.Div(
id = "bool_switch",
children = [
daq.BooleanSwitch(
id = 'toggle_switch',
on = True,
# label="Extended Report",
# labelPosition="right"
)
]
),
html.Div(
id = "report_btn",
children = [
dbc.Button(
id = 'generate_report',
children = "Generate PDF Report",
outline = True,
className = "mr-1",
href = '/apps/report'
)
]
)
]
),
html.Div(
id = 'second_row',
children = [
html.Div(
id = 'graph_div',
children = [
dcc.Graph(
id = 'Line_Chart',
figure = default_graph_data
)
]
)
]
)
]
)
@app.callback(
output = Output(
component_id = 'Line_Chart',
component_property = 'figure'
),
inputs = [
Input(
component_id = 'generate_graph',
component_property = 'n_clicks'
)
],
state = [
State(
component_id = 'filename_dropdown',
component_property = 'value'
),
State(
component_id = 'thermocouple_dropdown',
component_property = 'value'
)
]
)
def output(n_clicks, filename, thermocouple):
# print(n_clicks)
if n_clicks is None:
return default_graph_data
else:
if not filename or not thermocouple:
return None
is_all_thermocouple = False
for thercple in thermocouple:
if (thercple == 'All'):
is_all_thermocouple = True
if is_all_thermocouple:
list_of_thermocouples = all_thermocouple.copy()
else:
list_of_thermocouples = thermocouple.copy()
# print('list_of_thermocouples: ' + str(list_of_thermocouples))
fetch_filename_query = f"""
SELECT X.*, Y.*
FROM public.filename X
INNER JOIN public.temperature_log Y ON X.id = Y.filename_id
WHERE X.filename IN ({', '.join("'{}'".format(t) for t in filename)});
"""
# print(fetch_filename_query)
filename_data = fetch_data.query_data(fetch_filename_query)
filename_data["timeindex"] = filename_data["timeindex"].apply(
pd.to_numeric)
filename_data[all_thermocouple] = filename_data[all_thermocouple].apply(
pd.to_numeric)
# print(filename_data.info())
filename_data = filename_data.sort_values(by = ['timeindex', 'temperature_step'],
axis = 0).reset_index(
drop = True)
# filename_data.to_csv("test.csv", index = 'False')
data = []
for index, value in enumerate(filename):
each_filename_data = filename_data[filename_data['filename'] == value]
# each_filename_data['sum'] = each_filename_data[each_filename_data[list_of_thermocouples] == 0].sum(
# axis=1)
# each_filename_data = each_filename_data[each_filename_data['sum'] <= 4]
each_filename_data = each_filename_data.drop_duplicates(
subset = ["filename", "timeindex"])
# each_filename_data.to_csv("test.csv", index='False')
# print(each_filename_data.columns)
product_plot_trace = [go.Scatter(
x = each_filename_data['timeindex'],
y = each_filename_data[i],
mode = 'lines',
name = i,
text = i
) for i in list_of_thermocouples]
data = data + product_plot_trace
fig = {
'data' : data,
'layout': go.Layout(
title = 'Product Quality Curve',
xaxis = dict(
title = 'Timeindex'
),
yaxis = dict(
title = 'Temperature'
),
hovermode = 'closest'
)
}
return fig
apps/report.py
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
from app import app
df = pd.DataFrame(
{
"First Name": ["Arthur", "Ford", "Zaphod", "Trillian"],
"Last Name" : ["Dent", "Prefect", "Beeblebrox", "Astra"],
}
)
layout = html.Div([
dcc.Link('Go to home', href = '/apps/home'),
html.Div(
id = 'sample_table',
children = [
dbc.Table.from_dataframe(df, striped=True, bordered=True, hover=True)
]
),
html.Div(
id = 'test_sample'
)
])
@app.callback(
output = Output(
component_id = 'test_sample',
component_property = 'children'
),
inputs = [
Input(
component_id = 'generate_report',
component_property = 'n_clicks'
),
Input(
component_id = 'filename_dropdown',
component_property = 'value'
)
]
)
def display_page(n_clicks, file):
# print(file)
if n_clicks is None:
raise PreventUpdate
else:
return f"You have selected {file}"
You can ignore data because data is correct. Only filename selected from filename_dropdown is not updating in app/report page. Please help me.