Create a callback for dashboard that reads data from annotations when hovering

Dash Python
2

I found the answer to my problem here: Accessing Editable Annotations

and hereafter I show you how I have implemented it:

I define my figure (I have removed the scatterplot because I didn’t need it)

fig = go.Figure(layout = layout,data =px.imshow(wave_mask))#, 
fig.update_traces(hoverinfo='none', hovertemplate='')

#add annotation of vertical text
for i in idx_or1:
    fig.add_annotation(y=np.asarray(var_position)[i,0],
         x=np.asarray(var_position)[i,1],
         text=np.asarray(var_str)[i],
         textangle=90,
         showarrow=False,
         xanchor="left",
         yanchor="top",
         hovertext=np.asarray(var_str)[i],
         font=dict(
                color=np.asarray(var_color)[i],
                size=np.asarray(var_size)[i],
                family='Droid Sans Mono',
                
            ))
#add annotation of horizontal text
for i in idx_or2:    
    #print(np.asarray(var_str)[i])
    fig.add_annotation(y=np.asarray(var_position)[i,0],
         x=np.asarray(var_position)[i,1],
         text=np.asarray(var_str)[i],
         textangle=0,
         showarrow=False,
         xanchor="left",
         yanchor="top",
         hovertext=np.asarray(var_str)[i]
         font=dict(
                color=np.asarray(var_color)[i],
                size=np.asarray(var_size)[i],
                family='Droid Sans Mono'
            ))
    
fig.update_yaxes(autorange="reversed")
fig.update_xaxes(visible=False)
fig.update_yaxes(visible=False)
fig.update_layout(
    paper_bgcolor='rgb(255,255,255)',
    plot_bgcolor='rgb(255,255,255)', 
    width=pltsize[0],
    height=pltsize[1],
    )

fig.update_layout(clickmode=‘event+select’)

And then for the dashboard:

app.layout = html.Div([
dcc.Graph(
id=‘basic-interactions’,
figure=fig,
config = {
‘editable’: True}
),

html.Div(className='row', children=[
    html.Div([
        dcc.Markdown("""
            **Relayout Data**

            Double Click on the annotation.
        """),
        html.Pre(id='relayout-data', style=styles['pre']),
    ])
])

])

@app.callback(
Output(‘relayout-data’, ‘children’),
[Input(‘basic-interactions’, ‘relayoutData’)])
def display_relayout_data(Data):
if Data is not None:
selected_data=list(Data.values())
if type(selected_data[0])==str:
print(selected_data[0])

return json.dumps(Data, indent=2)