import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = dbc.Container([
dbc.Form([
dbc.FormGroup([
dbc.Label('storage = "memory"时'),
dbc.Input(id='input-memory1', autoComplete='off'),
dbc.Input(id='input-memory2', style={'margin-top': '3px'}),
dcc.Store(id='data-in-memory')
]),
dbc.FormGroup([
dbc.Label('storage = "session"时'),
dbc.Input(id='input-session1', autoComplete='off'),
dbc.Input(id='input-session2', style={'margin-top': '3px'}),
dcc.Store(id='data-in-session', storage_type='session')
]),
dbc.FormGroup([
dbc.Label('storage = "local"时'),
dbc.Input(id='input-local1', autoComplete='off'),
dbc.Input(id='input-local2', style={'margin-top': '3px'}),
dcc.Store(id='data-in-local', storage_type='local')
]),
])
],
style={
'margin-top': '100px',
'max-width': '600px'
})
"label": "Credit",
"value": "CREDIT"
},
{
"label": "Debit",
"value": "DEBIT"
},
],
id="type_o_input",
inline=True,
),
])
order_form = dbc.Form([
customer_o_input, product_o_input, quantity_o_input, total_price,
card_o_input, type_o_input,
dbc.Button('Submit', id='order_submit', className="mb-3", color='primary')
])
create_order = html.Div([
html.H3("Order operations"),
dbc.Button(
"Create Order",
id="order-collapse-button",
className="mb-3 order-button",
color="primary",
),
dbc.Collapse(
dbc.Card(dbc.CardBody([order_form])),
id="order-collapse",
),
# Modal Content
desc = "Protective vehicles are less in numbers with the Army and are distributed uniformly across the area. Similarly, Explosive Detection Dogs ( ED Dogs ) are only less in the entire country. This web application can be used as a Predictive Analysis tool to find the trendline of each kind of Attack ( Bombing, Assassination, Etc.). This tool help in finding the concentration of Attack type - Bombing in the area which would help in allocation of the resources. Visualizing the data gives clear patterns about the data and makes it easy for the analysis. There are two components: 1. Map Tool -> It is used to generate a Scatter Geo Map with markers for highlighting the latitude/longitude where the incident happened based on combinations of Month, Day, Attack Type, Region, Country, State and City, and filter the 9 Type of Attacks ( Bombing, Assassination, Kidnapping, Etc.). Clicking and hovering of the mouse show pieces of information. 2. Chart Tool -> It is used to show the Stacked Line Chart images of the frequency of terrorist incidents each year. One can Group first by (Country Attacked, Region, Target Nationality, Target Type, Type of Attack, Weapon Type, Terrorist Organisation) with a search based on the selected Group. Both the components are available separately for the World and India. In this project, the dataset has approximately 1,90,000 records. Python programming language has been used for the development of this project, whereas Dash and Plotly are the critical components used to form the UI (User Interface) for the webpage and Bootstrap has been used for the styling purpose."
# Creating Modal layout
global modal
modal = html.Div(
[
html.Br(),
dbc.Button("About the project", id="open"),
dbc.Modal(
[
dbc.ModalHeader(html.H2("About the project"), ),
dbc.ModalBody(
dbc.Form(
[html.H6(desc, style={'text-align': 'justify'})],
inline=True,
)),
dbc.ModalFooter(
dbc.Button("Close", id="close", className="ml-auto")),
],
id="modal",
is_open=False, # True, False
size="xl", # "sm", "lg", "xl"
backdrop=
True, # True, False or Static for modal to not be closed by clicking on backdrop
scrollable=True, # False or True if modal has a lot of text
centered=True, # True, False
fade=True # True, False
),
], )
dbc.Tab(dbc.Form([
dbc.Label("Revenue Growth Rate (%) for next year",
html_for="rgr-next"),
dbc.Input(id="rgr-next",
type="number",
value=0,
min=-50,
step=0.1,
placeholder="Enter number",
debounce=True),
dbc.Label(
"Operating Margin (%) for next year excl. Reinvestment",
html_for="opm-next"),
dbc.Input(id="opm-next",
type="number",
value=0,
max=50,
step=0.1,
placeholder="Enter number",
debounce=True),
html.Br(),
dbc.Label(
"CAGR (%) for years 2-5 (select range: 0 to 15)",
html_for="cagr-2-5"),
dcc.Slider(id="cagr-2-5",
min=0,
max=15,
step=0.1,
value=5,
tooltip={
'always_visible': True,
'placement': 'topRight'
},
marks={v: str(v)
for v in range(0, 16)}),
dbc.Label(
"Target Pre-Tax Operating Margin (%) in business model (select range: 0 to 50)",
html_for="opm-target"),
dcc.Slider(
id="opm-target",
min=0,
max=50,
step=0.1,
value=20,
tooltip={
'always_visible': True,
'placement': 'topRight'
},
marks={v: str(v)
for v in range(0, 55, 5)}),
dbc.Label(
"Sales to capital ratio (for computing reinvestment, select range: 0 to 5)",
html_for="sales-to-cap"),
dcc.Slider(id="sales-to-cap",
min=0,
max=5,
step=0.01,
value=1,
tooltip={
'always_visible': True,
'placement': 'topRight'
},
marks={v: str(v)
for v in range(0, 6)}),
]),
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container([
dbc.Form([
dbc.FormGroup([
dbc.Label('Email', html_for='example-email'),
dbc.Input(type='email', id='example-email', placeholder='Enter email'),
dbc.FormText(
"Are you on email? You simply have to be these days",
color="secondary",
)
]),
dbc.FormGroup([
dbc.Label('Password', html_for='example-password'),
dbc.Input(
type='password',
id='example-password',
placeholder='Enter password',
),
dbc.FormText(
"A password stops mean people taking your stuff", color="secondary"
)
])
]),
#row
html.Hr(),
dbc.Form([
dbc.FormGroup([
dbc.Form(
[
dbc.FormGroup(
[
dbc.Label(
"Width of annotation paintbrush",
html_for="stroke-width",
),
# Slider for specifying stroke width
dcc.Slider(
id="stroke-width",
min=0,
max=6,
step=0.1,
value=DEFAULT_STROKE_WIDTH,
),
]
),
dbc.FormGroup(
[
html.H6(
id="stroke-width-display",
className="card-title",
),
dbc.Label(
"Blurring parameter",
html_for="sigma-range-slider",
),
dcc.RangeSlider(
id="sigma-range-slider",
min=0.01,
max=20,
step=0.01,
value=[0.5, 16],
),
]
),
dbc.FormGroup(
[
dbc.Label(
"Select features",
html_for="segmentation-features",
),
dcc.Checklist(
id="segmentation-features",
options=[
{"label": l.capitalize(), "value": l}
for l in SEG_FEATURE_TYPES
],
value=["intensity", "edges"],
),
]
),
# Indicate showing most recently computed segmentation
dcc.Checklist(
id="show-segmentation",
options=[
{
"label": "Show segmentation",
"value": "Show segmentation",
}
],
value=[],
),
]
),
dbc.Container(
dbc.Form(
[
dbc.FormGroup(
[
dbc.Label("用户名", html_for="username"),
dbc.Input(id="username", placeholder="请输入用户名", autoComplete='off')
]
),
dbc.FormGroup(
[
dbc.Label("账号密码", html_for="password"),
dbc.Input(
type="password",
id="password",
placeholder="请输入密码",
),
dbc.FormText(
"密码必须同时包含大写字母、小写字母和数字！", color="secondary"
),
]
),
dbc.FormGroup(
[
dbc.Button('注 册')
]
)
]
),
style={
def init_components(self):
"""
Initialize components (graph, table, filter, settings, ...) and insert it inside
components containers which are created by init_skeleton
"""
self.components['settings']['input_rows'] = create_input_modal(
id='rows',
label="Number of rows for subset",
tooltip="Set max number of lines for subset (datatable).Filter will be apply on this subset."
)
self.components['settings']['input_points'] = create_input_modal(
id='points',
label="Number of points for plot",
tooltip="Set max number of points in feature contribution plots"
)
self.components['settings']['input_features'] = create_input_modal(
id='features',
label="Number of features to plot",
tooltip="Set max number of features to plot in features importance and local explanation plots.",
)
self.components['settings']['input_violin'] = create_input_modal(
id='violin',
label="Max number of labels for violin plot",
tooltip="Set max number of labels to display a violin plot for feature contribution plot (otherwise a "
"scatter plot is displayed)."
)
self.components['settings']['name'] = dbc.FormGroup(
[
dbc.Checklist(
options=[{"label": "Use domain name for features name.", "value": 1}], value=[], inline=True,
id="name",
style={"margin-left": "20px"}
),
dbc.Tooltip("Replace technical feature names by domain names if exists.",
target='name', placement='bottom'),
], row=True,
)
self.components['settings']['modal'] = dbc.Modal(
[
dbc.ModalHeader("Settings"),
dbc.ModalBody(
dbc.Form(
[
self.components['settings']['input_rows'],
self.components['settings']['input_points'],
self.components['settings']['input_features'],
self.components['settings']['input_violin'],
self.components['settings']['name']
]
)
),
dbc.ModalFooter(
dbc.Button("Apply", id="apply", className="ml-auto")
),
],
id="modal"
)
self.components['menu'] = dbc.Row(
[
dbc.Col(
[
html.H4(
[dbc.Badge("Regression", id='regression_badge', style={"margin-right": "5px"}),
dbc.Badge("Classification", id='classification_badge')
],
style={"margin": "0px"}
),
],
width="auto", align="center",
),
dbc.Col(
dbc.Collapse(
dbc.FormGroup(
[
dbc.Label("Class to analyse", style={'color': 'white', 'margin': '0px 5px'}),
dcc.Dropdown(
id="select_label",
options=[], value=None,
clearable=False, searchable=False,
style={"verticalAlign": "middle", "zIndex": '1010', "min-width": '200px'}
)
],
row=True, style={"margin": "0px 0px 0px 5px", "align-items": "center"}
),
is_open=True, id='select_collapse'
),
width="auto", align="center", style={'padding': 'none'}
),
dbc.Col(
html.Div(
[
html.Img(id='settings', title='settings', alt='Settings',
src=self.app.get_asset_url('settings.png'),
height='40px',
style={'cursor': 'pointer'}),
self.components['settings']['modal'],
]
),
align="center", width="50px", style={'padding': '0px 0px 0px 20px'}
)
],
form=True, no_gutters=True, justify="end"
)
self.adjust_menu()
self.components['table']['dataset'] = dash_table.DataTable(
id='dataset',
data=self.round_dataframe.to_dict('records'),
tooltip_data=[
{
column: {'value': str(value), 'type': 'text'}
for column, value in row.items()
} for row in self.dataframe.to_dict('rows')
], tooltip_duration=2000,
columns=[{"name": '_index_', "id": '_index_'}, {"name": '_predict_', "id": '_predict_'}] +
[{"name": i, "id": i} for i in self.explainer.x_pred],
editable=False, row_deletable=False,
style_as_list_view=True,
virtualization=True,
page_action='none',
fixed_rows={'headers': True, 'data': 0},
fixed_columns={'headers': True, 'data': 0},
filter_action='custom', filter_query='',
sort_action='custom', sort_mode='multi', sort_by=[],
active_cell={'row': 0, 'column': 0, 'column_id': '_index_'},
style_table={'overflowY': 'auto', 'overflowX': 'auto'},
style_header={'height': '30px'},
style_cell={
'minWidth': '70px', 'width': '120px', 'maxWidth': '200px',
},
)
self.components['graph']['global_feature_importance'] = MyGraph(
figure=go.Figure(), id='global_feature_importance'
)
self.components['graph']['feature_selector'] = MyGraph(
figure=go.Figure(), id='feature_selector'
)
self.components['graph']['detail_feature'] = MyGraph(
figure=go.Figure(), id='detail_feature'
)
self.components['filter']['index'] = dbc.FormGroup(
[
dbc.Label("Index ", align="center", width=4),
dbc.Col(
dbc.Input(
id="index_id", type="text", bs_size="md", placeholder="Id must exist",
debounce=True, persistence=True, style={'textAlign': 'right'}
),
style={'padding': "0px"}
),
dbc.Col(
html.Img(id='validation', alt='Validate', title='Validate index',
src=self.app.get_asset_url('reload.png'),
height='30px', style={'cursor': 'pointer'},
),
style={'padding': "0px"}, align="center", width="40px"
)
],
row=True
)
self.components['filter']['threshold'] = dbc.FormGroup(
[
dbc.Label("Threshold", html_for="slider", id='threshold_label'),
dcc.Slider(
min=0, max=self.max_threshold, value=0, step=0.1,
marks={f'{round(self.max_threshold * mark / 4)}': f'{round(self.max_threshold * mark / 4)}'
for mark in range(5)},
id="threshold_id",
)
],
className='filter_dashed'
)
self.components['filter']['max_contrib'] = dbc.FormGroup(
[
dbc.Label(
"Features to display : ", id='max_contrib_label'),
dcc.Slider(
min=1, max=min(self.settings['features'], len(self.dataframe.columns) - 2),
step=1, value=min(self.settings['features'], len(self.dataframe.columns) - 2),
id="max_contrib_id",
)
],
className='filter_dashed'
)
self.components['filter']['positive_contrib'] = dbc.FormGroup(
[
dbc.Label("Contributions to display : "),
dbc.Row(
[
dbc.Col(
dbc.Checklist(
options=[{"label": "Positive", "value": 1}], value=[1], inline=True,
id="check_id_positive"
), width=6
),
dbc.Col(
dbc.Checklist(
options=[{"label": "Negative", "value": 1}], value=[1], inline=True,
id="check_id_negative"
), width=6, style={'padding': "0px"}, align="center"
),
], no_gutters=True, justify="center", form=True
)
],
className='filter_dashed'
)
self.components['filter']['masked_contrib'] = dbc.FormGroup(
[
dbc.Label(
"Feature(s) to mask :"),
dcc.Dropdown(options=[{'label': key, 'value': value} for key, value in sorted(
self.explainer.inv_features_dict.items(), key=lambda item: item[0])],
value='', multi=True, searchable=True,
id="masked_contrib_id"
),
],
className='filter_dashed'
)
className='main_page_card',
children=[
dbc.CardBody(children=[
dbc.Form(
[
dbc.FormGroup(
[
dbc.Input(
id=
"batfish_host_input",
value="",
placeholder=
"Enter host",
),
],
className="mr-3",
),
dbc.Button(
"Submit",
id=
"set_batfish_host_submit_button",
color="dark",
outline=True,
size="sm",
style=dict(height="25px",
))
],
inline=True,
)
])
],
),
'value': 'fasta'
},
{
'label': 'PO (poagraph in PO format)',
'value': 'po'
},
],
values=['fasta', 'po'])
],
width=6),
],
row=True)
_poapangenome_form = dbc.Form([
_data_type_form, _metadata_upload_form, _multialignment_upload_form,
_missing_data_form, _blosum_upload_form, _consensus_algorithm_form,
_poa_hbmin_form, _tree_params_form, _output_form
])
_poapangenome_tab_content = html.Div([
dcc.Store(id=id_session_state),
dcc.Store(id=id_session_dir),
dbc.Row(
[
dbc.Col([
html.H3("Task Parameters"), _poapangenome_form,
dbc.Row(
dbc.Col(
dbc.Button("Run",
id=id_pang_button,
color="primary",
def get_layout(input_name, n_components, min_sample, xi):
# TODO: add analysis statictics
def get_avaliable_principal_components(input_name, n_components):
pcoa_hdf_key = f"components_pcoa/coordinates"
hdf_filename = f'/output/{input_name}'
with pd.HDFStore(hdf_filename, 'r') as store:
n_components = int(n_components)
return store[pcoa_hdf_key].columns[:n_components]
avaliable_components = get_avaliable_principal_components(input_name, n_components)
return dbc.Container(
[
dbc.Row([
dbc.Col(html.H2("OPTICS Clustering")),
dbc.Col(html.H2("DBSCAN Clustering")),
]),
dbc.Row(
dbc.Col(
dbc.Form([
dbc.FormGroup([
dbc.Label("Components", className="mr-2"),
dbc.Select(
id='first-pc-dropdown',
options=[{"label": pc, "value": pc} for pc in avaliable_components]
),
], className="mr-3"),
dbc.FormGroup([
dbc.Label("vs.", className="mr-2"),
dbc.Select(
id='second-pc-dropdown',
options=[{"label": pc, "value": pc} for pc in avaliable_components]
),
], className="mr-3"),
dbc.FormGroup([
dbc.Label("DBScan cutoff", className="mr-2"),
dbc.Input(
type="number",
id="pcoa-dbscan-cutoff",
min=.001,
step=.001,
),
], className="mr-3"),
dbc.Button("Plot", id="pcoa-plot-button", color="primary"),
], inline=True)
)
),
dbc.Row([
dbc.Col(
dcc.Graph(id='pcoa-optics-graph')
, width={"size": 6}),
dbc.Col(
dcc.Graph(id='pcoa-dbscan-graph')
, width={"size": 6})
]),
dbc.Row(
dbc.Col(
html.H2("Reachability plot"),
),
),
dbc.Row(
dbc.Col(
dcc.Graph(id='pcoa-reachability-graph')
)
),
dcc.Store(id='pcoa-dataset-params', data={
"input_name": input_name,
"n_components": n_components,
"min_sample": min_sample,
"xi": xi,
"first_pc": None,
"second_pc": None,
"dbscan_cutoff": None,
})
], fluid=True,
)
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
email_input = dbc.FormGroup([
dbc.Label("Email", html_for="example-email"),
dbc.Input(type="email", id="example-email", placeholder="Enter email"),
])
password_input = dbc.FormGroup([
dbc.Label("Password", html_for="example-password"),
dbc.Input(type="password",
id="example-password",
placeholder="Enter password",
width='16px'),
])
form = dbc.Form([email_input, password_input])
app.layout = html.Div(
[dbc.Alert("enter the credentials", color="success"), form])
if __name__ == "__main__":
app.run_server()
{"value": "dry", "label": "Dry (Other)"},
{"value": "wet", "label": "Wet (Other)"},
]
inputs = html.Div(
[
html.H5("Inputs"),
dbc.Form(
dbc.FormGroup(
[
dbc.Label("Measure by"),
dbc.RadioItems(
id="radio-units",
className="mb-2",
options=[
{"value": "weight", "label": "weight"},
{"value": "percentage", "label": "percentage"},
],
value="weight",
inline=True,
),
]
)
),
html.Div(
id="div-scale",
children=[
dbc.InputGroup(
className="mb-2",
children=[
dbc.InputGroupAddon("Current weight", addon_type="prepend"),
"width": "99%"
},
)
form = dbc.Form(
[
dbc.FormGroup(
[
dbc.Label("Add Ticker", className="mr-2"),
dbc.Input(type="text", placeholder="TSLA", id="addin"),
],
className="mr-3",
),
dbc.FormGroup(
[
dbc.Label("Remove Ticker", className="mr-2"),
dbc.Input(type="text", placeholder="ACB", id="removein"),
],
className="mr-3",
),
dbc.Button("Update Tickers", color="light", id="ticker-button"),
],
inline=True,
style={
"margin-left": "22px",
"margin-bottom": "12px"
},
)
@app.callback(
Output("tickbody", "children"),
},
{
"label": "Disabled Option",
"value": 3,
"disabled": True
},
],
value=[],
id="switches-input",
switch=True,
),
])
app.layout = dbc.Container([
html.Div([
dbc.Form([radioitems, checklist, switches]),
html.P(id="radioitems-checklist-output"),
]),
html.Br(),
html.Div([
dbc.FormGroup(
[
dbc.Checkbox(id="standalone-checkbox",
className="form-check-input"),
dbc.Label(
"This is a checkbox",
html_for="standalone-checkbox",
className="form-check-label",
),
],
check=True,
def build_layout(params):
layout = [
dbc.ButtonGroup([
# dbc.Button("Cumulative", id="cumPlot_button", className="mb-3", color="primary", ),
#dbc.Button("Daily", id="dailyPlot_button", className="mb-3", color="secondary", ),
dbc.Button("Data", id="data_button", className="mb-3", color="primary",),
dbc.Button("Filters", id="filter_button", className="mb-3", color="primary"),
dbc.Button("Transforms", id="transform_button", className="mb-3", color="primary",),
dbc.Button("Plot", id="plotVar_button", className="mb-3", color="primary", ),
#dbc.Button("Link", id="link_button", className="mb-3", color="info", ),
]), # Collapse control buttons
dbc.Collapse([
dbc.CardHeader("Generate Short Link:"),
dbc.Card(dbc.CardBody([
dbc.Button("GenerateLink", id="genLink_button",
className="mb-3", color="info",),
dbc.Input(id='link_label'),
])
),
], # Short link generator :: ToDo : Replace with encode/decode URL
id="link_collapse"),
dbc.Collapse([
dbc.CardHeader("Select data:"),
dbc.Card(dbc.CardBody(
dbc.Form([
dbc.FormGroup([
dbc.Label("Int. Org.",
html_for="example-email-row",
width=2),
dbc.Col(
apply_default_value(params)(dcc.Dropdown)(
id='intOrg_selector',
options=[{'label': plot_var, 'value': idx} \
for idx, plot_var in enumerate(intOrg)],
#value=[{'label':'deaths' 'value':1} for idx, colname],
value=0,
placeholder='Select Entity',
multi=False,
className="dropdown"
),
width=10,
),
],row=True,), # International Organisations Picker
dbc.FormGroup([
dbc.Label("UN Region",
html_for="example-email-row",
width=2),
dbc.Col(
apply_default_value(params)(dcc.Dropdown)(
id='unRegion_selector',
options=[{'label': plot_var, 'value': idx} \
for idx, plot_var in enumerate(unRegion)],
#value=[{'label':'deaths' 'value':1} for idx, colname],
value=None,
placeholder='Select Entity',
multi=False,
className="dropdown"
),
width=10,
),
],row=True,), # UN Region Picker
dbc.FormGroup([
dbc.Label("Continent",
html_for="example-email-row",
width=2),
dbc.Col(
apply_default_value(params)(dcc.Dropdown)(
id='continent_selector',
options=[{'label': plot_var, 'value': idx} \
for idx, plot_var in enumerate(continents)],
#value=[{'label':'deaths' 'value':1} for idx, colname],
value=None,
placeholder='Select Entity',
multi=False,
className="dropdown"
),
width=10,
),
],row=True,), # Continent picker
dbc.FormGroup([
dbc.Label("Countries",
html_for="example-email-row",
width=2),
dbc.Col(
apply_default_value(params)(dcc.Dropdown)(
id='country_names',
options=generate_country_name_options(),
#value=[{'label':'deaths' 'value':1} for idx, colname],
value=reverse_lookup_col_idx('Name',
default_countries),
placeholder='Select Countries',
multi=True,
className="dropdown"
),
width=10,
),
],row=True,), # Countries picker
dbc.FormGroup([
dbc.Label("Variables", html_for="example-password-row", width=2),
dbc.Col(
apply_default_value(params)(dcc.Dropdown)(
id='cv_variables',
options=[{'label': plot_var,
'value': idx} \
for idx, plot_var in enumerate(plot_vars)],
#value=[{'label':'deaths' 'value':1} for idx, colname],
value=0,
placeholder='Select Variables',
multi=False,
className="dropdown"
),
width=10,
),
],row=True,) # Variable picker
]) # Data Form
)),
], id="data_collapse",), # Data Collapse
dbc.Collapse([
dbc.CardHeader("Apply filters to selected data:"),
dbc.Card(
dbc.CardBody([
dbc.Row([
dbc.Col(
dbc.FormGroup([
dbc.Label("Cumulative Threshold", className="mr-2"),
apply_default_value(params)(dcc.Dropdown)(
id="threshold_cumulative",
options=[{'label':'None', 'value':0},
{'label':'50', 'value':50},
{'label':'100', 'value':100},
{'label':'500', 'value':500},
{'label':'1000', 'value':1000},
{'label':'5000', 'value':5000}],
placeholder='Select threshold',
value=0,
)
], className="mr-3",),
width=4), # Cumulative threshold
dbc.Col(
dbc.FormGroup([
dbc.Label("Daily Threshold", className="mr-2"),
apply_default_value(params)(dcc.Dropdown)(
id="threshold_daily",
options=[{'label':'None', 'value':0},
{'label':'10', 'value':10},
{'label':'25', 'value':25},
{'label':'50', 'value':50},
{'label':'100', 'value':100},
{'label':'250', 'value':250}],
placeholder='Select threshold',
value=0,
)
],
className="mr-3",
),
width=4
), # Daily threshold
dbc.Col(
dbc.FormGroup([
dbc.Label("Rolling mean", className="mr-2"),
apply_default_value(params)(dcc.Dropdown)(
id='rollingMean',
options=[{'label': item, 'value': idx } for idx, item in enumerate(rmean_options)],
value=0,
placeholder='Select Countries',
multi=False,
className="dropdown"
)
],
className="mr-3",
),
width=4
), # Rolling mean
#dbc.Button("Submit", color="primary"),
]),
dbc.Row([
dbc.Col([
dbc.FormGroup([
dbc.Label("Date Range"),
#dcc.DatePickerRange(
apply_default_value(params)(dcc.DatePickerRange)(
id='date_picker',
min_date_allowed=dt.datetime(2020, 1, 22),
max_date_allowed=(dt.datetime.today() - dt.timedelta(1)),
#initial_visible_month=dt.datetime(2020, 1, 20),
start_date=dt.datetime(2020, 1, 31),
end_date=(dt.datetime.today() - dt.timedelta(1)),
className="dash-bootstrap"
), # Date Picker
], className="mr-3")
]),
]),
]),
)
], id="filter_collapse",), # Filters Collapse
dbc.Collapse([
dbc.CardHeader("Transform selected data:"),
dbc.Card(
dbc.CardBody([
dbc.FormGroup([
dbc.Label("Transformations", width=3),
dbc.Col(
apply_default_value(params)(dbc.RadioItems)(
id='normalise',
options=[
{'label':'None', 'value':'simple'},
{'label':'Normalise by population', 'value':'normalise'},
{'label':'Percentage of Total (by day)', 'value':'percent'},
{"label": "Indexed to Date", "value": 'index',"disabled": True,},
],
value='simple',
),
width=9,
),
],row=True,), # Transformation form group
#
]),
),
],
id="transform_collapse",
), # Transform Collapse
dbc.Collapse([
dbc.CardHeader("Configure the plot:"),
dbc.Card(
dbc.CardBody([
dbc.Label("Y-Axis:", width=3),
apply_default_value(params)(dbc.RadioItems)(
options=[{'label':'Linear scale', 'value':'linear'},
{'label':'Log scale', 'value':'log'},],
value='linear',
id='yscale_rb',
# labelStyle={'display': 'inline-block'}
)#]),
])
),
], id="plotVar_collapse",), # Plot Var Collapse
# dbc.Collapse([
dbc.CardHeader("Cumulative Plot:"),
dbc.Card(
dcc.Graph(
id='topGraph',
figure={
'data': [dict(
x = full_df[full_df['Name']==country]['Date'],
y = full_df[full_df['Name']==country][generate_plot_var(0, 'disable', True)],
#'text': ['a', 'b', 'c', 'd'],
#'customdata': ['c.a', 'c.b', 'c.c', 'c.d'],
name = country,
mode = 'line',
marker = {'size': 10}
) for country in default_countries ],
'layout': dict(
clickmode='event+select',
xaxis={'type': 'date', 'title': 'time'},
yaxis={'type': 'linear', 'title':generate_plot_var(0, 'disable', True)},
title="Cumulative",
margin={'t': 0, 'pad':0},
#margin=dict(l=20, r=20, t=20, b=20),
#height= 800,
)
}
),
), # Cumulative plot Card
#],
#id="cumPlot_collapse",
# ),
# dbc.Collapse([
dbc.CardHeader("Daily Plot:"),
dbc.Card(
dcc.Graph(id='bottomGraph',
figure={'data': [
dict(
x = full_df[full_df['Name']==country]['Date'],
y = full_df[full_df['Name']==country][generate_plot_var(0, 'disable', False)],
#'text': ['a', 'b', 'c', 'd'],
#'customdata': ['c.a', 'c.b', 'c.c', 'c.d'],
name = country,
mode = 'line',
marker = {'size': 10}
) for country in default_countries
],
'layout': dict(
#height= 2000,
clickmode='event+select',
xaxis={'type': 'date', 'title': 'time'},
yaxis={'type': 'linear', 'title':generate_plot_var(0, 'disable', False)},
margin={'t': 0, 'pad':0},
#margin=dict(l=20, r=20, t=20, b=20),
)
}
),
), # Daily Plot Card
# ],
# id="dailyPlot_collapse",
#),
] # End of layout
return layout
placeholder="Choisissez votre entitée de niveau %s" % depth,
className="mb-3",
clearable=True,
)
layout = html.Div(
id="div-entity-choice",
children=[
html.Div(id="entity-choice-div-url-redirect-to-dashboard", style={"display": "none"}),
html.Div(id="entity-choice-selected-entity", style={"display": "none"}),
dbc.Row(
dbc.Col(
[
html.H1("Choisissez votre entité", className="my-5"),
dbc.Form([], id="entity-choice-dropdowns", className="mb-5"),
],
width={"size": 6, "offset": 3},
)
),
dbc.Row(
dbc.Col(
dbc.Button(
"Afficher les données", id="button-to-dashboard", color="primary", style={"display": "none"}
),
width={"size": 2, "offset": 5},
),
className="mb-5",
),
],
)
firebase = pyrebase.initialize_app(config)
auth = firebase.auth()
body = html.Div(
[
dbc.Card([dbc.CardBody(dbc.Form([
dbc.FormGroup([
dbc.Label('Email', html_for='emailup'),
dbc.Input(
type='email',
id='emailup',
placeholder='enter email',
)
]),
dbc.FormGroup([
dbc.Label('Password', html_for='emailup'),
dbc.Input(
type='password',
id='passup',
placeholder='enter password',
)]),
dbc.Button('Sign up', id='signinbtn', color='primary', n_clicks=0),
html.H1(id='returnmsgup')
])
)
], style={"width": "18rem"},
)
])
'margin-left': 15
},
style={"font-size": "larger"}),
md=4,
align='center',
),
], ),
html.Hr(),
dbc.Form([
dbc.FormGroup([
dbc.Label("Width of annotation paintbrush",
html_for="stroke-width",
style={"font-size": "larger"}),
# Slider for specifying stroke width
dcc.Slider(
id="stroke-width",
min=1,
max=6,
step=0.5,
value=DEFAULT_STROKE_WIDTH,
),
]),
]),
]),
dbc.CardFooter(
[
# Download links
html.Div(children=[
dbc.ButtonGroup(
[
dbc.Button(
],
value=[],
id="check_pipeline",
),
])
# Define Tab Model (1)
tab_model = html.Div([
alert, msg_features,
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardHeader("Features Parameters"),
dbc.CardBody([
dbc.Form([
feature_selector, sequence_time_input, audio_win_input,
sr_input, specific_parameters, btn_extract_features
])
]),
]),
dbc.Card([
dbc.CardHeader("Dataset Parameters"),
dbc.CardBody([
dbc.Form([
dataset_selector, dataset_path_input,
dataset_folders_input
])
]),
]),
],
width=6),
dbc.Col(dbc.Card([
className="mb-2"),
dbc.InputGroup([
dbc.InputGroupAddon(dbc.Button("Random"), addon_type="prepend"),
dbc.Input(placeholder="name"),
],
className="mb-2"),
dbc.InputGroup([
dbc.DropdownMenu(
drop_down_list, label="Generate", addon_type="prepend"),
dbc.Input(placeholder="name"),
]),
],
className="mt-2"),
# 表单类 ========================================================================================
dbc.Form(children=[email_input, password_input],
className="mt-2 p-2 bg-light"),
dbc.Form(children=[email_input_row, password_input_row],
className="mt-2 p-2 bg-light"),
dbc.Form(children=[
dbc.FormGroup([
dbc.Label("Email", className="mr-2"),
dbc.Input(placeholder="Enter email", type="email")
],
className="mr-3"),
dbc.FormGroup([
dbc.Label("Password", className="mr-2"),
dbc.Input(placeholder="Enter password", type="password")
],
className="mr-3"),
dbc.FormGroup([
dbc.Label("Date", className="mr-2"),
def layout_table(tag='ALL',
substructure=None,
smiles=None,
solvent='ALL',
functional='ALL',
basis_set='ALL',
message="",
queried=False):
"""main layout with a table of molecules"""
tags_coll = db_connect('tags')
mols_coll = db_connect('molecules')
solvents = list(
set(
map(str.upper,
mols_coll.distinct('metadata.gaussian_config.solvent'))))
functionals = list(
set(
map(str.upper,
mols_coll.distinct('metadata.gaussian_config.theory'))))
basis_sets = list(
set(
map(str.upper,
mols_coll.distinct(
'metadata.gaussian_config.light_basis_set'))))
options_tags = get_tags_dropdown(basis_set, functional, solvent)
query_form = dbc.Form(
id='query-form',
prevent_default_on_submit=False,
children=[
dbc.Table(
html.Tbody([
html.Tr([
html.Td(dbc.Button("Dataset Tag",
type='button',
style={'width': '100%'}),
style={'width': '80px'}),
html.Td(
dbc.Select(
name='tag',
id='tags_dropdown',
options=options_tags,
required=True,
value='ALL',
persistence="session",
))
]),
html.Tr([
html.Td(dbc.Button(
"Solvent", type='Button', style={'width': '100%'}),
style={'width': '80px'}),
html.Td(
dbc.Select(
name='solvent',
id='solvents_dropdown',
options=[
dict(label=f'ALL', value='ALL'),
dict(
label="-------------------------------",
value="",
disabled="disabled")
] + [
dict(label=solvent, value=solvent)
for solvent in solvents
],
required=True,
value='ALL',
persistence="session",
))
]),
html.Tr([
html.Td(dbc.Button("Functional",
type='button',
style={'width': '100%'}),
style={'width': '80px'}),
html.Td(
dbc.Select(
name='functional',
id='functionals_dropdown',
options=[
dict(label=f'ALL', value='ALL'),
dict(
label="-------------------------------",
value="",
disabled="disabled")
] + [
dict(label=functional, value=functional)
for functional in functionals
],
required=True,
value='ALL',
persistence="session",
))
]),
html.Tr([
html.Td(dbc.Button("Basis Set",
type='button',
style={'width': '100%'}),
style={'width': '80px'}),
html.Td(
dbc.Select(
name='basis_set',
id='basis_sets_dropdown',
options=[
dict(label=f'ALL', value='ALL'),
dict(
label="-------------------------------",
value="",
disabled="disabled")
] + [
dict(label=basis_set, value=basis_set)
for basis_set in basis_sets
],
required=True,
value='ALL',
persistence="session"))
]),
html.Tr([
html.Td(dbc.Button("Substructure",
type='button',
style={'width': '100%'}),
style={'width': '80px'}),
html.Td(
dbc.Input(
name="substructure",
id="substructure",
placeholder="SMARTS Substructure",
style={"width": "100%"},
persistence="session",
value=substructure,
))
]),
html.Tr([
html.Td(dbc.Button(
"Smiles", type='button', style={'width': '100%'}),
style={'width': '80px'}),
html.Td(
dbc.Input(
name="smiles",
id="smiles",
placeholder="SMILES string",
style={"width": "100%"},
persistence="session",
value=smiles,
))
]),
html.Tr(
html.Td(dbc.Button(
'Query',
id='submit_query-form',
color="primary",
block=True,
type='submit',
),
colSpan=2)),
], ), # html.Tbody
borderless=True,
responsive=True),
])
export_summary_form = html.Form(
id='export-summary-form',
method='post',
children=[
dbc.Table(html.Tbody(
html.Tr(
html.Td(
dbc.Button('Export List',
id='submit_export-summary-form',
color="primary",
block=True)))),
borderless=True),
dbc.Input(name="export", id='export', style={'display': 'none'}),
])
download_descriptors_form = html.Form(
id='export-form',
children=[
dbc.Table(html.Tbody([
html.Tr(
html.Td(
dcc.Dropdown(
id='dropdownPresetOptions',
options=[
dict(label=lab, value=val) for lab, val in zip(
desc_presets_long, desc_presets)
],
multi=True,
placeholder="Select descriptor presets...",
))),
html.Tr(
html.Td(
dbc.Select(id='dropdownConformerOptions',
options=[
dict(label=desc, value=val)
for desc, val in zip(
conf_options_long, conf_options)
],
required=True,
placeholder="Select conformer option..."))),
html.Tr(
html.Td(
dbc.Button('Download',
id='submit_export-form',
color="primary",
block=True)))
]),
borderless=True),
dcc.Input(name="PresetOptions",
id="inputPresetOptions",
style={'display': 'none'}),
dcc.Input(name="ConformerOptions",
id="inputConformerOptions",
style={'display': "none"})
],
method='post',
)
if queried:
cols = [
'image', 'can', 'name', 'tags', 'solvent', 'theory',
'light_basis_set', 'heavy_basis_set', 'num_conf/max_conf', 'detail'
]
df = get_table(tag=tag,
substructure=substructure,
smiles=smiles,
solvent=solvent,
functional=functional,
basis_set=basis_set)
if not df.empty:
df = df[cols]
else:
df = pd.DataFrame(columns=cols)
content = [
dbc.Tabs([dbc.Tab(query_form, label="Query")] + ([
dbc.Tab(download_descriptors_form, label="Download Descriptors"),
dbc.Tab(export_summary_form, label="Export Molecule List")
] if queried else []),
style={
'margin-top': "5px",
"margin-left": "10px"
}),
# placeholder for any error message
html.P(message) if message else html.Div(),
# molecule table
html.Div([
dbc.Label(f"Found {df.shape[0]} molecules"),
dt.DataTable(
id="mol_table",
data=df.to_dict(orient='records'),
columns=[{
'id':
c,
'name':
c,
'presentation':
('markdown' if c in ['image', 'detail'] else 'input')
} for c in df.columns],
page_size=30,
editable=False,
style_table={
"fontFamily":
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"'
},
style_header={
'backgroundColor': 'primary',
'fontWeight': 'bold',
'padding': '0.75rem'
},
style_cell={
"fontFamily":
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
'fontWeight': '400',
'lineHeight': '1.5',
'color': '#212529',
'textAlign': 'left',
'whiteSpace': 'normal',
'height': 'auto',
'padding': '0.75rem',
'border': '1px solid #dee2e6',
'verticalAlign': 'top',
},
style_as_list_view=True,
)
],
style={"margin": "10px"}) if queried else html.Div()
# dbc.Table.from_dataframe(df, responsive=True) if queried else html.Div(),
]
content_div = html.Div(children=content, style={"align": "center"})
return content_div
import dash_bootstrap_components as dbc
form = dbc.Form(
[
dbc.FormGroup(
[
dbc.Label("Email", className="mr-2"),
dbc.Input(type="email", placeholder="Enter email"),
],
className="mr-3",
),
dbc.FormGroup(
[
dbc.Label("Password", className="mr-2"),
dbc.Input(type="password", placeholder="Enter password"),
],
className="mr-3",
),
dbc.Button("Submit", color="primary"),
],
inline=True,
)
style={'height': '200px'})
])
app.layout = html.Div([
navbar.Navbar(),
dbc.Row(dbc.Col(html.Br())),
dbc.Row(dbc.Col(html.H2("Loan Calculator"), width={"offset": 1})),
dbc.Row(
dbc.Col(html.P("This calculator will help you determine the monthly\
payments on a loan. Also, you can add any extra\
payments into the calculation."),
width={"offset": 1})),
dbc.Row(dbc.Col(html.Hr())),
dbc.Row([
dbc.Col([
dbc.Form([loan_amount, payment, interest, extra_payment]),
dbc.Button("Apply Extra Payment",
id='ext_button',
outline=True,
color="secondary",
className="mr-1"),
html.Br(),
html.Br(),
dbc.Button("Get Start",
id='button',
outline=True,
color="primary",
className="mr-1")
],
width={"offset": 1}),
dbc.Col(tabs)
def get_options_form():
try:
collection_options = [{
'label': f'{collection.id}: {collection.name}',
'value': collection.id
} for collection in get_collections(current_user, {'kind': 'data'})]
analysis_options = [{
'label': f'{analysis.id}: {analysis.name}',
'value': analysis.id
} for analysis in get_analyses(current_user)]
except:
collection_options = []
analysis_options = []
try:
editor_data = CollectionEditorModel(load_data=True)
label_options = [{
'label': label,
'value': label
} for label in editor_data.labels]
loaded_badges = editor_data.get_collection_badges()
collection_load_info = editor_data.get_collection_load_info()
if len(loaded_badges) == 2:
collection_ids = editor_data.unique_vals('original_collection_id')
collection_id_options = [{
'label': f'collection_id={i}',
'value': i
} for i in collection_ids]
else:
collection_id_options = []
except:
loaded_badges = [
html.Span([dbc.Badge('None', className='badge-pill')])
]
collection_load_info = 'Loaded collections.'
label_options = []
collection_id_options = []
return dbc.Form([
dbc.Row([
dbc.Col([
dbc.FormGroup([
dbc.Label('Collection IDs', html_for='collection-id'),
dcc.Dropdown(options=collection_options,
id='collection-id',
multi=True)
])
]),
dbc.Col([
dbc.FormGroup([
dbc.Label(collection_load_info,
html_for='loaded-display',
id='collections-label'),
dcc.Loading([
dbc.InputGroup([
dbc.Button('Get',
id='get-collection',
className='col-sm-2 btn-success'),
html.H4(loaded_badges,
id='loaded-collections',
className='col-sm-10')
],
id='loaded-display')
])
])
])
]),
html.H5('Filter/Join Collections'),
dbc.Row([
dbc.Col([
dbc.FormGroup([
dbc.Label([
'Filter by label(s)',
html.Abbr(
'\uFE56',
title=
'Only consider records satisfying conditions on these'
' fields.')
],
html_for='filter-by'),
dcc.Dropdown(id='filter-by',
options=label_options,
multi=True)
])
]),
dbc.Col([
dbc.FormGroup([
dbc.Label([
'Filter by conditions',
html.Abbr(
'\uFE56',
title=
'The conditions which must be satisfied for the records'
'to be considered.')
],
html_for='filter-by-value'),
dcc.Dropdown(id='filter-by-value', options=[], multi=True)
])
])
]),
dbc.Row([
dbc.Col([
dbc.FormGroup([
dbc.Label([
'Ignore by label(s)',
html.Abbr(
'\uFE56',
title=
'Exclude records satisfying conditions on these fields'
)
],
html_for='ignore-by'),
dcc.Dropdown(id='ignore-by',
options=label_options,
multi=True)
])
]),
dbc.Col([
dbc.FormGroup([
dbc.Label([
'Ignore by conditions',
html.Abbr(
'\uFE56',
title=
'Conditions which apply to records to be excluded.'
)
],
html_for='ignore-by-value'),
dcc.Dropdown(id='ignore-by-value', options=[], multi=True)
])
])
]),
dbc.Row([
dbc.Col([
dbc.FormGroup([
dbc.Label([
'Join on label(s)',
html.Abbr(
'\uFE56',
title=
'A combination of values forming a unique key on which '
'the two collections are joined.')
],
html_for='join-on'),
dcc.Dropdown(id='join-on',
options=label_options,
multi=True,
disabled=(len(loaded_badges) != 2))
])
]),
dbc.Col([
dbc.FormGroup([
dbc.Label([
'"Left" Collection ID',
html.Abbr(
'\uFE56',
title=
'The collection id for the collection which will have '
'positive values for "x" and appear on the left side of '
'the plots')
],
html_for='positive-collection'),
dcc.Dropdown(id='positive-collection',
options=collection_id_options,
multi=False,
disabled=(len(loaded_badges) != 2))
])
])
]),
html.H5('Post Collection'),
dbc.Row([
dbc.Col([
dbc.FormGroup([
dbc.Label('Name', html_for='name-input-wrapper-wrapper'),
html.Div(html.Div(dbc.Input(id='name-input'),
id='name-input-wrapper'),
id='name-input-wrapper-wrapper')
])
]),
dbc.Col([
dbc.FormGroup([
dbc.Label('Analyses', html_for='analysis-select'),
dcc.Dropdown(id='analysis-select',
options=analysis_options,
multi=True)
])
]),
dbc.Col([
dbc.FormGroup([
dbc.Label('Post', html_for='post-button-group'),
dbc.FormGroup([
dbc.Button(
[html.I(className='fas fa-upload'), ' Post'],
id='post-button',
className='btn btn-success')
],
id='post-button-group')
])
])
],
className='form-row'),
dcc.Loading(html.Small('', id='post-message', className='form-text'))
# will inject link when results posted
])
dbc.Form(
[
dbc.FormGroup(
[
dbc.Label("Username"),
dbc.Input(
placeholder="Enter your username", type="text"
),
dbc.FormText(
[
"Can't remember your username? ",
html.A(
"Click here.",
href="#",
className="text-muted",
style={"textDecoration": "underline"},
),
]
),
]
),
dbc.FormGroup(
[
dbc.Label("Username"),
dbc.Input(
placeholder="Enter your password", type="password"
),
dbc.FormText(
[
"Can't remember your password? ",
html.A(
"Click here.",
href="#",
className="text-muted",
style={"textDecoration": "underline"},
),
]
),
]
),
]
),
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app.layout = html.Div([
dcc.Store(id='memory', storage_type='session'),
html.Br(),
dbc.Row([
dbc.Col(md=1),
dbc.Col([
dbc.Form([
dbc.FormGroup([
dcc.Upload(id='upload-csv', multiple=False, children=html.Div([ dbc.Button("Select CSV", outline=True, color="secondary")]), className="mr-4"),
dbc.Label("Selected CSV: ", className="mr-2"),
dbc.Label("none selected", id='csv-filename'),
],className="mr-3",),
],inline=True,),
], md=10),
dbc.Col(md=1),
]),
dbc.Row([
dbc.Col(md=1),
dbc.Col([html.Div([dcc.Graph(id='heatmap'),], style={'display': 'inline-block', 'width': '100%'})], md=10),
dbc.Col(md=1),
]),
dbc.Row([
dbc.Col(md=1),
def decision_trees_layout(explainer, round=2, **kwargs):
return dbc.Container(
[
dbc.Row([
dbc.Col(
[
html.H2('Predictions of individual decision trees.'),
dbc.Form([
dbc.FormGroup(
[
dbc.Label("Index", className="mr-2"),
dbc.Input(
id='tree-input-index',
placeholder="Fill in index here...",
debounce=True),
],
className="mr-3",
),
dbc.Button("Random Index",
color="primary",
id='tree-index-button'),
],
inline=True),
dcc.Store(id='tree-index-store'),
html.H4(
'(click on a prediction to see decision path)'),
# dcc.Loading(id="loading-trees-graph",
# children=[
dcc.Graph(id='tree-predictions-graph'),
#]),
],
width={
"size": 8,
"offset": 2
})
]),
dbc.Row([
dbc.Col([
html.Label('Decision path in decision tree:'),
dcc.Markdown(id='tree-basevalue'),
dash_table.DataTable(
id='tree-predictions-table',
style_cell={
'fontSize': 20,
'font-family': 'sans-serif'
},
),
],
width={
"size": 6,
"offset": 3
})
]),
dbc.Row([
dbc.Col([
dcc.Loading(id="loading-tree-svg-graph",
children=[html.Img(id='dtreeviz-svg')])
])
])
],
fluid=True)
]),
]),
className="mt-3",
)
tab_usa_map = html.Div(
dbc.Card(
dbc.CardBody([
dbc.Row([
dbc.Col(html.Div(""), width=3),
dbc.Col(html.Div(
dbc.Form([
dbc.FormGroup([
dbc.Label("Cases / Scale", html_for="slider"),
dcc.Slider(id="slider",
min=1,
max=1000,
step=10,
value=400),
])
])),
width=3),
dbc.Col(html.H1(id='rate-slider', ), width=3),
]),
dbc.Row([
dbc.Col(html.Div(id='rate-scale'), md=12, lg=6),
dbc.Col(html.Div(
dcc.Graph(figure=usa_barchart(
data=fetch_to_date.main('2020-03-28', usa_only=True)),
style={'height': '75vh'})),
md=12,
lg=6)
# Python Standard Libraries
#
# External Libraries
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
# Components
#
# Search Form
search_string_input = dbc.FormGroup(
[
dbc.Label("Search author", html_for="search-author-row", width=2),
dbc.Col(
dbc.Input(
type="text", id="search-author", placeholder="Enter author"),
width=10,
),
],
row=True,
)
search_form = dbc.Form([search_string_input], id="search-form")