Merge pull request #261 from emilhe/cellValueChanged

Propagate muti-cell paste event to Dash

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to `dash-ag-grid` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 Links "DE#nnn" prior to version 2.0 point to the Dash Enterprise closed-source Dash AG Grid repo
 
+## UNRELEASED
+
+### Changed 
+
+- [#261](https://github.com/plotly/dash-ag-grid/pull/261) The `cellValueChanged` property has changed been changed from a (single) event object to a _list_ of event objects. For multi-cell edits, the list will contain an element per change. In other cases, the list will contain a single element. Fixes [#262](https://github.com/plotly/dash-ag-grid/issues/262) 
+
 ## [2.4.0] - 2023-10-17
 
 ### Added

package.json

@@ -16,7 +16,7 @@
         "build:js": "webpack --mode production",
         "build:backends": "dash-generate-components ./src/lib/components dash_ag_grid -p package-info.json --r-prefix '' --jl-prefix ''",
         "build": "run-s prepublishOnly build:js build:backends",
-        "postbuild": "es-check es2015 dash_ag_grid/*.js",
+        "postbuild": "es-check es2017 dash_ag_grid/*.js",
         "private::format.eslint": "eslint --quiet --fix src",
         "private::format.prettier": "prettier --write src --ignore-path=.prettierignore",
         "format": "run-s private::format.*",

src/lib/components/AgGrid.react.js

@@ -682,42 +682,44 @@ DashAgGrid.propTypes = {
     /**
      * Value has changed after editing.
      */
-    cellValueChanged: PropTypes.shape({
-        /**
-         * rowIndex, typically a row number
-         */
-        rowIndex: PropTypes.number,
-
-        /**
-         * Row Id from the grid, this could be a number automatically, or set via getRowId
-         */
-        rowId: PropTypes.any,
-
-        /**
-         * data, data object from the row
-         */
-        data: PropTypes.object,
-
-        /**
-         * old value of the cell
-         */
-        oldValue: PropTypes.any,
-
-        /**
-         * new value of the cell
-         */
-        newValue: PropTypes.any,
-
-        /**
-         * column where the cell was changed
-         */
-        colId: PropTypes.any,
-
-        /**
-         * Timestamp of when the event was fired
-         */
-        timestamp: PropTypes.any,
-    }),
+    cellValueChanged: PropTypes.arrayOf(
+        PropTypes.shape({
+            /**
+             * rowIndex, typically a row number
+             */
+            rowIndex: PropTypes.number,
+
+            /**
+             * Row Id from the grid, this could be a number automatically, or set via getRowId
+             */
+            rowId: PropTypes.any,
+
+            /**
+             * data, data object from the row
+             */
+            data: PropTypes.object,
+
+            /**
+             * old value of the cell
+             */
+            oldValue: PropTypes.any,
+
+            /**
+             * new value of the cell
+             */
+            newValue: PropTypes.any,
+
+            /**
+             * column where the cell was changed
+             */
+            colId: PropTypes.any,
+
+            /**
+             * Timestamp of when the event was fired
+             */
+            timestamp: PropTypes.any,
+        })
+    ),
 
     /**
      * Other ag-grid options

src/lib/fragments/AgGrid.react.js

@@ -65,6 +65,9 @@ const RESIZE_DEBOUNCE_MS = 200;
 // Rate-limit for updating columnState when interacting with the grid
 const COL_RESIZE_DEBOUNCE_MS = 500;
 
+// Time between syncing cell value changes with Dash
+const CELL_VALUE_CHANGED_DEBOUNCE_MS = 1;
+
 const xssMessage = (context) => {
     console.error(
         context,
@@ -119,6 +122,7 @@ export default class DashAgGrid extends Component {
         this.onCellClicked = this.onCellClicked.bind(this);
         this.onCellDoubleClicked = this.onCellDoubleClicked.bind(this);
         this.onCellValueChanged = this.onCellValueChanged.bind(this);
+        this.afterCellValueChanged = this.afterCellValueChanged.bind(this);
         this.onRowDataUpdated = this.onRowDataUpdated.bind(this);
         this.onFilterChanged = this.onFilterChanged.bind(this);
         this.onSortChanged = this.onSortChanged.bind(this);
@@ -181,6 +185,7 @@ export default class DashAgGrid extends Component {
 
         this.selectionEventFired = false;
         this.reference = React.createRef();
+        this.pendingChanges = null;
     }
 
     onPaginationChanged() {
@@ -912,20 +917,38 @@ export default class DashAgGrid extends Component {
         node,
     }) {
         const timestamp = Date.now();
+        // Collect new change.
+        const newChange = {
+            rowIndex,
+            rowId: node.id,
+            data,
+            oldValue,
+            value,
+            colId,
+            timestamp,
+        };
+        // Append it to current change session.
+        if (!this.pendingCellValueChanges) {
+            this.pendingCellValueChanges = [newChange];
+        } else {
+            this.pendingCellValueChanges.push(newChange);
+        }
+    }
+
+    afterCellValueChanged() {
+        // Guard against multiple invocations of the same change session.
+        if (!this.pendingCellValueChanges) {
+            return;
+        }
+        // Send update(s) for current change session to Dash.
         const virtualRowData = this.virtualRowData();
         this.props.setProps({
-            cellValueChanged: {
-                rowIndex,
-                rowId: node.id,
-                data,
-                oldValue,
-                value,
-                colId,
-                timestamp,
-            },
+            cellValueChanged: this.pendingCellValueChanges,
             virtualRowData,
         });
         this.syncRowData();
+        // Mark current change session as ended.
+        this.pendingCellValueChanges = null;
     }
 
     onDisplayedColumnsChanged() {
@@ -1325,7 +1348,11 @@ export default class DashAgGrid extends Component {
                     onSelectionChanged={this.onSelectionChanged}
                     onCellClicked={this.onCellClicked}
                     onCellDoubleClicked={this.onCellDoubleClicked}
-                    onCellValueChanged={this.onCellValueChanged}
+                    onCellValueChanged={debounce(
+                        this.afterCellValueChanged,
+                        CELL_VALUE_CHANGED_DEBOUNCE_MS,
+                        this.onCellValueChanged
+                    )}
                     onFilterChanged={this.onFilterChanged}
                     onSortChanged={this.onSortChanged}
                     onRowDragEnd={this.onSortChanged}

src/lib/utils/debounce.js

@@ -1,11 +1,14 @@
-export default function debounce(fn, wait) {
+export default function debounce(fn, wait, onDebounce) {
     let lastTimestamp = 0;
     let handle;
 
     return (...args) => {
         const now = Date.now();
         const delay = Math.min(now - lastTimestamp, wait);
 
+        if (onDebounce) {
+            onDebounce(...args);
+        }
         if (handle) {
             clearTimeout(handle);
         }

tests/test_cell_value_changed.py

@@ -29,7 +29,7 @@ def test_cv001_cell_value_changed(dash_duo):
             dag.AgGrid(
                 id="history",
                 columnDefs=[{"field": "Key", "checkboxSelection": True}]
-                + [{"field": i} for i in ["Column", "OldValue", "NewValue"]],
+                           + [{"field": i} for i in ["Column", "OldValue", "NewValue"]],
                 rowData=[],
             ),
         ],
@@ -43,12 +43,16 @@ def test_cv001_cell_value_changed(dash_duo):
     )
 
     app.clientside_callback(
-        """function addToHistory(data) {
-            if (data) {
-                reloadData = {...data.data}
-                reloadData[data.colId] = data.oldValue
-                newData = [{Key: data.rowId, Column: data.colId, OldValue: data.oldValue, NewValue: data.value,
-                    reloadData}]
+        """function addToHistory(changes) {
+            if (changes) {
+                newData = []
+                for (let i = 0; i < changes.length; i++) {
+                    data = changes[i];
+                    reloadData = {...data.data};
+                    reloadData[data.colId] = data.oldValue;
+                    newData.push({Key: data.rowId, Column: data.colId, OldValue: data.oldValue, 
+                    NewValue: data.value, reloadData});
+                }
                 return {'add': newData}
             }
             return window.dash_clientside.no_update
@@ -100,3 +104,47 @@ def test_cv001_cell_value_changed(dash_duo):
     grid.get_cell(1, 2).click()
 
     hist.wait_for_rendered_rows(1)
+
+
+def test_cv001_cell_value_changed_multi(dash_duo):
+    app = Dash(__name__)
+    app.layout = html.Div(
+        [
+            dag.AgGrid(
+                columnDefs=columnDefs,
+                rowData=df.to_dict("records"),
+                columnSize="sizeToFit",
+                defaultColDef={"editable": True},
+                id="grid",
+                getRowId="params.data.nation",
+                dashGridOptions={'editType':'fullRow'}
+            ),
+            html.Div(id="log")
+        ]
+    )
+
+    app.clientside_callback(
+        """function countEvents(changes) {
+            console.log("FIRE");
+            return changes? changes.length : 0;
+        }""",
+        Output("log", "children"),
+        Input("grid", "cellValueChanged"),
+        prevent_initial_call=True,
+    )
+
+    dash_duo.start_server(app)
+
+    grid = utils.Grid(dash_duo, "grid")
+    grid.wait_for_cell_text(0, 0, "South Korea")
+
+    # Test single event.
+    grid.get_cell(0, 1).send_keys("50")
+    grid.get_cell(1, 2).click()
+    dash_duo.wait_for_text_to_equal('#log', "1")
+
+    # Test multi event.
+    grid.get_cell(0, 1).send_keys("20")
+    grid.get_cell_editing_input(0, 2).send_keys("20")
+    grid.get_cell(1, 2).click()
+    dash_duo.wait_for_text_to_equal('#log', "2")

tests/utils.py

@@ -170,6 +170,11 @@ def get_cell(self, row, col):
             f'#{self.id} .ag-row[row-index="{row}"] .ag-cell[aria-colindex="{col + 1}"]'
         )
 
+    def get_cell_editing_input(self, row, col):
+        return self.dash_duo.find_element(
+            f'#{self.id} .ag-row[row-index="{row}"] .ag-cell[aria-colindex="{col + 1}"] .ag-cell-editor input'
+        )
+
     def get_row(self, row):
         return self.dash_duo.find_element(f'#{self.id} .ag-row[row-index="{row}"]')