[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: list[str] | None = 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,15 +1093,15 @@ def multiple_cards(data_frame: pd.DataFrame, n_rows: int | None = 1) -> html.Div
 
 
 # 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],
+    pages=[home, *controls, *actions, *layout, *extensions, *components],
     navigation=vm.Navigation(
         nav_selector=vm.NavBar(
             items=[
@@ -1140,6 +1140,7 @@ def multiple_cards(data_frame: pd.DataFrame, n_rows: int | None = 1) -> html.Div
 
 if __name__ == "__main__":
     # Move app definition outside of __main__ block for the HF demo to work
+    print("================ STARTING TREE BUILDING ==================")
     app = Vizro().build(dashboard)
     app.dash.layout.children.append(
         dbc.NavLink(
@@ -1149,4 +1150,4 @@ def multiple_cards(data_frame: pd.DataFrame, n_rows: int | None = 1) -> html.Div
             class_name="anchor-container",
         )
     )
-    app.run()
+    app.run(debug=False)

vizro-core/examples/dev/notebook/example.ipynb

@@ -0,0 +1,158 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "2a4a1132",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import vizro.models as vm\n",
+    "from vizro import Vizro"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "125bf3e0",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "card = vm.Card(\n",
+    "    id=\"card_1\",\n",
+    "    text=\"Card 1\",\n",
+    ")\n",
+    "\n",
+    "card2 = vm.Card(\n",
+    "    id=\"card_2\",\n",
+    "    text=\"Card 2\",\n",
+    ")\n",
+    "\n",
+    "page = vm.Page(\n",
+    "    # id=\"page_1\",\n",
+    "    title=\"Page 1\",\n",
+    "    components=[card, card2],\n",
+    ")\n",
+    "\n",
+    "dashboard = vm.Dashboard(\n",
+    "    id=\"dashboard_1\",\n",
+    "    title=\"Dashboard 1\",\n",
+    "    pages=[page],\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "b3c5f8eb",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from dash._callback_context import context_value\n",
+    "\n",
+    "context_value.set({})\n",
+    "\n",
+    "dashboard = vm.Dashboard.model_validate(dashboard, context={\"build_tree\": True})\n",
+    "app = Vizro().build(dashboard)\n",
+    "\n",
+    "# TODO: Make this work!\n",
+    "app.run(debug=False)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "115a8176",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "dashboard._tree.print(repr=\"{node.kind} -> {node.data.type} (id={node.data.id})\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "a13a7ee5",
+   "metadata": {},
+   "source": [
+    "It seems that a second dashboard is not yet possible, due to path collision"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "5835c587",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "card = vm.Card(\n",
+    "    id=\"card_1\",\n",
+    "    text=\"Card 1 asdf\",\n",
+    ")\n",
+    "\n",
+    "card2 = vm.Card(\n",
+    "    id=\"card_2\",\n",
+    "    text=\"Card 2 asdf\",\n",
+    ")\n",
+    "\n",
+    "page = vm.Page(\n",
+    "    # id=\"page_1\",\n",
+    "    title=\"Page 1 qwer\",\n",
+    "    components=[card, card2],\n",
+    ")\n",
+    "\n",
+    "dashboard = vm.Dashboard(\n",
+    "    id=\"dashboard_1\",\n",
+    "    title=\"Dashboard 1 asdf\",\n",
+    "    pages=[page],\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "3e47f325",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from dash._callback_context import context_value\n",
+    "\n",
+    "context_value.set({})\n",
+    "\n",
+    "dashboard = vm.Dashboard.model_validate(dashboard, context={\"build_tree\": True})\n",
+    "app = Vizro().build(dashboard)\n",
+    "\n",
+    "# TODO: Make this work!\n",
+    "app.run(debug=False, port=8055)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "bb9f29f9",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "vizro",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.13.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}