class SpaComponents: NOUPDATE = dash.no_update UNDEFINED = Component.UNDEFINED url = dcc.Location(id='spa-url') redirect = dhc.Location(id='spa-redirect') @classmethod def isTriggered(cls, input): ctx = dash.callback_context if not ctx.triggered: return False prop_id = f"{input.id}.{input.component_property}" return ctx.triggered[0]['prop_id'] == prop_id @classmethod def prefix(cls, id): if id == cls.UNDEFINED: return id if isinstance(id, list): id = '-'.join(id) id = re.sub(r"\s+", '_', id).strip().lower() return id
def test_cnfd002_injected_confirm(dash_dcc): app = Dash(__name__) app.layout = html.Div([ html.Button(id="button", children="Send confirm"), html.Div(id="confirm-container"), dcc.Location(id="dummy-location"), ]) @app.callback( Output("confirm-container", "children"), [Input("button", "n_clicks")], ) def on_click(n_clicks): if n_clicks: return dcc.ConfirmDialog(displayed=True, id="confirm", message="Please confirm.") dash_dcc.start_server(app) dash_dcc.wait_for_element("#button").click() time.sleep(1) dash_dcc.driver.switch_to.alert.accept() assert dash_dcc.get_logs() == []
def get_app(app): app = app dash.register_page( "multi_layout1", layout=html.Div("text for multi_layout1", id="text_multi_layout1"), path="/", title="Supplied Title", description="This is the supplied description", name="Supplied name", image="birds.jpeg", id="multi_layout1", ) dash.register_page( "multi_layout2", layout=html.Div("text for multi_layout2", id="text_multi_layout2"), path="/layout2", id="multi_layout2", ) app.layout = html.Div([ html.Div([ html.Div( dcc.Link( f"{page['name']} - {page['path']}", id=page["id"], href=page["relative_path"], )) for page in dash.page_registry.values() ]), dash.page_container, dcc.Location(id="url", refresh=True), ]) return app
def main(unused_argv): # TODO: Make this a more efficient query. sessions = queries.GetSessions() points_columns = queries.GetPointsColumns() + [ 'front_brake_pressure_percentage', 'rear_brake_pressure_percentage', 'racing_line', 'gsum', 'time_delta' ] tracks = queries.GetTracks() app.layout = html.Div( style={'display': 'grid'}, children=[ dcc.Location(id='url', refresh=False), dcc.Link('Home', href='/'), dcc.Link('Clear', href='/track=None&points=None'), dcc.Dropdown( id='track-dropdown', options=[{ 'label': i, 'value': i } for i in tracks], searchable=False, clearable=False, style={'width': '50%'}, ), dcc.Dropdown( id='points-dropdown', options=[{ 'label': i, 'value': i } for i in points_columns], clearable=False, multi=True, ), dash_table.DataTable( id='sessions-table', columns=[{ 'name': i, 'id': i } for i in sessions.columns], filter_action='native', sort_action='native', sort_mode='single', sort_by=[{ 'column_id': 'lap_time', 'direction': 'asc' }, { 'column_id': 'session_time', 'direction': 'desc' }], row_selectable='multi', page_action='native', page_current=0, page_size=10, ), html.Div(id='graphs'), ], ) app.run_server(host='0.0.0.0', debug=FLAGS.debug)
def main_layout_header(): """Dash layout with a top-header""" return html.Div([ make_header(), dbc.Container(dbc.Row( dbc.Col(id=server.config["CONTENT_CONTAINER_ID"])), fluid=True), dcc.Location(id=server.config["LOCATION_COMPONENT_ID"], refresh=False), ])
def test_paor001_order(dash_duo): app = Dash(__name__, use_pages=True) dash.register_page( "multi_layout1", layout=html.Div("text for multi_layout1", id="text_multi_layout1"), order=2, id="multi_layout1", ) dash.register_page( "multi_layout2", layout=html.Div("text for multi_layout2", id="text_multi_layout2"), order=1, id="multi_layout2", ) dash.register_page( "multi_layout3", layout=html.Div("text for multi_layout3", id="text_multi_layout3"), order=0, id="multi_layout3", ) app.layout = html.Div([ html.Div([ html.Div( dcc.Link( f"{page['name']} - {page['path']}", id=page["id"], href=page["path"], )) for page in dash.page_registry.values() ]), dash.page_container, dcc.Location(id="url", refresh=True), ]) modules = [ "multi_layout3", "multi_layout2", "multi_layout1", "pages.defaults", "pages.metas", "pages.not_found_404", "pages.page1", "pages.page2", "pages.path_variables", "pages.query_string", "pages.redirect", ] dash_duo.start_server(app) assert (list(dash.page_registry) == modules ), "check order of modules in dash.page_registry" assert dash_duo.get_logs() == [], "browser console should contain no error"
def test_link001_event(dash_dcc): app = Dash(__name__) app.layout = html.Div( [ dcc.Link("Page 1", id="link1", href="/page-1"), dcc.Location(id="url", refresh=False), html.Div(id="content"), ] ) @app.callback(Output("content", "children"), [Input("url", "pathname")]) def display_page(pathname): if pathname is None or pathname == "/page-1": return html.Div("1", id="div1") elif pathname == "/": return html.Div("base", id="div0") else: return "404" dash_dcc.start_server(app) dash_dcc.driver.execute_script( """ window.addEventListener('_dashprivate_pushstate', function() { window._test_link_event_counter = (window._test_link_event_counter || 0) + 1; }); window.addEventListener('_dashprivate_historychange', function() { window._test_history_event_counter = (window._test_history_event_counter || 0) + 1; }); """ ) dash_dcc.wait_for_element_by_id("div0") dash_dcc.find_element("#link1").click() dash_dcc.wait_for_element_by_id("div1") link_counter = dash_dcc.driver.execute_script( """ return window._test_link_event_counter; """ ) history_counter = dash_dcc.driver.execute_script( """ return window._test_history_event_counter; """ ) assert link_counter == 1 assert history_counter == 1 assert dash_dcc.get_logs() == []
def test_lich001_default(dash_dcc): app = Dash(__name__) app.layout = html.Div([ dcc.Link(id="link1", href="/page-1"), dcc.Location(id="url", refresh=False), html.Div(id="content"), ]) dash_dcc.start_server(app) dash_dcc.wait_for_text_to_equal("#link1", "/page-1") assert dash_dcc.get_logs() == []
def test_cbsc007_parallel_updates(refresh, dash_duo): # This is a funny case, that seems to mostly happen with dcc.Location # but in principle could happen in other cases too: # A callback chain (in this case the initial hydration) is set to update a # value, but after that callback is queued and before it returns, that value # is also set explicitly from the front end (in this case Location.pathname, # which gets set in its componentDidMount during the render process, and # callbacks are delayed until after rendering is finished because of the # async table) # At one point in the wildcard PR #1103, changing from requestQueue to # pendingCallbacks, calling PreventUpdate in the callback would also skip # any callbacks that depend on pathname, despite the new front-end-provided # value. app = Dash() app.layout = html.Div([ dcc.Location(id="loc", refresh=refresh), html.Button("Update path", id="btn"), dash_table.DataTable(id="t", columns=[{ "name": "a", "id": "a" }]), html.Div(id="out"), ]) @app.callback(Output("t", "data"), [Input("loc", "pathname")]) def set_data(path): return [{"a": (path or repr(path)) + ":a"}] @app.callback(Output("out", "children"), [Input("loc", "pathname"), Input("t", "data")]) def set_out(path, data): return json.dumps(data) + " - " + (path or repr(path)) @app.callback(Output("loc", "pathname"), [Input("btn", "n_clicks")]) def set_path(n): if not n: raise PreventUpdate return "/{0}".format(n) dash_duo.start_server(app) dash_duo.wait_for_text_to_equal("#out", '[{"a": "/:a"}] - /') dash_duo.find_element("#btn").click() # the refresh=True case here is testing that we really do get the right # pathname, not the prevented default value from the layout. dash_duo.wait_for_text_to_equal("#out", '[{"a": "/1:a"}] - /1') if not refresh: dash_duo.find_element("#btn").click() dash_duo.wait_for_text_to_equal("#out", '[{"a": "/2:a"}] - /2')
def app_page_layout(page_layout, app_title="Dash Bio App", app_name="", light_logo=True, standalone=False, bg_color="#506784", font_color="#F3F6FA"): return html.Div( id='main_page', children=[ dcc.Location(id='url', refresh=False), html.Div( id='app-page-header', children=[ html.A(id='dashbio-logo', children=[ html.Img(src='data:image/png;base64,{}'.format( base64.b64encode( open( os.path.join( ASSETSPATH, 'plotly-dash-bio-logo.png'), 'rb').read()).decode())) ], href="/Portal" if standalone else "/dash-bio"), html.H2(app_title), html.A(id='gh-link', children=['View on GitHub'], href="https://github.com/cytham/variantmap", style={ 'color': 'white' if light_logo else 'black', 'border': 'solid 1px white' if light_logo else 'solid 1px black' }), html.Img(src='data:image/png;base64,{}'.format( base64.b64encode( open( os.path.join(ASSETSPATH, 'GitHub-Mark-{}64px.png'). format('Light-' if light_logo else ''), 'rb').read()).decode())) ], style={ 'background': bg_color, 'color': font_color, }), html.Div(id='app-page-content', children=page_layout) ], )
def test_grbs003_graph_wrapped_in_loading_component_does_not_fail(dash_dcc): app = Dash(__name__, suppress_callback_exceptions=True) app.layout = html.Div([ html.H1("subplot issue"), dcc.Location(id="url", refresh=False), dcc.Loading(id="page-content"), ]) @app.callback(Output("page-content", "children"), [Input("url", "pathname")]) def render_page(url): return [ dcc.Dropdown( id="my-dropdown", options=[ { "label": "option 1", "value": "1" }, { "label": "option 2", "value": "2" }, ], value="1", ), dcc.Graph(id="my-graph"), ] @app.callback(Output("my-graph", "figure"), [Input("my-dropdown", "value")]) def update_graph(value): values = [1, 2, 3] ranges = [1, 2, 3] return { "data": [{ "x": ranges, "y": values, "line": { "shape": "spline" } }], } dash_dcc.start_server(app) dash_dcc.wait_for_element("#my-graph .main-svg") assert dash_dcc.get_logs() == []
def main_layout_sidebar(): """Dash layout with a sidebar""" return html.Div([ dbc.Container( fluid=True, children=dbc.Row([ dbc.Col(make_sidebar(className="px-2"), width=2, className="px-0"), dbc.Col(id=server.config["CONTENT_CONTAINER_ID"], width=10), ]), ), dcc.Location(id=server.config["LOCATION_COMPONENT_ID"], refresh=False), ])
def serve(self): assert(self._built) self._app.layout = html.Div(children=[ dcc.Location(id="url", refresh=False), html.H1(["WARA-SW TEP Dashboard"]), html.Main([ html.Div([ html.A(dashboard.title, href="/" + name), ]) for (name, dashboard) in self._dashboards.items() ]), html.Div([], id="dashboard-area") ]) self._app.run_server(debug=True, host="0.0.0.0")
def test_loca001_callbacks(dash_dcc): app = Dash(__name__) app.layout = html.Div([ dcc.Location(id="location", refresh=False), html.A("Anchor Link 1", href="#div"), html.Div(id="div"), ]) @app.callback(Output("div", "children"), [Input("location", "pathname")]) def update_path(path): return path dash_dcc.start_server(app) dash_dcc.wait_for_text_to_equal("#div", "/") assert dash_dcc.get_logs() == []
def test_lich002_children(dash_dcc): app = Dash(__name__) app.layout = html.Div([ dcc.Link(children="test children", id="link1", href="/page-1"), dcc.Location(id="url", refresh=False), html.Div(id="content"), ]) @app.callback(Output("content", "children"), [Input("link1", "children")]) def display_children(children): return children dash_dcc.start_server(app) dash_dcc.wait_for_text_to_equal("#content", "test children") assert dash_dcc.get_logs() == []
def test_llgo001_location_logout(dash_dcc): app = Dash(__name__) @app.server.route("/_logout", methods=["POST"]) def on_logout(): rep = flask.redirect("/logged-out") rep.set_cookie("logout-cookie", "", 0) return rep app.layout = html.Div([ html.H2("Logout test"), dcc.Location(id="location"), html.Div(id="content") ]) @app.callback(Output("content", "children"), [Input("location", "pathname")]) def on_location(location_path): if location_path is None: raise PreventUpdate if "logged-out" in location_path: return "Logged out" else: @flask.after_this_request def _insert_cookie(rep): rep.set_cookie("logout-cookie", "logged-in") return rep return dcc.LogoutButton(id="logout-btn", logout_url="/_logout") dash_dcc.start_server(app) time.sleep(1) dash_dcc.percy_snapshot("Core Logout button") assert dash_dcc.driver.get_cookie("logout-cookie")["value"] == "logged-in" dash_dcc.wait_for_element("#logout-btn").click() dash_dcc.wait_for_text_to_equal("#content", "Logged out") assert not dash_dcc.driver.get_cookie("logout-cookie") assert dash_dcc.get_logs() == []
def test_dvpc001_prop_check_errors_with_path(dash_duo): app = Dash(__name__, eager_loading=True) app.layout = html.Div( [html.Div(id="content"), dcc.Location(id="location")]) @app.callback(Output("content", "children"), [Input("location", "pathname")]) def display_content(pathname): if pathname is None or pathname == "/": return "Initial state" test_case = test_cases[pathname.strip("/")] return html.Div(id="new-component", children=test_case["component"](**test_case["props"])) dash_duo.start_server( app, debug=True, use_reloader=False, use_debugger=True, dev_tools_hot_reload=False, ) for tc in test_cases: route_url = "{}/{}".format(dash_duo.server_url, tc) dash_duo.wait_for_page(url=route_url) fail = test_cases[tc]["fail"] logs = test_cases[tc].get("logs", fail) if fail: dash_duo.wait_for_element(".test-devtools-error-toggle").click() dash_duo.wait_for_element(".dash-fe-error__info") dash_duo.percy_snapshot("devtools validation exception: {}".format( test_cases[tc]["name"])) else: dash_duo.wait_for_element("#new-component") dash_duo.wait_for_no_elements(".test-devtools-error-toggle") if logs: assert dash_duo.get_logs(), tc else: assert dash_duo.get_logs() == [], tc
def test_lipa001_path(dash_dcc): app = Dash(__name__) app.layout = html.Div([ dcc.Link("Relative Path", id="link1", href="google.com"), dcc.Location(id="url", refresh=False), html.Div(id="content"), ]) @app.callback(Output("content", "children"), Input("url", "pathname")) def display_children(children): return children dash_dcc.start_server(app) dash_dcc.wait_for_element("#link1").click() dash_dcc.wait_for_text_to_equal("#content", "/google.com") assert dash_dcc.get_logs() == []
def test_link002_scroll(dash_dcc): app = Dash(__name__) app.layout = html.Div([ dcc.Location(id="test-url", refresh=False), html.Div( id="push-to-bottom", children=[], style={ "display": "block", "height": "200vh" }, ), html.Div(id="page-content"), dcc.Link("Test link", href="/test-link", id="test-link"), ]) call_count = Value("i", 0) @app.callback(Output("page-content", "children"), [Input("test-url", "pathname")]) def display_page(pathname): call_count.value = call_count.value + 1 return f"You are on page {pathname}" dash_dcc.start_server(app) wait.until(lambda: call_count.value == 1, 3) test_link = dash_dcc.wait_for_element("#test-link") test_link.send_keys(Keys.NULL) test_link.click() dash_dcc.wait_for_text_to_equal("#page-content", "You are on page /test-link") wait.until( lambda: test_link.get_attribute("href") == f"http://localhost:{dash_dcc.server.port}/test-link", 3, ) wait.until(lambda: call_count.value == 2, 3) assert dash_dcc.get_logs() == []
def vue(self): # represents the browser address bar and doesn't render anything url = dcc.Location(id="url", refresh=False) logo_div = html.Div(id="logo") links_div = html.Div( children=[ url, link.RecountLinks.home, link.RecountLinks.dashboardHome, link.RecountLinks.notebookHome, ], className="nav-links", ) tools = html.Div(id="tools") nav_div = html.Nav(children=[logo_div, links_div, tools], style=spaceBetween) page_content = html.Div(id="page-content") whole_page = html.Div(children=[nav_div, page_content]) return whole_page
def test_lipa002_path(dash_dcc): app = Dash(__name__) app.layout = html.Div([ dcc.Link( children="Absolute Path", id="link1", href="https://google.com", refresh=True, ), dcc.Location(id="url", refresh=False), ]) dash_dcc.start_server(app) dash_dcc.wait_for_element("#link1").click() location = dash_dcc.driver.execute_script(""" return window.location.href """) assert location == "https://www.google.com/" assert dash_dcc.get_logs() == []
def add_content(self): """ """ if self.html_layout: return html.Div( id="div-main", children=[ dcc.Store(id="control-panel"), dcc.Location(id="url", refresh=False), dbc.Row(id="row-navbar", class_name="g-0", children=[ self._add_navbar(), ]), dcc.Loading( dbc.Offcanvas(class_name="w-25", id="offcanvas-metadata", title="Detailed Information", placement="end", is_open=False, children=[dbc.Row(id="row-metadata")])), dbc.Row(id="row-main", class_name="g-0", children=[ self._add_ctrl_col(), self._add_plotting_col(), ]) ]) else: return html.Div(id="div-main-error", children=[ dbc.Alert( [ "An Error Occured", ], color="danger", ), ])
def test_lipa002_path(dash_dcc): app = Dash(__name__) def extras(t): return f"""<!DOCTYPE html> <html><body> {t[::-1]} </body></html> """ app.server.add_url_rule( "/extra/<string:t>", view_func=extras, endpoint="/extra/<string:t>", methods=["GET"], ) app.layout = html.Div([ dcc.Link( children="Absolute Path", id="link1", href="/extra/eseehc", refresh=True, ), dcc.Location(id="url", refresh=False), ]) dash_dcc.start_server(app) dash_dcc.wait_for_element("#link1").click() location, text = dash_dcc.driver.execute_script(""" return [window.location.href, document.body.textContent.trim()] """) assert location == dash_dcc.server.url + "/extra/eseehc" assert text == "cheese" assert dash_dcc.get_logs() == []
def display_page(pathname, search): pathname = pathname[len(dash_app.requests_pathname_external_prefix) - 1:] query_params = parse_qs(urlparse(search).query) no_header = query_params.get("header", None) == ["false"] if pathname == "/config": page = config_layout() elif pathname == "/config_login": page = config_layout("login") elif pathname == "/log": page = log_layout() elif not CONFIG.is_good: page = dcc.Location( pathname=dash_app.requests_pathname_external_prefix + "config_login", id="config_redirect") elif pathname == "/config_otp": page = config_layout("otp") elif pathname == "/control": page = get_control_tabs(CONFIG) else: page = serve_layout() if no_header: return page return add_header(page)
def get_app(path1="/", path2="/layout2"): app = Dash(__name__, use_pages=True) # test for storing arbitrary keyword arguments: An `id` prop is defined for every page # test for defining multiple pages within a single file: layout is passed directly to `register_page` # in the following two modules: dash.register_page( "multi_layout1", layout=html.Div("text for multi_layout1", id="text_multi_layout1"), path=path1, title="Supplied Title", description="This is the supplied description", name="Supplied name", image="birds.jpeg", id="multi_layout1", ) dash.register_page( "multi_layout2", layout=html.Div("text for multi_layout2", id="text_multi_layout2"), path=path2, id="multi_layout2", ) app.layout = html.Div([ html.Div([ html.Div( dcc.Link( f"{page['name']} - {page['path']}", id=page["id"], href=page["path"], )) for page in dash.page_registry.values() ]), dash.page_container, dcc.Location(id="url", refresh=True), ]) return app
def get_app_layout(): return html.Div( [ dcc.Location(id="url", refresh=False), html.Div( [ html.H1("Wetterdienst Explorer"), dbc.Navbar( [dbc.NavLink("About", id="open-about")], id="navbar", ), get_about_modal(), ], className="d-flex flex-row", style={"justify-content": "space-between"}, ), dashboard_layout(), ], id="mainContainer", style={ "display": "flex", "flex-direction": "column" }, )
dbc.Row([ dbc.Col([dcc.Graph(id='country-time-series_vacs')], width=12, lg=6), dbc.Col([dcc.Graph(id='country-bar-series_vacs')], width=12, lg=6), ]) ]) probplot = html.Div([dbc.Row(dbc.Col(dcc.Graph(id='prob-group-size')))]) def Homepage(): layouthome = html.Div([nav, header_WD, map_WD, doubleplots_WD, probplot]) return layouthome app.layout = html.Div( [dcc.Location(id='url', refresh=True), html.Div(id='page-content')]) @app.callback(Output('page-content', 'children'), [Input('url', 'pathname')]) def display_page(pathname): if pathname == '/france': try: del fig_map_WD except UnboundLocalError: pass return App() else: try: del fig_map_FR except UnboundLocalError:
dbc.NavLink("Home", href="/", active="exact"), dbc.NavLink("Page 1", href="/page-1", active="exact"), dbc.NavLink("Page 2", href="/page-2", active="exact"), ], vertical=True, pills=True, ), id="collapse", ), ], id="sidebar", ) content = html.Div(id="page-content") app.layout = html.Div([dcc.Location(id="url"), sidebar, content]) @app.callback(Output("page-content", "children"), [Input("url", "pathname")]) def render_page_content(pathname): if pathname == "/": return html.P("This is the content of the home page!") elif pathname == "/page-1": return html.P("This is the content of page 1. Yay!") elif pathname == "/page-2": return html.P("Oh cool, this is page 2!") # If the user tries to reach a different page, return a 404 message return html.Div( [ html.H1("404: Not found", className="text-danger"), html.Hr(),
AntdCheckbox, AntdCheckboxGroup, AntdRadioGroup, AntdSwitch, AntdTreeSelect, AntdCollapse, AntdEmpty, AntdTooltip, AntdPopover, AntdStatistic, AntdCountdown, AntdTag, AntdDrawer, AntdModal, AntdPopconfirm, AntdResult, AntdSkeleton, AntdAffix, AntdBreadcrumb, AntdDropdown, AntdInputNumber, AntdTimeline, AntdProgress, AntdAvatar, AntdBadge, AntdRibbon, AntdTimePicker, AntdTimeRangePicker, AntdCarousel, AntdForm, AntdFormItem, AntdCardGrid, AntdCard, AntdMentions, AntdImage, AntdPageHeader, AntdCalendar, AntdComment, AntdDescriptions, AntdDescriptionItem, AntdWatermark, AntdPasteImage, AntdSegmented, AntdCheckCard, AntdCheckCardGroup, AntdAccordionItem, AntdAccordion, AntdPictureUpload) app.layout = fuc.FefferyTopProgress( html.Div([ # 注入url监听 dcc.Location(id='url'), # 注入快捷指令面板 fuc.FefferyShortcutPanel( placeholder='输入你想要搜索的内容...', data=[{ 'id': item['props']['href'], 'title': item['props']['title'], 'handler': '() => window.open("%s")' % item['props']['href'], 'section': group['props']['title'] } for group in Config.menuItems for item in group['children'] if item['props'].get('href')] + [{ 'id': sub_item['props']['href'], 'title': sub_item['props']['title'], 'handler':
html.Hr(), html.P(f"{db.MONGO_URL} / {db.MONGO_DB}", className="lead", id="db-info-side"), # dcc.NavLink("Change it", href="/dbselect", id="page-dbselect-link"), # html.P(f"{PEA_DB_NAME}", className="lead"), html.Hr(), html.Ul(children=[html.Li(dcc.Link("Db Info", href="/dbinfo", id="page-dbinfo-link")), html.Li(dcc.Link("States", href="/states", id="page-states-link")), html.Li(dcc.Link("Measurements", href="/measurements", id="page-measurements-link")), html.Li(dcc.Link("Measurements Polar", href="/measurements-polar", id="page-measurements-polar-link")) ]), ], style=SIDEBAR_STYLE, ) content = html.Div(id='page-content', children=[], style=CONTENT_STYLE) app.layout = html.Div([dcc.Location(id='url', refresh=False), sidebar, content ]) @app.callback(Output('page-content', 'children'), [Input('url', 'pathname')]) def display_page(pathname): if pathname == '/measurements': return meas.layout() if pathname == '/states': return state.layout() if pathname == '/measurements-polar': return meas_polar.layout() if pathname == '/dbinfo': return dbinfo.layout else: return "404 Page Error! Please choose a link"