Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

What is eventDatum? Dash Bio alignment chart example how to update from callback

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')])