def cycle_time_html():
'''
Cycle time plot
'''
return html.Div([
html.Center([
html.H6('Cycle Time', id='cycle-time-header'),
html.Img(id='i-cycle-time', src=i_src, style=info_style),
dcc.Graph(id='cycle-time-graph')
]),
tooltips.text_tooltip(tooltips.cycle_time, 'cycle-time-header'),
tooltips.text_tooltip(tooltips.cycle_time, 'i-cycle-time')
],
style=cycle_figure_style)
def table_dynRange_html():
'''
AGC info table and Dynamic range graph
'''
return html.Div(
[
html.Div([
html.H6('Information Table', id='table-header'),
html.Img(id='i-table', src=i_src, style=info_style),
html.Div(id='table')
],
style={'flex-grow': '1'}),
html.Div([
html.H6('Dynamic Range', id='dynamic-range-header'),
html.Img(id='i-dynamic-range', src=i_src, style=info_style),
dcc.Graph(id='dynamic-range-bar',
config={'displayModeBar': False})
],
style={'height': '240px'}),
html.Div([
dcc.Graph(id='observed-peptides',
config={'displayModeBar': False})
],
id='i-observed-peptides',
style={
'height': '210px',
'padding-top': '30px'
}),
tooltips.text_tooltip(tooltips.info_table, 'table-header'),
tooltips.text_tooltip(tooltips.info_table, 'i-table'),
tooltips.text_tooltip(tooltips.dynamic_range,
'dynamic-range-header'),
tooltips.text_tooltip(tooltips.dynamic_range, 'i-dynamic-range'),
tooltips.text_tooltip(tooltips.observed_peptides,
'i-observed-peptides')
],
style={
'display': 'flex',
'flex-wrap': 'wrap',
'padding-bottom': '2rem',
'padding-left': '1%',
'padding-right': '1%',
'justify-content': 'space-between'
})
def block_global_html():
'''
Global parameters: Distribution, TIC, and Acquisition method
'''
return html.Div([
html.H6('Peptide Distribution', id='peptide-distr-header'),
html.Img(id='i-peptide-distr', src=i_src, style=info_style),
html.Div(dcc.RadioItems(id='distribution',
options=[{
'label': 'Equimolar',
'value': 'equal',
}, {
'label': 'Regular',
'value': 'lognormal'
}, {
'label': 'Regular with majors',
'value': 'lognormal-major'
}],
value='lognormal'),
style=small_panel_style),
html.H6('Total Ion Current (charges/sec)', id='ion-current-header'),
html.Img(id='i-ion-current', src=i_src, style=info_style),
html.Div(dcc.Slider(
id='ionFlux',
min=0,
max=len(params.TIC) - 1,
value=4,
marks={i: '{:1.0e}'.format(v)
for i, v in enumerate(params.TIC)},
step=1),
style=small_panel_style),
html.H6('Acquisition Method', id='acquisition-meth-header'),
html.Img(id='i-acquisition-meth', src=i_src, style=info_style),
html.Div(dcc.RadioItems(id='method-choice',
options=[
{
'label': 'BoxCar',
'value': 'bc'
},
{
'label': 'Usual MS1',
'value': 'ms1'
},
],
value='ms1'),
style=small_panel_style),
tooltips.text_tooltip(tooltips.peptide_distribution,
'peptide-distr-header'),
tooltips.text_tooltip(tooltips.peptide_distribution,
'i-peptide-distr'),
tooltips.text_tooltip(tooltips.ion_current, 'ion-current-header'),
tooltips.text_tooltip(tooltips.ion_current, 'i-ion-current'),
tooltips.text_tooltip(tooltips.acquisition, 'acquisition-meth-header'),
tooltips.text_tooltip(tooltips.acquisition, 'i-acquisition-meth'),
],
style=block_style)
def block_MS1_html():
'''
MS1-related parameters
'''
return html.Div([
html.H6('MS1 Resolution', id='MS1-resolution-header'),
html.Img(id='i-ms1-res', src=i_src, style=info_style),
html.Div([
dcc.Slider(
id='resolution-slider',
min=1,
max=len(params.resolutions_list) - 1,
value=4,
marks={
i: str(resolution)
for i, resolution in enumerate(params.resolutions_list)
},
step=1)
],
style=small_panel_style),
html.H6('MS1 AGC Target', id='MS1-AGC-header'),
html.Img(id='i-ms1-agc', src=i_src, style=info_style),
html.Div([
dcc.Slider(
id='AGC-slider',
min=0,
max=len(params.agc_list) - 1,
value=2,
marks={
i: '{:.0e}'.format(agc)
for i, agc in enumerate(params.agc_list)
},
)
],
style=small_panel_style),
html.H6('MS1 Max Injection Time (ms)', id='MS1-IT-header'),
html.Img(id='i-ms1-mit', src=i_src, style=info_style),
html.Div([
dcc.Input(id='mit-box', type='number', size='20', value=100),
html.Button('set', id='it-button'),
],
style=small_panel_style),
tooltips.text_tooltip(tooltips.resolution, 'MS1-resolution-header'),
tooltips.text_tooltip(tooltips.resolution, 'i-ms1-res'),
tooltips.text_tooltip(tooltips.AGC, 'MS1-AGC-header'),
tooltips.text_tooltip(tooltips.AGC, 'i-ms1-agc'),
tooltips.text_tooltip(tooltips.MaxIT, 'MS1-IT-header'),
tooltips.text_tooltip(tooltips.MaxIT, 'i-ms1-mit'),
],
style=block_style)
def block_MS2_html():
'''
MS2-related parameters
'''
return html.Div([
html.H6('MS2 Resolution', id='MS2-resolution-header'),
html.Img(id='i-ms2-resolution', src=i_src, style=info_style),
html.Div([
dcc.Slider(
id='resolution-ms2-slider',
min=0,
max=len(params.resolutions_list) - 1,
value=2,
marks={
i: str(resolution)
for i, resolution in enumerate(params.resolutions_list)
},
step=1,
),
],
style=small_panel_style),
html.H6('MS2 Max Injection Time (ms)', id='IT-MS2-header'),
html.Img(id='i-ms2-mit', src=i_src, style=info_style),
html.Div([
dcc.Input(id='mit-ms2-box', type='number', size='20', value=30),
html.Button('set', id='it-ms2-button')
],
style=small_panel_style),
dcc.RadioItems(id='topN-topSpeed-choice',
options=[{
'label': 'TopN',
'value': 'topN'
}, {
'label': 'TopSpeed',
'value': 'topSpeed'
}],
value='topN',
labelStyle=header_style,
style={'display': 'inline'}),
html.Img(id='i-topN', src=i_src, style=info_style),
html.Div([
dcc.Slider(id='topN-slider',
min=0,
max=40,
value=15,
marks={i: '{}'.format(i)
for i in range(0, 41, 5)},
tooltip={'placement': 'bottom'})
],
style=small_panel_style),
dcc.Checklist(id='paral-checklist',
options=[
{
'label': 'Parallelization',
'value': 'on'
},
],
value=['on'],
labelStyle={'display': 'inline-block'},
style={
'padding-bottom': '1rem',
'display': 'inline'
}),
html.Img(id='i-paral', src=i_src, style=info_style),
tooltips.text_tooltip(tooltips.resolutionMS2, 'MS2-resolution-header'),
tooltips.text_tooltip(tooltips.resolutionMS2, 'i-ms2-resolution'),
tooltips.text_tooltip(tooltips.MaxIT, 'IT-MS2-header'),
tooltips.text_tooltip(tooltips.MaxIT, 'i-ms2-mit'),
tooltips.text_tooltip(tooltips.topN, 'topN-topSpeed-choice'),
tooltips.text_tooltip(tooltips.topN, 'i-topN'),
tooltips.text_tooltip(tooltips.parallel, 'i-paral'),
],
style=block_style)
style={
'display': 'flex',
'padding-bottom': '1rem'
}),
#upper part - info table, dynamic range plot, observed peptides
table_dynRange_html(),
#simulated mass spectrum and points-pep-peak graph
html.Div([
dcc.Graph(id='main-graph', style=main_graph_style),
html.Div([
html.H6('Peptide Elution Profile', id='ppp-header'),
html.Img(id='i-ppp-graph', src=i_src, style=info_style),
dcc.Graph(id='ppp-graph', config={'displayModeBar': False}),
tooltips.text_tooltip(tooltips.ppp, 'i-ppp-graph'),
tooltips.text_tooltip(tooltips.ppp, 'ppp-header')
],
style=ppp_figure_style)
],
style=big_panel_style),
#model parameters switches
html.Div(
[
#Block distribution, TIC and Acquisition
block_global_html(),
#Block MS1 parameters
block_MS1_html(),
#Block MS2 parameters
block_MS2_html(),