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)
In the example, data for the chart is given as a global variable.
But I want to update the alignment chart based on data I get from dcc.Store().
How do I do this?
I tried:
layout:
dbc.Button(
'Show Alignment Chart',
id='btn-align-chart',
color="primary",
n_clicks=0
),
html.Div(
id="alignment-viewer-output"
)
callback:
@app.callback(
[Output('alignment-viewer-output', 'children')],
[Input('btn-align-chart', 'n_clicks')],
[State('accession-store-1', 'data'),
State('accession-store-2', 'data')]
)
def output_alignment_chart(n_clicks, acc1_json, acc2_json):
if n_clicks <=0:
return no_update
acc1 = json.loads(acc1_json)
acc2 = json.loads(acc2_json)
print(f'acc: {acc1}, {acc2}')
fasta1 = get_fasta_by_accession(acc1,
and get:
dash.exceptions.InvalidCallbackReturnValue: The callback ..alignment-viewer-output.children.. is a multi-output.
Expected the output type to be a list or tuple but got:
Div([AlignmentChart(data='/home/nobu/Desktop/BioInformatics/bio_pam_blosum/frontend/needleman_callbacks/WP_011143314.1VSNP_001128711.1.fasta', tilewidth=50), Div(id='alignment-viewer-output')])