Enable dash datatable

vizro-core/pyproject.toml

@@ -27,7 +27,8 @@ dependencies = [
   "numpy>=1.22.2",  # not directly required, pinned by Snyk to avoid a vulnerability: https://security.snyk.io/vuln/SNYK-PYTHON-NUMPY-2321970
   "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
-  "MarkupSafe"  # required to sanitise user input
+  "MarkupSafe",  # required to sanitise user input
+  # "d3_bar_chart @ file:///Users/huong_li_nguyen/Desktop/d3_bar_chart-0.0.1-py3-none-any.whl"
 ]
 description = "Vizro is a package to facilitate visual analytics."
 dynamic = ["version"]
@@ -64,3 +65,6 @@ skip_covered = true
 branch = true
 parallel = true
 source_pkgs = ["vizro"]
+
+[tool.hatch.metadata]
+allow-direct-references = true

vizro-core/src/scratch.py

@@ -0,0 +1,97 @@
+# API for Table/React Charts
+import d3_bar_chart
+from dash import dash_table
+
+import vizro.models as vm
+from vizro.models.types import capture
+
+
+# Dash Table
+@capture("graph")
+def dash_table(data_frame=None, **kwargs):
+    """Custom table."""
+    return dash_table.DataTable(
+        data=data_frame.to_dict("records"), columns=[{"name": i, "id": i} for i in data_frame.columns], **kwargs
+    )
+
+
+# D3 Visualisation
+@capture("graph")
+def d3_bar_chart(data_frame=None):
+    """Custom table."""
+    return d3_bar_chart.D3BarChart(
+        data_frame=data_frame,  # Custom D3 charts should have data_frame or other data arg
+        id="input",
+        value="my-value",
+        label="my-label",
+    )
+
+
+# 1) Graph ---------------------
+vm.Graph(figure=dash_table)
+vm.Graph(figure=d3_bar_chart)
+
+"""
+Pro:
+- One wrapper for all charts
+
+Con:
+- Returning different object based on figure -> dcc.Graph or html.Div
+- Would contradict our current paradigm of naming models close to what is being used underneath
+
+To consider
+- dash keeps Graph and Table separate as well -> Graph enables all plotly.js powered charts, Table has different figure json schema and is therefore separate
+- clickEvent property differs from the rest of px.charts --> needs to be refactored out of Graph
+- post update calls differ (e.g. update_layout not available) --> needs to be refactored out of Graph
+"""
+
+
+# 2) Table & React --------------------
+vm.Table2(data_frame, **kwargs)
+vm.React(figure=d3_bar_chart)
+
+"""
+Pro:
+- No need to create a custom chart, as datatable logic will live within the component (consistent with other components other than Graph)
+
+Con:
+- Need to enable many of the args from the dash datatable or enable users to provide *kwargs which deviates from all other models
+- Would need to create a custom chart from Table instance anyways to enable more sophisticated functionality required by verticals
+- Would need another wrapper for other react charts -> bad paradigm to create new model for each new react chart
+"""
+
+# 3) Table & React (currently preferred) --------------------
+vm.Table(figure=dash_table)
+vm.React(figure=d3_bar_chart)
+
+"""
+Pro:
+- Users can customize their table to their liking and we don't maintain these args
+
+Con:
+- Users have to create a custom chart first and then provide it to the table
+- Separate models for Table and other react components
+- Table would only support one type of figure - does it then even deserve its own model?
+
+To consider
+- Does it make sense to have a figure argument if only one type of figure can be provided?
+- Would we create our own custom react table at some point?
+"""
+
+
+# 4) ReactFigure --------------------
+vm.React(figure=dash_table)
+vm.React(figure=d3_bar_chart)
+
+"""
+Pro:
+- Eventually gives us more freedom in creating custom js components
+- Is only a thin wrapper and consistently returns an html.Div (one possible return type per model)
+
+Con:
+- Will have different clickEvent properties (that could be configured via custom actions though)
+
+To consider:
+- Should we actually extend the concept of this to vm.Html or vm.Container as essentially it just wraps the component inside an html.Div?
+  That model could then also be re-used for several other things? (Would mix lots of different concepts then though, so maybe bad idea)
+"""

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

@@ -192,12 +192,15 @@ def _get_modified_page_charts(
         parameters=ctds_parameters,
     )
 
