Config modeBarButtonsToAdd 'zoom2d' throwing "Error loading dependencies"

[leejt489]

Trying to add zoom to the mode bar for a map, and I get "Error loading dependencies" in the browser. Looking in chrome debugger, the JavaScript error is:

Error: must provide button 'name' in button config
at plotly-1.35.2.min.js:7
at Array.forEach ()
at plotly-1.35.2.min.js:7
at Array.forEach ()
at cm.hm.updateButtons (plotly-1.35.2.min.js:7)
at cm.hm.update (plotly-1.35.2.min.js:7)
at new cm (plotly-1.35.2.min.js:7)
at fm (plotly-1.35.2.min.js:7)
at Object.pm.manage (plotly-1.35.2.min.js:7)
at Vm.lsInner (plotly-1.35.2.min.js:7)

My dash code is

                        dcc.Graph(
                            id='map',
                            #animate=True,
                            figure = {
                                'data': []#,
                                # 'layout': {
                                #     'mapbox': {
                                #         'layers': [],
                                #         'accesstoken': MAPBOX_TOKEN,
                                #         'center': {
                                #             'lat': 0,
                                #             'lon': 20,
                                #         },
                                #         'zoom': 2,
                                #         'pitch': 0
                                #     }
                                # }
                            },
                            config = {
                                'modeBarButtonsToAdd': ['zoom2d'],
                                'modeBarButtonsToRemove': ['toggleHover','sendDataToCloud']
                            }
                        )

I render the figure layout and data in a callback, and the layout is a mapbox map if that is relevant.

[leejt489]

I updated dash-core-components to v23.0.0, which uses plotly.js version 1.38.0 and still have the same error.

[leejt489]

Reproduced by modifying example https://github.com/plotly/dash-recipes/blob/master/dash-plotly-132-histogram-map.py to include config={'modeBarButtonsToAdd': ['zoom2d'] in line 57 https://github.com/plotly/dash-recipes/blob/aeb25faa6b72a9fadb928295d173ba61afc6cf85/dash-plotly-132-histogram-map.py#L57

import dash
import dash_html_components as html
import dash_core_components as dcc

import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/1962_2006_walmart_store_openings.csv')

app = dash.Dash()
#app.scripts.config.serve_locally=True
app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/dZVMbK.css"})
import json
from textwrap import dedent as d
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import datetime
import pandas as pd

df = pd.read_csv(
    ('https://raw.githubusercontent.com/plotly/'
     'datasets/master/1962_2006_walmart_store_openings.csv'),
    parse_dates=[1, 2],
    infer_datetime_format=True
)
future_indices = df['OPENDATE'] > datetime.datetime(year=2050,month=1,day=1)
df.loc[future_indices, 'OPENDATE'] -= datetime.timedelta(days=365.25*100)


styles = {
    'pre': {
        'border': 'thin lightgrey solid',
        'overflowX': 'scroll'
    }
}

app.layout = html.Div([
    html.H1('Walmart Store Openings'),
    html.H3('Dash Histogram Crossfiltering Selections'),
    html.Hr(),
    dcc.RadioItems(
        id='bin',
        options=[{'label': i, 'value': i} for i in [
            'Yearly', 'Seasonally', 'Monthly', 'Weekly'
        ]],
        value='Yearly',
        labelStyle={'display': 'inline'}
    ),
    html.Div([
        html.Div(
            className='six columns',
            children=dcc.Graph(id='openings-over-time')
        ),
        html.Div(
            className='six columns',
            children=dcc.Graph(id='map', animate=True,config={'modeBarButtonsToAdd': ['zoom2d']})
        )
    ])
])

@app.callback(
    dash.dependencies.Output('openings-over-time', 'figure'),
    [dash.dependencies.Input('bin', 'value')])
def display_stores_over_time(value):
    return {
        'data': [
            {
                'x': df['OPENDATE'],
                'customdata': df['storenum'],
                'name': 'Open Date',
                'type': 'histogram',
                'autobinx': False,
                'xbins': {
                    'start': '1961-12-31',
                    'end': '2006-12-31',
                    'size': (
                        'M12' if value == 'Yearly' else
                        'M3' if value == 'Seasonally' else
                        'M1' if value == 'Monthly' else
                        1000 * 60 * 60 * 24 * 7   # Weekly
                    )
                }
            }
        ],
        'layout': {
            'margin': {'l': 40, 'r': 20, 't': 0, 'b': 30}
        }
    }


@app.callback(
    dash.dependencies.Output('map', 'figure'),
    [dash.dependencies.Input('openings-over-time', 'selectedData')])
def display_map(selected_points):
    selected_indices = []
    if selected_points:
        for bin in selected_points['points']:
            selected_indices += bin['pointNumbers']
    return {
        'data': [{
            'lat': df['LAT'],
            'lon': df['LON'],
            'type': 'scattermapbox',
            'selectedpoints': selected_indices,
            'selected': {
                'marker': {'color': '#85144b'}
            }
        }],
        'layout': {
            'mapbox': {
                'center': {
                    'lat': 40,
                    'lon': -100
                },
                'zoom': 2.8,
                'accesstoken': 'pk.eyJ1IjoiY2hyaWRkeXAiLCJhIjoiY2oyY2M4YW55MDF1YjMzbzhmemIzb290NiJ9.sT6pncHLXLgytVEj21q43A'
            },
            'margin': {'l': 0, 'r': 0, 't': 0, 'b': 0}
        }
    }

app.css.append_css({
    "external_url": "https://codepen.io/chriddyp/pen/dZVMbK.css"
})

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

[chriddyp]

@bcdunbar or @charleyferrari - could you look into this and, if necessary, create a plotly.js issue?

[bcdunbar]

@chriddyp yup, I can take a look.

[bcdunbar]

I wouldn't expect zoom2d to work with mapbox as zoom requires an axis_id https://github.com/plotly/plotly.js/blob/06738233c0bd61c4c6ff6e93f946f5a61d88bd43/src/components/modebar/buttons.js#L199-L262

[gvwilson]

Hi - we are tidying up stale issues and PRs in Plotly's public repositories so that we can focus on things that are most important to our community. If this issue is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. (Please note that we will give priority to reports that include a short reproducible example.) If you'd like to submit a PR, we'd be happy to prioritize a review, and if it's a request for tech support, please post in our community forum. Thank you - @gvwilson