Dynamic page/tab creation

[gtauzin]

Question

Hi vizro team!

Is it possible to allow a user to dynamically create a new page or a new tab?

Code/Examples

Maybe to illustrate what I mean, let me give you a naive example. Let's imagine I have the GDP over years of a bunch of country. In my navigation panel, I select a single country. On the pages side panel there is an icon with a "+" and if I click on it, I can create a new page on which I can select a different country and just change page to alternate GDP plot per selected countries.

Thanks a lot for your feedback! :)

Which package?

vizro

Code of Conduct

• I agree to follow the Code of Conduct.

[maxschulz-COL]

Hey again @gtauzin :),

having a dynamic number of pages is tricky, but I will refer to @antonymilne for the final verdict, as he has worked on that before, but maybe you could look into this page to come up with alternative easier solutions: https://vizro.readthedocs.io/en/stable/pages/user-guides/custom-figures/#dynamic-number-of-cards

The example posted is about dynamic cards, but potentially you could have dynamic tabs, which might even be nicer when comparing a chart. Just an idea!

[gtauzin]

Hi @maxschulz-COL and thank you for your reply.

I have seen the dynamic card creation, but the idea is really to provide a new view to the user on which s/he can apply different filters and selectors. So dynamic pages creation would be really great. I would still be interested in dynamic tabs too as a backup plan or for new features! :)

[gtauzin]

I can confirm that I could make this works for dynamic tab creation based on the card example. This is the corresponding PyCafe example.

I also understand that the card example cannot be extended to pages are the custom figure is contained inside a page. Would love to know if there is any other way to dynamic pages! Thank you :)

[antonymilne]

Hi @gtauzin and sorry for the slow response - I was pondering different options here.

Adding pages on the fly is basically not possible because of underlying limitations of Dash pages. The Dash page registry, which Vizro is built on top of and handles all the routing and page building, is really designed to be fixed upfront and not modified during runtime. You could maybe hack something together that sort of works, but it would only be suitable for a single user, single worker app. The reason for this is that any hack would not be stateless as it would modify global dash.page_registry variable, and statelessness is a key assumption of Dash apps that keeps them scalable.

However, one thing that is possible in Dash, and is sort of possible in Vizro is to provide a template for a page where the content can be dynamically served dependent on the path or a query parameter like in this bit of the Dash docs on variable paths and the one that follows on query parameters.

Do you think that a pattern like that might serve your needs? If not then I'm afraid that dynamic tabs or containers is the closest you'll be able to get.

[gtauzin]

Hi @antonymilne. I am grateful you take some of your time to answer my questions! :)

Thanks for the explanation. I am not sure I understand exactly what your suggestion implies concretely. The pages cannot be dynamically created but can be dynamically served: Would that mean I just need to write some kind of template for the creation of a new page and I can then "access" this page on my dashboard? How would accessing it typically work? Would I be able to control it through a parameter?

I think I would be very interested in such a solution as all pages I wish to generate are the same but just looking at specific event files.

Thank you again for your help!

[gtauzin]

Hi!

Thanks again for the discussion today! Based on your feedback, I am now trying to achieve the same visual output but statically instead of dynamically so I can make fully use of Vizro!

I have attempted to do this in this PyCafe example. My approach is to:

• Create a custom Tabs to pass specific id to each tab.
• Create an action that takes as input the slider's value and returns each potential tab's tab_style.

This seems to be working fine! Is this how you would write it with vizro?

Thanks a lot :)

[maxschulz-COL]

Hi!

Thanks again for the discussion today! Based on your feedback, I am now trying to achieve the same visual output but statically instead of dynamically so I can make fully use of Vizro!

I have attempted to do this in this PyCafe example. My approach is to:

Does this work for you, for me the tabs number doesn't change 🤔

[gtauzin]

Hi @maxschulz-COL 👋!

Does this work for you, for me the tabs number doesn't change 🤔

Sorry, my bad must have a had two PyCafe tabs opened. The working example is here

The only difference between the two is that I make use of dbc.Tab 'id instead of its tab_id. I got confused with both options available.