[Tidy] Replace dmc.Tabs with dbc.Tabs

[huong-li-nguyen]

Description

We initially used dmc.Tabs due to an issue with dbc.Tabs at the time of development. Specifically, Plotly charts within dbc.Tabs did not resize correctly, requiring either a fixed height for the charts or the use of the callback method for the tabs, which we wanted to avoid. For more context on the previous issue, see:

• https://github.com/McK-Internal/vizro-internal/issues/292
• Graph under inactive dbc.Tab occupies half the container size facultyai/dash-bootstrap-components#211

I took another look at dbc.Tabs, and it seems to be working great now 🥳.

It did take a bit of work to get everything running smoothly because the HTML structure for the Bootstrap component is very different. Plus, dbc adds an extra div for some reason that we can't assign a className to. This led to a couple of CSS issues, which are now sorted out. I left a comment about it, but we shouldn't need to change it anymore.

Screenshot

Notice

• 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.

[pruthvip15]

One small comment, but looks good to my understanding.
Amazing work 👍

[maxschulz-COL]

Lgtm! Seems like a super small change, but I bet it wasn't :P

One QQ: if we follow the recommended practice of adding a title to the Graph model, don't you think the title margin is a little small:

[huong-li-nguyen]

Lgtm! Seems like a super small change, but I bet it wasn't :P

One QQ: if we follow the recommended practice of adding a title to the Graph model, don't you think the title margin is a little small:

Can you open it in an incognito browser? I think your browser might have cached an old CSS file? In your screenshot there is no styling applied to the tabs.

It should look like this:

[maxschulz-COL]

Can you open it in an incognito browser? I think your browser might have cached an old CSS file? In your screenshot there is no styling applied to the tabs.

I get this in incognito - this is the link to PyCafe:

[huong-li-nguyen]

Can you try to run it locally? PyCafe doesn't seem to pull the latest bootstrap file which is in that branch.
If that does not work, what's your dbc version on hatch?