[Feat] Model Manager (MM) Attempt 3

vizro-core/examples/dev/app.py

@@ -995,7 +995,7 @@ def my_custom_table(data_frame=None, chosen_columns: Optional[list[str]] = None)
 class TooltipNonCrossRangeSlider(vm.RangeSlider):
     """Custom numeric multi-selector `TooltipNonCrossRangeSlider`."""
 
-    type: Literal["other_range_slider"] = "other_range_slider"
+    type: Literal["custom_component"] = "custom_component"
 
     def build(self):
         """Extend existing component by calling the super build and update properties."""
@@ -1005,14 +1005,14 @@ def build(self):
         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"
+    type: Literal["custom_component"] = "custom_component"
     title: str
     subtitle: str
     text: str
@@ -1022,7 +1022,7 @@ def build(self):
         return html.Div([html.H2(self.title), html.H3(self.subtitle), html.P(self.text)])
 
 
-vm.Page.add_type("components", Jumbotron)
+# vm.Page.add_type("components", Jumbotron)
 
 custom_components = vm.Page(
     title="Custom Components",
@@ -1093,53 +1093,54 @@ def multiple_cards(data_frame: pd.DataFrame, n_rows: Optional[int] = 1) -> html.
 
 
 # DASHBOARD -------------------------------------------------------------------
-components = [graphs, ag_grid, table, cards, figure, button, containers, tabs, tooltip]
+components = [tabs]  # graphs, ag_grid, table, cards, figure, button, containers, tooltip
 controls = [filters, parameters, selectors, controls_in_containers]
 actions = [export_data_action]
 layout = [grid_layout, flex_layout]
 extensions = [custom_charts, custom_tables, custom_figures, custom_components]
 
 dashboard = vm.Dashboard(
     title="Vizro Features",
-    pages=[home, *components, *controls, *actions, *layout, *extensions],
-    navigation=vm.Navigation(
-        nav_selector=vm.NavBar(
-            items=[
-                vm.NavLink(label="Homepage", pages=["Homepage"], icon="Home"),
-                vm.NavLink(
-                    label="Features",
-                    pages={
-                        "Components": [
-                            "Graphs",
-                            "AG Grid",
-                            "Table",
-                            "Cards",
-                            "Figure",
-                            "Button",
-                            "Containers",
-                            "Tabs",
-                            "Tooltip",
-                        ],
-                        "Controls": ["Filters", "Parameters", "Selectors", "Controls in containers"],
-                        "Layout": ["Grid layout", "flex-layout"],
-                        "Actions": ["Export data"],
-                        "Extensions": [
-                            "Custom Charts",
-                            "Custom Tables",
-                            "Custom Components",
-                            "Custom Figures",
-                        ],
-                    },
-                    icon="Library Add",
-                ),
-            ]
-        )
-    ),
+    pages=[*components],  # home,  *controls, *actions, *layout, *extensions
+    # navigation=vm.Navigation(
+    #     nav_selector=vm.NavBar(
+    #         items=[
+    #             vm.NavLink(label="Homepage", pages=["Homepage"], icon="Home"),
+    #             vm.NavLink(
+    #                 label="Features",
+    #                 pages={
+    #                     "Components": [
+    #                         "Graphs",
+    #                         "AG Grid",
+    #                         "Table",
+    #                         "Cards",
+    #                         "Figure",
+    #                         "Button",
+    #                         "Containers",
+    #                         "Tabs",
+    #                         "Tooltip",
+    #                     ],
+    #                     "Controls": ["Filters", "Parameters", "Selectors", "Controls in containers"],
+    #                     "Layout": ["Grid layout", "flex-layout"],
+    #                     "Actions": ["Export data"],
+    #                     "Extensions": [
+    #                         "Custom Charts",
+    #                         "Custom Tables",
+    #                         "Custom Components",
+    #                         "Custom Figures",
+    #                     ],
+    #                 },
+    #                 icon="Library Add",
+    #             ),
+    #         ]
+    #     )
+    # ),
 )
 
 
 if __name__ == "__main__":
     # Move app definition outside of __main__ block for the HF demo to work
+    dashboard = vm.Dashboard.model_validate(dashboard, context={"build_tree": True})
     app = Vizro().build(dashboard)
     app.dash.layout.children.append(
         dbc.NavLink(

vizro-core/examples/scratch_dev/app.py

@@ -1,128 +1,131 @@
 """Dev app to try things out."""
 
-import vizro.plotly.express as px
+from typing import Literal
+
 import vizro.models as vm
+import vizro.plotly.express as px
+from dash import html
 from vizro import Vizro
-import vizro.actions as va
-from vizro.figures import kpi_card, kpi_card_reference
-import pandas as pd
-import dash_bootstrap_components as dbc
+from vizro.managers import data_manager
+
+df = px.data.iris()
+data_manager["iris"] = df
+
+
+# 2. Create new custom component
+class Jumbotron(vm.VizroBaseModel):
+    """New custom component `Jumbotron`."""
+
+    type: Literal["custom_component"] = "custom_component"
+    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)])
 
