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 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_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 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_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 get_emissions_tab(): return dcc.Tab( label="Emissions Equivalent", value="emissions_tab", id="global_emissions", children=[ html.Div( dbc.Col( dcc.Graph(id="global_emissions_choropleth"), style={"marginLeft": "-16%"}, )) ], )
def patient_information(): """ Return: Card with patient information """ information = [ dcc.Tab(label='About', value='what-is', children=html.Div( className='control-tab', children=[ html.H4(className='what-is', children='Information about patient'), html.A('Download data', id='my-link2'), html.P(id="text", className="card-text"), ])) ] return information
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 get_energy_mix_tab(): return dcc.Tab( label="Energy Mix", value="energy_mix_tab", id="global_energy_mix", children=[ html.Div( dbc.Col([ html.Br(), html.H4("Select Energy Source"), dcc.Dropdown( id="energy_type", options=[ { "label": "Fossil", "value": "fossil" }, { "label": "Geothermal", "value": "geothermal" }, { "label": "Hydroelectricity", "value": "hydroelectricity", }, { "label": "Nuclear", "value": "nuclear" }, { "label": "Solar", "value": "solar" }, { "label": "Wind", "value": "wind" }, ], value="fossil", ), dcc.Graph( id="global_energy_mix_choropleth", style={"marginLeft": "-16%"}, ), ])) ], )
def get_graph_content(): graph_content = [] #for r in os.listdir(REPORTDIR): if not os.path.exists('assets'): os.mkdir('assets') else: _time = time.ctime(os.path.getmtime('assets')) _time = datetime.strptime(_time, "%a %b %d %H:%M:%S %Y") _txt = 'Updated {} at {}'.format(humanize.naturaltime(_time), _time) graph_content.append(html.P( _txt, style={ 'padding-top': '30px', 'padding-bottom': '20px', 'padding-left': '200px', 'padding-right': ' 200px'})) report_list = os.listdir('assets') report_list = sorted(report_list) report_list = [x for x in report_list if x.endswith('_report.pdf')] for r in report_list: # Add a link to project PDF graph_content.append( html.Div( html.A(r, download=r, href='assets/'+r), style={ 'padding-top': '10px', 'padding-bottom': '10px', 'padding-left': '50px'})) # Add some space graph_content.append(html.Br()) # Wrap in a tab tab0 = dcc.Tab( label='Monthly', value='0', children=[html.Div(graph_content)], style={'width': '900px'}) # Concat the tabs tabs = [tab0] # Return the tabs return tabs
def get_graph_content(df): PIVOTS = ['PROJECT', 'CATEGORY', 'SOURCE'] status2rgb = STATUS2RGB tabs_content = [] # index we are pivoting on to count statuses for i, pindex in enumerate(PIVOTS): #print('making pivot', i, pindex) # Make a 1x1 figure fig = plotly.subplots.make_subplots(rows=1, cols=1) fig.update_layout(margin=dict(l=40, r=40, t=40, b=40)) # Draw bar for each status, these will be displayed in order dfp = pd.pivot_table( df, index=pindex, values='LABEL', columns=['STATUS'], aggfunc='count', fill_value=0) for status, color in status2rgb.items(): #print('making bar', status, color) ydata = sorted(dfp.index) if status not in dfp: xdata = [0] * len(dfp.index) else: xdata = dfp[status] fig.append_trace(go.Bar( x=ydata, y=xdata, name='{} ({})'.format(status, sum(xdata)), marker=dict(color=color), opacity=0.9), 1, 1) # Customize figure fig['layout'].update(barmode='stack', showlegend=True, width=900) # Build the tab label = 'By {}'.format(pindex) graph = html.Div(dcc.Graph(figure=fig), style={ 'width': '100%', 'display': 'inline-block'}) tab = dcc.Tab(label=label, value=str(i + 1), children=[graph]) # Append the tab tabs_content.append(tab) return tabs_content
def generate_weekday_tab(day): if DEBUG: print("generate_weekday_tab") tab_style = { 'height': '30px', 'padding': '2px', } selected_tab_style = { 'borderTop': '2px solid #064779', 'height': '30px', 'padding': '2px', } return dcc.Tab(label=day, value='tab-'+day.lower()[:3], style=tab_style, selected_style=selected_tab_style, )
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_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') ])
'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', multi=True), dcc.Dropdown(id='ana-ms-order',
def get_graph_content(dfp, selected_groupby='PROJECT'): tabs_content = [] tab_value = 0 logging.debug('get_qa_figure') # Make a 1x1 figure fig = plotly.subplots.make_subplots(rows=1, cols=1) fig.update_layout(margin=dict(l=40, r=40, t=40, b=40)) # Check for empty data if len(dfp) == 0: logging.debug('empty data, using empty figure') return [fig] # First we copy the dfp and then replace the values in each # scan/proc type column with a metastatus, # that gives us a high level status of the type for that session # TODO: should we just make a different pivot table here going back to # the original df? yes, later dfp_copy = dfp.copy() for col in dfp_copy.columns: if col in ('SESSION', 'PROJECT', 'DATE'): # don't mess with these columns # TODO: do we need this if we haven't reindexed yet? continue # Change each value from the multiple values in concatenated # characters to a single overall status dfp_copy[col] = dfp_copy[col].apply(get_metastatus) # The pivot table for the graph is a pivot of the pivot table, instead # of having a row per session, this pivot table has a row per # pivot_type, we can pivot by type to get counts of each status for each # scan/proc type, or we can pivot by project to get counts of sessions # for each project # The result will be a table with one row per TYPE (index=TYPE), # and we'll have a column for each STATUS (so columns=STATUS), # and we'll count how many sessions (values='SESSION') we find for each # cell # get a copy so it's defragmented dfp_copy = dfp_copy.reset_index().copy() # don't need subject dfp_copy = dfp_copy.drop(columns=['SUBJECT']) # use pandas melt function to unpivot our pivot table df = pd.melt( dfp_copy, id_vars=( 'SESSION', 'PROJECT', 'DATE', 'SITE', 'SESSTYPE', 'MODALITY'), value_name='STATUS') # We use fill_value to replace nan with 0 dfpp = df.pivot_table( index='TYPE', columns='STATUS', values='SESSION', aggfunc='count', fill_value=0) # sort so scans are first, then assessor scan_type = [] assr_type = [] for cur_type in dfpp.index: # Use a regex to test if name ends with _v and a number, then assr if re.search('_v\d+$', cur_type): assr_type.append(cur_type) else: scan_type.append(cur_type) newindex = scan_type + assr_type dfpp = dfpp.reindex(index=newindex) # Draw bar for each status, these will be displayed in order # ydata should be the types, xdata should be count of status # for each type for cur_status, cur_color in QASTATUS2COLOR.items(): ydata = dfpp.index if cur_status not in dfpp: xdata = [0] * len(dfpp.index) else: xdata = dfpp[cur_status] cur_name = '{} ({})'.format(cur_status, sum(xdata)) fig.append_trace( go.Bar( x=ydata, y=xdata, name=cur_name, marker=dict(color=cur_color), opacity=0.9), 1, 1) # Customize figure fig['layout'].update(barmode='stack', showlegend=True, width=900) # Build the tab label = 'By {}'.format('TYPE') graph = html.Div(dcc.Graph(figure=fig), style={ 'width': '100%', 'display': 'inline-block'}) tab = dcc.Tab(label=label, value=str(tab_value), children=[graph]) tabs_content.append(tab) tab_value += 1 # We also want a tab for By Project, so we can ask e.g. how many # sessions for each project, and then ask # which projects have a T1 and a good FS6_v1 # later combine with other pivot # table and loop on pivot type dfpp = df.pivot_table( index='PROJECT', values='SESSION', aggfunc=pd.Series.nunique, fill_value=0) fig = plotly.subplots.make_subplots(rows=1, cols=1) fig.update_layout(margin=dict(l=40, r=40, t=40, b=40)) ydata = dfpp.index xdata = dfpp.SESSION cur_name = '{} ({})'.format('ALL', sum(xdata)) cur_color = RGB_DKBLUE fig.append_trace( go.Bar( x=ydata, y=xdata, text=xdata, name=cur_name, marker=dict(color=cur_color), opacity=0.9), 1, 1) # Customize figure fig['layout'].update(barmode='stack', showlegend=True, width=900) # Build the tab label = 'By {}'.format('PROJECT') graph = html.Div(dcc.Graph(figure=fig), style={ 'width': '100%', 'display': 'inline-block'}) tab = dcc.Tab(label=label, value=str(tab_value), children=[graph]) tabs_content.append(tab) tab_value += 1 # Append the by-time graph (this was added later with separate function) dfs = df[['PROJECT', 'DATE', 'SESSION', 'SESSTYPE', 'SITE', 'MODALITY']].drop_duplicates() fig = sessionsbytime_figure(dfs, selected_groupby) label = 'By {}'.format('TIME') graph = html.Div(dcc.Graph(figure=fig), style={ 'width': '100%', 'display': 'inline-block'}) tab = dcc.Tab(label=label, value=str(tab_value), children=[graph]) tabs_content.append(tab) tab_value += 1 # TODO: write a "graph in a tab" function to wrap each figure above # in a graph in a tab, b/c DRY # Return the tabs return tabs_content
html.Div( className='four columns', children=[ 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:'),
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() == []
def get_graph_content(df): tabs_content = [] tab_value = 0 box_width = 250 min_box_count = 4 logging.debug('get_stats_figure') # Check for empty data if len(df) == 0: logging.debug('empty data, using empty figure') return [plotly.subplots.make_subplots(rows=1, cols=1)] # Filter var list to only include those that have data var_list = [x for x in df.columns if not pd.isnull(df[x]).all()] # Filter var list to only stats variables, this also helps sort # by order in params yaml var_list = [x for x in data.get_variables() if x in var_list] # Determine how many boxplots we're making, depends on how many vars, use # minimum so graph doesn't get too small box_count = len(var_list) if box_count < min_box_count: box_count = min_box_count graph_width = box_width * box_count #print('box_count', box_count) #print('graph_width', graph_width) # Horizontal spacing cannot be greater than (1 / (cols - 1)) #hspacing = 1 / (box_count * 2) hspacing = 1 / (box_count * 4) #print('hspacing=', hspacing) # Make the figure with 1 row and a column for each var we are plotting fig = plotly.subplots.make_subplots(rows=1, cols=box_count, horizontal_spacing=hspacing, subplot_titles=var_list) # box plots # each proctype has specific set of fields to plot, # TODO: we need a dictionary listing them # then we just do the boxplots for the chosen proctypes (and maybe scan # types?, how did we do that for fmri scan type?) # Add traces to figure for i, var in enumerate(var_list): _row = 1 _col = i + 1 # Create boxplot for this var and add to figure fig.append_trace( go.Box(y=df[var], x=df['SITE'], boxpoints='all', text=df['assessor_label']), _row, _col) if var.startswith('con_') or var.startswith('inc_'): print(var, 'setting beta range') fig.update_yaxes(range=[-1, 1], autorange=False) else: fig.update_yaxes(autorange=True) pass # Move the subtitles to bottom instead of top of each subplot for i in range(len(fig.layout.annotations)): fig.layout.annotations[i].update(y=-.15) #, font={'size': 18}) # Customize figure to hide legend and fit the graph fig.update_layout(showlegend=False, autosize=False, width=graph_width, margin=dict(l=20, r=40, t=40, b=80, pad=0)) # Build the tab # We set the graph to overflow and then limit the size to 1000px, this # makes the graph stay in a scrollable section label = 'ALL' graph = html.Div(dcc.Graph(figure=fig, style={'overflow': 'scroll'}), style={'width': '1000px'}) tab = dcc.Tab(label=label, value=str(tab_value), children=[graph]) tab_value += 1 # Append the tab tabs_content.append(tab) # Return the tabs return tabs_content
} TAB_SELECTED_STYLE = { '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']
value=[4, 6]), html.H6('Download travel edges graph data', className="mt-5 mb-3"), 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),
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 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 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() == []