def display_msa(msa):
return dashbio.AlignmentChart(
id='alignment-viewer',
data=open(msa).read(),
extension='clustal',
)
def test_dbav003_change_conservation_colorscale(dash_duo):
app = dash.Dash(__name__)
app.layout = html.Div(
simple_app_layout(dash_bio.AlignmentChart(id=_COMPONENT_ID,
data=_data)))
simple_app_callback(app,
dash_duo,
component_id=_COMPONENT_ID,
test_prop_name='conservationcolorscale',
test_prop_value='Blackbody',
prop_value_type='string')
bars = dash_duo.find_elements('g.cartesianlayer g.subplot.xy2 g.plot path')
# first bar should be black
match = re.search(r'.*fill: ([\w\s,\(\)]+);.*',
bars[0].get_attribute('style'))
assert match.group(1) == 'rgb(0, 0, 0)'
# second bar should be orange
match = re.search(r'.*fill: ([\w\s,\(\)]+);.*',
bars[1].get_attribute('style'))
assert match.group(1) == 'rgb(230, 103, 0)'
def alig(arg):
dropdown_value = str(arg).replace("-", "").replace("(", "").replace(")", "").replace("''", "").replace(
"'", "").replace("_", "")
relative_filename = os.path.join(
'data/ptn/aligned',
'{}.edit.fasta'.format(dropdown_value))
try:
with open(relative_filename, 'r') as content_file:
data = content_file.read()
except:
data=[]
if len(data) == 0:
return 'Too few sequences for display alignment'
if len(data) > 100000:
return 'Too many sequences for display alignment'
# if len(data) < 18000:
# return dashbio.AlignmentChart(
# data=data,
# showconsensus=False,
# extension="clustal",
# overview="slider",
# height=500,
# ),
else:
return dashbio.AlignmentChart(
data=data,
showconsensus=False,
extension="clustal",
overview="slider",
height=1700,
),
def visualiza_dados(data):
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
data = open(data).read()
app.layout = html.Div([
dashbio.AlignmentChart(
id='my-alignment-viewer',
data=data,
showconservation=False,
showgap=False,
#tilewidth = 15,
tileheight=15,
height=300
#width = 800
),
html.Div(id='alignment-viewer-output')
])
@app.callback(
dash.dependencies.Output('alignment-viewer-output', 'children'),
[dash.dependencies.Input('my-alignment-viewer', 'eventDatum')])
def update_output(value):
if value is None:
return 'No data.'
return str(value)
if __name__ == '__main__':
app.run_server(debug=True)
return
def __init__(self, server, url):
app = dash.Dash(__name__,
external_stylesheets=external_stylesheets,
server=server,
url_base_pathname=url)
app.layout = html.Div([
dashbio.AlignmentChart(id='my-alignment-viewer', data=data),
html.Div(id='alignment-viewer-output')
])
def test_dbav002_change_colorscale(dash_duo):
app = dash.Dash(__name__)
app.layout = html.Div(
simple_app_layout(dash_bio.AlignmentChart(id=_COMPONENT_ID,
data=_data)))
simple_app_callback(app,
dash_duo,
component_id=_COMPONENT_ID,
test_prop_name='colorscale',
test_prop_value='hydro',
prop_value_type='string',
take_snapshot=True)
def test_dbav001_hide_conservation(dash_duo):
app = dash.Dash(__name__)
app.layout = html.Div(
simple_app_layout(dash_bio.AlignmentChart(id=_COMPONENT_ID,
data=_data)))
simple_app_callback(app,
dash_duo,
component_id=_COMPONENT_ID,
test_prop_name='showconservation',
test_prop_value=str(False),
prop_value_type='bool',
validation_fn=lambda x: x is False)
assert len(dash_duo.find_elements('g.cartesianlayer.xy3')) == 0
'Show track IDs on the left.'
)
],
),
]),
]),
),
],
),
]),
]),
dcc.Loading(className='dashbio-loading',
children=html.Div([
dash_bio.AlignmentChart(
id='alignment-chart',
height=725,
data=dataset3,
),
])),
dcc.Store(id='alignment-data-store'),
])
# Handle file upload/selection into data store
@app.callback(Output('alignment-data-store', 'data'), [
Input('alignment-dropdown', 'value'),
Input('alignment-file-upload', 'contents'),
Input('alignment-file-upload', 'filename')
])
def update_storage(dropdown, contents, filename):
import dash_bio as dashbio
import six.moves.urllib.request as urlreq
import base64
import dash_html_components as html
data = urlreq.urlopen("https://raw.githubusercontent.com/plotly/dash-bio/master/tests/dashbio_demos/dash-alignment-chart/data/p53.fasta").read().decode("utf-8")
component = dashbio.AlignmentChart(
id='my-dashbio-alignmentchart',
data=data,
width='500px'
)
component_image = html.Img(
src='data:image/png;base64,{}'.format(
base64.b64encode(
open(
'./images/pic_alignment_chart.png', 'rb'
).read()
).decode()
),
style={'width': '500px'}
)
def callbacks(app):
return
children=[
html.
Div(html.H4("Gene Alignment"),
style={'text-align': 'center'}),
html.
Div(html.P(
children=
'The alignment can be scrolled by clicking and dragging within the highlighted area in the full view at the bottom, it can also be resized by clicking and dragging on the white handles of the highlighted area.',
style={'text-align': 'center'}),
style={
'margin': 'auto',
'width': '1000px'
}),
dashbio.AlignmentChart(id='alignment-chart',
data='>test',
showconservation=False,
showgap=False,
showconsensus=False)
],
style={
'margin-left': '5%',
'margin-right': '10%'
})
]),
])
@app.callback(
Output("modal", "is_open"),
[Input("open", "n_clicks"),
Input("close", "n_clicks")],
# Sequence Viewer Component
#https://dash.plot.ly/dash-bio/alignmentchart
html.Div(className="columns is-centered is-vcentered has-background-primary", style={"paddingLeft": 55},
children=[
html.Div(className="column is-three-fifths is-centered", children=[
# Here is alignment chart!
dashbio.AlignmentChart(
id = "fmt_alignment_viewer",
data = alignment_data,
extension = "fasta", # If your data contains clustal output, turn it into "clustal".
colorscale = "clustal2", # If yo would like to change the color schema, work on here.
showgap = False,
showconsensus = True, # If you would like to just enable alignment part, turn it into False.
showconservation = True, # If you would like to just enable alignment part, turn it into False.
tilewidth = 20, # It defines the width of the each amino acid/nucleotid box.
tileheight = 20, # It defines the height of the each amino acid/nucleotid box.
showid = False,
overview = None, # If you would like to change, turn it into "heatmap" or "slider".
height = 490,
width = "95%",
), # ends of alignment chart
]),
html.Div(className="column is-centered", style={"padding": "30px 55px 30px 0px"}, children=[
html.H1("Sequence Alignment Viewer", className="title has-text-white-bis"),
html.P("It allows you to visualize the genomics and transcriptomic sequence with several features such as coverage, gaps, consensus and heatmap overview.",
className="subtitle is-5 has-text-white-bis"),
html.A("Go to Docs for 'Dash' library", href="https://dash.plot.ly/", target="_blank", className="button is-outlined is-light is-rounded"),
html.Hr(),
def layout():
return html.Div(id='alignment-body', className='app-body', children=[
html.Div([
html.Div(id='alignment-control-tabs', className='control-tabs', children=[
dcc.Tabs(
id='alignment-tabs', value='what-is',
children=[
dcc.Tab(
label='About',
value='what-is',
children=html.Div(className='control-tab', children=[
html.H4(
className='what-is',
children='What is Alignment Viewer?'
),
html.P(
"""
The Alignment Viewer (MSA) component is used to align
multiple genomic or proteomic sequences from a FASTA or
Clustal file. Among its extensive set of features,
the multiple sequence alignment viewer can display
multiple subplots showing gap and conservation info,
alongside industry standard colorscale support and
consensus sequence. No matter what size your alignment
is, Alignment Viewer is able to display your genes or
proteins snappily thanks to the underlying WebGL
architecture powering the component. You can quickly
scroll through your long sequence with a slider or a
heatmap overview.
"""
),
html.P(
"""
Note that the AlignmentChart only returns a chart of
the sequence, while AlignmentViewer has integrated
controls for colorscale, heatmaps, and subplots allowing
you to interactively control your sequences.
"""
),
html.P(
"""
Read more about the component here:
https://github.com/plotly/react-alignment-viewer
"""
),
])
),
dcc.Tab(
label='Data',
value='alignment-tab-select',
children=html.Div(className='control-tab', children=[
html.Div(className='app-controls-block', children=[
html.Div(
className='fullwidth-app-controls-name',
children="Select preloaded dataset"
),
dcc.Dropdown(
id='alignment-dropdown',
value='dataset3',
)
]),
html.Div(className='app-controls-block', children=[
html.Div(className='fullwidth-app-controls-name',
children="Upload your own dataset"),
html.A(
html.Button(
"Download sample data",
className='control-download'
),
href="/assets/sample_data/p53_clustalo.fasta",
download="p53_clustalo.fasta",
),
html.Div(id='alignment-file-upload-container', children=[
dcc.Upload(
id='alignment-file-upload',
className='control-upload',
children=html.Div([
"Drag and drop FASTA files or select files."
]),
)
])
]),
])
),
dcc.Tab(
label='Interactions',
value='control-tab-select2',
children=html.Div(className='control-tab', children=[
html.Div(
className='app-controls-name',
children='Event Metadata'
),
html.P('Hover or click on data to see it here.'),
html.Div(
id='alignment-events'
)
]),
),
dcc.Tab(
label='Graph',
value='control-tab-customize',
children=html.Div(className='control-tab', children=[
html.Div([
html.H3('General', className='alignment-settings-section'),
html.Div(
className='app-controls-block',
children=[
html.Div(className='app-controls-name',
children="Colorscale"),
dcc.Dropdown(
id='alignment-colorscale-dropdown',
className='app-controls-block-dropdown',
options=COLORSCALES_DICT,
value='clustal2',
),
html.Div(
className='app-controls-desc',
children='Choose the color theme of the viewer.'
)
],
),
html.Div(
className='app-controls-block',
children=[
html.Div(className='app-controls-name',
children='Overview'),
dcc.Dropdown(
id='alignment-overview-dropdown',
className='app-controls-block-dropdown',
options=[
{'label': 'Heatmap', 'value': 'heatmap'},
{'label': 'Slider', 'value': 'slider'},
{'label': 'None', 'value': 'none'},
],
value='heatmap',
),
html.Div(
className='app-controls-desc',
children='Show slider, heatmap or no overview.'
)
],
),
html.Div(
className='app-controls-block',
children=[
html.Div(className='app-controls-name',
children='Consensus'),
dcc.RadioItems(
id='alignment-showconsensus-radio',
className='alignment-radio',
options=[
{'label': 'Show', 'value': True},
{'label': 'Hide', 'value': False},
],
value=True,
labelStyle={
'display': 'inline-block',
'margin-right': '8px',
},
),
html.Div(
className='app-controls-desc',
children='Toggle the consensus '
'(most frequent) sequence.'
),
],
),
html.Div(
className='app-controls-block',
children=[
html.Div(className='app-controls-name',
children='Text size'),
dcc.Slider(
className='control-slider',
id='alignment-textsize-slider',
value=10,
min=8,
max=12,
step=1,
marks={
'8': 8,
'9': 9,
'10': 10,
'11': 11,
'12': 12,
},
),
html.Div(
className='app-controls-desc',
children='Adjust the font size '
'(in px) of viewer text.'
),
],
),
]),
html.Hr(),
html.Div([
html.H3('Conservation', className='alignment-settings-section'),
html.Div(
className='app-controls-block',
children=[
html.Div(className='app-controls-name',
children='Barplot'),
dcc.RadioItems(
id='alignment-showconservation-radio',
className='alignment-radio',
options=[
{'label': 'Show', 'value': True},
{'label': 'Hide', 'value': False},
],
value=True,
labelStyle={
'display': 'inline-block',
'margin-right': '8px',
},
),
html.Div(
className='app-controls-desc',
children='Show or hide the conservation barplot.'
)
],
),
html.Div(
className='app-controls-block',
children=[
html.Div(className='app-controls-name',
children='Colorscale'),
dcc.Dropdown(
id='alignment-conservationcolorscale-dropdown',
className='app-controls-block-dropdown',
options=[
{'label': col_code, 'value': col_code}
for col_code in CONSERVATION_COLORS_OPT
],
value='Viridis',
),
html.Div(
className='app-controls-desc',
children='Change the colorscale for the '
'conservation barplot.'),
],
),
html.Div(
className='app-controls-block',
children=[
html.Div(className='app-controls-name',
children='Method'),
dcc.Dropdown(
id='alignment-conservationmethod-dropdown',
className='app-controls-block-dropdown',
options=[
{'label': 'Entropy',
'value': 'entropy'},
{'label': 'Conservation',
'value': 'conservation'},
],
value='entropy',
),
html.Div(
className='app-controls-desc',
children="Conservation (MLE) or normalized entropy."
),
],
),
]),
html.Hr(),
html.Div([
html.H3('Conservation gap',
className='alignment-settings-section'),
html.Div(
className='app-controls-block',
children=[
html.Div(className='app-controls-name',
children='Colorscale'),
dcc.RadioItems(
id='alignment-correctgap-radio',
className='alignment-radio',
options=[
{'label': 'Yes', 'value': True},
{'label': 'No', 'value': False},
],
value=True,
labelStyle={
'display': 'inline-block',
'margin-right': '8px',
},
),
html.Div(
className='app-controls-desc',
children="Lowers conservation "
"of high gap sequences."
)
],
),
html.Div(
className='app-controls-block',
children=[
html.Div(className='app-controls-name',
children='Gap'),
dcc.RadioItems(
id='alignment-showgap-radio',
className='alignment-radio',
options=[
{'label': 'Show', 'value': True},
{'label': 'Hide', 'value': False},
],
value=True,
labelStyle={
'display': 'inline-block',
'margin-right': '8px',
},
),
html.Div(
className='app-controls-desc',
children="Show/hide the gap barplot."
)
],
),
html.Div(
className='app-controls-block',
children=[
html.Div(className='app-controls-name',
children='Color'),
dcc.Dropdown(
id='alignment-gapcolor-dropdown',
className='app-controls-block-dropdown',
options=[
{'label': col_code, 'value': col_code}
for col_code in GAP_COLORS_OPT
],
value='grey',
),
html.Div(
className='app-controls-desc',
children='Set the color of the traces '
'that represent the gap.'
)
],
),
html.Div(
className='app-controls-block',
children=[
html.Div(className='app-controls-name',
children='Group'),
dcc.RadioItems(
id='alignment-groupbars-radio',
className='alignment-radio',
options=[
{'label': 'Yes', 'value': True},
{'label': 'No', 'value': False},
],
value=False,
labelStyle={
'display': 'inline-block',
'margin-right': '8px',
},
),
html.Div(
className='app-controls-desc',
children='Group gap and conservation bars.'
)
],
),
# Conservation colorscale
# Gap color
]),
html.Hr(),
html.Div([
html.H3('Layout', className='alignment-settings-section'),
html.Div(
className='app-controls-block',
children=[
html.Div(className='app-controls-name',
children='Labels'),
dcc.RadioItems(
id='alignment-showlabel-radio',
className='alignment-radio',
options=[
{'label': 'Show ',
'value': True},
{'label': 'Hide ',
'value': False},
],
value=True,
labelStyle={
'display': 'inline-block',
'margin-right': '8px',
},
),
html.Div(
className='app-controls-desc',
children='Show track labels on the left.'
),
],
),
html.Div(
className='alignment-settings',
children=[
html.Div(className='app-controls-name',
children='IDs'),
dcc.RadioItems(
id='alignment-showid-radio',
className='alignment-radio',
options=[
{'label': 'Show ',
'value': True},
{'label': 'Hide ',
'value': False},
],
value=True,
labelStyle={
'display': 'inline-block',
'margin-right': '8px',
},
),
html.Div(
className='app-controls-desc',
children='Show track IDs on the left.'
)
],
),
]),
]),
),
],
),
]),
]),
dcc.Loading(className='dashbio-loading', children=html.Div([
dash_bio.AlignmentChart(
id='alignment-chart',
height=725,
data=dataset3,
),
])),
dcc.Store(id='alignment-data-store'),
])
'applyForce': True,
'circularizeExternal': True,
'avoidOthers': True,
'labelInterval': 5,
'name': 'PDB_01019'
}
}]
model_data = urlreq.urlopen(
'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/' +
'master/mol3d/model_data.js').read()
styles_data = urlreq.urlopen(
'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/' +
'master/mol3d/styles_data.js').read()
model_data = json.loads(model_data)
styles_data = json.loads(styles_data)
app.layout = html.Div(children=[
dashbio.AlignmentChart(id='my-dashbio-alignmentchart', data=data),
dashbio.FornaContainer(id='my-dashbio-fornacontainer',
sequences=sequences),
dashbio.Molecule3dViewer(id='my-dashbio-molecule3dviewer',
modelData=model_data,
styles=styles_data,
backgroundOpacity='0')
])
if __name__ == '__main__':
app.run_server(debug=True)
def layout():
return html.Div(
id='sample-body',
className='app-body',
children=[
html.Div([
html.Div(
id='sample-control-tabs',
className='control-tabs',
children=[
dcc.Tabs(
id='sample-tabs',
value='what-is',
children=[
dcc.Tab(
label='About',
value='what-is',
children=html.Div(
className='control-tab',
children=[
html.P("Insert description here.")
])),
dcc.Tab(
label='Data',
value='sample-tab-select',
children=html.Div(
className='control-tab',
children=[
html.Div(
className='app-controls-block',
children=[
html.Div(
className=
'fullwidth-app-controls-name',
children=
"Select preloaded dataset"
),
dcc.Dropdown(
id='sample-dropdown',
options=[{
'label':
'Sample.fasta',
'value':
'dataset1'
}],
value='dataset')
]),
])),
],
),
]),
]),
dcc.Loading(parent_className='dashbio-loading',
children=html.Div([
dash_bio.AlignmentChart(
id='sample-chart',
height=725,
data=dataset,
),
])),
dcc.Store(id='sample-data-store'),
])
def layout():
return html.Div(
id='alignment-body',
children=[
html.Div([
html.Div([
dash_bio.AlignmentChart(id='alignment-chart',
data=dataset3)
],
className='alignment-card eight columns'),
html.Div([
dcc.Tabs(
id='alignment-tabs',
value='alignment-tab-select',
children=[
dcc.Tab(
label='Select',
value='alignment-tab-select',
children=[
html.Div([
html.H4("Select Dataset"),
dcc.Dropdown(
id='alignment-dropdown',
className='alignment-select',
options=[
{
'label': 'Sample.fasta',
'value': 'dataset1'
},
{
'label': 'P53.fasta naive',
'value': 'dataset2'
},
{
'label':
'P53.fasta aligned (ClustalW)',
'value': 'dataset3'
},
],
value='dataset3',
),
],
className='alignment-subcard'),
html.Div([
html.H4("Hover/Click/Event Data"),
dcc.Textarea(
id="alignment-events",
placeholder=
"Hover or click on data to see it here.",
value=
"Hover or click on data to see it here.",
className="alignment-events",
),
],
className='alignment-subcard'),
html.Div([
html.H4("What is Alignment Viewer?"),
html.P("""
The Alignment Viewer (MSA) component is used to align
multiple genomic or proteomic sequences from a FASTA or
Clustal file. Among its extensive set of features,
the multiple sequence alignment viewer can display
multiple subplots showing gap and conservation info,
alongside industry standard colorscale support and
consensus sequence. No matter what size your alignment
is, Alignment Viewer is able to display your genes or
proteins snappily thanks to the underlying WebGL
architecture powering the component. You can quickly
scroll through your long sequence with a slider or a
heatmap overview.
"""),
html.P("""
Note that the AlignmentChart only returns a chart of
the sequence, while AlignmentViewer has integrated
controls for colorscale, heatmaps, and subplots allowing
the user to interactively control their sequences.
"""),
html.P("""
Read more about the component here:
https://github.com/plotly/react-alignment-viewer
"""),
],
className='alignment-subcard')
],
),
dcc.Tab(
label='Upload',
value='alignment-tab-upload',
children=[
dcc.Upload(
id='alignment-file-upload',
className='alignment-upload',
children=html.Div([
"Drag and drop FASTA files or select files."
]),
),
html.Div([
html.H4("Hover/Click/Event Data"),
dcc.Textarea(
id="alignment-events-2",
placeholder=
"Hover or click on data to see it here.",
value=
"Hover or click on data to see it here.",
className="alignment-events",
),
],
className='alignment-subcard'),
html.Div([
html.H4("What is Alignment Viewer?"),
html.P("""
The Alignment Viewer (MSA) component is used to align
multiple genomic or proteomic sequences from a FASTA or
Clustal file. Among its extensive set of features,
the multiple sequence alignment viewer can display
multiple subplots showing gap and conservation info,
alongside industry standard colorscale support and
consensus sequence. No matter what size your alignment
is, Alignment Viewer is able to display your genes or
proteins snappily thanks to the underlying WebGL
architecture powering the component. You can quickly
scroll through your long sequence with a slider or a
heatmap overview.
"""),
html.P("""
Note that the AlignmentChart only returns a chart of
the sequence, while AlignmentViewer has integrated
controls for colorscale, heatmaps, and subplots
allowing the user to interactivelycontrol their sequences.
"""),
html.P("""
Read more about the component here:
https://github.com/plotly/react-alignment-viewer
"""),
],
className='alignment-subcard')
],
),
dcc.Tab(
label='Customize',
value='alignment-tab-customize',
children=[
html.Div([html.H4('Work in progress')],
className='alignment-subcard'),
],
),
],
),
],
className='alignment-card four columns'),
],
className='alignment-wrapper row'),
dcc.Store(id='alignment-data-store'),
])
def align_structures(
align_button,
user_input,
proteins_selection_dropdown,
gap_open_dropdown,
gap_extend_dropdown,
unique_id,
):
if align_button and user_input and proteins_selection_dropdown:
pdb_entries = [
app_helper.decompress_object(x, suite)
for x in proteins_selection_dropdown
]
if not gap_open_dropdown:
gap_open_dropdown = 1
if not gap_extend_dropdown:
gap_extend_dropdown = 0.01
pdb_files = []
for p in pdb_entries:
try:
pdb_files.append(p.get_pdb()[1])
except (OSError, AttributeError, pyparsing.ParseException):
continue
msa_class = multiple_alignment.StructureMultiple.from_pdb_files(
pdb_files,
multiple_alignment.DEFAULT_SUPERPOSITION_PARAMETERS,
output_folder=f"static/results_{app_helper.decompress_object(unique_id, suite)}",
)
if len(msa_class.structures) > 2:
pw_matrix = msa_class.make_pairwise_shape_matrix()
sequence_alignment = msa_class.align(
pw_matrix,
gap_open_penalty=gap_open_dropdown,
gap_extend_penalty=gap_extend_dropdown,
)
else:
sequence_alignment = msa_class.align(
pw_matrix=None,
gap_open_penalty=gap_open_dropdown,
gap_extend_penalty=gap_extend_dropdown,
)
msa_class.superpose()
fasta = app_helper.to_fasta_str(sequence_alignment)
dssp_dir = msa_class.output_folder / ".caretta_tmp"
if not dssp_dir.exists():
dssp_dir.mkdir()
features = msa_class.get_aligned_features(dssp_dir, num_threads=4, only_dssp=False)
caretta_class = app_helper.compress_object(msa_class, suite)
sequence_alignment_data = app_helper.compress_object(
sequence_alignment, suite
)
feature_alignment_data = app_helper.compress_object(features, suite)
sequence_alignment_component = dash_bio.AlignmentChart(
id="sequence-alignment-graph",
data=fasta,
showconsensus=False,
showconservation=False,
overview=None,
height=300,
colorscale="hydrophobicity",
)
structure_alignment_component = dcc.Graph(
figure=app_helper.scatter3D(
{s.name: s.coordinates for s in msa_class.structures}
),
id="scatter-plot",
)
feature_selection_dropdown = [{"label": x, "value": x} for x in features]
loading_indicator_output = ""
return (
caretta_class,
sequence_alignment_data,
feature_alignment_data,
sequence_alignment_component,
structure_alignment_component,
feature_selection_dropdown,
loading_indicator_output,
)
else:
return (
app_helper.empty_object(suite),
app_helper.empty_object(suite),
app_helper.empty_object(suite),
"",
"",
[{"label": "no alignment present", "value": "no alignment"}],
"",
)
html.Br(),
html.Div(
id='desc-1'
),
html.Div(
id='vs'
),
html.Div(
id='desc-2'
),
html.Br(),
dcc.Loading(
children=[
html.Div([
dash_bio.AlignmentChart(
id='alignment-chart',
height=725,
tilewidth=50,
data=dataset3
)
])
]
),
html.Div(
id="alignment-viewer-output"
)
], width=12)
])
])
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
data = urlreq.urlopen(
'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
'alignment_viewer_p53.fasta'
).read()
if PY3:
data = data.decode('utf-8')
app.layout = html.Div([
dashbio.AlignmentChart(
id='my-alignment-viewer',
data=data
),
html.Div(id='alignment-viewer-output')
])
@app.callback(
dash.dependencies.Output('alignment-viewer-output', 'children'),
[dash.dependencies.Input('my-alignment-viewer', 'eventDatum')]
)
def update_output(value):
if value is None:
return 'No data.'
return str(value)
