Editing variables across pages - contextual callbacks and circular dependencies

Hi,

I’m working on a multipage app, whereby I can persist storage (dcc.Storage) across pages. I have found this to be a useful way to transport data across pages and can display user input data from Page 1 on Page 2.

However, I would like to take this a step further and provide an option to edit this data on Page 2, whilst also populating the data obtained from Page 1. I think I have achieved this using a contextual callback and 2 different dcc.Storage components, essentially providing the option to update and store, or store into a second dcc.Storage component.

However, I would like to understand if there is a cleaner way of achieving this. @Emil @chriddyp any ideas? Code below:

# HEADER WHICH PERSISTS ACROSS PAGES:

dcc.Store(id='universe-storage', storage_type='session'),
dcc.Store(id='universe-second-storage', storage_type='session'),


# PAGE ONE DROPDOWN AND CALLBACK TO POPULATE "universe-storage"

universe_dropdown = dbc.FormGroup([
        html.Br(),
        dbc.Label("Universe", html_for="universe-selector-dropdown"),
        html.Br(),
        dcc.Dropdown(id="universe-selector-dropdown",
                     options=[{'label': '1', 'value': 'ValOne'},
                              {'label': '2', 'value': 'ValTwo'},
                              {'label': '3', 'value': 'ValThree'},
                              {'label': '4', 'value': 'ValFour'},
                              {'label': '5', 'value': 'ValFive'},
                              ],
                     multi=True,
                     persistence=True,
                     persistence_type='memory'),
    ])


@app.callback(Output('universe-storage', 'data'),
              Input('universe-selector-dropdown', 'value'))
def hedge_universe_storage_send(hedge_universe):
    if hedge_universe:
        return hedge_universe



# PAGE TWO DROPDOWN, PROVIDES USER WITH OPTION TO UPDATE UNIVERSE OR VIEW UNIVERSE
# POPULATES DATA TO "universe-second-storage"

universe_informer = dbc.FormGroup([
        html.Br(),
        dbc.Label("Universe", html_for="universe-informer"),
        html.Br(),
        dcc.Dropdown(id="universe-informer",
                     options=[{'label': '1', 'value': 'ValOne'},
                              {'label': '2', 'value': 'ValTwo'},
                              {'label': '3', 'value': 'ValThree'},
                              {'label': '4', 'value': 'ValFour'},
                              {'label': '5', 'value': 'ValFive'},}
                              ],
                     multi=True,
                     persistence=True,
                     persistence_type='memory'),
    ])



@app.callback(Output("universe-informer", "value"),
              Output('universe-second-storage', 'data'),
              Input('universe-storage', 'data'),
              Input("universe-informer", "value"))
def callback(storage_value, input_value):
    ctx = dash.callback_context
    trigger_id = ctx.triggered[0]["prop_id"].split(".")[0]
    print(trigger_id)
    if trigger_id == "universe-informer":
        return storage_value, storage_value
    else:
        return dash.no_update, input_value

4 posts - 2 participants

Read full topic