Dash multipage app cannot acces dcc.Store

Dash Python
1

Hello, I’m trying to access a page named satelites.py from the page evolprop.py through a click event on a figure in evolprop.py. I want to save the y_value of the click using dcc.Store and then use it in the satelites.py page. The project’s structure is as follows:

app.py
pages(folder)
- ------ home.py
- ----- evolprop.py
------ satelites.py

the callback to do this in evolprop.py is:


@callback(
    # the output will be the porperty data of a dcc.Store    
    [Output(component_id='store-click', component_property='data' ),
     Output('link-container', 'children')],  
    Input(component_id='color_history_cen',component_property='clickData'), #graph
    prevent_initial_call=True
)


def store_clickdata(clickdata):
    if clickdata==None:
        raise dash.exceptions.PreventUpdate    
    else:                                      
    
        #capture the y value (ID-gal) of a click on a figure and make a link for the page (satelites.py)       
        y_value= np.round(clickdata['points'][0]['y'],0)
        link_sat = dcc.Link('Go to Satelites Gal ID '+str(y_value) , href='/satelites', target='_blank')
        return y_value , link_sat

then I use in satelites.py, the code of this page is:

import dash
from dash import dcc, html,Input,Output,callback

dash.register_page(__name__,name='Satelites',path='/satelites')

layout = html.Div(
    [
        html.Div(id="pagina", children=[]),
    ]        
    
)

@callback(
    Output(component_id='pagina', component_property='children' ), 
    Input(component_id='store-click',component_property='data'),
    #prevent_initial_call=True
)

def update_page(clickstore):
    
    if clickstore==None:
        return html.H1("Please select a galaxy in the page Evolution properties")
    else:
        print('the click saved is ',clickstore)
        return html.H1('This will be the page of the galaxy '+str(clickstore)),

The problem lies in the line dcc.link('Go to Satelites Gal ID '+str(y_value) , href='/satelites', target='_blank'); if target='_self', the satelites.py page loads successfully and returns the value of y_value in html.H1, but if target='_blank', it opens the satelites.py page in another tab but html.H1 returns “Please select a galaxy in the page Evolution properties”, i.e the value of clickstore==None.

Why does this happen?

2

Hey @elioc welcome to the community.

Where did you define the dcc.Store(id="store-click") ? It has to be defined in app.py.

3

Hi, thanks for the response. Yes !!! dcc.store was define in app.py. Actually it works when I click en navbar “Satelites” or in the dcc.link generated in the callback on the evolprop.py page, if target=‘_ref’
The problem arises when target=‘_blank’ ( open in a new tab) o when click in the navbar “satelites” with the scroll wheel of the mouse, ie, open in a new tab.
this is the code of app.py:

import dash
from dash import html,dcc 
import dash_bootstrap_components as dbc

# Create the dash app
app = dash.Dash(__name__, use_pages=True, external_stylesheets=[dbc.themes.SPACELAB])
#, '/assets/custom.css'])

# Define the navigation bar
navbar = dbc.NavbarSimple(
    children=[
        dbc.NavItem(dbc.NavLink("General properties", href="/")), #Home
        dbc.NavItem(dbc.NavLink("Evolution properties", href="/evolprop")),
        dbc.NavItem(dbc.NavLink("Satelites", href="/satelites")),
    ],
    brand="Disk Galaxies Dash",
    brand_href="/",
    color="dark",
    dark=True,
)

# Overall layout
app.layout = html.Div([
    navbar,  # Include the navigation bar
    dash.page_container,
    dcc.Store(id="store-click", data=None)
])

# Run the dash app
if __name__ == '__main__':
    app.run_server(debug=True)

dcc.store seems don’t work when the page it’s open in a new tab.

4

Hey,
have you tried specifying the storage type of the Store? The ‘memory’/default one gets reset on page refresh.
From the documentation:

storage_type (a value equal to: ‘local’, ‘session’ or ‘memory’; default 'memory'): The type of the web storage. memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.

5

Hi, sorry for the delay. Yes with that I can make it works.
Thank you for reply

1 Like