Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

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