[Feat] Enable new dcc components from dash==4.0.0rc6

vizro-core/examples/scratch_dev/app.py

@@ -1,20 +1,78 @@
-import vizro.plotly.express as px
+import numpy as np
+import pandas as pd
 import vizro.models as vm
+import vizro.plotly.express as px
+from dash_ag_grid import AgGrid
 from vizro import Vizro
+from vizro.models.types import capture
+from vizro.managers import data_manager
+
+data_manager["static_df"] = px.data.iris()
+data_manager["dynamic_df"] = lambda number_of_points=10: px.data.iris().head(number_of_points)
+
+
+SPECIES_COLORS = {"setosa": "#00b4ff", "versicolor": "#ff9222", "virginica": "#3949ab"}
 
-df = px.data.iris()
 
 page_1 = vm.Page(
-    title="BUG theme switch doesn't work with Flex layout",
-    layout=vm.Flex(),
+    title="Single/Multi static DD",
     components=[
-        vm.Graph(figure=px.scatter(data_frame=df, x="sepal_width", y="sepal_length")),
-        vm.Graph(figure=px.scatter(data_frame=df.head(10), x="sepal_width", y="sepal_length")),
-        vm.Card(text="test"),
+        vm.Graph(
+            figure=px.scatter(
+                "static_df", x="sepal_width", y="sepal_length", color="species", color_discrete_map=SPECIES_COLORS
+            )
+        )
+    ],
+    controls=[
+        vm.Filter(column="species", selector=vm.Dropdown(multi=True)),
+        vm.Filter(column="species", selector=vm.Dropdown(multi=False)),
     ],
 )
 
-dashboard = vm.Dashboard(pages=[page_1])
+page_2 = vm.Page(
+    title="Single/Multi dynamic DD",
+    components=[
+        vm.Graph(
+            id="graph_2",
+            figure=px.scatter(
+                "dynamic_df", x="sepal_width", y="sepal_length", color="species", color_discrete_map=SPECIES_COLORS
+            ),
+        )
+    ],
+    controls=[
+        # TODO-REVIEWER: To a bug with the standard _build_dynamic_placeholder:
+        #  1. Replace vm.Dropdown._build_dynamic_placeholder with vm.Checklist._build_dynamic_placeholder implementation
+        #  2. Run the app and open page_2
+        #  3. Select values ["setosa", "versicolor"] in the multi Dropdown, and "versicolor" in the single Dropdown
+        #  4. Refresh the page.
+        vm.Filter(column="species", selector=vm.Dropdown(multi=True)),
+        vm.Filter(column="species", selector=vm.Dropdown(multi=False)),
+        vm.Parameter(
+            targets=["graph_2.data_frame.number_of_points"], selector=vm.Slider(min=10, max=150, step=10, value=10)
+        ),
+    ],
+)
+
+
+long_df = pd.DataFrame(
+    {
+        # TODO-UI: By setting max width of the Dropdown seems like option height is automatically adjusted.
+        "long_string": [
+            # List of 100 strings with variable number (1 -> 101) of characters "A"(95%) or space " "(5%).
+            "Value " + "".join(" " if np.random.rand() < 0.05 else "A" for _ in range(length))
+            for length in range(1, 101)
+        ],
+        "x": range(1, 101),
+        "y": range(101, 201),
+    }
+)
+
+page_3 = vm.Page(
+    title="Long values in Dropdown",
+    components=[vm.Graph(figure=px.scatter(long_df, x="x", y="y"))],
+    controls=[vm.Filter(column="long_string")],
+)
 
+dashboard = vm.Dashboard(pages=[page_1, page_2, page_3])
 if __name__ == "__main__":
     Vizro().build(dashboard).run()

vizro-core/hatch.toml