-    outputs = {
-        target: model_manager[target](  # type: ignore[index, operator]
-            data_frame=filtered_data[target],
-            **parameterized_config[target],
-        ).update_layout(template="vizro_dark" if ctd_theme["value"] else "vizro_light")
-        for target in targets
-    }
+    outputs = {}
+    for target in targets:
+        if hasattr(model_manager[target], "_update_theme_call"):
+            outputs[target] = model_manager[target]._update_theme_call(
+                theme_bool=ctd_theme["value"], data_frame=filtered_data[target], **parameterized_config[target]
+            )
+        else:
+            outputs[target] = model_manager[target](data_frame=filtered_data[target], **parameterized_config[target])
+        # LN: needs to be refactored so plotly-independent or extendable - DONE
+        # MS: is the common theme to be targetable?
 
     return outputs

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

@@ -89,7 +89,7 @@ def _get_inputs_of_controls(action_id: ModelID, control_type: ControlType) -> Li
     return [
         State(
             component_id=control.selector.id,
-            component_property="value",
+            component_property="value",  # LN: needs to be refactored so that it is independent of implementation details
         )
         for control in page.controls
         if isinstance(control, control_type)
@@ -107,7 +107,7 @@ def _get_inputs_of_chart_interactions(
     return [
         State(
             component_id=_get_triggered_model(action_id=ModelID(str(action.id))).id,
-            component_property="clickData",
+            component_property="clickData",  # LN: needs to be refactored so that it is independent of implementation details
         )
         for action in chart_interactions_on_page
     ]
@@ -157,13 +157,10 @@ def _get_action_callback_outputs(action_id: ModelID) -> Dict[str, Output]:
     if action_function == _on_page_load.__wrapped__:
         targets = _get_components_with_data(action_id=action_id)
 
-    return {
-        target: Output(
-            component_id=target,
-            component_property="figure",
-            allow_duplicate=True,
-        )
+    return {  # LN: needs to be refactored so plotly-independent or extendable - DONE
+        target: model_manager[target]._get_action_callback_output()
         for target in targets
+        if hasattr(model_manager[target], "_get_action_callback_output")
     }
 
 

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

@@ -1,15 +1,17 @@
 # Keep this import at the top to avoid circular imports since it's used in every model.
 from ._base import VizroBaseModel  # noqa: I001
 from ._action import Action
-from ._components import Card, Graph
+from ._components import Card, Graph, Table, React
 from ._components.form import Button, Checklist, Dropdown, RadioItems, RangeSlider, Slider
 from ._controls import Filter, Parameter
 from ._navigation.navigation import Navigation
 from ._dashboard import Dashboard
 from ._layout import Layout
 from ._page import Page
 
-Page.update_forward_refs(Button=Button, Card=Card, Filter=Filter, Graph=Graph, Parameter=Parameter)
+Page.update_forward_refs(
+    Button=Button, Card=Card, Filter=Filter, Graph=Graph, Parameter=Parameter, Table=Table, React=React
+)
 Dashboard.update_forward_refs(Page=Page, Navigation=Navigation)
 
 # Please keep alphabetically ordered
@@ -28,6 +30,8 @@
     "Parameter",
     "RadioItems",
     "RangeSlider",
+    "React",
     "Slider",
     "VizroBaseModel",
+    "Table",
 ]

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

@@ -2,5 +2,8 @@
 from vizro.models._components.button import Button
 from vizro.models._components.card import Card
 from vizro.models._components.graph import Graph
+from vizro.models._components.react import React
+from vizro.models._components.table import Table
+from vizro.models._components.table2 import Table2
 
-__all__ = ["Button", "Card", "Graph"]
+__all__ = ["Button", "Card", "Graph", "Table", "Table2", "React"]

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

@@ -1,7 +1,7 @@
 import logging
 from typing import List, Literal
 
-from dash import dcc
+from dash import Output, dcc
 from plotly import graph_objects as go
 from pydantic import Field, validator
 
@@ -37,7 +37,9 @@ class Graph(VizroBaseModel):
     """
 
     type: Literal["graph"] = "graph"
-    figure: CapturedCallable = Field(..., import_path=px)
+    figure: CapturedCallable = Field(
+        ..., import_path=px
+    )  # LN: needs to be refactored so plotly-independent or extendable - No, as this is within the boundaries of Graph model
     actions: List[Action] = []
 
     # Re-used validators
@@ -78,7 +80,9 @@ def __call__(self, **kwargs):
 
         # Remove top margin if title is provided
         if fig.layout.title.text is None:
-            fig.update_layout(margin_t=24)
+            fig.update_layout(
+                margin_t=24
+            )  # LN: needs to be refactored so plotly-independent or extendable: No, as this is within the boundaries of Graph model
         return fig
 
     # Convenience wrapper/syntactic sugar.
@@ -109,3 +113,22 @@ def build(self):
             color="grey",
             parent_className="chart_container",
         )
+
+    def _update_theme_call(self, theme_bool, **kwargs):
+        """Define __call__ method that includes theme update if applicable."""
+        return self.__call__(**kwargs).update_layout(template="vizro_dark" if theme_bool else "vizro_light")
+
+    def _get_action_callback_output(self):
+        return Output(
+            component_id=self.id,
+            component_property="figure",
+            allow_duplicate=True,
+        )
+
+    def _get_update_graph_theme_output(self):
+        """Define output for theme selector callback."""
+        return Output(self.id, "figure", allow_duplicate=True)
+
+    # def _get_click_trigger_property(self):
+    #     """Define trigger property for click interaction"""
+    #     return "clickData"

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

@@ -0,0 +1,80 @@
+import logging
+from typing import Callable, List, Literal
+
+from dash import html
+from pydantic import Field, validator
+
+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._models_utils import _log_call
+from vizro.models.types import CapturedCallable
+
+logger = logging.getLogger(__name__)
+
+
+class React(VizroBaseModel):
+    """Wrapper for react components to visualize in dashboard.
+
+    Args:
+        type (Literal["react"]): Defaults to `"react"`.
+        figure (CapturedCallable): React object to be displayed.
+        # actions (List[Action]): List of the Action objects, that allows to
+        #     configure app interactions, triggered by affecting this component.
+    """
+
+    type: Literal["react"] = "react"
+    data: Callable = None
+    figure: CapturedCallable = Field(..., description="React component to be visualized on dashboard")
+    actions: List[Action] = []
+
+    # validator
+    set_actions = _action_validator_factory("active_cell")  # type: ignore[pydantic-field]
+
+    @validator("figure")
+    def process_component_data_frame(cls, figure, values):
+        data_frame = figure["data_frame"]
+
+        # Enable running "iris" from the Python API and specification of "data_frame": "iris" through JSON.
+        # In these cases, data already exists in the data manager and just needs to be linked to the component.
+        if isinstance(data_frame, str):
+            data_manager._add_component(values["id"], data_frame)
+            return figure
+
+        # Standard case for df: pd.DataFrame.
+        # Extract dataframe from the captured function and put it into the data manager.
+        dataset_name = str(id(data_frame))
+
+        logger.debug("Adding data to data manager for Graph with id %s", values["id"])
+        # If the dataset already exists in the data manager then it's not a problem, it just means that we don't need
+        # to duplicate it. Just log the exception for debugging purposes.
+        try:
+            data_manager[dataset_name] = data_frame
+        except ValueError as exc:
+            logger.debug(exc)
+
+        data_manager._add_component(values["id"], dataset_name)
+
+        # No need to keep the data in the captured function any more so remove it to save memory.
+        # del figure["data_frame"]
+        return figure
+
+    # Convenience wrapper/syntactic sugar.
+    def __call__(self, **kwargs):
+        kwargs.setdefault("data_frame", data_manager._get_component_data(self.id))  # type: ignore[arg-type]
+        return self.figure(**kwargs)
+
+    # Convenience wrapper/syntactic sugar.
+    def __getitem__(self, arg_name: str):
+        # pydantic discriminated union validation seems to try Graph["type"], which throws an error unless we
+        # explicitly redirect it to the correct attribute.
+        if arg_name == "type":
+            return self.type
+        return self.figure[arg_name]
+
+    @_log_call
+    def build(self):
+        data = data_manager._get_component_data(self.id)  # type: ignore
+        additional_args = self.figure._arguments.copy()
+        additional_args.pop("data_frame", None)
+        return html.Div(self.figure._function(data_frame=data, **additional_args), id=self.id)