Let Spyder know when notebook becomes dirty

Connect to the JavaScript signal emitted when a notebook becomes
dirty or non-dirty. On receiving this signal, call alert() with
a specially crafted message. Monitor alerts in Spyder and on
receiving such an alert, emit a Qt signal.

Using alert() as a side channel to communicate messages from
JavaScript to Spyder is perhaps a bit hacky but it is simple and
it works (as long as the alert message does not occur naturally).
I expect that this mechanism is more widely applicable.

Author: jitseniesen

spyder_notebook/server/app/package.json

@@ -127,6 +127,7 @@
     "@jupyterlab/markedparser-extension": "~4.4.9",
     "@jupyterlab/mathjax-extension": "~4.4.9",
     "@jupyterlab/metadataform-extension": "~4.4.9",
+    "@jupyterlab/notebook": "~4.4.9"
     "@jupyterlab/notebook-extension": "~4.4.9",
     "@jupyterlab/pdf-extension": "~4.4.9",
     "@jupyterlab/services-extension": "~4.4.9",

spyder_notebook/server/packages/application-extension/package.json

@@ -16,9 +16,11 @@
     "build": "tsc -b"
   },
   "dependencies": {
+    "@jupyter-notebook/application": "~7.4.7",
     "@jupyterlab/application": "~4.4.9",
     "@jupyterlab/docmanager": "~4.4.9",
-    "@jupyterlab/mainmenu": "~4.4.9"
+    "@jupyterlab/mainmenu": "~4.4.9",
+    "@jupyterlab/notebook": "~4.4.9"
   },
   "devDependencies": {
     "typescript": "~5.5.4"

spyder_notebook/server/packages/application-extension/src/index.ts

@@ -11,12 +11,22 @@ import {
 
 import { IThemeManager } from '@jupyterlab/apputils';
 
-import { PageConfig } from '@jupyterlab/coreutils';
+import {
+  IChangedArgs,
+  PageConfig
+} from '@jupyterlab/coreutils';
 
 import { IDocumentManager } from '@jupyterlab/docmanager';
 
 import { IMainMenu } from '@jupyterlab/mainmenu';
 
+import {
+  INotebookModel,
+  NotebookPanel
+} from '@jupyterlab/notebook';
+
+import { INotebookShell } from '@jupyter-notebook/application';
+
 /**
  * A regular expression to match path to notebooks and documents
  *
@@ -104,13 +114,52 @@ const theme: JupyterFrontEndPlugin<void> = {
   }
 };
 
+/**
+ * Send message to Spyder if notebook becomes dirty or non-dirty
+ */
+const monitorDirty: JupyterFrontEndPlugin<void> = {
+  id: '@spyder-notebook/application-extension:monitor-dirty',
+  description:
+    'Send message to Spyder if notebook becomes dirty or non-dirty.',
+  autoStart: true,
+  requires: [INotebookShell],
+  activate: (
+    app: JupyterFrontEnd,
+    notebookShell: INotebookShell
+  ) => {
+    const onNotebookModelStateChange = (
+      model: INotebookModel,
+      args: IChangedArgs<any>
+    ): void => {
+      if (args.name == 'dirty') {
+        alert(':SpyderComm:dirty:' + args.newValue)
+      };
+    };
+
+    const onNotebookShellChange = async () => {
+      const current = notebookShell.currentWidget;
+      if (!(current instanceof NotebookPanel)) {
+        return;
+      }
+
+      const notebook = current.content;
+      await current.context.ready;
+
+      notebook.model?.stateChanged.connect(onNotebookModelStateChange);
+    };
+
+    notebookShell.currentChanged.connect(onNotebookShellChange);
+  },
+};
+
 /**
  * Export the plugins as default.
  */
 const plugins: JupyterFrontEndPlugin<any>[] = [
   menus,
   opener,
-  theme
+  theme,
+  monitorDirty
 ];
 
 export default plugins;

spyder_notebook/widgets/client.py

@@ -30,6 +30,7 @@
 from spyder.utils.image_path_manager import get_image_path
 from spyder.utils.qthelpers import add_actions
 from spyder.utils.palette import SpyderPalette
+from spyder.widgets.browser import WebPage
 from spyder.widgets.findreplace import FindReplace
 
 # Local imports
@@ -90,6 +91,43 @@ def open_in_browser(self, url):
         self.close()
 
 
+class NotebookWebPage(WebPage):
+    """
+    Object to view and edit notebooks rendered as web pages.
+
+    Spyder notebooks communicate with Spyder itself with the JavaScript
+    alert() function where the message starts with a special prefix.
+    This class raises a signal if such a message is received.
+    """
+
+    SPYDER_COMM_PREFIX = ':SpyderComm:'
+    """
+    Prefix for alert() messages used to communicate with Spyder.
+    """
+
+    sig_message_received = Signal(str)
+    """
+    This signal is emitted when a Spyder comms message is received.
+    """
+
+    def javaScriptAlert(self, securityOrigin, msg: str) -> None:
+        """
+        Called whenever the JavaScript function alert() is called.
+
+        If the message starts with `SPYDER_COMM_PREFIX`, then this is a
+        message to communicate to Spyder so emit `sig_message_received`.
+        Otherwise, this is a standard JavaScript alert() to communicate to
+        the user, so let the base class handle it.
+
+        Overloads the function in QWebEnginePage.
+        """
+        if msg.startswith(self.SPYDER_COMM_PREFIX):
+            msg = msg.removeprefix(self.SPYDER_COMM_PREFIX)
+            self.sig_message_received.emit(msg)
+        else:
+            super().javaScriptAlert(securityOrigin, msg)
+
+
 class NotebookWidget(DOMWidget):
     """WebView widget for notebooks."""
 
@@ -103,6 +141,16 @@ class NotebookWidget(DOMWidget):
     This signal is emitted when the widget loses focus.
     """
 
+    sig_dirty_changed = Signal(bool)
+    """
+    This signal is emitted when the notebook becomes dirty or non-dirty.
+
+    Parameters
+    ----------
+    new_value : bool
+        Whether the notebook is now dirty.
+    """
+
     def __init__(self, parent, actions=None):
         """
         Constructor.
@@ -117,6 +165,12 @@ def __init__(self, parent, actions=None):
             will be added.
         """
         super().__init__(parent)
+
+        # Use our subclass of QtWebEnginePage to view notebooks
+        web_page = NotebookWebPage(self)
+        web_page.sig_message_received.connect(self.on_message_received)
+        self.setPage(web_page)
+
         self.CONTEXT_NAME = str(id(self))
         self.setup()
         self.actions = actions
@@ -176,6 +230,19 @@ def _set_info(self, html):
         """Set informational html with css from local path."""
         self.setHtml(html, QUrl.fromLocalFile(self.css_path))
 
+    def on_message_received(self, msg: str) -> None:
+        """
+        Handle messages from notebooks communicated with alert().
+
+        The only message implemented at the moment indicates that a notebook
+        has become dirty or non-dirty.
+        """
+        msg_class, msg_args = msg.split(':', 2)
+        if msg_class == 'dirty':
+            self.sig_dirty_changed.emit(msg_args == 'true')
+        else:
+            logger.warning(f'Unknown message class from notebook, {msg = }')
+
     def show_blank(self):
         """Show a blank page."""
         blank_template = Template(BLANK)