dash icon indicating copy to clipboard operation
dash copied to clipboard

dcc.Graph with scattermapbox stops updating after double clicking on a trace in the legend

Open michaelbabyn opened this issue 6 months ago • 0 comments

Describe your context

dash                 2.17.1

Describe the bug

  1. create a map with 7 traces and double click on the seventh trace in the legend to hide all other ones
  2. change the map to one with fewer traces
  3. get error in console Uncaught (in promise) Error: Mapbox error.
  4. trying to change the graph again fails
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go
import pandas as pd

# Replace 'your_access_token' with your actual Mapbox access token

# Sample data (replace with your actual data)
df1 = pd.DataFrame(
    {"lat": [35.6895, 34.0522, 32.7767], "lon": [-82.6446, -118.2437, -96.7970], "trace_name": ["A", "B", "C"]}
)
df2 = pd.DataFrame(
    {
        "lat": [40.7128, 39.9526, 38.8951, 37.7749, 36.1699, 34.0522, 32.7767],
        "lon": [-74.0060, -75.1652, -77.0367, -122.4194, -119.4179, -118.2437, -96.7970],
        "trace_name": ["D", "E", "F", "G", "H", "I", "J"],
    }
)
df3 = pd.DataFrame(
    {
        "lat": [40.7128, 39.9526, 38.8951, 37.7749, 36.1699],
        "lon": [-74.0060, -75.1652, -77.0367, -122.4194, -119.4179],
        "trace_name": ["K", "L", "M", "N", "O"],
    }
)

data_dict = {"Option 1": df1, "Option 2": df2, "Option 3": df3}

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dcc.Dropdown(id="dropdown", options=[{"label": k, "value": k} for k in data_dict.keys()], value="Option 1"),
        dcc.Graph(id="map"),
    ]
)


@app.callback(Output("map", "figure"), Input("dropdown", "value"))
def update_graph(selected_option):
    df = data_dict[selected_option]
    fig = go.Figure()
    for trace_name, group in df.groupby("trace_name"):
        fig.add_trace(go.Scattermapbox(lat=group["lat"], lon=group["lon"], name=trace_name, mode="markers"))
    fig.update_layout(mapbox_style="open-street-map")
    return fig


if __name__ == "__main__":
    app.run_server(debug=True, port=8051)

Expected behavior

the current state of the restyleData shouldn't prevent the graph from updating

Screenshots Screenshot from 2024-08-05 17-45-52

I wonder if this is related to https://github.com/plotly/dash/issues/2521 at all

michaelbabyn avatar Aug 05 '24 21:08 michaelbabyn