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() == []
