📣 Preserving UI State, like Zoom, in dcc.Graph with uirevision with Dash

Dash Python
83

UPDATE: Solved this with different syntax for map figure.

hi @chriddyp
I was looking for this functionality but I’m not sure if I understand the syntax. I have a map with points on it. These points are filtered based on three dropdown filters. Each time I apply filtering, the map centers to initial position. I’m attaching part of the code that shows dropdown items, map, and callback. I’m wondering where I should have uirevision in the code.

html.Div([
            dcc.Dropdown(
                df['country'].unique().tolist(),
                placeholder='Country',
                id='country-filter',
                multi=True,
            ),
        ],
        style={'width': '15%','float': 'left', 'display': 'inline-block'}),

        html.Div([
            dcc.Dropdown(
                df['partner'].unique().tolist(),
                placeholder='Partner',
                id='partner-filter',
                multi=True,
            ),
        ], style={'width': '15%', 'float': 'left', 'display': 'inline-block'}),

        html.Div([
            dcc.Dropdown(
                df['product'].unique().tolist(),
                placeholder='Product',
                id='product-filter',
                multi=True,
            ),
        ], style={'width': '15%', 'float': 'left', 'display': 'inline-block'})

    ], style={
        'padding-bottom' : '2.5%'
    })

html.Div([
        dcc.Graph(
            id='map',
            
            
        )
    ], style={'width': '75%', 'display': 'inline-block','flex':'1'})

#callback

@app.callback(
    Output('map', 'figure'),
    Input('country-filter', 'value'),
    Input('partner-filter', 'value'),
    Input('product-filter', 'value'))
def update_main_map(country,partner,product):

    input_list = []
    # Callback triggers when app is running. it returns callback error
    # if the function is not receiving any input from the beginning.
    # The checks below avoid callback errors.
    if country is not None:
        a = "`country` == " + "'" + country + "'"
        input_list.append(a)
    if partner is not None:
        b = "`partner` == " + "'" + partner + "'"
        input_list.append(b)
    if product is not None:
        c = "`product` == " + "'" + product + "'"
        input_list.append(c)
    
    
    delimeter = " and "

    if len(input_list)>0:
        query_string = delimeter.join(input_list)  
        dff = df.query(query_string) #query method in pandas allows to enter complex row filtering with one string.
    else:
        dff=df.copy()

    map_fig = px.scatter_mapbox(df, lat="latitude", lon="longitude", hover_data=["age", "income"],
                        color_discrete_sequence=["fuchsia"], zoom=6, height=780, center={'lat':57.67, 'lon':12.00})
    map_fig.update_layout(mapbox_style="open-street-map",
                          margin={"r":0,"t":0,"l":0,"b":0},
                          )

    return map_fig

Dash app screenshot:

image
image1415×796 96.9 KB

I have

dash=2.8.1
dash-core-components=2.0.0