From e42d9e7b8cb9536b63abc095f69a92e6ea63ab8a Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Thu, 18 Jul 2024 15:12:24 +0200
Subject: [PATCH 01/14] Add validation for components

---
 vizro-core/examples/scratch_dev/app.py        | 70 +++++--------------
 .../src/vizro/models/_components/_form.py     |  4 +-
 .../src/vizro/models/_components/container.py |  4 +-
 vizro-core/src/vizro/models/_models_utils.py  | 20 ++++++
 vizro-core/src/vizro/models/_page.py          |  4 +-
 5 files changed, 43 insertions(+), 59 deletions(-)

diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py
index 49775d2be..3818b7c95 100644
--- a/vizro-core/examples/scratch_dev/app.py
+++ b/vizro-core/examples/scratch_dev/app.py
@@ -1,67 +1,31 @@
 """Example app to show all features of Vizro."""
 
-# check out https://github.com/mckinsey/vizro for more info about Vizro
-# and checkout https://vizro.readthedocs.io/en/stable/ for documentation
-
+import pandas as pd
 import vizro.models as vm
-import vizro.plotly.express as px
 from vizro import Vizro
+from vizro.figures import kpi_card
+
+# data from the demo app
+df_kpi = pd.DataFrame(
+    {
+        "Actual": [100, 200, 700],
+        "Reference": [100, 300, 500],
+        "Category": ["A", "B", "C"],
+    }
+)
 
-df = px.data.iris()
 
