Load data once and retrieve in multiple pages

I am trying to host a multi-page dash app that reports the performance of a machine learning model in form of charts, tables etc. This app needs models and datasets to be loaded in order to populate the charts in each page. Now these models and datasets are slightly larger in size and therefore loading them independently in page does not seem like an optimal solution. Instead, what I am trying to achieve is something like this - Load the models and datasets in the app.py file which hosts the dash app and then retrieve those objects in the child pages (e.g. page_1.py). I am not able to figure out a way to do this though. I can’t just import them from app.py as it would cause recursion error. So I am trying to use Flask-Caching module to cache the objects in my local in app.py and then retrieve them from the same cache inside the page_1.py but I am not sure how to do this since the caching function is again declared in the app.py file. Is there another (better) way to achieve my objective?

Hi, have you tried the dash dcc.Store method? It can be used to save the data and use it on multiple pages.

Link to the documentation: Store | Dash for Python Documentation | Plotly

Best,
Saurabh

As far as I am aware, dcc.Store method works well only for small data size. In my case, I have about 10 datasets each about 100 MB and a 10 models of similar size. Not sure if dcc.Store would work in this scenario.

Hi @asanoop24 and @saurabh_joshi and welcome to the Dash community :slightly_smiling_face:

This is a great question!

As mentioned by @saurabh_joshi , if you aren’t working with large datasets, then using dcc.Store is the easiest way to share data between pages of a multi-page app.

However, if you have larger data, then you may want to use caching as described in example 3 and 4 in sharing data between callbacks chapter of the dash tutorial. Part 5. Sharing Data Between Callbacks | Dash for Python Documentation | Plotly

If you are using the pages/ feature to make a multi-page app, there are some new features in dash 2.5 (soon to be announced) that will make this much easier. There is a new get_app() function that can be used to access the app object from modules within the pages folder without running into the circular imports issue. You can see an example based on the dash-tutorial here: dash-multi-page-app-demos/multi_page_cache at main · AnnMarieW/dash-multi-page-app-demos · GitHub

Multi-page app (without using the pages/ feature)
With a multi page app, that does not use the pages/ feature, you can refactor your project so that you define the app and the cache in a separate file (app.py). Then in all the other modules, you can use from app import app without running into the circular imports issue.

The app structure would look something like:

- app.py 
- index.py
- pages
   |-- __init__.py
   |-- page1.py
   |-- page2.py


4 Likes

Hi @AnnMarieW I was looking into sharing data across pages with the pages/feature and it looks like the link you previously shared is broken. Does this example live somewhere else?

Hi @kelly_gfc

I removed the cache demo because the background callbacks were easier to use with multi-page apps. Here’s an example: dash-multi-page-app-demos/multi_page_cache_background_callback at main · AnnMarieW/dash-multi-page-app-demos · GitHub

Also, if you don’t need to set up the cache, here is an example that just uses dcc.Store: dash-multi-page-app-demos/multi_page_store at main · AnnMarieW/dash-multi-page-app-demos · GitHub

I also expect that the sever side cache in Dash Extensions will work with Pages, but I haven’t tried it yet.

2 Likes