AGGrid implementation

vizro-core/examples/default/app_dev.py

@@ -0,0 +1,172 @@
+"""Example to show dashboard configuration."""
+from typing import List
+
+import pandas as pd
+from dash import State, dash_table
+
+import vizro.models as vm
+import vizro.plotly.express as px
+from vizro import Vizro
+from vizro.actions import export_data, filter_interaction
+from vizro.models.types import capture
+from vizro.tables import dash_ag_grid, dash_data_table
+
+df = px.data.gapminder()
+df_mean = (
+    df.groupby(by=["continent", "year"]).agg({"lifeExp": "mean", "pop": "mean", "gdpPercap": "mean"}).reset_index()
+)
+
+df_transformed = df.copy()
+df_transformed["lifeExp"] = df.groupby(by=["continent", "year"])["lifeExp"].transform("mean")
+df_transformed["gdpPercap"] = df.groupby(by=["continent", "year"])["gdpPercap"].transform("mean")
+df_transformed["pop"] = df.groupby(by=["continent", "year"])["pop"].transform("sum")
+df_concat = pd.concat([df_transformed.assign(color="Continent Avg."), df.assign(color="Country")], ignore_index=True)
+
+
+def my_custom_table(data_frame=None, id: str = None, chosen_columns: List[str] = None):
+    """Custom table."""
+    columns = [{"name": i, "id": i} for i in chosen_columns]
+    defaults = {
+        "style_as_list_view": True,
+        "style_data": {"border_bottom": "1px solid var(--border-subtle-alpha-01)", "height": "40px"},
+        "style_header": {
+            "border_bottom": "1px solid var(--state-overlays-selected-hover)",
+            "border_top": "1px solid var(--main-container-bg-color)",
+            "height": "32px",
+        },
+    }
+    return dash_table.DataTable(data=data_frame.to_dict("records"), columns=columns, id=id, **defaults)
+
+
+my_custom_table.action_info = {
+    "filter_interaction_input": lambda x: {
+        "active_cell": State(component_id=x._callable_object_id, component_property="active_cell"),
+        "derived_viewport_data": State(
+            component_id=x._callable_object_id,
+            component_property="derived_viewport_data",
+        ),
+    }
+}
+
+my_custom_table = capture("table")(my_custom_table)
+
+
+def create_benchmark_analysis():
+    """Function returns a page to perform analysis on country level."""
+    # Apply formatting to table columns
+    columns = [
+        {"id": "country", "name": "country"},
+        {"id": "continent", "name": "continent"},
+        {"id": "year", "name": "year"},
+        {"id": "lifeExp", "name": "lifeExp", "type": "numeric", "format": {"specifier": ",.1f"}},
+        {"id": "gdpPercap", "name": "gdpPercap", "type": "numeric", "format": {"specifier": "$,.2f"}},
+        {"id": "pop", "name": "pop", "type": "numeric", "format": {"specifier": ",d"}},
+    ]
+
+    page_country = vm.Page(
+        title="Benchmark Analysis",
+        # description="Discovering how the metrics differ for each country and export data for further investigation",
+        # layout=vm.Layout(grid=[[0, 1]] * 5 + [[2, -1]], col_gap="32px", row_gap="60px"),
+        components=[
+            vm.Table(
+                id="table_country_new",
+                title="Click on a cell in country column:",
+                figure=dash_ag_grid(
+                    id="dash_ag_grid_country",
+                    data_frame=df,
+                ),
+                actions=[vm.Action(function=filter_interaction(targets=["line_country"]))],
+            ),
+            vm.Table(
+                id="table_country",
+                title="Click on a cell in country column:",
+                figure=dash_data_table(
+                    id="dash_data_table_country",
+                    data_frame=df,
+                    columns=columns,
+                    style_data_conditional=[
+                        {
+                            "if": {"filter_query": "{gdpPercap} < 1045", "column_id": "gdpPercap"},
+                            "backgroundColor": "#ff9222",
+                        },
+                        {
+                            "if": {
+                                "filter_query": "{gdpPercap} >= 1045 && {gdpPercap} <= 4095",
+                                "column_id": "gdpPercap",
+                            },
+                            "backgroundColor": "#de9e75",
+                        },
+                        {
+                            "if": {
+                                "filter_query": "{gdpPercap} > 4095 && {gdpPercap} <= 12695",
+                                "column_id": "gdpPercap",
+                            },
+                            "backgroundColor": "#aaa9ba",
+                        },
+                        {
+                            "if": {"filter_query": "{gdpPercap} > 12695", "column_id": "gdpPercap"},
+                            "backgroundColor": "#00b4ff",
+                        },
+                    ],
+                    sort_action="native",
+                    style_cell={"textAlign": "left"},
+                ),
+                actions=[vm.Action(function=filter_interaction(targets=["line_country"]))],
+            ),
+            vm.Graph(
+                id="line_country",
+                figure=px.line(
+                    df_concat,
+                    title="Country vs. Continent",
+                    x="year",
+                    y="gdpPercap",
+                    color="color",
+                    labels={"year": "Year", "data": "Data", "gdpPercap": "GDP per capita"},
+                    color_discrete_map={"Country": "#afe7f9", "Continent": "#003875"},
+                    markers=True,
+                    hover_name="country",
+                ),
+            ),
+            vm.Button(
+                text="Export data",
+                actions=[
+                    vm.Action(
+                        function=export_data(
+                            targets=["line_country"],
+                        )
+                    ),
+                ],
+            ),
+            vm.Table(  # the custom table works with its own set of states defined above
+                id="custom_table",
+                title="Custom Dash DataTable",
+                figure=my_custom_table(
+                    id="custom_dash_table_callable_id",
+                    data_frame=df,
+                    chosen_columns=["country", "continent", "lifeExp", "pop", "gdpPercap"],
+                ),
+                actions=[vm.Action(function=filter_interaction(targets=["line_country"]))],
+            ),
+        ],
+        controls=[
+            vm.Filter(column="continent", selector=vm.Dropdown(value="Europe", multi=False, title="Select continent")),
+            vm.Filter(column="year", selector=vm.RangeSlider(title="Select timeframe", step=1, marks=None)),
+            vm.Parameter(
+                targets=["line_country.y"],
+                selector=vm.Dropdown(
+                    options=["lifeExp", "gdpPercap", "pop"], multi=False, value="gdpPercap", title="Choose y-axis"
+                ),
+            ),
+        ],
+    )
+    return page_country
+
+
+dashboard = vm.Dashboard(
+    pages=[
+        create_benchmark_analysis(),
+    ],
+)
+
+if __name__ == "__main__":
+    Vizro(assets_folder="../assets").build(dashboard).run()

