Use @observe("_transforms") rather than custom message

Author: ianthomas23

ipydatagrid/datagrid.py

@@ -21,6 +21,7 @@
     List,
     Unicode,
     default,
+    observe,
     validate,
 )
 
@@ -1148,24 +1149,6 @@ def _handle_comm_msg(self, _, content, _buffs):
 
             self.send(answer, buffers)
 
-        elif event_type == "frontend-transforms":
-            # Transforms is an array of dicts.
-            frontend_transforms = content.get("transforms")
-
-            self._transformed_data = None
-            data = self.__dataframe_reference
-
-            if frontend_transforms:
-                self._transformed_data = self._apply_frontend_transforms(
-                    frontend_transforms, data
-                )
-                data = self._transformed_data
-
-            self._row_count = len(data)  # Sync to frontend.
-
-            # Should only request a tick if the transforms have changed.
-            self.tick()
-
         elif event_type == "unique-values-request":
             column = content.get("column")
             unique = (
@@ -1176,3 +1159,22 @@ def _handle_comm_msg(self, _, content, _buffs):
                 "values": unique,
             }
             self.send(answer)
+
+    @observe("_transforms")
+    def _on_transforms_changed(self, change):
+        # Transforms is an array of dicts.
+        frontend_transforms = change["new"]
+
+        self._transformed_data = None
+        data = self.__dataframe_reference
+
+        if frontend_transforms:
+            self._transformed_data = self._apply_frontend_transforms(
+                frontend_transforms, data
+            )
+            data = self._transformed_data
+
+        self._row_count = len(data)  # Sync to frontend.
+
+        # Should only request a tick if the transforms have changed.
+        self.tick()

js/datagrid.ts

@@ -260,15 +260,12 @@ export class DataGridModel extends DOMWidgetModel {
 
   updateTransforms() {
     const transforms = this.get('_transforms');
-    if (this.get('_transform_on_backend')) {
-      const msg = { type: 'frontend-transforms', transforms: transforms };
-      this.send(msg);
-    } else {
+    if (!this.get('_transform_on_backend')) {
       if (this.selectionModel) {
         this.selectionModel.clear();
       }
-      this.data_model.replaceTransforms(transforms);
     }
+    this.data_model.replaceTransforms(transforms);
   }
 
   updateSelectionModel() {