def acknowledge_alert(checkbox_checked):
"""
-- Allowing user to acknowledge an alert --
This callback takes as input the status of the checkbox that the user can see when
clicking on an alert marker and can use to acknowledge the alert.
For now, if the checkbox is checked, it simply eliminates the checkbox and displays
a message according to which the alert has already been taken into account.
Still to be done regarding this callback:
- use the client to effectively report the acknowledgement to the DB;
- check if an alert is acknowledged or not in the DB to display the right message.
"""
if not checkbox_checked:
return [
dbc.FormGroup([
dbc.Checkbox(
id='acknowledge_alert_checkbox_{}'.format(alert_id),
className="form-check-input"),
dbc.Label(
"Confirmer la prise en compte de l'alerte",
html_for='acknowledge_alert_checkbox_{}'.format(alert_id),
className="form-check-label")
],
check=True,
inline=True)
]
elif checkbox_checked:
return [html.P("Prise en compte de l'alerte confirmée")]
def custom_toggle(id,
checked,
label,
style,
className="",
delayed=False,
label_left_offset="16px"):
"""Creates custom toggle switch"""
delayed_class = ""
if delayed:
delayed_class = "slider-toggle-delayed"
return html.Div(
className=className,
style=style,
children=[
dbc.FormGroup(children=[
dbc.Label(
className="switch",
children=[
dbc.Checkbox(id=id, checked=checked),
html.Span(
className=f"slider-toggle round {delayed_class}")
])
],
check=True),
html.P(children=label,
style={
"position": "relative",
"left": label_left_offset
},
className="property-value")
])
def dataset_list(self, *datasets):
return [
dbc.ListGroupItem([
dbc.Checkbox(id=f"dataset-checkbox-{i}",
style={'float': 'right'},
checked=True), *self.dataset_itemlist(ds)
]) for i, ds in enumerate(datasets)
]
def GdprAgreementCheckbox():
return dbc.FormGroup(
[
dbc.Checkbox(id="gdpr-agreement-checkbox", className="form-check-input"),
dbc.Label([
"I read and agree to ConPlot ",
dbc.CardLink(html.U("Privacy Policy"), href=UrlIndex.PRIVACY_POLICY.value)
], html_for="standalone-checkbox", className="form-check-label", style={'margin-top': 2.5})
], check=True)
def get_video_checkbox(product):
return dbc.FormGroup([
dbc.Label([f'Use {product.capitalize()} on a local video file.'],
html_for=f'check-video-{product}',
width=7),
dbc.Col(dbc.Checkbox(id=f'check-video-{product}',
className='align-bottom',
persistence=True),
width=4)
],
row=True)
def get_boot(product):
return dbc.FormGroup([
dbc.Label([
f'Do you want {product.capitalize()} to automatically start on system startup?'
],
html_for=f'check-boot-{product}',
width=7),
dbc.Col(dbc.Checkbox(id=f'check-boot-{product}',
className='align-bottom'),
width=4)
],
row=True)
def checkbox(checkbox_id, label, checked):
form_group = dbc.FormGroup(
[
dbc.Checkbox(
id=checkbox_id, className="form-check-input", checked=checked
),
dbc.Label(
label,
html_for=checkbox_id,
className="form-check-label",
),
],
check=True,
)
return form_group
def acknowledge_alert(checkbox_checked):
if not checkbox_checked:
return [
dbc.FormGroup([
dbc.Checkbox(
id='acknowledge_alert_checkbox_{}'.format(alert_id),
className="form-check-input"),
dbc.Label(
"Confirmer la prise en compte de l'alerte",
html_for='acknowledge_alert_checkbox_{}'.format(alert_id),
className="form-check-label")
],
check=True,
inline=True)
]
elif checkbox_checked:
return [html.P("Prise en compte de l'alerte confirmée")]
def SingleSwitch(id_, label, default=False):
"""
This returns a dash component containing a single switch (a nice looking checkbox)
(not a part of a Checklist) using bootstrap.
`id` is the id of the Checkbox component inside.
`label` is the label shown beside it.
`default` is the default value of the switch.
"""
return html.Div([
dbc.Checkbox(id=id_, className='custom-control-input',
checked=default),
html.Label(label, htmlFor=id_, className='custom-control-label'),
],
className='custom-control custom-switch ml-2',
style=dict(display='inline'))
def generate_row( self, index, row, columns, is_summary = False ):
""" Generate the content for an individual table row """
row_cells = self.generate_row_cells( index, row, columns )
# add index cell?
if self.show_index:
row_cells.insert( 0, html.Td( index ) )
if is_summary:
return html.Tr( row_cells, className="dftable-summaryrow" )
# add check box cell
checkbox_id = "check_%s" % len(self.checkbox_ids)
self.checkbox_ids.append( checkbox_id )
style = { "text-align":"center" }
row_cells.insert( 0, html.Td(
html.Div(
dbc.Checkbox( className="form-check-input", id=checkbox_id, checked=False ),
className="custom-control custom-checkbox", style=style)
) )
# return the table row
return html.Tr( row_cells, className="dftable-row" )
'Le graphique a la droite montre la repartition des documents en fonction du nombre de mots. '
'Le menu permet de choisir entre les textes et les abstracts. '
'Chaque barre correspond a un interval, par exemple la premiere bar du graphique representant '
'les textes complets representes les textes ayant de 0 a 499 mots.',
className='card-text'),
dbc.Select(id='bags-select',
value='texts',
options=[{
'label': 'Textes (tranches de 500)',
'value': 'texts'
}, {
'label': 'Abstracts (tranches de 50)',
'value': 'abstracts'
}]),
dbc.FormGroup([
dbc.Checkbox(id='bags-select-2'),
dbc.Label('Separer les categories doctypes',
html_for='bags-select-2')
],
className='pt-2'),
],
width=3),
dbc.Col(
[dcc.Graph(id='token_counts_fig', style={'width': '180%'})],
width=5)
])
])
])
card_metadata_by_words = dbc.Card([
dbc.CardHeader('Taille des documents et Metadonnnees (10 plus nombreux)',
def score_graphs_from_graph_data(graph_data):
notenames = []
for i in range(128):
notenames.append(pretty_midi.note_number_to_name(i))
fig_layout = {
'title': 'Score',
'plot_bgcolor': 'black',
'paper_bgcolor': 'black',
'font': {
'color': 'white'
},
'xaxis': {
'title': 'Bar',
# 'rangeslider': {'visible': True},
# 'rangeselector': {'visible': True},
},
'yaxis': {
'tickmode': 'array',
'tickvals': np.arange(128),
'ticktext': notenames,
'range': [36, 96],
'nticks': 10,
'title': 'note'
},
'dragmode': 'pan',
# 'showscale': False,
# 'coloraxis_showscale': False
}
fig_config = {
'displayModeBar': False,
'scrollZoom': False,
# 'modeBarButtons':{'zoom3d':True}
}
trace_template = {
"type": "heatmap",
"zmin": 0,
"zmax": 1,
'showlegend': True,
'showscale': False,
# 'opacity': 0.5,
}
##DO GRAPHS
scale = 2 #calculated 1/scale values, i.e. 2 = 1/2 = 0.5
score_pianoroll = sc.Pianoroll(
id='pianoroll_graph',
stave_list=graph_data['stave_list'],
bar_offset=graph_data['bar_offset'][0],
width=len(graph_data['ticks_for_bar_start']) * 200 * scale,
height=(len(graph_data['instrument']) * 70 / scale) + 100,
scale=1 / scale,
stave_spacing=70)
score_pianoroll = html.Div(
children=score_pianoroll,
style={
'backgroundColor': '#eed',
'width':
(len(graph_data['ticks_for_bar_start']) * 200 + 100) / scale,
'height': (len(graph_data['instrument']) * 70 / scale) + 100
})
score_pianoroll = html.Div(
id='pianoroll_container',
children=[
html.Div(
'Score with the target at the top. The redness of the target means less audibility',
style={
'backgroundColor': '#eed',
'color': 'black',
'fontSize': 30,
'textAlign': 'center'
}), score_pianoroll
],
style={
'backgroundColor': '#eed',
'width': '100%',
'overflowX': 'auto'
})
score_pianoroll = html.Div([
dbc.Button('download score as PNG',
id='pianoroll_png',
block=True,
className='downloadpng',
size='sm'), score_pianoroll
])
fig_layout['xaxis']['tickmode'] = 'array'
fig_layout['xaxis']['tickvals'] = graph_data['ticks_for_bar_start']
fig_layout['xaxis']['ticktext'] = np.arange(len(graph_data['downbeats'][graph_data['bar_offset'][0]:graph_data['bar_offset'][1]])) + \
graph_data['bar_offset'][0] + 1 # Do the math to get the right text
#Set 3d camera direct above:
camera = dict(eye=dict(x=1 * 0.5, y=0., z=2.5 *
0.5) #Lower coefficient = bigger zoom
)
layout3d = {
'plot_bgcolor': 'black',
'paper_bgcolor': 'black',
'font': {
'color': 'white'
}, #'width': '1000', 'height': '500',
'scene': {
"aspectratio": {
"x": 1,
"y": 4,
"z": 0.5
},
'camera': camera,
},
#Layout template for 2d graphs
}
layout2d = {
'height': '300',
'plot_bgcolor': 'black',
'paper_bgcolor': 'black',
'font': {
'color': 'white'
},
}
tickvals_enhanced = []
k = 1
for i in range(graph_data['score_length']):
tickvals_enhanced.append(k)
if i + 1 in graph_data['ticks_for_bar_start']:
k += 1
#Do measure numbering for 2d graphs
layout2d['xaxis'] = dict()
layout2d['xaxis']['tickmode'] = 'array'
layout2d['xaxis']['tickvals'] = graph_data['ticks_for_bar_start']
layout2d['xaxis']['ticktext'] = np.arange(
len(graph_data['downbeats']
[graph_data['bar_offset'][0]:graph_data['bar_offset'][1]])
) + graph_data['bar_offset'][0] + 1 # Do the math to get the right text
#Do measure numbering for 3d graph
layout3d['scene']['yaxis'] = dict()
layout3d['scene']['yaxis']['title'] = 'Bar number'
layout3d['scene']['yaxis']['tickmode'] = 'array'
layout3d['scene']['yaxis']['tickvals'] = np.arange(
graph_data['score_length']) #ticks_for_bar_start
layout3d['scene']['yaxis'][
'ticktext'] = tickvals_enhanced #np.arange(len(midi_data.get_downbeats()[bar_offset[0]:bar_offset[1]])) + bar_offset[0] + 1 # Do the math to get the right text
layout3d['scene']['yaxis']['showgrid'] = True
layout3d['scene']['xaxis'] = dict()
layout3d['scene']['xaxis']['title'] = 'Critical band'
layout3d['scene']['xaxis']['tickvals'] = np.arange(107)
layout3d['scene']['xaxis']['ticktext'] = np.flip(constants.threshold[:, 0])
layout3d['scene']['xaxis']['title'] = 'Masking threshold in dB'
#layout3d['scene']['xaxis']['fixedrange'] = True
zoom_enable = dbc.FormGroup([
dbc.Checkbox(checked=False, id='zoom_enable'),
dbc.Label(' enable mouse scroll wheel zoom', html_for='zoom_enable')
],
style={'textAlign': 'center'})
graph3d = dcc.Graph(
id='3d_graph',
figure={
'data': [
go.Surface(
z=graph_data['orchestration_masking_curves'],
opacity=1,
reversescale=True,
colorscale='Spectral',
showscale=False,
name='Orchestration',
hovertemplate=
'Bar number: %{y}, Critical band: %{x}, Masking threshold %{z} dB'
),
go.Surface(
z=graph_data['target_peaks_over_masking'],
opacity=1,
colorscale='blugrn',
showscale=False,
name='Target',
hovertemplate=
'Bar number: %{y}, Critical band: %{x}, Excitation %{z} dB'
)
],
'layout':
layout3d
},
config=fig_config)
graph3d = html.Div([zoom_enable, graph3d])
x_axis = np.arange(graph_data['score_length'])
def set_id(number):
return {'type': 'a_graph', 'index': number}
layoutA = layout2d.copy()
layoutA['title'] = 'Target spectral peaks masked, in %'
masking_threshold_graph = dcc.Graph(
id=set_id(1),
figure={
'data': [
go.Scatter(
x=x_axis,
y=graph_data['target_masking_percent_array'],
fill='tozeroy',
name='Target audibility',
line={'color': 'olive'},
hovertemplate=
'%{y} percent of target peaks masked by orchestration')
],
'layout':
layoutA
},
config=fig_config)
masking_threshold_graph = html.Div([
html.Div(
'Click anywhere in the graph to show orchestration at current point',
style={'textAlign': 'center'}), masking_threshold_graph
])
orchestration_var_coeffs = np.array(graph_data['orchestration_var_coeffs'])
orchestration_var_coeffs[
orchestration_var_coeffs > 5] = 5 #Delete anomalies in var_coeff
layoutB = layout2d.copy()
layoutB[
'title'] = 'Orchestration variation coefficient (homogenuity of the orchestration)'
variation_coefficient_graph = dcc.Graph(
id=set_id(2),
figure={
'data': [
go.Scatter(x=x_axis,
y=orchestration_var_coeffs,
line={'color': 'sienna'},
fill='tozeroy',
name='Variation coefficient',
hovertemplate='Homogenuity coefficient: %{y}')
],
'layout':
layoutB
},
config=fig_config)
variation_coefficient_graph = html.Div([
html.Div(
'Click anywhere in the graph to show orchestration at current point',
style={'textAlign': 'center'}), variation_coefficient_graph
])
layoutC = layout2d.copy()
layoutC['title'] = 'Orchestration and target centroid comparison'
centroid_graph = dcc.Graph(
id=set_id(3),
figure={
'data': [
go.Scatter(x=x_axis,
y=graph_data['orchestration_centroids'],
name='Orchestration',
hovertemplate='Centroid: %{y}Hz'),
go.Scatter(x=x_axis,
y=graph_data['target_centroids'],
name='Target',
hovertemplate='Centroid: %{y}Hz')
],
'layout':
layoutC
},
config=fig_config)
centroid_graph = html.Div([
html.Div(
'Click anywhere in the graph to show orchestration at current point',
style={'textAlign': 'center'}), centroid_graph
])
layoutD = layout2d.copy()
layoutD['title'] = 'Orchestration and target color distance'
distance_graph = dcc.Graph(
id=set_id(4),
figure={
'data': [
go.Scatter(
x=x_axis,
y=graph_data['mfcc_distance_vector'],
fill='tozeroy',
line={'color': 'moccasin'},
name='Color distance',
hovertemplate='Target distance from orchestration: %{y}')
],
'layout':
layoutD
},
config=fig_config)
distance_graph = html.Div([
html.Div(
'Click anywhere in the graph to show orchestration at current point',
style={'textAlign': 'center'}), distance_graph
])
#masking3d=do3dgraph(midi_data, tgt, orchestration_pianoroll)
#Disable unnecessary graph for now
graph = dcc.Graph(
id='midi_graph',
figure={
'data': graph_data['all_traces'],
'layout': fig_layout
},
config=fig_config,
)
analyzed_material = graph_data['analyzed_material']
return [
score_pianoroll, masking_threshold_graph, variation_coefficient_graph,
centroid_graph, distance_graph, graph3d, graph, analyzed_material
]
def change_redshift(z, *args, **kwargs):
elem_input_array = []
for elem in list(elements.keys())[:10]:
row = html.Tr(
[
html.Td(
dbc.Checkbox(id='standalone-checkbox-' +
elem.replace(' ', '-')),
style={"padding-left": "1rem"},
),
html.Td(elem),
html.Td(dbc.Badge(
'__', #elem,
color=elements[elem]['color'])),
html.Td(
dbc.Input(id='z-' + elem.replace(' ', '-'),
value=z,
type='number',
min=0,
max=10,
step=0.0000001,
placeholder='z')),
html.Td(
dbc.Input(
id='v-' + elem.replace(' ', '-'),
type='number',
placeholder='v = 0 (km/s)',
#value=0
),
colSpan=2,
),
],
style={'padding': '0rem'})
elem_input_array.append(row)
table_body_one = [html.Tbody(elem_input_array)]
elem_input_array = []
for elem in list(elements.keys())[10:]:
row = html.Tr([
html.Td(
dbc.Checkbox(id='standalone-checkbox-' +
elem.replace(' ', '-'))),
html.Td(elem),
html.Td(dbc.Badge(
'__', #elem,
color=elements[elem]['color'])),
html.Td(
dbc.Input(id='z-' + elem.replace(' ', '-'),
value=z,
type='number',
min=0,
max=10,
step=0.0000001,
placeholder='z')),
html.Td(
dbc.Input(
id='v-' + elem.replace(' ', '-'),
type='number',
placeholder='v = 0 (km/s)',
#value=0
),
colSpan=2,
),
])
elem_input_array.append(row)
elem_input_array.append(
html.Tr([
html.Td(dbc.Checkbox(id='standalone-checkbox-custom1')),
html.Td(html.Div([
dbc.Badge('__', color='#c7b299'),
dbc.Input(id='lambda-custom1',
type='number',
min=0,
max=1e5,
step=0.1,
placeholder='Wavelength')
]),
colSpan=2),
html.Td(
dbc.Input(id='z-custom1',
type='number',
min=0,
max=10,
step=0.00000001,
placeholder='z',
value=z)),
html.Td(
dbc.Input(
id='v-custom1',
type='number',
placeholder='v = 0 (km/s)',
))
]))
elem_input_array.append(
html.Tr([
html.Td(dbc.Checkbox(id='standalone-checkbox-custom2')),
html.Td(html.Div([
dbc.Badge('__', color='#837565'),
dbc.Input(id='lambda-custom2',
type='number',
min=0,
max=1e5,
step=0.1,
placeholder='Wavelength')
]),
colSpan=2),
html.Td(
dbc.Input(id='z-custom2',
type='number',
min=0,
max=10,
step=0.00000001,
placeholder='z',
value=z)),
html.Td(
dbc.Input(
id='v-custom2',
type='number',
placeholder='v = 0 (km/s)',
))
]))
table_body_two = [html.Tbody(elem_input_array)]
return [
dbc.Row([
dbc.Table(
html.Tbody([
html.Tr([
html.Td(dbc.Table(table_body_one, bordered=True), ),
html.Td(dbc.Table(table_body_two, bordered=True), )
]),
]))
])
]
id='input-home',
placeholder='Path to directory',
persistence=True),
width=3,
),
],
className='mb-2',
row=True),
dbc.FormGroup(
[
dbc.Label([
'Do you want Stream to automatically start on system startup?'
],
html_for="check-boot",
width=6),
dbc.Col(dbc.Checkbox(id='check-boot',
className='align-bottom'),
width=3)
],
row=True,
),
],
style=NONE,
id='form'),
html.Div(children=[
html.P([
'Edit your Stream configuration file. See the ',
html.A('documentation', href=STREAM_DOCS_LINK, target='_blank'),
' for details.'
]),
dbc.Textarea(bs_size='sm',
id='area-config',
logged_out_layout = html.Div(
[
html.Div("Login", style={"text-align": "center", "font-size": "20px"}),
dbc.Col(
[
dbc.Label("Username or Email"),
dbc.Input(
id="username-entry",
style={"max-width": "250px", "margin-bottom": "20px"},
),
dbc.Label("Password"),
dbc.Input(
id="password-entry", type="password", style={"max-width": "250px"}
),
dbc.Checkbox(id="pass-toggle"),
dbc.Label("Show Password", style={"margin-left": "5px"}),
html.Div(),
dbc.Button("Login", id="login-button", color="success"),
dbc.Label(
children=[""], id="info-label", style={"margin-left": "10px"}
),
]
),
],
style={"text-alignment": "center"},
)
logged_in_layout = html.Div(
[
dbc.Label("Already logged in", id="logged-in-label"),
[
dbc.InputGroupAddon("Small", addon_type="prepend"),
dbc.Input()
],
size="sm",
),
]),
html.Br(),
html.Div([
dbc.InputGroup([
dbc.InputGroupAddon(dbc.RadioButton(), addon_type='prepend'),
dbc.Input(),
],
className='mb-3'),
dbc.InputGroup([
dbc.InputGroupAddon(dbc.Checkbox(), addon_type='prepend'),
dbc.Input(),
])
]),
html.Br(),
dbc.InputGroup([
dbc.InputGroupAddon(
dbc.Button("Random name", id="input-group-button"),
addon_type="prepend",
),
dbc.Input(id="input-group-button-input", placeholder="name"),
]),
html.Br(),
dbc.InputGroup([
dbc.DropdownMenu(
dropdown_menu_items, label="Generate", addon_type="prepend"),
def get_plot_options_form():
try:
pca_data = PCAModel(load_data=True)
label_options = [{
'label': label,
'value': label
} for label in pca_data.labels]
results_exist = pca_data.results_exist
pc_options = pca_data.get_pc_options()
except:
label_options = []
results_exist = False
pc_options = []
plot_data = PCAModel.get_plot_data()
return dbc.Card(
dbc.CardBody(
dbc.Form([
html.H5('Scores Plots'),
dbc.Row([
dbc.Col([
dbc.FormGroup([
dbc.Label('x-axis', html_for='abscissa-select'),
dcc.Dropdown(id='abscissa-select',
options=pc_options,
multi=False,
value=0)
])
]),
dbc.Col([
dbc.FormGroup([
dbc.Label('y-axis', html_for='ordinate-select'),
dcc.Dropdown(id='ordinate-select',
options=pc_options,
multi=False,
value=1)
])
]),
dbc.Col([
dbc.FormGroup([
dbc.Label('z-axis', html_for='applicate-select'),
dcc.Dropdown(id='applicate-select',
options=[{
'label': f'None',
'value': -1
}] + pc_options,
multi=False,
value=-1)
])
]),
dbc.Col([
dbc.FormGroup([
dbc.Label('Color by label(s)',
html_for='color-by-select'),
dcc.Dropdown(id='color-by-select',
options=label_options,
multi=True)
])
]),
dbc.Col([
dbc.FormGroup([
dbc.Label('Point label(s)',
html_for='label-by-select'),
dcc.Dropdown(id='label-by-select',
options=label_options,
multi=True)
])
]),
dbc.Col([
dbc.FormGroup([
dbc.Label([
'Encircle metric',
html.Abbr(
'\uFE56',
title=
'This will draw an oval shape to represent a category\'s'
' spread. These can be stacked as concentric rings.\n'
'SEM: standard error of the mean\n'
'\u03C3: standard deviation\n')
],
html_for='encircle-by-select'),
dcc.Dropdown(id='encircle-by-select',
options=[
{
'label': '2 SEM',
'value': '2sem'
},
{
'label': 'SEM',
'value': '1sem'
},
{
'label': '2\u03C3',
'value': '2std'
},
{
'label': '\u03C3',
'value': '1std'
},
{
'label': 'Range',
'value': 'range'
},
{
'label': '95% Confidence',
'value': '95conf'
},
{
'label': '95th percentile',
'value': '95percentile'
},
],
multi=True)
])
])
],
className='form-row'),
dbc.Row([
html.Div([
dbc.Checkbox(id='db-index'),
dbc.Label([
' Include DB index table?',
html.Abbr(
'\uFE56',
title=
'Davies-Bouldin indices are calculated from the "Color by" label'
)
],
className='form-check-label',
html_for='db-index')
],
className='form-check form-check-inline')
],
className='form-row'),
dbc.Row([
html.Div([
dbc.Checkbox(id='centroid'),
dbc.Label([
' Mark centroids?',
html.Abbr(
'\uFE56',
title=
'Centroids are calculated from the "Color by" label.'
)
],
className='form-check-label',
html_for='centroid')
],
className='form-check form-check-inline')
],
className='form-row'),
dbc.Row([
html.Div([
dbc.Checkbox(id='medoid'),
dbc.Label([
' Mark medoids?',
html.Abbr(
'\uFE56',
title=
'Medoids are calculated from the "Color by" label.'
)
],
className='form-check-label',
html_for='medoid')
],
className='form-check form-check-inline')
],
className='form-row'),
dbc.Row([], className='form-row'),
dbc.Row([
dbc.FormGroup([
dbc.Button([html.I(className='fas fa-plus'), ' Add'],
id='score-plot-add-button',
className='btn btn-success')
])
],
className='form-row'),
dbc.Row([
dbc.ListGroup([
dbc.ListGroupItem(
f'PC{score_plot["ordinate"] + 1} vs PC{score_plot["abscissa"] + 1} '
f'by {score_plot["color_by"]}') for score_plot in
PCAModel.get_plot_data()["score_plots"]
],
id='score-plot-list')
],
className='form-row',
id='score-plot-list-wrapper'),
dbc.Row([
dbc.FormGroup([
dbc.Button(
[html.I(className='fas fa-eraser'), ' Clear'],
id='score-plot-clear-button',
className='btn btn-danger')
])
],
className='form-row'),
html.Br(),
html.H5('Loadings Plots'),
dbc.Row([
dbc.Col([
dbc.FormGroup([
dbc.Label('Loadings', html_for='loading-select'),
dcc.Dropdown(
id='loading-select', options=[], multi=True)
])
]),
],
className='form-row'),
dbc.Row([
dbc.FormGroup([
dbc.Button([html.I(className='fas fa-plus'), ' Add'],
id='loading-plot-add-button',
className='btn btn-success')
])
],
className='form-row'),
dbc.Row([
dbc.ListGroup([
dbc.ListGroupItem(
PCAModel.component_list(plot['indices']))
for plot in plot_data['loading_plots']
],
id='loading-plot-list')
],
className='form-row',
id='loading-plot-list-wrapper'),
dbc.Row([
dbc.FormGroup([
dbc.Button(
[html.I(className='fas fa-eraser'), ' Clear'],
id='loading-plot-clear-button',
className='btn btn-danger')
])
],
className='form-row'),
html.Br(),
html.H5('Variance Plots'),
dbc.Row([
dbc.Col([
dbc.FormGroup([
dbc.Label('PCs', html_for='variance-select'),
dcc.Dropdown(
id='variance-select', options=[], multi=True)
])
])
],
className='form-row'),
dbc.Row([
html.Div([
dbc.Checkbox(id='variance-autoscale'),
dbc.Label(' Scale y axis?',
className='form-check-label',
html_for='variance-autoscale')
],
className='form-check form-check-inline')
],
className='form-row'),
dbc.Row([
dbc.FormGroup([
dbc.Button([html.I(className='fas fa-plus'), ' Add'],
id='variance-plot-add-button',
className='btn btn-success')
])
],
className='form-row'),
dbc.Row([
dbc.ListGroup([
dbc.ListGroupItem(
PCAModel.component_list(plot['indices']) +
(' (scaled y-axis)' if plot['scale_y'] else ''))
for plot in plot_data['variance_plots']
],
id='variance-plot-list')
],
className='form-row',
id='variance-plot-list-wrapper'),
dbc.Row([
dbc.FormGroup([
dbc.Button(
[html.I(className='fas fa-eraser'), ' Clear'],
id='variance-plot-clear-button',
className='btn btn-danger')
])
],
className='form-row'),
html.H5('Cumulative Variance Plots'),
dbc.Row([
dbc.Col([
dbc.FormGroup([
dbc.Label('Variance Threshold',
html_for='cumulative-variance-input'),
dbc.Input(id='cumulative-variance-input',
type='number',
value=95)
])
])
],
className='form-row'),
dbc.Row([
dbc.FormGroup([
dbc.Button([html.I(className='fas fa-plus'), ' Add'],
id='cumulative-variance-plot-add-button',
className='btn btn-success')
])
],
className='form-row'),
dbc.Row([
dbc.ListGroup([
dbc.ListGroupItem([
f"{cumulative_variance_plot['threshold']}"
for cumulative_variance_plot in PCAModel.
get_plot_data()['cumulative_variance_plots']
])
],
id='cumulative-variance-plot-list')
],
className='form-row',
id='cumulative-variance-plot-list-wrapper'),
dbc.Row([
dbc.FormGroup([
dbc.Button(
[html.I(className='fas fa-eraser'), ' Clear'],
id='cumulative-variance-plot-clear-button',
className='btn btn-danger')
])
],
className='form-row')
])))
def serve_layout():
navbar = dbc.NavbarSimple(
id="navbar",
children=[
dbc.NavItem(
dbc.NavLink(
"Project Repository",
id="github-link",
href="https://github.com/gshau/AstroPlanner/",
className="fa-github",
target="_blank",
)),
dbc.NavItem(
dbc.NavLink(
"Clear Outside Report",
id="clear-outside",
href=
f"http://clearoutside.com/forecast/{DEFAULT_LAT}/{DEFAULT_LON}?view=current",
target="_blank",
)),
dbc.NavItem(
dbc.NavLink(
"Weather",
id="nws-weather",
href=
f"http://forecast.weather.gov/MapClick.php?lon={DEFAULT_LON}&lat={DEFAULT_LAT}#.U1xl5F7N7wI",
target="_blank",
)),
dbc.NavItem(
dbc.NavLink(
"Satellite",
id="goes-satellite",
href=
"https://www.star.nesdis.noaa.gov/GOES/sector_band.php?sat=G16§or=umv&band=11&length=12",
target="_blank",
)),
dbc.NavItem(
dbc.NavLink(
"Smoke Forecast",
id="smoke-forecast",
href="https://rapidrefresh.noaa.gov/hrrr/HRRRsmoke/",
target="_blank",
)),
],
brand="The AstroImaging Planner",
brand_href="https://github.com/gshau/AstroPlanner/",
color="primary",
dark=True,
)
target_picker = dbc.Col([
html.Div(
[
html.Label(
"Change Target Status",
style={"textAlign": "center"},
),
dcc.Dropdown(
id="target-match",
options=[],
value=[],
multi=True,
),
],
className="dash-bootstrap",
)
])
target_status_selector = dbc.Col([
html.Div(
[
dcc.RadioItems(
options=[
{
"label": "Active",
"value": "active"
},
{
"label": "Acquired",
"value": "acquired"
},
{
"label": "Pending",
"value": "pending"
},
{
"label": "Closed",
"value": "closed"
},
],
labelStyle={"display": "block"},
id="target-status-selector",
)
],
className="dash-bootstrap",
)
])
date_picker = dbc.Row([
dbc.Col(
html.Div(
[
html.Label("DATE: "),
html.Br(),
dcc.DatePickerSingle(id="date-picker", date=dt.now()),
],
style={"textAlign": "center"},
className="dash-bootstrap",
), ),
])
yaxis_picker = dbc.Col(
html.Div(
[
html.Label("Quantity to plot:"),
dcc.Dropdown(
id="y-axis-type",
options=[{
"label": v,
"value": k
} for k, v in yaxis_map.items()],
value="alt",
),
],
style={"textAlign": "center"},
className="dash-bootstrap",
),
style={"border": "0px solid"},
)
profile_picker = dbc.Col(
html.Div(
[
html.Label(
"Group (Equipment Profiles)",
style={"textAlign": "center"},
),
dcc.Dropdown(id="profile-selection", ),
],
style={"textAlign": "center"},
className="dash-bootstrap",
),
style={"border": "0px solid"},
)
filter_targets_check = dbc.FormGroup([
dbc.Checkbox(id="filter-targets",
className="form-check-input",
checked=True),
dbc.Label(
"Seasonal Targets",
html_for="standalone-checkbox",
className="form-check-label",
),
])
filter_picker = dbc.Col([
html.Div(
[
html.Label(
"Matching Filters in Notes",
style={"textAlign": "center"},
),
dcc.Dropdown(
id="filter-match",
options=[
{
"label": "Narrowband",
"value": "nb"
},
{
"label": "Broadband",
"value": "bb"
},
{
"label": "Luminance",
"value": "lum"
},
{
"label": "RGB",
"value": "rgb"
},
{
"label": "Ha",
"value": "ha"
},
{
"label": "OIII",
"value": "oiii"
},
{
"label": "SII",
"value": "sii"
},
],
value=[],
multi=True,
),
],
className="dash-bootstrap",
)
])
status_picker = dbc.Col([
html.Div(
[
html.Label(
"Selected Target Status",
style={"textAlign": "center"},
),
dcc.Dropdown(
id="status-match",
options=[
{
"label": "Pending",
"value": "pending"
},
{
"label": "Active",
"value": "active"
},
{
"label": "Acquired",
"value": "acquired"
},
{
"label": "Closed",
"value": "closed"
},
],
value=["pending", "active"],
multi=True,
),
],
className="dash-bootstrap",
)
])
location_selection = dbc.Col(
html.Div(children=[
dbc.Col(
children=[
dbc.Row([
dbc.Col(
html.Label(
"LATITUDE: ",
style={"textAlign": "right"},
)),
dbc.Col(
html.Div(
dcc.Input(
id="input-lat",
debounce=True,
placeholder=DEFAULT_LAT,
type="number",
className="dash-bootstrap",
),
className="dash-bootstrap",
)),
]),
dbc.Row([
dbc.Col(
html.Label(
"LONGITUDE: ",
style={"textAlign": "left"},
), ),
dbc.Col(
dcc.Input(
id="input-lon",
debounce=True,
placeholder=DEFAULT_LON,
type="number",
)),
]),
dbc.Row([
dbc.Col(
html.Label(
"UTC OFFSET: ",
style={"textAlign": "left"},
), ),
dbc.Col(
dcc.Input(
id="input-utc-offset",
debounce=True,
placeholder=DEFAULT_UTC_OFFSET,
type="number",
), ),
]),
dbc.Row(
[
dbc.Col(
html.Label(
"Local SQM (mpsas): ",
style={"textAlign": "left"},
), ),
dbc.Col(
dcc.Input(
id="local-mpsas",
debounce=True,
placeholder=DEFAULT_MPSAS,
type="number",
), ),
],
style=styles.get("local-mpsas", {}),
),
dbc.Row(
[
dbc.Col(
html.Label(
"Extinction Coeff: ",
style={"textAlign": "left"},
), ),
dbc.Col(
dcc.Input(
id="k-ext",
debounce=True,
placeholder=DEFAULT_K_EXTINCTION,
type="number",
), ),
],
style=styles.get("k-ext", {}),
),
],
className="dash-bootstrap",
)
]), )
weather_graph = html.Div(id="weather-graph",
children=[dbc.Spinner(color="warning")])
weather_modal = html.Div([
dbc.Button(
"Show Weather Forecast",
id="open",
color="primary",
block=True,
className="mr-1",
),
dbc.Modal(
[
dbc.ModalHeader("Weather Forecast"),
dbc.ModalBody(weather_graph),
dbc.ModalFooter(
dbc.Button(
"Close",
id="close",
color="danger",
block=True,
className="mr-1",
), ),
],
id="modal",
size="xl",
),
])
upload = dcc.Upload(
id="upload-data",
children=html.Div([
dbc.Button(
"Drag and drop Voyager RoboClip (.mdb) or Sequence Generator Pro (.sgf) file or click here ",
color="dark",
className="mr-1",
)
]),
multiple=True,
)
update_data = html.Div(
id="upload-data-div",
children=[
dbc.Button(
"Update Data",
id="update-data",
color="primary",
block=True,
className="mr-1",
),
],
)
target_container = dbc.Container(
dbc.Row([
dbc.Col(
[
dbc.Container(
fluid=True,
style={"width": "95%"},
children=[
dbc.Row(date_picker, justify="around"),
html.Br(),
dbc.Row(profile_picker, justify="around"),
html.Br(),
dbc.Row(yaxis_picker, justify="around"),
html.Br(),
dbc.Row(filter_picker, justify="around"),
html.Br(),
dbc.Row(status_picker, justify="around"),
html.Br(),
dbc.Row(filter_targets_check, justify="around"),
html.Br(),
dbc.Row(target_picker, justify="around"),
html.Br(),
dbc.Row(target_status_selector, justify="around"),
html.Br(),
dbc.Row(update_data, justify="around"),
html.Br(),
dbc.Row(location_selection, justify="around"),
html.Br(),
dbc.Row(weather_modal, justify="around"),
html.Br(),
dbc.Row(
html.Div(id="upload-button", children=[upload
]),
justify="around",
),
],
),
],
width=3,
style={"border": "0px solid"},
),
dbc.Col(
children=[
html.Div(
id="target-graph",
children=[dbc.Spinner(color="primary")],
),
html.Br(),
html.Div(id="progress-graph"),
],
width=9,
),
]),
id="tab-target-div",
fluid=True,
style={},
)
data_table_container = dbc.Container(
dbc.Row([
dbc.Col(
children=[html.Div(id="data-table")],
width=12,
style={"border": "20px solid white"},
),
]),
id="tab-data-table-div",
fluid=True,
style={},
)
tabs = dbc.Tabs(
id="tabs",
active_tab="tab-target",
children=[
dbc.Tab(
label="Target Review",
tab_id="tab-target",
labelClassName="text-primary",
),
dbc.Tab(
label="Search Stored Data",
tab_id="tab-data-table",
labelClassName="text-info",
),
],
)
body = dbc.Container(
fluid=True,
style={"width": "80%"},
children=[
navbar,
tabs,
html.Br(),
data_table_container,
target_container,
html.Div(id="date-range", style={"display": "none"}),
],
)
layout = html.Div([
body,
dcc.Store(id="store-target-data"),
dcc.Store(id="store-target-list"),
dcc.Store(id="store-site-data", data={}),
dcc.Store(id="store-goal-data", data="{}"),
dcc.Store(id="store-progress-data", data="{}"),
dcc.Store(id="store-target-goals", data={}),
dcc.Store(id="store-target-metadata"),
dcc.Store(id="store-target-status"),
dcc.Store(id="store-placeholder"),
dcc.Store(id="dark-sky-duration"),
])
return layout
"label":
i + " (" + str(v) + " publication(s))",
"value": i,
} for i, v in journal_ser.items()],
value=top_journals,
multi=True,
style={"width": "100%"},
),
]),
dbc.Badge(
"Citation network:", color="info", className="mr-1"),
dbc.FormGroup([
dbc.Container([
dbc.Checkbox(
id="show_edges_radio",
className="form-check-input",
checked=True,
),
dbc.Label(
"Show citation connections",
html_for="show_edges_radio",
className="form-check-label",
style={
"color": "DarkSlateGray",
"fontSize": 12,
},
),
])
]),
dbc.Badge(
"Dimensionality reduction algorithm",
'''),
html.P()])
final_list.append(
html.Div(
[
html.P(['Download the offline version here: ', html.A('InfOmics/CRISPRitz', href = 'https://github.com/InfOmics/CRISPRitz', target="_blank"), ' or ', html.A('Pinellolab/CRISPRitz', href = 'https://github.com/pinellolab/CRISPRitz', target="_blank") ])
]
)
)
checklist_div = html.Div(
[
dbc.FormGroup(
[
dbc.Checkbox(
id="checkbox-gecko", className="form-check-input"
),
dbc.Label(
#html.P(['Activate Gecko ', html.Abbr('comparison', title ='The results of your test guides will be compared with results obtained from a previous computed analysis on gecko library')]) ,
html.P('Compare your results with the Gecko library'),
html_for="checkbox-gecko",
className="form-check-label",
),
dbc.Checkbox(
id="checkbox-ref-comp", className="form-check-input"
),
dbc.Label(
#html.P(['Activate Reference genome ', html.Abbr('comparison', title ='The results of your test guides will be compared with the results obtained from a computed analysis on the corresponding reference genome. Note: this may increase computational time')]) ,
html.P('Compare your results with the corresponding reference genome'),
html_for="checkbox-ref-comp",
className="form-check-label",
'type': 'text',
'if': {
'column_id': 'Element',
'row_index': list(elements).index(elem)
}
} for elem in elements]
columns = [{'id': p, 'name': p} for p in params]
columns.append({'id': 'Element', 'name': 'Element', 'editable': False})
columns.insert(0, columns.pop())
elem_input_array = []
for elem in list(elements.keys())[:9]:
row = html.Tr([
html.Td(
dbc.Checkbox(id='standalone-checkbox-' + elem.replace(' ', '-'))),
html.Td(elem),
html.Td(dbc.Badge(
' ', #elem,
color=elements[elem]['color'])),
html.Td(
dbc.Input(id='z-' + elem.replace(' ', '-'),
value=0,
type='number',
min=0,
max=10,
step=0.0000001,
placeholder='z')),
html.Td(
dbc.Input(id='v-' + elem.replace(' ', '-'),
type='number',
def change_redshift(z, *args, **kwargs):
elem_input_array = []
for elem in list(elements.keys())[:9]:
row = html.Tr([
html.Td(
dbc.Checkbox(id='standalone-checkbox-' +
elem.replace(' ', '-'))),
html.Td(elem),
html.Td(dbc.Badge(
'__', #elem,
color=elements[elem]['color'])),
html.Td(
dbc.Input(id='z-' + elem.replace(' ', '-'),
value=z,
type='number',
min=0,
max=10,
step=0.0000001,
placeholder='z')),
html.Td(
dbc.Input(id='v-' + elem.replace(' ', '-'),
type='number',
placeholder='Velocity (km/s)',
value=0))
])
elem_input_array.append(row)
table_body_one = [html.Tbody(elem_input_array)]
elem_input_array = []
for elem in list(elements.keys())[9:]:
row = html.Tr([
html.Td(
dbc.Checkbox(id='standalone-checkbox-' +
elem.replace(' ', '-'))),
html.Td(elem),
html.Td(dbc.Badge(
'__', #elem,
color=elements[elem]['color'])),
html.Td(
dbc.Input(id='z-' + elem.replace(' ', '-'),
value=z,
type='number',
min=0,
max=10,
step=0.0000001,
placeholder='z')),
html.Td(
dbc.Input(id='v-' + elem.replace(' ', '-'),
type='number',
placeholder='Velocity (km/s)',
value=0))
])
elem_input_array.append(row)
table_body_two = [html.Tbody(elem_input_array)]
return [
dbc.Row([
dbc.Table(
html.Tbody([
html.Tr([
html.Td(dbc.Table(table_body_one, bordered=True), ),
html.Td(dbc.Table(table_body_two, bordered=True), )
]),
]))
])
]
def get_base_layout(**kwargs):
indicators_dict = kwargs.get("indicators")
main_title = kwargs.get("main_title")
is_country_profile = kwargs.get("is_country_profile")
country_dropdown_style = {"display": "none"}
themes_row_style = {"verticalAlign": "center", "display": "flex"}
countries_filter_style = {"display": "block"}
programme_toggle_style = {"display": "block"}
main_area_style = {"display": "block"}
if is_country_profile:
country_dropdown_style = {
"minWidth": 400,
"maxWidth": 600,
"paddingRight": 4,
"verticalAlign": "center",
"display": "visible",
}
themes_row_style = {"display": "none"}
countries_filter_style = {"display": "none"}
programme_toggle_style = {"display": "none"}
main_area_style = {"display": "none"}
return html.Div(
[
dcc.Store(id="indicators", data=indicators_dict),
dcc.Location(id="theme"),
html.Div(
className="heading",
style={"padding": 36},
children=[
html.Div(
className="heading-content",
children=[
html.Div(
className="heading-panel",
style={"padding": 20},
children=[
html.H1(
main_title,
id="main_title",
className="heading-title",
),
html.P(
id="subtitle",
className="heading-subtitle",
),
],
),
],
)
],
),
dbc.Row(
children=[
dbc.Col([
dbc.Row(
[
dbc.ButtonGroup(id="themes", ),
],
id="theme-row",
# width=4,
className="my-2",
# no_gutters=True,
justify="center",
style=themes_row_style,
),
dbc.Row(
[
dbc.DropdownMenu(
label=f"Years: {years[0]} - {years[-1]}",
id="collapse-years-button",
className="m-2",
color="info",
# block=True,
children=[
dbc.Card(
dcc.RangeSlider(
id="year_slider",
min=0,
max=len(years) - 1,
step=None,
marks={
index: str(year)
for index, year in
enumerate(years)
},
value=[0, len(years) - 1],
),
style={
"maxHeight": "250px",
"minWidth": "500px",
},
className="overflow-auto",
body=True,
),
],
),
dcc.Dropdown(
id="country_profile_selector",
options=get_search_countries(False),
value="ALB",
multi=False,
placeholder="Select a country...",
className="m-2",
style=country_dropdown_style,
),
dbc.DropdownMenu(
label=f"Countries: {len(countries)}",
id="collapse-countries-button",
className="m-2",
color="info",
style=countries_filter_style,
children=[
dbc.Card(
dash_treeview_antd.TreeView(
id="country_selector",
multiple=True,
checkable=True,
checked=["0"],
# selected=[],
expanded=["0"],
data=selection_tree,
),
style={
"maxHeight": "250px",
# "maxWidth": "300px",
},
className="overflow-auto",
body=True,
),
],
),
dbc.FormGroup(
[
dbc.Checkbox(
id="programme-toggle",
className="custom-control-input",
),
dbc.Label(
"UNICEF Country Programmes",
html_for="programme-toggle",
className="custom-control-label",
color="primary",
),
],
className=
"custom-control custom-switch m-2",
check=True,
inline=True,
style=programme_toggle_style,
),
],
id="filter-row",
no_gutters=True,
justify="center",
),
]),
],
# sticky="top",
className="sticky-top bg-light",
),
dbc.Row(
[
dbc.CardDeck(
id="cards_row",
className="mt-3",
),
],
justify="center",
),
html.Br(),
dbc.CardDeck(
[make_area(area) for area in ["MAIN"]],
style=main_area_style,
),
html.Br(),
dbc.CardDeck([make_area(area) for area in ["AREA_1", "AREA_2"]], ),
html.Br(),
dbc.CardDeck([make_area(area) for area in ["AREA_3", "AREA_4"]], ),
html.Br(),
dbc.CardDeck([make_area(area) for area in ["AREA_5", "AREA_6"]], ),
html.Br(),
], )
def modal(id_suffix: str = "",
is_open: bool = True,
header: str = "",
body: str = ""):
"""
Creat a modal used in every view to guide the user.
Parameters
----------
id_suffix: `str`
Suffix used to make ids unique
is_open: `bool`
Control the visibility of the modal
header: `str`
Text for the header of the modal
body: `str`
Text for the body fo the modal
Returns
-------
The dash component
"""
id_modal = f"modal_{id_suffix}"
id_close_btn = f"close_{id_suffix}"
id_dont_show_again = f"dont_show_again_{id_suffix}"
id_dont_show_again_div = f"dont_show_again_div_{id_suffix}"
id_close_area = f"close_area_{id_suffix}"
id_image = f"modal_image_{id_suffix}"
return html.Div([
dbc.Modal(
[
dbc.ModalHeader(header),
dbc.ModalBody(children=[
body,
html.Div(
id=id_close_area,
children=[
html.Div(
id=id_dont_show_again_div,
children=[
dbc.Checkbox(
id=id_dont_show_again,
className="mt-4",
),
dbc.Label(
"Do not show again",
html_for=id_dont_show_again,
className="mr-1 mt-3 ml-1 pt-1",
),
],
),
dbc.Button(
"Close",
id=id_close_btn,
color="primary",
className="p-2 m-2",
),
],
className="d-flex justify-content-end bg-light",
),
dbc.Card(dbc.CardImg(id=id_image)),
]),
dbc.ModalFooter(children=[]),
],
id=id_modal,
is_open=is_open,
size="xl",
),
])
dbc.Input(
value=None,
id="num-tickets-input",
placeholder='Number of Tickets',
type="number",
min=1,
step=1,
persistence=False,
),
width=2,
),
dbc.Col(
dbc.FormGroup([
dbc.Checkbox(
id="prize-addition-input",
checked=False,
persistence=False,
className='form-check-input'
),
dbc.Label(
'Prize Addition',
html_for='prize-addition-input',
className='form-check-label'
)
],
check=True,
# inline=True,
),
width=2,
className='d-flex justify-content-center'
),
persistence_type="memory",
),
],
style={"min-width": "200px"},
),
]
)
public_and_submit = html.Div(
[
dcc.Markdown("---"),
html.Div(
[
dbc.Checkbox(
id="public-check",
persistence=True,
checked=False,
persistence_type="memory",
),
dbc.Label("Make Public", style={"padding-left": "5px"}),
]
),
dbc.Col(
[
dbc.Button("Submit Card", id="card-submit", color="success"),
html.Div(),
dbc.Label(id="error-info", style={"padding-top": "10px"}),
]
),
],
style={"text-align": "center"},
)
layout = html.Div(
[
dbc.Row(
[
dbc.Row(
[
dbc.Button("Refresh", id="get-cards"),
dbc.Row(
[
dbc.Row(
[
dbc.Checkbox(
id="show-user-cards",
checked=True,
style={
"margin-top": "5px",
"margin-right": "5px",
},
),
dbc.Label("My cards"),
],
style={
"margin-left": "30px",
"margin-right": "10px",
"margin-top": "7px",
},
),
dbc.Row(
[
dbc.Checkbox(
id="show-public-cards",
id="input-geometry-spiral-tmax",
value="1",
),
dbc.Input(
id="input-geometry-spiral-tnum",
value=50,
type="numeric",
disabled=True,
),
dbc.InputGroupText(
children="Draw Lines:",
),
dbc.InputGroupText(
children=[
dbc.Checkbox(
id="checkbox-geometry-spiral-mode",
value=True,
),
],
),
dbc.Button(
id="button-geometry-spiral-plot",
children="Generate",
n_clicks=0,
color="primary",
disabled=False,
),
],
),
]),
dbc.CardBody([
dcc.Graph(
dcc.Upload(
id='upload-data',
children=html.Div(
[html.A('Select File', style={"overflow": "hidden"})]),
style={
'width': '100%',
'height': '50px',
'lineHeight': '50px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px'
},
className="mt-0 pt-0"),
dbc.Checkbox(id="month-formatting",
className="mb-3 ml-3 d-inline"),
dbc.FormText("Format is MM/DD/YYYY",
className="ml-3 mt-2 d-inline"),
],
className="mr-5"),
lg=6,
md=12)
]),
],
className="shadow-sm jumbo-light p-3 mb-0 pb-0"),
html.Div(id="garbage", hidden=True)
],
className="mb-5 mt-5 pt-2")
def getLayout():
def get_field_input(self,
value,
input_id,
description=None,
required=False):
"""
Get component for user interaction. Types:
- string
- number
- tag list
- datetime
- string choice
- link choice
- list of subforms
- boolean
- path to file or dir
"""
owner_class = self.parent.owner_class
compound_id = {
'type': 'metadata-input',
'index': input_id,
'data_type': '',
'container_id': self.parent.container.id
}
default = None
if isinstance(value, list):
compound_id['data_type'] = 'list'
field_input = html.Div(value) # id=compound_id)
description = ''
elif 'enum' in value:
input_values = [{'label': e, 'value': e} for e in value['enum']]
default = value.get('default', '')
compound_id['data_type'] = 'choicestring'
field_input = dcc.Dropdown(id=compound_id,
options=input_values,
value=default,
className='dropdown_input')
elif 'target' in value:
compound_id['data_type'] = 'link'
field_input = dcc.Dropdown(id=compound_id,
options=[],
value='',
className='dropdown_input',
searchable=False,
clearable=False)
elif 'type' in value and value['type'] == 'array':
compound_id['data_type'] = 'tags'
field_input = TagInput(id=compound_id,
wrapperStyle={
'box-shadow': 'none',
'border-radius': '2px',
'line-height': '5px'
},
inputStyle={
'line-height': '15px',
'height': '15px'
})
elif 'format' in value and value['format'] == 'date-time':
compound_id['data_type'] = 'datetime'
field_input = DateTimePicker(id=compound_id, )
elif 'format' in value and value['format'] == 'long':
compound_id['data_type'] = 'string'
field_input = dbc.Textarea(id=compound_id,
className='string_input',
bs_size="lg",
style={'font-size': '16px'})
elif 'format' in value and value['format'] in ['file', 'directory']:
compound_id['data_type'] = 'path'
input_path = dbc.Input(id=compound_id,
className='string_input',
type='input')
btn_id = "open-filebrowser-" + compound_id['index']
btn_open_filebrowser = dbc.Button(
id=btn_id,
children=[html.I(className="far fa-folder")],
style={
'background-color': 'transparent',
'color': 'black',
'border': 'none'
})
modal_id = "modal-filebrowser-" + compound_id['index']
modal = make_filebrowser_modal(
parent_app=self.parent.container.parent_app,
modal_id=modal_id,
display=value['format'])
# Create internal trigger component and add it to parent Container
trigger_id = {
'type': 'internal-trigger-update-forms-values',
'parent': self.parent.container.id,
'index': compound_id['index']
}
trigger = html.Div(id=trigger_id, style={'display': 'none'})
self.parent.container.children_triggers.append(trigger)
self.register_filebrowser_callbacks(modal_id=modal_id,
button_id=btn_id,
trigger_id=trigger_id)
field_input = html.Div([
dbc.InputGroup([
input_path,
dbc.InputGroupAddon(btn_open_filebrowser,
addon_type="append"),
]), modal
])
elif value['type'] == 'boolean':
compound_id['data_type'] = 'boolean'
default = value.get('default', False)
field_input = dbc.Checkbox(id=compound_id, checked=default)
else:
input_type = value['type']
if input_type == 'number':
step = 1
compound_id['data_type'] = 'number'
elif 'name' in input_id:
step = ''
compound_id['data_type'] = 'name'
else:
step = ''
compound_id['data_type'] = 'string'
field_input = dbc.Input(id=compound_id,
className='string_input',
type=input_type,
step=step)
# Add data
if not isinstance(value, list):
self.parent.container.data.update({
input_id: {
'compound_id': compound_id,
'owner_class': str(owner_class),
'target': value.get('target', None),
'value': default,
'required': required
}
})
# Add tooltip to input field
if description is None:
description = value.get('description', '')
input_and_tooltip = html.Div([
html.Div(field_input,
id='wrapper-' + compound_id['index'] + '-' +
compound_id['type']),
dbc.Tooltip(description,
target='wrapper-' + compound_id['index'] + '-' +
compound_id['type']),
])
return input_and_tooltip
