Created
May 9, 2019 18:12
-
-
Save tcbegley/0391da72c6899236d5502f392ebace79 to your computer and use it in GitHub Desktop.
A demo app using query parameters to set dropdown value on a different page.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import dash | |
import dash_bootstrap_components as dbc | |
import dash_core_components as dcc | |
import dash_html_components as html | |
from dash.dependencies import Input, Output, State | |
def parse_query_params(s): | |
s = s.lstrip("?") | |
return dict(pair.split("=") for pair in s.split("&")) | |
def create_deepdive_layout(cluster=None): | |
try: | |
cluster = int(cluster) | |
except TypeError: | |
cluster = None | |
cluster_dropdown = dcc.Dropdown( | |
id="cluster-dropdown", | |
options=[ | |
{"label": "Cluster 1", "value": 1}, | |
{"label": "Cluster 2", "value": 2}, | |
], | |
value=cluster, | |
) | |
return [ | |
html.H2("Deepdive"), | |
html.Hr(), | |
dbc.Row([dbc.Col(cluster_dropdown), dbc.Col(id="deepdive-output")]), | |
] | |
overview_layout = [ | |
html.H2("Overview"), | |
html.Hr(), | |
dbc.Row( | |
[ | |
dbc.Col( | |
dbc.Card( | |
[ | |
html.P("This link corresponds to cluster 1"), | |
dbc.CardLink("Cluster 1", href="/deepdive?cluster=1"), | |
], | |
body=True, | |
) | |
), | |
dbc.Col( | |
dbc.Card( | |
[ | |
html.P("This link corresponds to cluster 2"), | |
dbc.CardLink("Cluster 2", href="/deepdive?cluster=2"), | |
], | |
body=True, | |
) | |
), | |
] | |
), | |
] | |
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP]) | |
app.config.suppress_callback_exceptions = True | |
app.layout = html.Div( | |
[ | |
dcc.Location(id="url"), | |
dbc.NavbarSimple( | |
children=[ | |
dbc.NavLink("Page 1", href="/overview", id="overview-link"), | |
dbc.NavLink("Page 2", href="/deepdive", id="deepdive-link"), | |
], | |
brand="Demo", | |
color="primary", | |
dark=True, | |
), | |
dbc.Container(id="page-content", className="pt-4"), | |
] | |
) | |
# this callback uses the current pathname to set the active state of the | |
# corresponding nav link to true, allowing users to tell see page they are on | |
@app.callback( | |
[Output("overview-link", "active"), Output("deepdive-link", "active")], | |
[Input("url", "pathname")], | |
) | |
def toggle_active_links(pathname): | |
if pathname == "/": | |
# Treat overview as the homepage / index | |
return True, False | |
return pathname == "/overview", pathname == "/deepdive" | |
@app.callback( | |
Output("page-content", "children"), | |
[Input("url", "pathname")], | |
[State("url", "search")], | |
) | |
def render_page_content(pathname, search): | |
if pathname in ["/", "/overview"]: | |
return overview_layout | |
elif pathname == "/deepdive": | |
if search: | |
query_params = parse_query_params(search) | |
else: | |
query_params = {} | |
return create_deepdive_layout(**query_params) | |
# If the user tries to reach a different page, return a 404 message | |
return dbc.Jumbotron( | |
[ | |
html.H1("404: Not found", className="text-danger"), | |
html.Hr(), | |
html.P(f"The pathname {pathname} was not recognised..."), | |
] | |
) | |
@app.callback( | |
Output("deepdive-output", "children"), [Input("cluster-dropdown", "value")] | |
) | |
def create_cluster_output(value): | |
if value: | |
return f"Cluster {value} is selected" | |
return "Nothing is selected..." | |
if __name__ == "__main__": | |
app.run_server(debug=True) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment