Merge main with the feature branch

Author: petar-qb

vizro-core/changelog.d/20250226_114409_petar_pejovic_dynamic_datepicker.md

@@ -0,0 +1,46 @@
+<!--
+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
+
+- `DatePicker` filters update automatically when underlying dynamic data changes. See the [user guide on dynamic filters](https://vizro.readthedocs.io/en/stable/pages/user-guides/data/#filters) for more information. ([#1039](https://github.com/mckinsey/vizro/pull/1039))
+
+<!--
+### 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
+
+- 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
+
+- 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))
+
+-->

vizro-core/docs/pages/user-guides/data.md

@@ -355,14 +355,14 @@ When the page is refreshed, the behavior of a dynamic filter is as follows:
 
 - The filter's selector updates its available values:
     - For [categorical selectors](selectors.md#categorical-selectors), `options` updates to give all unique values found in `column` across all the data sources of components in `targets`.
-    - For [numerical selectors](selectors.md#numerical-selectors), `min` and `max` update to give the overall minimum and maximum values found in `column` across all the data sources of components in `targets`.
+    - For [numerical selectors](selectors.md#numerical-selectors) and [temporal selectors](selectors.md#temporal-selectors), `min` and `max` update to give the overall minimum and maximum values found in `column` across all the data sources of components in `targets`.
 - The value selected on screen by a dashboard user _does not_ change. If the selected value is not already present in the new set of available values then the `options` or `min` and `max` are modified to include it. In this case, the filtering operation might result in an empty DataFrame.
 - Even though the values present in a data source can change, the schema should not: `column` should remain present and of the same type in the data sources. The `targets` of the filter and selector type cannot change while the dashboard is running. For example, a `vm.Dropdown` selector cannot turn into `vm.RadioItems`.
 
-For example, let us add two filters to the [dynamic data example](#dynamic-data) above:
+For example, to add three filters to the [dynamic data example](#dynamic-data) above:
 
 !!! example "Dynamic filters"
-    ```py hl_lines="10 20 21"
+    ```py hl_lines="10 11 21 22 23"
     from vizro import Vizro
     import pandas as pd
     import vizro.plotly.express as px
@@ -372,7 +372,8 @@ For example, let us add two filters to the [dynamic data example](#dynamic-data)
 
     def load_iris_data():
         iris = pd.read_csv("iris.csv")
-        return iris.sample(5)  # (1)!
+        iris["date_column"] = pd.date_range(start=pd.to_datetime("2025-01-01"), periods=len(iris), freq="D")  # (1)!
+        return iris.sample(5)  # (2)!
 
     data_manager["iris"] = load_iris_data
 
@@ -382,8 +383,9 @@ For example, let us add two filters to the [dynamic data example](#dynamic-data)
             vm.Graph(figure=px.box("iris", x="species", y="petal_width", color="species"))
         ],
         controls=[
-            vm.Filter(column="species"),  # (2)!
-            vm.Filter(column="sepal_length"),  # (3)!
+            vm.Filter(column="species"),  # (3)!
+            vm.Filter(column="sepal_length"),  # (4)!
+            vm.Filter(column="date_column"),  # (5)!
         ],
     )
 
@@ -392,25 +394,29 @@ For example, let us add two filters to the [dynamic data example](#dynamic-data)
     Vizro().build(dashboard).run()
     ```
 
+    1. Add a new column `"date_column"` to the `"iris"` data source. This column is used to demonstrate usage of a temporal dynamic filter.
     1. We sample only 5 rather than 50 points so that changes to the available values in the filtered columns are more apparent when the page is refreshed.
     1. This filter implicitly controls the dynamic data source `"iris"`, which supplies the `data_frame` to the targeted `vm.Graph`. On page refresh, Vizro reloads this data, finds all the unique values in the `"species"` column and sets the categorical selector's `options` accordingly.
     1. Similarly, on page refresh, Vizro finds the minimum and maximum values of the `"sepal_length"` column in the reloaded data and sets new `min` and `max` values for the numerical selector accordingly.
+    1. Similarly, on page refresh, Vizro finds the minimum and maximum values of the `"date_column"` column in the reloaded data and sets new `min` and `max` values for the temporal selector accordingly.
 
-Consider a filter that depends on dynamic data, where you do **not** want the available values to change when the dynamic data changes. You should manually specify the `selector`'s `options` field (categorical selector) or `min` and `max` fields (numerical selector). In the above example, this could be achieved as follows:
+Consider a filter that depends on dynamic data, where you do **not** want the available values to change when the dynamic data changes. You should manually specify the `selector`'s `options` field (categorical selector) or `min` and `max` fields (numerical and temporal selector). In the above example, this could be achieved as follows:
 
 ```python title="Override selector options to make a dynamic filter static"
 controls = [
     vm.Filter(column="species", selector=vm.Dropdown(options=["setosa", "versicolor", "virginica"])),
     vm.Filter(column="sepal_length", selector=vm.RangeSlider(min=4.3, max=7.9)),
+    vm.Filter(column="date_column", selector=vm.DatePickerRange(min="2025-01-01", max="2025-05-29")),
 ]
 ```
 
-If you [use a specific selector](filters.md#change-selector) for a dynamic filter without manually specifying `options` (categorical selector) or `min` and `max` (numerical selector) then the selector remains dynamic. For example:
+If you [use a specific selector](filters.md#change-selector) for a dynamic filter without manually specifying `options` (categorical selector) or `min` and `max` (numerical and temporal selector) then the selector remains dynamic. For example:
 
 ```python title="Dynamic filter with specific selector is still dynamic"
 controls = [
     vm.Filter(column="species", selector=vm.Checklist()),
     vm.Filter(column="sepal_length", selector=vm.Slider()),
+    vm.Filter(column="date_column", selector=vm.DatePicker(range=False)),
 ]
 ```
 

vizro-core/examples/scratch_dev/data.yaml

@@ -1,12 +1,3 @@
-# Choose between 0-50
-setosa: 5
-versicolor: 10
-virginica: 15
-
-# Choose between: 4.3 to 7.4
-min: 5
-max: 7
-
-# Choose between: 2020-01-01 to 2020-05-29
-date_min: 2024-01-01
-date_max: 2024-05-29
+# Choose between: 2024-01-01 to 2024-05-29
+date_min: 2024-03-05
+date_max: 2024-03-10

vizro-core/src/vizro/models/_components/form/date_picker.py

@@ -11,6 +11,7 @@
 from vizro.models import Action, VizroBaseModel
 from vizro.models._action._actions_chain import _action_validator_factory
 from vizro.models._components.form._form_utils import validate_date_picker_range, validate_max, validate_range_value
+from vizro.models._models_utils import _log_call
 
 
 class DatePicker(VizroBaseModel):
@@ -42,7 +43,7 @@ class DatePicker(VizroBaseModel):
     value: Annotated[
         Optional[Union[list[date], date]],
         # TODO[MS]: check here and similar if the early exit clause in below validator or similar is
-        # necessary given we don't validate on default
+        #  necessary given we don't validate on default
         AfterValidator(validate_range_value),
         Field(default=None, description="Default date/dates for date picker."),
     ]
@@ -72,16 +73,22 @@ class DatePicker(VizroBaseModel):
         ]
     ]
 
-    _input_property: str = PrivateAttr("value")
+    _dynamic: bool = PrivateAttr(False)
 
-    def build(self):
-        init_value = self.value or ([self.min, self.max] if self.range else self.min)  # type: ignore[list-item]
+    _input_property: str = PrivateAttr("value")
 
+    def __call__(self, min, max, current_value=None):
+        # TODO: Refactor value calculation logic after the Dash persistence bug is fixed and "Select All" PR is merged.
+        #  The underlying component's value calculation will need to account for:
+        #  - Changes introduced by Pydantic V2.
+        #  - The way how the new Vizro solution is built on top of the Dash persistence bugfix.
+        #  - Whether the current value is included in the updated options.
+        #  - The way how the validate_options_dict validator and tests are improved.
         defaults = {
             "id": self.id,
-            "minDate": self.min,
-            "value": init_value,
-            "maxDate": self.max,
+            "minDate": min,
+            "value": self.value or ([min, max] if self.range else min),
+            "maxDate": max,
             "persistence": True,
             "persistence_type": "session",
             "type": "range" if self.range else "default",
@@ -96,3 +103,13 @@ def build(self):
                 dmc.DatePickerInput(**(defaults | self.extra)),
             ],
         )
+
+    def _build_dynamic_placeholder(self):
+        if not self.value:
+            self.value = [self.min, self.max] if self.range else self.min  # type: ignore[list-item]
+
+        return self.__call__(self.min, self.max)
+
+    @_log_call
+    def build(self):
+        return self._build_dynamic_placeholder() if self._dynamic else self.__call__(self.min, self.max)

vizro-core/src/vizro/models/_controls/filter.py

@@ -1,6 +1,7 @@
 from __future__ import annotations
 
 from collections.abc import Iterable
+from contextlib import suppress
 from typing import Annotated, Any, Literal, Optional, Union, cast
 
 import pandas as pd
@@ -23,7 +24,7 @@
     Slider,
 )
 from vizro.models._models_utils import _log_call
-from vizro.models.types import FigureType, MultiValueType, SelectorType
+from vizro.models.types import FigureType, MultiValueType, SelectorType, SingleValueType
 
 # Ideally we might define these as NumericalSelectorType = Union[RangeSlider, Slider] etc., but that will not work
 # with isinstance checks.
@@ -46,11 +47,6 @@
     "categorical": SELECTORS["numerical"] + SELECTORS["temporal"],
 }
 
-# TODO: Remove DYNAMIC_SELECTORS along with its validation check when support dynamic mode for the DatePicker selector.
-# Tuple of filter selectors that support dynamic mode
-DYNAMIC_SELECTORS = (Dropdown, Checklist, RadioItems, Slider, RangeSlider)
-DynamicNonCategoricalSelectorType = Union[Slider, RangeSlider]
-
 
 def _filter_between(series: pd.Series, value: Union[list[float], list[str]]) -> pd.Series:
     if is_datetime64_any_dtype(series):
@@ -126,7 +122,7 @@ def __call__(self, target_to_data_frame: dict[ModelID, pd.DataFrame], current_va
             self.selector = cast(CategoricalSelectorType, self.selector)
             return self.selector(options=self._get_options(targeted_data, current_value))
         else:
-            self.selector = cast(DynamicNonCategoricalSelectorType, self.selector)
+            self.selector = cast(NumericalTemporalSelectorType, self.selector)
             _min, _max = self._get_min_max(targeted_data, current_value)
             # "current_value" is propagated only to support dcc.Input and dcc.Store components in numerical selectors
             # to work with a dynamic selector. This can be removed when dash persistence bug is fixed.
@@ -178,7 +174,7 @@ def pre_build(self):
         # The filter is dynamic iff mentioned attributes ("options"/"min"/"max") are not explicitly provided and
         # filter targets at least one figure that uses dynamic data source. Note that min or max = 0 are Falsey values
         # but should still count as manually set.
-        if isinstance(self.selector, DYNAMIC_SELECTORS) and (
+        if (
             not getattr(self.selector, "options", [])
             and getattr(self.selector, "min", None) is None
             and getattr(self.selector, "max", None) is None
@@ -296,7 +292,16 @@ def _validate_column_type(self, targeted_data: pd.DataFrame) -> Literal["numeric
             )
 
     @staticmethod
-    def _get_min_max(targeted_data: pd.DataFrame, current_value=None) -> tuple[float, float]:
+    def _get_min_max(
+        targeted_data: pd.DataFrame,
+        current_value: Optional[Union[SingleValueType, MultiValueType]] = None,
+    ) -> Union[tuple[float, float], tuple[pd.Timestamp, pd.Timestamp]]:
+        # Try to convert the current value to a datetime object. If it fails (like for Slider), it will be left as is.
+        # By default, DatePicker produces inputs in the following format: "YYYY-MM-DD".
+        # "ISO8601" is used to enable the conversion process for custom DatePicker components and custom formats.
+        with suppress(ValueError):
+            current_value = pd.to_datetime(current_value, format="ISO8601")
+
         targeted_data = pd.concat([targeted_data, pd.Series(current_value)]).stack().dropna()  # noqa: PD013
 
         _min = targeted_data.min(axis=None)
@@ -312,7 +317,16 @@ def _get_min_max(targeted_data: pd.DataFrame, current_value=None) -> tuple[float
         return _min, _max
 
     @staticmethod
-    def _get_options(targeted_data: pd.DataFrame, current_value=None) -> list[Any]:
+    def _get_options(
+        targeted_data: pd.DataFrame,
+        current_value: Optional[Union[SingleValueType, MultiValueType]] = None,
+    ) -> list[Any]:
+        # Try to convert the current value to a datetime object. If it fails (like for Slider), it will be left as is.
+        # By default, DatePicker produces inputs in the following format: "YYYY-MM-DD".
+        # "ISO8601" is used to enable the conversion process for custom DatePicker components and custom formats.
+        with suppress(ValueError):
+            current_value = pd.to_datetime(current_value, format="ISO8601")
+
         # The dropna() isn't strictly required here but will be in future pandas versions when the behavior of stack
         # changes. See https://pandas.pydata.org/docs/whatsnew/v2.1.0.html#whatsnew-210-enhancements-new-stack.
         targeted_data = pd.concat([targeted_data, pd.Series(current_value)]).stack().dropna()  # noqa: PD013