Skip to content
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.

uirevision for mapbox in dcc.Graph breaks when in dcc.Loading #674

Closed
ycaokris opened this issue Oct 7, 2019 · 0 comments · Fixed by #740
Closed

uirevision for mapbox in dcc.Graph breaks when in dcc.Loading #674

ycaokris opened this issue Oct 7, 2019 · 0 comments · Fixed by #740
Milestone

Comments

@ycaokris
Copy link

ycaokris commented Oct 7, 2019

Package version
dash==1.3.1

I’m trying to add {‘uirevision’: True} for a mapbox in dcc.Graph and found out that dcc.Loading() is breaking the behavior of preserving UI, same as mentioned in this community issue https://community.plot.ly/t/dcc-loading-component-breaks-uirevision-for-mapbox-among-others/29098

Below is a reproducible example

from urllib.request import urlopen
import json
import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate

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})

app = dash.Dash(__name__)
server = app.server

mapbox_token = "pk.eyJ1IjoicGxvdGx5bWFwYm94IiwiYSI6ImNqdnBvNDMyaTAxYzkzeW5ubWdpZ2VjbmMifQ.TXcBE-xg9BFdV2ocecc_7g"

fig = go.Figure(go.Choroplethmapbox(geojson=counties, locations=df.fips, z=df.unemp,
                                    colorscale="Viridis", zmin=0, zmax=12,
                                    marker_opacity=0.5, marker_line_width=0))
fig.update_layout(mapbox_style="carto-positron",
                  mapbox_accesstoken=mapbox_token,
                  mapbox_zoom=3, mapbox_center={"lat": 37.0902, "lon": -95.7129})
fig.update_layout(margin={"r": 0, "t": 0, "l": 0, "b": 0}, uirevision=True)

app.layout = html.Div(
    children=[
        html.Button(id='btn', children='update', n_clicks=0),
        html.Div('Figure No Loading'),
        dcc.Graph(id='no-loading-fig', figure=fig),
        html.Div('Figure Loading'),
        dcc.Loading(dcc.Graph(id='mapbox-loading', figure=fig))]
)


@app.callback(
    [Output('mapbox-loading', 'figure'), Output('no-loading-fig', 'figure')],
    [Input('btn', 'n_clicks')]
)
def update(click):
    if click:
        fig.update_layout(mapbox_style="light")
        return fig, fig
    else:
        raise PreventUpdate


if __name__ == '__main__':
    app.run_server(debug=True, port=8053, dev_tools_hot_reload=False, use_reloader=False)

loading

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants