@fails-components/jupyter-applet-view 0.0.1-alpha.9 → 0.0.3

package/lib/avoutputarea.js

@@ -48,7 +48,7 @@ export class AppletViewOutputArea extends AccordionPanel {
             this.addApplet({ appid, appname: 'Applet 1' });
         }
         this.id = `AppletView-${UUID.uuid4()}`;
-        this.title.label = 'Applets Preview';
+        this.title.label = 'Applet area';
         this.title.icon = notebookIcon;
         this.title.caption = this._notebook.title.label
             ? trans.__('For Notebook: %1', this._notebook.title.label)
@@ -171,6 +171,9 @@ export class AppletViewOutputArea extends AccordionPanel {
         }
         const app = this.widgets[appIndex];
         const clone = this.cloneCell(cell, cellid);
+        clone.node.addEventListener('contextmenu', e => {
+            e.preventDefault();
+        });
         this.addToObserver(appIndex, clone);
         app.addWidget(clone);
         // this.informResize(this._applets[appIndex]) // not neccessary
@@ -358,7 +361,9 @@ export class AppletViewOutputArea extends AccordionPanel {
         // clear applets
         this._applets = [];
         if (this.layout) {
-            this.layout.widgets.forEach((widget) => { var _a; return (_a = this.layout) === null || _a === void 0 ? void 0 : _a.removeWidget(widget); });
+            // we need a copy, as forEach does not work, if an item is removed
+            const widgetCopy = [...this.layout.widgets];
+            widgetCopy.forEach((widget) => { var _a; return (_a = this.layout) === null || _a === void 0 ? void 0 : _a.removeWidget(widget); });
         }
         if (applets.length === 0) {
             // we need a minimum of 1 applet!
@@ -721,11 +726,18 @@ export class AppletViewRenderer extends AccordionPanel.Renderer {
             handle.appendChild(editLabel);
         });
         editLabel.addEventListener('blur', (ev) => {
+            // Firefox and Safari needs this
+            if (editLabel.value !== title) {
+                editLabel.dispatchEvent(new Event('change', { bubbles: true }));
+            }
             handle.removeChild(editLabel);
             handle.appendChild(staticLabel);
         });
         editLabel.addEventListener('keydown', (ev) => {
             if (ev.key === 'Enter') {
+                if (editLabel.value !== title) {
+                    editLabel.dispatchEvent(new Event('change', { bubbles: true }));
+                }
                 handle.removeChild(editLabel);
                 handle.appendChild(staticLabel);
             }

package/lib/splitviewnotebookpanel.js

@@ -1,5 +1,5 @@
 import { NotebookPanel, NotebookHistory, NotebookWidgetFactory } from '@jupyterlab/notebook';
-import { BoxLayout, SplitPanel } from '@lumino/widgets';
+import { BoxLayout, AccordionPanel } from '@lumino/widgets';
 import { AppletViewOutputArea } from './avoutputarea';
 export class SplitViewNotebookPanel extends NotebookPanel {
     constructor(options, failsLauncherInfo, failsInterceptor) {
@@ -11,9 +11,10 @@ export class SplitViewNotebookPanel extends NotebookPanel {
         const layout = this.layout;
         layout.removeWidget(content);
         // 2. add a BoxLayout instead
-        const splitPanel = new SplitPanel({
+        const splitPanel = new AccordionPanel({
             spacing: 1,
-            orientation: 'horizontal'
+            orientation: 'horizontal',
+            alignment: 'justify'
         });
         BoxLayout.setStretch(splitPanel, 1);
         // 3. add content to the BoxLayout, as well as a applet view area
@@ -26,6 +27,8 @@ export class SplitViewNotebookPanel extends NotebookPanel {
         }));
         splitPanel.addWidget(widget);
         layout.addWidget(splitPanel);
+        const splitLayout = splitPanel.layout;
+        splitLayout.titleSpace = 22;
         // move to separate handler
         if (failsLauncherInfo === null || failsLauncherInfo === void 0 ? void 0 : failsLauncherInfo.inLecture) {
             this.toolbar.hide();
@@ -33,6 +36,7 @@ export class SplitViewNotebookPanel extends NotebookPanel {
             this._appletviewWidget.inLecture = true;
             content.hide();
             splitPanel.setRelativeSizes([0, 1]); // change sizes
+            splitLayout.titleSpace = 0;
         }
         if (failsLauncherInfo) {
             failsLauncherInfo.inLectureChanged.connect((sender, newInLecture) => {
@@ -41,6 +45,8 @@ export class SplitViewNotebookPanel extends NotebookPanel {
                     this.addClass('fl-jl-notebook-inlecture');
                     this._appletviewWidget.inLecture = true;
                     content.hide();
+                    widget.show();
+                    splitLayout.titleSpace = 0;
                     splitPanel.setRelativeSizes([0, 1]); // change sizes
                 }
                 else {
@@ -48,8 +54,10 @@ export class SplitViewNotebookPanel extends NotebookPanel {
                     this.removeClass('fl-jl-notebook-inlecture');
                     this._appletviewWidget.inLecture = false;
                     content.show();
+                    splitLayout.titleSpace = 22;
                     splitPanel.setRelativeSizes([1, 1]); // change sizes
                     widget.unselectApplet();
+                    setTimeout(() => splitPanel.setRelativeSizes([1, 1]), 1);
                 }
             });
             if (failsLauncherInfo.inLecture &&

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fails-components/jupyter-applet-view",
-    "version": "0.0.1-alpha.9",
+    "version": "0.0.3",
     "description": "A collection of extensions, that let's you select cell and switch to an applet mode, where only the selected cells are visible. This is used for fails-components to have jupyter applets in interactive teaching. ",
     "keywords": [
         "jupyter",
@@ -58,32 +58,29 @@
         "watch:labextension": "jupyter labextension watch ."
     },
     "dependencies": {
-        "@fails-components/jupyter-interceptor": "^0.0.1-alpha.9",
-        "@fails-components/jupyter-launcher": "^0.0.1-alpha.9",
-        "@jupyter-notebook/application": "^7.2.0",
-        "@jupyter-widgets/jupyterlab-manager": "^5.0.13",
-        "@jupyterlab/application": "^4.3.4",
-        "@jupyterlab/apputils": "^4.3.4",
-        "@jupyterlab/cells": "^4.3.4",
-        "@jupyterlab/docmanager": "^4.3.4",
-        "@jupyterlab/docregistry": "^4.3.4",
-        "@jupyterlab/notebook": "^4.3.4",
-        "@jupyterlab/observables": "^5.3.4",
-        "@jupyterlab/outputarea": "^4.3.4",
-        "@jupyterlab/statedb": "^4.3.4",
-        "@jupyterlab/translation": "^4.3.4",
-        "@jupyterlab/ui-components": "^4.3.4",
-        "@jupyterlite/application-extension": "^0.5.0",
-        "@jupyterlite/contents": "^0.5.0",
-        "@jupyterlite/server": "^0.5.0",
-        "@jupyterlite/settings": "^0.5.0",
-        "@lumino/algorithm": "^2.0.1",
-        "@lumino/commands": "^2.1.2",
-        "@lumino/coreutils": "^2.2.0",
-        "@lumino/disposable": "^2.1.3",
-        "@lumino/signaling": "^2.1.3",
-        "@lumino/widgets": "^2.5.0",
-        "json5": "^2.2.3",
+        "@fails-components/jupyter-interceptor": "^0.0.3",
+        "@fails-components/jupyter-launcher": "^0.0.3",
+        "@jupyter-notebook/application": "^7.4.3",
+        "@jupyter-widgets/jupyterlab-manager": "^5.0.15",
+        "@jupyterlab/application": "^4.4.3",
+        "@jupyterlab/apputils": "^4.5.3",
+        "@jupyterlab/cells": "^4.4.3",
+        "@jupyterlab/docmanager": "^4.4.3",
+        "@jupyterlab/docregistry": "^4.4.3",
+        "@jupyterlab/notebook": "^4.4.3",
+        "@jupyterlab/observables": "^5.4.3",
+        "@jupyterlab/outputarea": "^4.4.3",
+        "@jupyterlab/statedb": "^4.4.3",
+        "@jupyterlab/translation": "^4.4.3",
+        "@jupyterlab/ui-components": "^4.4.3",
+        "@jupyterlite/application-extension": "^0.6.1",
+        "@jupyterlite/server": "^0.6.1",
+        "@lumino/algorithm": "^2.0.3",
+        "@lumino/commands": "^2.3.2",
+        "@lumino/coreutils": "^2.2.1",
+        "@lumino/disposable": "^2.1.4",
+        "@lumino/signaling": "^2.1.4",
+        "@lumino/widgets": "^2.7.1",
         "modern-screenshot": "^4.5.5"
     },
     "devDependencies": {
@@ -124,10 +121,19 @@
     "jupyterlab": {
         "extension": true,
         "outputDir": "fails_components_jupyter_applet_view/labextension",
-        "schemaDir": "schema"
-    },
-    "jupyterlite": {
-        "liteExtension": false
+        "schemaDir": "schema",
+        "sharedPackages": {
+            "@fails-components/jupyter-launcher": {
+                "singleton": true,
+                "requiredVersion": "^0.0.1-alpha.18",
+                "import": false
+            },
+            "@fails-components/jupyter-interceptor": {
+                "singleton": true,
+                "requiredVersion": "^0.0.1-alpha.18",
+                "import": false
+            }
+        }
     },
     "eslintIgnore": [
         "node_modules",

package/src/avoutputarea.ts

@@ -72,7 +72,7 @@ export class AppletViewOutputArea extends AccordionPanel {
       this.addApplet({ appid, appname: 'Applet 1' });
     }
     this.id = `AppletView-${UUID.uuid4()}`;
-    this.title.label = 'Applets Preview';
+    this.title.label = 'Applet area';
     this.title.icon = notebookIcon;
     this.title.caption = this._notebook.title.label
       ? trans.__('For Notebook: %1', this._notebook.title.label)
@@ -205,6 +205,9 @@ export class AppletViewOutputArea extends AccordionPanel {
     }
     const app = this.widgets[appIndex] as Panel;
     const clone = this.cloneCell(cell, cellid);
+    clone.node.addEventListener('contextmenu', e => {
+      e.preventDefault();
+    });
     this.addToObserver(appIndex, clone);
     app.addWidget(clone);
 
@@ -409,9 +412,9 @@ export class AppletViewOutputArea extends AccordionPanel {
     // clear applets
     this._applets = [];
     if (this.layout) {
-      (this.layout as PanelLayout).widgets.forEach((widget: Widget) =>
-        this.layout?.removeWidget(widget)
-      );
+      // we need a copy, as forEach does not work, if an item is removed
+      const widgetCopy = [...(this.layout as PanelLayout).widgets];
+      widgetCopy.forEach((widget: Widget) => this.layout?.removeWidget(widget));
     }
 
     if (applets.length === 0) {
@@ -935,11 +938,19 @@ export class AppletViewRenderer extends AccordionPanel.Renderer {
       handle.appendChild(editLabel);
     });
     editLabel.addEventListener('blur', (ev: FocusEvent) => {
+      // Firefox and Safari needs this
+      if (editLabel.value !== title) {
+        editLabel.dispatchEvent(new Event('change', { bubbles: true }));
+      }
+
       handle.removeChild(editLabel);
       handle.appendChild(staticLabel);
     });
     editLabel.addEventListener('keydown', (ev: KeyboardEvent) => {
       if (ev.key === 'Enter') {
+        if (editLabel.value !== title) {
+          editLabel.dispatchEvent(new Event('change', { bubbles: true }));
+        }
         handle.removeChild(editLabel);
         handle.appendChild(staticLabel);
       }

package/src/splitviewnotebookpanel.ts

@@ -7,7 +7,7 @@ import {
   NotebookWidgetFactory,
   StaticNotebook
 } from '@jupyterlab/notebook';
-import { BoxLayout, SplitPanel } from '@lumino/widgets';
+import { BoxLayout, AccordionPanel, AccordionLayout } from '@lumino/widgets';
 import { AppletViewOutputArea } from './avoutputarea';
 import {
   IFailsLauncherInfo,
@@ -39,9 +39,10 @@ export class SplitViewNotebookPanel
     const layout = this.layout as BoxLayout;
     layout.removeWidget(content);
     // 2. add a BoxLayout instead
-    const splitPanel = new SplitPanel({
+    const splitPanel = new AccordionPanel({
       spacing: 1,
-      orientation: 'horizontal'
+      orientation: 'horizontal',
+      alignment: 'justify'
     });
     BoxLayout.setStretch(splitPanel, 1);
 
@@ -55,6 +56,8 @@ export class SplitViewNotebookPanel
     }));
     splitPanel.addWidget(widget);
     layout.addWidget(splitPanel);
+    const splitLayout = splitPanel.layout as AccordionLayout;
+    splitLayout.titleSpace = 22;
     // move to separate handler
     if (failsLauncherInfo?.inLecture) {
       this.toolbar.hide();
@@ -62,6 +65,7 @@ export class SplitViewNotebookPanel
       this._appletviewWidget.inLecture = true;
       content.hide();
       splitPanel.setRelativeSizes([0, 1]); // change sizes
+      splitLayout.titleSpace = 0;
     }
     if (failsLauncherInfo) {
       failsLauncherInfo.inLectureChanged.connect(
@@ -71,14 +75,18 @@ export class SplitViewNotebookPanel
             this.addClass('fl-jl-notebook-inlecture');
             this._appletviewWidget.inLecture = true;
             content.hide();
+            widget.show();
+            splitLayout.titleSpace = 0;
             splitPanel.setRelativeSizes([0, 1]); // change sizes
           } else {
             this.toolbar.show();
             this.removeClass('fl-jl-notebook-inlecture');
             this._appletviewWidget.inLecture = false;
             content.show();
+            splitLayout.titleSpace = 22;
             splitPanel.setRelativeSizes([1, 1]); // change sizes
             widget.unselectApplet();
+            setTimeout(() => splitPanel.setRelativeSizes([1, 1]), 1);
           }
         }
       );

package/style/index.css

@@ -114,7 +114,7 @@
 }
 
 .fl-jl-notebook-inlecture .lm-AccordionPanel-title {
-  display: none;
+  display: none !important;
 }
 
 .fl-jl-notebook-inlecture .lm-SplitPanel-handle {