plotly : scattermapbox plot doesn't update with change in pandas dataframe in callback

Question

I am slicing a pandas dataframe based on user input. While the callback runs and I see that the dataframe is updated, the changes aren't reflected on the map. I am passing a pandas series at lat and lon and the map should be updated with the DataFrame. Below is simplified version of my code:

import dash_bootstrap_components as dbc 
import dash
from dash import dcc
import pandas as pd

import plotly.express as px

df = px.data.carshare()


layout = html.Div([ 

                                  dcc.Graph(id="map"),
                                  dbc.Input(id='input'), 
                                  dbc.Button("Apply", id="show", className="mr-1", n_clicks=0)

               ]) 

# Update map graph
@app.callback(Output("map", "figure"),
                          [

                            Input("Input", "value"),
                            Input("show", "n_clicks")

                         ],
                        )
def update_map(input, btn_nclick):

    # check for triggered inputs / states
    ctx = dash.callback_context

    data = []

    if input:

       df = df[df['peak_hour'] == 11]

       data.append({

                        "type": "scattermapbox",
                        "lat": df['centroid_lat'],
                        "lon": df['centroid_lon'],
                        "mode": "markers",
                        "marker": {
                      
                                            "symbol": "circle",
                                            "size": 9,
                                            "opacity": 0.8,
                     
                            }
                     }
        )

       layout = {

                 "autosize": True,
                 "datarevision": 0,
                 "hovermode": "closest",
                 "mapbox": {

                     "accesstoken": MAPBOX_KEY,
                     "bearing": 0,
                     "center": {
                         "lat": coords[0],
                         "lon": coords[1]
                     },
                     "pitch": 0,
                     "opacity": 0.2,
                     "zoom": zoom,
                     "style": "streets",

                 },

                 "margin": {
                    "r": 0,
                    "t": 0,
                    "l": 0,
                    "b": 0,
                    "pad": 0
                }

    }

   return ({"data": data, "layout": layout})

Trying to wrap my head around why the map not being updated with change in pandas DataFrame?

Answer 1

This has been fixed in the newest version of dash, they made a post about it, it was a bug on their end. If you update it all to the newest version (for me its 2.7.1) it should work.