Restyling clustered points in px.scatter_mapbox via callback breaks dcc.Graph figure

Dash Python
1

Applying different colors to clustered points via a callback appears to break the figure and raises the following errors in the browser console:

  • Error: Source “source-7f412d-circle” cannot be removed while layer “plotly-trace-layer-7f412d-cluster” is using it.
  • Uncaught (in promise) Error: Mapbox error.

Example code provided below. To recreate the error, toggle the filter checkbox on and off. Additional clustering checkbox shows that the error does not happen if clustering not enabled.

from dash import Dash, dcc, html, Input, Output
import dash_bootstrap_components as dbc
import plotly.express as px
import pandas as pd

print('Mapbox token required')
mapbox_token='xxx'

sitesDF = data = pd.DataFrame({'latitude': [1,1,2,2,1,1,2,2],
                               'longitude': [1,2,1,2,-11,-12,-11,-12],
                               'name':['A','B','C','D','E','F','G','H']})

def create_map(included,excluded,clustering):
    included['color'] = 'included'
    excluded['color'] = 'excluded'
    data = pd.concat([included,excluded])
    
    color_discrete_map = {'included': 'rgb(64,217,18)','excluded': 'grey'}
    fig = px.scatter_mapbox(data, lat='latitude', lon='longitude', color='color',color_discrete_map=color_discrete_map)
    fig.update_layout(mapbox_style='dark', mapbox_accesstoken=mapbox_token)
    fig.update_layout(mapbox={'zoom': 4})
    fig.update_layout(margin={'r': 0, 't': 0, 'l': 0, 'b': 0})
    fig.update_layout(legend={'yanchor':'top','y':0.99,'xanchor':'left','x':0.01})
    fig.update_traces(cluster_enabled=clustering)
    return fig

app = Dash(__name__)
app.layout = dbc.Container([dcc.Loading(dcc.Graph(id='index-map')),
                       html.Br(),
                       dbc.Checkbox(id='clustering',label='Cluster',value=True),
                       dbc.Checkbox(id='filtering',label='Filter',value=False)])

@app.callback(Output('index-map', 'figure'),
              Input('clustering', 'value'),
              Input('filtering', 'value'))
def render_map_extras(clustering,filtering):
    included = sitesDF.iloc[:4] if filtering else sitesDF
    excluded = sitesDF[~sitesDF['name'].isin(list(included['name']))]
    fig = create_map(included,excluded,clustering)
    return fig

app.run_server(debug=True)

Package versions:

    dash==2.9.3
    dash-bootstrap-components==1.4.1
    dash-core-components==2.0.0
    dash-html-components==2.0.0
    dash-renderer==1.9.1
    dash-table==5.0.0

Bug tested and seen in various browsers in Windows 10.