@@ -161,7 +161,7 @@ VIZRO_LOG_LEVEL = "DEBUG"
 
 [envs.lower-bounds]
 extra-dependencies = [
-  "dash==3.1.1",
+  "dash==4.0.0rc2",
   "dash-bootstrap-components==2.0.0",
   "dash-ag-grid==31.3.1",
   "dash-mantine-components==1.0.0",

vizro-core/pyproject.toml

@@ -15,7 +15,7 @@ classifiers = [
   "Programming Language :: Python :: 3.13"
 ]
 dependencies = [
-  "dash>=3.1.1,<4",  # temporary upper bound to avoid breaking changes in Dash v4
+  "dash==4.0.0rc2",  # temporary upper bound to avoid breaking changes in Dash v4
   "dash_bootstrap_components>=2",  # 2.0.0 needed to support dash>=3.0.0
   "dash-ag-grid>=31.3.1",  # 31.3.1 needed to support dash>=3.0.0
   "dash_mantine_components>=1",  # 1.0.0 needed to support dash>=3.0.0

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

@@ -1,10 +1,8 @@
-import math
-from datetime import date
-from typing import Annotated, Any, Literal, Optional, Union, cast
+from typing import Annotated, Any, Literal, Optional, Union
 
 import dash_bootstrap_components as dbc
-from dash import ClientsideFunction, Input, Output, State, clientside_callback, dcc, html
-from pydantic import AfterValidator, BeforeValidator, Field, PrivateAttr, StrictBool, ValidationInfo, model_validator
+from dash import dcc, html
+from pydantic import AfterValidator, BeforeValidator, Field, PrivateAttr, ValidationInfo, model_validator
 from pydantic.json_schema import SkipJsonSchema
 
 from vizro.models import Tooltip, VizroBaseModel
@@ -33,24 +31,6 @@ def validate_multi(multi, info: ValidationInfo):
     return multi
 
 
-def _get_list_of_labels(full_options: OptionsType) -> Union[list[StrictBool], list[float], list[str], list[date]]:
-    """Returns a list of labels from the selector options provided."""
-    if all(isinstance(option, dict) for option in full_options):
-        return [option["label"] for option in full_options]  # type: ignore[index]
-    else:
-        return cast(Union[list[StrictBool], list[float], list[str], list[date]], full_options)
-
-
-def _calculate_option_height(full_options: OptionsType, char_count: int) -> int:
-    """Calculates the height of the dropdown options based on the longest option."""
-    # We look at the longest option to find number_of_lines it requires. Option height is the same for all options
-    # and needs 24px for each line + 8px padding.
-    list_of_labels = _get_list_of_labels(full_options)
-    max_length = max(len(str(option)) for option in list_of_labels)
-    number_of_lines = math.ceil(max_length / char_count)
-    return 8 + 24 * number_of_lines
-
-
 class Dropdown(VizroBaseModel):
     """Categorical single/multi-option selector `Dropdown`.
 
@@ -148,41 +128,17 @@ def _action_inputs(self) -> dict[str, _IdProperty]:
 
     def __call__(self, options):
         dict_options, default_value = get_dict_options_and_default(options=options, multi=self.multi)
-        # 24 characters is roughly the number of "A" characters you can fit comfortably on a line in the page dropdown
-        # (placed on the left-side 280px width). 15 is the width for when the dropdown is in a container's controls.
-        # "A" is representative of a slightly wider than average character:
-        # https://stackoverflow.com/questions/3949422/which-letter-of-the-english-alphabet-takes-up-most-pixels
-        option_height = _calculate_option_height(dict_options, 15 if self._in_container else 24)
 
         value = self.value if self.value is not None else default_value
-
-        if self.multi:
-            self._update_dropdown_select_all()
-            value = value if isinstance(value, list) else [value]  # type: ignore[assignment]
-            dict_options = [
-                {
-                    "label": dbc.Checkbox(
-                        id=f"{self.id}_select_all",
-                        value=len(value) == len(dict_options),  # type: ignore[arg-type]
-                        label="Select All",
-                        persistence=True,
-                        persistence_type="session",
-                        className="dropdown-select-all",
-                    ),
-                    # Special sentinel value used in update_dropdown_select_all.
-                    # This never gets sent to the server.
-                    "value": "__SELECT_ALL",
-                },
-                *dict_options,
-            ]
+        if self.multi and not isinstance(value, list):
+            value = [value]
 
         description = self.description.build().children if self.description else [None]
         defaults = {
             "id": self.id,
             "options": dict_options,
             "value": value,
             "multi": self.multi,
-            "optionHeight": option_height,
             "persistence": True,
             "persistence_type": "session",
             "placeholder": "Select option",
@@ -214,50 +170,24 @@ def _build_dynamic_placeholder(self):
         # because placeholder for the Dropdown can't be the dropdown itself. The reason is that the Dropdown value can
         # be unexpectedly changed when the new options are added. This is developed as the dash feature
         # https://github.com/plotly/dash/pull/1970.
-        if self.multi:
-            # Add the clientside callback as the callback has to be defined in the page.build process.
-            self._update_dropdown_select_all()
-            # hidden_select_all_dropdown is needed to ensure that clientside callback doesn't raise the no output error.
-            hidden_select_all_dropdown = [dcc.Dropdown(id=f"{self.id}_select_all", style={"display": "none"})]
-            placeholder_model = dcc.Checklist
-            placeholder_options = self.value
-        else:
-            hidden_select_all_dropdown = [None]
-            placeholder_model = dbc.RadioItems
-            placeholder_options = [self.value]  # type: ignore[assignment]
+        plh_model, plh_options = (dcc.Checklist, self.value) if self.multi else (dbc.RadioItems, [self.value])
 
         description = self.description.build().children if self.description else [None]
         return html.Div(
             children=[
                 dbc.Label(
                     children=[html.Span(id=f"{self.id}_title", children=self.title), *description], html_for=self.id
                 ),
-                placeholder_model(
+                plh_model(
                     id=self.id,
-                    options=placeholder_options,
+                    options=plh_options,
                     value=self.value,
                     persistence=True,
                     persistence_type="session",
                 ),
-                *hidden_select_all_dropdown,
             ]
         )
 
     @_log_call
     def build(self):
         return self._build_dynamic_placeholder() if self._dynamic else self.__call__(self.options)
-
-    def _update_dropdown_select_all(self):
-        """Define the clientside callbacks in the page build phase responsible for handling the select_all."""
-        clientside_callback(
-            ClientsideFunction(namespace="dropdown", function_name="update_dropdown_select_all"),
-            output=[
-                Output(f"{self.id}_select_all", "value"),
-                Output(self.id, "value", allow_duplicate=True),
-            ],
-            inputs=[
-                Input(self.id, "value"),
-                State(self.id, "options"),
-            ],
-            prevent_initial_call="initial_duplicate",
-        )