Skip to content

Instantly share code, notes, and snippets.

@tcbegley
Created May 9, 2019 18:12
Show Gist options
  • Save tcbegley/0391da72c6899236d5502f392ebace79 to your computer and use it in GitHub Desktop.
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.
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