Try to bump dmc

[antonymilne]

Context: #901 (comment). dmc is now at 0.15. Let's consider unpinning:

1. Higher priority: see if we can get same datepicker behaviour as now but hopefully with fewer bugs (maybe helps with dynamic filter @petar-qb?). Initially we just need to check feasibility of this and whether it's something we can do quickly and easily or whether it's a huge piece of work.
2. Lower priority/separate ticket: consider Version bump after vizro-core-0.1.11 #308 and how we might like to integrate timepicker into vizro.

After #895 I think the only dmc components we have left are dmc.Switch and dmc.DateRangePicker/dmc.DatePicker.

@huong-li-nguyen are there plans to replace dmc.Switch with dbc?

[huong-li-nguyen]

Yes, the dmc.Switch will be replaced with the dbc.Checklist next 👍 To convert the DatePicker could be a bit more complex as the API has changed.

[petar-qb]

This issue depends a bit on fixing the dash persistence bug. We can start working on this ticket, but the date_picker persistence will be harder to implement.
P.S. The date_picker persistence already doesn't work.

[AnnMarieW]

Hi Vizro Team,

I’m glad to hear that you’re considering upgrading to the latest version of dash-mantine-components. As the primary maintainer of DMC, I’m happy to assist if you decide to move forward with this project.

Upgrading from version 0.12 to the latest release does involve significant changes. In large apps, this can be quite time-consuming; however, in Vizro, it’s relatively straightforward since only one component is in use. To help, I’ve prepared a draft PR #924 for you to review.

The current DMC version offers many benefits: enhanced stability, more features, and critical bug fixes, all thanks to its foundation on Mantine V7. You can find more details in our Roadmap.

We’ve been making rapid progress on DMC, releasing updates approximately every two weeks. You can see recent release announcements in our GitHub Discussions.

---

Benefits of Upgrading DMC in Vizro

As Antony mentioned in this comment, version 0.12 remains relatively popular. However, I anticipate its usage will decline as new projects adopt the latest version.

I understand the desire to minimize dependencies, but upgrading DMC has some advantages:

• Higher-Quality Date Pickers: The DMC date pickers in versions >=0.14 eliminate the need for workarounds currently included in Vizro.
• Access to ALL DMC components: This upgrade allows Vizro users to include any DMC component as custom components. Many of these components are not available in Dash Bootstrap Components or other Plotly libraries.
  • This upgrade would address Issue Custom DateTimePicker component #901, enabling the addition of dmc.DateTimePicker.
  • The dmc.Stepper could be a solution for the "Multi-step Wizard" as requested in Multi-step wizard #888 .
• The MantineProvider makes it straightforward to style all Mantine components with a Vizro theme, which could help address Brand Identity Management as outlined in Issue Brand identity management #887

---

Draft Pull Request Summary

I’ve drafted a PR to upgrade Vizro to use DMC version 0.15.1. Here’s a summary of the changes:

1. Mantine V7 requires React 18, which will be the default in Dash 3.0. For now, React 18 needs to be explicitly set in the app or via an environment variable.
2. Some components (e.g., date pickers) require extra CSS files. These are included as an external stylesheet in the PR, but it might make sense to move them to Vizro’s CSS folder.
3. The app layout needs to be wrapped in a dmc.MantineProvider.
4. Replaced the outdated date picker components with the new DatePickerInput. Eliminated all the workarounds for bugs in 0.12
5. Updated the JavaScript function to update both the Bootstrap and Mantine themes when switching.

---

Next Steps

I haven’t updated any tests yet, but I’ve verified functionality by running the example app in the dev folder. Here’s the command I used:

hatch run examples:example dev

The app works with all components and the theme switcher, and it’s ready for further testing.

[AnnMarieW]

This issue depends a bit on fixing the dash persistence bug. We can start working on this ticket, but the date_picker persistence will be harder to implement. P.S. The date_picker persistence already doesn't work.

Can you say more about this bug? Is this a Vizro issue or can it be fixed in either Dash or DMC? I can't access the internal issue.

[petar-qb]

Hi @AnnMarieW 👋 and thank you so much for your contribution!

Let me clear the following question before we align about on the rest later today or sometime this week.

Can you say more about this bug? Is this a Vizro issue or can it be fixed in either Dash or DMC? I can't access the internal issue.

This issue in Vizro is an internal replication of the Dash issue outlined here: Dash Issue #2678. The bug relates to persistence behavior in Dash, and you can find a minimal reproducible example in the Plotly forum here.

I’ll review your PR as soon as I can (likely later this week) and will update you on whether this Dash bug impacts the feasibility of bumping Vizro's dmc.DatePicker to 0.15.

P.S. I’m actively working on addressing this bug on the Dash side.

[AnnMarieW]

Hi @petar-qb
Good to know that you are perusing the Dash issue. It would be nice to have the option to persist values that are updated in callbacks.

I see that the DatePicker is not persistent in the Vizro app I ran in my PR, however, the dmc.DatePickerInput persistence does work in a regular Dash app - you can see it on this sample app on PyCafe. User values are maintained after a browser refresh.

[petar-qb]

I see that the DatePicker is not persistent in the Vizro app I ran in my PR

Correct. That's a well known Vizro issue we also plan to address soon.