-df_kpi = pd.DataFrame({"Actual": [100, 200, 700], "Reference": [100, 300, 500], "Category": ["A", "B", "C"]})
 
-gapminder = px.data.gapminder()
+class CustomCard(vm.VizroBaseModel):
+    """New custom component `Card`."""
+
+    type: Literal["custom_component"] = "custom_component"
+    title: str
+    description: str
+
+    def build(self):
+        """Build the new component based on Dash components."""
+        return html.Div(
+            [
+                html.Div(
+                    [
+                        html.H4(self.title, style={"margin": "0 0 10px 0"}),
+                        html.P(self.description, style={"margin": "0"}),
+                    ],
+                    style={
+                        "border": "1px solid #ddd",
+                        "border-radius": "8px",
+                        "padding": "16px",
+                        "background-color": "#f9f9f9",
+                    },
+                )
+            ]
+        )
+
 
 page = vm.Page(
-    title="Test page",
+    title="My first dashboard",
     components=[
-        vm.Card(
-            text="Lorem Ipsum is simply dummy text. ",
-            header="### This is card header",
-            footer="##### This is card footer",
-            description="Tooltip",
-        ),
-        vm.Card(
-            header="## This is card header",
-            text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. "
-            "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
-            description="Tooltip",
-        ),
-        vm.Card(
-            text="Card with text and header and footer",
-            header="#### This is card header",
-            footer="##### This is card footer",
-            description="Tooltip",
-        ),
-        vm.Card(
-            text="### Card with just text title",
-            description="Tooltip",
+        vm.Graph(figure=px.scatter(df, x="sepal_length", y="petal_width", color="species")),
+        vm.Graph(figure=px.histogram(df, x="sepal_width", color="species")),
+        Jumbotron(
+            title="Custom component",
+            subtitle="This is a subtitle",
+            text="This is the main body of text of the Jumbotron.",
         ),
-        vm.Card(
-            text="Card without header",
-            footer="This is card footer",
-            description="Tooltip",
+        Jumbotron(
+            title="Custom component 2",
+            subtitle="This is a subtitle",
+            text="This is the main body of text of the Jumbotron.",
         ),
-        vm.Card(
-            text="Regular card with only text: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
-            description="Tooltip",
-        ),
-        vm.Graph(figure=px.bar(gapminder, x="country", y="pop", color="continent")),
-        vm.Card(
-            text="Card with action: Filter Europe",
-            actions=va.set_control(control="filter-id-1", value="Europe"),
-        ),
-        vm.Card(
-            text="Navigate to page",
-            href="/dummy-page",
+        CustomCard(
+            title="Custom card",
+            description="This is a description of the custom card.",
         ),
     ],
-    controls=[vm.Filter(id="filter-id-1", column="continent", selector=vm.RadioItems())],
-    layout=vm.Grid(
-        grid=[
-            [0, 1, 2, 3],
-            [4, 5, 7, 8],
-            [6, 6, -1, -1],
-            [6, 6, -1, -1],
-        ]
-    ),
+    controls=[
+        vm.Filter(column="species"),
+    ],
 )
 
-page_2 = vm.Page(title="Dummy page", components=[vm.Card(text="This is plain old card.")])
+dashboard = vm.Dashboard(pages=[page])
 
-page_3 = vm.Page(
-    title="KPI indicator cards",
-    components=[
-        vm.Figure(
-            figure=kpi_card_reference(
-                data_frame=df_kpi,
-                value_column="Actual",
-                reference_column="Reference",
-                title="KPI reference (pos)",
-            )
-        ),
-        vm.Figure(
-            figure=kpi_card_reference(
-                data_frame=df_kpi,
-                value_column="Actual",
-                reference_column="Reference",
-                title="KPI reference with icon",
-                icon="Shopping Cart",
-            )
-        ),
-        vm.Figure(
-            figure=kpi_card_reference(
-                data_frame=df_kpi,
-                value_column="Actual",
-                reference_column="Reference",
-                title="KPI reference (reverse color)",
-                reverse_color=True,
-            )
-        ),
-        vm.Figure(
-            figure=kpi_card(
-                data_frame=df_kpi,
-                value_column="Actual",
-                title="KPI with icon",
-                icon="Shopping Cart",
-            )
-        ),
-        vm.Figure(
-            figure=kpi_card(
-                data_frame=df_kpi,
-                value_column="Actual",
-                title="KPI with formatting",
-                value_format="${value:.2f}",
-            )
-        ),
-        vm.Figure(
-            figure=kpi_card(data_frame=df_kpi, value_column="Actual", title="KPI with value"),
-        ),
-    ],
-    layout=vm.Grid(grid=[[0, 1, 2], [3, 4, 5]]),
-)
+# Same configuration as JSON
+# dashboard_config = {
+#     "type": "dashboard",
+#     "pages": [
+#         {
+#             "type": "page",
+#             "title": "My first dashboard",
+#             "components": [
+#                 {
+#                     "type": "graph",
+#                     "figure": {
+#                         "_target_": "scatter",
+#                         "data_frame": "iris",
+#                         "x": "sepal_length",
+#                         "y": "petal_width",
+#                         "color": "species",
+#                     },
+#                 },
+#                 {
+#                     "type": "graph",
+#                     "figure": {
+#                         "_target_": "histogram",
+#                         "data_frame": "iris",
+#                         "x": "sepal_width",
+#                         "color": "species",
+#                     },
+#                 },
+#             ],
+#             "controls": [
+#                 {
+#                     "type": "filter",
+#                     "column": "species",
+#                 }
+#             ],
+#         }
+#     ],
+# }
 
-dashboard = vm.Dashboard(pages=[page, page_2, page_3])
+# dashboard = vm.Dashboard.model_validate(dashboard_config)
 
 if __name__ == "__main__":
-    Vizro(external_stylesheets=[dbc.themes.BOOTSTRAP]).build(dashboard).run()
+    dashboard = vm.Dashboard.model_validate(dashboard, context={"build_tree": True})
+    app = Vizro().build(dashboard)
+    assert all(
+        dashboard._tree[model.id].data is model
+        for model in [dashboard] + dashboard.pages + [comp for page in dashboard.pages for comp in page.components]
+    )
+    dashboard._tree.print(repr="{node.kind} -> {node.data.type} (id={node.data.id})")
+    app.run()

vizro-core/pyproject.toml

@@ -30,7 +30,8 @@ dependencies = [
   "black",
   "autoflake",
   "packaging",
-  "python-box"
+  "python-box",
+  "nutree"
 ]
 description = "Vizro is a low-code framework for building high-quality data visualization apps."
 dynamic = ["version"]

vizro-core/src/vizro/managers/_model_manager.py

@@ -34,12 +34,12 @@ def __init__(self):
     # TODO: Consider storing "page_id" or "parent_model_id" and make searching helper methods easier?
     @_state_modifier
     def __setitem__(self, model_id: ModelID, model: Model):
-        if model_id in self.__models:
-            raise DuplicateIDError(
-                f"Model with id={model_id} already exists. Models must have a unique id across the whole dashboard. "
-                f"If you are working from a Jupyter Notebook, please either restart the kernel, or "
-                f"use 'from vizro import Vizro; Vizro._reset()`."
-            )
+        # if model_id in self.__models:
+        #     raise DuplicateIDError(
+        #         f"Model with id={model_id} already exists. Models must have a unique id across the whole dashboard. "
+        #         f"If you are working from a Jupyter Notebook, please either restart the kernel, or "
+        #         f"use 'from vizro import Vizro; Vizro._reset()`."
+        #     )
         self.__models[model_id] = model
 
     @_state_modifier