Support layout restoration

Author: mfisher87

src/index.ts

@@ -1,8 +1,12 @@
 import {
+  ILayoutRestorer,
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
-import { ICommandPalette } from '@jupyterlab/apputils';
+import {
+  ICommandPalette,
+  WidgetTracker
+} from '@jupyterlab/apputils';
 import { ILauncher } from '@jupyterlab/launcher';
 import { imageIcon } from '@jupyterlab/ui-components';
 
@@ -17,12 +21,14 @@ const plugin: JupyterFrontEndPlugin<void> = {
   description: 'A JupyterLab extension that displays a random image and caption.',
   autoStart: true,
   requires: [ICommandPalette, ILauncher],  // dependencies of our extension
+  optional: [ILayoutRestorer],
   activate: (
     app: JupyterFrontEnd,
     // The activation method receives dependencies in the order they are specified in
     // the "requires" parameter above:
     palette: ICommandPalette,
-    launcher: ILauncher
+    launcher: ILauncher,
+    restorer: ILayoutRestorer | null
   ) => {
     console.log('JupyterLab extension jupytercon2025-extension-workshop is activated!');
 
@@ -36,13 +42,23 @@ const plugin: JupyterFrontEndPlugin<void> = {
         );
       });
 
+    // Track widget state
+    const tracker_namespace = 'jupytercon2025-extension-workshop';
+    const tracker = new WidgetTracker<ImageCaptionMainAreaWidget>({
+      namespace: tracker_namespace
+    });
+
     //Register a new command:
     const command_id = 'image-caption:open';
     app.commands.addCommand(command_id, {
       execute: () => {
         // When the command is executed, create a new instance of our widget
         const widget = new ImageCaptionMainAreaWidget();
 
+        if (!tracker.has(widget)) {
+          tracker.add(widget);
+        }
+
         // Then add it to the main area:
         app.shell.add(widget, 'main');
       },
@@ -52,6 +68,14 @@ const plugin: JupyterFrontEndPlugin<void> = {
 
     palette.addItem({ command: command_id, category: 'Tutorial' });
     launcher.add({ command: command_id });
+
+    // Restore widget state
+    if (restorer) {
+      restorer.restore(tracker, {
+        command: command_id,
+        name: () => tracker_namespace
+      });
+    }
   }
 };