From 8f75a2706366ad85875a8a3d38eda44cf615b028 Mon Sep 17 00:00:00 2001
From: krassowski <5832902+krassowski@users.noreply.github.com>
Date: Wed, 7 Aug 2024 13:55:57 +0100
Subject: [PATCH 1/3] Expose `execution_state` in the JS package

---
 javascript/src/ycell.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/javascript/src/ycell.ts b/javascript/src/ycell.ts
index 3a5729a..c6cc221 100644
--- a/javascript/src/ycell.ts
+++ b/javascript/src/ycell.ts
@@ -749,6 +749,20 @@ export class YCodeCell
     }
   }
 
+  /**
+   * The code cell's execution state.
+   */
+  get execution_state(): 'running' | 'idle' {
+    return this.ymodel.get('execution_state') ?? 'idle';
+  }
+  set execution_state(state: 'running' | 'idle') {
+    if (this.ymodel.get('execution_state') !== state) {
+      this.transact(() => {
+        this.ymodel.set('execution_state', state);
+      }, false);
+    }
+  }
+
   /**
    * Cell outputs.
    */

From dc1f49a20a1fea014994259a5dca645532f73fb5 Mon Sep 17 00:00:00 2001
From: krassowski <5832902+krassowski@users.noreply.github.com>
Date: Wed, 7 Aug 2024 14:05:05 +0100
Subject: [PATCH 2/3] Use camelCase to satisfy the linter

---
 javascript/src/ycell.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/javascript/src/ycell.ts b/javascript/src/ycell.ts
index c6cc221..381fd3b 100644
--- a/javascript/src/ycell.ts
+++ b/javascript/src/ycell.ts
@@ -752,10 +752,10 @@ export class YCodeCell
   /**
    * The code cell's execution state.
    */
-  get execution_state(): 'running' | 'idle' {
+  get executionState(): 'running' | 'idle' {
     return this.ymodel.get('execution_state') ?? 'idle';
   }
-  set execution_state(state: 'running' | 'idle') {
+  set executionState(state: 'running' | 'idle') {
     if (this.ymodel.get('execution_state') !== state) {
       this.transact(() => {
         this.ymodel.set('execution_state', state);

From bcd3f6a6d5e032e61ce9fce9c20fe0c4abe46831 Mon Sep 17 00:00:00 2001
From: krassowski <5832902+krassowski@users.noreply.github.com>
Date: Wed, 7 Aug 2024 14:12:39 +0100
Subject: [PATCH 3/3] Update API, add change event attribute

---
 javascript/src/api.ts   | 14 ++++++++++++++
 javascript/src/ycell.ts | 13 +++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/javascript/src/api.ts b/javascript/src/api.ts
index a20b301..3eaf995 100644
--- a/javascript/src/api.ts
+++ b/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
    */
diff --git a/javascript/src/ycell.ts b/javascript/src/ycell.ts
index 381fd3b..e60b3a1 100644
--- a/javascript/src/ycell.ts
+++ b/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,
@@ -752,10 +753,10 @@ export class YCodeCell
   /**
    * The code cell's execution state.
    */
-  get executionState(): 'running' | 'idle' {
+  get executionState(): IExecutionState {
     return this.ymodel.get('execution_state') ?? 'idle';
   }
-  set executionState(state: 'running' | 'idle') {
+  set executionState(state: IExecutionState) {
     if (this.ymodel.get('execution_state') !== state) {
       this.transact(() => {
         this.ymodel.set('execution_state', state);
@@ -913,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;
   }