jupyterlab-ipyflow 0.0.86

package/lib/index.d.ts

@@ -0,0 +1,6 @@
+import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+/**
+ * Initialization data for the jupyterlab-ipyflow extension.
+ */
+declare const extension: JupyterFrontEndPlugin<void>;
+export default extension;

package/lib/index.js

@@ -0,0 +1,366 @@
+import { CodeCell } from '@jupyterlab/cells';
+import { INotebookTracker } from '@jupyterlab/notebook';
+const IPYFLOW_KERNEL_NAME = 'ipyflow';
+/**
+ * Initialization data for the jupyterlab-ipyflow extension.
+ */
+const extension = {
+    id: 'jupyterlab-ipyflow',
+    requires: [INotebookTracker],
+    autoStart: true,
+    activate: (app, notebooks) => {
+        notebooks.widgetAdded.connect((sender, nbPanel) => {
+            const session = nbPanel.sessionContext;
+            session.ready.then(() => {
+                clearCellState(nbPanel.content);
+                activeCell = nbPanel.content.activeCell;
+                activeCellId = nbPanel.content.activeCell.model.id;
+                let commDisconnectHandler = () => { };
+                if (session.session.kernel.name === IPYFLOW_KERNEL_NAME) {
+                    commDisconnectHandler = connectToComm(session, nbPanel.content);
+                }
+                session.kernelChanged.connect((_, args) => {
+                    clearCellState(nbPanel.content);
+                    commDisconnectHandler();
+                    commDisconnectHandler = () => { };
+                    if (args.newValue !== null && args.newValue.name === IPYFLOW_KERNEL_NAME) {
+                        commDisconnectHandler = connectToComm(session, nbPanel.content);
+                    }
+                });
+                let shouldReconnect = false;
+                session.statusChanged.connect((session, status) => {
+                    if (status === 'restarting' || status === 'autorestarting') {
+                        shouldReconnect = true;
+                    }
+                    if ((status === 'idle' || status === 'busy') && shouldReconnect) {
+                        shouldReconnect = false;
+                        session.ready.then(() => {
+                            clearCellState(nbPanel.content);
+                            commDisconnectHandler();
+                            commDisconnectHandler = () => { };
+                            if (session.session.kernel.name === IPYFLOW_KERNEL_NAME) {
+                                commDisconnectHandler = connectToComm(session, nbPanel.content);
+                            }
+                        });
+                    }
+                });
+            });
+        });
+    }
+};
+const staleClass = 'stale-cell';
+const freshClass = 'fresh-cell';
+const refresherClass = 'refresher-cell';
+const refresherInputClass = 'refresher-input-cell';
+const linkedStaleClass = 'linked-stale';
+const linkedRefresherClass = 'linked-refresher';
+let dirtyCells = new Set();
+let staleCells = new Set();
+let freshCells = new Set();
+let staleLinks = {};
+let refresherLinks = {};
+let activeCell = null;
+let activeCellId = null;
+let cellsById = {};
+let orderIdxById = {};
+let cellPendingExecution = null;
+let lastExecutionMode = null;
+let lastExecutionHighlightsEnabled = null;
+let executedReactiveFreshCells = new Set();
+let newFreshCells = new Set();
+let forcedReactiveCells = new Set();
+const cleanup = new Event('cleanup');
+const getJpInputCollapser = (elem) => {
+    if (elem === null || elem === undefined) {
+        return null;
+    }
+    const child = elem.children.item(1);
+    if (child === null) {
+        return null;
+    }
+    return child.firstElementChild;
+};
+const getJpOutputCollapser = (elem) => {
+    if (elem === null || elem === undefined) {
+        return null;
+    }
+    const child = elem.children.item(2);
+    if (child === null) {
+        return null;
+    }
+    return child.firstElementChild;
+};
+const attachCleanupListener = (elem, evt, listener) => {
+    const cleanupListener = () => {
+        elem.removeEventListener(evt, listener);
+        elem.removeEventListener('cleanup', cleanupListener);
+    };
+    elem.addEventListener(evt, listener);
+    elem.addEventListener('cleanup', cleanupListener);
+};
+const addStaleOutputInteraction = (elem, linkedElem, evt, add_or_remove, css) => {
+    if (elem === null || linkedElem === null) {
+        return;
+    }
+    const listener = () => {
+        linkedElem.firstElementChild.classList[add_or_remove](css);
+    };
+    attachCleanupListener(elem, evt, listener);
+};
+const addStaleOutputInteractions = (elem, linkedInputClass) => {
+    addStaleOutputInteraction(getJpInputCollapser(elem), getJpOutputCollapser(elem), 'mouseover', 'add', linkedStaleClass);
+    addStaleOutputInteraction(getJpInputCollapser(elem), getJpOutputCollapser(elem), 'mouseout', 'remove', linkedStaleClass);
+    addStaleOutputInteraction(getJpOutputCollapser(elem), getJpInputCollapser(elem), 'mouseover', 'add', linkedInputClass);
+    addStaleOutputInteraction(getJpOutputCollapser(elem), getJpInputCollapser(elem), 'mouseout', 'remove', linkedInputClass);
+};
+const refreshNodeMapping = (notebook) => {
+    cellsById = {};
+    orderIdxById = {};
+    notebook.widgets.forEach((cell, idx) => {
+        cellsById[cell.model.id] = cell.node;
+        orderIdxById[cell.model.id] = idx;
+    });
+};
+const clearCellState = (notebook) => {
+    notebook.widgets.forEach((cell, idx) => {
+        cell.node.classList.remove(staleClass);
+        cell.node.classList.remove(refresherClass);
+        cell.node.classList.remove(freshClass);
+        cell.node.classList.remove(refresherInputClass);
+        // clear any old event listeners
+        const inputCollapser = getJpInputCollapser(cell.node);
+        if (inputCollapser !== null) {
+            inputCollapser.firstElementChild.classList.remove(linkedStaleClass);
+            inputCollapser.firstElementChild.classList.remove(linkedRefresherClass);
+            inputCollapser.dispatchEvent(cleanup);
+        }
+        const outputCollapser = getJpOutputCollapser(cell.node);
+        if (outputCollapser !== null) {
+            outputCollapser.firstElementChild.classList.remove(linkedStaleClass);
+            outputCollapser.firstElementChild.classList.remove(linkedRefresherClass);
+            outputCollapser.dispatchEvent(cleanup);
+        }
+    });
+};
+const addUnsafeCellInteraction = (elem, linkedElems, cellsById, collapserFun, evt, add_or_remove, staleCells) => {
+    if (elem === null) {
+        return;
+    }
+    const listener = () => {
+        for (const linkedId of linkedElems) {
+            let css = linkedRefresherClass;
+            if (staleCells.has(linkedId)) {
+                css = linkedStaleClass;
+            }
+            const collapser = collapserFun(cellsById[linkedId]);
+            if (collapser === null || collapser.firstElementChild === null) {
+                return;
+            }
+            collapser.firstElementChild.classList[add_or_remove](css);
+        }
+    };
+    elem.addEventListener(evt, listener);
+    attachCleanupListener(elem, evt, listener);
+};
+const connectToComm = (session, notebook) => {
+    const comm = session.session.kernel.createComm('ipyflow');
+    let disconnected = false;
+    const onExecution = (cell, args) => {
+        if (disconnected) {
+            cell.stateChanged.disconnect(onExecution);
+            return;
+        }
+        if (args.name !== 'executionCount' || args.newValue === null) {
+            return;
+        }
+        const order_index_by_cell_id = {};
+        notebook.widgets.forEach((itercell, idx) => {
+            order_index_by_cell_id[itercell.model.id] = idx;
+            if (itercell.model.id === cell.id) {
+                itercell.node.classList.remove(freshClass);
+                itercell.node.classList.remove(refresherInputClass);
+            }
+        });
+        const payload = {
+            type: 'cell_freshness',
+            executed_cell_id: cell.id,
+            order_index_by_cell_id: order_index_by_cell_id,
+        };
+        comm.send(payload).done.then(() => {
+            if (cellPendingExecution !== null) {
+                CodeCell.execute(cellPendingExecution, session);
+            }
+            else {
+                if (lastExecutionMode === 'reactive') {
+                    freshCells = executedReactiveFreshCells;
+                    updateUI(notebook);
+                }
+                newFreshCells = new Set();
+                forcedReactiveCells = new Set();
+                executedReactiveFreshCells = new Set();
+                comm.send({
+                    type: 'reactivity_cleanup',
+                });
+            }
+        });
+    };
+    const notifyActiveCell = (newActiveCell) => {
+        let newActiveCellOrderIdx = -1;
+        notebook.widgets.forEach((itercell, idx) => {
+            if (itercell.model.id === newActiveCell.id) {
+                newActiveCellOrderIdx = idx;
+            }
+        });
+        const payload = {
+            type: 'change_active_cell',
+            active_cell_id: newActiveCell.id,
+            active_cell_order_idx: newActiveCellOrderIdx
+        };
+        comm.send(payload);
+    };
+    const onActiveCellChange = (nb, cell) => {
+        if (notebook !== nb) {
+            return;
+        }
+        if (disconnected) {
+            notebook.activeCellChanged.disconnect(onActiveCellChange);
+            return;
+        }
+        notifyActiveCell(cell.model);
+        if (activeCell !== null && activeCell.model !== null) {
+            if (activeCell.model.isDirty) {
+                dirtyCells.add(activeCellId);
+            }
+            else {
+                dirtyCells.delete(activeCellId);
+            }
+            activeCell.model.stateChanged.disconnect(onExecution, activeCell.model.stateChanged);
+        }
+        activeCell = cell;
+        activeCellId = cell.model.id;
+        if (activeCell === null || activeCell.model === null || activeCell.model.type !== "code") {
+            return;
+        }
+        activeCell.model.stateChanged.connect(onExecution);
+        notifyActiveCell(activeCell.model);
+        if (dirtyCells.has(activeCellId)) {
+            const activeCellModel = activeCell.model;
+            if (activeCellModel._setDirty !== undefined) {
+                activeCellModel._setDirty(true);
+            }
+        }
+        refreshNodeMapping(notebook);
+        updateOneCellUI(activeCellId);
+    };
+    notebook.activeCellChanged.connect(onActiveCellChange);
+    const actionUpdatePairs = [
+        {
+            action: 'mouseover',
+            update: 'add',
+        }, {
+            action: 'mouseout',
+            update: 'remove',
+        }
+    ];
+    const updateOneCellUI = (id) => {
+        const elem = cellsById[id];
+        if (staleCells.has(id)) {
+            elem.classList.add(staleClass);
+            elem.classList.add(freshClass);
+            elem.classList.remove(refresherInputClass);
+            addStaleOutputInteractions(elem, linkedStaleClass);
+        }
+        else if (freshCells.has(id)) {
+            elem.classList.add(refresherInputClass);
+            if (lastExecutionMode === 'normal') {
+                elem.classList.add(freshClass);
+                addStaleOutputInteractions(elem, linkedRefresherClass);
+            }
+        }
+        if (lastExecutionMode === 'reactive') {
+            return;
+        }
+        if (staleLinks.hasOwnProperty(id)) {
+            actionUpdatePairs.forEach(({ action, update }) => {
+                addUnsafeCellInteraction(getJpInputCollapser(elem), staleLinks[id], cellsById, getJpInputCollapser, action, update, staleCells);
+                addUnsafeCellInteraction(getJpOutputCollapser(elem), staleLinks[id], cellsById, getJpInputCollapser, action, update, staleCells);
+            });
+        }
+        if (refresherLinks.hasOwnProperty(id)) {
+            if (!staleCells.has(id)) {
+                elem.classList.add(refresherClass);
+                elem.classList.add(freshClass);
+            }
+            actionUpdatePairs.forEach(({ action, update }) => {
+                addUnsafeCellInteraction(getJpInputCollapser(elem), refresherLinks[id], cellsById, getJpInputCollapser, action, update, staleCells);
+                addUnsafeCellInteraction(getJpInputCollapser(elem), refresherLinks[id], cellsById, getJpOutputCollapser, action, update, staleCells);
+            });
+        }
+    };
+    const updateUI = (notebook) => {
+        clearCellState(notebook);
+        if (!lastExecutionHighlightsEnabled) {
+            return;
+        }
+        refreshNodeMapping(notebook);
+        for (const [id] of Object.entries(cellsById)) {
+            updateOneCellUI(id);
+        }
+    };
+    comm.onMsg = (msg) => {
+        if (disconnected) {
+            return;
+        }
+        if (msg.content.data['type'] === 'establish') {
+            notebook.activeCell.model.stateChanged.connect(onExecution);
+            notifyActiveCell(notebook.activeCell.model);
+        }
+        else if (msg.content.data['type'] === 'cell_freshness') {
+            staleCells = new Set(msg.content.data['stale_cells']);
+            freshCells = new Set(msg.content.data['fresh_cells']);
+            newFreshCells = new Set([...newFreshCells, ...msg.content.data['new_fresh_cells']]);
+            forcedReactiveCells = new Set([...forcedReactiveCells, ...msg.content.data['forced_reactive_cells']]);
+            staleLinks = msg.content.data['stale_links'];
+            refresherLinks = msg.content.data['refresher_links'];
+            cellPendingExecution = null;
+            const exec_mode = msg.content.data['exec_mode'];
+            const flow_order = msg.content.data['flow_order'];
+            const exec_schedule = msg.content.data['exec_schedule'];
+            lastExecutionMode = exec_mode;
+            lastExecutionHighlightsEnabled = msg.content.data['highlights_enabled'];
+            executedReactiveFreshCells.add(msg.content.data['last_executed_cell_id']);
+            let found = false;
+            notebook.widgets.forEach(cell => {
+                if (found || cell.model.type !== 'code' || executedReactiveFreshCells.has(cell.model.id)) {
+                    return;
+                }
+                if ((exec_mode === 'reactive' && newFreshCells.has(cell.model.id)) || forcedReactiveCells.has(cell.model.id)) {
+                    const codeCell = cell;
+                    if (cellPendingExecution === null) {
+                        cellPendingExecution = codeCell;
+                        // break early if using one of the order-based semantics
+                        found = (flow_order === 'in_order' || exec_schedule === 'strict');
+                    }
+                    else if (codeCell.model.executionCount !== null && codeCell.model.executionCount < cellPendingExecution.model.executionCount) {
+                        // otherwise, execute in order of earliest execution counter
+                        cellPendingExecution = codeCell;
+                    }
+                }
+            });
+            if (cellPendingExecution === null) {
+                newFreshCells = new Set();
+                forcedReactiveCells = new Set();
+                updateUI(notebook);
+            }
+            else {
+                clearCellState(notebook);
+            }
+        }
+    };
+    comm.open({});
+    // return a disconnection handle
+    return () => {
+        disconnected = true;
+    };
+};
+export default extension;

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "jupyterlab-ipyflow",
+  "description": "JupyterLab extension for ipyflow user interface",
+  "keywords": [
+    "jupyter",
+    "jupyterlab",
+    "jupyterlab-extension"
+  ],
+  "homepage": "https://github.com/nbsafety-project/nbsafety",
+  "bugs": {
+    "url": "https://github.com/nbsafety-project/nbsafety/issues"
+  },
+  "license": "BSD-3-Clause",
+  "author": "Stephen Macke",
+  "files": [
+    "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+    "style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "style": "style/index.css",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nbsafety-project/nbsafety.git"
+  },
+  "scripts": {
+    "build": "jlpm run build:lib && jlpm run build:labextension:dev",
+    "build:prod": "jlpm run build:lib && jlpm run build:labextension",
+    "build:labextension": "jupyter labextension build .",
+    "build:labextension:dev": "jupyter labextension build --development True .",
+    "build:lib": "tsc",
+    "clean": "jlpm run clean:lib",
+    "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
+    "eslint": "eslint . --ext .ts,.tsx --fix",
+    "eslint:check": "eslint . --ext .ts,.tsx",
+    "install:extension": "jupyter labextension develop --overwrite .",
+    "prepare": "jlpm run clean && jlpm run build:prod",
+    "watch": "run-p watch:src watch:labextension",
+    "watch:src": "tsc -w",
+    "watch:labextension": "jupyter labextension watch ."
+  },
+  "dependencies": {
+    "@jupyterlab/application": "^3.3.2",
+    "@jupyterlab/coreutils": "^5.3.2",
+    "@jupyterlab/notebook": "^3.3.2",
+    "codemirror": "^5.65.0",
+    "normalize-url": "^7.0.2"
+  },
+  "devDependencies": {
+    "@jupyterlab/builder": "^3.3.2",
+    "@typescript-eslint/eslint-plugin": "^5.15.0",
+    "@typescript-eslint/parser": "^5.15.0",
+    "@wdio/cli": "^7.13.1",
+    "eslint": "^8.11.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "prettier": "2.6.0",
+    "rimraf": "^3.0.2",
+    "typescript": "^3.7.7"
+  },
+  "sideEffects": [
+    "style/*.css"
+  ],
+  "jupyterlab": {
+    "extension": true,
+    "outputDir": "../../core/ipyflow/resources/labextension/"
+  },
+  "version": "0.0.86"
+}

