modeBarButtonsToAdd doesn't appear to be working as intended

Dash Python
1

Hello, It appears that when I attempt to add the ‘select2d’ button to the modebar on a ScatterMapBox I get an error stating “must provide button ‘name’ in button config”. Not sure where this issue is coming from to be honest. Can anyone point out what I’m missing here?

Here is the Code

app.layout = html.Div(
    [
        html.Div(
            [
                dcc.Graph(id='map',
                          figure=
                          {
                            'data': [go.Scattermapbox()],
                            'layout': go.Layout(
                                paper_bgcolor='#f9f9f9',
                                plot_bgcolor='#f9f9f9',
                                dragmode='select',
                                mapbox=dict(bearing=0, 
                                            zoom=14,
                                            style='satellite',
                                            accesstoken=[redacted])
                                    )
                          },
                          config={'modeBarButtonsToAdd': ["select2d"]}
                )
            ], className="pretty_container"
        ),
    ]
)

Edit: I should clarify that modeBarButtonstoRemove seems to work just fine. I can remove any buttons I want from the modebar. Since syntactically these actions are similar I don’t see why adding buttons would fail. I also wanted to include a photo of the error. If I need to add anymore code please let me know.

must_provide_name
must_provide_name606×825 55.1 KB

Edit2: So I’ve been trying different things and I’ve noticed that if I pass an empty list

config={'modeBarButtonsToAdd': []}

Then the graph will render, just without the button I want. But as soon as I try to add a button that is there by default, pan2d, then it throws the same "must provide button ‘name’ in button config’ error. Somehow modeBarButtonsToAdd doesn’t know any of the button names I think. Does anyone know how to I can fix this? Should this be reported as bug or something?

2

I’ve found the solution. I feel silly but I honestly thought that modeBarButtonsToAdd could just add a default button to the modebar, but I was incorrect. It actually allows you to add custom buttons or something? I’m not sure. But I was able to get what I wanted by doing this.

config={'modeBarButtons': [['pan2d','select2d']]}

This allows me to have the select option on the graph even if there are no points on it. Which is all I wanted.

3

Your solution works if you remove buttons only, but what about adding new buttons? For example if you try to add the buttons for interactive annotations and shape drawing in plotly figures, it prevents the plot to be shown at all!

import plotly.offline as offline
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,'displaylogo': False, 'modeBarButtonsToAdd':['drawline','drawopenpath','drawcircle','drawrect','eraseshape']}) 

offline.plot(fig,  
                     auto_open=True, image = None, config =config, 
                     filename='./foo.html', include_plotlyjs='directory')

If you try setting the configuration to

config = dict({'scrollZoom': True,'displaylogo': False})

you are able to see the plot again: why it doesn’t work??

Please, this https://eoss-image-processing.github.io/2020/05/06/shape-drawing.html
and also https://plotly.com/python/shapes/