Fix cell editing when new value is excluded by transform (#141)

* Fix editing when new value is excluded by transform

* update widget model

Author: kaiayoung

src/core/viewbasedjsonmodel.ts

@@ -430,6 +430,15 @@ export class ViewBasedJSONModel extends MutableDataModel {
       });
     }
 
+    // Notify listeners of the cell change event
+    this.dataSync.emit({
+      type: 'cell-edit-event',
+      columnIndex: options.column,
+      row: options.row,
+      region: options.region,
+      value: options.value
+    })
+
     // We need to rerun the transforms, as the changed cell may change the order
     // or visibility of other rows
     this.currentView = this._transformState.createView(this._dataset);
@@ -609,7 +618,7 @@ namespace ViewBasedJSONModel {
      */
     data: DataSource;
   }
-  export type IDataSyncEvent = ISyncCell | ISyncRowIndices;
+  export type IDataSyncEvent = ISyncCell | ISyncRowIndices | ICellEditEvent;
 
   /**
    * An event that indicates a needed change to the kernel-side dataset.
@@ -624,12 +633,39 @@ namespace ViewBasedJSONModel {
     /**
      * The discriminated type of the args object.
      */
-    type: 'row-indices-updated'
+    type: 'row-indices-updated';
 
     /**
      * An list of the rows in the untransformed dataset that are currently
      * represented in the `View`.
      */
     indices: number[];
   }
+
+  export interface ICellEditEvent {
+    /**
+     * The discriminated type of the args object.
+     */
+    type: 'cell-edit-event';
+
+    /**
+     * The CellRegion associated with this change.
+     */
+    region: DataModel.CellRegion;
+
+    /**
+     * The row number associated with this change.
+     */
+    row: number;
+
+    /**
+     * The column index associated with this change.
+     */
+    columnIndex: number;
+
+    /**
+     * The new data value
+     */
+    value: ReadonlyJSONValue;
+  }
 }

src/datagrid.ts

@@ -108,32 +108,28 @@ export
           this.set('_data', this.data_model.dataset);
           this.save_changes();
           break;
+        case ('cell-edit-event'):
+          // Update data in widget model
+          const newData = this.get('_data');
+          newData.data[msg.row][msg.columnIndex] = msg.value; 
+          this.set('_data', newData);
+
+          this.comm.send({
+            method: 'custom',
+            content: {
+              event_type: 'cell-changed',
+              region: msg.region,
+              row: msg.row,
+              column_index: msg.columnIndex,
+              value: msg.value
+            }
+          }, null);
+          break;
         default:
           throw 'unreachable';
       }
-    })
-
-    this.data_model.changed.connect((sender: ViewBasedJSONModel, args: any) => {
-      if (args.type === 'cells-changed') {
-        const value = this.data_model.data(args.region, args.row, args.column);
-        const datasetRow = this.data_model.getDatasetRowFromView(args.region, args.row);
-        // Getting a copy of the data and update the front-end model in place
-        const newData = this.get('_data');
-        newData.data[datasetRow][args.column] = value; 
-        this.set('_data', newData);
-        // Update backend with new data
-        this.comm.send({
-          method: 'custom',
-          content: {
-            event_type: 'cell-changed',
-            region: args.region,
-            row: datasetRow,
-            column_index: args.column,
-            value: value
-          }
-        }, null);
-      }
     });
+
     this.updateTransforms();
     this.trigger('data-model-changed');
     this.updateSelectionModel();
@@ -269,7 +265,7 @@ function unpack_data(
 }
 
 export
-class DataGridView extends DOMWidgetView {
+  class DataGridView extends DOMWidgetView {
   _createElement(tagName: string) {
     this.pWidget = new JupyterPhosphorPanelWidget({ view: this });
     // initialize to light theme unless set earlier
@@ -327,7 +323,7 @@ class DataGridView extends DOMWidgetView {
       this.model.set('column_widths', JSONExt.deepCopy(this.grid.columnWidths));
       this.model.save_changes();
     });
-    
+
     this.model.on('data-model-changed', () => {
       this.grid.dataModel = this.model.data_model;
     });
@@ -410,7 +406,7 @@ class DataGridView extends DOMWidgetView {
 
     return Promise.all(promises);
   }
-  
+
   public updateGridStyle() {
     this.grid.updateGridStyle();
   }
@@ -430,9 +426,9 @@ class DataGridView extends DOMWidgetView {
   private updateGridRenderers() {
     const defaultRenderer = this.default_renderer.renderer;
     const renderers: Dict<CellRenderer> = {};
-    Object.entries(this.renderers).forEach(([name, rendererView]) =>{
-         renderers[name] = rendererView.renderer;
-      }
+    Object.entries(this.renderers).forEach(([name, rendererView]) => {
+      renderers[name] = rendererView.renderer;
+    }
     );
     this.grid.defaultRenderer = defaultRenderer;
     this.grid.renderers = renderers;
@@ -510,9 +506,9 @@ namespace Private {
     // Updating the primary key to account for a multiIndex primary key.
     const primaryKey = data.schema.primaryKey.map((key: string) => {
       for (let i = 0; i < data.schema.fields.length; i++) {
-        const curFieldKey = Array.isArray(key) 
-        ? data.schema.fields[i].name[0]
-        : data.schema.fields[i].name;
+        const curFieldKey = Array.isArray(key)
+          ? data.schema.fields[i].name[0]
+          : data.schema.fields[i].name;
         const newKey = Array.isArray(key) ? key[0] : key;
 
         if (curFieldKey == newKey) {