Skip to content
This repository was archived by the owner on Jun 3, 2024. It is now read-only.
This repository was 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

Description

@ycaokris

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions