def layout(self, spa, message='404 Not Found'): return html.Div([ html.Div([ html.Div([ html.Div([ html.H1('Oops!'), html.H2(message), html.Div( 'Sorry, an error has occurred, Requested page not found!', className='error-details'), html.Div([ dcc.Link([ html.Span(className='fa fa-home'), ' Take Me Home' ], href='/', className='btn btn-secondary btn-lg'), dcc.Link([ html.Span(className='fa fa-envelope'), ' Contact Support' ], href='/support', className='btn btn-secondary btn-lg'), ], className='error-actions') ], className='error-template') ], className='col-md-12') ], className='row') ], className='container')
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 add_header(el): return dbc.Row([ dbc.Col( dcc.Link(html.H1('My car info'), href=dash_app.requests_pathname_external_prefix, style={"text-decoration": "none"})), dbc.Col( dcc.Link(html.Img(src="assets/images/settings.svg", width="30veh"), href=dash_app.requests_pathname_external_prefix + "config", className="float-end")) ]), el
def getHeader(active): header_logo = html.Div([html.A(className="header__logo", href='/')]) header_items = [ html.Li(dcc.Link("Team", href="/team", className="header__link"), className="header__item {0}".format("is-active" if active == "team" else "")), html.Li(dcc.Link("Players", href="/players", className="header__link"), className="header__item {0}".format("is-active" if active == "players" else "")), ] header_list = html.Ul(header_items, className="header__list") return html.Div([ header_logo, header_list, ], className="header t-sans")
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 build_login_form(ctx): frm = SpaForm(ctx, 'loginFrm') def registerLink(): return html.Div([ "Don't have an account? ", dcc.Link("Create one", href=admin.url_for('register')) ], className="mt-4 text-center") flash = frm.Alert(id='flash') email = frm.Input('Email', id='email', name='email', type='email', placeholder="Enter email") password = frm.PasswordInput("Password", name='password', id="password", placeholder="Enter password") password.children.insert( 1, dcc.Link('Forgot Password?', href=admin.url_for('forgot'), className="float-end")) remember = frm.Checkbox("Remember me", id='remember', name='remember', checked=True) button = frm.Button('Sign In', type='submit', id='btn') redirect = frm.Location(id='redirect', refresh=True) form = frm.Form( [flash, email, password, remember, html.Br(), button, registerLink()], id='login') @admin.callback([redirect.output.href, flash.output.children], [form.input.form_data]) def _form_submit(values): redirect = frm.NOUPDATE error = frm.NOUPDATE if ctx.isTriggered(form.input.form_data): email = values['email'] password = values['password'] remember = values['remember'] valid = app.login_manager.login(email, password, remember) if valid: redirect = admin.url_for('user.profile') else: error = 'Please check your login details and try again.' return redirect, error layout = form_layout('Sign in', form) return html.Div([layout, redirect])
def solar(): return html.Div([ html.Div([ html.Div([], className="col-md-2"), html.Div([ html.H2('US Solar Capacity'), html.Br(), dbc.Table.from_dataframe( df, striped=True, bordered=True, hover=True), html.Div(id='output') ], className="col-md-8"), html.Div([], className="col-md-2") ], className='row'), dbc.Row([ dbc.Col([ dcc.Link("Global Warming", href=spa.url_for('warming'), className="btn btn-primary float-end") ], md=12) ]) ], className="container-fluid")
def site_layout(app): # Process browser location change @app.callback([Output('title', 'title'), Output('page-ref', 'children')], [Input('loc', 'pathname')]) def _location_callback(pathname): title = 'My Site: {}'.format(pathname) return title, title return html.Div([ dhc.PageTitle(title='My Site', id='title'), dhc.Location(id='loc'), html.H2(id='page-ref'), dcc.Link('page1', id='page1', href='/page1', refresh=False), dcc.Link('page2', id='page2', href='/page2', refresh=False) ])
def make_brand(**kwargs): return html.Header( className="brand", children=dcc.Link( href=get_url(""), children=html.H1([fa("far fa-chart-bar"), server.config["TITLE"]]), ), **kwargs, )
def signin(): return html.Div([ dcc.Link('Sign In', id='signin', href='/signin', className="btn btn-primary", refresh=False) ], className="col text-center")
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 get_breadcrumb(parts): if not parts: return html.Div() breadcrumbs = html.Nav( html.Ul([ html.Li( dcc.Link(name, href=link), className=(None if idx != len(parts) - 1 else "is-active"), ) for idx, (name, link) in enumerate(parts.items()) ]), className="breadcrumb", ) return breadcrumbs
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_inin027_multi_page_without_pages_folder(dash_duo): app = Dash(__name__, pages_folder="") # 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="/", 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["path"], )) for page in dash.page_registry.values() ]), dash.page_container, ]) dash_duo.start_server(app) # test layout and title for each page in `page_registry` with link navigation for page in dash.page_registry.values(): dash_duo.find_element("#" + page["id"]).click() dash_duo.wait_for_text_to_equal("#text_" + page["id"], "text for " + page["id"]) assert dash_duo.driver.title == page[ "title"], "check that page title updates" assert not dash_duo.get_logs()
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 warming(): return html.Div([ dbc.Row([ dbc.Col([ dcc.Markdown(global_md), html.A("View details", href='https://datahub.io/core/global-temp#readme', className="btn btn-secondary"), ], md=3), dbc.Col( [ # https://dash.plot.ly/dash-core-components/graph dcc.Graph( figure={ "data": [{ "y": data['Mean'].tolist(), "x": data['Year'].tolist() }], 'layout': { 'title': 'Global Temperature Change (°C)', 'xaxis': { 'title': 'Year' } } }, config={'displayModeBar': False}, ), ], md=9), ]), dbc.Row([ dbc.Col([ dcc.Link("State Solar", href=spa.url_for('solar'), className="btn btn-primary float-end") ], md=12) ]) ])
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 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 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 categories(cls): button = html.Button("Categories", className="nav-button") categories = dcc.Link(button, href="/categories") return categories
"left": 0, "bottom": 0, "width": "16rem", "padding": "2rem 1rem", "background-color": "#f8f9fa", } sidebar = html.Div( [ html.H2("GINAN", className="display-4"), html.P("EDA (MongoDB) ", className="lead"), 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':
def registerLink(): return html.Div([ "Don't have an account? ", dcc.Link("Create one", href='/admin/register') ], className="mt-4 text-center")
from dash import html, dcc from dash.long_callback import DiskcacheLongCallbackManager from dash.dependencies import Input, Output ## Diskcache import diskcache cache = diskcache.Cache("./cache") long_callback_manager = DiskcacheLongCallbackManager(cache) import time app = dash.Dash(__name__, plugins=[dl.plugins.pages]) navbar = html.Div( [ html.Div(dcc.Link(page["name"], href=page["path"])) for page in dash.page_registry.values() ], style={ "backgroundColor": "whitesmoke", "padding": 10 }, ) app.layout = html.Div([navbar, html.Hr(), dl.plugins.page_container], ) @app.long_callback( output=Output("paragraph_id", "children"), inputs=Input("button_id", "n_clicks"), manager=long_callback_manager,
def test_loca002_location_link(dash_dcc): app = Dash(__name__) app.layout = html.Div([ html.Div(id="waitfor"), dcc.Location(id="test-location", refresh=False), dcc.Link( html.Button("I am a clickable button"), id="test-link", href="/test/pathname", ), dcc.Link( html.Button("I am a clickable hash button"), id="test-link-hash", href="#test", ), dcc.Link( html.Button("I am a clickable search button"), id="test-link-search", href="?testQuery=testValue", refresh=False, ), html.Button("I am a magic button that updates pathname", id="test-button"), html.A("link to click", href="/test/pathname/a", id="test-a"), html.A("link to click", href="#test-hash", id="test-a-hash"), html.A("link to click", href="?queryA=valueA", id="test-a-query"), html.Div(id="test-pathname", children=[]), html.Div(id="test-hash", children=[]), html.Div(id="test-search", children=[]), ]) @app.callback(Output("test-pathname", "children"), Input("test-location", "pathname")) def update_test_pathname(pathname): return pathname @app.callback(Output("test-hash", "children"), Input("test-location", "hash")) def update_test_hash(hash_val): return hash_val or "" @app.callback(Output("test-search", "children"), Input("test-location", "search")) def update_test_search(search): return search or "" @app.callback( Output("test-location", "pathname"), Input("test-button", "n_clicks"), State("test-location", "pathname"), ) def update_pathname(n_clicks, current_pathname): if n_clicks is not None: return "/new/pathname" return current_pathname dash_dcc.start_server(app) dash_dcc.wait_for_text_to_equal("#test-pathname", "/") dash_dcc.percy_snapshot("link -- location") # Check that link updates pathname dash_dcc.find_element("#test-link").click() until( lambda: dash_dcc.driver.current_url.replace("http://localhost:8050", "" ) == "/test/pathname", 3, ) dash_dcc.wait_for_text_to_equal("#test-pathname", "/test/pathname") # Check that hash is updated in the Location dash_dcc.find_element("#test-link-hash").click() dash_dcc.wait_for_text_to_equal("#test-pathname", "/test/pathname") dash_dcc.wait_for_text_to_equal("#test-hash", "#test") dash_dcc.percy_snapshot("link -- /test/pathname#test") # Check that search is updated in the Location # note that this goes through href and therefore wipes the hash dash_dcc.find_element("#test-link-search").click() dash_dcc.wait_for_text_to_equal("#test-search", "?testQuery=testValue") dash_dcc.wait_for_text_to_equal("#test-hash", "") dash_dcc.percy_snapshot("link -- /test/pathname?testQuery=testValue") # Check that pathname is updated through a Button click via props dash_dcc.find_element("#test-button").click() dash_dcc.wait_for_text_to_equal("#test-pathname", "/new/pathname") dash_dcc.wait_for_text_to_equal("#test-search", "?testQuery=testValue") dash_dcc.percy_snapshot("link -- /new/pathname?testQuery=testValue") # Check that pathname is updated through an a tag click via props dash_dcc.find_element("#test-a").click() dash_dcc.wait_for_text_to_equal("#test-pathname", "/test/pathname/a") dash_dcc.wait_for_text_to_equal("#test-search", "") dash_dcc.wait_for_text_to_equal("#test-hash", "") dash_dcc.percy_snapshot("link -- /test/pathname/a") # Check that hash is updated through an a tag click via props dash_dcc.find_element("#test-a-hash").click() dash_dcc.wait_for_text_to_equal("#test-pathname", "/test/pathname/a") dash_dcc.wait_for_text_to_equal("#test-search", "") dash_dcc.wait_for_text_to_equal("#test-hash", "#test-hash") dash_dcc.percy_snapshot("link -- /test/pathname/a#test-hash") # Check that hash is updated through an a tag click via props dash_dcc.find_element("#test-a-query").click() dash_dcc.wait_for_text_to_equal("#test-pathname", "/test/pathname/a") dash_dcc.wait_for_text_to_equal("#test-search", "?queryA=valueA") dash_dcc.wait_for_text_to_equal("#test-hash", "") dash_dcc.percy_snapshot("link -- /test/pathname/a?queryA=valueA") assert dash_dcc.get_logs() == []
app.scripts.config.serve_locally = True fig3=go.Figure() app.layout = html.Div([ dcc.Location(id='url', refresh=False), html.Div(id='page-content'), ]) index_page = html.Div([ html.H1('Global Caseload and Mortality by Country', style={'textAlign':'center'}), html.Br(), dcc.Link('Cases and Deaths By Country', href='/compare'), html.Br(), html.Br(), dcc.Link('Download Report', href='/report'), html.Br(), html.Br(), dcc.Link('Predictions', href='/predict'), html.Br(), html.Br(), dcc.Link('Kenya Vaccinations by County/Region', href='/vaccines'), html.Br(), html.Br(), dcc.Dropdown( id='dropdown3', value = 'Cases',
app = dash.Dash("") app.css.append_css( {"external_url": "https://codepen.io/briandennis/pen/zRbYpB.css"}) app.config.suppress_callback_exceptions = True app.scripts.config.serve_locally = True ################ Set up shared layout ################ root_layout = html.Div([ # original dcc.Location(id='url', refresh=True), html.Div( [ html.H1('dash_daq Dash Demo'), dcc.Link('Light Theme', href='/', refresh=True), dcc.Link('Dark Theme', href='/dark', refresh=True), ], style={ 'width': '80%', 'marginLeft': '10%', 'marginRight': '10%', 'display': 'flex', 'flexDirection': 'row', 'alignItems': 'center', 'justifyContent': 'space-between' }), html.Hr(), html.Div([ html.Div(id="page-content"), html.Div(
from dash import Dash, html, dcc import dash import dash_labs as dl app = Dash(__name__, plugins=[dl.plugins.pages]) dash.register_page("another_home", layout=html.Div("We're home!"), path="/") dash.register_page( "very_important", layout=html.Div("Don't miss it!"), path="/important", order=0 ) app.layout = html.Div( [ html.H1("App Frame"), html.Div( [ html.Div( dcc.Link(f"{page['name']} - {page['path']}", href=page["path"]) ) for page in dash.page_registry.values() if page["module"] != "pages.not_found_404" ] ), dl.plugins.page_container, ] ) if __name__ == "__main__": app.run_server(debug=True)