-page = vm.Page(
-    title="Vizro on PyCafe",
-    layout=vm.Layout(
-        grid=[[0, 0, 0, 1, 2, 3], [4, 4, 4, 4, 4, 4], [4, 4, 4, 4, 4, 4], [5, 5, 5, 5, 5, 5], [5, 5, 5, 5, 5, 5]],
-        row_min_height="175px",
-    ),
+home = vm.Page(
+    title="value_error.discriminated_union.missing_discriminator",
     components=[
-        vm.Card(
-            text="""
-        ### What is Vizro?
-
-        Vizro is a toolkit for creating modular data visualization applications.
-        """
-        ),
-        vm.Card(
-            text="""
-                ### Github
-
-                Checkout Vizro's github page.
-            """,
-            href="https://github.com/mckinsey/vizro",
-        ),
-        vm.Card(
-            text="""
-                ### Docs
-
-                Visit the documentation for codes examples, tutorials and API reference.
-            """,
-            href="https://vizro.readthedocs.io/",
-        ),
-        vm.Card(
-            text="""
-                ### Nav Link
-
-                Click this for page 2.
-            """,
-            href="/page2",
-        ),
-        vm.Graph(id="scatter_chart", figure=px.scatter(df, x="sepal_length", y="petal_width", color="species")),
-        vm.Graph(id="hist_chart", figure=px.histogram(df, x="sepal_width", color="species")),
-    ],
-    controls=[
-        vm.Filter(column="species", selector=vm.Dropdown(value=["ALL"])),
-        vm.Filter(column="petal_length"),
-        vm.Filter(column="sepal_width"),
+        # vm.Card(text="I am a Card"),
+        kpi_card(data_frame=df_kpi, value_column="Actual", title="KPI with value"),
     ],
 )
 
-page2 = vm.Page(
-    title="Page2", components=[vm.Graph(id="hist_chart2", figure=px.histogram(df, x="sepal_width", color="species"))]
-)
 
-dashboard = vm.Dashboard(pages=[page, page2])
+dashboard = vm.Dashboard(pages=[home])
+
 
 if __name__ == "__main__":
     Vizro().build(dashboard).run()
diff --git a/vizro-core/src/vizro/models/_components/_form.py b/vizro-core/src/vizro/models/_components/_form.py
index 248f66f80..63cb49136 100644
--- a/vizro-core/src/vizro/models/_components/_form.py
+++ b/vizro-core/src/vizro/models/_components/_form.py
@@ -12,7 +12,7 @@
 from vizro.models import VizroBaseModel
 from vizro.models._components.form import Checklist, Dropdown, RadioItems, RangeSlider, Slider
 from vizro.models._layout import set_layout
-from vizro.models._models_utils import _log_call, _validate_min_length
+from vizro.models._models_utils import _log_call, validate_components
 from vizro.models.types import _FormComponentType
 
 if TYPE_CHECKING:
@@ -34,7 +34,7 @@ class Form(VizroBaseModel):
     layout: Layout = None  # type: ignore[assignment]
 
     # Re-used validators
-    _validate_components = validator("components", allow_reuse=True, always=True)(_validate_min_length)
+    _validate_components = validator("components", allow_reuse=True, always=True, pre=True)(validate_components)
     _validate_layout = validator("layout", allow_reuse=True, always=True)(set_layout)
 
     @_log_call
diff --git a/vizro-core/src/vizro/models/_components/container.py b/vizro-core/src/vizro/models/_components/container.py
index d42d62d8d..fee0ea3f0 100644
--- a/vizro-core/src/vizro/models/_components/container.py
+++ b/vizro-core/src/vizro/models/_components/container.py
@@ -11,7 +11,7 @@
 
 from vizro.models import VizroBaseModel
 from vizro.models._layout import set_layout
-from vizro.models._models_utils import _log_call, _validate_min_length
+from vizro.models._models_utils import _log_call, validate_components
 from vizro.models.types import ComponentType
 
 if TYPE_CHECKING:
@@ -36,7 +36,7 @@ class Container(VizroBaseModel):
     layout: Layout = None  # type: ignore[assignment]
 
     # Re-used validators
-    _validate_components = validator("components", allow_reuse=True, always=True)(_validate_min_length)
+    _validate_components = validator("components", allow_reuse=True, always=True, pre=True)(validate_components)
     _validate_layout = validator("layout", allow_reuse=True, always=True)(set_layout)
 
     @_log_call
diff --git a/vizro-core/src/vizro/models/_models_utils.py b/vizro-core/src/vizro/models/_models_utils.py
index 842800d70..f3fd34360 100644
--- a/vizro-core/src/vizro/models/_models_utils.py
+++ b/vizro-core/src/vizro/models/_models_utils.py
@@ -1,6 +1,8 @@
 import logging
 from functools import wraps
 
+from vizro.models.types import CapturedCallable
+
 logger = logging.getLogger(__name__)
 
 
@@ -15,8 +17,26 @@ def _wrapper(self, *args, **kwargs):
     return _wrapper
 
 
+
 # Validators for reuse
 def _validate_min_length(cls, field):
     if not field:
         raise ValueError("Ensure this value has at least 1 item.")
+
+def validate_components(cls, field):
+    _validate_min_length(cls, field)
+
+    # Validate CapturedCallable has been directly provided.
+    mode_to_error = {
+        "figure": "A callable of mode `figure` has been provided. Please wrap it inside the `vm.Figure(figure=...)`.",
+        "table": "A callable of mode `table` has been provided. Please wrap it inside the `vm.Table(figure=...)`.",
+        "ag_grid": "A callable of mode `ag_grid` has been provided. Please wrap it inside the `vm.AgGrid(figure=...)`.",
+        "graph": "A callable of mode `graph` has been provided. Please wrap it inside the `vm.AgGrid(figure=...)`.",
+    }
+
+    for component in field:
+        if isinstance(component, CapturedCallable):
+            error_message = mode_to_error.get(f"{component._mode}", None)
+            if error_message:
+                raise ValueError(error_message)
     return field
diff --git a/vizro-core/src/vizro/models/_page.py b/vizro-core/src/vizro/models/_page.py
index 558d672c7..067399786 100644
--- a/vizro-core/src/vizro/models/_page.py
+++ b/vizro-core/src/vizro/models/_page.py
@@ -16,7 +16,7 @@
 from vizro.models import Action, Layout, VizroBaseModel
 from vizro.models._action._actions_chain import ActionsChain, Trigger
 from vizro.models._layout import set_layout
-from vizro.models._models_utils import _log_call, _validate_min_length
+from vizro.models._models_utils import _log_call, validate_components
 
 from .types import ComponentType, ControlType
 
@@ -52,7 +52,7 @@ class Page(VizroBaseModel):
     actions: List[ActionsChain] = []
 
     # Re-used validators
-    _validate_components = validator("components", allow_reuse=True, always=True)(_validate_min_length)
+    _validate_components = validator("components", allow_reuse=True, always=True, pre=True)(validate_components)
     _validate_layout = validator("layout", allow_reuse=True, always=True)(set_layout)
 
     @root_validator(pre=True)

From 9f4481a48926d7029a32fe3230d9eb5ede06a562 Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Thu, 18 Jul 2024 15:28:16 +0200
Subject: [PATCH 02/14] Fix unit tests

---
 ...ong_li_nguyen_validation_error_captured.md | 48 +++++++++++++++++++
 vizro-core/examples/scratch_dev/app.py        |  5 +-
 .../src/vizro/models/_components/_form.py     |  5 +-
 .../src/vizro/models/_components/container.py |  5 +-
 .../src/vizro/models/_components/tabs.py      |  4 +-
 vizro-core/src/vizro/models/_models_utils.py  | 10 ++--
 vizro-core/src/vizro/models/_page.py          |  5 +-
 .../unit/vizro/models/test_models_utils.py    |  9 +++-
 8 files changed, 73 insertions(+), 18 deletions(-)
 create mode 100644 vizro-core/changelog.d/20240718_151233_huong_li_nguyen_validation_error_captured.md

diff --git a/vizro-core/changelog.d/20240718_151233_huong_li_nguyen_validation_error_captured.md b/vizro-core/changelog.d/20240718_151233_huong_li_nguyen_validation_error_captured.md
new file mode 100644
index 000000000..a37ae04d3
--- /dev/null
+++ b/vizro-core/changelog.d/20240718_151233_huong_li_nguyen_validation_error_captured.md
@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+### Fixed
+
+- Improve validation error message if `CapturedCallable` is directly provided. ([#587](https://github.com/mckinsey/vizro/pull/587))
+
+
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py
index 3818b7c95..6790994e5 100644
--- a/vizro-core/examples/scratch_dev/app.py
+++ b/vizro-core/examples/scratch_dev/app.py
@@ -16,10 +16,9 @@
 
 
 home = vm.Page(
-    title="value_error.discriminated_union.missing_discriminator",
+    title="Page Title",
     components=[
-        # vm.Card(text="I am a Card"),
-        kpi_card(data_frame=df_kpi, value_column="Actual", title="KPI with value"),
+        vm.Figure(figure=kpi_card(data_frame=df_kpi, value_column="Actual", title="KPI with value")),
     ],
 )
 
diff --git a/vizro-core/src/vizro/models/_components/_form.py b/vizro-core/src/vizro/models/_components/_form.py
index 63cb49136..90436b60d 100644
--- a/vizro-core/src/vizro/models/_components/_form.py
+++ b/vizro-core/src/vizro/models/_components/_form.py
@@ -12,7 +12,7 @@
 from vizro.models import VizroBaseModel
 from vizro.models._components.form import Checklist, Dropdown, RadioItems, RangeSlider, Slider
 from vizro.models._layout import set_layout
-from vizro.models._models_utils import _log_call, validate_components
+from vizro.models._models_utils import _log_call, validate_components_type, validate_min_length
 from vizro.models.types import _FormComponentType
 
 if TYPE_CHECKING:
@@ -34,7 +34,8 @@ class Form(VizroBaseModel):
     layout: Layout = None  # type: ignore[assignment]
 
     # Re-used validators
-    _validate_components = validator("components", allow_reuse=True, always=True, pre=True)(validate_components)
+    _validate_components_type = validator("components", allow_reuse=True, always=True, pre=True)(validate_components_type)
+    _validate_components_length = validator("components", allow_reuse=True, always=True)(validate_min_length)
     _validate_layout = validator("layout", allow_reuse=True, always=True)(set_layout)
 
     @_log_call
diff --git a/vizro-core/src/vizro/models/_components/container.py b/vizro-core/src/vizro/models/_components/container.py
index fee0ea3f0..7cf1c0de1 100644
--- a/vizro-core/src/vizro/models/_components/container.py
+++ b/vizro-core/src/vizro/models/_components/container.py
@@ -11,7 +11,7 @@
 
 from vizro.models import VizroBaseModel
 from vizro.models._layout import set_layout
-from vizro.models._models_utils import _log_call, validate_components
+from vizro.models._models_utils import _log_call, validate_components_type, validate_min_length
 from vizro.models.types import ComponentType
 
 if TYPE_CHECKING:
@@ -36,7 +36,8 @@ class Container(VizroBaseModel):
     layout: Layout = None  # type: ignore[assignment]
 
     # Re-used validators
-    _validate_components = validator("components", allow_reuse=True, always=True, pre=True)(validate_components)
+    _validate_components_type = validator("components", allow_reuse=True, always=True, pre=True)(validate_components_type)
+    _validate_components_length = validator("components", allow_reuse=True, always=True)(validate_min_length)
     _validate_layout = validator("layout", allow_reuse=True, always=True)(set_layout)
 
     @_log_call
diff --git a/vizro-core/src/vizro/models/_components/tabs.py b/vizro-core/src/vizro/models/_components/tabs.py
index e3c3a33f5..763e559cc 100644
--- a/vizro-core/src/vizro/models/_components/tabs.py
+++ b/vizro-core/src/vizro/models/_components/tabs.py
@@ -11,7 +11,7 @@
     from pydantic import validator
 
 from vizro.models import VizroBaseModel
-from vizro.models._models_utils import _log_call, _validate_min_length
+from vizro.models._models_utils import _log_call, validate_min_length
 
 if TYPE_CHECKING:
     from vizro.models._components import Container
@@ -29,7 +29,7 @@ class Tabs(VizroBaseModel):
     type: Literal["tabs"] = "tabs"
     tabs: List[Container]
 
-    _validate_tabs = validator("tabs", allow_reuse=True, always=True)(_validate_min_length)
+    _validate_tabs = validator("tabs", allow_reuse=True, always=True)(validate_min_length)
 
     @_log_call
     def build(self):
diff --git a/vizro-core/src/vizro/models/_models_utils.py b/vizro-core/src/vizro/models/_models_utils.py
index f3fd34360..ed299a2e6 100644
--- a/vizro-core/src/vizro/models/_models_utils.py
+++ b/vizro-core/src/vizro/models/_models_utils.py
@@ -17,21 +17,19 @@ def _wrapper(self, *args, **kwargs):
     return _wrapper
 
 
-
 # Validators for reuse
-def _validate_min_length(cls, field):
+def validate_min_length(cls, field):
     if not field:
         raise ValueError("Ensure this value has at least 1 item.")
+    return field
 
-def validate_components(cls, field):
-    _validate_min_length(cls, field)
 
-    # Validate CapturedCallable has been directly provided.
+def validate_components_type(cls, field):
     mode_to_error = {
         "figure": "A callable of mode `figure` has been provided. Please wrap it inside the `vm.Figure(figure=...)`.",
         "table": "A callable of mode `table` has been provided. Please wrap it inside the `vm.Table(figure=...)`.",
         "ag_grid": "A callable of mode `ag_grid` has been provided. Please wrap it inside the `vm.AgGrid(figure=...)`.",
-        "graph": "A callable of mode `graph` has been provided. Please wrap it inside the `vm.AgGrid(figure=...)`.",
+        "graph": "A callable of mode `graph` has been provided. Please wrap it inside the `vm.Graph(figure=...)`.",
     }
 
     for component in field:
diff --git a/vizro-core/src/vizro/models/_page.py b/vizro-core/src/vizro/models/_page.py
index 067399786..f5d5fc3d4 100644
--- a/vizro-core/src/vizro/models/_page.py
+++ b/vizro-core/src/vizro/models/_page.py
@@ -16,7 +16,7 @@
 from vizro.models import Action, Layout, VizroBaseModel
 from vizro.models._action._actions_chain import ActionsChain, Trigger
 from vizro.models._layout import set_layout
-from vizro.models._models_utils import _log_call, validate_components
+from vizro.models._models_utils import _log_call, validate_components_type, validate_min_length
 
 from .types import ComponentType, ControlType
 
@@ -52,7 +52,8 @@ class Page(VizroBaseModel):
     actions: List[ActionsChain] = []
 
     # Re-used validators
-    _validate_components = validator("components", allow_reuse=True, always=True, pre=True)(validate_components)
+    _validate_components_type = validator("components", allow_reuse=True, always=True, pre=True)(validate_components_type)
+    _validate_components_length = validator("components", allow_reuse=True, always=True)(validate_min_length)
     _validate_layout = validator("layout", allow_reuse=True, always=True)(set_layout)
 
     @root_validator(pre=True)
diff --git a/vizro-core/tests/unit/vizro/models/test_models_utils.py b/vizro-core/tests/unit/vizro/models/test_models_utils.py
index c3a1a312e..10edae78a 100644
--- a/vizro-core/tests/unit/vizro/models/test_models_utils.py
+++ b/vizro-core/tests/unit/vizro/models/test_models_utils.py
@@ -11,10 +11,17 @@
 
 
 class TestSharedValidators:
-    def test_set_components_validator(self, model_with_layout):
+    def test_validate_min_length(self, model_with_layout):
         with pytest.raises(ValidationError, match="Ensure this value has at least 1 item."):
             model_with_layout(title="Title", components=[])
 
+    def test_validate_components_type(self, model_with_layout, standard_px_chart):
+        with pytest.raises(
+            ValidationError,
+            match="A callable of mode `graph` has been provided. " "Please wrap it inside the `vm.Graph(figure=...)`.",
+        ):
+            model_with_layout(title="Title", components=[standard_px_chart])
+
     def test_check_for_valid_component_types(self, model_with_layout):
         with pytest.raises(
             ValidationError,

From 9806db5ad4eb05f3a938c520730f8f7723bb0205 Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Thu, 18 Jul 2024 15:31:40 +0200
Subject: [PATCH 03/14] Rename validator

---
 vizro-core/src/vizro/models/_components/_form.py        | 4 ++--
 vizro-core/src/vizro/models/_components/container.py    | 4 ++--
 vizro-core/src/vizro/models/_models_utils.py            | 2 +-
 vizro-core/src/vizro/models/_page.py                    | 4 ++--
 vizro-core/tests/unit/vizro/models/test_models_utils.py | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/vizro-core/src/vizro/models/_components/_form.py b/vizro-core/src/vizro/models/_components/_form.py
index 90436b60d..16bf1a596 100644
--- a/vizro-core/src/vizro/models/_components/_form.py
+++ b/vizro-core/src/vizro/models/_components/_form.py
@@ -12,7 +12,7 @@
 from vizro.models import VizroBaseModel
 from vizro.models._components.form import Checklist, Dropdown, RadioItems, RangeSlider, Slider
 from vizro.models._layout import set_layout
-from vizro.models._models_utils import _log_call, validate_components_type, validate_min_length
+from vizro.models._models_utils import _log_call, check_captured_callable, validate_min_length
 from vizro.models.types import _FormComponentType
 
 if TYPE_CHECKING:
@@ -34,7 +34,7 @@ class Form(VizroBaseModel):
     layout: Layout = None  # type: ignore[assignment]
 
     # Re-used validators
-    _validate_components_type = validator("components", allow_reuse=True, always=True, pre=True)(validate_components_type)
+    _check_captured_callable = validator("components", allow_reuse=True, always=True, pre=True)(check_captured_callable)
     _validate_components_length = validator("components", allow_reuse=True, always=True)(validate_min_length)
     _validate_layout = validator("layout", allow_reuse=True, always=True)(set_layout)
 
diff --git a/vizro-core/src/vizro/models/_components/container.py b/vizro-core/src/vizro/models/_components/container.py
index 7cf1c0de1..2a9d82b56 100644
--- a/vizro-core/src/vizro/models/_components/container.py
+++ b/vizro-core/src/vizro/models/_components/container.py
@@ -11,7 +11,7 @@
 
 from vizro.models import VizroBaseModel
 from vizro.models._layout import set_layout
-from vizro.models._models_utils import _log_call, validate_components_type, validate_min_length
+from vizro.models._models_utils import _log_call, check_captured_callable, validate_min_length
 from vizro.models.types import ComponentType
 
 if TYPE_CHECKING:
@@ -36,7 +36,7 @@ class Container(VizroBaseModel):
     layout: Layout = None  # type: ignore[assignment]
 
     # Re-used validators
-    _validate_components_type = validator("components", allow_reuse=True, always=True, pre=True)(validate_components_type)
+    _check_captured_callable = validator("components", allow_reuse=True, always=True, pre=True)(check_captured_callable)
     _validate_components_length = validator("components", allow_reuse=True, always=True)(validate_min_length)
     _validate_layout = validator("layout", allow_reuse=True, always=True)(set_layout)
 
diff --git a/vizro-core/src/vizro/models/_models_utils.py b/vizro-core/src/vizro/models/_models_utils.py
index ed299a2e6..7326148a7 100644
--- a/vizro-core/src/vizro/models/_models_utils.py
+++ b/vizro-core/src/vizro/models/_models_utils.py
@@ -24,7 +24,7 @@ def validate_min_length(cls, field):
     return field
 
 
-def validate_components_type(cls, field):
+def check_captured_callable(cls, field):
     mode_to_error = {
         "figure": "A callable of mode `figure` has been provided. Please wrap it inside the `vm.Figure(figure=...)`.",
         "table": "A callable of mode `table` has been provided. Please wrap it inside the `vm.Table(figure=...)`.",
diff --git a/vizro-core/src/vizro/models/_page.py b/vizro-core/src/vizro/models/_page.py
index f5d5fc3d4..736c84fa2 100644
--- a/vizro-core/src/vizro/models/_page.py
+++ b/vizro-core/src/vizro/models/_page.py
@@ -16,7 +16,7 @@
 from vizro.models import Action, Layout, VizroBaseModel
 from vizro.models._action._actions_chain import ActionsChain, Trigger
 from vizro.models._layout import set_layout
-from vizro.models._models_utils import _log_call, validate_components_type, validate_min_length
+from vizro.models._models_utils import _log_call, check_captured_callable, validate_min_length
 
 from .types import ComponentType, ControlType
 
@@ -52,7 +52,7 @@ class Page(VizroBaseModel):
     actions: List[ActionsChain] = []
 
     # Re-used validators
-    _validate_components_type = validator("components", allow_reuse=True, always=True, pre=True)(validate_components_type)
+    _check_captured_callable = validator("components", allow_reuse=True, always=True, pre=True)(check_captured_callable)
     _validate_components_length = validator("components", allow_reuse=True, always=True)(validate_min_length)
     _validate_layout = validator("layout", allow_reuse=True, always=True)(set_layout)
 
diff --git a/vizro-core/tests/unit/vizro/models/test_models_utils.py b/vizro-core/tests/unit/vizro/models/test_models_utils.py
index 10edae78a..238cab404 100644
--- a/vizro-core/tests/unit/vizro/models/test_models_utils.py
+++ b/vizro-core/tests/unit/vizro/models/test_models_utils.py
@@ -15,7 +15,7 @@ def test_validate_min_length(self, model_with_layout):
         with pytest.raises(ValidationError, match="Ensure this value has at least 1 item."):
             model_with_layout(title="Title", components=[])
 
-    def test_validate_components_type(self, model_with_layout, standard_px_chart):
+    def test_check_captured_callable(self, model_with_layout, standard_px_chart):
         with pytest.raises(
             ValidationError,
             match="A callable of mode `graph` has been provided. " "Please wrap it inside the `vm.Graph(figure=...)`.",

From d99def713da89481b1a0a9f7a88b68bf577160e0 Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Thu, 18 Jul 2024 15:33:07 +0200
Subject: [PATCH 04/14] Lint

---
 .../20240718_151233_huong_li_nguyen_validation_error_captured.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/vizro-core/changelog.d/20240718_151233_huong_li_nguyen_validation_error_captured.md b/vizro-core/changelog.d/20240718_151233_huong_li_nguyen_validation_error_captured.md
index a37ae04d3..e32b5397a 100644
--- a/vizro-core/changelog.d/20240718_151233_huong_li_nguyen_validation_error_captured.md
+++ b/vizro-core/changelog.d/20240718_151233_huong_li_nguyen_validation_error_captured.md
@@ -39,7 +39,6 @@ Uncomment the section that is right (remove the HTML comment wrapper).
 
 - Improve validation error message if `CapturedCallable` is directly provided. ([#587](https://github.com/mckinsey/vizro/pull/587))
 
-
 <!--
 ### Security
 

From 21ae973200e4ea5cf9fd57c59e002a6b06f58b3a Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Thu, 18 Jul 2024 15:53:58 +0200
Subject: [PATCH 05/14] Update test example

---
 vizro-core/examples/scratch_dev/app.py                |  1 +
 .../unit/vizro/models/_components/test_figure.py      | 10 ----------
 vizro-core/tests/unit/vizro/models/conftest.py        | 11 +++++++++++
 .../tests/unit/vizro/models/test_models_utils.py      |  8 +++++---
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py
index 6790994e5..f946e85dd 100644
--- a/vizro-core/examples/scratch_dev/app.py
+++ b/vizro-core/examples/scratch_dev/app.py
@@ -18,6 +18,7 @@
 home = vm.Page(
     title="Page Title",
     components=[
+        # kpi_card(data_frame=df_kpi, value_column="Actual", title="KPI with value"),
         vm.Figure(figure=kpi_card(data_frame=df_kpi, value_column="Actual", title="KPI with value")),
     ],
 )
diff --git a/vizro-core/tests/unit/vizro/models/_components/test_figure.py b/vizro-core/tests/unit/vizro/models/_components/test_figure.py
index 45ebdf215..f432cb336 100644
--- a/vizro-core/tests/unit/vizro/models/_components/test_figure.py
+++ b/vizro-core/tests/unit/vizro/models/_components/test_figure.py
@@ -16,16 +16,6 @@
 from vizro.managers import data_manager
 
 
-@pytest.fixture
-def kpi_card_with_dataframe(gapminder):
-    return kpi_card(
-        data_frame=gapminder,
-        value_column="lifeExp",
-        agg_func="mean",
-        value_format="{value:.3f}",
-    )
-
-
 @pytest.fixture
 def kpi_card_with_str_dataframe():
     return kpi_card(
diff --git a/vizro-core/tests/unit/vizro/models/conftest.py b/vizro-core/tests/unit/vizro/models/conftest.py
index a54540e6a..20ebfd650 100644
--- a/vizro-core/tests/unit/vizro/models/conftest.py
+++ b/vizro-core/tests/unit/vizro/models/conftest.py
@@ -1,5 +1,6 @@
 import pytest
 import vizro.models as vm
+from vizro.figures import kpi_card
 from vizro.models.types import capture
 
 
@@ -15,3 +16,13 @@ def _identity_action_function(arg=None):
 @pytest.fixture(params=[vm.Container, vm.Page])
 def model_with_layout(request):
     return request.param
+
+
+@pytest.fixture
+def kpi_card_with_dataframe(gapminder):
+    return kpi_card(
+        data_frame=gapminder,
+        value_column="lifeExp",
+        agg_func="mean",
+        value_format="{value:.3f}",
+    )
diff --git a/vizro-core/tests/unit/vizro/models/test_models_utils.py b/vizro-core/tests/unit/vizro/models/test_models_utils.py
index 238cab404..689ae2ded 100644
--- a/vizro-core/tests/unit/vizro/models/test_models_utils.py
+++ b/vizro-core/tests/unit/vizro/models/test_models_utils.py
@@ -15,12 +15,14 @@ def test_validate_min_length(self, model_with_layout):
         with pytest.raises(ValidationError, match="Ensure this value has at least 1 item."):
             model_with_layout(title="Title", components=[])
 
-    def test_check_captured_callable(self, model_with_layout, standard_px_chart):
+    def test_check_captured_callable(self, model_with_layout, kpi_card_with_dataframe):
         with pytest.raises(
             ValidationError,
-            match="A callable of mode `graph` has been provided. " "Please wrap it inside the `vm.Graph(figure=...)`.",
+            match=re.escape(
+                "A callable of mode `figure` has been provided. Please wrap it inside the `vm.Figure(figure=...)`."
+            ),
         ):
-            model_with_layout(title="Title", components=[standard_px_chart])
+            model_with_layout(title="Title", components=[kpi_card_with_dataframe])
 
     def test_check_for_valid_component_types(self, model_with_layout):
         with pytest.raises(

From d68bb9ba9bade622a393f357fc6e56590063dcef Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Thu, 18 Jul 2024 15:54:32 +0200
Subject: [PATCH 06/14] Update PR number

---
 ...20240718_151233_huong_li_nguyen_validation_error_captured.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vizro-core/changelog.d/20240718_151233_huong_li_nguyen_validation_error_captured.md b/vizro-core/changelog.d/20240718_151233_huong_li_nguyen_validation_error_captured.md
index e32b5397a..cc7217399 100644
--- a/vizro-core/changelog.d/20240718_151233_huong_li_nguyen_validation_error_captured.md
+++ b/vizro-core/changelog.d/20240718_151233_huong_li_nguyen_validation_error_captured.md
@@ -37,7 +37,7 @@ Uncomment the section that is right (remove the HTML comment wrapper).
 
 ### Fixed
 
-- Improve validation error message if `CapturedCallable` is directly provided. ([#587](https://github.com/mckinsey/vizro/pull/587))
+- Improve validation error message if `CapturedCallable` is directly provided. ([#590](https://github.com/mckinsey/vizro/pull/590))
 
 <!--
 ### Security

From 7bcfd517ac6797777d0718a1347ed0e142b193c8 Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Thu, 18 Jul 2024 16:32:59 +0200
Subject: [PATCH 07/14] Extend unit tests

---
 vizro-core/examples/scratch_dev/app.py        |  3 ++
 vizro-core/src/vizro/models/_models_utils.py  | 10 +++++--
 vizro-core/tests/unit/vizro/conftest.py       | 11 +++++++
 .../vizro/models/_components/test_figure.py   | 22 +++++++-------
 .../tests/unit/vizro/models/conftest.py       | 11 -------
 .../unit/vizro/models/test_models_utils.py    | 30 ++++++++++++++-----
 6 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py
index f946e85dd..0a083b512 100644
--- a/vizro-core/examples/scratch_dev/app.py
+++ b/vizro-core/examples/scratch_dev/app.py
@@ -2,9 +2,12 @@
 
 import pandas as pd
 import vizro.models as vm
+import vizro.plotly.express as px
 from vizro import Vizro
 from vizro.figures import kpi_card
 
+gapminder = px.data.gapminder()
+
 # data from the demo app
 df_kpi = pd.DataFrame(
     {
diff --git a/vizro-core/src/vizro/models/_models_utils.py b/vizro-core/src/vizro/models/_models_utils.py
index 7326148a7..e1a82241b 100644
--- a/vizro-core/src/vizro/models/_models_utils.py
+++ b/vizro-core/src/vizro/models/_models_utils.py
@@ -1,7 +1,7 @@
 import logging
 from functools import wraps
 
-from vizro.models.types import CapturedCallable
+from vizro.models.types import CapturedCallable, _DashboardReadyFigure
 
 logger = logging.getLogger(__name__)
 
@@ -33,8 +33,12 @@ def check_captured_callable(cls, field):
     }
 
     for component in field:
-        if isinstance(component, CapturedCallable):
-            error_message = mode_to_error.get(f"{component._mode}", None)
+        if isinstance(component, (_DashboardReadyFigure, CapturedCallable)):
+            mode = (
+                component._captured_callable._mode if isinstance(component, _DashboardReadyFigure) else component._mode
+            )
+            error_message = mode_to_error.get(mode)
             if error_message:
                 raise ValueError(error_message)
+
     return field
diff --git a/vizro-core/tests/unit/vizro/conftest.py b/vizro-core/tests/unit/vizro/conftest.py
index e7ab6168f..67136ead9 100644
--- a/vizro-core/tests/unit/vizro/conftest.py
+++ b/vizro-core/tests/unit/vizro/conftest.py
@@ -5,6 +5,7 @@
 import vizro.models as vm
 import vizro.plotly.express as px
 from vizro import Vizro
+from vizro.figures import kpi_card
 from vizro.tables import dash_ag_grid, dash_data_table
 
 
@@ -61,6 +62,16 @@ def standard_go_chart(gapminder):
     return go.Figure(data=go.Scatter(x=gapminder["gdpPercap"], y=gapminder["lifeExp"], mode="markers"))
 
 
+@pytest.fixture
+def standard_kpi_card(gapminder):
+    return kpi_card(
+        data_frame=gapminder,
+        value_column="lifeExp",
+        agg_func="mean",
+        value_format="{value:.3f}",
+    )
+
+
 @pytest.fixture
 def chart_with_temporal_data(stocks):
     return go.Figure(data=go.Scatter(x=stocks["Date"], y=stocks["AAPL.High"], mode="markers"))
diff --git a/vizro-core/tests/unit/vizro/models/_components/test_figure.py b/vizro-core/tests/unit/vizro/models/_components/test_figure.py
index f432cb336..1c1a5e9d5 100644
--- a/vizro-core/tests/unit/vizro/models/_components/test_figure.py
+++ b/vizro-core/tests/unit/vizro/models/_components/test_figure.py
@@ -27,12 +27,12 @@ def kpi_card_with_str_dataframe():
 
 
 class TestFigureInstantiation:
-    def test_create_figure_mandatory_only(self, kpi_card_with_dataframe):
-        figure = vm.Figure(figure=kpi_card_with_dataframe)
+    def test_create_figure_mandatory_only(self, standard_kpi_card):
+        figure = vm.Figure(figure=standard_kpi_card)
 
         assert hasattr(figure, "id")
         assert figure.type == "figure"
-        assert figure.figure == kpi_card_with_dataframe
+        assert figure.figure == standard_kpi_card
 
     def test_captured_callable_invalid(self, standard_go_chart):
         with pytest.raises(
@@ -56,15 +56,15 @@ def test_captured_callable_wrong_mode(self, standard_dash_table):
 
 
 class TestDunderMethodsFigure:
-    def test_getitem_known_args(self, kpi_card_with_dataframe):
-        figure = vm.Figure(figure=kpi_card_with_dataframe)
+    def test_getitem_known_args(self, standard_kpi_card):
+        figure = vm.Figure(figure=standard_kpi_card)
         assert figure["value_column"] == "lifeExp"
         assert figure["agg_func"] == "mean"
         assert figure["value_format"] == "{value:.3f}"
         assert figure["type"] == "figure"
 
-    def test_getitem_unknown_args(self, kpi_card_with_dataframe):
-        figure = vm.Figure(figure=kpi_card_with_dataframe)
+    def test_getitem_unknown_args(self, standard_kpi_card):
+        figure = vm.Figure(figure=standard_kpi_card)
         with pytest.raises(KeyError):
             figure["unknown_args"]
 
@@ -75,14 +75,14 @@ def test_process_figure_data_frame_str_df(self, kpi_card_with_str_dataframe, gap
         figure = vm.Figure(figure=kpi_card_with_str_dataframe)
         assert data_manager[figure["data_frame"]].load().equals(gapminder)
 
-    def test_process_figure_data_frame_df(self, kpi_card_with_dataframe, gapminder):
-        figure = vm.Figure(figure=kpi_card_with_dataframe)
+    def test_process_figure_data_frame_df(self, standard_kpi_card, gapminder):
+        figure = vm.Figure(figure=standard_kpi_card)
         assert data_manager[figure["data_frame"]].load().equals(gapminder)
 
 
 class TestFigureBuild:
-    def test_figure_build(self, kpi_card_with_dataframe, gapminder):
-        figure = vm.Figure(id="figure-id", figure=kpi_card_with_dataframe).build()
+    def test_figure_build(self, standard_kpi_card, gapminder):
+        figure = vm.Figure(id="figure-id", figure=standard_kpi_card).build()
 
         expected_figure = dcc.Loading(
             html.Div(
diff --git a/vizro-core/tests/unit/vizro/models/conftest.py b/vizro-core/tests/unit/vizro/models/conftest.py
index 20ebfd650..a54540e6a 100644
--- a/vizro-core/tests/unit/vizro/models/conftest.py
+++ b/vizro-core/tests/unit/vizro/models/conftest.py
@@ -1,6 +1,5 @@
 import pytest
 import vizro.models as vm
-from vizro.figures import kpi_card
 from vizro.models.types import capture
 
 
@@ -16,13 +15,3 @@ def _identity_action_function(arg=None):
 @pytest.fixture(params=[vm.Container, vm.Page])
 def model_with_layout(request):
     return request.param
-
-
-@pytest.fixture
-def kpi_card_with_dataframe(gapminder):
-    return kpi_card(
-        data_frame=gapminder,
-        value_column="lifeExp",
-        agg_func="mean",
-        value_format="{value:.3f}",
-    )
diff --git a/vizro-core/tests/unit/vizro/models/test_models_utils.py b/vizro-core/tests/unit/vizro/models/test_models_utils.py
index 689ae2ded..612dfb863 100644
--- a/vizro-core/tests/unit/vizro/models/test_models_utils.py
+++ b/vizro-core/tests/unit/vizro/models/test_models_utils.py
@@ -15,14 +15,30 @@ def test_validate_min_length(self, model_with_layout):
         with pytest.raises(ValidationError, match="Ensure this value has at least 1 item."):
             model_with_layout(title="Title", components=[])
 
-    def test_check_captured_callable(self, model_with_layout, kpi_card_with_dataframe):
-        with pytest.raises(
-            ValidationError,
-            match=re.escape(
-                "A callable of mode `figure` has been provided. Please wrap it inside the `vm.Figure(figure=...)`."
+    @pytest.mark.parametrize(
+        "captured_callable, error_message",
+        [
+            (
+                "standard_px_chart",
+                "A callable of mode `graph` has been provided. Please wrap it inside the `vm.Graph(figure=...)`",
             ),
-        ):
-            model_with_layout(title="Title", components=[kpi_card_with_dataframe])
+            (
+                "standard_ag_grid",
+                "A callable of mode `ag_grid` has been provided. Please wrap it inside the `vm.AgGrid(figure=...)`",
+            ),
+            (
+                "standard_dash_table",
+                "A callable of mode `table` has been provided. Please wrap it inside the `vm.Table(figure=...)`",
+            ),
+            (
+                "standard_kpi_card",
+                "A callable of mode `figure` has been provided. Please wrap it inside the `vm.Figure(figure=...)`",
+            ),
+        ],
+    )
+    def test_check_captured_callable(self, model_with_layout, captured_callable, error_message, request):
+        with pytest.raises(ValidationError, match=re.escape(error_message)):
+            model_with_layout(title="Title", components=[request.getfixturevalue(captured_callable)])
 
     def test_check_for_valid_component_types(self, model_with_layout):
         with pytest.raises(

From 87bce4f9503a956286019f096dc11d63a797a117 Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Thu, 18 Jul 2024 16:56:26 +0200
Subject: [PATCH 08/14] Add example usage inside docstrings

---
 vizro-core/src/vizro/figures/kpi_cards.py    | 12 ++++++++++++
 vizro-core/src/vizro/tables/_dash_ag_grid.py | 10 +++++++++-
 vizro-core/src/vizro/tables/_dash_table.py   | 10 +++++++++-
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/vizro-core/src/vizro/figures/kpi_cards.py b/vizro-core/src/vizro/figures/kpi_cards.py
index ed60a5305..9d199b2a0 100644
--- a/vizro-core/src/vizro/figures/kpi_cards.py
+++ b/vizro-core/src/vizro/figures/kpi_cards.py
@@ -56,6 +56,12 @@ def kpi_card(  # noqa: PLR0913
     Returns:
          A Dash Bootstrap Components card (`dbc.Card`) containing the formatted KPI value.
 
+    Examples:
+        Wrap inside `vm.Figure` to use as a component inside `vm.Page` or `vm.Container`.
+        >>> import vizro.models as vm
+        >>> from vizro.figures import kpi_card
+        >>> vm.Page(title="Page", components=[vm.Figure(figure=kpi_card(...))])
+
     """
     title = title or f"{agg_func} {value_column}".title()
     value = data_frame[value_column].agg(agg_func)
@@ -119,6 +125,12 @@ def kpi_card_reference(  # noqa: PLR0913
     Returns:
         A Dash Bootstrap Components card (`dbc.Card`) containing the formatted KPI value and reference.
 
+    Examples:
+        Wrap inside `vm.Figure` to use as a component inside `vm.Page` or `vm.Container`.
+        >>> import vizro.models as vm
+        >>> from vizro.figures import kpi_card_reference
+        >>> vm.Page(title="Page", components=[vm.Figure(figure=kpi_card_reference(...))])
+
     """
     title = title or f"{agg_func} {value_column}".title()
     value, reference = data_frame[[value_column, reference_column]].agg(agg_func)
diff --git a/vizro-core/src/vizro/tables/_dash_ag_grid.py b/vizro-core/src/vizro/tables/_dash_ag_grid.py
index cee45f99c..dec4efeca 100644
--- a/vizro-core/src/vizro/tables/_dash_ag_grid.py
+++ b/vizro-core/src/vizro/tables/_dash_ag_grid.py
@@ -48,7 +48,15 @@
 
 @capture("ag_grid")
 def dash_ag_grid(data_frame: pd.DataFrame, **kwargs) -> dag.AgGrid:
-    """Implementation of `dash_ag_grid.AgGrid` with sensible defaults to be used in [`AgGrid`][vizro.models.AgGrid]."""
+    """Implementation of `dash_ag_grid.AgGrid` with sensible defaults to be used in [`AgGrid`][vizro.models.AgGrid].
+
+    Examples
+        Wrap inside `vm.AgGrid` to use as a component inside `vm.Page` or `vm.Container`.
+        >>> import vizro.models as vm
+        >>> from vizro.tables import dash_ag_grid
+        >>> vm.Page(title="Page", components=[vm.AgGrid(figure=dash_ag_grid(...))])
+
+    """
     defaults = {
         "className": "ag-theme-quartz-dark ag-theme-vizro",
         "columnDefs": [{"field": col} for col in data_frame.columns],
diff --git a/vizro-core/src/vizro/tables/_dash_table.py b/vizro-core/src/vizro/tables/_dash_table.py
index da6087b78..d55d818c3 100644
--- a/vizro-core/src/vizro/tables/_dash_table.py
+++ b/vizro-core/src/vizro/tables/_dash_table.py
@@ -9,7 +9,15 @@
 
 @capture("table")
 def dash_data_table(data_frame: pd.DataFrame, **kwargs) -> dash_table.DataTable:
-    """Standard `dash_table.DataTable` with sensible defaults to be used in [`Table`][vizro.models.Table]."""
+    """Standard `dash_table.DataTable` with sensible defaults to be used in [`Table`][vizro.models.Table].
+
+    Examples
+        Wrap inside `vm.Table` to use as a component inside `vm.Page` or `vm.Container`.
+        >>> import vizro.models as vm
+        >>> from vizro.table import dash_data_table
+        >>> vm.Page(title="Page", components=[vm.Table(figure=dash_data_table(...))])
+
+    """
     defaults = {
         "columns": [{"name": col, "id": col} for col in data_frame.columns],
         "style_as_list_view": True,

From e17cff7bc2c2b23dc12d2fe7b5669922903b17b2 Mon Sep 17 00:00:00 2001
From: Antony Milne <antony.milne@quantumblack.com>
Date: Thu, 18 Jul 2024 21:19:58 +0100
Subject: [PATCH 09/14] Refactor with same functionality

* Change _DashboardReadyFigure to _SupportsCapturedCallable
* Make validator each_item=True and pre=False (default)
* Assign model to a new attribute to avoid mode-specific logic leaking into validator
---
 .../src/vizro/models/_components/_form.py     |  4 ++-
 .../src/vizro/models/_components/container.py |  4 ++-
 vizro-core/src/vizro/models/_models_utils.py  | 28 ++++++++-----------
 vizro-core/src/vizro/models/_page.py          |  4 ++-
 vizro-core/src/vizro/models/types.py          | 12 ++++++++
 5 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/vizro-core/src/vizro/models/_components/_form.py b/vizro-core/src/vizro/models/_components/_form.py
index 16bf1a596..8b2b1a54a 100644
--- a/vizro-core/src/vizro/models/_components/_form.py
+++ b/vizro-core/src/vizro/models/_components/_form.py
@@ -34,7 +34,9 @@ class Form(VizroBaseModel):
     layout: Layout = None  # type: ignore[assignment]
 
     # Re-used validators
-    _check_captured_callable = validator("components", allow_reuse=True, always=True, pre=True)(check_captured_callable)
+    _check_captured_callable = validator("components", allow_reuse=True, each_item=True, pre=True)(
+        check_captured_callable
+    )
     _validate_components_length = validator("components", allow_reuse=True, always=True)(validate_min_length)
     _validate_layout = validator("layout", allow_reuse=True, always=True)(set_layout)
 
diff --git a/vizro-core/src/vizro/models/_components/container.py b/vizro-core/src/vizro/models/_components/container.py
index 2a9d82b56..9347907cb 100644
--- a/vizro-core/src/vizro/models/_components/container.py
+++ b/vizro-core/src/vizro/models/_components/container.py
@@ -36,7 +36,9 @@ class Container(VizroBaseModel):
     layout: Layout = None  # type: ignore[assignment]
 
     # Re-used validators
-    _check_captured_callable = validator("components", allow_reuse=True, always=True, pre=True)(check_captured_callable)
+    _check_captured_callable = validator("components", allow_reuse=True, each_item=True, pre=True)(
+        check_captured_callable
+    )
     _validate_components_length = validator("components", allow_reuse=True, always=True)(validate_min_length)
     _validate_layout = validator("layout", allow_reuse=True, always=True)(set_layout)
 
diff --git a/vizro-core/src/vizro/models/_models_utils.py b/vizro-core/src/vizro/models/_models_utils.py
index e1a82241b..63f3ce778 100644
--- a/vizro-core/src/vizro/models/_models_utils.py
+++ b/vizro-core/src/vizro/models/_models_utils.py
@@ -1,7 +1,7 @@
 import logging
 from functools import wraps
 
-from vizro.models.types import CapturedCallable, _DashboardReadyFigure
+from vizro.models.types import CapturedCallable, _SupportsCapturedCallable
 
 logger = logging.getLogger(__name__)
 
@@ -18,6 +18,7 @@ def _wrapper(self, *args, **kwargs):
 
 
 # Validators for reuse
+# TODO: change field to value
 def validate_min_length(cls, field):
     if not field:
         raise ValueError("Ensure this value has at least 1 item.")
@@ -25,20 +26,13 @@ def validate_min_length(cls, field):
 
 
 def check_captured_callable(cls, field):
-    mode_to_error = {
-        "figure": "A callable of mode `figure` has been provided. Please wrap it inside the `vm.Figure(figure=...)`.",
-        "table": "A callable of mode `table` has been provided. Please wrap it inside the `vm.Table(figure=...)`.",
-        "ag_grid": "A callable of mode `ag_grid` has been provided. Please wrap it inside the `vm.AgGrid(figure=...)`.",
-        "graph": "A callable of mode `graph` has been provided. Please wrap it inside the `vm.Graph(figure=...)`.",
-    }
-
-    for component in field:
-        if isinstance(component, (_DashboardReadyFigure, CapturedCallable)):
-            mode = (
-                component._captured_callable._mode if isinstance(component, _DashboardReadyFigure) else component._mode
-            )
-            error_message = mode_to_error.get(mode)
-            if error_message:
-                raise ValueError(error_message)
+    if not isinstance(field, (CapturedCallable, _SupportsCapturedCallable)):
+        return field
 
-    return field
+    if isinstance(field, _SupportsCapturedCallable):
+        field = field._captured_callable
+
+    mode = field._mode
+    model = field._model
+
+    raise ValueError(f"A callable of mode `{mode}` has been provided. Please wrap it inside the `{model}(figure=...)`.")
diff --git a/vizro-core/src/vizro/models/_page.py b/vizro-core/src/vizro/models/_page.py
index 736c84fa2..d9254eb8f 100644
--- a/vizro-core/src/vizro/models/_page.py
+++ b/vizro-core/src/vizro/models/_page.py
@@ -52,7 +52,9 @@ class Page(VizroBaseModel):
     actions: List[ActionsChain] = []
 
     # Re-used validators
-    _check_captured_callable = validator("components", allow_reuse=True, always=True, pre=True)(check_captured_callable)
+    _check_captured_callable = validator("components", allow_reuse=True, each_item=True, pre=True)(
+        check_captured_callable
+    )
     _validate_components_length = validator("components", allow_reuse=True, always=True)(validate_min_length)
     _validate_layout = validator("layout", allow_reuse=True, always=True)(set_layout)
 
diff --git a/vizro-core/src/vizro/models/types.py b/vizro-core/src/vizro/models/types.py
index dba2eceb2..4d63a52b6 100644
--- a/vizro-core/src/vizro/models/types.py
+++ b/vizro-core/src/vizro/models/types.py
@@ -283,7 +283,16 @@ class capture:
 
     def __init__(self, mode: Literal["graph", "action", "table", "ag_grid", "figure"]):
         """Decorator to capture a function call."""
+        # mode and model are used in later validations of the captured callable.
         self._mode = mode
+        mode_to_model = {
+            "graph": "vm.Graph",
+            "action": "vm.Action",
+            "table": "vm.Table",
+            "ag_grid": "vm.AgGrid",
+            "figure": "vm.Figure",
+        }
+        self._model = mode_to_model[mode]
 
     def __call__(self, func, /):
         """Produces a CapturedCallable or _DashboardReadyFigure.
@@ -307,6 +316,7 @@ def wrapped(*args, **kwargs) -> _DashboardReadyFigure:
                 # positional or keyword, this is much more robust than trying to get it out of arg or kwargs ourselves.
                 captured_callable: CapturedCallable = CapturedCallable(func, *args, **kwargs)
                 captured_callable._mode = self._mode
+                captured_callable._model = self._model
 
                 try:
                     captured_callable["data_frame"]
@@ -334,6 +344,7 @@ def wrapped(*args, **kwargs):
                 # Note this is basically the same as partial(func, *args, **kwargs)
                 captured_callable: CapturedCallable = CapturedCallable(func, *args, **kwargs)
                 captured_callable._mode = self._mode
+                captured_callable._model = self._model
                 return captured_callable
 
             return wrapped
@@ -346,6 +357,7 @@ def wrapped(*args, **kwargs):
 
                 captured_callable: CapturedCallable = CapturedCallable(func, *args, **kwargs)
                 captured_callable._mode = self._mode
+                captured_callable._model = self._model
 
                 try:
                     captured_callable["data_frame"]

From a5590df55ccb7d2c5ad184745bd08b7c7f233a3c Mon Sep 17 00:00:00 2001
From: Antony Milne <antony.milne@quantumblack.com>
Date: Thu, 18 Jul 2024 21:24:25 +0100
Subject: [PATCH 10/14] Refactor a little bit more

* Switch around logic to match other bits of code
* Rename field to value
---
 vizro-core/src/vizro/models/_models_utils.py | 28 ++++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/vizro-core/src/vizro/models/_models_utils.py b/vizro-core/src/vizro/models/_models_utils.py
index 63f3ce778..4c2d46299 100644
--- a/vizro-core/src/vizro/models/_models_utils.py
+++ b/vizro-core/src/vizro/models/_models_utils.py
@@ -18,21 +18,21 @@ def _wrapper(self, *args, **kwargs):
 
 
 # Validators for reuse
-# TODO: change field to value
-def validate_min_length(cls, field):
-    if not field:
+def validate_min_length(cls, value):
+    if not value:
         raise ValueError("Ensure this value has at least 1 item.")
-    return field
+    return value
 
 
-def check_captured_callable(cls, field):
-    if not isinstance(field, (CapturedCallable, _SupportsCapturedCallable)):
-        return field
+def check_captured_callable(cls, value):
+    if isinstance(value, CapturedCallable):
+        captured_callable = value
+    elif isinstance(value, _SupportsCapturedCallable):
+        captured_callable = value._captured_callable
+    else:
+        return value
 
-    if isinstance(field, _SupportsCapturedCallable):
-        field = field._captured_callable
-
-    mode = field._mode
-    model = field._model
-
-    raise ValueError(f"A callable of mode `{mode}` has been provided. Please wrap it inside the `{model}(figure=...)`.")
+    raise ValueError(
+        f"A callable of mode `{captured_callable._mode}` has been provided. Please wrap it inside the "
+        f"`{captured_callable._model}(figure=...)`."
+    )

From 1876ff3c2310ab6e5400fec35e583d67e16a4471 Mon Sep 17 00:00:00 2001
From: Antony Milne <antony.milne@quantumblack.com>
Date: Thu, 18 Jul 2024 21:29:00 +0100
Subject: [PATCH 11/14] Fix message so it also works for Action

---
 vizro-core/src/vizro/models/_models_utils.py |  2 +-
 vizro-core/src/vizro/models/types.py         | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/vizro-core/src/vizro/models/_models_utils.py b/vizro-core/src/vizro/models/_models_utils.py
index 4c2d46299..e2f6e427b 100644
--- a/vizro-core/src/vizro/models/_models_utils.py
+++ b/vizro-core/src/vizro/models/_models_utils.py
@@ -34,5 +34,5 @@ def check_captured_callable(cls, value):
 
     raise ValueError(
         f"A callable of mode `{captured_callable._mode}` has been provided. Please wrap it inside the "
-        f"`{captured_callable._model}(figure=...)`."
+        f"`{captured_callable._model_example}`."
     )
diff --git a/vizro-core/src/vizro/models/types.py b/vizro-core/src/vizro/models/types.py
index 4d63a52b6..cfa616724 100644
--- a/vizro-core/src/vizro/models/types.py
+++ b/vizro-core/src/vizro/models/types.py
@@ -285,14 +285,14 @@ def __init__(self, mode: Literal["graph", "action", "table", "ag_grid", "figure"
         """Decorator to capture a function call."""
         # mode and model are used in later validations of the captured callable.
         self._mode = mode
-        mode_to_model = {
-            "graph": "vm.Graph",
-            "action": "vm.Action",
-            "table": "vm.Table",
-            "ag_grid": "vm.AgGrid",
-            "figure": "vm.Figure",
+        model_examples = {
+            "graph": "vm.Graph(figure=...)",
+            "action": "vm.Action(function=...)",
+            "table": "vm.Table(figure=...)",
+            "ag_grid": "vm.AgGrid(figure=...)",
+            "figure": "vm.Figure(figure=...)",
         }
-        self._model = mode_to_model[mode]
+        self._model_example = model_examples[mode]
 
     def __call__(self, func, /):
         """Produces a CapturedCallable or _DashboardReadyFigure.
@@ -316,7 +316,7 @@ def wrapped(*args, **kwargs) -> _DashboardReadyFigure:
                 # positional or keyword, this is much more robust than trying to get it out of arg or kwargs ourselves.
                 captured_callable: CapturedCallable = CapturedCallable(func, *args, **kwargs)
                 captured_callable._mode = self._mode
-                captured_callable._model = self._model
+                captured_callable._model_example = self._model_example
 
                 try:
                     captured_callable["data_frame"]
@@ -344,7 +344,7 @@ def wrapped(*args, **kwargs):
                 # Note this is basically the same as partial(func, *args, **kwargs)
                 captured_callable: CapturedCallable = CapturedCallable(func, *args, **kwargs)
                 captured_callable._mode = self._mode
-                captured_callable._model = self._model
+                captured_callable._model_example = self._model_example
                 return captured_callable
 
             return wrapped
@@ -357,7 +357,7 @@ def wrapped(*args, **kwargs):
 
                 captured_callable: CapturedCallable = CapturedCallable(func, *args, **kwargs)
                 captured_callable._mode = self._mode
-                captured_callable._model = self._model
+                captured_callable._model_example = self._model_example
 
                 try:
                     captured_callable["data_frame"]

From 525b850034c1a221695c4fde815a39ef5a1a6511 Mon Sep 17 00:00:00 2001
From: Antony Milne <antony.milne@quantumblack.com>
Date: Thu, 18 Jul 2024 21:30:36 +0100
Subject: [PATCH 12/14] Fix error message wording

---
 vizro-core/src/vizro/models/_models_utils.py            | 2 +-
 vizro-core/tests/unit/vizro/models/test_models_utils.py | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/vizro-core/src/vizro/models/_models_utils.py b/vizro-core/src/vizro/models/_models_utils.py
index e2f6e427b..58da2bf39 100644
--- a/vizro-core/src/vizro/models/_models_utils.py
+++ b/vizro-core/src/vizro/models/_models_utils.py
@@ -33,6 +33,6 @@ def check_captured_callable(cls, value):
         return value
 
     raise ValueError(
-        f"A callable of mode `{captured_callable._mode}` has been provided. Please wrap it inside the "
+        f"A callable of mode `{captured_callable._mode}` has been provided. Please wrap it inside "
         f"`{captured_callable._model_example}`."
     )
diff --git a/vizro-core/tests/unit/vizro/models/test_models_utils.py b/vizro-core/tests/unit/vizro/models/test_models_utils.py
index 612dfb863..24e6808be 100644
--- a/vizro-core/tests/unit/vizro/models/test_models_utils.py
+++ b/vizro-core/tests/unit/vizro/models/test_models_utils.py
@@ -20,19 +20,19 @@ def test_validate_min_length(self, model_with_layout):
         [
             (
                 "standard_px_chart",
-                "A callable of mode `graph` has been provided. Please wrap it inside the `vm.Graph(figure=...)`",
+                "A callable of mode `graph` has been provided. Please wrap it inside `vm.Graph(figure=...)`",
             ),
             (
                 "standard_ag_grid",
-                "A callable of mode `ag_grid` has been provided. Please wrap it inside the `vm.AgGrid(figure=...)`",
+                "A callable of mode `ag_grid` has been provided. Please wrap it inside `vm.AgGrid(figure=...)`",
             ),
             (
                 "standard_dash_table",
-                "A callable of mode `table` has been provided. Please wrap it inside the `vm.Table(figure=...)`",
+                "A callable of mode `table` has been provided. Please wrap it inside `vm.Table(figure=...)`",
             ),
             (
                 "standard_kpi_card",
-                "A callable of mode `figure` has been provided. Please wrap it inside the `vm.Figure(figure=...)`",
+                "A callable of mode `figure` has been provided. Please wrap it inside `vm.Figure(figure=...)`",
             ),
         ],
     )

From 31cee666dc9372ceb79f415f521fc6293a822b3b Mon Sep 17 00:00:00 2001
From: Antony Milne <antony.milne@quantumblack.com>
Date: Thu, 18 Jul 2024 21:37:59 +0100
Subject: [PATCH 13/14] Fix lint hopefully

---
 vizro-core/src/vizro/models/types.py | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/vizro-core/src/vizro/models/types.py b/vizro-core/src/vizro/models/types.py
index cfa616724..8dce74d74 100644
--- a/vizro-core/src/vizro/models/types.py
+++ b/vizro-core/src/vizro/models/types.py
@@ -96,8 +96,9 @@ def __init__(self, function, /, *args, **kwargs):
             self.__bound_arguments.update(self.__bound_arguments[var_keyword_param])
             del self.__bound_arguments[var_keyword_param]
 
-        # This is used to check that the mode of the capture decorator matches the inserted captured callable.
+        # Used in later validations of the captured callable.
         self._mode = None
+        self._model_example = None
 
     def __call__(self, *args, **kwargs):
         """Run the `function` with the initially bound arguments overridden by `**kwargs`.
@@ -283,7 +284,7 @@ class capture:
 
     def __init__(self, mode: Literal["graph", "action", "table", "ag_grid", "figure"]):
         """Decorator to capture a function call."""
-        # mode and model are used in later validations of the captured callable.
+        # mode and model_example are used in later validations of the captured callable.
         self._mode = mode
         model_examples = {
             "graph": "vm.Graph(figure=...)",

From 5a8b0e1550e39d65b5c397107f43044bf1c8fd8f Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Fri, 19 Jul 2024 11:06:05 +0200
Subject: [PATCH 14/14] PR comments

---
 ...151233_huong_li_nguyen_validation_error_captured.md | 10 +++++-----
 vizro-core/src/vizro/models/_components/_form.py       |  2 +-
 vizro-core/src/vizro/models/_components/container.py   |  2 +-
 vizro-core/src/vizro/models/_page.py                   |  2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/vizro-core/changelog.d/20240718_151233_huong_li_nguyen_validation_error_captured.md b/vizro-core/changelog.d/20240718_151233_huong_li_nguyen_validation_error_captured.md
index cc7217399..4b6a3accf 100644
--- a/vizro-core/changelog.d/20240718_151233_huong_li_nguyen_validation_error_captured.md
+++ b/vizro-core/changelog.d/20240718_151233_huong_li_nguyen_validation_error_captured.md
@@ -16,12 +16,11 @@ Uncomment the section that is right (remove the HTML comment wrapper).
 - A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
 
 -->
-<!--
+
 ### Added
 
-- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+- Added validation error message if `CapturedCallable` is directly provided. ([#590](https://github.com/mckinsey/vizro/pull/590))
 
--->
 <!--
 ### Changed
 
@@ -34,11 +33,12 @@ Uncomment the section that is right (remove the HTML comment wrapper).
 - A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
 
 -->
-
+<!--
 ### Fixed
 
-- Improve validation error message if `CapturedCallable` is directly provided. ([#590](https://github.com/mckinsey/vizro/pull/590))
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
 
+-->
 <!--
 ### Security
 
diff --git a/vizro-core/src/vizro/models/_components/_form.py b/vizro-core/src/vizro/models/_components/_form.py
index 8b2b1a54a..20daf5f51 100644
--- a/vizro-core/src/vizro/models/_components/_form.py
+++ b/vizro-core/src/vizro/models/_components/_form.py
@@ -37,7 +37,7 @@ class Form(VizroBaseModel):
     _check_captured_callable = validator("components", allow_reuse=True, each_item=True, pre=True)(
         check_captured_callable
     )
-    _validate_components_length = validator("components", allow_reuse=True, always=True)(validate_min_length)
+    _validate_min_length = validator("components", allow_reuse=True, always=True)(validate_min_length)
     _validate_layout = validator("layout", allow_reuse=True, always=True)(set_layout)
 
     @_log_call
diff --git a/vizro-core/src/vizro/models/_components/container.py b/vizro-core/src/vizro/models/_components/container.py
index 9347907cb..899319cc3 100644
--- a/vizro-core/src/vizro/models/_components/container.py
+++ b/vizro-core/src/vizro/models/_components/container.py
@@ -39,7 +39,7 @@ class Container(VizroBaseModel):
     _check_captured_callable = validator("components", allow_reuse=True, each_item=True, pre=True)(
         check_captured_callable
     )
-    _validate_components_length = validator("components", allow_reuse=True, always=True)(validate_min_length)
+    _validate_min_length = validator("components", allow_reuse=True, always=True)(validate_min_length)
     _validate_layout = validator("layout", allow_reuse=True, always=True)(set_layout)
 
     @_log_call
diff --git a/vizro-core/src/vizro/models/_page.py b/vizro-core/src/vizro/models/_page.py
index d9254eb8f..cf0fa125f 100644
--- a/vizro-core/src/vizro/models/_page.py
+++ b/vizro-core/src/vizro/models/_page.py
@@ -55,7 +55,7 @@ class Page(VizroBaseModel):
     _check_captured_callable = validator("components", allow_reuse=True, each_item=True, pre=True)(
         check_captured_callable
     )
-    _validate_components_length = validator("components", allow_reuse=True, always=True)(validate_min_length)
+    _validate_min_length = validator("components", allow_reuse=True, always=True)(validate_min_length)
     _validate_layout = validator("layout", allow_reuse=True, always=True)(set_layout)
 
     @root_validator(pre=True)