How to edit / delete shapes created using a callback?

📊 Plotly Python
7

Hi @AIMPED, although I haven’t yet solved this issue, I have figured a few more things out, like how to automatically name each created shape. Here is the updated callback function:

@out.capture(clear_output = True)
def get_mouse_clicks(trace, points, selector):
    
    size = 10
    
    print(points.point_inds)
    
    ind = points.point_inds[0]
    
    x = ind[1]
    y = ind[0]
    
    trace_name = points.trace_name
    trace_index = points.trace_index
    
    # When the left button is clicked
    if selector.button == 0:    
            
        # Object to store the total number of shapes
        # added to the image
        total_shapes = len(fig.layout.shapes) + 1
        
        # Draw a circle
        fig.add_shape(editable = True,
                      type = "circle",
                      x0 = x - size / 2, 
                      y0 = y - size / 2, 
                      x1 = x + size / 2, 
                      y1 = y + size / 2, 
                      xref = 'x', 
                      yref = 'y',
                      line_color = "black",
                      fillcolor = "crimson",
                      opacity = 0.5,
                      name = f"shape_{len(fig.layout.shapes)}",
                     )
    
    message = f"The mouse points are: \n\nx = {x}, \ny = {y} \n\nTotal shapes on image = {total_shapes}"
    
    print(message)

I can even make a list of shapes:

shape_list = list(fig.layout.shapes)

Here is the output of doing a print(shape_list):

[layout.Shape({
     'editable': True,
     'fillcolor': 'crimson',
     'line': {'color': 'black'},
     'name': 'shape_0',
     'opacity': 0.5,
     'type': 'circle',
     'x0': 132.0,
     'x1': 142.0,
     'xref': 'x',
     'y0': 101.0,
     'y1': 111.0,
     'yref': 'y'
 }),
 layout.Shape({
     'editable': True,
     'fillcolor': 'crimson',
     'line': {'color': 'black'},
     'name': 'shape_1',
     'opacity': 0.5,
     'type': 'circle',
     'x0': 296.0,
     'x1': 306.0,
     'xref': 'x',
     'y0': 128.0,
     'y1': 138.0,
     'yref': 'y'
 }),
 layout.Shape({
     'editable': True,
     'fillcolor': 'crimson',
     'line': {'color': 'black'},
     'name': 'shape_2',
     'opacity': 0.5,
     'type': 'circle',
     'x0': 310.0,
     'x1': 320.0,
     'xref': 'x',
     'y0': 233.0,
     'y1': 243.0,
     'yref': 'y'
 }),
 layout.Shape({
     'editable': True,
     'fillcolor': 'crimson',
     'line': {'color': 'black'},
     'name': 'shape_3',
     'opacity': 0.5,
     'type': 'circle',
     'x0': 338.0,
     'x1': 348.0,
     'xref': 'x',
     'y0': 200.0,
     'y1': 210.0,
     'yref': 'y'
 })]

I figured it out by reading this post: 35794

What I need to now figure out to select a shape to delete it. I know that in Dash I could build another callback, but I want to figure this out in plotly first.

Any suggestions?

Cheers!