Call back isn't triggering?

Dash Python
1

Hi everyone! new to Plotly so bear with me here.

Im trying to run this particular example Image Annotations | Dash for Python Documentation | Plotly, but i’m running into some issues about the call back being trigger. I can get the image of the cat to display, and then I can draw on the cat but I can’t seem to get the characteristics of the shapes to output on my app.

img = data.chelsea()
fig = px.imshow(img)
fig.update_layout(dragmode=“drawclosedpath”)
config = {
“modeBarButtonsToAdd”: [
“drawline”,
“drawopenpath”,
“drawclosedpath”,
“drawcircle”,
“drawrect”,
“eraseshape”,
]
}

app = dash.Dash(name)
layout = html.Div(
[
html.H4(
“Drag and draw annotations - use the modebar to pick a different drawing tool”
),
dcc.Graph(id=“graph-pic”, figure=fig, config=config),
dcc.Markdown(“Characteristics of shapes”),
html.Pre(id=“annotations-data-pre”),
]
)

@app.callback(
Output(“annotations-data-pre”, “children”),
Input(“graph-pic”, “relayoutData”),

prevent_initial_call=True,

)
def on_new_annotation(relayout_data):
print(“Im hereeeee”)
print(relayout_data)
if “shapes” in relayout_data:

    return json.dumps(relayout_data["shapes"], indent=2)
else:
    return dash.no_update

if name == “main”:
app.run_server(mode=“inline”)

any and all help is much appreciated. Thank you!

2

Hi @vily,

import plotly.express as px
from dash import Input, Output, Dash, dcc, html, no_update
from skimage import data
import json

img = data.chelsea()
fig = px.imshow(img)
fig.update_layout(dragmode="drawrect")

app = Dash(__name__)
app.layout = html.Div(
    [
        html.H3("Drag and draw rectangle annotations"),
        dcc.Graph(id="graph-picture", figure=fig),
        dcc.Markdown("Characteristics of shapes"),
        html.Pre(id="annotations-data"),
    ]
)


@app.callback(
    Output("annotations-data", "children"),
    Input("graph-picture", "relayoutData"),
    prevent_initial_call=True,
)
def on_new_annotation(relayout_data):
    if "shapes" in relayout_data:
        return json.dumps(relayout_data["shapes"], indent=2)
    else:
        return no_update


if __name__ == "__main__":
    app.run_server(debug=True)

And everything is working fine on my side.

3

Hi Stu, thank you so much, I will remember to do that next time

4

Hi @vily, has your problem been solved? I just noticed that you wrote mode=inline in the running function, which seems to be the usage of Jupyter Dash.

5

Hi Stu, thanks for checking in on me. Ive figured out that it had to do with the multi app page my team was running. so now that I have my app separated it works flawlessly!