[POC] KPI Infinite scroll AgGrid

vizro-core/examples/kpi/app.py

@@ -2,11 +2,11 @@
 
 import pandas as pd
 import vizro.models as vm
-from utils._charts import COLUMN_DEFS, KPI, bar, choropleth, line, pie
+from dash import Input, Output, callback, no_update
+from utils._charts import COLUMN_DEFS, KPI, AgGridPage, bar, choropleth, infinite_scroll_ag_grid, line, pie
 from utils._helper import clean_data_and_add_columns
 from vizro import Vizro
 from vizro.actions import filter_interaction
-from vizro.tables import dash_ag_grid
 
 # DATA --------------------------------------------------------------------------------------------
 df_complaints = pd.read_csv("https://query.data.world/s/glbdstahsuw3hjgunz3zssggk7dsfu?dws=00000")
@@ -217,14 +217,15 @@
     ],
 )
 
-page_table = vm.Page(
+page_table = AgGridPage(
     title="List of complaints",
     components=[
         vm.AgGrid(
-            figure=dash_ag_grid(
+            figure=infinite_scroll_ag_grid(
+                id="kpi_grid",
                 data_frame=df_complaints,
                 columnDefs=COLUMN_DEFS,
-                dashGridOptions={"pagination": True},
+                getRowId="params.data.Complaint ID",
             )
         )
     ],
@@ -244,5 +245,19 @@
     ),
 )
 
+
+# CALLBACKS -----------------------------------------------------------------------------------
+@callback(
+    Output("kpi_grid", "getRowsResponse"),
+    Input("kpi_grid", "getRowsRequest"),
+)
+def infinite_scroll(request):
+    """Infinite scroll callback mechanism for the AG Grid."""
+    if request is None:
+        return no_update
+    partial = df_complaints.iloc[request["startRow"] : request["endRow"]]
+    return {"rowData": partial.to_dict("records"), "rowCount": len(df_complaints.index)}
+
+
 if __name__ == "__main__":
     Vizro().build(dashboard).run()

vizro-core/examples/kpi/utils/_charts.py

@@ -2,12 +2,15 @@
 
 from typing import List, Literal, Optional
 
+import dash_ag_grid as dag
 import dash_bootstrap_components as dbc
 import pandas as pd
 import vizro.models as vm
 import vizro.plotly.express as px
 from dash import html
 from vizro.models.types import capture
+from vizro.tables._dash_ag_grid import _DATA_TYPE_DEFINITIONS
+from vizro.tables._utils import _set_defaults_nested
 
 
 # CUSTOM COMPONENTS -------------------------------------------------------------
@@ -40,6 +43,13 @@ def build(self):
         )
 
 
+class AgGridPage(vm.Page):
+    """Page without the on page load mechanism."""
+
+    def pre_build(self):
+        pass
+
+
 # CUSTOM CHARTS ----------------------------------------------------------------
 @capture("graph")
 def bar(
@@ -191,3 +201,36 @@ def choropleth(
     },
     {"field": "Timely response?", "cellRenderer": "markdown", "headerName": "On time?", "flex": 3},
 ]
+
+
+@capture("ag_grid")
+def infinite_scroll_ag_grid(data_frame: pd.DataFrame, **kwargs) -> dag.AgGrid:
+    """Implementation of infinite scroll AgGrid with sensible defaults to be used in [`AgGrid`][vizro.models.AgGrid]."""
+    defaults = {
+        "className": "ag-theme-quartz-dark ag-theme-vizro",
+        "columnDefs": [{"field": col} for col in data_frame.columns],
+        "rowModelType": "infinite",
+        "defaultColDef": {
+            "resizable": True,
+            "sortable": False,
+            "filter": False,
+            "filterParams": {
+                "buttons": ["apply", "reset"],
+                "closeOnApply": True,
+            },
+        },
+        "dashGridOptions": {
+            "dataTypeDefinitions": _DATA_TYPE_DEFINITIONS,
+            "animateRows": False,
+            "rowSelection": "multiple",
+            "rowBuffer": 0,
+            "cacheBlockSize": 100,
+            "cacheOverflowSize": 2,
+            "maxConcurrentDatasourceRequests": 2,
+            "infiniteInitialRowCount": 100,
+            "maxBlocksInCache": 10,
+        },
+        "style": {"height": "100%"},
+    }
+    kwargs = _set_defaults_nested(kwargs, defaults)
+    return dag.AgGrid(**kwargs)