plotly / plotly/dash

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

Open
#2,940 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P3
Dominant language
Python
Stars
24.4k
Forks
2.3k
Avg merge
2d 7h
Merged PRs (30d)
13

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the provided Dash app and reproducing the sequence with dcc.Graph and Scattermapbox. Inspect how the graph update callback interacts with the existing restyleData after a legend double-click, and compare the behavior with the related Dash issue 2521. Done means changing the dropdown continues to update the map without a Mapbox error.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.