[Tidy] Bump to Pydantic V2

vizro-core/docs/pages/user-guides/custom-components.md

@@ -402,18 +402,12 @@ As mentioned above, custom components can trigger action. To enable the custom c
 
     === "app.py"
         ```py
-        from typing import Literal
+        from typing import Annotated, Literal
 
         import dash_bootstrap_components as dbc
         import vizro.models as vm
-        from dash import html
+        from pydantic import AfterValidator, Field, PlainSerializer
         from vizro import Vizro
-
-        try:
-            from pydantic.v1 import Field, PrivateAttr
-        except ImportError:
-            from pydantic import PrivateAttr
-
         from vizro.models import Action
         from vizro.models._action._actions_chain import _action_validator_factory
         from vizro.models.types import capture
@@ -423,9 +417,14 @@ As mentioned above, custom components can trigger action. To enable the custom c
         class Carousel(vm.VizroBaseModel):
             type: Literal["carousel"] = "carousel"
             items: list
-            actions: list[Action] = []
-            # Here we set the action so a change in the active_index property of the custom component triggers the action
-            _set_actions = _action_validator_factory("active_index")
+            actions: Annotated[
+                list[Action],
+                # Here we set the action so a change in the active_index property of the custom component triggers the action
+                AfterValidator(_action_validator_factory("active_index")),
+                # Here we tell the serializer to only serialize the actions field
+                PlainSerializer(lambda x: x[0].actions),
+                Field(default=[]),
+            ]
 
             def build(self):
                 return dbc.Carousel(
@@ -437,6 +436,7 @@ As mentioned above, custom components can trigger action. To enable the custom c
         # 2. Add new components to expected type - here the selector of the parent components
         vm.Page.add_type("components", Carousel)
 
+
         # 3. Create custom action
         @capture("action")
         def slide_next_card(active_index):
@@ -445,6 +445,7 @@ As mentioned above, custom components can trigger action. To enable the custom c
 
             return "First slide"
 
+
         page = vm.Page(
             title="Custom Component",
             components=[
@@ -459,9 +460,9 @@ As mentioned above, custom components can trigger action. To enable the custom c
                         vm.Action(
                             function=slide_next_card(),
                             inputs=["carousel.active_index"],
-                            outputs=["carousel-card.children"]
+                            outputs=["carousel-card.children"],
                         )
-                    ]
+                    ],
                 ),
             ],
         )

vizro-core/examples/dev/app.py

@@ -1,7 +1,7 @@
 """Example app to show all features of Vizro."""
 
 from time import sleep
-from typing import Literal, Optional
+from typing import Optional
 
 import dash_bootstrap_components as dbc
 import pandas as pd
@@ -492,7 +492,7 @@
             column="size",
             selector=vm.Slider(title="Slider (Tips - size)", step=1, value=2),
         ),
-        vm.Filter(targets=["graph-stocks"], column="date", selector=vm.DatePicker(title="Date Picker (Stocks - date)")),
+        # vm.Filter(targets=["graph-stocks"], column="date", selector=vm.DatePicker(title="Date Picker (Stocks - date)")),
     ],
 )
 
@@ -643,65 +643,65 @@ def my_custom_table(data_frame=None, chosen_columns: Optional[list[str]] = None)
 
 # CUSTOM COMPONENTS -------------------------------------------------------------
 # 1. Extend existing components
-class TooltipNonCrossRangeSlider(vm.RangeSlider):
-    """Custom numeric multi-selector `TooltipNonCrossRangeSlider`."""
+# class TooltipNonCrossRangeSlider(vm.RangeSlider):
+#     """Custom numeric multi-selector `TooltipNonCrossRangeSlider`."""
 
-    type: Literal["other_range_slider"] = "other_range_slider"
+#     type: Literal["other_range_slider"] = "other_range_slider"
 
-    def build(self):
-        """Extend existing component by calling the super build and update properties."""
-        range_slider_build_obj = super().build()
-        range_slider_build_obj[self.id].allowCross = False
-        range_slider_build_obj[self.id].tooltip = {"always_visible": True, "placement": "bottom"}
-        return range_slider_build_obj
+#     def build(self):
+#         """Extend existing component by calling the super build and update properties."""
+#         range_slider_build_obj = super().build()
+#         range_slider_build_obj[self.id].allowCross = False
+#         range_slider_build_obj[self.id].tooltip = {"always_visible": True, "placement": "bottom"}
+#         return range_slider_build_obj
 
 
-vm.Filter.add_type("selector", TooltipNonCrossRangeSlider)
+# vm.Filter.add_type("selector", TooltipNonCrossRangeSlider)
 
 
 # 2. Create new custom component
-class Jumbotron(vm.VizroBaseModel):
-    """New custom component `Jumbotron`."""
-
-    type: Literal["jumbotron"] = "jumbotron"
-    title: str
-    subtitle: str
-    text: str
-
-    def build(self):
-        """Build the new component based on Dash components."""
-        return html.Div([html.H2(self.title), html.H3(self.subtitle), html.P(self.text)])
-
-
-vm.Page.add_type("components", Jumbotron)
-
-custom_components = vm.Page(
-    title="Custom Components",
-    components=[
-        Jumbotron(
-            title="Custom component based on new creation",
-            subtitle="This is a subtitle to summarize some content.",
-            text="This is the main body of text of the Jumbotron.",
-        ),
-        vm.Graph(
-            id="for_custom_chart",
-            figure=px.scatter(
-                iris,
-                title="Iris Dataset",
-                x="sepal_length",
-                y="petal_width",
-                color="sepal_width",
-            ),
-        ),
-    ],
-    controls=[
-        vm.Filter(
-            column="sepal_length",
-            targets=["for_custom_chart"],
-            selector=TooltipNonCrossRangeSlider(title="Custom component based on extension"),
-        )
-    ],
-)
+# class Jumbotron(vm.VizroBaseModel):
+#     """New custom component `Jumbotron`."""
+
+#     type: Literal["jumbotron"] = "jumbotron"
+#     title: str
+#     subtitle: str
+#     text: str
+
+#     def build(self):
+#         """Build the new component based on Dash components."""
+#         return html.Div([html.H2(self.title), html.H3(self.subtitle), html.P(self.text)])
+
+
+# vm.Page.add_type("components", Jumbotron)
+
+# custom_components = vm.Page(
+#     title="Custom Components",
+#     components=[
+#         Jumbotron(
+#             title="Custom component based on new creation",
+#             subtitle="This is a subtitle to summarize some content.",
+#             text="This is the main body of text of the Jumbotron.",
+#         ),
+#         vm.Graph(
+#             id="for_custom_chart",
+#             figure=px.scatter(
+#                 iris,
+#                 title="Iris Dataset",
+#                 x="sepal_length",
+#                 y="petal_width",
+#                 color="sepal_width",
+#             ),
+#         ),
+#     ],
+#     controls=[
+#         vm.Filter(
+#             column="sepal_length",
+#             targets=["for_custom_chart"],
+#             selector=TooltipNonCrossRangeSlider(title="Custom component based on extension"),
+#         )
+#     ],
+# )
 
 
 # CUSTOM ACTIONS ---------------------------------------------------------------
@@ -778,7 +778,7 @@ def multiple_cards(data_frame: pd.DataFrame, n_rows: Optional[int] = 1) -> html.
 components = [graphs, ag_grid, table, cards, figure, button, containers, tabs]
 controls = [filters, parameters, selectors]
 actions = [export_data_action, chart_interaction]
-extensions = [custom_charts, custom_tables, custom_components, custom_actions, custom_figures]
+extensions = [custom_charts, custom_tables, custom_actions, custom_figures]  # custom_components
 
 dashboard = vm.Dashboard(
     title="Vizro Features",
@@ -805,7 +805,7 @@ def multiple_cards(data_frame: pd.DataFrame, n_rows: Optional[int] = 1) -> html.
                         "Extensions": [
                             "Custom Charts",
                             "Custom Tables",
-                            "Custom Components",
+                            # "Custom Components",
                             "Custom Actions",
                             "Custom Figures",
                         ],

vizro-core/examples/scratch_dev/app.py

@@ -1,69 +1,32 @@
 from typing import List, Literal
 
-from dash import html
-
 import vizro.models as vm
 import vizro.plotly.express as px
+from dash import html
 from vizro import Vizro
-from vizro.models.types import ControlType
-
-df_gapminder = px.data.gapminder()
-
-
-class ControlGroup(vm.VizroBaseModel):
-    """Container to group controls."""
+from vizro._themes._color_values import COLORS
+from vizro.actions import export_data
 
-    type: Literal["control_group"] = "control_group"
-    title: str
-    controls: List[ControlType] = []
+df = px.data.iris()
 
-    def build(self):
-        return html.Div(
-            [html.H4(self.title), html.Hr()] + [control.build() for control in self.controls],
-        )
 
-
-vm.Page.add_type("controls", ControlGroup)
-
-page1 = vm.Page(
-    title="Relationship Analysis",
+page = vm.Page(
+    title="Page 1",
     components=[
-        vm.Graph(id="scatter", figure=px.scatter(df_gapminder, x="gdpPercap", y="lifeExp", size="pop")),
-    ],
-    controls=[
-        ControlGroup(
-            title="Group A",
-            controls=[
-                vm.Parameter(
-                    id="this",
-                    targets=["scatter.x"],
-                    selector=vm.Dropdown(
-                        options=["lifeExp", "gdpPercap", "pop"], multi=False, value="gdpPercap", title="Choose x-axis"
-                    ),
-                ),
-                vm.Parameter(
-                    targets=["scatter.y"],
-                    selector=vm.Dropdown(
-                        options=["lifeExp", "gdpPercap", "pop"], multi=False, value="lifeExp", title="Choose y-axis"
-                    ),
-                ),
-            ],
-        ),
-        ControlGroup(
-            title="Group B",
-            controls=[
-                vm.Parameter(
-                    targets=["scatter.size"],
-                    selector=vm.Dropdown(
-                        options=["lifeExp", "gdpPercap", "pop"], multi=False, value="pop", title="Choose bubble size"
-                    ),
-                )
+        vm.Graph(figure=px.bar(df, x="sepal_width", y="sepal_length")),
+        vm.Button(
+            text="Export data",
+            actions=[
+                vm.Action(function=export_data()),
+                vm.Action(function=export_data()),
             ],
         ),
     ],
 )
 
-dashboard = vm.Dashboard(pages=[page1])
+dashboard = vm.Dashboard(pages=[page])
 
 if __name__ == "__main__":
     Vizro().build(dashboard).run()
+    # print(dashboard._to_python())
+    # print(dashboard.model_dump(context={"add_name": True}))

vizro-core/examples/visual-vocabulary/custom_components.py

@@ -1,17 +1,12 @@
 """Contains custom components used inside the dashboard."""
 
 from typing import Literal
+from urllib.parse import quote
 
 import dash_bootstrap_components as dbc
 import vizro.models as vm
 from dash import dcc, html
-
-try:
-    from pydantic.v1 import Field
-except ImportError:  # pragma: no cov
-    from pydantic import Field
-
-from urllib.parse import quote
+from pydantic import Field
 
 
 class CodeClipboard(vm.VizroBaseModel):

vizro-core/pyproject.toml

@@ -69,7 +69,7 @@ addopts = [
   "--import-mode=importlib"
 ]
 filterwarnings = [
-  "error",
+  # "error",
   # Ignore until pandas is made compatible with Python 3.12:
   "ignore:.*utcfromtimestamp:DeprecationWarning",
   # Ignore until pandas 3 is released:

vizro-core/src/vizro/models/__init__.py

@@ -13,27 +13,13 @@
 from ._layout import Layout
 from ._page import Page
 
-Tabs.update_forward_refs(Container=Container)
-Container.update_forward_refs(
-    AgGrid=AgGrid, Button=Button, Card=Card, Figure=Figure, Graph=Graph, Layout=Layout, Table=Table, Tabs=Tabs
-)
-Page.update_forward_refs(
-    Accordion=Accordion,
-    AgGrid=AgGrid,
-    Button=Button,
-    Card=Card,
-    Container=Container,
-    Figure=Figure,
-    Filter=Filter,
-    Graph=Graph,
-    Parameter=Parameter,
-    Table=Table,
-    Tabs=Tabs,
-)
-Navigation.update_forward_refs(Accordion=Accordion, NavBar=NavBar, NavLink=NavLink)
-Dashboard.update_forward_refs(Page=Page, Navigation=Navigation)
-NavBar.update_forward_refs(NavLink=NavLink)
-NavLink.update_forward_refs(Accordion=Accordion)
+Tabs.model_rebuild()
+Container.model_rebuild()
+Page.model_rebuild()
+Navigation.model_rebuild()
+Dashboard.model_rebuild()
+NavBar.model_rebuild()
+NavLink.model_rebuild()
 
 __all__ = [
     "Accordion",