exception - dcc.Loading on First Load Only (Python)

exception – dcc.Loading on First Load Only (Python)

exception – dcc.Loading on First Load Only (Python)

The solution is as described in the thread you linked and redxmans last paragraph, but needs a little, extra tweak.

Use a parent div and put both the dcc.Loading component and the content div as siblings.

html.Div([dcc.Graph(id=us_map),
          dcc.Loading(id=loading)])
...

dcc.Loading generates not only a div, but a parent div for itself. Fortunately, we can access it by using the parent_style property in our callback output.

@app.callback(
    [Output(us_map,figure),
    Output(loading, parent_style)],
    Input(dropdown1,value)
)
def update_map(county_select):
...
  return fig, {display : none}

You can then position the loading animation correctly. One advantage of this implementation is being able to keep both dcc.Loading AND the map interactive.

import pandas as pd
import dash
from urllib.request import urlopen
import json
import plotly.express as px
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

with urlopen(https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json) as response:
    counties = json.load(response)

df = pd.read_csv(https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv,
                   dtype={fips: str})

fips_choices = df[fips].sort_values().unique()

loading_style = {position: absolute, align-self: center}

app = dash.Dash(__name__)
server = app.server
app.layout = html.Div([
    dcc.Dropdown(id=dropdown1,
                 options=[{label: i, value: i} for i in fips_choices],
                 value=fips_choices[0]
    ),
    html.Div([dcc.Graph(id=us_map, style={flex-grow: 1}),
              dcc.Loading(id=loading, parent_style=loading_style)
              ], style= {position: relative, display: flex, justify-content: center}
    )
])


@app.callback(
    [Output(us_map,figure),
    Output(loading, parent_style)
     ],
    Input(dropdown1,value)
)
def update_map(county_select):
        new_loading_style = loading_style
        # Initial load only
        # new_loading_style[display] = none
        new_df = df[df[fips]==county_select]
        fig = px.choropleth_mapbox(new_df, geojson=counties, locations=fips, color=unemp,
                           color_continuous_scale=Viridis,
                           range_color=(0, 12),
                           mapbox_style=carto-positron,
                           zoom=3, center = {lat: 37.0902, lon: -95.7129},
                           opacity=0.5
                          )
        fig.update_layout(margin={r:0,t:0,l:0,b:0})

        return fig, new_loading_style

app.run_server(host=0.0.0.0,port=8051)

There might not be a way with dcc.Loading

This is a solution that worked for me.

Give your map a style of {display:none}

dcc.Graph(id=us_map, style={display: none})

In the callback add the us-map style as an output and return {display:inline}

@app.callback(
    [Output(us_map, figure), Output(us_map, style)], Input(dropdown1, value)
)
def update_map(county_select):
    new_df = df[df[fips] == county_select]
    fig = px.choropleth_mapbox(
        new_df,
        geojson=counties,
        locations=fips,
        color=unemp,
        color_continuous_scale=Viridis,
        range_color=(0, 12),
        mapbox_style=carto-positron,
        zoom=3,
        center={lat: 37.0902, lon: -95.7129},
        opacity=0.5,
    )
    fig.update_layout(margin={r: 0, t: 0, l: 0, b: 0})

    return fig, {display: inline} 

If you want a loading bar instead of the area being blank, place the loading bar in a div above the map, add the loading bar as an output to the div, add a a return of {display:false} so that when the map loads the loading animation disappeares. You cannot get this to work with dcc.Loading so I just used a custom CSS loading bar.

exception – dcc.Loading on First Load Only (Python)

Related posts on exception  :

Leave a Reply

Your email address will not be published.