package/style/index.css

@@ -0,0 +1,64 @@
+:root {
+  --stale-color: rgb(254,0,82);
+  --refresher-color: rgb(0,197,158);
+}
+
+.stale-cell .jp-InputCollapser {
+  border: 1px solid var(--stale-color);
+}
+
+.stale-cell.jp-mod-selected .jp-Collapser-child {
+  background-color: var(--stale-color);
+}
+
+.stale-cell .jp-Collapser:hover > .jp-Collapser-child {
+  background-color: var(--stale-color);
+}
+
+.jp-Collapser-child.linked-stale {
+  background-color: var(--stale-color);
+  opacity: 0.6;
+}
+
+.refresher-cell .jp-InputCollapser {
+  border: 1px solid var(--refresher-color);
+}
+
+.refresher-cell.jp-mod-selected .jp-Collapser-child {
+  background-color: var(--refresher-color);
+}
+
+.refresher-cell .jp-Collapser:hover > .jp-Collapser-child {
+  background-color: var(--refresher-color);
+}
+
+.jp-Collapser-child.linked-refresher {
+  background-color: var(--refresher-color);
+  opacity: 0.6;
+}
+
+/* put input / output cells later since they should take precedence */
+
+.fresh-cell .jp-OutputCollapser {
+  border: 1px solid var(--stale-color);
+}
+
+.fresh-cell.jp-mod-selected .jp-OutputCollapser .jp-Collapser-child {
+  background-color: var(--stale-color);
+}
+
+.fresh-cell .jp-OutputCollapser:hover > .jp-Collapser-child {
+  background-color: var(--stale-color);
+}
+
+.refresher-input-cell .jp-InputCollapser {
+  border: 1px solid var(--refresher-color);
+}
+
+.refresher-input-cell.jp-mod-selected .jp-InputCollapser .jp-Collapser-child {
+  background-color: var(--refresher-color);
+}
+
+.refresher-input-cell .jp-InputCollapser:hover > .jp-Collapser-child {
+  background-color: var(--refresher-color);
+}