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([