Remove Shape from Image on Dash

Dash Python
1

Two issues, first is that my code adds a dot, but the user needs to refresh the page in order to see the dot on top of the image. How would I go about changing this so that a refresh is not required?

Second is how would a user remove a dot (either by clicking on it, or clicking on an undo button)?

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import json
import plotly.express as px
from os import listdir, path
import cv2

DOT_RADIUS = 25

# Get images from directory and read data
p = "./frames"
arr_images = listdir(p)
img_path = path.join(p, arr_images[0])
img = cv2.imread(img_path, cv2.IMREAD_COLOR)

# Show and update image on plotly graph
fig = px.imshow(img)
fig.update_layout(clickmode="event")


def draw_dot(x, y):
    fig.add_shape(type="circle", fillcolor="cyan",
                  x0=x - DOT_RADIUS, x1=x + DOT_RADIUS,
                  y0=y - DOT_RADIUS, y1=y + DOT_RADIUS)


app = dash.Dash(__name__)
app.layout = html.Div(children=[
    html.H3("Click to add data point"),
    dcc.Graph(id="graph-picture", figure=fig),
    html.Pre(id="click-data")
]
)


@app.callback(
    Output("click-data", "children"),
    Input("graph-picture", "clickData"),
    prevent_initial_call=True,
)
def display_click_data(clickData):
    x = int(json.dumps(clickData["points"][0]["x"]))
    y = int(json.dumps(clickData["points"][0]["y"]))
    draw_dot(x, y)


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