Hi all,
I would like to change the layout of the page depending on some type of user selection, perhaps a dropdown or radio selections. For instance, in the code below, I have five dropdowns, whose options are progressively filtered based on the value selected in the dropdown above it. Here, the filtering begins at the “pest_order” dropdown and ends at the “host_determination” dropdown. Would it be possible to both restructure the layout and the dropdown chain so that “host_determination” appears above “pest_order” and is first in the filtering hierarchy? Could I do this with a dash component, like a dropdown/radio buttons or would it be more feasible to just have a different page for each layout? Thanks.
aphid = pd.read_pickle("./output_files/aphid.pkl")
# define pull down options
pest_order = sorted([i for i in aphid['Pest order'].unique() if i == i])
pest_family = sorted([i for i in aphid['Pest family'].unique() if i == i])
pest_genus = sorted([i for i in aphid['Pest genus'].unique() if i == i])
pest_species = sorted([i for i in aphid['Pest species'].unique() if i == i])
host_determination = sorted([i for i in aphid['Host'].unique() if i == i])
# Define the page layout
app.layout = html.Div(
[
dbc.Row(
[
# side bar
dbc.Col(
[
dbc.Row(
[
# header
html.H2(
children = 'Heading',
id = "heading",
# style = {'textAlign': 'center', 'color': '#FFFFFF', 'margin': '10px'}
),
html.Br(),
# image
html.Img(
src = "assets/image.png",
width = 240,
id = "logo",
),
], id = "dropdown_headings",
),
dbc.Row(
[
dbc.Col(
[
dbc.Row([
html.Div(
[
html.Br(),
html.Label(
children = "Pest order",
className = "menu-title"
),
# indicator dropdown
dcc.Dropdown(
pest_order,
id = "pest_order",
value = "",
className = 'dropdown',
clearable = True
),
html.Br(),
html.Label(
children = "Pest family",
className = "menu-title"
),
# indicator dropdown
dcc.Dropdown(
pest_family,
id = "pest_family",
value = "",
className = 'dropdown',
clearable = True,
# multi = True
),
html.Br(),
html.Label(
children = "Pest genus",
className = "menu-title"
),
# indicator dropdown
dcc.Dropdown(
pest_genus,
id = "pest_genus",
value = "Leucinodes, 1889551",
className = 'dropdown',
clearable = True
),
html.Br(),
html.Label(
children = "Pest species",
className = "menu-title"
),
# indicator dropdown
dcc.Dropdown(
pest_species,
id = "pest_species",
value = "",
className = 'dropdown',
clearable = True,
# multi = True
),
]
),
])
], id = "pest_dropdowns",
),
dbc.Col(
[
dbc.Row([
html.Div(
[
html.Br(),
html.Label(
children = "Host Determination",
className = "menu-title"
),
# indicator dropdown
dcc.Dropdown(
host_determination,
id = "host_determination",
value = "",
className = 'dropdown',
clearable=True,
# multi = True
),
]
)
]),
dbc.Row(
[
dbc.Col(
dbc.Row([
html.Div(
[
html.Br(),
html.Div(
children = "Year",
className = "menu-title"
),
# year slider
dcc.Slider(
min = aphid['Interception Date'].min().year,
max = aphid['Interception Date'].max().year,
step = 1,
value = 1997,
vertical=True,
marks = {1916: '1916',
1920: '1920',
1930: '1930',
1940: '1940',
1950: '1950',
1960: '1960',
1970: '1970',
1980: '1980',
1990: '1990',
2000: '2000',
2010: '2010',
2021: '2021',
},
#tooltip property shows value on hover
tooltip={"placement": "bottom"},
id='year_slider',
),
]
),
])
),
dbc.Col(
dbc.Row([
html.Div(
[
html.Br(),
html.Div(
children = "Month",
className = "menu-title"
),
# month slider
dcc.Slider(
min = 1,
max = 12,
step = 1,
value= 7,
#tooltip property shows value on hover
tooltip={"placement": "bottom"},
id='month_slider',
vertical = True
),
]
)
])
)
],id = "time_sliders"
)
], id = "host_dropdowns",
)
], id = "dropdowns",
)
], id='left-container',
),
# main body
dbc.Col(
[
html.Div(
# choropleth container
[
# choropleth
dcc.Graph(
id='choro_plot1',
className = 'choropleth',
config = {"displayModeBar": False},
)
], id = 'choro',
),
html.Div(
# bar plot container
[
# bar plot
dcc.Graph(
id='bar_plot1',
className = 'bar_plot',
config = {"displayModeBar": False},
)
], id = "bar",
)
], id = 'right-container'
)
],
)
]
)
@app.callback(
Output('pest_family', 'options'),
Input('pest_order', 'value')
)
def set_pfam_options(selected_pord):
return [{'label': i, 'value': i} for i in aphid['Pest family'].loc[aphid['Pest order'] == selected_pord].unique() if i == i]
@app.callback(
Output('pest_genus', 'options'),
Input('pest_family', 'value')
)
def set_pgen_options(selected_pfam):
return [{'label': i, 'value': i} for i in aphid['Pest genus'].loc[aphid['Pest family'] == selected_pfam].unique() if i == i]
@app.callback(
Output('pest_species', 'options'),
Input('pest_genus', 'value')
)
def set_pspc_options(selected_pgen):
return [{'label': i, 'value': i} for i in aphid['Pest species'].loc[aphid['Pest genus'] == selected_pgen].unique() if i == i]
@app.callback(
Output('host_determination', 'options'),
Input('pest_species', 'value')
)
def set_host_det(selected_pspc):
return [{'label': i, 'value': i} for i in aphid['Inspected Host cleaned'].loc[aphid['Pest species'] == selected_pspc].unique() if i == i]
@app.callback(
Output('choro_plot1', 'figure'),
Output('bar_plot1', 'figure'),
Input('month_slider', 'value'),
Input('year_slider', 'value'),
Input('host_determination', 'value')
)
def update_figure(month, year, pspc, hspc):
filtered_df = aphis.loc[(aphid'Inspected Host cleaned'].isin([hspc])) &
(aphid['Pest species'].isin([pspc])) &
(aphid['Interception Date'].dt.year == year) &
(aphid['Interception Date'].dt.month == month)]
