def render(self): return dhtml.Fieldset( [ dhtml.Legend(self.render_header(), id=self.chained_id('header'), className='header'), dhtml.Div([ *[child.render() for child in self.children], dhtml.Div(dhtml.Div(className='errors', id=self.chained_id('errors')), id=self.chained_id('errors_wrapper'), className='form_errors_row'), dhtml.Div(self.btn, className='btn_wrapper' + (' hide' if not self.btn.children else '')), ], id=self.chained_id('content'), className='body') ], id=self.chained_id(), className='form' + (' with_header' if self.title or self.collapsable else ''))
def get_acl_content(): options = [{ 'label': 'Cisco IOS', 'value': 'cisco' }, { 'label': 'Cisco NX-OS', 'value': 'cisco-nx' }, { 'label': 'Cisco XR', 'value': 'cisco-xr' }, { 'label': 'Juniper', 'value': 'juniper' }] return html.Div( id="acl_content_container", children=[ html.Div( id="acl_content", children=[ html.Div(children=[ html.Fieldset( id="acl_original_fieldset", children=[ html.Legend("Original ACL"), dbc.InputGroup( id="acl_original_input_group", children=[ html.Div([ dbc.Button( "Get Configuration", id="acl_get_config_button") ]), html.Div(children=[ dbc.InputGroup([ dbc.InputGroupAddon( "Choose Platform", addon_type="prepend"), dbc.Select( id= "acl_original_choose_platform", options=options, value='cisco', ), ]), ]), ]), html.Div( id="acl_original_text_area_container", children=[ dcc.Textarea( id='acl_original_textarea', value='', placeholder= "Please Copy and Paste an ACL", required=True, ), ]), ]), ]), html.Div([dbc.Button("Analyze", id="acl_analyze_button")]), html.Div(children=[ html.Fieldset( id="acl_refractored_fieldset", children=[ html.Legend("Refractored ACL"), html.Div( id= "acl_refractored_choose_platform_container", children=[ dbc.InputGroup([ dbc.InputGroupAddon( "Choose Platform", addon_type="prepend"), dbc.Select( id= "acl_refractored_choose_platform", options=options, value='', ), ]), ]), html.Div( id="acl_refractored_text_area_container", children=[ dcc.Textarea( id='acl_refractored_textarea', value='', placeholder= "Please Copy and Paste an ACL", required=True, ), ]), ]), ]), ]), html.Div(id="acl_result_fieldset_container", children=[ html.Fieldset(id="acl_result_fieldset", children=[ html.Legend("Results"), html.Div(id="acl_result_table", ), ]), ]), ])
def get_traceroute_content(batfish_df): options = [str(x) for x in batfish_df["Interface"]] interfaces = [{ 'label': interface, 'value': interface } for interface in options] return html.Div(children=[ dbc.Card( dbc.CardBody(children=[ dbc.Row( id="traceroute_src_dst_row", children=[ dbc.Col(children=[ html.Fieldset( id="traceroute_source_fieldset", children=[ html.Legend("Source"), dbc.InputGroup([ dcc.Dropdown( id="traceroute_src_interface", placeholder='Select Source', options=interfaces, ) ]), ], ), ], ), dbc.Col(children=[ html.Fieldset( id="traceroute_dst_fieldset", children=[ html.Legend("Destination"), dbc.InputGroup([ html.Div( id= "traceroute_dst_type_dropdown_div", children=[ dcc.Dropdown( id= "traceroute_dst_type_dropdown", options=[{ 'label': 'IP', 'value': 'IP' }, { 'label': 'Interface', 'value': 'Interface' }], value="Interface", ) ], ), html.Div( id="traceroute_dst_input", children=[ dcc.Dropdown( id="traceroute_dst", placeholder= 'Select Destination', options=interfaces, ) ], ), ]), ], ), ], ), dbc.Col( width=1, children=[ html.Div( className="bidir_switch", children=[ daq.BooleanSwitch( id= 'main_page_traceroute_bidir_switch', on=False, label="Bidir", labelPosition="left", ), daq.BooleanSwitch( id= 'traceroute_advanced_options_switch', on=False, label="Advanced?", labelPosition="left", ), daq.BooleanSwitch( id='traceroute_chaos_switch', on=False, label="Chaos?", labelPosition="left", ), ]), ], ), dbc.Col( html.Div( dbc.Button("Trace!", id="main_page_traceroute_submit", disabled=True)), ), ]), dbc.Row(id="traceroute-advanced_options_row"), dbc.Row(id="traceroute-alter-node"), ], ), ), html.Fieldset([ html.Legend("Forward Trace Route"), html.Div(id="main_page_forward_traceroute_graph"), html.Div(style={"width": "1000px"}, children=[dcc.Tabs(id="forward_traceroute_tabs")]), ]), html.Fieldset([ html.Legend("Reverse Trace Route"), html.Div(id="main_page_reverse_traceroute_graph"), html.Div(style={"width": "1000px"}, children=[dcc.Tabs(id="reverse_traceroute_tabs")]), ]), html.Fieldset(id="chaos_traceroute_fieldset"), ], ),
def layout(tests_df, ccgs_list, labs_list, practices_list): state_components = html.Div([ # Hidden div inside the app that stores the page state # XXX possibly use https://dash.plot.ly/dash-core-components/store html.Div(children=[ html.Button( "show state", style={"display": "block" if settings.DEBUG else "none"}, **{ "data-toggle": "collapse", "data-target": "#page-state" }), html.Pre(id="page-state", className="collapse"), ]), # Two "locations" with the same function, to allow two # different callbacks to use them without cycles in the # graph. This one represents URLs from the user, # i.e. bookmarked or directly edited dcc.Location(id="url-from-user", refresh=False), # This one represents the URL that was want to change to # reflect the current page state dcc.Location(id="url-for-update", refresh=False), ]) numerators_form = dbc.FormGroup( [ dbc.Label("Select tests"), dcc.Dropdown( id="numerators-dropdown", multi=True, value=[], # XXX use clientside javascript to make "all tests" # disappear if you select just one: # https://community.plot.ly/t/dash-0-41-0-released/22131 options=tests_df.to_dict("records"), placeholder="Start typing", ), ], id="numerators-form", ) denominators_form = dbc.FormGroup( [ dbc.Label("Showing"), dcc.Dropdown( id="denominators-dropdown", options=[ { "value": "per1000", "label": "Number of tests per 1000 patients" }, { "value": "raw", "label": "Number of tests" }, OPTION_SEPARATOR, { "value": "within_range", "label": "Proportion of numeric results within reference range", }, { "value": "under_range", "label": "Proportion of numeric results under reference range", }, { "value": "over_range", "label": "Proportion of numeric results over reference range", }, OPTION_SEPARATOR, { "value": "other", "label": "Compared with other test numbers" }, ], ), dcc.Dropdown( id="denominator-tests-dropdown", multi=True, placeholder="Start typing", options=tests_df.to_dict("records"), style={"display": "none"}, ), ], id="denominators-form", ) groupby_form = dbc.FormGroup([ dbc.Label("Compare by", id="groupby-label"), dcc.Dropdown( id="groupby-dropdown", options=settings.ANALYSE_DROPDOWN_OPTIONS, clearable=False, ), dcc.Link( "Filter practices used for comparison...", href="#show-org-filter", id="org-filter-link", ), ]) ccg_filter_form = dbc.FormGroup( [ dbc.Label("Only use data from practices in these CCGs", id="ccg-focus-label"), dcc.Dropdown(id="ccg-dropdown", multi=True, options=ccgs_list), ], id="ccg-filter-form", ) lab_filter_form = dbc.FormGroup( [ dbc.Label( "Only use data from practices serviced by these labs", id="lab-focus-label", ), dcc.Dropdown(id="lab-dropdown", multi=True, options=labs_list), ], id="lab-filter-form", ) practice_filter_form = dbc.FormGroup( [ dbc.Label("Only use data from these practices", id="practice-focus-label"), dcc.Dropdown( id="practice-dropdown", multi=True, options=practices_list), ], id="practice-filter-form", style={"display": "none"}, ) org_filter_form = dbc.FormGroup( children=[ccg_filter_form, lab_filter_form, practice_filter_form], id="org-filter-form", style={"display": "none"}, ) org_focus_form = dbc.FormGroup( [ dbc.Label("Higlight specific organisation", id="org-focus-label"), dcc.Dropdown( id="org-focus-dropdown", multi=True, options=practices_list + labs_list + ccgs_list, placeholder="Start typing", ), ], id="org-focus-form", ) tweak_form = dbc.FormGroup([ dbc.Checklist( id="tweak-form", options=[ { "label": "Hide organisations with low numbers", "value": "suppress_sparse_data", }, { "label": "Increase heatmap contrast", "value": "equalise_colours" }, ], value=[], ) ]) sort_order_form = dbc.FormGroup( [dcc.Dropdown(id="sort-order-dropdown", clearable=False)]) chart_selector_tabs = dbc.Tabs( id="chart-selector-tabs", active_tab="measure", children=[ dbc.Tab(label="All predefined measures", tab_id="measure"), dbc.Tab(label="Custom measure (+ heatmap)", tab_id="chart", id="org-tab-label"), dbc.Tab(label="Download data", tab_id="datatable"), ], ) result_category_hint = html.Div( [ "This chart uses reference ranges. Reference ranges need to be treated ", "with caution: for example, they may change over time. See our ", html.A("FAQ", href="/faq#result-categories"), " for more details", ], id="result-category-hint", className="alert alert-info", style={"display": "none"}, ) header = dbc.Row( dbc.Col( html.Div([ html.Div(id="description-container"), html.Div(id="error-container"), chart_selector_tabs, ]))) form = dbc.Container([ dbc.Row([ dbc.Col( html.Fieldset( children=[ html.Legend("Comparisons", className="w-auto"), groupby_form, org_filter_form, org_focus_form, ], className="border p-2", )), dbc.Col( html.Fieldset( children=[ html.Legend("Measurements", className="w-auto"), numerators_form, denominators_form, ], className="border p-2", id="measurements-fieldset", style={"display": "none"}, )), ]), result_category_hint, ]) body = dbc.Container([ dbc.Row( dbc.Col( html.Div( id="chart-container", style={"display": "none"}, children=[ html.Div( dcc.Loading( id="loading-deciles", style={"height": "350px"}, children=[ html.Div( id="deciles-container", children=[ dcc.Graph( id="deciles-graph", config=COMMON_GRAPH_CONFIG, ) ], ) ], )), html.Div( dcc.Loading( id="loading-heatmap", children=[ html.Div( id="heatmap-container", children=[ dcc.Graph( id="heatmap-graph", config=COMMON_GRAPH_CONFIG, ) ], ), dbc.Row( children=html.H2("Heatmap options")), dbc.Row( id="sort-order-dropdown-container", children=[ dbc.Col(tweak_form, width={"size": 3}), dbc.Col( sort_order_form, width={ "size": 6, "offset": 3 }, ), ], ), ], )), ], ))), dbc.Row( dbc.Col( dcc.Loading( id="loading-measures", children=[ html.Div( id="measure-container", style={"display": "none"}, children=[], ) ], ))), dbc.Row( dbc.Col( dcc.Loading( id="loading-datatable", children=[ html.Div( id="datatable-container", style={"display": "none"}, children=[ html.Div( className="download-link-container", children=[ html.A( "Download as CSV", id="datatable-download-link", href="#", className="btn btn-outline-primary", ) ], ), html.Hr(), dash_table.DataTable( id="datatable", sort_action="custom", sort_mode="multi", page_action="custom", page_current=0, page_size=50, ), ], ) ], ))), ]) dash_app = html.Div([state_components, header, form, body]) return dash_app
classMap['Y%d' % ysel] = 'active' classMap['X%d' % xsel] = 'active' return classMap app = dash.Dash("Core Mem") app.layout = html.Div([ html.H1('Magnetic Core Memory Dashboard'), html.Div([ html.Div([ Svg(id='diagram', value=svg_data(), classMap=get_class_map()) ], className='box diagram-box'), html.Div([memory_value_table()], id='mem-table-div', className='box mem-table-box'), html.Fieldset([ html.Legend(['Write to Memory']), html.Span([ 'Addr: ', dcc.Input(id='addrInput', value='0', type='number', min=0, max=7, placeholder="Write Addr"), ]), html.Span([ 'Value: ', dcc.Input(id='wrValInput', value='0', type='number', min=0, max=255, placeholder="Value"), ]), html.Button('Write', id='writeButton'), ], className='box write-box'), html.Fieldset([ html.Legend('Read memory'), html.Button('Read', id='readButton'), ], className='box read-box'), html.Fieldset([
def create_layout(app): """Create the Dash application components and configure them into a layout Arguments: app {Dash} -- Dash application that will receive the layout """ logger.info('Creating application components') logger.debug('Creating top level DIV') page = html.Div(children=[]) logger.debug('Creating application title') page_title = html.H1(id='app-title', children='COVID-19 Global Data Plotter') logger.debug('Creating appliaction description DIV') app_description = html.Div( children='''This COVID-19 data visualization tool allow you to simply browse available global data on those that are infected, recovered, or have died.''') logger.debug('Creating search Dropdown') search_field = dcc.Dropdown(id='search-field', multi=True, clearable=True, options=[], searchable=True, placeholder='Select country data to plot') _populate_search(search_field) logger.debug('Creating main-plot Graph') main_plot = dcc.Graph(id='main-plot', figure={ 'data': [], 'layout': { 'title': 'Dash Data Visualization' } }, config={ 'editable': True, 'showTips': True }) logger.debug('Creating normalization radio buttons') normalization_rb = dcc.RadioItems( id='normalization-rb', labelStyle={'display': 'block'}, options=[{ 'label': 'None', 'value': 'none' }, { 'label': 'Per 1000 people', 'value': 'per-1000' }, { 'label': 'Per capita', 'value': 'per-capita' }], value='none', ) normalization_fs = html.Fieldset( style={'display': 'inline-block'}, children=[html.Legend(children='Normalization'), normalization_rb], draggable=True, ) logger.debug('Creating infected chart type radio buttons') chart_option_elems = [] for data_type in ('infected', 'dead', 'recovered'): chart_type_rb = dcc.RadioItems( id=f'chart-{data_type}-rb', labelStyle={'display': 'block'}, options=[ { 'label': 'Line', 'value': 'line' }, { 'label': 'Bar', 'value': 'bar' }, ], value='line', ) chart_option_elems.append( html.Fieldset(style={'display': 'inline-block'}, children=[ html.Legend(children=f'Plot Type ({data_type})'), chart_type_rb ], draggable=True)) logger.debug('Adding sub-components to top-level DIV') page.children.append(page_title) page.children.append(app_description) page.children.append(search_field) page.children.append(normalization_fs) page.children.extend(chart_option_elems) page.children.append(main_plot) logger.info('Setting application layout') app.layout = page
def get_chaos_form(n, graph_elements, batfish_host, batfish_network, original_snapshot): ctx = dash.callback_context button_id = ctx.triggered[0]['prop_id'].split('.')[0] if button_id != "traceroute_chaos_switch": raise PreventUpdate if not n: return None, None traceroute_nodes = [] try: for traceroute_node in graph_elements: traceroute_nodes.append(traceroute_node['data']['label']) except KeyError: pass batfish = Batfish(batfish_host) batfish.set_network(batfish_network) batfish.set_snapshot(original_snapshot) batfish_df = batfish.get_info("nodeProperties") batfish_df = batfish_df.set_index('Node') nodes_dict = [{ 'label': node, 'value': node } for node in set(traceroute_nodes)] node = nodes_dict[0]['value'] interfaces = batfish_df.loc[node].at['Interfaces'] interfaces_dict = [{'label': '', 'value': ''}] interfaces_dict += [{ 'label': interface, 'value': interface } for interface in interfaces] form_children = [ dbc.Col(children=[ html.Fieldset( id="traceroute_source_fieldset", children=[ html.Legend("Choose Node"), dbc.InputGroup([ dbc.Select( id="traceroute_choose_node", options=nodes_dict, value=node, ), ]), ], ), ], ), dbc.Col(children=[ html.Fieldset( id="traceroute_source_fieldset", children=[ html.Legend("Deactivate Node?"), daq.BooleanSwitch( id='deactivate_node_switch', on=False, ), ], ), ], ), dbc.Col( id="traceroute_deactivate_interface_col", children=[ html.Fieldset( id="traceroute_source_fieldset", children=[ html.Legend("Deactivate Interface"), dbc.InputGroup([ dbc.Select( id="traceroute_deactivate_interface", options=interfaces_dict, value='', ), ]), ], ), ], ), dbc.Col(children=[ html.Div( dbc.Button("Change Configuration?", id="chaos_traceroute_change_config_button")), daq.BooleanSwitch(id='change_configuration_switch', on=False, style={"display": "none"}), ]), dbc.Col(html.Div(dbc.Button("Chaos!", id="chaos_traceroute_submit")), ), ] fieldset_children = [ html.Legend("Chaos Trace Route"), html.Div(id="chaos_traceroute_graph"), html.Div(dcc.Tabs(id="chaos_traceroute_tabs")), ] return form_children, fieldset_children
def get_advanced_options_form(advanced_option_sw): if advanced_option_sw: hidden = False else: hidden = True children = [ html.Div( hidden=hidden, children=[ dbc.Form( [ dbc.Col(children=[ dbc.FormGroup( [ html.Fieldset( id="traceroute_src_ports_fieldset", children=[ html.Legend("Source Ports"), dbc.Input( id="traceroute_src_ports", placeholder="e.g., 22"), ], ), ], className="mr-3", ), ]), dbc.Col(children=[ dbc.FormGroup( [ html.Fieldset( id="traceroute_dst_ports_fieldset", children=[ html.Legend("Destination Port"), dbc.Input( id="traceroute_dst_ports", placeholder="e.g., 22"), ], ), ], className="mr-3", ), ]), dbc.Col(children=[ dbc.FormGroup( [ html.Fieldset( id="traceroute_application_fieldset", children=[ html.Legend("Application"), dbc.Input( id="traceroute_applications", placeholder= "e.g., SSH, DNS, SNMP"), ], ), ], className="mr-3", ), ]), dbc.Col(children=[ dbc.FormGroup( [ html.Fieldset( id="traceroute_ip_protocol_fieldset", children=[ html.Legend("IP Protocol"), dbc.Input( id="traceroute_ip_protocols", placeholder= "e.g., TCP, UDP, ICMP"), ], ), ], className="mr-3", ), ]), ], inline=True, ) ]) ] return children
html.Div( "Paises", className='texto-opcao opcao-item' ), dcc.Dropdown( options=wdata.get_list_dict_countrys(), value=['BR','AR','US'], id='world_dropdown', multi=True, style=dict(width='100%')) ], style=dict(width='30%'), className='div-opcoes'), html.Fieldset( [ html.Legend('Normalizações'), html.Button('Por mi hab', id='btn_milhao', className='div-opcoes', style={'float':'left'}), html.Button('1º caso', id='btn_primeiro_caso', className='div-opcoes', style={'float':'left'}), ], className="div-opcoesdiv_horizontal", style={'padding':'3px'}, ), html.Div([ html.Div( "Periodo",
def defineStatisticsFieldset(dash_instance): """Method to create a fieldset for all statistics data""" # create search props searchLabel, \ searchRadio, \ searchBar = createSearchOption(dash_instance) # create group props groupLabel, \ groupDropDown = createGroupMenu(dash_instance) # create node props nodeLabel, \ nodeDropDown = createNodeMenu(dash_instance) # create radio for days of data dayLabel, \ dayRadio, \ custDay = createDayRadio(dash_instance) # create search button and updating area searchButton, updatingLabel = createSearchButton(dash_instance) # components list and styles components = [{ 'elements': [{ 'element': searchLabel }, { 'element': searchRadio, 'colSpan': '2' }] }, { 'elements': [{ 'element': searchBar, 'colSpan': '3' }] }, { 'elements': [{ 'element': groupLabel }, { 'element': groupDropDown, 'colSpan': '2' }] }, { 'elements': [{ 'element': nodeLabel }, { 'element': nodeDropDown, 'colSpan': '2' }] }, { 'elements': [{ 'element': dayLabel }, { 'element': dayRadio }, { 'element': custDay }] }, { 'elements': [{ 'element': searchButton, 'colSpan': '3' }] }, { 'elements': [{ 'element': updatingLabel, 'colSpan': '3' }] }] #create the table and return it selection_table = Table(children=components, id="DashTable", style=dict(align='center', marginLeft='auto', marginRight='auto', marginBottom='30', marginTop='30', paddingBottom='20', textAlign='left', border='1px solid black', width='30%')).getComponent() # create space for updated dash avlayout = buildGraphLayout(title="Percent Availability") availabilityGraph = html.Div(children=[], style=dict(marginBottom=100, height=500, width=900), id='Availability Graph') cpulayout = buildGraphLayout(title='CPU Load') cpuGraph = html.Div(children=[], style=dict(marginBottom=100, height=500, width=900), id='CPU Load Graph') graphsPlaced = [{ 'elements': [{ 'element': cpuGraph }, { 'element': availabilityGraph }] }] av_cpu_table = Table(children=graphsPlaced, id='DashGraphs', style=dict(textAlign='center')).getComponent() # create legend for fieldset field_legend = html.Legend("Node Statistics", style=dict(fontSize=36, fontWeight="bold", position="relative", top="8px")) # Create fieldset for all tables and stats fieldset = html.Fieldset([ field_legend, selection_table, av_cpu_table, html.Div(id="interfaceTable", style=dict(marginBottom=200)) ], title="Down Items", style=dict(backgroundColor="white", border="1px solid black", marginLeft="30px", marginBottom="30px")) return fieldset
def defineDownItemFieldset(dash_instance): """Method to create a fieldset containing all down items""" down_nodes = getDownNodes() down_groups = getDownGroups() down_nodes = [node['Caption'] for node in down_nodes] down_groups = [group['Name'] for group in down_groups] node_mappings = resolveEntitiesToUrls(down_nodes, "node") group_mappings = resolveEntitiesToUrls(down_groups, "group") # Create Navigation pane for both nodes and groups down_nodes_nav_label = html.Label("Down Nodes", style=dict(margin="25px auto", fontWeight="bold", textDecoration="underline", fontSize=24)) down_nodes_nav_list = html.Ul(children=[ html.Li(html.A(key, href=value, target="_blank")) for key, value, in node_mappings.items() ]) down_groups_nav_label = html.Label("Down Groups", style=dict(margin="25px auto", fontWeight="bold", textDecoration="underline", fontSize=24)) down_groups_nav_list = html.Ul(children=[ html.Li( html.A(key, href=value, target="_blank", style=dict(wordBreak="break-all"))) for key, value, in group_mappings.items() ]) # Create containers for nav menus down_nodes_nav = html.Div( children=[down_nodes_nav_label, down_nodes_nav_list], style=dict(display="inline-block", textAlign="center", float="left", marginRight="50px")) down_groups_nav = html.Div( children=[down_groups_nav_label, down_groups_nav_list], style=dict(display="inline-block", textAlign="center", float="left", width="200px")) down_nav = html.Div(children=[down_nodes_nav, down_groups_nav], style=dict(maxWidth="600px", margin="0 auto")) # Add the containers to a fieldset field_legend = html.Legend("Down Items", style=dict(fontSize=36, fontWeight="bold", position="relative", top="8px")) fieldset = html.Fieldset([field_legend, down_nav], title="Down Items", style=dict(width="60%", backgroundColor="white", border="1px solid black", marginLeft="auto", marginRight="auto")) return fieldset
home = html.Div( className = 'home', children = [ html.Div( className='home__left', children=[ html.Div( className='home__leftControls', children=[ html.H2('CONTROLS'), html.Hr(), html.Fieldset( className='controls__createTest', children=[ html.Legend('CREATE A TEST'), html.Div( id = 'createTest__start', children=[ dcc.Input( id='input__testID', type='text', placeholder='Test ID' ), dcc.Input( id='input__sampleWeight', type='number', placeholder='Weight of Sample (Kg)' ), dcc.Input( id='input__time',
import dash_core_components as dcc import dash_html_components as html import dash_bootstrap_components as dbc from dash.dependencies import Input, Output import plotly import plotly.graph_objects as go import pandas as pd import os import pyodbc import numpy as np from functions import * from app import app import ipdb region_est_type_radioitem = dbc.FormGroup([ html.Legend("Estimate Type"), dbc.RadioItems(id='region-estimate-type-radioitem', options=[{ 'label': 'Total Population', 'value': 'Total Population' }, { 'label': 'Household Population', 'value': 'Household Population' }, { 'label': 'Group Quarter Population', 'value': 'Group Quarter Population' }, { 'label': 'Household', 'value': 'Household' }, { 'label': 'Housing Unit',
import dash import dash_core_components as dcc import dash_html_components as html import dash_bootstrap_components as dbc from dash.dependencies import Input, Output import plotly import plotly.graph_objects as go import pandas as pd import os import pyodbc import numpy as np from functions import * from app import app cnty_checklist = dbc.FormGroup([ html.Legend("County"), dbc.Checklist(id='county-id-checklist', options=[{ 'label': 'King', 'value': '033' }, { 'label': 'Kitsap', 'value': '035' }, { 'label': 'Pierce', 'value': '053' }, { 'label': 'Snohomish', 'value': '061' }], value=['033'],