def test_tabs002_without_children(dash_dcc): app = Dash(__name__) app.layout = html.Div([ html.H1("Dash Tabs component demo"), dcc.Tabs( id="tabs", value="tab-2", children=[ dcc.Tab(label="Tab one", value="tab-1", id="tab-1"), dcc.Tab(label="Tab two", value="tab-2", id="tab-2"), ], ), html.Div(id="tabs-content"), ]) @app.callback( Output("tabs-content", "children"), [Input("tabs", "value")], ) def render_content(tab): if tab == "tab-1": return html.Div([html.H3("Test content 1")], id="test-tab-1") elif tab == "tab-2": return html.Div([html.H3("Test content 2")], id="test-tab-2") dash_dcc.start_server(app) dash_dcc.wait_for_text_to_equal("#tabs-content", "Test content 2") dash_dcc.percy_snapshot("Core initial tab - tab 2") dash_dcc.wait_for_element("#tab-1").click() dash_dcc.wait_for_text_to_equal("#tabs-content", "Test content 1") assert dash_dcc.get_logs() == []
def test_tabs001_in_vertical_mode(dash_dcc): app = Dash(__name__) app.layout = html.Div([ dcc.Tabs( id="tabs", value="tab-3", children=[ dcc.Tab( label="Tab one", value="tab-1", id="tab-1", children=[html.Div("Tab One Content")], ), dcc.Tab( label="Tab two", value="tab-2", id="tab-2", children=[html.Div("Tab Two Content")], ), dcc.Tab( label="Tab three", value="tab-3", id="tab-3", children=[html.Div("Tab Three Content")], ), ], vertical=True, ), html.Div(id="tabs-content"), ]) dash_dcc.start_server(app) dash_dcc.wait_for_text_to_equal("#tab-3", "Tab three") dash_dcc.percy_snapshot("Core Tabs - vertical mode") assert dash_dcc.get_logs() == []
def layout(self) -> dcc.Tabs: return dcc.Tabs(children=[ dcc.Tab( label="Cross section & map view", children=[ wcc.FlexBox( id=self.ids("layout"), children=[ html.Div(style={"flex": 1}, children=self.left_flexbox_layout), html.Div( style={"flex": 1.5}, children=self.cross_section_widgets_layout, ), ], ) ], ), dcc.Tab( label="Target Points", children=[html.Div(children=self.target_points_tab_layout)], ), dcc.Tab(label="Well Points", children=[self.well_points_tab_layout]), ])
def test_tabs004_without_value(dash_dcc): app = Dash(__name__) app.layout = html.Div([ html.H1("Dash Tabs component demo"), dcc.Tabs( id="tabs-without-value", children=[ dcc.Tab(label="Tab One", value="tab-1"), dcc.Tab(label="Tab Two", value="tab-2"), ], ), html.Div(id="tabs-content"), ]) @app.callback(Output("tabs-content", "children"), [Input("tabs-without-value", "value")]) def render_content(tab): if tab == "tab-1": return html.H3("Default selected Tab content 1") elif tab == "tab-2": return html.H3("Tab content 2") dash_dcc.start_server(app) dash_dcc.wait_for_text_to_equal("#tabs-content", "Default selected Tab content 1") dash_dcc.percy_snapshot("Core Tab 1 should be selected by default") assert dash_dcc.get_logs() == []
def test_cbsc003_callback_with_unloaded_async_component(dash_duo): app = Dash() app.layout = html.Div( children=[ dcc.Tabs( children=[ dcc.Tab( children=[ html.Button(id="btn", children="Update Input"), html.Div(id="output", children=["Hello"]), ] ), dcc.Tab(children=dash_table.DataTable(id="other-table")), ] ) ] ) @app.callback(Output("output", "children"), [Input("btn", "n_clicks")]) def update_out(n_clicks): if n_clicks is None: raise PreventUpdate return "Bye" dash_duo.start_server(app) dash_duo.wait_for_text_to_equal("#output", "Hello") dash_duo.find_element("#btn").click() dash_duo.wait_for_text_to_equal("#output", "Bye") assert dash_duo.get_logs() == []
def test_tabs005_disabled(dash_dcc): app = Dash(__name__, assets_folder="../../assets") app.layout = html.Div([ html.H1("Dash Tabs component with disabled tab demo"), dcc.Tabs( id="tabs-example", value="tab-2", children=[ dcc.Tab( label="Disabled Tab", value="tab-1", id="tab-1", className="test-custom-tab", disabled=True, ), dcc.Tab( label="Active Tab", value="tab-2", id="tab-2", className="test-custom-tab", ), ], ), html.Div(id="tabs-content-example"), ]) dash_dcc.start_server(app) dash_dcc.wait_for_element("#tab-2") dash_dcc.wait_for_element(".tab--disabled") assert dash_dcc.get_logs() == []
def get_dash_app(server, storage_type='memory'): # type: (flask.Flask, str) -> dash.Dash ''' Generate Dash Flask app instance. Args: server (Flask): Flask instance. storage_type (str): Storage type (used for testing). Default: memory. Returns: Dash: Dash app instance. ''' store = dcc.Store(id='store', storage_type=storage_type) icon = html.Img(id='icon', src='/assets/icon.svg') tabs = dcc.Tabs( id='tabs', className='tabs', value='plots', children=[ dcc.Tab(className='tab', label='plots', value='plots'), dcc.Tab(className='tab', label='data', value='data'), dcc.Tab(className='tab', label='config', value='config'), dcc.Tab(className='tab', label='api', value='api'), dcc.Tab(className='tab', label='docs', value='docs'), dcc.Tab(className='tab', label='monitor', value='monitor'), ], ) tabs = html.Div(id='tabs-container', children=[icon, tabs]) content = dcc.Loading( id="content", className='content', type="dot", fullscreen=True, ) # path to resources inside pip package assets = lbt.relative_path(__file__, "../resources") # path to resources inside repo if 'REPO_ENV' in os.environ.keys(): assets = lbt.relative_path(__file__, "../../../resources") app = dash.Dash( name='Shekels', title='Shekels', server=server, external_stylesheets=['/static/style.css'], assets_folder=assets, ) app.layout = html.Div(id='layout', children=[store, tabs, content]) app.config['suppress_callback_exceptions'] = True return app
def test_tabs003_without_children_undefined(dash_dcc): app = Dash(__name__) app.layout = html.Div([ html.H1("Dash Tabs component demo"), dcc.Tabs(id="tabs", value="tab-1"), html.Div(id="tabs-content"), ]) dash_dcc.start_server(app) dash_dcc.wait_for_element("#tabs-content") dash_dcc.percy_snapshot("Core Tabs component with children undefined") assert dash_dcc.get_logs() == []
def get_content(): reports_graph_content = get_graph_content() reports_content = [ dcc.Loading(id="loading-reports", children=[ dcc.Tabs( id='tabs-reports', value='0', children=reports_graph_content, vertical=True) ]), html.Button('Refresh', id='button-reports-refresh')] return reports_content
def get_layout(): qa_content = qa.get_content() activity_content = activity.get_content() stats_content = stats.get_content() reports_content = reports.get_content() report_content = [ html.Div( dcc.Tabs(id='tabs', value='1', vertical=False, children=[ dcc.Tab(label='QA', value='1', children=qa_content), dcc.Tab(label='Activity', value='2', children=activity_content), dcc.Tab(label='Stats', value='3', children=stats_content), dcc.Tab(label='Reports', value='4', children=reports_content), ]), #style={ # 'width': '100%', 'display': 'flex', # 'align-items': 'center', 'justify-content': 'left'} style={ 'width': '90%', 'display': 'flex', 'align-items': 'center', 'justify-content': 'center' }) ] footer_content = [ html.Hr(), html.H5('F: Failed'), html.H5('P: Passed QA'), html.H5('Q: To be determined') ] # Make the main app layout main_content = html.Div([ html.Div([html.H1('DAX Dashboard')]), html.Div(children=report_content, id='report-content'), html.Div(children=footer_content, id='footer-content') ]) return main_content
def serve_layout(): return html.Div([ html.A(id='api-help-link', children='?', href=f'{request.url_root}help' if has_request_context() else '', target='_blank', title='View the API documentation', style={ 'color': '#fff', 'background-color': '#f15A29', 'width': 16, 'height': 16, 'display': 'inline-block', 'border-radius': '100%', 'font-size': 16, 'text-align': 'center', 'text-decoration': 'none', 'box-shadow': 'inset -2px -2px 1px 0px rgba(0,0,0,0.25)', 'margin-left': '98%', 'margin-bottom': 4, }), dcc.Dropdown( id='omega-dropdown', options=dropdown_options, multi=True, placeholder='Select the OMEGA iServer(s)...', ), DatetimeRangePicker(id='datetime-range', **datetime_range_picker_kwargs(cfg)), dcc.Tabs( id='tabs', value='temperature', children=[ dcc.Tab(label='Current Readings', value='current-readings'), dcc.Tab(label='Temperature', value='temperature'), dcc.Tab(label='Humidity', value='humidity'), dcc.Tab(label='Dewpoint', value='dewpoint'), ], style={'display': 'inline-block'}, ), html.Div(id='plot-viewer'), html.Div(id='current-readings-viewer'), dcc.Interval( id='current-readings-interval', interval=cfg.value('current_readings/interval', 10) * 1000, ), ])
def test_tabs003_without_children_undefined(dash_dcc): app = Dash(__name__) app.layout = html.Div( [ html.H1("Dash Tabs component demo"), dcc.Tabs(id="tabs", value="tab-1"), html.Div(id="tabs-content"), ], id="app", ) dash_dcc.start_server(app) dash_dcc.wait_for_element("#tabs-content") assert dash_dcc.find_element("#app").text == "Dash Tabs component demo" assert dash_dcc.find_element(".tab-content").get_property("innerHTML") == "" assert dash_dcc.find_element("#tabs").get_property("innerHTML") == "" assert dash_dcc.find_element("#tabs-content").get_property("innerHTML") == "" assert dash_dcc.get_logs() == []
def get_global_comparison(self): return html.Div([ html.Br(), html.Br(), html.H2( "Global Benchmarks", style={ "textAlign": "center", "paddingLeft": "15%", "marginLeft": "-15%", }, ), html.Br(), html.Br(), dcc.Tabs( id="global_benchmarks", value="emissions_tab", children=[self.get_emissions_tab(), self.get_energy_mix_tab()], ), ])
def create_layout(app): # Actual layout of the app return html.Div( className="row", style={ "max-width": "100%", "font-size": "1.5rem", "padding": "0px 0px" }, children=[ # Header html.Div( className="row header", id="app-header", style={"background-color": "#f9f9f9"}, children=[ html.Div( [ html.Img( src=app.get_asset_url("bonn-logo.png"), className="logo", id="bonn-image", ) ], className="three columns header_img", ), html.Div( [ html.H3( "Visualizing the effects of domain shift on CNN based image segmentation", className="header_title", id="app-title", ) ], className="nine columns header_title_container", ), ], ), # Body dcc.Store(id='long_term_memory'), dcc.Store(id='reductor_memory'), dcc.Store(id='map-memory', data=(0, 0)), dcc.Store(id='side_click'), dcc.Store(id='model_path-memory'), dcc.Store(id='database_domains-memory'), dcc.Store(id='label_domains-memory'), dcc.Store(id='page-memory'), html.Div([ dcc.Tabs( id="tabs-styled-with-inline", value='tab-0', children=[ dcc.Tab(label='Tool setup', value='tab-0', style=tab_style, selected_style=tab_selected_style), dcc.Tab(label='Dimentionality reduction', value='tab-1', style=tab_style, selected_style=tab_selected_style), dcc.Tab(label='Feature map explorer', value='tab-2', style=tab_style, selected_style=tab_selected_style), # dcc.Tab(label='Autoencoder?', value='tab-3', style=tab_style, selected_style=tab_selected_style), dcc.Tab(label='About', value='tab-4', style=tab_style, selected_style=tab_selected_style), ], style=tabs_styles), html.Div(id='tabs-content-inline') ]), html.Div(id='user-cache', style={'display': 'none'}, children=json.dumps(initial_layout)), html.Div(id='invisible_text', style={'visible': 'False'}), ], )
def test_inin026_graphs_in_tabs_do_not_share_state(dash_duo): app = Dash(__name__, suppress_callback_exceptions=True) app.layout = html.Div([ dcc.Tabs( id="tabs", children=[ dcc.Tab(label="Tab 1", value="tab1", id="tab1"), dcc.Tab(label="Tab 2", value="tab2", id="tab2"), ], value="tab1", ), # Tab content html.Div(id="tab_content"), ]) tab1_layout = [ html.Div([ dcc.Graph( id="graph1", figure={ "data": [{ "x": [1, 2, 3], "y": [5, 10, 6], "type": "bar" }] }, ) ]), html.Pre(id="graph1_info"), ] tab2_layout = [ html.Div([ dcc.Graph( id="graph2", figure={ "data": [{ "x": [4, 3, 2], "y": [5, 10, 6], "type": "bar" }] }, ) ]), html.Pre(id="graph2_info"), ] @app.callback(Output("graph1_info", "children"), Input("graph1", "clickData")) def display_hover_data(hover_data): return json.dumps(hover_data) @app.callback(Output("graph2_info", "children"), Input("graph2", "clickData")) def display_hover_data_2(hover_data): return json.dumps(hover_data) @app.callback(Output("tab_content", "children"), Input("tabs", "value")) def render_content(tab): return tab2_layout if tab == "tab2" else tab1_layout dash_duo.start_server(app) dash_duo.find_element("#graph1:not(.dash-graph--pending)").click() until(lambda: '"label": 2' in dash_duo.find_element("#graph1_info").text, timeout=3) dash_duo.find_element("#tab2").click() dash_duo.find_element("#graph2:not(.dash-graph--pending)").click() until(lambda: '"label": 3' in dash_duo.find_element("#graph2_info").text, timeout=3)
def layout(): return html.Div( id='variantmap-body', className='app-body', children=[ html.Div( id='variantmap-control-tabs', className='control-tabs', children=[ dcc.Tabs( id='variantmap-tabs', value='what-is', children=[ # "What is" tab dcc.Tab( label='About', value='what-is', children=html.Div( className='control-tab', children=[ html.H4( className='what-is', children='What is VariantMap?'), html. P('VariantMap is a genomic structural variant (SV) visualization ' 'technique that displays variants across multiple samples in a ' 'single heatmap. Each row represents a sample and each column ' 'represents an SV breakend in the sample cohort. The colors ' 'indicate the class of an SV present in a sample. The ' 'heatmap can be customized interactively to suit your analysis ' 'by changing various components in the "Customize" tab.' ), html. P('VariantMap requires a dataframe object that is generated by ' 'VariantBreak. Do note that only NanoVar VCF ' 'files are currently compatible to work with VariantBreak in creating the ' 'dataframe.') ])), # Data tab dcc.Tab( label='Data', value='data', children=html.Div( className='control-tab', children=[ # Dataset upload html.Div( 'Upload dataset:', title= 'Upload your own dataset below.', className='app-controls-name'), html.Div( id='variantmap-file-upload', title= 'Upload your own VariantBreak generated HDF5 dataset here.', children=[ dcc.Upload( id='upload-data', className='control-upload', children=html.Div([ "Drag and drop your .h5 file or ", html.A("select file.") ]), accept='.hdf5,.h5', multiple=False) ]), html.Br(), # Label file upload html.Div( 'Upload label file:', title= 'This file is used to rename and sort samples.\nExample:\n#Default ' 'name<tab>Label\nS1<tab>SampleA\nS3<tab>SampleC\nS2<tab>SampleB', className='app-controls-name'), html.Div( id='variantmap-tsv-upload', title= 'Upload a .tsv file to rename and sort samples.\nExample:\n#Default ' 'name<tab>Label\nS1<tab>SampleA\nS3<tab>SampleC\nS2<tab>SampleB', children=[ dcc.Upload( id='upload-tsv', className='control-upload', children=html.Div([ "Drag and drop your .tsv file or ", html.A("select file.") ]), accept='.txt,.tsv,.csv', multiple=False) ]), html.Br(), # Sample selection check boxes html.Div( id='output-data-info', className= 'fullwidth-app-controls-name', children=[ dcc.Checklist( id="select-samples", style={'display': 'none'}), html.Br(), html.Button( id='submit-button-samples', style={'display': 'none'}) ]) ])), # Customize tab dcc.Tab( label='Customize', value='customize', children=html.Div( className='control-tab', children=[ html.Div( id='customize-tab', className= 'fullwidth-app-controls-name', children=[ dcc.Dropdown( id='sample_filt', style={'display': 'none'}), dcc.Dropdown( id='file_filt', style={'display': 'none'}), dcc.Dropdown( id='gene_names', style={'display': 'none'}), dcc.Input( id='input_index', style={'display': 'none'}), dcc.Checklist( id="select-genetype", style={'display': 'none'}), dcc.Checklist( id="select-feature", style={'display': 'none'}), dcc.Checklist( id="select-annotation", style={'display': 'none'}), dcc.Input( id='entries_size', style={'display': 'none'}), html.Button( id='submit-button', style={'display': 'none'}) ]) ])), # Variant info tab dcc.Tab( label='Variant info', value='info', children=html.Div( className='control-tab', children=[ html.Div( id='info-tab', className= 'fullwidth-app-controls-name', children=[ html.Div( 'Click on variant to display its information' ) ]) ])) ]) ]), dcc.Loading( className='dashbio-loading', children=html.Div( id='variantmap-wrapper', children=[ # Error message box html.Div(id='error-msg', style={ 'color': 'crimson', 'text-align': 'center', 'font-size': '18px' }), # Plot VariantMap figure html.Div(id='variantmap-fig', children=[ html.Div(dcc.Graph(id='variantmap'), style={'display': 'none'}) ]), # Plot Slider html.Div(id='batch-slider', children=[ html.Div('', style={ 'textAlign': 'center', }), html.Div(dcc.Slider(id='slider', ), style={'display': 'none'}) ]) ])), # Create Store component to store JSON of dataframe and metadata dcc.Store(id='memory'), # To store variant counts dcc.Store(id='count-store'), # To store custom settings dcc.Store(id='custom-store'), # To store name dictionary dcc.Store(id='name_dict'), # To store sample labels dcc.Store(id='sample_labels'), # To store sample order dcc.Store(id='sample_order') ])
'label': 'Batch', 'value': 'Batch' }, { 'label': 'peak_label', 'value': 'peak_label' }, { 'label': 'ms_file', 'value': 'ms_file' }] _layout = html.Div([ dcc.Tabs(id='ana-secondary-tab', value=_modules[0]._label, vertical=False, children=[ dcc.Tab( value=key, label=modules[key]._label, ) for key in modules.keys() ]), dcc.Dropdown(id='ana-file-types', options=[], placeholder='Types of files to include', multi=True), dcc.Dropdown(id='ana-peak-labels-include', options=[], placeholder='Include peak_labels', multi=True), dcc.Dropdown(id='ana-peak-labels-exclude', options=[], placeholder='Exclude peak_labels',
def get_content(): # The data will be pivoted by session to show a row per session and # a column per scan/assessor type, # the values in the column a string of characters # that represent the status of one scan or assesor, # the number of characters is the number of scans or assessors # the columns will be the merged # status column with harmonized values to be red/yellow/green/blue df = data.load_data() #print(df) dfp = qa_pivot(df) qa_graph_content = get_graph_content(dfp) # Get the rows and colums for the table qa_columns = [{"name": i, "id": i} for i in dfp.index.names] dfp.reset_index(inplace=True) qa_data = dfp.to_dict('rows') qa_content = [ dcc.Loading(id="loading-qa", children=[ html.Div(dcc.Tabs( id='tabs-qa', value='1', children=qa_graph_content, vertical=True))]), html.Button('Refresh Data', id='button-qa-refresh'), dcc.Dropdown( id='dropdown-qa-time', # Change filters to "Today", "this week", "last week", #"this month", "last month", "YTD", "past year", "last year" options=[ {'label': 'all time', 'value': 'ALL'}, {'label': '1 day', 'value': '1day'}, {'label': '1 week', 'value': '7day'}, {'label': '1 month', 'value': '30day'}, #{'label': 'this week', 'value': 'thisweek'}, #{'label': 'this month', 'value': 'thismonth'}, {'label': 'last month', 'value': 'lastmonth'}, {'label': '1 year', 'value': '365day'}], value='ALL'), dcc.RadioItems( options=[ {'label': 'Group by Project', 'value': 'PROJECT'}, {'label': 'Group by Site', 'value': 'SITE'}], value='PROJECT', id='radio-qa-groupby', labelStyle={'display': 'inline-block'}), dcc.Dropdown( id='dropdown-qa-proj', multi=True, placeholder='Select Project(s)'), dcc.Dropdown( id='dropdown-qa-sess', multi=True, placeholder='Select Session Type(s)'), dcc.Dropdown( id='dropdown-qa-proc', multi=True, placeholder='Select Processing Type(s)'), dcc.Dropdown( id='dropdown-qa-scan', multi=True, placeholder='Select Scan Type(s)'), dt.DataTable( columns=qa_columns, data=qa_data, filter_action='native', page_action='none', sort_action='native', id='datatable-qa', style_table={'overflowY': 'scroll', 'overflowX': 'scroll'}, style_cell={ 'textAlign': 'left', 'padding': '5px 5px 0px 5px', 'width': '30px', 'overflow': 'hidden', 'textOverflow': 'ellipsis', 'height': 'auto', 'minWidth': '40', 'maxWidth': '60'}, style_header={ #'width': '80px', 'backgroundColor': 'white', 'fontWeight': 'bold', 'padding': '5px 15px 0px 10px'}, fill_width=False, export_format='xlsx', export_headers='names', export_columns='visible')] return qa_content
dcc.Tabs( id='tabs', children=[ dcc.Tab(label='Control Panel', children=[ drc.NamedDropdown( name='Layout', id='dropdown-layout', options=drc.DropdownOptionsList( 'random', 'grid', 'circle', 'concentric', 'breadthfirst', 'cose', 'cose-bilkent', 'dagre', 'cola', 'klay', 'spread', 'euler'), value='grid', clearable=False), drc.NamedRadioItems( name='Expand', id='radio-expand', options=drc.DropdownOptionsList( 'followers', 'following'), value='followers') ]), dcc.Tab( label='JSON', children=[ html.Div(style=styles['tab'], children=[ html.P('Node Object JSON:'), html.Pre(id='tap-node-json-output', style=styles['json-output']), html.P('Edge Object JSON:'), html.Pre(id='tap-edge-json-output', style=styles['json-output']) ]) ]) ]),
def test_graph_does_not_resize_in_tabs(dash_dcc, is_eager): app = Dash(__name__, eager_loading=is_eager) app.layout = html.Div( [ html.H1("Dash Tabs component demo"), dcc.Tabs( id="tabs-example", value="tab-1-example", children=[ dcc.Tab(label="Tab One", value="tab-1-example", id="tab-1"), dcc.Tab(label="Tab Two", value="tab-2-example", id="tab-2"), dcc.Tab( label="Tab Three", value="tab-3-example", id="tab-3", disabled=True, disabled_className="disabled-tab", ), ], ), html.Div(id="tabs-content-example"), ] ) @app.callback( Output("tabs-content-example", "children"), [Input("tabs-example", "value")], ) def render_content(tab): if tab == "tab-1-example": return html.Div( [ html.H3("Tab content 1"), dcc.Graph( id="graph-1-tabs", figure={ "data": [{"x": [1, 2, 3], "y": [3, 1, 2], "type": "bar"}] }, ), ] ) elif tab == "tab-2-example": return html.Div( [ html.H3("Tab content 2"), dcc.Graph( id="graph-2-tabs", figure={ "data": [{"x": [1, 2, 3], "y": [5, 10, 6], "type": "bar"}] }, ), ] ) dash_dcc.start_server(app) tab_one = dash_dcc.wait_for_element("#tab-1") tab_two = dash_dcc.wait_for_element("#tab-2") # wait for disabled tab with custom className dash_dcc.wait_for_element("#tab-3.disabled-tab") WebDriverWait(dash_dcc.driver, 10).until( EC.element_to_be_clickable((By.ID, "tab-2")) ) # wait for Graph to be ready WebDriverWait(dash_dcc.driver, 10).until( EC.visibility_of_element_located((By.CSS_SELECTOR, "#graph-1-tabs .main-svg")) ) dash_dcc.percy_snapshot( "Tabs with Graph - initial (graph should not resize) ({})".format( "eager" if is_eager else "lazy" ) ) tab_two.click() # wait for Graph to be ready WebDriverWait(dash_dcc.driver, 10).until( EC.visibility_of_element_located((By.CSS_SELECTOR, "#graph-2-tabs .main-svg")) ) dash_dcc.percy_snapshot( "Tabs with Graph - clicked tab 2 (graph should not resize) ({})".format( "eager" if is_eager else "lazy" ) ) WebDriverWait(dash_dcc.driver, 10).until( EC.element_to_be_clickable((By.ID, "tab-1")) ) tab_one.click() # wait for Graph to be loaded after clicking WebDriverWait(dash_dcc.driver, 10).until( EC.visibility_of_element_located((By.CSS_SELECTOR, "#graph-1-tabs .main-svg")) ) dash_dcc.percy_snapshot( "Tabs with Graph - clicked tab 1 (graph should not resize) ({})".format( "eager" if is_eager else "lazy" ) ) assert dash_dcc.get_logs() == []
def test_grva006_unmounted_graph_resize(dash_dcc, is_eager): app = Dash(__name__, eager_loading=is_eager) app.layout = html.Div(children=[ dcc.Tabs( id="tabs", children=[ dcc.Tab( label="Tab one", children=[ html.Div( [ dcc.Graph( id="eg-graph-1", figure={ "data": [ { "x": [1, 2, 3], "y": [4, 1, 2], "type": "scattergl", "name": "SF", }, { "x": [1, 2, 3], "y": [2, 4, 5], "type": "scattergl", "name": "Montréal", }, ] }, ) ], id="graph-tab-1", ) ], ), dcc.Tab( label="Tab two", children=[ dcc.Graph( id="eg-graph-2", figure={ "data": [ { "x": [1, 2, 3], "y": [1, 4, 1], "type": "scattergl", "name": "SF", }, { "x": [1, 2, 3], "y": [1, 2, 3], "type": "scattergl", "name": "Montréal", }, ] }, ) ], id="graph-tab-2", ), ], ) ]) dash_dcc.start_server(app) try: dash_dcc.wait_for_element("#eg-graph-1") except Exception as e: print( dash_dcc.wait_for_element("#_dash-app-content").get_attribute( "innerHTML")) raise e WebDriverWait(dash_dcc.driver, 10).until(EC.element_to_be_clickable((By.ID, "graph-tab-2"))) tab_two = dash_dcc.wait_for_element("#graph-tab-2") tab_two.click() # save the current window size window_size = dash_dcc.driver.get_window_size() # resize dash_dcc.driver.set_window_size(800, 600) # set back to original size dash_dcc.driver.set_window_size(window_size["width"], window_size["height"]) assert dash_dcc.get_logs() == []
n_clicks=0, style={'height': '38px'}, className='button'), multiple=False, accept='.txt, .csv, .xlsx'), ], id='header', style={'display': 'flex', 'justifyContent': 'space-between', 'alignItems': 'center'}, ), html.Div([ html.Div([ html.Div([ dcc.Tabs([generate_weekday_tab(day) for day in days ], id='weekdays-tabs', value='tab-mon') ]), html.Div([ html.Div([ generate_tab_fig(day, 'tab-mon', None) for day in days ], id='weekdays-tabs-content', style={'width': '100%', 'display': 'block', 'marginLeft': 'auto', 'marginRight': 'auto', 'background': 'white'} ), ]), ]),
def get_content(): df = load_stats() if df.empty: _txt = 'No stats loaded.' logging.debug(_txt) stats_content = html.Div(_txt, style={ 'padding-top': '100px', 'padding-bottom': '200px', 'padding-left': '400px', 'padding-right': '400px' }) return stats_content stats_graph_content = get_graph_content(df) # Get the rows and colums for the table stats_columns = [{"name": i, "id": i} for i in df.columns] df.reset_index(inplace=True) stats_data = df.to_dict('rows') stats_content = [ dcc.Loading(id="loading-stats", children=[ html.Div( dcc.Tabs(id='tabs-stats', value='0', children=stats_graph_content, vertical=True)) ]), html.Button('Refresh Data', id='button-stats-refresh'), dcc.Dropdown(id='dropdown-stats-time', options=[{ 'label': 'all time', 'value': 'ALL' }, { 'label': '1 day', 'value': '1day' }, { 'label': '1 week', 'value': '7day' }, { 'label': '1 month', 'value': '30day' }, { 'label': '1 year', 'value': '365day' }], value='ALL'), dcc.Dropdown(id='dropdown-stats-proj', multi=True, placeholder='Select Project(s)'), dcc.Dropdown(id='dropdown-stats-proc', multi=True, placeholder='Select Type(s)'), dcc.RadioItems(options=[{ 'label': 'All Sessions', 'value': 'all' }, { 'label': 'Baseline Only', 'value': 'baseline' }, { 'label': 'Followup Only', 'value': 'followup' }], value='all', id='radio-stats-sesstype', labelStyle={'display': 'inline-block'}), dt.DataTable(columns=stats_columns, data=stats_data, filter_action='native', page_action='none', sort_action='native', id='datatable-stats', style_table={ 'overflowY': 'scroll', 'overflowX': 'scroll', 'width': '1000px' }, style_cell={ 'textAlign': 'left', 'padding': '5px 5px 0px 5px', 'width': '30px', 'overflow': 'hidden', 'textOverflow': 'ellipsis', 'height': 'auto', 'minWidth': '40', 'maxWidth': '60' }, style_header={ 'width': '80px', 'backgroundColor': 'white', 'fontWeight': 'bold', 'padding': '5px 15px 0px 10px' }, fill_width=False, export_format='xlsx', export_headers='names', export_columns='visible') ] return stats_content
'borderTop': '1px solid #d6d6d6', 'borderBottom': '1px solid #d6d6d6', 'backgroundColor': '#119DFF', 'color': 'white', 'padding': '6px' } app.layout = html.Div([ dcc.Tabs(id="tabs-flow-dash", value="tab-flows", children=[ dcc.Tab(label="Flow", value="tab-flows", style=TAB_STYLE, selected_style=TAB_SELECTED_STYLE, children=generate_tab_flow()), dcc.Tab(label="Other", value="tab-other", style=TAB_STYLE, selected_style=TAB_SELECTED_STYLE, children=generate_tab_other()), ], style=TABS_STYLES), html.Div(id="tabs-content") ]) def prettifyBytes(bytes_received): size_names = ['B', 'KB', 'MB', 'GB', 'TB'] if bytes_received == 0: i = 0
'label': 'True', 'value': 'True' }, { 'label': 'False', 'value': 'False' }], value=gui_params.shuffle_data.value_str #'False' ), style={'display': 'inline-block'}), ]), # return array of interactive sliders as a tab list (horizontal) html.Div( dcc.Tabs( vertical=False, children=[ gui_params.get_dcc_slider(obj) for obj in gui_params.tab_params_list # gui_setup.dcc_slider_wrapper(obj) for obj in gui_params.tab_params_list ]), ), ]) ]) # update gui sliders @app.callback([ Output(obj.container_id_str, 'children') for obj in gui_params.tab_params_list ], [Input(obj.slider_id_str, 'value') for obj in gui_params.tab_params_list]) def slider_strs_update(random_sample_size, svr_c, svr_epsilon, actual_func_k, actual_func_alpha, noise_offset, noise_scale): return ('random sample size: {value}'.format(value=random_sample_size),
dbc.Button("Download Data", id="btn_csv_map", style={'backgroundColor': '#716450'}, className="ml-3"), dcc.Download(id="download-dataframe-csv-map"), ] tabs = dcc.Tabs(id='tabs_map', value='map_maps', parent_className='custom-tabs', className='custom-tabs-container', children=[ dcc.Tab(label='Map', value='map_maps', className='custom-tab', selected_className='custom-tab--selected'), dcc.Tab(label='Metrics', value='map_metrics', className='custom-tab', selected_className='custom-tab--selected'), dcc.Tab(label='Graph', value='map_graphs', className='custom-tab', selected_className='custom-tab--selected'), ]) row = html.Div([ dbc.Row(navbar), dbc.Row([ dbc.Col(html.Div(sidebar_content), id='sidebar_map', width=3,
def init_app_layout( self, update_interval_seconds=3, max_monitors=10, dashboard_layouts=[], network_stylesheet=[], hide_default_edge=True, **kwargs, ): """ Initialises the overall dash app "layout" which has two sub-pages (Agent network and ML experiment) Parameters ---------- update_interval_seconds : float or int Auto refresh rate which the app queries the states of Agent Network to update the graphs and display max_monitors : int Due to complexity in managing and instantiating dynamic figures, a maximum number of monitors is specified first and only the each Monitor Agent will occupy one of these figures. It is not ideal, but will undergo changes for the better. Returns ------- app : Dash app object """ app = dash.Dash( __name__, external_stylesheets=self.external_stylesheets, external_scripts=self.external_scripts, ) app.network_stylesheet = network_stylesheet app.update_interval_seconds = update_interval_seconds app.num_monitors = max_monitors app.hide_default_edge = hide_default_edge for key in kwargs.keys(): setattr(app, key, kwargs[key]) # initialise dashboard layout objects self.dashboard_layouts = [ dashboard_layout(app) for dashboard_layout in dashboard_layouts ] app.layout = html.Div(children=[ # header html.Nav( [ html.Div( [ html.A( "Met4FoF Agent Testbed", className="brand-logo center", ), html.Ul([], className="right hide-on-med-and-down"), ], className="nav-wrapper container", ) ], className="light-blue lighten-1", ), dcc.Tabs( id="main-tabs", value="agt-net", children=[ dashboard_layout.dcc_tab for dashboard_layout in self.dashboard_layouts ], ), html.Div( id="page-div", children=[ dashboard_layout.get_layout() for dashboard_layout in self.dashboard_layouts ], ), ]) for dashboard_layout in self.dashboard_layouts: dashboard_layout.prepare_callbacks(app) @app.callback( [dash.dependencies.Output("page-div", "children")], [dash.dependencies.Input("main-tabs", "value")], ) def render_content(tab): for dashboard_layout in self.dashboard_layouts: if dashboard_layout.id == tab: return [dashboard_layout.get_layout()] return app
def test_cbsc004_callback_using_unloaded_async_component(dash_duo): app = Dash() app.layout = html.Div( [ dcc.Tabs( [ dcc.Tab("boo!"), dcc.Tab( dash_table.DataTable( id="table", columns=[{"id": "a", "name": "A"}], data=[{"a": "b"}], ) ), ] ), html.Button("Update Input", id="btn"), html.Div("Hello", id="output"), html.Div(id="output2"), ] ) @app.callback( Output("output", "children"), [Input("btn", "n_clicks")], [State("table", "data")], ) def update_out(n_clicks, data): return json.dumps(data) + " - " + str(n_clicks) @app.callback( Output("output2", "children"), [Input("btn", "n_clicks")], [State("table", "derived_viewport_data")], ) def update_out2(n_clicks, data): return json.dumps(data) + " - " + str(n_clicks) dash_duo.start_server(app) dash_duo.wait_for_text_to_equal("#output", '[{"a": "b"}] - None') dash_duo.wait_for_text_to_equal("#output2", "null - None") dash_duo.find_element("#btn").click() dash_duo.wait_for_text_to_equal("#output", '[{"a": "b"}] - 1') dash_duo.wait_for_text_to_equal("#output2", "null - 1") dash_duo.find_element(".tab:not(.tab--selected)").click() dash_duo.wait_for_text_to_equal("#table th", "A") # table props are in state so no change yet dash_duo.wait_for_text_to_equal("#output2", "null - 1") # repeat a few times, since one of the failure modes I saw during dev was # intermittent - but predictably so? for i in range(2, 10): expected = '[{"a": "b"}] - ' + str(i) dash_duo.find_element("#btn").click() dash_duo.wait_for_text_to_equal("#output", expected) # now derived props are available dash_duo.wait_for_text_to_equal("#output2", expected) assert dash_duo.get_logs() == []
def platter_app(): app = Dash(__name__) app.layout = html.Div([ html.Div(id="waitfor"), html.Label("Upload"), dcc.Upload(), html.Label("Horizontal Tabs"), dcc.Tabs( id="tabs", children=[ dcc.Tab( label="Tab one", className="test", style={"border": "1px solid magenta"}, children=[html.Div(["Test"])], ), dcc.Tab( label="Tab two", children=[ html.Div([ html.H1("This is the content in tab 2"), html.P("A graph here would be nice!"), ]) ], id="tab-one", ), dcc.Tab( label="Tab three", children=[ html.Div([html.H1("This is the content in tab 3")]) ], ), ], style={"fontFamily": "system-ui"}, content_style={ "border": "1px solid #d6d6d6", "padding": "44px" }, parent_style={ "maxWidth": "1000px", "margin": "0 auto" }, ), html.Label("Vertical Tabs"), dcc.Tabs( id="tabs1", vertical=True, children=[ dcc.Tab(label="Tab one", children=[html.Div(["Test"])]), dcc.Tab( label="Tab two", children=[ html.Div([ html.H1("This is the content in tab 2"), html.P("A graph here would be nice!"), ]) ], ), dcc.Tab( label="Tab three", children=[ html.Div([html.H1("This is the content in tab 3")]) ], ), ], ), html.Label("Dropdown"), dcc.Dropdown(options=OPTIONS, value="MTL", id="dropdown"), html.Label("Multi-Select Dropdown"), dcc.Dropdown(options=OPTIONS, value=["MTL", "SF"], multi=True), html.Label("Radio Items"), dcc.RadioItems(options=OPTIONS, value="MTL"), html.Label("Checkboxes"), dcc.Checklist(options=OPTIONS, value=["MTL", "SF"]), html.Label("Text Input"), dcc.Input(value="", placeholder="type here", id="textinput"), html.Label("Disabled Text Input"), dcc.Input( value="disabled", type="text", id="disabled-textinput", disabled=True, ), html.Label("Slider"), dcc.Slider( min=0, max=9, marks={i: f"Label {i}" if i == 1 else str(i) for i in range(1, 6)}, value=5, ), html.Label("Graph"), dcc.Graph( id="graph", figure={ "data": [{ "x": [1, 2, 3], "y": [4, 1, 4] }], "layout": { "title": "北京" }, }, ), html.Div([ html.Label("DatePickerSingle"), dcc.DatePickerSingle(id="date-picker-single", date=datetime(1997, 5, 10)), html.Div( [ html.Label("DatePickerSingle - empty input"), dcc.DatePickerSingle(), ], id="dt-single-no-date-value", ), html.Div( [ html.Label( "DatePickerSingle - initial visible month (May 97)"), dcc.DatePickerSingle( initial_visible_month=datetime(1997, 5, 10)), ], id="dt-single-no-date-value-init-month", ), ]), html.Div([ html.Label("DatePickerRange"), dcc.DatePickerRange( id="date-picker-range", start_date_id="startDate", end_date_id="endDate", start_date=datetime(1997, 5, 3), end_date_placeholder_text="Select a date!", ), html.Div( [ html.Label("DatePickerRange - empty input"), dcc.DatePickerRange( start_date_id="startDate", end_date_id="endDate", start_date_placeholder_text="Start date", end_date_placeholder_text="End date", ), ], id="dt-range-no-date-values", ), html.Div( [ html.Label( "DatePickerRange - initial visible month (May 97)"), dcc.DatePickerRange( start_date_id="startDate", end_date_id="endDate", start_date_placeholder_text="Start date", end_date_placeholder_text="End date", initial_visible_month=datetime(1997, 5, 10), ), ], id="dt-range-no-date-values-init-month", ), ]), html.Label("TextArea"), dcc.Textarea(placeholder="Enter a value... 北京", style={"width": "100%"}), html.Label("Markdown"), dcc.Markdown(""" #### Dash and Markdown Dash supports [Markdown](https://rexxars.github.io/react-markdown/). Markdown is a simple way to write and format text. It includes a syntax for things like **bold text** and *italics*, [links](https://rexxars.github.io/react-markdown/), inline `code` snippets, lists, quotes, and more. 1. Links are auto-rendered: https://dash.plotly.com. 2. This uses ~commonmark~ GitHub flavored markdown. Tables are also supported: | First Header | Second Header | | ------------- | ------------- | | Content Cell | Content Cell | | Content Cell | Content Cell | 北京 """.replace(" ", "")), dcc.Markdown(["# Line one", "## Line two"]), dcc.Markdown(), dcc.Markdown(""" ```py import python print(3) ```"""), dcc.Markdown(["```py", "import python", "print(3)", "```"]), dcc.Markdown(), ]) yield app
def test_tabs_render_without_selected(dash_dcc, is_eager): app = Dash(__name__, eager_loading=is_eager) menu = html.Div([html.Div("one", id="one"), html.Div("two", id="two")]) tabs_one = html.Div( [dcc.Tabs([dcc.Tab(dcc.Graph(id="graph-one"), label="tab-one-one")])], id="tabs-one", style={"display": "none"}, ) tabs_two = html.Div( [dcc.Tabs([dcc.Tab(dcc.Graph(id="graph-two"), label="tab-two-one")])], id="tabs-two", style={"display": "none"}, ) app.layout = html.Div([menu, tabs_one, tabs_two]) for i in ("one", "two"): @app.callback(Output("tabs-{}".format(i), "style"), [Input(i, "n_clicks")]) def on_click_update_tabs(n_clicks): if n_clicks is None: raise PreventUpdate if n_clicks % 2 == 1: return {"display": "block"} return {"display": "none"} @app.callback(Output("graph-{}".format(i), "figure"), [Input(i, "n_clicks")]) def on_click_update_graph(n_clicks): if n_clicks is None: raise PreventUpdate return { "data": [{"x": [1, 2, 3, 4], "y": [4, 3, 2, 1]}], "layout": {"width": 700, "height": 450}, } dash_dcc.start_server(app) button_one = dash_dcc.wait_for_element("#one") button_two = dash_dcc.wait_for_element("#two") button_one.click() # wait for tabs to be loaded after clicking WebDriverWait(dash_dcc.driver, 10).until( EC.visibility_of_element_located((By.CSS_SELECTOR, "#graph-one .main-svg")) ) time.sleep(1) dash_dcc.percy_snapshot( "Tabs-1 rendered ({})".format("eager" if is_eager else "lazy") ) button_two.click() # wait for tabs to be loaded after clicking WebDriverWait(dash_dcc.driver, 10).until( EC.visibility_of_element_located((By.CSS_SELECTOR, "#graph-two .main-svg")) ) time.sleep(1) dash_dcc.percy_snapshot( "Tabs-2 rendered ({})".format("eager" if is_eager else "lazy") ) # do some extra tests while we're here # and have access to Graph and plotly.js check_graph_config_shape(dash_dcc) assert dash_dcc.get_logs() == []