Description
I'm taking this as a Plotly.js error but feel like Dash team may need to explore on it.
- replace the result of
pip list | grep dashbelow
dash==1.8.0
plotly==4.5.0
-
if frontend related, tell us your Browser, Version and OS
- OS: MacOS
- Browser: Chrome Mac (this happens on Firefox as well)
- Version 79.0.3945.117
Describe your context
I'm writing an app which updates dcc.Graph() with callback, inside this callback a choroplethmapbox with additional traces is made.
What I noticed is that although returning a different number of trace manages to update my map, I can not apply user-interaction on the map like drag-lasso. In the console lasso on the updated graph raises:
async~plotlyjs.v1_7_0m1579024535.js:1 Uncaught TypeError: Cannot read property 'updateOnSelect' of undefined
at styleOnSelect (async~plotlyjs.v1_7_0m1579024535.js:1)
at E (async~plotlyjs.v1_7_0m1579024535.js:1)
at async~plotlyjs.v1_7_0m1579024535.js:1
at l (async~plotlyjs.v1_7_0m1579024535.js:1)
at Object.r.throttle (async~plotlyjs.v1_7_0m1579024535.js:1)
at Object.a.moveFn (async~plotlyjs.v1_7_0m1579024535.js:1)
at HTMLDocument.w (async~plotlyjs.v1_7_0m1579024535.js:1)
If I resize window my un-responsive lasso turn active again. This lasso-event is fine if graph is updating with the same number of traces.
I've attached a test-script to replicate this issue, press button to update a single trace plot to a double trace plot, and select with drag-lasso tool.
And gif:
Attached test script:
import dash
print(dash.__version__)
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
import plotly.graph_objects as go
import plotly.express as px
import json
from urllib.request import urlopen
with urlopen('https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json') as response:
counties = json.load(response)
import pandas as pd
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv",
dtype={"fips": str})
fig = go.Figure(data=[go.Choroplethmapbox(geojson=counties, locations=df.fips, z=df.unemp,
colorscale="Viridis", zmin=0, zmax=12,
marker_opacity=0.5, marker_line_width=0)
])
fig2 = go.Figure(
data=[
go.Choroplethmapbox(geojson=counties, locations=df.fips, z=df.unemp,
colorscale="Viridis", zmin=0, zmax=12,
marker_opacity=0.5, marker_line_width=0),
go.Scattermapbox(
mode="markers",
lon=[-85.416437], lat=[31.619466],
marker={'size': 30},
)
]
)
fig.update_layout(mapbox_style="carto-positron",
mapbox_zoom=3,
mapbox_center={"lat": 37.0902, "lon": -95.7129},
dragmode='lasso'
)
fig2.update_layout(
mapbox_style="carto-positron",
mapbox_zoom=3, mapbox_center={"lat": 37.0902, "lon": -95.7129},
dragmode='lasso'
)
# Graph 1
graph_1 = fig
# Graph 2
graph_2 = fig2
app = dash.Dash(__name__)
server = app.server
app.config.suppress_callback_exceptions = True
app.layout = html.Div(
[
html.Button(id='btn', children='Click to update map', n_clicks=0),
dcc.Graph(id='map', figure=graph_1, config={'responsive': True})
]
)
# Callback to update this map
@app.callback(
Output('map', 'figure'),
[Input('btn', 'n_clicks')]
)
def update_map(n_click):
if n_click:
return graph_2
if n_click % 2:
return graph_1
raise PreventUpdate
if __name__ == "__main__":
app.run_server(
debug=True, port=8052
)Expected behavior
I expect select effect shouldn't be affected regardless of what type of graph is updated.