Add persistence to Cyto/Dynamic Callbacks

Dash Python
1

Hi,

I show this very simple app as an example
https://binvestigate-fold-analyzer2.herokuapp.com/apps/backend_dataset

There are 2 tabs: “Compounds” and “Backend Dataset”

I can make adjustments in “Compounds” such as node selections or adding additional cytos, however, when I click on “Backend Dataset” then return to “Compounds”, my updates are lost.

I do not see “persist” in the cyto reference (Reference | Dash for Python Documentation | Plotly).

What is my best course of action?

  1. Can I somehow add persist to cyto myself?
  2. Can I add persist to the “tab”/“page” as a whole given that I am using dynamic callbacks?
  3. Do I have to resort to some sort of elaborate scheme using dcc.Store? If so, any best practice recs?

Thank you

2

The easiest approach for course 3 seems to be:

In my index.py, I have an html.Div that receives content based on a chosen link:

app.layout = html.Div(
    [
        dcc.Store(id='store_cyto_compound',storage_type='session',data={}),
        
        dbc.Row(
            #for the moment, we put all in one column
            #but maybe later put in separate columns
            #just put one of each link into a different column
            dbc.Col(
                html.Div(
                    #id='link_list',
                    children=[
                        dcc.Location(id='url',pathname='',refresh=False),
                        dcc.Link('Compounds',href='/apps/cyto_compound'),
                        dcc.Link('Backend Dataset',href='/apps/backend_dataset')
                    ]
                ),

            )
        ),
        dbc.Row(
            dbc.Col(
                html.Div(
                    id='page_content',
                    children=[]
                )
            )
        )
    ]
)

Currently, when a link is chosen, I have a simple callback that returns the layout of the corresponding app

@app.callback(
    [Output(component_id='page_content',component_property='children')],
    [Input(component_id='url',component_property='pathname')]
)
def display_page(temp_pathname):
    if temp_pathname == '/apps/cyto_compound':
        return [cyto_compound.layout]
    elif temp_pathname == '/apps/backend_dataset':
        return [backend_dataset.layout]
    else:
        return 'under construction'

It seems to be the case that when the “Compounds” link is clicked, callback_context.triggered has the value

[{'prop_id': '.', 'value': None}]

and that callback_context.triggered belongs to each “tabbed app”

Therefore, in the chunk of code that creates the initial cyto (which is automatically triggered on sub-app load) if callback_context.triggered==[{'prop_id': '.', 'value': None}] then I can load the cytos from some stored variable

Does that sound right?