Plotly draw shape, cannot delete shape

[seanbf]

Hi,

I can draw shapes on my plot, which i plan on using for allowing annotations.
Usually with Plotly, you can shift+left mouse click, select the shape and erase the shape.
However, if it’s plotted via Streamlit I can move and resize the shape but I cannot ‘select’ it to erase it.

Streamlit App

https://plotly.com/python/configuration-options/

[snehankekre]

Hi @seanbf ,

It took me a while to figure it out, but the effort payed off.

The 'editable' : True config option is the reason you’re unable to select the shape. If you comment out line 25 and uncomment the remaining options, you should be able to left click the shape to select it! You can then click on the erase button to get rid of the shape

Here’s an example:

import streamlit as st
import plotly.graph_objects as go
import plotly.express as px

df = px.data.iris()
fig = px.scatter(df, x="petal_width", y="sepal_length", color="species")
fig.update_layout(
    dragmode="drawopenpath",
    newshape_line_color="cyan",
    title_text="Draw a path to separate versicolor and virginica",
)
config = dict(
    {
        "scrollZoom": True,
        "displayModeBar": True,
        # 'editable'              : True,
        "modeBarButtonsToAdd": [
            "drawline",
            "drawopenpath",
            "drawclosedpath",
            "drawcircle",
            "drawrect",
            "eraseshape",
        ],
        "toImageButtonOptions": {"format": "svg"},
    }
)

st.plotly_chart(fig, config=config)

Output:

Happy Streamlit’ing!
Snehan

[seanbf]

I don’t why it works, but it does ! I was under the impression that bool should be True.

[Fabio]

@snehankekre

Is this a limitation of Plotly or of Streamlit?

Setting editable to false does solve the problem of making shapes delitable, but also makes the plot not editable.

I would like the user to be able both to edit the plot (adjust label position for instance) and to add annotation figures.

I also noticed that, on Stremlit, the freeform tool “fills” up the shapes, so you cannot draw numbers for example.

On the plotly reference page it works (Shapes)

Thanks for your help!

Fabio

[Prometheus2508]

You can get this effect.

Consulting the github repo, line 317 says that setting editable: True sets all pieces of edits to True.

So either set editable: True and subsequently set edits:{'shapePosition':False} or set the specific edits fields you want individually true.

Conveniently enough, this doesn’t actually prevent one from moving shapes. The user just needs to now select the shape to make it active then move it.

[Fabio]

Yes,

This absolutely works! Thanks.

I set editable to false

and it works!

I can now delete the selected shapes and move around my annotations!

Thanks again!