Multipage dash app

Hello, I am currently trying to make a multipage app where there will be multiple pages with single graphs and one main page which will contain all of them. I want to have each page defined on a separate python file in the “pages” folder. Since it takes a very long computation time, my idea is to load everything in the main page or at least most of the data when opening the main page and store it using dcc.Store to share data between pages. The problem is that I need a callback to access data from the dcc.Store and render the other pages and I’ve also had a problem with callbacks being triggered from other page files which really complicates making this distinction between pages. For example, I’m using URL as an input in my main page callback to initialize everything, but then when I switch to another page it’s also triggered by the changed URL. Has anybody had similar experiences and what would your solution be?

Welcome to the forums, @tinmar300.

Could you rephrase your question and add some paragraphs? That might be the reason for the lack of responses. :raised_hands:

I don’t properly understand the question either, but I’m wondering if it might possibly have some overlap with the one discussed (and solved) at Trigger callback when a page loads in order to update all plots/inputs?

1 Like

Hello guys, I will try to clarify what I meant in the previous post on Multipage dash app - #3 by davidharris

I am making some project metrics, and I want to have one main overview page that will have lets say 3 graphs called graph1, graph2, and graph3. and then I want to have 3 other pages that will only contain each of these graphs (for like a closeup view) . My folder structure looks something like this

app.py

  • pages/mainpage.py
  • pages/graph1page.py
  • pages/graph2page.py
  • pages/graph3page.py

All of the graphs use the same database and computations for their creation. So far, the only way I was able to make this desired behaviour was to load the dataset once in each page and compute each graph separately which takes about 5-6 minutes.
My question is:
Is there a way for me to load the dataset and compute all 3 graphs only once when I first start the app and open the mainpage and then reuse that loaded and computed data it to display the graphs on the other pages.

Hope this makes my intentions more clear. Please let me know if I’m going about this the wrong way and If I would need to restructure my app completely

Is that due to the amount of data? You could calculate the figures and store them into a dcc.Store() in app.py. Once you navigate to one of the pages, you just retrieve the figure from the dcc.Store().

If the figures themselves are to big to store in the client store, you could use dash-extensions for serverside storing.

1 Like

I’ve tried this approach, but in order to access the storage i need a callback function, and what I’ve noticed is that callbacks from other pages (python files - for example graph1page.py) can be triggered when I navigate to i.e. graph2

I believe page components can achieve the desired behavior. Take a look,

https://www.dash-extensions.com/sections/pages

2 Likes