Troubles to keep a float with dcc.Store

Hi I have a multi page app, and i need to store 4 objects (2 csv on a dictionary and 2 floats). I don´t have problems with the csv, but when i change of page i need to set again the 2 floats. It´s like the csv have been store but the floats don´t.

Here a chunk of code.

app.layout = html.Div([
    dcc.Location(id="url"),
    sidebar,
    content,
    dcc.Store(id="counts_store"),
    dcc.Store(id="results_store"),
    dcc.Store(id="p_store"),
    dcc.Store(id="lfct_store")
])

And here my callback for the floats

@app.callback(
    Output(component_id="p_store", component_property='data'),
    Input("my_pvalue","value"))
def store_p(p):
    return p

@app.callback(
    Output(component_id="lfct_store", component_property='data'),
    Input("my_lfct","value"))
def store_lfct(lfct):
    return lfct

This is my first page where i upload the csv and set up the floats.

And this is the second page where i need the previous csv and the floats, the app don´t work it until set again the floats values.

Someone have an idea for why happens?

Hi,

Welcome to the community!

I have a few ideas… Could you share how you define the components with ids “my_pvalue” and “my_lfct” in each page?

If you add them with a specific value in the page layout, they might be overwriting the values stored in dcc.Store. You might as well consider using persistence (as explained in the docs) in the inputs.

1 Like

Thanks for your reply. I’m going to read the persistence documentation.
I define p-value and lfct on both pages with the same code. (I only change a few minutes ago required to a False value but still doesnt work)

dcc.Input(
                    id='my_pvalue',
                    type="number",
                    placeholder="p-value",                        # A hint to the user of what can be entered in the control
                    debounce=False,                                  # Changes to input are sent to Dash server only on enter or losing focus
                    min=0, max=1, step=0.000001,         # Ranges of numeric value. Step refers to increments
                    minLength=0, maxLength=8,            # Ranges for character length inside input box
                    autoComplete='on',
                    required=False,                                   # Require user to insert something into input box
                    size="8",                                                # Number of characters that will be visible inside box
                    style={'display':'block','width':"34%"}),
       
               dcc.Input(
                   id='my_lfct',
                   type="number",
                   placeholder="lfct",  
                   debounce=False,                          
                   min=0, max=10, step=0.000001,         
                   minLength=0, maxLength=8,          
                   autoComplete='on',               
                   required=False,                    
                   size="20",
                   style={'display':'block','width':"34%"})]

Thanks for sharing it! You are indeed rewriting the components each time you navigate to a new page, but since you are not passing the value prop to it, then it gets None and the callback to update the dcc.Store will be triggered with None, clearing the store.

The easiest fix is to use persistence=True in the component, then it will preserve the value as long as you are using the same id for the component in each page. By default it will use persistence_type="local", which will preserve the choice in the same browser indefinitely, but you could very well switch to “session” to preserve it when page reloads, but not after the browser is closed.

1 Like