scatter_mapbox not updating in Dash with plotly.js 2.16.1

[celia-lm]

The traces get added/removed (you can hover over them) but the points don't appear in the image. The issue seems to be related to Plotly.react not identifying the differences between the two states: https://codepen.io/celia-plotly/pen/xxzgJWW

[celia-lm]

Workaround with dcc.Store and a clientside callback:

import dash
from dash import Input, Output, html, dcc, callback, ctx, State
import plotly.express as px
import plotly.graph_objects as go

import plotly.express as px
import pandas as pd

# IMPORTANT: set eager_loading=True
app = dash.Dash(__name__, eager_loading=True)

us_cities = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/us-cities-top-1k.csv"
)

def us_fig(data) :
    fig = px.scatter_mapbox(
        data,
        lat="lat",
        lon="lon",
        hover_name="City",
        hover_data=["State", "Population"],
        color_discrete_sequence=["fuchsia"],
        zoom=3,
        height=300,
    )
    fig.update_layout(mapbox_style="open-street-map")
    fig.update_layout(margin={"r": 0, "t": 0, "l": 0, "b": 0})
    fig.update_layout(mapbox_bounds={"west": -180, "east": -50, "south": 20, "north": 90})

    return fig

app.layout = html.Div([
        dcc.Dropdown(id='states', options=list(us_cities.State.unique()), value=['California'], multi=True),
        dcc.Store(id='fig_store'),
        dcc.Graph(id='fig1')
    ])

@callback(
    Output('fig_store', 'data'),
    Input('states', 'value')
)
def update_plot(states) :
    data = us_cities[us_cities['State'].isin(states)]
    new_fig1 = us_fig(data)
    
    return new_fig1

# change the id in the state and output to change the id of your plot
app.clientside_callback(
    '''
    function (figure, graph_id) {
        if(figure === undefined) {
            return {'data': [], 'layout': {}};
        }
        var graphDiv = document.getElementById(graph_id);
        var data = figure.data;
        var layout = figure.layout;        
        Plotly.newPlot(graphDiv, data, layout);
    }
    ''',
    Output('fig1', 'figure'),
    Input('fig_store', 'data'),
    State('fig1', 'id')
)

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

[adrianobacac]

Does the workaround disable clickData? I tried to add an action on marker selection, except either the map doesn't update (this bug report) or the click event never happens.

This callback gets called only once, on startup:

@callback(
    Output('fig_store', 'data'),
    Input('fig1', 'clickData')
)
def update_plot(click_data):
    #do something
    new_fig1 = us_fig(us_cities)
    return new_fig1

If the output is instead set to Output('fig1', 'figure') and the clientside callback is removed (reverting the workaround), click events trigger normally, except they can't change the visual.

[Benlau93]

when trying this workload, I faced this error. any idea why?

[archmoj]

Fixed by #6382.
Please upgrade to v2.16.4.

[ciskoh]

Hi all, I have a similar problem where my mapbox figure doesn't refresh tiles even after a callback. See more here. This is using python dash & plotly. and the following stack:

dash: 2.7.0
dash-core-components: 2.0.0
dash-html-components: 2.0.0

Should this problem be solved for the above version of Dash? Can someone guide me on a workaround in python? Thanks

[alexcjohnson]

@ciskoh do you see an error in the JS console: Uncaught (in promise) Error: There is already a source with this ID? If so perhaps your bug is another flavor of #6444