vizro-core/pyproject.toml

@@ -28,7 +28,8 @@ dependencies = [
   "tornado>=6.3.2",  # not directly required, pinned by Snyk to avoid a vulnerability: https://security.snyk.io/vuln/SNYK-PYTHON-TORNADO-5537286
   "setuptools>=65.5.1",  # not directly required, pinned by Snyk to avoid a vulnerability: https://security.snyk.io/vuln/SNYK-PYTHON-SETUPTOOLS-3180412
   "werkzeug>=3.0.1",  # not directly required, pinned by Snyk to avoid a vulnerability: https://security.snyk.io/vuln/SNYK-PYTHON-WERKZEUG-6035177
-  "MarkupSafe"  # required to sanitize user input
+  "MarkupSafe",  # required to sanitize user input,
+  "dash-ag-grid"
 ]
 description = "Vizro is a package to facilitate visual analytics."
 dynamic = ["version"]

vizro-core/src/vizro/actions/_actions_utils.py

@@ -111,7 +111,7 @@ def _get_parent_vizro_model(_underlying_callable_object_id: str) -> VizroBaseMod
     )
 
 
-def _apply_table_filter_interaction(
+def _apply_dashtable_filter_interaction(
     data_frame: pd.DataFrame, target: str, ctd_filter_interaction: Dict[str, CallbackTriggerDict]
 ) -> pd.DataFrame:
     ctd_active_cell = ctd_filter_interaction["active_cell"]
@@ -133,12 +133,34 @@ def _apply_table_filter_interaction(
     return data_frame
 
 
+def _apply_aggrid_filter_interaction(
+    data_frame: pd.DataFrame, target: str, ctd_filter_interaction: Dict[str, CallbackTriggerDict]
+) -> pd.DataFrame:
+    ctd_cellClicked = ctd_filter_interaction["cellClicked"]
+    if not ctd_cellClicked["value"]:
+        return data_frame
+
+    # ctd_active_cell["id"] represents the underlying table id, so we need to fetch its parent Vizro Table actions.
+    source_table_actions = _get_component_actions(_get_parent_vizro_model(ctd_cellClicked["id"]))
+
+    for action in source_table_actions:
+        if action.function._function.__name__ != "filter_interaction" or target not in action.function["targets"]:
+            continue
+        column = ctd_cellClicked["value"]["colId"]
+        clicked_data = ctd_cellClicked["value"]["value"]
+        data_frame = data_frame[data_frame[column].isin([clicked_data])]
+
+    return data_frame
+
+
 def _apply_filter_interaction(
     data_frame: pd.DataFrame,
     ctds_filter_interaction: List[Dict[str, CallbackTriggerDict]],
     target: str,
 ) -> pd.DataFrame:
     for ctd_filter_interaction in ctds_filter_interaction:
+        # This would also have to be abstracted outside the function, but is a little more complicated
+        # essentially we have to go: ctd_filter_interaction[<wildcard>]["id"] -> get parent Vizro Table -> get function -> get attributes
         if "clickData" in ctd_filter_interaction:
             data_frame = _apply_graph_filter_interaction(
                 data_frame=data_frame,
@@ -147,7 +169,14 @@ def _apply_filter_interaction(
             )
 
         if "active_cell" in ctd_filter_interaction and "derived_viewport_data" in ctd_filter_interaction:
-            data_frame = _apply_table_filter_interaction(
+            data_frame = _apply_dashtable_filter_interaction(
+                data_frame=data_frame,
+                target=target,
+                ctd_filter_interaction=ctd_filter_interaction,
+            )
+
+        if "cellClicked" in ctd_filter_interaction:
+            data_frame = _apply_aggrid_filter_interaction(
                 data_frame=data_frame,
                 target=target,
                 ctd_filter_interaction=ctd_filter_interaction,

vizro-core/src/vizro/actions/_callback_mapping/_callback_mapping_utils.py

@@ -8,7 +8,7 @@
 from vizro.actions import _on_page_load, _parameter, export_data, filter_interaction
 from vizro.managers import data_manager, model_manager
 from vizro.managers._model_manager import ModelID
-from vizro.models import Action, Page, Table, VizroBaseModel
+from vizro.models import Action, Page, VizroBaseModel
 from vizro.models._action._actions_chain import ActionsChain
 from vizro.models._controls import Filter, Parameter
 from vizro.models.types import ControlType
@@ -108,18 +108,13 @@ def _get_inputs_of_figure_interactions(
     for action in figure_interactions_on_page:
         # TODO: Consider do we want to move the following logic into Model implementation
         triggered_model = _get_triggered_model(action_id=ModelID(str(action.id)))
-        if isinstance(triggered_model, Table):
-            inputs.append(
-                {
-                    "active_cell": State(
-                        component_id=triggered_model._callable_object_id, component_property="active_cell"
-                    ),
-                    "derived_viewport_data": State(
-                        component_id=triggered_model._callable_object_id,
-                        component_property="derived_viewport_data",
-                    ),
-                }
-            )
+        # This also needs to be done for the graph callables, but that should not be hard
+        # I think this would have made more sense if we had one model for tables and graphs
+        # But really this seems to rather demand an object oriented approach
+
+        if hasattr(triggered_model, "_table_type"):  # not check this, put this configuration inside the models
+            inputs.append(triggered_model.figure.action_info["filter_interaction_input"](triggered_model))
+
         else:
             inputs.append(
                 {

vizro-core/src/vizro/models/_components/table.py

@@ -12,14 +12,26 @@
 import vizro.tables as vt
 from vizro.managers import data_manager
 from vizro.models import Action, VizroBaseModel
-from vizro.models._action._actions_chain import _action_validator_factory
+from vizro.models._action._actions_chain import _set_actions
 from vizro.models._components._components_utils import _process_callable_data_frame
 from vizro.models._models_utils import _log_call
 from vizro.models.types import CapturedCallable
 
 logger = logging.getLogger(__name__)
 
 
+def _get_table_type(figure):  # this function can be applied also in pre-build
+    kwargs = figure._arguments.copy()
+
+    # This workaround is needed because the underlying table object requires a data_frame
+    kwargs["data_frame"] = DataFrame()
+
+    # The underlying table object is pre-built, so we can fetch its ID.
+    underlying_table_object = figure._function(**kwargs)
+    table_type = underlying_table_object.__class__.__name__
+    return underlying_table_object, table_type
+
+
 class Table(VizroBaseModel):
     """Wrapper for table components to visualize in dashboard.
 
@@ -37,14 +49,26 @@ class Table(VizroBaseModel):
     actions: List[Action] = []
 
     _callable_object_id: str = PrivateAttr()
+    _table_type: str = (
+        PrivateAttr()
+    )  # Ideally we would be able to use the populated content of this field in the `set_actions` validator.
 
     # Component properties for actions and interactions
     _output_property: str = PrivateAttr("children")
 
     # validator
-    set_actions = _action_validator_factory("active_cell")
     _validate_callable = validator("figure", allow_reuse=True, always=True)(_process_callable_data_frame)
 
+    @validator("actions")
+    def set_actions(cls, v, values):
+        _, table_type = _get_table_type(values["figure"])
+        if table_type == "DataTable":
+            return _set_actions(v, values, "active_cell")
+        elif table_type == "AgGrid":
+            return _set_actions(v, values, "cellClicked")
+        else:
+            raise ValueError(f"Table type {table_type} not supported.")
+
     # Convenience wrapper/syntactic sugar.
     def __call__(self, **kwargs):
         kwargs.setdefault("data_frame", data_manager._get_component_data(self.id))
@@ -61,13 +85,7 @@ def __getitem__(self, arg_name: str):
     @_log_call
     def pre_build(self):
         if self.actions:
-            kwargs = self.figure._arguments.copy()
-
-            # This workaround is needed because the underlying table object requires a data_frame
-            kwargs["data_frame"] = DataFrame()
-
-            # The underlying table object is pre-built, so we can fetch its ID.
-            underlying_table_object = self.figure._function(**kwargs)
+            underlying_table_object, table_type = _get_table_type(self.figure)
 
             if not hasattr(underlying_table_object, "id"):
                 raise ValueError(
@@ -76,6 +94,10 @@ def pre_build(self):
                 )
 
             self._callable_object_id = underlying_table_object.id
+            self._table_type = table_type
+            # Idea: fetch it from the functions attributes? Or just hard-code it here?
+            # Can check difference between AGGrid and dashtable because we call it already
+            # Once we recognize, two ways to go: 1) slightly change model properties 2) inject dash dependencies,
 
     def build(self):
         return dcc.Loading(

vizro-core/src/vizro/models/types.py

@@ -306,6 +306,9 @@ def wrapped(*args, **kwargs):
                     captured_callable["data_frame"]
                 except KeyError as exc:
                     raise ValueError(f"{func.__name__} must supply a value to data_frame argument.") from exc
+
+                if hasattr(func, "action_info"):
+                    captured_callable.action_info = func.action_info
                 return captured_callable
 
             return wrapped

vizro-core/src/vizro/tables/__init__.py

@@ -1,4 +1,5 @@
+from vizro.tables.dash_aggrid import dash_ag_grid
 from vizro.tables.dash_table import dash_data_table
 
 # Please keep alphabetically ordered
-__all__ = ["dash_data_table"]
+__all__ = ["dash_ag_grid", "dash_data_table"]

vizro-core/src/vizro/tables/dash_aggrid.py

@@ -0,0 +1,20 @@
+import dash_ag_grid as dag
+from dash import State
+
+from vizro.models.types import capture
+
+
+def dash_ag_grid(data_frame=None, **kwargs):
+    """Custom AgGrid."""
+    return dag.AgGrid(
+        rowData=data_frame.to_dict("records"), columnDefs=[{"field": col} for col in data_frame.columns], **kwargs
+    )
+
+
+dash_ag_grid.action_info = {
+    "filter_interaction_input": lambda x: {
+        "cellClicked": State(component_id=x._callable_object_id, component_property="cellClicked"),
+    }
+}
+
+dash_ag_grid = capture("table")(dash_ag_grid)