def __init__(
self,
label: str = None,
vertical: bool = True,
className: str = "",
wrapper_id: str = None,
persistence: bool = True,
persistence_type: str = "session",
**kwargs: Any,
) -> None:
super().__init__()
if wrapper_id is not None:
self.id = wrapper_id
children = [html.Label(label)] if label else []
children.append(
dcc.RadioItems(
persistence=persistence,
persistence_type=persistence_type,
className=className + " webviz-block-options"
if vertical
else className,
**kwargs,
)
)
self.children = html.Div(style={"fontSize": "15px"}, children=children)
def test_cbsc011_one_call_for_multiple_outputs_initial(dash_duo):
app = Dash(__name__)
call_count = Value("i", 0)
app.layout = html.Div(
[
html.Div(
[
dcc.Input(value="Input {}".format(i), id="input-{}".format(i))
for i in range(10)
]
),
html.Div(id="container"),
dcc.RadioItems(),
]
)
@app.callback(
Output("container", "children"),
[Input("input-{}".format(i), "value") for i in range(10)],
)
def dynamic_output(*args):
call_count.value += 1
return json.dumps(args)
dash_duo.start_server(app)
dash_duo.wait_for_text_to_equal("#input-9", "Input 9")
dash_duo.wait_for_contains_text("#container", "Input 9")
assert call_count.value == 1
inputs = [f'"Input {i}"' for i in range(10)]
expected = f'[{", ".join(inputs)}]'
dash_duo.wait_for_text_to_equal("#container", expected)
assert dash_duo.get_logs() == []
def test_cbsc011_one_call_for_multiple_outputs_initial(dash_duo):
app = Dash(__name__)
call_count = Value("i", 0)
app.layout = html.Div(
[
html.Div(
[
dcc.Input(value="Input {}".format(i), id="input-{}".format(i))
for i in range(10)
]
),
html.Div(id="container"),
dcc.RadioItems(),
]
)
@app.callback(
Output("container", "children"),
[Input("input-{}".format(i), "value") for i in range(10)],
)
def dynamic_output(*args):
call_count.value += 1
return json.dumps(args, indent=2)
dash_duo.start_server(app)
dash_duo.wait_for_text_to_equal("#input-9", "Input 9")
dash_duo.wait_for_contains_text("#container", "Input 9")
assert call_count.value == 1
dash_duo.percy_snapshot("test_rendering_layout_calls_callback_once_per_output")
def renovationFeatDash():
return dcc.RadioItems(
['Улучшенная черновая отделка', 'Косметический ремонт',
'Современный ремонт', 'Частичный ремонт', 'Требует ремонта',
'Ремонт по дизайн проекту', 'Черновая отделка'],
id='renovation'
)
def left_flexbox_layout(self) -> html.Div:
return html.Div(children=[
wcc.FlexBox(
children=[
dcc.RadioItems(
labelStyle={"display": "inline-block"},
options=[
{
"label": "Map view",
"value": "map-view"
},
{
"label": "Surface picks table",
"value": "table-view"
},
],
id=self.ids("map-table-radioitems"),
value="map-view",
persistence=True,
persistence_type="session",
)
],
style={"padding": "5px"},
),
html.Div(
id=self.ids("hidden-div-map-view"),
children=[self.map_view_layout]
), # Hidden div to store polyline points when in table view
html.Div(
id=self.ids("hidden-div-table-view"),
children=[self.table_view_layout],
),
])
def vector_selector(get_uuid: Callable,
vectormodel: SimulationTimeSeriesModel) -> html.Div:
first_vector_group: str = ("Field" if "Field" in list(
vectormodel.vector_groups.keys()) else list(
vectormodel.vector_groups.keys())[0])
return html.Div(
style={"margin": "10px 0px"},
children=[
html.Span(wcc.Label("Vector type")),
html.Div(
id=get_uuid("vtype-container"),
children=[
dcc.RadioItems(
id={
"id": get_uuid("vtype-select"),
"state": "initial"
},
options=[{
"label": i,
"value": i
} for i in vectormodel.vector_groups],
value=first_vector_group,
labelStyle={
"display": "inline-block",
"margin-right": "10px"
},
)
],
),
html.Div(
style={"margin-top": "5px"},
children=[
html.Span(wcc.Label("Vector")),
html.Div(
id=get_uuid("vshort-container"),
children=[
wcc.Dropdown(
id=get_uuid("vshort-select"),
options=[{
"label": i,
"value": i
} for i in vectormodel.
vector_groups[first_vector_group]
["shortnames"]],
value=vectormodel.vector_groups[
first_vector_group]["shortnames"][0],
placeholder="Select a vector...",
clearable=False,
),
],
),
],
),
html.Div(id=get_uuid("vitems-container"), children=[]),
html.Div(id=get_uuid("vector-select"), style={"display": "none"}),
html.Div(id=get_uuid("clickdata-store"), style={"display":
"none"}),
],
)
def LabeledRadioItems(label, id, help_text='', max_width=400, **kwargs):
"""'max_width' specifies the maximum width of the Div containing all of these components.
"""
return html.Div(className='labeled-comp',
id=f'div-{id}',
style={'maxWidth': max_width},
children=[
make_label(label, id, help_text),
dcc.RadioItems(id=id, **kwargs)
])
def test_cbmt011_callbacks_triggered_on_generated_output(dash_duo):
app = Dash(__name__, suppress_callback_exceptions=True)
call_counts = {"tab1": Value("i", 0), "tab2": Value("i", 0)}
app.layout = html.Div(
[
dcc.Dropdown(
id="outer-controls",
options=[{"label": i, "value": i} for i in ["a", "b"]],
value="a",
),
dcc.RadioItems(
options=[
{"label": "Tab 1", "value": 1},
{"label": "Tab 2", "value": 2},
],
value=1,
id="tabs",
),
html.Div(id="tab-output"),
]
)
@app.callback(Output("tab-output", "children"), Input("tabs", "value"))
def display_content(value):
return html.Div([html.Div(id="tab-{}-output".format(value))])
@app.callback(Output("tab-1-output", "children"), Input("outer-controls", "value"))
def display_tab1_output(value):
call_counts["tab1"].value += 1
return 'Selected "{}" in tab 1'.format(value)
@app.callback(Output("tab-2-output", "children"), Input("outer-controls", "value"))
def display_tab2_output(value):
call_counts["tab2"].value += 1
return 'Selected "{}" in tab 2'.format(value)
dash_duo.start_server(app)
dash_duo.wait_for_text_to_equal("#tab-output", 'Selected "a" in tab 1')
dash_duo.wait_for_text_to_equal("#tab-1-output", 'Selected "a" in tab 1')
assert call_counts["tab1"].value == 1
assert call_counts["tab2"].value == 0
dash_duo.find_elements('input[type="radio"]')[1].click()
dash_duo.wait_for_text_to_equal("#tab-output", 'Selected "a" in tab 2')
dash_duo.wait_for_text_to_equal("#tab-2-output", 'Selected "a" in tab 2')
assert call_counts["tab1"].value == 1
assert call_counts["tab2"].value == 1
assert not dash_duo.get_logs()
def periodDiv(self):
period_input = dcc.RadioItems(
id=self.date_div_period_id,
options=[
{"label": "Week", "value": "week"},
{"label": "Month", "value": "month"},
{"label": "Quarter", "value": "semestre"},
{"label": "Annual", "value": "annual"},
],
value="month",
style={"fontSize": "medium"},
)
return period_input
def test_cbsc012_one_call_for_multiple_outputs_update(dash_duo):
app = Dash(__name__, suppress_callback_exceptions=True)
call_count = Value("i", 0)
app.layout = html.Div(
[
html.Button(id="display-content", children="Display Content"),
html.Div(id="container"),
dcc.RadioItems(),
]
)
@app.callback(Output("container", "children"), Input("display-content", "n_clicks"))
def display_output(n_clicks):
if not n_clicks:
return ""
return html.Div(
[
html.Div(
[
dcc.Input(value="Input {}".format(i), id="input-{}".format(i))
for i in range(10)
]
),
html.Div(id="dynamic-output"),
]
)
@app.callback(
Output("dynamic-output", "children"),
[Input("input-{}".format(i), "value") for i in range(10)],
)
def dynamic_output(*args):
call_count.value += 1
return json.dumps(args)
dash_duo.start_server(app)
dash_duo.find_element("#display-content").click()
dash_duo.wait_for_text_to_equal("#input-9", "Input 9")
assert call_count.value == 1
inputs = [f'"Input {i}"' for i in range(10)]
expected = f'[{", ".join(inputs)}]'
dash_duo.wait_for_text_to_equal("#dynamic-output", expected)
assert dash_duo.get_logs() == []
def NamedInlineRadioItems(name, short, options, val, **kwargs):
return html.Div(
id=f"div-{short}",
style={"display": "inline-block"},
children=[
f"{name}:",
dcc.RadioItems(
id=f"radio-{short}",
options=options,
value=val,
labelStyle={
"display": "inline-block",
"margin-right": "7px"
},
style={
"display": "inline-block",
"margin-left": "7px"
},
),
],
)
def test_mdcap001_dcc_components_as_props(dash_dcc):
app = Dash(__name__)
app.layout = html.Div(
[
dcc.Checklist(
[
{"label": html.H2("H2 label"), "value": "h2"},
{"label": html.A("Link in checklist", href="#"), "value": "a"},
],
id="checklist",
),
dcc.RadioItems(
[
{"label": html.H3("on"), "value": "on"},
{"label": html.P("off"), "value": "off"},
],
id="radio-items",
),
dcc.Dropdown(
[
{"label": html.H4("h4"), "value": "h4"},
{"label": html.H6("h6"), "value": "h6"},
],
id="dropdown",
),
]
)
dash_dcc.start_server(app)
dash_dcc.wait_for_text_to_equal("#checklist h2", "H2 label")
dash_dcc.wait_for_text_to_equal("#checklist a", "Link in checklist")
dash_dcc.wait_for_text_to_equal("#radio-items h3", "on")
dash_dcc.wait_for_text_to_equal("#radio-items p", "off")
dash_dcc.find_element("#dropdown").click()
dash_dcc.wait_for_text_to_equal("#dropdown h4", "h4")
dash_dcc.wait_for_text_to_equal("#dropdown h6", "h6")
def _sub_layouts(self):
graph = html.Div(
[
dcc.Graph(
figure=go.Figure(layout=XASComponent.empty_plot_style),
config={"displayModeBar": False},
)
],
id=self.id("xas-div"),
)
element_selector = html.Div([
html.P("Select an Element:"),
dcc.RadioItems(
id=self.id("element-selector"),
options=[],
inputClassName="mpc-radio",
labelClassName="mpc-radio",
),
])
return {"graph": graph, "element_selector": element_selector}
# Instructions paragraph
html.Div([
html.
P('This web app is an example to showcase how to deploy using heroku and dash'
)
],
className='Instructions'),
# Radio to change the parameters
html.Div([
html.Label('Radio Items'),
dcc.RadioItems(id="university-input",
options=[{
'label': 'University of Aberdeen',
'value': 'UoA'
}, {
'label': 'Robert Gordon University',
'value': 'RGU'
}],
value='UoA',
labelStyle={"display": "block"})
]),
# Container for the plot
html.Div([dcc.Graph(id="plot-universities")], className='plot-section')
])
# App callbacks
@app.callback(
Output(component_id='plot-universities', component_property='figure'),
[Input(component_id='university-input', component_property='value')])
available_indicators = df['Indicator Name'].unique()
app.layout = html.Div([
html.Div([
html.Div([
dcc.Dropdown(id='xaxis-column',
options=[{
'label': i,
'value': i
} for i in available_indicators],
value='Fertility rate, total (births per woman)'),
dcc.RadioItems(id='xaxis-type',
options=[{
'label': i,
'value': i
} for i in ['Linear', 'Log']],
value='Linear',
labelStyle={'display': 'inline-block'})
],
style={
'width': '48%',
'display': 'inline-block'
}),
html.Div([
dcc.Dropdown(id='yaxis-column',
options=[{
'label': i,
'value': i
} for i in available_indicators],
value='Life expectancy at birth, total (years)'),
dbc.Row(
dbc.Col(
[
dbc.Label(
"Select Data Set:",
className="fw-bold",
style={
"textDecoration": "underline",
"fontSize": 20
},
),
dcc.RadioItems(
id="radio-indicator",
options=[{
"label": i,
"value": i
} for i in indicators.values()],
value=list(indicators.values())[0],
inputClassName="me-2",
),
],
width=4,
)),
dbc.Row([
dbc.Col(
[
dbc.Label(
"Select Years:",
className="fw-bold",
style={
"textDecoration": "underline",
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
all_options = {
'America': ['New York City', 'San Francisco', 'Cincinnati'],
'Canada': [u'Montréal', 'Toronto', 'Ottawa']
}
app.layout = html.Div([
dcc.RadioItems(id='countries-radio',
options=[{
'label': k,
'value': k
} for k in all_options.keys()],
value='America'),
html.Hr(),
dcc.RadioItems(id='cities-radio'),
html.Hr(),
html.Div(id='display-selected-values')
])
# set the available options for the cities based on the country
@app.callback(Output('cities-radio', 'options'),
Input('countries-radio', 'value'))
def set_cities_options(selected_country):
return [{'label': i, 'value': i} for i in all_options[selected_country]]
def div_graph_daq():
"""
Generates an HTML div that contains the DAQ graph
and the display options
"""
return html.Div(
[
# Graph division
html.Div(id='div-graph-daq',
className='nine columns',
style={'margin-left': '10px'}),
# List of options for the graph display
html.Div(
[
# Dropdown to choose the file from which to extract the data
dcc.Dropdown(id='dropdown-file-selection',
clearable=False,
searchable=True,
style={'margin-top': '10px'}),
# Selection of the amount of time to represent (not great)
html.Div([
html.Div([
dcc.Input(id='input-time-range',
value=1,
type='number',
style={"width": "100%"})
],
style={'margin-top': '10px'},
className='six columns'),
html.Div([
dcc.Dropdown(id='dropdown-time-range',
clearable=False,
searchable=True,
options=[{
'label': 'second(s)',
'value': 'seconds'
}, {
'label': 'minute(s)',
'value': 'minutes'
}, {
'label': 'hour(s)',
'value': 'hours'
}, {
'label': 'day(s)',
'value': 'days'
}],
value='hours',
style={"width": "100%"})
],
style={'margin-top': '10px'},
className='six columns')
],
style={'margin-bottom': '10px'},
className='twelve columns'),
# Box that shows the elapsed time
html.Div(id="div-time-display",
style={'margin-top': '10px'}),
# Choice of graph display type (overlapped or separated)
html.Div([
html.H6("Display mode",
style={
'font-weight': 'bold',
'margin-bottom': '0px',
'margin-top': '10px'
}),
dcc.RadioItems(options=[{
'label': ' Separate (Vertical)',
'value': 'separate_vertical'
}, {
'label': ' Separate (Horizontal)',
'value': 'separate_horizontal'
}, {
'label': ' Overlapping',
'value': 'overlap'
}],
value='separate_vertical',
id='radio-display-mode-daq',
style={'margin-left': '5px'})
]),
# Checklist of the measurements to plot and their last readings
html.Div([
html.Div([
html.H6("Display selection",
style={
'font-weight': 'bold',
'margin-bottom': '0px'
}),
dcc.Checklist(options=[],
value=[],
id='checklist-display-options-daq',
style={'margin-left': '5px'})
],
className='six columns'),
html.Div(id='div-last-daq-value',
className='six columns')
],
className='row',
style={
'margin-top': '0px',
'position': 'relative'
})
],
className='three columns'),
],
className="row",
style={
"border-radius": "5px",
"border-width": "5px",
"border": "2px solid rgb(216, 216, 216)",
"position": "relative",
"height": "480px"
})
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(
html.Div(children=[
dcc.RadioItems(
id='radio_item',
options=[
{
'label': 'Análise diária',
'value': 'dia'
},
{
'label': 'Análise mensal',
'value': 'mes'
},
],
value='dia',
labelStyle={
'width': '8%',
'display': 'inline-block'
},
),
html.Div(
children=dcc.Graph(
id='gauge_total_calls',
figure=plot5,
#config={"displayModeBar": False},
),
style={
df = pd.read_csv("https://plotly.github.io/datasets/country_indicators.csv")
app.layout = html.Div(
[
html.Div(
[
html.Div(
[
dcc.Dropdown(
df["Indicator Name"].unique(),
"Fertility rate, total (births per woman)",
id="xaxis-column",
),
dcc.RadioItems(
["Linear", "Log"], "Linear", id="xaxis-type", inline=True
),
],
style={"width": "48%", "display": "inline-block"},
),
html.Div(
[
dcc.Dropdown(
df["Indicator Name"].unique(),
"Life expectancy at birth, total (years)",
id="yaxis-column",
),
dcc.RadioItems(
["Linear", "Log"], "Linear", id="yaxis-type", inline=True
),
],
'Actual Function (Logarithmic Spiral): c(t) = <[alpha * e^(k * t) * cos(t)], [alpha * e^(k * t) * sin(t)]>',
style={'textAlign': 'left'}),
html.Div([
# plot
html.Div(html.Div(id=gui_params.graph_container_id.comp_id_str), ),
# determine if data should be random or fixed with a seed
html.Div([
html.Div(html.P(gui_params.shuffle_data.additional_value_str),
style={'display': 'inline-block'}),
html.Div(
dcc.RadioItems(
id=gui_params.shuffle_data.comp_id_str,
options=[{
'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
html.H2('Field Plot'),
html.Label('Plotting Options:'),
html.Label('Field Component:'),
dcc.Dropdown(
id='yaxis-column-field',
options=['Bx', 'By', 'Bz'],
value='Bz',
multi=False,
#style=desc_style,
),
html.Label('Field value or gradient?'),
dcc.RadioItems(
id='yaxis-type-field',
options=[{
'label': i,
'value': i
} for i in ['B_i', 'grad_z(B_i)']],
value='B_i',
labelStyle={'display': 'inline-block'},
#style=desc_style,
),
html.Label('Include TS/DS Contribution?'),
dcc.RadioItems(
id='include-TS-field',
options=[{
'label': i,
'value': i
} for i in ['yes', 'no']],
value='yes',
labelStyle={'display': 'inline-block'},
#style=desc_style,
),
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
html.Br(),
html.Br(),
dcc.Link('Global Caseload and Mortality by Country', href='/index_page'),
html.Br(),
html.Br(),
dcc.Link('Compare 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.RadioItems(id='radio-button',options=[{'label': 'Region', 'value': 'r'},
{'label': 'County', 'value': 'c'}
],
value='r'),
html.Br(),
html.Br(),
dcc.Graph(id='vaccines-graph')
])
# Update the pages index
@app.callback(dash.dependencies.Output('page-content', 'children'),
[dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
if pathname == '/compare':
return page_1_layout
elif pathname == '/report':
return page_2_layout
dbc.Row(
[
dbc.Col(
[
html.Div([
html.P('X options: '),
dcc.RadioItems(
id='x_type',
options=[
{
'label': ' Energy (eV)',
'value': 'energy'
},
{
'label': ' Wavelength (\u212B)',
'value': 'lambda'
},
{
'label': ' Time-of-flight (\u03BCs)',
'value': 'time'
},
],
value='energy',
# n_clicks_timestamp=0,
)
]),
],
width=3),
dbc.Col(
[
html.Div([
})
]),
dbc.Col([
html.H1('Open Seating Restaurant Tracker',
style={'textAlign': 'center'}),
],
width=11)
]),
dbc.Row([
dbc.Col([
html.Label('Approved for Sidewalk Seating:', className='mt-5'),
dcc.RadioItems(id='sidewalk-seating',
options=[{
'label': 'yes',
'value': 'yes'
}, {
'label': 'no',
'value': 'no'
}],
value='yes',
inputClassName="mx-1"),
html.Label('Approved for Roadway Seating:', className='mt-2'),
dcc.RadioItems(id='roadway-seating',
options=[{
'label': 'yes',
'value': 'yes'
}, {
'label': 'no',
'value': 'no'
}],
value='no',
inputClassName="mx-1"),
"value": "SF"
},
],
value=["MTL", "SF"],
multi=True,
),
html.Label("Radio Items"),
dcc.RadioItems(
options=[
{
"label": "New York City",
"value": "NYC"
},
{
"label": u"Montréal",
"value": "MTL"
},
{
"label": "San Francisco",
"value": "SF"
},
],
value="MTL",
),
html.Label("Checkboxes"),
dcc.Checklist(
options=[
{
"label": "New York City",
"value": "NYC"
},
def yardTypeFeatDash():
return dcc.RadioItems(
['открытый двор', 'закрытый двор'],
id='yardType'
)
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_cbmo004_removing_element_while_waiting_to_update(dash_duo):
app = Dash(__name__, suppress_callback_exceptions=True)
app.layout = html.Div([
dcc.RadioItems(
id="toc",
options=[{
"label": i,
"value": i
} for i in ["1", "2"]],
value="1",
),
html.Div(id="body"),
])
call_counts = {"body": Value("i", 0), "button-output": Value("i", 0)}
lock = Lock()
@app.callback(Output("body", "children"), Input("toc", "value"))
def update_body(chapter):
call_counts["body"].value += 1
if chapter == "1":
return [
html.Div("Chapter 1", id="ch1-title"),
html.Button("clicking this button takes forever", id="button"),
html.Div(id="button-output"),
]
elif chapter == "2":
return "Chapter 2"
else:
raise Exception("chapter is {}".format(chapter))
@app.callback(Output("button-output", "children"),
Input("button", "n_clicks"))
def this_callback_takes_forever(n_clicks):
if not n_clicks:
# initial value is quick, only new value is slow
# also don't let the initial value increment call_counts
return "Initial Value"
with lock:
call_counts["button-output"].value += 1
return "New value!"
dash_duo.start_server(app)
dash_duo.wait_for_text_to_equal("#ch1-title", "Chapter 1")
assert call_counts["body"].value == 1
# while that callback is resolving, switch the chapter,
# hiding the `button-output` tag
def chapter2_assertions():
dash_duo.wait_for_text_to_equal("#body", "Chapter 2")
layout = dash_duo.driver.execute_script(
"return JSON.parse(JSON.stringify("
"window.store.getState().layout"
"))")
dcc_radio = layout["props"]["children"][0]
html_body = layout["props"]["children"][1]
assert dcc_radio["props"]["id"] == "toc"
assert dcc_radio["props"]["value"] == "2"
assert html_body["props"]["id"] == "body"
assert html_body["props"]["children"] == "Chapter 2"
with lock:
dash_duo.find_element("#button").click()
(dash_duo.find_elements('input[type="radio"]')[1]).click()
chapter2_assertions()
assert call_counts["button-output"].value == 0
until(lambda: call_counts["button-output"].value == 1, 3)
dash_duo._wait_for_callbacks()
chapter2_assertions()
assert not dash_duo.get_logs()
