@fails-components/jupyter-applet-view 0.0.1-alpha.10

package/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2024, Marten Richter
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,101 @@
+# fails_components_jupyter_applet_view
+
+[![Github Actions Status](https://github.com/fails-components/jupyterfails/workflows/Build/badge.svg)](https://github.com/fails-components/jupyterfails/actions/workflows/build.yml)
+
+An extension, that let's you select cell for an applet.
+The applets are show in a splitted notebook window.
+The view can be switched programmatically to an applet mode, where only the selected cells are visible. This is used in fails-components to have jupyter applets in an interactive teaching environment.
+
+## Requirements
+
+- JupyterLab >= 4.0.0
+
+## Install
+
+To install the extension, execute:
+
+```bash
+pip install fails_components_jupyter_applet_view
+```
+
+## Uninstall
+
+To remove the extension, execute:
+
+```bash
+pip uninstall fails_components_jupyter_applet_view
+```
+
+## Contributing
+
+### Development install
+
+Note: You will need NodeJS to build the extension package.
+
+The `jlpm` command is JupyterLab's pinned version of
+[yarn](https://yarnpkg.com/) that is installed with JupyterLab. You may use
+`yarn` or `npm` in lieu of `jlpm` below.
+
+```bash
+# Clone the repo to your local environment
+# Change directory to the fails_components_jupyter_applet_view directory
+# Install package in development mode
+pip install -e "."
+# Link your development version of the extension with JupyterLab
+jupyter labextension develop . --overwrite
+# Rebuild extension Typescript source after making changes
+jlpm build
+```
+
+You can watch the source directory and run JupyterLab at the same time in different terminals to watch for changes in the extension's source and automatically rebuild the extension.
+
+```bash
+# Watch the source directory in one terminal, automatically rebuilding when needed
+jlpm watch
+# Run JupyterLab in another terminal
+jupyter lab
+```
+
+With the watch command running, every saved change will immediately be built locally and available in your running JupyterLab. Refresh JupyterLab to load the change in your browser (you may need to wait several seconds for the extension to be rebuilt).
+
+By default, the `jlpm build` command generates the source maps for this extension to make it easier to debug using the browser dev tools. To also generate source maps for the JupyterLab core extensions, you can run the following command:
+
+```bash
+jupyter lab build --minimize=False
+```
+
+### Development uninstall
+
+```bash
+pip uninstall fails_components_jupyter_applet_view
+```
+
+In development mode, you will also need to remove the symlink created by `jupyter labextension develop`
+command. To find its location, you can run `jupyter labextension list` to figure out where the `labextensions`
+folder is located. Then you can remove the symlink named `@fails-components/jupyter-applet-view` within that folder.
+
+### Testing the extension
+
+#### Frontend tests
+
+This extension is using [Jest](https://jestjs.io/) for JavaScript code testing.
+
+To execute them, execute:
+
+```sh
+jlpm
+jlpm test
+```
+
+<!--
+#### Integration tests
+
+This extension uses [Playwright](https://playwright.dev/docs/intro) for the integration tests (aka user level tests).
+More precisely, the JupyterLab helper [Galata](https://github.com/jupyterlab/jupyterlab/tree/master/galata) is used to handle testing the extension in JupyterLab.
+
+More information are provided within the [ui-tests](./ui-tests/README.md) README.
+
+### Packaging the extension
+
+See [RELEASE](RELEASE.md)
+-->

package/lib/appletview.d.ts

@@ -0,0 +1,7 @@
+import { JupyterFrontEnd, ILayoutRestorer } from '@jupyterlab/application';
+import { IDocumentManager } from '@jupyterlab/docmanager';
+import { INotebookTracker } from '@jupyterlab/notebook';
+import { ITranslator } from '@jupyterlab/translation';
+import { IFailsLauncherInfo } from '@fails-components/jupyter-launcher';
+import { IFailsInterceptor } from '@fails-components/jupyter-interceptor';
+export declare function activateAppletView(app: JupyterFrontEnd, docManager: IDocumentManager, notebookTracker: INotebookTracker, translator: ITranslator, restorer: ILayoutRestorer | null, failsLauncherInfo: IFailsLauncherInfo | null, failsInterceptor: IFailsInterceptor | null): void;

package/lib/appletview.js

@@ -0,0 +1,333 @@
+import { addIcon, moveUpIcon, moveDownIcon, caretUpIcon, caretDownIcon, deleteIcon } from '@jupyterlab/ui-components';
+import { SplitViewNotebookWidgetFactory } from './splitviewnotebookpanel';
+// portions used from Jupyterlab:
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+// This code contains portions from or is inspired by Jupyter lab's notebook extension, especially the createOutputView part
+// Also a lot is taken from the cell toolbar related parts.
+export function activateAppletView(app, docManager, notebookTracker, translator, restorer, failsLauncherInfo, failsInterceptor) {
+    if (app.namespace === 'JupyterLite Server') {
+        return;
+    }
+    console.log('JupyterLab extension @fails-components/jupyter-applet-view is activated!');
+    const trans = translator.load('fails_components_jupyter_applet_view');
+    const addToViewID = 'fails-components-jupyter-applet-view:add_to_view';
+    const moveViewUpID = 'fails-components-jupyter-applet-view:move_view_up';
+    const moveViewDownID = 'fails-components-jupyter-applet-view:move_view_down';
+    const moveViewAppUpID = 'fails-components-jupyter-applet-view:move_view_app_up';
+    const moveViewAppDownID = 'fails-components-jupyter-applet-view:move_view_app_down';
+    const deleteViewID = 'fails-components-jupyter-applet-view:delete_view';
+    /*const appletViewOutputs = new WidgetTracker<
+      MainAreaWidget<Private.AppletViewOutputArea>
+    >({
+      namespace: 'cloned-outputs'
+    });
+   
+    if (restorer) {
+      void restorer.restore(appletViewOutputs, {
+        command: commandID,
+        args: widget => ({
+          path: widget.content.path,
+          indices: widget.content.indices
+        }),
+        name: widget =>
+          `${widget.content.path}:${widget.content.indices.join(':')}`,
+        when: notebookTracker.restored // After the notebook widgets (but not contents).
+      });
+    } */
+    const { commands, shell /* , serviceManager: services */ } = app;
+    const realFactory = app.docRegistry.getWidgetFactory('Notebook');
+    const factoryName = 'Notebook'; //'SplitViewNotebook';
+    if (realFactory !== undefined) {
+        const factory = new SplitViewNotebookWidgetFactory({
+            name: factoryName,
+            label: trans.__('Notebook'),
+            fileTypes: ['notebook'],
+            modelName: 'notebook',
+            defaultFor: ['notebook'],
+            preferKernel: realFactory.preferKernel,
+            canStartKernel: true,
+            rendermime: realFactory.rendermime,
+            contentFactory: realFactory.contentFactory,
+            editorConfig: realFactory.editorConfig,
+            notebookConfig: realFactory.notebookConfig,
+            mimeTypeService: realFactory.mimeTypeService,
+            toolbarFactory: realFactory['_toolbarFactory'],
+            translator,
+            failsLauncherInfo: failsLauncherInfo !== null ? failsLauncherInfo : undefined,
+            failsInterceptor: failsInterceptor !== null ? failsInterceptor : undefined
+        });
+        let id = 0;
+        // we need to clone the registration with the tracker from the plugin:
+        factory.widgetCreated.connect((sender, widget) => {
+            var _a, _b;
+            // If the notebook panel does not have an ID, assign it one.
+            widget.id = widget.id || `splitviewnotebook-${++id}`;
+            const ft = app.docRegistry.getFileType('notebook');
+            // Set up the title icon
+            widget.title.icon = ft === null || ft === void 0 ? void 0 : ft.icon;
+            widget.title.iconClass = (_a = ft === null || ft === void 0 ? void 0 : ft.iconClass) !== null && _a !== void 0 ? _a : '';
+            widget.title.iconLabel = (_b = ft === null || ft === void 0 ? void 0 : ft.iconLabel) !== null && _b !== void 0 ? _b : '';
+            // Notify the widget tracker if restore data needs to update.
+            const tracker = notebookTracker; // dirty hack, does only work as long we do not add anything to the model
+            /* widget.context.pathChanged.connect(() => {
+              void tracker.save(widget);
+            });  // may be we need this */
+            // Add the notebook panel to the tracker.
+            // void tracker.add(widget);
+            widget.context.fileChanged.connect(() => {
+                const model = widget.context.model;
+                const failsData = model.getMetadata('failsApp');
+                const currentSplitView = widget;
+                if (currentSplitView.appletViewWidget) {
+                    if (failsData) {
+                        const outputarea = currentSplitView.appletViewWidget;
+                        if (outputarea !== undefined) {
+                            outputarea.loadData(failsData);
+                        }
+                    }
+                }
+            });
+            widget.context.saveState.connect((slot, savestate) => {
+                if (savestate === 'started') {
+                    const currentSplitView = widget;
+                    const outputarea = currentSplitView.appletViewWidget;
+                    if (outputarea !== undefined) {
+                        const failsData = outputarea.saveData();
+                        if (failsData) {
+                            const model = widget.context.model;
+                            model.setMetadata('failsApp', failsData);
+                        }
+                    }
+                }
+            });
+            // notebookTracker.inject(widget);
+            tracker.add(widget);
+            if (!notebookTracker.currentWidget) {
+                const pool = tracker['_pool'];
+                pool.current = widget;
+            }
+        });
+        // Handle state restoration.
+        // No the notebook should do this.
+        /* if (restorer) {
+          const tracker = notebookTracker as NotebookTracker;
+          void restorer.restore(tracker, {
+            command: 'docmanager:open',
+            args: panel => ({ path: panel.context.path, factory: factoryName }),
+            name: panel => panel.context.path,
+            when: services.ready
+          });
+        } */
+        // remove from registry, this is bad monkey patching
+        if (app.docRegistry['_widgetFactories']['notebook']) {
+            delete app.docRegistry['_widgetFactories']['notebook'];
+        }
+        app.docRegistry.addWidgetFactory(factory);
+        app.docRegistry.setDefaultWidgetFactory('notebook', 
+        /* 'SplitViewNotebook'*/ 'Notebook');
+        // we have to register extensions previously added to the system, FIXME: maybe changed after decoupling from jupyter lab
+        /* const itExtension = app.docRegistry.widgetExtensions('Notebook');
+        for (const extension of itExtension) {
+          app.docRegistry.addWidgetExtension(factoryName, extension);
+        }*/
+    }
+    const canBeActivated = () => {
+        if (notebookTracker.currentWidget === null ||
+            notebookTracker.currentWidget !== shell.currentWidget) {
+            return false;
+        }
+        const { content } = notebookTracker.currentWidget;
+        const index = content.activeCellIndex;
+        // If there are selections that are not the active cell,
+        // this command is confusing, so disable it.
+        for (let i = 0; i < content.widgets.length; ++i) {
+            if (content.isSelected(content.widgets[i]) && i !== index) {
+                return false;
+            }
+        }
+        // If the cell is already added we deactivate as well
+        const currentSplitView = notebookTracker.currentWidget;
+        if (currentSplitView.appletViewWidget) {
+            const outputarea = currentSplitView.appletViewWidget;
+            if (outputarea !== undefined && outputarea.firstHasIndex(index)) {
+                return false;
+            }
+        }
+        return true;
+    };
+    commands.addCommand(addToViewID, {
+        label: /* trans.__(*/ 'Add Output to first Applet view' /*)*/,
+        execute: async (args) => {
+            const path = args.path;
+            let index = args.index;
+            let current;
+            let cell;
+            // console.log('Add Output for path and index', path, index, args);
+            if (path && index !== undefined && index !== null) {
+                current = docManager.findWidget(path, 'Notebook' /* may be needs adjustment later*/);
+                if (!current) {
+                    return;
+                }
+            }
+            else {
+                current = notebookTracker.currentWidget;
+                if (!current) {
+                    return;
+                }
+                cell = current.content.activeCell;
+                index = current.content.activeCellIndex;
+            }
+            // const pathid = current.context.path;
+            // console.log('debug current cell index', current, cell, index);
+            // TODO: Find area if it already exists, and add content
+            const currentSplitView = current;
+            if (currentSplitView.appletViewWidget) {
+                const outputarea = currentSplitView.appletViewWidget;
+                if (outputarea !== undefined && !outputarea.firstHasIndex(index)) {
+                    outputarea.addPart(undefined, { cell, index });
+                }
+            }
+        },
+        icon: args => (args.toolbar ? addIcon : undefined),
+        isEnabled: canBeActivated,
+        isVisible: canBeActivated
+    });
+    function getCurrentNotebook(args) {
+        let current;
+        if (typeof args['notebookpath'] !== 'string') {
+            current = notebookTracker.currentWidget;
+            if (!current) {
+                return;
+            }
+        }
+        else {
+            const path = args['notebookpath'];
+            current = docManager.findWidget(path, 'Notebook' /* may be needs adjustment later*/);
+            if (!current) {
+                return;
+            }
+        }
+        return current;
+    }
+    function moveWidgets(args, delta) {
+        const current = getCurrentNotebook(args);
+        if (!current) {
+            return;
+        }
+        const currentSplitView = current;
+        if (currentSplitView.appletViewWidget) {
+            const outputarea = currentSplitView.appletViewWidget;
+            const cellid = args.cellid;
+            const widgetid = args.widgetid;
+            const appid = outputarea.getWidgetAppId(widgetid);
+            if (typeof appid !== 'undefined') {
+                outputarea.movePart(appid, cellid, delta);
+            }
+        }
+    }
+    function moveWidgetsApp(args, delta) {
+        const current = getCurrentNotebook(args);
+        if (!current) {
+            return;
+        }
+        const currentSplitView = current;
+        if (currentSplitView.appletViewWidget) {
+            const outputarea = currentSplitView.appletViewWidget;
+            const cellid = args.cellid;
+            const widgetid = args.widgetid;
+            const appid = outputarea.getWidgetAppId(widgetid);
+            if (typeof appid !== 'undefined') {
+                outputarea.moveApp(appid, cellid, delta);
+            }
+        }
+    }
+    /*
+    function canMoveWidgetsApp(
+      args: ReadonlyPartialJSONObject,
+      delta: number
+    ): boolean {
+      const current = getCurrentNotebook(args);
+      if (!current) {
+        return false;
+      }
+      const currentSplitView = current as Private.SplitViewNotebookPanel;
+      if (currentSplitView.appletViewWidget) {
+        const outputarea = currentSplitView.appletViewWidget;
+        const cellid = args.cellid as string;
+        const widgetid = args.widgetid as string;
+        const appid = outputarea.getWidgetAppId(widgetid);
+        if (typeof appid !== 'undefined') {
+          return outputarea.canMoveApp(appid, cellid, delta);
+        }
+      }
+      return false;
+    }
+      */
+    commands.addCommand(moveViewUpID, {
+        label: /* trans.__(*/ 'Move view up' /*)*/,
+        execute: async (args) => {
+            moveWidgets(args, -1);
+        },
+        icon: args => (args.toolbar ? moveUpIcon : undefined),
+        isEnabled: () => true,
+        isVisible: () => true
+    });
+    commands.addCommand(moveViewDownID, {
+        label: /* trans.__(*/ 'Move view down' /*)*/,
+        execute: async (args) => {
+            moveWidgets(args, 1);
+        },
+        icon: args => (args.toolbar ? moveDownIcon : undefined),
+        isEnabled: () => true,
+        isVisible: () => true
+    });
+    commands.addCommand(moveViewAppUpID, {
+        label: /* trans.__(*/ 'Move view up to other app' /*)*/,
+        execute: async (args) => {
+            moveWidgetsApp(args, -1);
+        },
+        icon: args => (args.toolbar ? caretUpIcon : undefined),
+        isEnabled: () => true,
+        /* isEnabled: args => {
+          return canMoveWidgetsApp(args, -1);
+        },*/
+        isVisible: () => true
+    });
+    commands.addCommand(moveViewAppDownID, {
+        label: /* trans.__(*/ 'Move view down to other app' /*)*/,
+        execute: async (args) => {
+            moveWidgetsApp(args, 1);
+        },
+        icon: args => (args.toolbar ? caretDownIcon : undefined),
+        isEnabled: () => true,
+        /*isEnabled: args => {
+          return canMoveWidgetsApp(args, 1);
+        },*/
+        isVisible: () => true
+    });
+    commands.addCommand(deleteViewID, {
+        label: /* trans.__(*/ 'Delete view' /*)*/,
+        execute: async (args) => {
+            const current = getCurrentNotebook(args);
+            if (!current) {
+                return;
+            }
+            const currentSplitView = current;
+            if (currentSplitView.appletViewWidget) {
+                const outputarea = currentSplitView.appletViewWidget;
+                const cellid = args.cellid;
+                const widgetid = args.widgetid;
+                const appid = outputarea.getWidgetAppId(widgetid);
+                if (typeof appid !== 'undefined') {
+                    outputarea.deletePart(appid, cellid);
+                }
+            }
+        },
+        icon: args => (args.toolbar ? deleteIcon : undefined),
+        isEnabled: () => true,
+        isVisible: () => true
+    });
+}

package/lib/avoutputarea.d.ts

@@ -0,0 +1,149 @@
+import { Cell } from '@jupyterlab/cells';
+import { NotebookPanel } from '@jupyterlab/notebook';
+import { ITranslator } from '@jupyterlab/translation';
+import { ISignal } from '@lumino/signaling';
+import { AccordionPanel, Widget, Panel, Title } from '@lumino/widgets';
+import { MainAreaWidget } from '@jupyterlab/apputils';
+import { SplitViewNotebookPanel } from './splitviewnotebookpanel';
+import { IFailsInterceptor } from '@fails-components/jupyter-interceptor';
+import { IScreenShotOpts } from '@fails-components/jupyter-launcher';
+/**
+ * A widget hosting applet views
+ */
+export declare class AppletViewOutputArea extends AccordionPanel {
+    constructor(options: AppletViewOutputArea.IOptions);
+    cloneCell(cell: Cell, cellid: string): Widget;
+    getWidgetAppId(widgetid: string): string | undefined;
+    addToObserver(appIndex: number, widget: Widget): void;
+    removeFromObserver(appIndex: number, widget: Widget): void;
+    addCell(appid: string, cell: Cell, cellid: string): Widget;
+    insertCell(appid: string, index: number, cell: Cell, cellid: string): Widget | undefined;
+    deletePart(appid: string, cellid: string): void;
+    movePart(appid: string, cellid: string, delta: number): void;
+    moveApp(appid: string, cellid: string, delta: number): false | undefined;
+    saveData(): {
+        applets: {
+            parts: {
+                index: number | undefined;
+                id: string | undefined;
+            }[];
+            appid: string;
+            appname: string;
+        }[];
+    };
+    loadData(data: any): void;
+    addApplet({ appid, appname }: {
+        appid: string;
+        appname?: string;
+    }): Panel;
+    addPart(appidOrUndefined: string | undefined, part: AppletViewOutputArea.IAppletPart): void;
+    firstHasIndex(index: number): boolean;
+    selectApplet(selectedAppid: string): void;
+    unselectApplet(): void;
+    takeAppScreenshot(opts: IScreenShotOpts): Promise<Blob | undefined>;
+    informResize(applet: IViewApplet): void;
+    resizeEvent(appid: string, entries: ResizeObserverEntry[], observer: ResizeObserver): void;
+    get applets(): IViewApplet[];
+    /**
+     * The index of the cell in the notebook.
+     */
+    /**
+     * The path of the notebook for the cloned output area.
+     */
+    get path(): string;
+    get viewChanged(): ISignal<this, void>;
+    set inLecture(value: boolean);
+    handleEvent(event: Event): void;
+    private _notebook;
+    private _applets;
+    private _selectedAppid;
+    private _viewChanged;
+    private _inLecture;
+    private _interceptor;
+}
+/**
+ * AppletViewOutputArea statics.
+ */
+export declare namespace AppletViewOutputArea {
+    interface IAppletPart {
+        /**
+         * The cell for which to clone the output area.
+         */
+        cell?: Cell;
+        /**
+         * The cell id to uniquely identify the cell
+         */
+        id?: string;
+        /**
+         * The cell index if the id is not set yet
+         */
+        index?: number;
+    }
+    interface IApplet {
+        appid?: string;
+        appname?: string;
+        parts: IAppletPart[];
+    }
+    interface IOptions {
+        /**
+         * The notebook associated with the cloned output area.
+         */
+        notebook: SplitViewNotebookPanel;
+        applets?: IApplet[];
+        translator?: ITranslator;
+        interceptor?: IFailsInterceptor;
+    }
+}
+export interface IViewPartBase extends AppletViewOutputArea.IAppletPart {
+    added?: boolean;
+    clone?: Widget;
+}
+export interface IViewPartSize {
+    width: number;
+    height: number;
+}
+export interface IViewPart extends IViewPartBase {
+    added?: boolean;
+    clone?: Widget;
+    cloned: ISignal<IViewPart, void>;
+    sizes?: IViewPartSize;
+}
+export interface IViewApplet {
+    appid: string;
+    appname: string;
+    parts: IViewPart[];
+    observer: ResizeObserver;
+}
+export interface IAppletPartOptions extends IViewPartBase {
+    notebook: NotebookPanel;
+}
+export interface IAppletViewOutputAreasStore {
+    [key: string]: AppletViewOutputArea;
+}
+export interface IAppletViewMainAreaWidgetStore {
+    [key: string]: MainAreaWidget<AppletViewOutputArea>;
+}
+export declare class AppletViewOutputAreaPart implements AppletViewOutputArea.IAppletPart {
+    constructor(args: IAppletPartOptions);
+    /**
+     * The index of the cell in the notebook.
+     */
+    get index(): number;
+    get cell(): Cell | undefined;
+    set cell(value: Cell | undefined);
+    get added(): boolean;
+    get id(): string | undefined;
+    set clone(value: Widget | undefined);
+    get clone(): Widget | undefined;
+    get path(): string;
+    get cloned(): ISignal<this, void>;
+    private _cell;
+    private _id;
+    private _index;
+    private _notebook;
+    private _clone;
+    private _cloned;
+}
+export declare class AppletViewRenderer extends AccordionPanel.Renderer {
+    createSectionTitle(data: Title<Widget>): HTMLElement;
+}