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

Dash Python
1

I have created a figure in which I first plot an image then I add a scatterplot as new trace and then I have add some annotations in at specific points in the scatterplot using the fig.add_annotation function.

fig = go.Figure(layout = layout, data =px.imshow(wave_mask))#, 
fig.update_traces(hoverinfo='none', hovertemplate='')
fig.add_trace(go.Scatter(y=np.asarray(var_position)[:,0],
                 x=np.asarray(var_position)[:,1],
                 mode='markers',
                 marker=dict(
                    opacity=1,#0 =transparent
                    ),
                 text=np.asarray(var_str),
                 #hoverinfo='none',
                 #visible=False,
                 #hovertext=np.asarray(var_str)
))

for i in idx_or1:# add annotation at the indices contained in the list 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",
         clicktoshow='onout',
         captureevents=True,
         hovertext='some text',
         )

How do I write a callback for my dashboard from which I can retrieve the text in the added annotations?

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)