Expose execution_state in the JS package (#259)

* Expose `execution_state` in the JS package

* Use camelCase to satisfy the linter

* Update API, add change event attribute

Author: krassowski

javascript/src/api.ts

@@ -494,6 +494,8 @@ export interface ISharedBaseCell<
   toJSON(): nbformat.IBaseCell;
 }
 
+export type IExecutionState = 'running' | 'idle';
+
 /**
  * Implements an API for nbformat.ICodeCell.
  */
@@ -509,6 +511,11 @@ export interface ISharedCodeCell
    */
   execution_count: nbformat.ExecutionCount;
 
+  /**
+   * The code cell's execution state.
+   */
+  executionState: IExecutionState;
+
   /**
    * Cell outputs
    */
@@ -746,6 +753,13 @@ export type CellChange = SourceChange & {
     oldValue?: number;
     newValue?: number;
   };
+  /**
+   * Cell execution state change
+   */
+  executionStateChange?: {
+    oldValue?: IExecutionState;
+    newValue?: IExecutionState;
+  };
   /**
    * Cell metadata change
    */

javascript/src/ycell.ts

@@ -10,6 +10,7 @@ import { Awareness } from 'y-protocols/awareness';
 import * as Y from 'yjs';
 import type {
   CellChange,
+  IExecutionState,
   IMapChange,
   ISharedAttachmentsCell,
   ISharedBaseCell,
@@ -749,6 +750,20 @@ export class YCodeCell
     }
   }
 
+  /**
+   * The code cell's execution state.
+   */
+  get executionState(): IExecutionState {
+    return this.ymodel.get('execution_state') ?? 'idle';
+  }
+  set executionState(state: IExecutionState) {
+    if (this.ymodel.get('execution_state') !== state) {
+      this.transact(() => {
+        this.ymodel.set('execution_state', state);
+      }, false);
+    }
+  }
+
   /**
    * Cell outputs.
    */
@@ -899,6 +914,14 @@ export class YCodeCell
       };
     }
 
+    if (modelEvent && modelEvent.keysChanged.has('execution_state')) {
+      const change = modelEvent.changes.keys.get('execution_state');
+      changes.executionStateChange = {
+        oldValue: change!.oldValue,
+        newValue: this.ymodel.get('execution_state')
+      };
+    }
+
     return changes;
   }