@fails-components/jupyter-interceptor 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,102 @@
+# fails_components_jupyter_interceptor
+
+[![Github Actions Status](https://github.com/fails-components/jupyterfails/workflows/Build/badge.svg)](https://github.com/fails-components/jupyterfails/actions/workflows/build.yml)
+
+This is an extension, that intercepts message's to and from output views and its widgets, in order to puppet external jupyter deployments of clients listening to a central instructor.
+It can be used together with the fails_components_jupyter_launcher.
+Currently, only widgets based on ipywidgets are supported.
+
+## Requirements
+
+- JupyterLab >= 4.0.0
+
+## Install
+
+To install the extension, execute:
+
+```bash
+pip install fails_components_jupyter_interceptor
+```
+
+## Uninstall
+
+To remove the extension, execute:
+
+```bash
+pip uninstall fails_components_jupyter_interceptor
+```
+
+## 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_interceptor directory
+jlpm build
+# 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_interceptor
+```
+
+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/index.d.ts

@@ -0,0 +1,24 @@
+import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+import { WidgetModel } from '@jupyter-widgets/base';
+import { Token } from '@lumino/coreutils';
+import { IFailsInterceptorUpdateMessage, IAppletWidgetRegistry, IFailsLauncherInfo } from '@fails-components/jupyter-launcher';
+export interface IFailsInterceptor {
+    isMimeTypeSupported: (mimeType: string) => boolean;
+}
+export declare const IFailsInterceptor: Token<IFailsInterceptor>;
+export declare class AppletWidgetRegistry implements IAppletWidgetRegistry {
+    constructor(launcher: IFailsLauncherInfo);
+    registerModel(path: string, modelId: string, model: WidgetModel): void;
+    unregisterPath(path: string): void;
+    unregisterModel(modelId: string): void;
+    getModelId(path: string): string;
+    getModel(path: string): WidgetModel;
+    getPath(modelId: string): string;
+    dispatchMessage(message: IFailsInterceptorUpdateMessage): void;
+    private _modelIdToPath;
+    private _pathToModelId;
+    private _pathToModel;
+    private _updateMessageArrived;
+}
+declare const plugins: JupyterFrontEndPlugin<any>[];
+export default plugins;

package/lib/index.js

@@ -0,0 +1,392 @@
+import { INotebookTracker } from '@jupyterlab/notebook';
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { Token } from '@lumino/coreutils';
+import { IFailsLauncherInfo } from '@fails-components/jupyter-launcher';
+import { Signal } from '@lumino/signaling';
+export const IFailsInterceptor = new Token('@fails-components/jupyter-fails:IFailsInterceptor', 'A service to talk with FAILS interceptor.');
+// List of static Mimetypes, where intercepting is not necessary
+const staticMimeTypes = new Set([
+    'text/html',
+    'text/plain',
+    'image/bmp',
+    'image/png',
+    'image/jpeg',
+    'image/gif',
+    'image/webp',
+    'text/latex',
+    'text/markdown',
+    'image/svg+xml',
+    'application/vnd.jupyter.stderr',
+    'application/vnd.jupyter.stdout'
+    /* 'text/javascript', 'application/javascript' We need to check, what do about it
+     */
+]);
+// List of dynamic Mimetypes, where intercepting is currently handled
+const dynamicMimeTypes = new Set([
+    'application/vnd.jupyter.widget-view+json'
+    /* 'application/vnd.plotly.v1+json' */
+]);
+export class AppletWidgetRegistry {
+    constructor(launcher) {
+        this._modelIdToPath = {};
+        this._pathToModelId = {};
+        this._pathToModel = {};
+        this._updateMessageArrived = new Signal(this);
+        launcher.updateMessageArrived = this._updateMessageArrived;
+    }
+    registerModel(path, modelId, model) {
+        this._modelIdToPath[modelId] = path;
+        this._pathToModelId[path] = modelId;
+        this._pathToModel[path] = model;
+    }
+    unregisterPath(path) {
+        const modelId = this._pathToModelId[path];
+        if (modelId) {
+            delete this._modelIdToPath[modelId];
+        }
+        delete this._pathToModelId[path];
+        delete this._pathToModel[path];
+    }
+    unregisterModel(modelId) {
+        const path = this._modelIdToPath[modelId];
+        delete this._modelIdToPath[modelId];
+        if (path) {
+            delete this._pathToModelId[path];
+            delete this._pathToModel[path];
+        }
+    }
+    getModelId(path) {
+        return this._pathToModelId[path];
+    }
+    getModel(path) {
+        return this._pathToModel[path];
+    }
+    getPath(modelId) {
+        return this._modelIdToPath[modelId];
+    }
+    dispatchMessage(message) {
+        this._updateMessageArrived.emit(message);
+        // console.log(path, mime, message);
+    }
+}
+function activateWidgetInterceptor(app, notebookTracker, rendermimeRegistry, launcher) {
+    const wRegistry = new AppletWidgetRegistry(launcher);
+    if (app.namespace === 'JupyterLite Server') {
+        return {
+            isMimeTypeSupported: (mimeType) => false
+        };
+    }
+    const addKernelInterceptor = (kernel) => {
+        kernel.anyMessage.connect((sender, args) => {
+            /*  console.log(
+              'Intercept any message',
+              args,
+              args?.msg?.header?.msg_id,
+              args?.msg?.header?.msg_type
+            ); */
+            const { direction, msg } = args;
+            if (direction === 'send') {
+                // send from the control
+                const { content, channel } = msg;
+                if (channel === 'shell') {
+                    const { data, comm_id: commId } = content;
+                    if ((data === null || data === void 0 ? void 0 : data.method) === 'update') {
+                        // got an update
+                        const path = wRegistry.getPath(commId);
+                        // console.log('Send an update', data.state, commId, path);
+                        if (path && typeof data.state === 'object') {
+                            // const inform = { path, commId, value, index, event };
+                            const state = { ...data.state };
+                            if (state.outputs) {
+                                delete state.outputs;
+                            }
+                            if (Object.keys(state).length !== 0) {
+                                wRegistry.dispatchMessage({
+                                    path,
+                                    mime: widgetsMime,
+                                    state
+                                });
+                            }
+                        }
+                    }
+                }
+                // now fish all messages of control out
+            }
+        });
+        launcher.remoteUpdateMessageArrived.connect(async (slot, args) => {
+            // const modelId = wRegistry.getModelId(args.path);
+            const model = wRegistry.getModel(args.path);
+            const state = await model.constructor._deserialize_state(args.state, model.widget_manager);
+            // console.log('got an remote interceptor message', args, state);
+            for (const [key, value] of Object.entries(state)) {
+                model.set(key, value);
+            }
+            model.sync('patch', model, { attrs: state });
+        });
+    };
+    const widgetsMime = 'application/vnd.jupyter.widget-view+json';
+    // add interceptors for mimerenderers, whose javascript, we need to patch
+    // deactivated, as one can use always widgets!
+    // eslint-disable-next-line no-constant-condition
+    if (rendermimeRegistry && false) {
+        const rmRegistry = rendermimeRegistry;
+        const mimetypes = ['application/vnd.plotly.v1+json']; // mimetypes to patch
+        mimetypes.forEach(mime => {
+            const factory = rmRegistry.getFactory(mime);
+            if (!factory) {
+                console.log('Plotly seems to be not installed! So I can not add an interceptor');
+                return;
+            }
+            // ok, lets add an interceptor
+            const createRendererOld = factory.createRenderer;
+            factory.createRenderer = function (options) {
+                const renderer = createRendererOld(options);
+                console.log('intercepted renderer', mime, renderer, renderer.node);
+                // we have also the replace renderModel
+                const renderModelOld = renderer.renderModel.bind(renderer);
+                renderer.renderModel = async (model) => {
+                    let result = await renderModelOld(model);
+                    console.log('intercepted renderer model', model);
+                    if (!renderer.hasGraphElement()) {
+                        result = await renderer.createGraph(renderer === null || renderer === void 0 ? void 0 : renderer._model);
+                    }
+                    if (renderer.node.on) {
+                        const messages = [
+                            'relayout',
+                            'hover',
+                            'unhover',
+                            'selected',
+                            'selecting',
+                            'restyle'
+                        ];
+                        messages.forEach(mess => {
+                            renderer.node.on('plotly_' + mess, (data) => {
+                                var _a, _b;
+                                const path = (_a = model.metadata) === null || _a === void 0 ? void 0 : _a.appPath;
+                                if (path) {
+                                    wRegistry.dispatchMessage({
+                                        path: path + ':' + mess,
+                                        mime,
+                                        state: data
+                                    });
+                                }
+                                console.log('plotly', mess, data, (_b = model.metadata) === null || _b === void 0 ? void 0 : _b.appPath, path);
+                            });
+                        });
+                    }
+                    console.log('renderer layout rM', 
+                    // @ts-expect-error plotly
+                    renderer.node.layout, 
+                    // @ts-expect-error plotly
+                    !!renderer.node.on, renderer);
+                    //@ts-expect-error result is different from void
+                    console.log('renderer result', result, !!(result === null || result === void 0 ? void 0 : result.on));
+                    return result;
+                };
+                // special code for plotly
+                // @ts-expect-error plotly
+                console.log('renderer layout', renderer.node.layout);
+                /* if (!(renderer as any).hasGraphElement()) {
+                    (renderer as any).createGraph((renderer as any)['_model]']);
+                  } */
+                /* //@ts-expect-error on not found
+                  renderer.node.on('plotly_relayout', (update: any) => {
+                    console.log('relayout', update);
+                  }); */
+                // special code for plotly
+                return renderer;
+            };
+        });
+    }
+    notebookTracker.widgetAdded.connect((sender, panel) => {
+        var _a;
+        if ((_a = panel.sessionContext.session) === null || _a === void 0 ? void 0 : _a.kernel) {
+            addKernelInterceptor(panel.sessionContext.session.kernel);
+        }
+        panel.sessionContext.kernelChanged.connect((sender, args) => {
+            if (args.newValue) {
+                addKernelInterceptor(args.newValue);
+                // TODO remove old interceptor?
+            }
+        });
+        const widgetManagerPromise = panel.context.sessionContext.ready.then(() => {
+            return new Promise((resolve, reject) => {
+                requestAnimationFrame(async () => {
+                    // ensure it is handled after the widgetmanager is installed.
+                    const rendermime = panel.content.rendermime;
+                    const widgetFactory = rendermime.getFactory(widgetsMime);
+                    if (widgetFactory) {
+                        // now create a dummy widget
+                        const dummyWidget = widgetFactory.createRenderer({
+                            mimeType: widgetsMime,
+                            sanitizer: {
+                                sanitize: (dirty, options) => ''
+                            },
+                            resolver: {
+                                getDownloadUrl: url => Promise.resolve(''),
+                                resolveUrl: url => Promise.resolve('')
+                            },
+                            latexTypesetter: null,
+                            linkHandler: null
+                        });
+                        resolve(await dummyWidget._manager.promise);
+                        dummyWidget.dispose();
+                    }
+                    else {
+                        reject(new Error('No widgetFactory found for widget view'));
+                    }
+                });
+            });
+        });
+        widgetManagerPromise === null || widgetManagerPromise === void 0 ? void 0 : widgetManagerPromise.then(widgetManager => {
+            const notebookModel = panel.model;
+            if (notebookModel) {
+                const trackedCells = new WeakSet();
+                const pendingModels = [];
+                const iterateWidgets = async (path, widget_model_id) => {
+                    if (widgetManager === null || widgetManager === void 0 ? void 0 : widgetManager.has_model(widget_model_id)) {
+                        const widget = await (widgetManager === null || widgetManager === void 0 ? void 0 : widgetManager.get_model(widget_model_id));
+                        // const children = widget.attributes.children as
+                        /* widget.attributes.children.forEach((child) => {
+                            iterateWidgets(path + '/' + child. ,)
+                          }) */
+                        const mypath = path + (widget.name ? '/' + widget.name : '');
+                        const state = widget.get_state();
+                        const children = state.children;
+                        if (children) {
+                            children.forEach((child, index) => {
+                                iterateWidgets(mypath + '/' + index, child.model_id);
+                            });
+                        }
+                        // console.log('show widget model', path, widget.get_state());
+                        wRegistry.registerModel(mypath, widget.model_id, widget);
+                        /* console.log(
+                          'model registred',
+                          mypath,
+                          widget.model_id /*, state*,
+                          widget
+                        ); */
+                    }
+                    else {
+                        // console.log('model missing', widget_model_id);
+                        pendingModels.push({ path, widget_model_id });
+                    }
+                };
+                /* const labWidgetManager = widgetManager as LabWidgetManager;
+        
+                  if (labWidgetManager) {
+                    labWidgetManager.restored.connect(lWManager => {
+                      // we may be able to continue for some missing widgets
+                      console.log('RESTORED');
+                      const stillPendingModels: {
+                        path: string;
+                        widget_model_id: string;
+                      }[] = [];
+                      while (pendingModels.length > 0) {
+                        const pModel = pendingModels.pop();
+                        if (!pModel) {
+                          break;
+                        }
+                        if (widgetManager?.has_model(pModel.widget_model_id)) {
+                          console.log('Resume model search', pModel.path);
+                          iterateWidgets(pModel.path, pModel.widget_model_id);
+                        } else {
+                          stillPendingModels.push(pModel);
+                        }
+                      }
+                      pendingModels.push(...stillPendingModels);
+                    });
+                  } */
+                const onCellsChanged = (cell) => {
+                    if (!trackedCells.has(cell)) {
+                        trackedCells.add(cell);
+                        const updateMimedata = () => {
+                            if (cell.type === 'code') {
+                                // now we figure out, if all widgets are registered
+                                const sharedModel = cell.sharedModel;
+                                let index = 0;
+                                for (const output of sharedModel.outputs) {
+                                    const appPath = cell.id + '/' + index;
+                                    let addPath = false;
+                                    // tag all sharedmodels with the path
+                                    switch (output.output_type) {
+                                        case 'display_data':
+                                        case 'update_display_data':
+                                        case 'execute_result':
+                                            {
+                                                const result = output;
+                                                // console.log('Mimebundle', result.data); // to do parse this also
+                                                // console.log('Metadata', result.metadata);
+                                                // console.log('Result', result);
+                                                const mimebundle = result.data;
+                                                if (mimebundle[widgetsMime]) {
+                                                    const { model_id } = mimebundle[widgetsMime];
+                                                    iterateWidgets(appPath, model_id);
+                                                }
+                                                // Deactivate, as we are not using it, use a plotly widget instead.
+                                                if (
+                                                // eslint-disable-next-line no-constant-condition
+                                                mimebundle['application/vnd.plotly.v1+json'] &&
+                                                    false) {
+                                                    const bundle = mimebundle['application/vnd.plotly.v1+json'];
+                                                    console.log('Plotly bundle', bundle);
+                                                    console.log('plotly cell', cell);
+                                                    if (result.metadata.appPath !== appPath) {
+                                                        result.metadata.appPath = appPath;
+                                                        addPath = true;
+                                                    }
+                                                }
+                                            }
+                                            break;
+                                        case 'stream':
+                                        case 'error':
+                                        default:
+                                    }
+                                    if (addPath) {
+                                        // should happen only once
+                                        sharedModel.updateOutputs(index, index + 1, [output]);
+                                    }
+                                    index++;
+                                }
+                            }
+                        };
+                        cell.contentChanged.connect(updateMimedata);
+                        updateMimedata();
+                    }
+                };
+                for (const cell of notebookModel.cells) {
+                    onCellsChanged(cell);
+                }
+                notebookModel.cells.changed.connect((cellist, changedList) => {
+                    const { /*newIndex,*/ newValues /* oldIndex, oldValues, type */ } = changedList;
+                    newValues.forEach(newcell => {
+                        onCellsChanged(newcell);
+                        // console.log('changed cells', newcell);
+                    });
+                });
+            }
+        });
+    });
+    return {
+        isMimeTypeSupported: (mimeType) => {
+            if (staticMimeTypes.has(mimeType)) {
+                return true;
+            }
+            if (dynamicMimeTypes.has(mimeType)) {
+                return true;
+            }
+            return false;
+        }
+    };
+}
+const appletWidgetInterceptor = {
+    id: '@fails-components/jupyter-applet-widget:interceptor',
+    description: 'Tracks and intercepts widget communication',
+    autoStart: true,
+    activate: activateWidgetInterceptor,
+    provides: IFailsInterceptor,
+    requires: [INotebookTracker, IRenderMimeRegistry, IFailsLauncherInfo],
+    optional: []
+};
+const plugins = [appletWidgetInterceptor];
+export default plugins;

package/package.json

@@ -0,0 +1,214 @@
+{
+    "name": "@fails-components/jupyter-interceptor",
+    "version": "0.0.1-alpha.10",
+    "description": "A collections of plugins intercepting kernel messages and other message, to steer outputs remotely",
+    "keywords": [
+        "jupyter",
+        "jupyterlab",
+        "jupyterlab-extension"
+    ],
+    "homepage": "https://github.com/fails-components/jupyterfails",
+    "bugs": {
+        "url": "https://github.com/fails-components/jupyterfails/issues"
+    },
+    "license": "BSD-3-Clause",
+    "author": {
+        "name": "Marten Richter",
+        "email": "marten.richter@freenet.de"
+    },
+    "files": [
+        "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+        "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
+        "schema/*.json",
+        "src/**/*.{ts,tsx}",
+        "LICENSE",
+        "README.md"
+    ],
+    "main": "lib/index.js",
+    "types": "lib/index.d.ts",
+    "style": "style/index.css",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/fails-components/jupyterfails.git"
+    },
+    "scripts": {
+        "build": "jlpm build:lib && jlpm build:labextension:dev",
+        "build:prod": "jlpm clean && jlpm build:lib:prod && jlpm build:labextension",
+        "build:labextension": "jupyter labextension build .",
+        "build:labextension:dev": "jupyter labextension build --development True .",
+        "build:lib": "tsc --sourceMap",
+        "build:lib:prod": "tsc",
+        "clean": "jlpm clean:lib",
+        "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
+        "clean:lintcache": "rimraf .eslintcache .stylelintcache",
+        "clean:labextension": "rimraf fails_components_jupyter_interceptor/labextension fails_components_jupyter_interceptor/_version.py",
+        "clean:all": "jlpm clean:lib && jlpm clean:labextension && jlpm clean:lintcache",
+        "eslint": "jlpm eslint:check --fix",
+        "eslint:check": "eslint . --cache --ext .ts,.tsx",
+        "install:extension": "jlpm build",
+        "lint": "jlpm stylelint && jlpm prettier && jlpm eslint",
+        "lint:check": "jlpm stylelint:check && jlpm prettier:check && jlpm eslint:check",
+        "prepublishOnly": "npm run build",
+        "prettier": "jlpm prettier:base --write --list-different",
+        "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
+        "prettier:check": "jlpm prettier:base --check",
+        "stylelint": "jlpm stylelint:check --fix",
+        "stylelint:check": "stylelint --cache \"style/**/*.css\"",
+        "test": "jest --coverage --passWithNoTests",
+        "watch": "run-p watch:src watch:labextension",
+        "watch:src": "tsc -w --sourceMap",
+        "watch:labextension": "jupyter labextension watch ."
+    },
+    "dependencies": {
+        "@fails-components/jupyter-launcher": "^0.0.1-alpha.10",
+        "@jupyter-widgets/base": "^6.0.8",
+        "@jupyter-widgets/jupyterlab-manager": "^5.0.11",
+        "@jupyter/ydoc": "^3.0.0",
+        "@jupyterlab/application": "^4.3.4",
+        "@jupyterlab/cells": "^4.3.4",
+        "@jupyterlab/nbformat": "^4.3.4",
+        "@jupyterlab/notebook": "^4.3.4",
+        "@jupyterlab/rendermime": "^4.3.4",
+        "@jupyterlab/services": "^7.3.4",
+        "@jupyterlite/application-extension": "^0.5.0",
+        "@jupyterlite/contents": "^0.5.0",
+        "@jupyterlite/server": "^0.5.0",
+        "@jupyterlite/settings": "^0.5.0",
+        "@lumino/coreutils": "^2.2.0",
+        "json5": "^2.2.3"
+    },
+    "devDependencies": {
+        "@jupyterlab/builder": "^4.0.0",
+        "@jupyterlab/testutils": "^4.0.0",
+        "@types/jest": "^29.2.0",
+        "@types/json-schema": "^7.0.11",
+        "@types/react": "^18.0.26",
+        "@types/react-addons-linked-state-mixin": "^0.14.22",
+        "@typescript-eslint/eslint-plugin": "^6.1.0",
+        "@typescript-eslint/parser": "^6.1.0",
+        "css-loader": "^6.7.1",
+        "eslint": "^8.36.0",
+        "eslint-config-prettier": "^8.8.0",
+        "eslint-plugin-prettier": "^5.0.0",
+        "jest": "^29.2.0",
+        "npm-run-all": "^4.1.5",
+        "prettier": "^3.0.0",
+        "rimraf": "^5.0.1",
+        "source-map-loader": "^1.0.2",
+        "style-loader": "^3.3.1",
+        "stylelint": "^15.10.1",
+        "stylelint-config-recommended": "^13.0.0",
+        "stylelint-config-standard": "^34.0.0",
+        "stylelint-csstree-validator": "^3.0.0",
+        "stylelint-prettier": "^4.0.0",
+        "typescript": "~5.0.2",
+        "yjs": "^13.5.0"
+    },
+    "sideEffects": [
+        "style/*.css",
+        "style/index.js"
+    ],
+    "styleModule": "style/index.js",
+    "publishConfig": {
+        "access": "public"
+    },
+    "jupyterlab": {
+        "extension": true,
+        "outputDir": "fails_components_jupyter_interceptor/labextension",
+        "schemaDir": "schema"
+    },
+    "eslintIgnore": [
+        "node_modules",
+        "dist",
+        "coverage",
+        "**/*.d.ts",
+        "tests",
+        "**/__tests__",
+        "ui-tests"
+    ],
+    "eslintConfig": {
+        "extends": [
+            "eslint:recommended",
+            "plugin:@typescript-eslint/eslint-recommended",
+            "plugin:@typescript-eslint/recommended",
+            "plugin:prettier/recommended"
+        ],
+        "parser": "@typescript-eslint/parser",
+        "parserOptions": {
+            "project": "tsconfig.json",
+            "sourceType": "module"
+        },
+        "plugins": [
+            "@typescript-eslint"
+        ],
+        "rules": {
+            "@typescript-eslint/naming-convention": [
+                "error",
+                {
+                    "selector": "interface",
+                    "format": [
+                        "PascalCase"
+                    ],
+                    "custom": {
+                        "regex": "^I[A-Z]",
+                        "match": true
+                    }
+                }
+            ],
+            "@typescript-eslint/no-unused-vars": [
+                "warn",
+                {
+                    "args": "none"
+                }
+            ],
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-namespace": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/quotes": [
+                "error",
+                "single",
+                {
+                    "avoidEscape": true,
+                    "allowTemplateLiterals": false
+                }
+            ],
+            "curly": [
+                "error",
+                "all"
+            ],
+            "eqeqeq": "error",
+            "prefer-arrow-callback": "error"
+        }
+    },
+    "prettier": {
+        "singleQuote": true,
+        "trailingComma": "none",
+        "arrowParens": "avoid",
+        "endOfLine": "auto",
+        "overrides": [
+            {
+                "files": "package.json",
+                "options": {
+                    "tabWidth": 4
+                }
+            }
+        ]
+    },
+    "stylelint": {
+        "extends": [
+            "stylelint-config-recommended",
+            "stylelint-config-standard",
+            "stylelint-prettier/recommended"
+        ],
+        "plugins": [
+            "stylelint-csstree-validator"
+        ],
+        "rules": {
+            "csstree/validator": true,
+            "property-no-vendor-prefix": null,
+            "selector-class-pattern": "^([a-z][A-z\\d]*)(-[A-z\\d]+)*$",
+            "selector-no-vendor-prefix": null,
+            "value-no-vendor-prefix": null
+        }
+    }
+}

package/src/index.ts

@@ -0,0 +1,507 @@
+import {
+  INotebookTracker,
+  NotebookPanel,
+  INotebookModel
+} from '@jupyterlab/notebook';
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+import { IWidgetManager, WidgetModel } from '@jupyter-widgets/base';
+import {
+  IExecuteResult,
+  IDisplayData,
+  IDisplayUpdate
+} from '@jupyterlab/nbformat';
+import {
+  IRenderMime,
+  IRenderMimeRegistry,
+  RenderMimeRegistry
+} from '@jupyterlab/rendermime';
+import { ICellModel } from '@jupyterlab/cells';
+import { ISharedCodeCell } from '@jupyter/ydoc';
+import { JSONObject, PromiseDelegate, Token } from '@lumino/coreutils';
+import { Kernel /*, KernelMessage */ } from '@jupyterlab/services';
+import {
+  IFailsInterceptorUpdateMessage,
+  IAppletWidgetRegistry,
+  IFailsLauncherInfo
+} from '@fails-components/jupyter-launcher';
+import { Signal } from '@lumino/signaling';
+
+export interface IFailsInterceptor {
+  isMimeTypeSupported: (mimeType: string) => boolean;
+}
+
+export const IFailsInterceptor = new Token<IFailsInterceptor>(
+  '@fails-components/jupyter-fails:IFailsInterceptor',
+  'A service to talk with FAILS interceptor.'
+);
+
+// List of static Mimetypes, where intercepting is not necessary
+const staticMimeTypes = new Set([
+  'text/html',
+  'text/plain',
+  'image/bmp',
+  'image/png',
+  'image/jpeg',
+  'image/gif',
+  'image/webp',
+  'text/latex',
+  'text/markdown',
+  'image/svg+xml',
+  'application/vnd.jupyter.stderr',
+  'application/vnd.jupyter.stdout'
+  /* 'text/javascript', 'application/javascript' We need to check, what do about it
+   */
+]);
+// List of dynamic Mimetypes, where intercepting is currently handled
+const dynamicMimeTypes = new Set<string>([
+  'application/vnd.jupyter.widget-view+json'
+  /* 'application/vnd.plotly.v1+json' */
+]);
+
+export class AppletWidgetRegistry implements IAppletWidgetRegistry {
+  constructor(launcher: IFailsLauncherInfo) {
+    launcher.updateMessageArrived = this._updateMessageArrived;
+  }
+  registerModel(path: string, modelId: string, model: WidgetModel) {
+    this._modelIdToPath[modelId] = path;
+    this._pathToModelId[path] = modelId;
+    this._pathToModel[path] = model;
+  }
+
+  unregisterPath(path: string) {
+    const modelId = this._pathToModelId[path];
+    if (modelId) {
+      delete this._modelIdToPath[modelId];
+    }
+    delete this._pathToModelId[path];
+    delete this._pathToModel[path];
+  }
+
+  unregisterModel(modelId: string) {
+    const path = this._modelIdToPath[modelId];
+    delete this._modelIdToPath[modelId];
+    if (path) {
+      delete this._pathToModelId[path];
+      delete this._pathToModel[path];
+    }
+  }
+
+  getModelId(path: string) {
+    return this._pathToModelId[path];
+  }
+
+  getModel(path: string) {
+    return this._pathToModel[path];
+  }
+
+  getPath(modelId: string) {
+    return this._modelIdToPath[modelId];
+  }
+
+  dispatchMessage(message: IFailsInterceptorUpdateMessage) {
+    this._updateMessageArrived.emit(message);
+    // console.log(path, mime, message);
+  }
+
+  private _modelIdToPath: { [key: string]: string } = {};
+  private _pathToModelId: { [key: string]: string } = {};
+  private _pathToModel: { [key: string]: WidgetModel } = {};
+  private _updateMessageArrived = new Signal<
+    IAppletWidgetRegistry,
+    IFailsInterceptorUpdateMessage
+  >(this);
+}
+
+function activateWidgetInterceptor(
+  app: JupyterFrontEnd,
+  notebookTracker: INotebookTracker,
+  rendermimeRegistry: IRenderMimeRegistry,
+  launcher: IFailsLauncherInfo
+): IFailsInterceptor {
+  const wRegistry = new AppletWidgetRegistry(launcher);
+  if (app.namespace === 'JupyterLite Server') {
+    return {
+      isMimeTypeSupported: (mimeType: string) => false
+    };
+  }
+  const addKernelInterceptor = (kernel: Kernel.IKernelConnection) => {
+    kernel.anyMessage.connect((sender, args) => {
+      /*  console.log(
+        'Intercept any message',
+        args,
+        args?.msg?.header?.msg_id,
+        args?.msg?.header?.msg_type
+      ); */
+      const { direction, msg } = args;
+      if (direction === 'send') {
+        // send from the control
+        const { content, channel } = msg;
+        if (channel === 'shell') {
+          const { data, comm_id: commId } = content as {
+            comm_id: string;
+            data: JSONObject;
+          };
+
+          if (data?.method === 'update') {
+            // got an update
+            const path = wRegistry.getPath(commId);
+            // console.log('Send an update', data.state, commId, path);
+            if (path && typeof data.state === 'object') {
+              // const inform = { path, commId, value, index, event };
+              const state = { ...data.state } as JSONObject;
+              if (state.outputs) {
+                delete state.outputs;
+              }
+              if (Object.keys(state).length !== 0) {
+                wRegistry.dispatchMessage({
+                  path,
+                  mime: widgetsMime,
+                  state
+                });
+              }
+            }
+          }
+        }
+        // now fish all messages of control out
+      }
+    });
+    launcher.remoteUpdateMessageArrived.connect(
+      async (
+        slot: IFailsLauncherInfo,
+        args: IFailsInterceptorUpdateMessage
+      ) => {
+        // const modelId = wRegistry.getModelId(args.path);
+        const model = wRegistry.getModel(args.path);
+        const state = await (
+          model.constructor as typeof WidgetModel
+        )._deserialize_state(args.state, model.widget_manager);
+        // console.log('got an remote interceptor message', args, state);
+
+        for (const [key, value] of Object.entries(state)) {
+          model.set(key, value);
+        }
+        model.sync('patch', model, { attrs: state });
+      }
+    );
+  };
+
+  const widgetsMime = 'application/vnd.jupyter.widget-view+json';
+
+  // add interceptors for mimerenderers, whose javascript, we need to patch
+  // deactivated, as one can use always widgets!
+  // eslint-disable-next-line no-constant-condition
+  if (rendermimeRegistry && false) {
+    const rmRegistry = rendermimeRegistry as RenderMimeRegistry;
+    const mimetypes = ['application/vnd.plotly.v1+json']; // mimetypes to patch
+
+    mimetypes.forEach(mime => {
+      const factory = rmRegistry.getFactory(
+        mime
+      ) as IRenderMime.IRendererFactory;
+      if (!factory) {
+        console.log(
+          'Plotly seems to be not installed! So I can not add an interceptor'
+        );
+        return;
+      }
+      // ok, lets add an interceptor
+      const createRendererOld = factory.createRenderer;
+      factory.createRenderer = function (
+        options: IRenderMime.IRendererOptions
+      ) {
+        const renderer = createRendererOld(options);
+        console.log('intercepted renderer', mime, renderer, renderer.node);
+        // we have also the replace renderModel
+        const renderModelOld = renderer.renderModel.bind(renderer);
+        renderer.renderModel = async (model: IRenderMime.IMimeModel) => {
+          let result = await renderModelOld(model);
+          console.log('intercepted renderer model', model);
+          if (!(<any>renderer).hasGraphElement()) {
+            result = await (renderer as any).createGraph(
+              (renderer as any)?._model
+            );
+          }
+          if ((<any>renderer.node).on) {
+            const messages = [
+              'relayout',
+              'hover',
+              'unhover',
+              'selected',
+              'selecting',
+              'restyle'
+            ];
+            messages.forEach(mess => {
+              (<any>renderer.node).on('plotly_' + mess, (data: any) => {
+                const path = model.metadata?.appPath as string;
+                if (path) {
+                  wRegistry.dispatchMessage({
+                    path: path + ':' + mess,
+                    mime,
+                    state: data
+                  });
+                }
+                console.log(
+                  'plotly',
+                  mess,
+                  data,
+                  model.metadata?.appPath,
+                  path
+                );
+              });
+            });
+          }
+          console.log(
+            'renderer layout rM',
+            // @ts-expect-error plotly
+            renderer.node.layout,
+            // @ts-expect-error plotly
+            !!renderer.node.on,
+            renderer
+          );
+          //@ts-expect-error result is different from void
+          console.log('renderer result', result, !!result?.on);
+
+          return result;
+        };
+        // special code for plotly
+        // @ts-expect-error plotly
+        console.log('renderer layout', renderer.node.layout);
+        /* if (!(renderer as any).hasGraphElement()) {
+            (renderer as any).createGraph((renderer as any)['_model]']);
+          } */
+
+        /* //@ts-expect-error on not found
+          renderer.node.on('plotly_relayout', (update: any) => {
+            console.log('relayout', update);
+          }); */
+
+        // special code for plotly
+        return renderer;
+      };
+    });
+  }
+
+  notebookTracker.widgetAdded.connect(
+    (sender: INotebookTracker, panel: NotebookPanel) => {
+      if (panel.sessionContext.session?.kernel) {
+        addKernelInterceptor(panel.sessionContext.session.kernel);
+      }
+      panel.sessionContext.kernelChanged.connect((sender, args) => {
+        if (args.newValue) {
+          addKernelInterceptor(args.newValue);
+          // TODO remove old interceptor?
+        }
+      });
+
+      const widgetManagerPromise: Promise<IWidgetManager> =
+        panel.context.sessionContext.ready.then(() => {
+          return new Promise((resolve, reject) => {
+            requestAnimationFrame(async () => {
+              // ensure it is handled after the widgetmanager is installed.
+              const rendermime = panel.content.rendermime;
+              const widgetFactory = rendermime.getFactory(widgetsMime);
+              if (widgetFactory) {
+                // now create a dummy widget
+                const dummyWidget = widgetFactory.createRenderer({
+                  mimeType: widgetsMime,
+                  sanitizer: {
+                    sanitize: (dirty, options) => ''
+                  },
+                  resolver: {
+                    getDownloadUrl: url => Promise.resolve(''),
+                    resolveUrl: url => Promise.resolve('')
+                  },
+                  latexTypesetter: null,
+                  linkHandler: null
+                });
+                resolve(
+                  await (
+                    dummyWidget as unknown as {
+                      _manager: PromiseDelegate<IWidgetManager>;
+                    }
+                  )._manager.promise
+                );
+                dummyWidget.dispose();
+              } else {
+                reject(new Error('No widgetFactory found for widget view'));
+              }
+            });
+          });
+        });
+
+      widgetManagerPromise?.then(widgetManager => {
+        const notebookModel = panel.model as INotebookModel;
+        if (notebookModel) {
+          const trackedCells = new WeakSet<ICellModel>();
+
+          const pendingModels: { path: string; widget_model_id: string }[] = [];
+
+          const iterateWidgets = async (
+            path: string,
+            widget_model_id: string
+          ) => {
+            if (widgetManager?.has_model(widget_model_id)) {
+              const widget = await widgetManager?.get_model(widget_model_id);
+              // const children = widget.attributes.children as
+              /* widget.attributes.children.forEach((child) => {
+                  iterateWidgets(path + '/' + child. ,)
+                }) */
+              const mypath = path + (widget.name ? '/' + widget.name : '');
+              const state = widget.get_state();
+              const children = state.children as unknown as [WidgetModel];
+              if (children) {
+                children.forEach((child, index) => {
+                  iterateWidgets(mypath + '/' + index, child.model_id);
+                });
+              }
+              // console.log('show widget model', path, widget.get_state());
+              wRegistry.registerModel(mypath, widget.model_id, widget);
+              /* console.log(
+                'model registred',
+                mypath,
+                widget.model_id /*, state*,
+                widget
+              ); */
+            } else {
+              // console.log('model missing', widget_model_id);
+              pendingModels.push({ path, widget_model_id });
+            }
+          };
+          /* const labWidgetManager = widgetManager as LabWidgetManager;
+  
+            if (labWidgetManager) {
+              labWidgetManager.restored.connect(lWManager => {
+                // we may be able to continue for some missing widgets
+                console.log('RESTORED');
+                const stillPendingModels: {
+                  path: string;
+                  widget_model_id: string;
+                }[] = [];
+                while (pendingModels.length > 0) {
+                  const pModel = pendingModels.pop();
+                  if (!pModel) {
+                    break;
+                  }
+                  if (widgetManager?.has_model(pModel.widget_model_id)) {
+                    console.log('Resume model search', pModel.path);
+                    iterateWidgets(pModel.path, pModel.widget_model_id);
+                  } else {
+                    stillPendingModels.push(pModel);
+                  }
+                }
+                pendingModels.push(...stillPendingModels);
+              });
+            } */
+
+          const onCellsChanged = (cell: ICellModel) => {
+            if (!trackedCells.has(cell)) {
+              trackedCells.add(cell);
+              const updateMimedata = () => {
+                if (cell.type === 'code') {
+                  // now we figure out, if all widgets are registered
+                  const sharedModel = cell.sharedModel as ISharedCodeCell;
+                  let index = 0;
+                  for (const output of sharedModel.outputs) {
+                    const appPath = cell.id + '/' + index;
+                    let addPath = false;
+                    // tag all sharedmodels with the path
+                    switch (output.output_type) {
+                      case 'display_data':
+                      case 'update_display_data':
+                      case 'execute_result':
+                        {
+                          const result = output as
+                            | IExecuteResult
+                            | IDisplayUpdate
+                            | IDisplayData;
+
+                          // console.log('Mimebundle', result.data); // to do parse this also
+                          // console.log('Metadata', result.metadata);
+                          // console.log('Result', result);
+                          const mimebundle = result.data;
+                          if (mimebundle[widgetsMime]) {
+                            const { model_id } = mimebundle[widgetsMime] as {
+                              model_id: string;
+                            };
+                            iterateWidgets(appPath, model_id);
+                          }
+
+                          // Deactivate, as we are not using it, use a plotly widget instead.
+                          if (
+                            // eslint-disable-next-line no-constant-condition
+                            mimebundle['application/vnd.plotly.v1+json'] &&
+                            false
+                          ) {
+                            const bundle =
+                              mimebundle['application/vnd.plotly.v1+json'];
+                            console.log('Plotly bundle', bundle);
+                            console.log('plotly cell', cell);
+                            if ((<any>result.metadata).appPath !== appPath) {
+                              (<any>result.metadata).appPath = appPath;
+                              addPath = true;
+                            }
+                          }
+                        }
+                        break;
+
+                      case 'stream':
+                      case 'error':
+                      default:
+                    }
+                    if (addPath) {
+                      // should happen only once
+                      sharedModel.updateOutputs(index, index + 1, [output]);
+                    }
+                    index++;
+                  }
+                }
+              };
+
+              cell.contentChanged.connect(updateMimedata);
+              updateMimedata();
+            }
+          };
+          for (const cell of notebookModel.cells) {
+            onCellsChanged(cell);
+          }
+          notebookModel.cells.changed.connect((cellist, changedList) => {
+            const { /*newIndex,*/ newValues /* oldIndex, oldValues, type */ } =
+              changedList;
+            newValues.forEach(newcell => {
+              onCellsChanged(newcell);
+              // console.log('changed cells', newcell);
+            });
+          });
+        }
+      });
+    }
+  );
+  return {
+    isMimeTypeSupported: (mimeType: string) => {
+      if (staticMimeTypes.has(mimeType)) {
+        return true;
+      }
+      if (dynamicMimeTypes.has(mimeType)) {
+        return true;
+      }
+      return false;
+    }
+  };
+}
+
+const appletWidgetInterceptor: JupyterFrontEndPlugin<IFailsInterceptor> = {
+  id: '@fails-components/jupyter-applet-widget:interceptor',
+  description: 'Tracks and intercepts widget communication',
+  autoStart: true,
+  activate: activateWidgetInterceptor,
+  provides: IFailsInterceptor,
+  requires: [INotebookTracker, IRenderMimeRegistry, IFailsLauncherInfo],
+  optional: []
+};
+
+const plugins: JupyterFrontEndPlugin<any>[] = [appletWidgetInterceptor];
+
+export default plugins;

package/style/base.css

@@ -0,0 +1,5 @@
+/*
+    See the JupyterLab Developer Guide for useful CSS Patterns:
+
+    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
+*/

package/style/index.css

@@ -0,0 +1 @@
+@import url('base.css');

package/style/index.js

@@ -0,0 +1,2 @@
+import './base.css';
+import './index.css';