Introduce `Tabs` model

[huong-li-nguyen]

Description

• Add Tabs model
• Hide Container title if embedded inside Tabs
• Style tabs accordingly
• Refactor validator for reuse (checking for min length)
• Update features demo for pydantic and yaml

Docs + Tests will be done in a separate PR

• [x] Docs: https://github.com/mckinsey/vizro/pull/282
• [x] Tests: https://github.com/mckinsey/vizro/pull/291

Screenshot

Notice

• [x] I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

  • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
  • I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorized to submit this contribution on behalf of the original creator(s) or their licensees.
  • I certify that the use of this contribution as authorized by the Apache 2.0 license does not violate the intellectual property rights of anyone else.
  • I have not referenced individuals, products or companies in any commits, directly or indirectly.
  • I have not added data or restricted code in any commits, directly or indirectly.

[huong-li-nguyen]

Add example with non-charts

Yes, I noticed that as well, but I couldn't figure out where this comes from. I've added an example here: https://github.com/mckinsey/vizro/pull/280/commits/c6066b5eff1b7e145c50f4678bf265de72275bc2

Seems like the resizing doesn't appear with other components such as the Table and the Card. However the scrollbar does appear sometimes. I'll double-check that tomorrow

[huong-li-nguyen]

@antonymilne - I suspect it to be the plotly charts/dcc objects. I found this issue on dash: https://github.com/plotly/dash-core-components/issues/922, which still seems to be open. Our situation is similar to the example, but we do not set a fixed height for the figure beforehand; instead, our layouts set it dynamically. For instance, in our example page for the single tabs, the plotly charts initially have a height < 450px because the layout is set to fix the page without scrolling, and the charts dynamically update their width/height to fit their parent container.

What I assume happening is then when switching to a different tab, the plotly charts' height/width get reset to their original sizes (as explained in the issue). This leads to this short blinking effect and a scroll bar appearing for a second on the right, as with their actual size, they overflow their parent container. However, the scrolling bar disappears very quickly after they update their height/width again, but this blinking effect remains on the initial load.

I've double-checked with a pure dash app and you can also see this blinking/resizing happening there. I am not 100% sure why this behaves like it behaves 😄 but might be worth double-checking with @AnnMarieW 👍

[AnnMarieW]

Hi @huong-li-nguyen Yes, this is an open issue at Plotly and it's not an easy fix. The best workaround for now is to set the height. Maybe a clientside callback would be faster and help to reduce the flicker.

[huong-li-nguyen]

Hi @huong-li-nguyen Yes, this is an open issue at Plotly and it's not an easy fix. The best workaround for now is to set the height. Maybe a clientside callback would be faster and help to reduce the flicker.

Thanks @AnnMarieW for the quick reply! 🚀 That's very good to know! Yes, I've seen your answer on the thread, and setting a fixed height also works for us (in our case it's dynamically enforced by the size of the parent container). The blinking just happens when you switch the first time, afterwards it all works well!

[antonymilne]

Hi @huong-li-nguyen Yes, this is an open issue at Plotly and it's not an easy fix. The best workaround for now is to set the height. Maybe a clientside callback would be faster and help to reduce the flicker.

Thanks @AnnMarieW for the quick reply! 🚀 That's very good to know! Yes, I've seen your answer on the thread, and setting a fixed height also works for us (in our case it's dynamically enforced by the size of the parent container). The blinking just happens when you switch the first time, afterwards it all works well!

Cool, thank you very much for all this @huong-li-nguyen and @AnnMarieW! If it's not an easy one to fix then no worries, it definitely shouldn't block this feature being released. And we can put it on the backlog to look at again later.