def test_slsh002_sliders_marks_si_unit_format(dash_dcc):
LAYOUT = []
# Showing SI Units
LAYOUT.extend(
[
html.Div(
"Testing SI units",
style={"marginBottom": 10, "marginTop": 30},
),
]
)
for n in range(-20, 20):
min = 0
max = pow(10, n)
LAYOUT.extend(
[
html.Div(
[
html.B(
f"min={min}, max={max}(=10^{n})",
style={"marginBottom": 15, "marginTop": 25},
),
(
html.Div(
"(Known issue: Slider does not seem to work for precision below 10^(-6))"
)
if n <= -6
else None
),
html.Div("value is undefined"),
dcc.Slider(min, max),
dcc.RangeSlider(min, max),
html.Div(f"value=0.4 * 10^{n}"),
dcc.Slider(min, max, value=0.4 * max),
dcc.RangeSlider(min, max, value=[0.2 * max, 0.4 * max]),
html.Div(f"value=0.5 * 10^{n}"),
dcc.Slider(min, max, value=0.5 * max),
dcc.RangeSlider(min, max, value=[0.2 * max, 0.5 * max]),
]
)
]
)
app = Dash(__name__)
app.layout = html.Div(LAYOUT)
dash_dcc.start_server(app)
dash_dcc.wait_for_element(".rc-slider")
dash_dcc.percy_snapshot("slsh002 - test_slsh002_sliders_marks_si_unit_format", True)
def namedSlider(name, **kwargs):
return html.Div(
# style={'padding': '10px 10px 15px 4px'},
children=[
html.P(f'{name}:'),
html.Div(dcc.Slider(**kwargs), style={'margin-left': '3px'})
])
def test_slsl015_range_slider_step_none(dash_dcc):
app = Dash(__name__)
app.layout = html.Div(
[
html.Label("Steps = Marks Slider"),
dcc.Slider(
id="none-step-slider",
min=0,
max=6,
marks={
i: f"Label {i}" if i == 1 else str(i)
for i in range(1, 6)
},
step=None,
value=4.6,
vertical=False,
),
],
style={"height": "500px"},
)
dash_dcc.start_server(app)
dash_dcc.wait_for_element("#none-step-slider")
dash_dcc.percy_snapshot("none step slider")
dash_dcc.wait_for_element(
'#none-step-slider div.rc-slider-handle[aria-valuenow="5"]')
assert dash_dcc.get_logs() == []
def NamedSlider(name, short, min, max, step, val, marks=None):
if marks:
step = None
else:
marks = {i: i for i in range(min, max + 1, step)}
return html.Div(
style={"margin": "25px 5px 30px 0px"},
id=f"div-{short}",
children=[
f"{name}:",
html.Div(
style={
"margin-left": "5px",
'display': 'block'
},
children=[
dcc.Slider(
id=f"slider-{short}",
min=min,
max=max,
marks=marks,
step=step,
value=val,
)
],
),
],
)
def make_slider(row_counts, custom_config):
# print("call - make_slider")
if row_counts is None:
raise PreventUpdate
if custom_config is None:
entries = 2500 # Default entries number
# Calculate number of divisions of default dataframe
div = max(math.ceil(row_counts / entries), 1)
else:
entries = custom_config['entries']
new_row_counts = custom_config['row_counts']
div = max(math.ceil(new_row_counts / entries), 1)
child_slider = [
html.Div('Sections of %i Variants' % entries,
style={
'textAlign': 'center',
}),
html.Div(
dcc.Slider(id='slider',
min=1,
max=div,
value=1,
marks={str(i + 1): str(i + 1)
for i in range(div)},
step=None))
]
return child_slider
def test_slsl001_always_visible_slider(dash_dcc):
app = Dash(__name__)
app.layout = html.Div([
dcc.Slider(
id="slider",
min=0,
max=20,
step=1,
value=5,
tooltip={"always_visible": True},
),
html.Div(id="out"),
])
@app.callback(Output("out", "children"), [Input("slider", "value")])
def update_output(value):
return "You have selected {}".format(value)
dash_dcc.start_server(app)
dash_dcc.wait_for_text_to_equal("#out", "You have selected 5")
slider = dash_dcc.find_element("#slider")
dash_dcc.click_at_coord_fractions(slider, 0.5, 0.25)
dash_dcc.wait_for_text_to_equal("#out", "You have selected 10")
dash_dcc.click_at_coord_fractions(slider, 0.75, 0.25)
dash_dcc.wait_for_text_to_equal("#out", "You have selected 15")
assert dash_dcc.get_logs() == []
def get_controls(id, desc, range, default_weight=0.0): # pylint: disable=redefined-builtin,redefined-outer-name
"""Get controls for one variable.
This includes
* the description
* range
* weight
"""
label = dcc.Input(id=id + "_label",
type='text',
value=desc,
className="label")
range_low = dcc.Input(id=id + "_low",
type='number',
value=range[0],
className="range")
range_high = dcc.Input(id=id + "_high",
type='number',
value=range[1],
className="range")
slider = dcc.Slider(id=id + "_weight",
min=weight_range[0],
max=weight_range[1],
value=default_weight,
step=0.01,
className="slider")
#grid = dcc.Input(id=id + "_grid", type='number', value=ngrid)
return html.Tr([
html.Td(label),
html.Td([range_low, html.Span('to'), range_high]),
html.Td([html.Span(slider),
html.Span('', id=id + "_weight_label")])
],
id=id + "_tr")
def test_slsl015_range_slider_no_min_max(dash_dcc):
app = Dash(__name__)
app.layout = html.Div(
[
html.Label("No Min or Max Slider"),
dcc.Slider(
id="no-min-max-step-slider",
marks={
i: "Label {}".format(i) if i == 1 else str(i)
for i in range(1, 6)
},
step=None,
value=5,
vertical=False,
),
],
style={"height": "500px"},
)
dash_dcc.start_server(app)
dash_dcc.wait_for_element("#no-min-max-step-slider")
dash_dcc.percy_snapshot("no-min-max step slider")
dash_dcc.wait_for_element(
'#no-min-max-step-slider div.rc-slider-handle[aria-valuemax="5"]')
assert dash_dcc.get_logs() == []
def test_slsl012_vertical_slider(dash_dcc):
app = Dash(__name__)
app.layout = html.Div(
[
html.Label("Vertical Slider"),
dcc.Slider(
id="vertical-slider",
min=0,
max=9,
marks={
i: "Label {}".format(i) if i == 1 else str(i)
for i in range(1, 6)
},
value=5,
vertical=True,
),
],
style={"height": "500px"},
)
dash_dcc.start_server(app)
dash_dcc.wait_for_element("#vertical-slider")
dash_dcc.percy_snapshot("vertical slider")
dash_dcc.wait_for_element('#vertical-slider div[role="slider"]').click()
assert dash_dcc.get_logs() == []
def LabeledSlider(app,
label,
id,
min_val,
max_val,
units='',
help_text='',
max_width=500,
mark_gap=None,
marks={},
**kwargs):
"""As well as wrapping the Slider with a label, this function adds a dynamic label
that displays the currently selected value, along with its units ('units'). In order
to implement this functionality, this function needs access to the main Dash 'app'
object so that an appropriate callback can be established.
This function also simplifies the creation of evenly-spaced marks on the Slider by allowing
you to specify a 'mark_gap' which is the spacing between evenly-spaced marks that start
at the minimum Slider value ('min_val') and progress to the maximum Slider value ('max_val').
If you do not pass a value for 'mark_gap', you should provide Slider marks in the 'marks'
dictionary, which is the conventional method of supplying Slider markers.
'max_width' specifies the maximum width of the Div containing all of these components.
"""
# Make the Mark dictionary
if mark_gap:
mark_vals = np.arange(min_val, max_val + mark_gap, mark_gap)
final_marks = {}
for v in mark_vals:
if v == int(v):
v = int(v)
final_marks[v] = str(v)
else:
final_marks = marks
component = html.Div(id=f'div-{id}',
style={
'maxWidth': max_width,
'marginBottom': '4rem'
},
children=[
make_label(
label, id, help_text,
html.Span('',
id=f'cur-val-{id}',
style={'marginLeft': 5})),
dcc.Slider(id=id,
marks=final_marks,
min=min_val,
max=max_val,
**kwargs)
])
@app.callback(Output(f'cur-val-{id}', 'children'), [Input(id, 'value')])
def set_cur_val(val):
return f'Value = {val} {units}'
return component
def test_msai001_auto_id_assert(dash_dcc):
app = Dash(__name__)
input1 = dcc.Input(value="Hello Input 1")
input2 = dcc.Input(value="Hello Input 2")
input3 = dcc.Input(value=3)
output1 = html.Div()
output2 = html.Div()
output3 = html.Div(id="output-3")
slider = dcc.Slider(0, 10, value=9)
app.layout = html.Div(
[input1, input2, output1, output2, output3, input3, slider])
@app.callback(Output(output1, "children"), Input(input1, "value"))
def update(v):
return f"Output1: Input1={v}"
@app.callback(Output(output2, "children"), Input(input2, "value"))
def update(v):
return f"Output2: Input2={v}"
@app.callback(Output("output-3", "children"), Input(input1, "value"),
Input(input2, "value"))
def update(v1, v2):
return f"Output3: Input1={v1}, Input2={v2}"
@app.callback(Output(slider, "value"), Input(input3, "value"))
def update(v):
return v
# Verify the auto-generated IDs are stable
assert output1.id == "e3e70682-c209-4cac-629f-6fbed82c07cd"
assert input1.id == "82e2e662-f728-b4fa-4248-5e3a0a5d2f34"
assert output2.id == "d4713d60-c8a7-0639-eb11-67b367a9c378"
assert input2.id == "23a7711a-8133-2876-37eb-dcd9e87a1613"
# we make sure that the if the id is set explicitly, then it is not replaced by random id
assert output3.id == "output-3"
dash_dcc.start_server(app)
def escape_id(dep):
_id = dep.id
if _id[0] in "0123456789":
_id = "\\3" + _id[0] + " " + _id[1:]
return "#" + _id
dash_dcc.wait_for_element(".rc-slider")
dash_dcc.find_element(escape_id(input1))
dash_dcc.find_element(escape_id(input2))
dash_dcc.wait_for_text_to_equal(escape_id(output1),
"Output1: Input1=Hello Input 1")
dash_dcc.wait_for_text_to_equal(escape_id(output2),
"Output2: Input2=Hello Input 2")
dash_dcc.wait_for_text_to_equal(
escape_id(output3),
"Output3: Input1=Hello Input 1, Input2=Hello Input 2")
def test_cbmt005_multi_converging_chain(dash_duo):
app = Dash(__name__)
app.layout = html.Div([
html.Button("Button 1", id="b1"),
html.Button("Button 2", id="b2"),
dcc.Slider(id="slider1", min=-5, max=5),
dcc.Slider(id="slider2", min=-5, max=5),
html.Div(id="out"),
])
@app.callback(
[Output("slider1", "value"),
Output("slider2", "value")],
[Input("b1", "n_clicks"),
Input("b2", "n_clicks")],
)
def update_sliders(button1, button2):
if not callback_context.triggered:
raise PreventUpdate
if callback_context.triggered[0]["prop_id"] == "b1.n_clicks":
return -1, -1
else:
return 1, 1
@app.callback(
Output("out", "children"),
[Input("slider1", "value"),
Input("slider2", "value")],
)
def update_graph(s1, s2):
return "x={}, y={}".format(s1, s2)
dash_duo.start_server(app)
dash_duo.wait_for_text_to_equal("#out", "")
dash_duo.find_element("#b1").click()
dash_duo.wait_for_text_to_equal("#out", "x=-1, y=-1")
dash_duo.find_element("#b2").click()
dash_duo.wait_for_text_to_equal("#out", "x=1, y=1")
def test_slsl003_out_of_range_marks_slider(dash_dcc):
app = Dash(__name__)
app.layout = html.Div([
dcc.Slider(min=0,
max=5,
marks={i: "Label {}".format(i)
for i in range(-1, 10)})
])
dash_dcc.start_server(app)
assert len(dash_dcc.find_elements("span.rc-slider-mark-text")) == 6
assert dash_dcc.get_logs() == []
def test_msps002_auto_id_assert(dash_dcc):
app = Dash(__name__)
input1 = dcc.Input(value="Hello Input 1")
input2 = dcc.Input(value="Hello Input 2")
input3 = dcc.Input(value=3)
output1 = html.Div()
output2 = html.Div()
output3 = html.Div(id="output-3")
slider = dcc.Slider(0, 10, value=9)
app.layout = html.Div(
[input1, input2, output1, output2, output3, input3, slider])
@app.callback(Output(output1, "children"), Input(input1, "value"))
def update(v):
return f"Output1: Input1={v}"
@app.callback(Output(output2, "children"), Input(input2, "value"))
def update(v):
return f"Output2: Input2={v}"
@app.callback(Output("output-3", "children"), Input(input1, "value"),
Input(input2, "value"))
def update(v1, v2):
return f"Output3: Input1={v1}, Input2={v2}"
@app.callback(Output(slider, "value"), Input(input3, "value"))
def update(v):
return v
# Verify the auto-generated IDs are stable
assert output1.id == "e3e70682-c209-4cac-629f-6fbed82c07cd"
assert input1.id == "82e2e662-f728-b4fa-4248-5e3a0a5d2f34"
assert output2.id == "d4713d60-c8a7-0639-eb11-67b367a9c378"
assert input2.id == "23a7711a-8133-2876-37eb-dcd9e87a1613"
# we make sure that the if the id is set explicitly, then it is not replaced by random id
assert output3.id == "output-3"
dash_dcc.start_server(app)
dash_dcc.wait_for_element(".rc-slider")
dash_dcc.percy_snapshot("component_auto_id - test_msps002_auto_id_assert",
True)
def create_parameter_sliders(distribution: str) -> tuple:
"""Get the parameter label(s) & slider(s) for parameter(s) of the selected
distribution.
Parameters
----------
distribution : str
The name of the currently selected distribution.
Returns
-------
tuple
Parameter label(s) and slider(s).
"""
dist_data = distribution_data[distribution]
num_params = dist_data["num_params"]
param_sliders = [(
html.Label(
dist_data[f"param{idx}"] + ":",
id=f"param{idx}_name",
htmlFor=f"parameter{idx}",
),
dcc.Slider(
id=f"parameter{idx}",
min=0.05,
max=dist_data[f"param{idx}_max"],
step=0.01,
value=dist_data[f"param{idx}_max"] / 2,
tooltip={"placement": "top"},
marks={i: {
"label": f"{i}"
}
for i in param_ticks},
),
) for idx in range(1, num_params + 1)]
if num_params < 2:
# Ensure a component with id 'parameter2' exists, since it is expected
# in other callbacks.
param_sliders.append((dcc.Input(id="parameter2",
value=None,
type="hidden"), ))
return sum(param_sliders, start=()) # Concatenate
def run(self):
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv")
self.df = Payload(df)
dash_app = Dash(__name__)
dash_app.layout = html.Div(
[
dcc.Graph(id="graph-with-slider"),
dcc.Slider(
df["year"].min(),
df["year"].max(),
step=None,
value=df["year"].min(),
marks={str(year): str(year) for year in df["year"].unique()},
id="year-slider",
),
]
)
@dash_app.callback(Output("graph-with-slider", "figure"), Input("year-slider", "value"))
def update_figure(selected_year):
self.selected_year = selected_year
filtered_df = df[df.year == selected_year]
fig = px.scatter(
filtered_df,
x="gdpPercap",
y="lifeExp",
size="pop",
color="continent",
hover_name="country",
log_x=True,
size_max=55,
)
fig.update_layout(transition_duration=500)
return fig
dash_app.run_server(host=self.host, port=self.port)
def test_slsl011_horizontal_slider(dash_dcc):
app = Dash(__name__)
app.layout = html.Div([
html.Label("Horizontal Slider"),
dcc.Slider(
id="horizontal-slider",
min=0,
max=9,
marks={i: f"Label {i}" if i == 1 else str(i)
for i in range(1, 6)},
value=5,
),
])
dash_dcc.start_server(app)
dash_dcc.wait_for_element("#horizontal-slider")
dash_dcc.percy_snapshot("horizontal slider")
dash_dcc.wait_for_element('#horizontal-slider div[role="slider"]').click()
assert dash_dcc.get_logs() == []
def test_slsl009_loading_state(dash_dcc):
lock = Lock()
app = Dash(__name__)
app.layout = html.Div([
html.Button(id="test-btn"),
html.Label(id="test-div", children=["Horizontal Slider"]),
dcc.Slider(
id="horizontal-slider",
min=0,
max=9,
marks={
i: "Label {}".format(i) if i == 1 else str(i)
for i in range(1, 6)
},
value=5,
),
])
@app.callback(Output("horizontal-slider", "value"),
[Input("test-btn", "n_clicks")])
def user_delayed_value(n_clicks):
with lock:
return 5
with lock:
dash_dcc.start_server(app)
dash_dcc.wait_for_element(
'#horizontal-slider[data-dash-is-loading="true"]')
dash_dcc.wait_for_element(
'#horizontal-slider:not([data-dash-is-loading="true"])')
with lock:
dash_dcc.wait_for_element("#test-btn").click()
dash_dcc.wait_for_element(
'#horizontal-slider[data-dash-is-loading="true"]')
dash_dcc.wait_for_element(
'#horizontal-slider:not([data-dash-is-loading="true"])')
assert dash_dcc.get_logs() == []
def __init__(
self,
label: str = None,
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: Any = [html.Label(label)] if label else []
children.append(
html.Div(
className="webviz-slider",
children=dcc.Slider(
persistence=persistence,
persistence_type=persistence_type,
**kwargs,
),
))
self.children = html.Div(style={"fontSize": "15px"}, children=children)
def dcc_slider_values(tab_label: str,
div_id: str,
slider_id: str,
slider_min,
slider_max,
slider_marks,
slider_value,
slider_step,
slider_updatemode: str,
div_style={'margin-top': 20},
make_slider_vertical: bool = False):
return dcc.Tab(label=tab_label,
children=[
html.Div(id=div_id, style=div_style),
dcc.Slider(id=slider_id,
min=slider_min,
max=slider_max,
marks=slider_marks,
value=slider_value,
step=slider_step,
updatemode=slider_updatemode,
vertical=make_slider_vertical)
])
def test_slsl005_slider_tooltip(dash_dcc):
app = Dash(__name__)
app.layout = html.Div([
html.Div(
[
html.Div(
dcc.Slider(
min=0,
max=100,
value=65,
tooltip={
"always_visible": True,
"placement": "top"
},
),
style=dict(height=100),
),
html.Div(
dcc.Slider(
min=0,
max=100,
value=65,
tooltip={
"always_visible": True,
"placement": "top"
},
),
style=dict(height=100),
),
html.Div(
dcc.Slider(
min=0,
max=100,
value=65,
tooltip={
"always_visible": True,
"placement": "top"
},
),
style=dict(height=100),
),
html.Div(
dcc.Slider(
min=0,
max=100,
value=65,
tooltip={
"always_visible": True,
"placement": "top"
},
),
style=dict(height=100),
),
html.Div(
dcc.Slider(
id="test-slider",
min=0,
max=100,
value=65,
tooltip={
"always_visible": True,
"placement": "top"
},
),
style=dict(height=100),
),
],
style=dict(maxHeight=300, overflowX="scroll", width=400),
)
])
dash_dcc.start_server(app)
dash_dcc.wait_for_element("#test-slider")
dash_dcc.percy_snapshot(
"slider-make sure tooltips are only visible if parent slider is visible"
)
assert dash_dcc.get_logs() == []
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')
])
def test_slsh001_rangeslider_shorthand_props(dash_dcc):
NUMBERS = [10 * N for N in np.arange(1, 2, 0.5)]
# TEST_RANGES = []
LAYOUT = []
TEST_CASES = []
for n in NUMBERS:
TEST_CASES.extend(
[
[n, n * 1.5, abs(n * 1.5 - n) / 5],
[-n, 0, n / 10],
[-n, n, n / 10],
[-1.5 * n, -1 * n, n / 7],
]
)
for t in TEST_CASES:
min, max, steps = t
marks = {
i: "Label {}".format(i) if i == 1 else str(i)
for i in range(math.ceil(min), math.floor(max))
}
LAYOUT.extend(
[
html.Div(
[
html.Div(
f"{min} - {max}",
style={"marginBottom": 15, "marginTop": 25},
),
dcc.Slider(min, max),
]
),
html.Div(
[
html.Div(
f"{min} - {max}",
style={"marginBottom": 15, "marginTop": 25},
),
dcc.RangeSlider(min, max),
]
),
html.Div(
[
html.Div(
f"{min} - {max}, {steps}",
style={"marginBottom": 15, "marginTop": 25},
),
dcc.Slider(min, max, steps),
]
),
html.Div(
[
html.Div(
f"{min} - {max}, {steps}",
style={"marginBottom": 15, "marginTop": 25},
),
dcc.RangeSlider(min, max, steps),
]
),
html.Div(
[
html.Div(
f"{min} - {max}, {steps}, value={min + steps}",
style={"marginBottom": 15, "marginTop": 25},
),
dcc.Slider(min, max, steps, value=min + steps),
]
),
html.Div(
[
html.Div(
f"{min} - {max}, {steps}, value=[{min + steps},{min + steps * 3}]",
style={"marginBottom": 15, "marginTop": 25},
),
dcc.RangeSlider(
min, max, steps, value=[min + steps, min + steps * 3]
),
]
),
html.Div(
[
html.Div(
f"{min} - {max}, {steps}, value={min + steps}, marks={marks}",
style={"marginBottom": 15, "marginTop": 25},
),
dcc.Slider(
min,
max,
steps,
value=min + steps,
marks=marks,
),
]
),
html.Div(
[
html.Div(
f"{min} - {max}, {steps},value=[{min + steps},{min + steps * 3}], marks={marks}",
style={"marginBottom": 15, "marginTop": 25},
),
dcc.RangeSlider(
min,
max,
steps,
value=[min + steps, min + steps * 3],
marks=marks,
),
]
),
html.Div(
[
html.Div(
f"{min} - {max}, {steps},value=[{min + steps},{min + steps * 3}], marks=None",
style={"marginBottom": 15, "marginTop": 25},
),
dcc.RangeSlider(
min,
max,
steps,
value=[min + steps, min + steps * 3],
marks=None,
),
]
),
]
)
app = Dash(__name__)
app.layout = html.Div(LAYOUT)
dash_dcc.start_server(app)
dash_dcc.wait_for_element(".rc-slider")
dash_dcc.percy_snapshot("slsh001 - test_slsh001_rangeslider_shorthand_props", True)
},
{
"label": u"Montréal",
"value": "MTL"
},
{
"label": "San Francisco",
"value": "SF"
},
],
value=["MTL", "SF"],
),
html.Label("Text Input"),
dcc.Input(value="MTL", type="text"),
html.Label("Slider"),
dcc.Slider(
min=0,
max=9,
marks={
i: "Label {}".format(i) if i == 1 else str(i)
for i in range(1, 6)
},
value=5,
),
],
style={"columnCount": 2},
)
if __name__ == "__main__":
app.run_server(debug=True)
html.Div(children='''
Dash: A web application framework for your data.
'''),
dcc.Graph(
id='example-graph',
figure=fig
),
html.Br(),
html.Label('Multi-Select Dropdown'),
dcc.Dropdown(['item1', 'item2', 'item3'], multi=True),
html.Br(),
html.Label('Slider'),
dcc.Slider(
id="thisSlider",
min=0,
max=99,
),
html.P(
id="test-output", style={"marginTop": "5%", "fontSize": 30}
)
])
@app.callback(
Output("test-output", "children"),
Input("thisSlider", "value")
)
def display_value(value):
return f"num: {value} | 10: {10*value: .3f}"
),
html.Div(
id="slider-container",
# style = {'zIndex':4},
children=[
html.H4("How much do you want to avoid these?",
id="slider-text"),
dcc.Slider(
id="impedance-slider",
min=min(impedances),
max=max(impedances),
value=100,
marks={
50:
dict(label='A little',
style={"color": "#7fafdf"}),
100:
dict(label='Moderately',
style={"color": "#7fafdf"}),
200:
dict(label='A lot',
style={"color": "#7fafdf"})
},
step=None,
),
],
),
html.Div(
id="checklist-goto",
# style={'zIndex': 5},
children=[
html.H4(
def test_cbmt004_chain_with_sliders(MULTI, dash_duo):
app = Dash(__name__)
app.layout = html.Div(
[
html.Button("Button", id="button"),
html.Div(
[
html.Label(id="label1"),
dcc.Slider(id="slider1", min=0, max=10, value=0),
]
),
html.Div(
[
html.Label(id="label2"),
dcc.Slider(id="slider2", min=0, max=10, value=0),
]
),
]
)
if MULTI:
@app.callback(
[Output("slider1", "value"), Output("slider2", "value")],
[Input("button", "n_clicks")],
)
def update_slider_vals(n):
if not n:
raise PreventUpdate
return n, n
else:
@app.callback(Output("slider1", "value"), [Input("button", "n_clicks")])
def update_slider1_val(n):
if not n:
raise PreventUpdate
return n
@app.callback(Output("slider2", "value"), [Input("button", "n_clicks")])
def update_slider2_val(n):
if not n:
raise PreventUpdate
return n
@app.callback(Output("label1", "children"), [Input("slider1", "value")])
def update_slider1_label(val):
return "Slider1 value {}".format(val)
@app.callback(Output("label2", "children"), [Input("slider2", "value")])
def update_slider2_label(val):
return "Slider2 value {}".format(val)
dash_duo.start_server(app)
dash_duo.wait_for_text_to_equal("#label1", "")
dash_duo.wait_for_text_to_equal("#label2", "")
dash_duo.find_element("#button").click()
dash_duo.wait_for_text_to_equal("#label1", "Slider1 value 1")
dash_duo.wait_for_text_to_equal("#label2", "Slider2 value 1")
dash_duo.find_element("#button").click()
dash_duo.wait_for_text_to_equal("#label1", "Slider1 value 2")
dash_duo.wait_for_text_to_equal("#label2", "Slider2 value 2")
"label": "Option 1",
"value": 1
},
{
"label": "Option 2",
"value": 2
},
],
),
],
className="mb-3",
)
slider = html.Div(
[
dbc.Label("Slider", html_for="slider"),
dcc.Slider(id="slider", min=0, max=10, step=0.5, value=3),
],
className="mb-3",
)
range_slider = html.Div(
[
dbc.Label("RangeSlider", html_for="range-slider"),
dcc.RangeSlider(id="range-slider", min=0, max=10, value=[3, 7]),
],
className="mb-3",
)
form = dbc.Form([dropdown, slider, range_slider])
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
html.Div(id='country-map', className='six columns'),
],
className='twelve columns'),
html.Div([
html.Div([dcc.Graph(id='country-chart')], className='twelve columns')
],
className='twelve columns'),
html.Div(
[
html.Div(id='country-funding'),
html.Div([
dcc.Slider(
id="year-slider",
min=2018,
max=2022,
marks={i: i
for i in [2018, 2019, 2020, 2021, 2022]},
step=1,
value=2022,
included=False)
],
className='six columns offset-by-three',
style={"margin-bottom": "25px"}),
],
className='twelve columns',
style={
'border-top-width': '1px',
'border-top-style': 'solid',
'border-top-color': 'lightgray'
}),
html.Div([
