@jupyter/docprovider-extension 5.0.0-alpha.0 → 5.0.0-beta.0

package/lib/conflictDiffWidget.d.ts

@@ -0,0 +1,39 @@
+import type * as nbformat from '@jupyterlab/nbformat';
+import type { CodeEditor } from '@jupyterlab/codeeditor';
+import type { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import type { TranslationBundle } from '@jupyterlab/translation';
+import { Widget } from '@lumino/widgets';
+import 'nbdime/lib/styles/variables.css';
+import 'nbdime/lib/styles/common.css';
+import 'nbdime/lib/styles/diff.css';
+import 'nbdime/lib/upstreaming/flexpanel.css';
+import 'nbdime/lib/common/collapsible.css';
+import '../style/conflictDiff.css';
+/**
+ * A widget that shows a side-by-side diff between two in-memory notebooks.
+ * Uses nbdime's NotebookDiffModel/NotebookDiffWidget for rendering.
+ *
+ * Because nbdime bundles its own @lumino/widgets (separate from JupyterLab's),
+ * we extend Widget and append the nbdime widget's DOM node directly instead
+ * of using Panel.addWidget(), which would fail due to the class identity mismatch.
+ */
+export declare class ConflictDiffWidget extends Widget {
+    private _nbdiffWidget;
+    private _editorFactory;
+    private _rendermime;
+    private _trans;
+    constructor(options: ConflictDiffWidget.IOptions);
+    create(options: ConflictDiffWidget.ICreateOptions): Promise<void>;
+    dispose(): void;
+}
+export declare namespace ConflictDiffWidget {
+    interface IOptions {
+        translator?: TranslationBundle;
+        editorFactory: CodeEditor.Factory;
+        rendermime: IRenderMimeRegistry;
+    }
+    interface ICreateOptions {
+        base: nbformat.INotebookContent;
+        remote: nbformat.INotebookContent;
+    }
+}

package/lib/conflictDiffWidget.js

@@ -0,0 +1,184 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { nullTranslator } from '@jupyterlab/translation';
+import { Widget } from '@lumino/widgets';
+import { NotebookDiffModel } from 'nbdime/lib/diff/model';
+import { NotebookDiffWidget } from 'nbdime/lib/diff/widget';
+import 'nbdime/lib/styles/variables.css';
+import 'nbdime/lib/styles/common.css';
+import 'nbdime/lib/styles/diff.css';
+import 'nbdime/lib/upstreaming/flexpanel.css';
+import 'nbdime/lib/common/collapsible.css';
+import '../style/conflictDiff.css';
+/**
+ * A widget that shows a side-by-side diff between two in-memory notebooks.
+ * Uses nbdime's NotebookDiffModel/NotebookDiffWidget for rendering.
+ *
+ * Because nbdime bundles its own @lumino/widgets (separate from JupyterLab's),
+ * we extend Widget and append the nbdime widget's DOM node directly instead
+ * of using Panel.addWidget(), which would fail due to the class identity mismatch.
+ */
+export class ConflictDiffWidget extends Widget {
+    constructor(options) {
+        var _a;
+        super();
+        this._nbdiffWidget = null;
+        this.addClass('nbdime-Widget');
+        this._editorFactory = options.editorFactory;
+        this._rendermime = options.rendermime;
+        this._trans =
+            (_a = options.translator) !== null && _a !== void 0 ? _a : nullTranslator.load('jupyter_collaboration');
+        this.node.style.display = 'flex';
+        this.node.style.flexDirection = 'column';
+        this.node.style.height = '100%';
+        this.node.style.overflow = 'auto';
+    }
+    async create(options) {
+        const diff = _diffNotebooks(options.base, options.remote);
+        const model = new NotebookDiffModel(options.base, diff);
+        const diffWidget = new NotebookDiffWidget({
+            model,
+            rendermime: this._rendermime,
+            editorFactory: this._editorFactory
+        });
+        await diffWidget.init();
+        this._nbdiffWidget = diffWidget;
+        this.node.appendChild(_makeHeaderNode(this._trans.__('Server version'), this._trans.__('Local version')));
+        this.node.appendChild(diffWidget.node);
+    }
+    dispose() {
+        var _a;
+        if (this.isDisposed) {
+            return;
+        }
+        (_a = this._nbdiffWidget) === null || _a === void 0 ? void 0 : _a.dispose();
+        super.dispose();
+    }
+}
+function _makeHeaderNode(baseLabel, remoteLabel) {
+    const node = document.createElement('div');
+    node.className = 'jp-conflict-diff-header nbdime-Diff';
+    const banner = document.createElement('div');
+    banner.className = 'nbdime-header-banner';
+    const base = document.createElement('span');
+    base.className = 'nbdime-header-base';
+    base.textContent = baseLabel;
+    const remote = document.createElement('span');
+    remote.className = 'nbdime-header-remote';
+    remote.textContent = remoteLabel;
+    banner.appendChild(base);
+    banner.appendChild(remote);
+    node.appendChild(banner);
+    return node;
+}
+function _getSource(cell) {
+    const src = cell.source;
+    return Array.isArray(src) ? src.join('') : src;
+}
+/**
+ * Compute index pairs (baseIdx, remoteIdx) for the longest common subsequence
+ * of cell IDs between two lists.
+ */
+function _lcs(a, b) {
+    const m = a.length, n = b.length;
+    const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+    for (let i = 1; i <= m; i++) {
+        for (let j = 1; j <= n; j++) {
+            dp[i][j] =
+                a[i - 1] === b[j - 1]
+                    ? dp[i - 1][j - 1] + 1
+                    : Math.max(dp[i - 1][j], dp[i][j - 1]);
+        }
+    }
+    const result = [];
+    let i = m, j = n;
+    while (i > 0 && j > 0) {
+        if (a[i - 1] === b[j - 1]) {
+            result.unshift([i - 1, j - 1]);
+            i--;
+            j--;
+        }
+        else if (dp[i - 1][j] > dp[i][j - 1]) {
+            i--;
+        }
+        else {
+            j--;
+        }
+    }
+    return result;
+}
+/**
+ * Compute a notebook-level IDiffEntry[] for use with NotebookDiffModel.
+ * Matches cells by id using LCS; changed-source cells appear as remove+add.
+ */
+function _diffNotebooks(base, remote) {
+    const baseCells = base.cells;
+    const remoteCells = remote.cells;
+    const baseIds = baseCells.map(c => { var _a; return (_a = c.id) !== null && _a !== void 0 ? _a : ''; });
+    const remoteIds = remoteCells.map(c => { var _a; return (_a = c.id) !== null && _a !== void 0 ? _a : ''; });
+    const matches = _lcs(baseIds, remoteIds);
+    const cellsDiff = [];
+    let bi = 0, ri = 0;
+    for (const [baseIdx, remoteIdx] of matches) {
+        if (bi < baseIdx) {
+            cellsDiff.push({ op: 'removerange', key: bi, length: baseIdx - bi });
+        }
+        if (ri < remoteIdx) {
+            cellsDiff.push({
+                op: 'addrange',
+                key: bi,
+                valuelist: remoteCells.slice(ri, remoteIdx)
+            });
+        }
+        const sourceChanged = _getSource(baseCells[baseIdx]) !== _getSource(remoteCells[remoteIdx]);
+        const metaChanged = JSON.stringify(baseCells[baseIdx].metadata) !==
+            JSON.stringify(remoteCells[remoteIdx].metadata);
+        if (sourceChanged) {
+            cellsDiff.push({ op: 'removerange', key: baseIdx, length: 1 });
+            cellsDiff.push({
+                op: 'addrange',
+                key: baseIdx,
+                valuelist: [remoteCells[remoteIdx]]
+            });
+        }
+        else if (metaChanged) {
+            cellsDiff.push({
+                op: 'patch',
+                key: baseIdx,
+                diff: [
+                    {
+                        op: 'replace',
+                        key: 'metadata',
+                        value: remoteCells[remoteIdx].metadata
+                    }
+                ]
+            });
+        }
+        bi = baseIdx + 1;
+        ri = remoteIdx + 1;
+    }
+    if (bi < baseCells.length) {
+        cellsDiff.push({
+            op: 'removerange',
+            key: bi,
+            length: baseCells.length - bi
+        });
+    }
+    if (ri < remoteCells.length) {
+        cellsDiff.push({
+            op: 'addrange',
+            key: bi,
+            valuelist: remoteCells.slice(ri)
+        });
+    }
+    const topDiff = [];
+    if (cellsDiff.length > 0) {
+        topDiff.push({ op: 'patch', key: 'cells', diff: cellsDiff });
+    }
+    if (JSON.stringify(base.metadata) !== JSON.stringify(remote.metadata)) {
+        topDiff.push({ op: 'replace', key: 'metadata', value: remote.metadata });
+    }
+    return topDiff;
+}

package/lib/yprovider.js

@@ -5,6 +5,12 @@
 import { ITranslator } from '@jupyterlab/translation';
 import { WebSocketProvider, WebSocketAwarenessProvider, IAwarenessProviderFactory, IDocumentProviderFactory } from '@jupyter/docprovider';
 import { URLExt } from '@jupyterlab/coreutils';
+import { MainAreaWidget, ToolbarButton } from '@jupyterlab/apputils';
+import { saveIcon, undoIcon } from '@jupyterlab/ui-components';
+import { IEditorServices } from '@jupyterlab/codeeditor';
+import { IDocumentManager } from '@jupyterlab/docmanager';
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ConflictDiffWidget } from './conflictDiffWidget';
 /**
  * The plugin ID for settings.
  */
@@ -16,10 +22,61 @@ class WebSocketDocumentProviderFactory {
     constructor(options) {
         this._trans = options.translator;
         this._commands = options.commands;
+        this._docManager = options.docManager;
+        this._shell = options.shell;
+        this._contents = options.contents;
+        this._editorFactory = options.editorFactory;
+        this._rendermime = options.rendermime;
     }
     create(options) {
+        const shell = this._shell;
+        const contents = this._contents;
+        const editorFactory = this._editorFactory;
+        const rendermime = this._rendermime;
+        const path = options.path;
+        const onConflictShowNotebookDiff = async (localContent) => {
+            const serverModel = await contents.get(path, { content: true });
+            const widget = new ConflictDiffWidget({
+                translator: this._trans,
+                editorFactory,
+                rendermime
+            });
+            await widget.create({
+                base: serverModel.content,
+                remote: localContent
+            });
+            const main = new MainAreaWidget({ content: widget });
+            main.title.label = this._trans.__('Conflict diff: %1', path);
+            main.title.closable = true;
+            main.toolbar.addItem('revertToRemote', new ToolbarButton({
+                icon: undoIcon,
+                label: this._trans.__('Revert to Remote'),
+                tooltip: this._trans.__('Discard local changes and reload the server version'),
+                onClick: () => {
+                    var _a;
+                    const context = (_a = this._docManager.findWidget(path)) === null || _a === void 0 ? void 0 : _a.context;
+                    if (context && !context.isDisposed) {
+                        void context.revert();
+                    }
+                }
+            }));
+            main.toolbar.addItem('saveLocalAs', new ToolbarButton({
+                icon: saveIcon,
+                label: this._trans.__('Save Local As'),
+                tooltip: this._trans.__('Save the local version with a new name'),
+                onClick: () => {
+                    var _a;
+                    const context = (_a = this._docManager.findWidget(path)) === null || _a === void 0 ? void 0 : _a.context;
+                    if (context && !context.isDisposed) {
+                        void context.saveAs();
+                    }
+                }
+            }));
+            shell.add(main, 'main');
+            shell.activateById(main.id);
+        };
         return new WebSocketProvider({
-            path: options.path,
+            path,
             contentType: options.contentType,
             format: options.format,
             model: options.model,
@@ -27,7 +84,12 @@ class WebSocketDocumentProviderFactory {
             translator: this._trans,
             serverSettings: options.serverSettings,
             onConflictSaveAs: () => this._commands.execute('docmanager:save-as'),
-            onConflictRevert: () => this._commands.execute('docmanager:reload')
+            onConflictRevert: () => this._commands.execute('docmanager:reload'),
+            // The diff view is notebook-specific (uses nbdime), so only offer it
+            // when the document being opened is a notebook.
+            onConflictShowDiff: options.contentType === 'notebook'
+                ? onConflictShowNotebookDiff
+                : undefined
         });
     }
 }
@@ -51,14 +113,24 @@ class WebSocketAwarenessProviderFactory {
 export const documentProviderFactoryPlugin = {
     id: PLUGIN_ID + '-document-factory',
     description: 'Provides a WebSocket document provider factory.',
-    requires: [ITranslator],
+    requires: [
+        ITranslator,
+        IEditorServices,
+        IRenderMimeRegistry,
+        IDocumentManager
+    ],
     optional: [],
     provides: IDocumentProviderFactory,
-    activate: async (app, translator) => {
+    activate: async (app, translator, editorServices, rendermime, docManager) => {
         const trans = translator.load('jupyter_collaboration');
         return new WebSocketDocumentProviderFactory({
             translator: trans,
-            commands: app.commands
+            commands: app.commands,
+            docManager,
+            shell: app.shell,
+            contents: app.serviceManager.contents,
+            editorFactory: editorServices.factoryService.newInlineEditor,
+            rendermime
         });
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/docprovider-extension",
-  "version": "5.0.0-alpha.0",
+  "version": "5.0.0-beta.0",
   "description": "JupyterLab - Collaborative Shared Models",
   "keywords": [
     "jupyter",
@@ -41,8 +41,8 @@
     "build:lib": "tsc --sourceMap",
     "build:lib:prod": "tsc",
     "build:prod": "jlpm run clean && jlpm run build:lib:prod && jlpm run build:labextension",
-    "build:labextension": "jupyter labextension build .",
-    "build:labextension:dev": "jupyter labextension build --development True .",
+    "build:labextension": "jupyter-builder build .",
+    "build:labextension:dev": "jupyter-builder build --development True .",
     "clean": "jlpm run clean:lib",
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo node_modules",
     "clean:labextension": "rimraf ../../projects/jupyter-docprovider/jupyter_docprovider/labextension",
@@ -50,29 +50,34 @@
     "install:extension": "jlpm run build",
     "watch": "run-p watch:src watch:labextension",
     "watch:src": "tsc -w",
-    "watch:labextension": "jupyter labextension watch ."
+    "watch:labextension": "jupyter-builder watch ."
   },
   "dependencies": {
-    "@jupyter/collaborative-drive": "^5.0.0-alpha.0",
-    "@jupyter/docprovider": "^5.0.0-alpha.0",
-    "@jupyter/ydoc": "^4.0.0-a3",
-    "@jupyterlab/application": "^4.6.0-beta.1",
-    "@jupyterlab/apputils": "^4.7.0-beta.1",
-    "@jupyterlab/docmanager": "^4.6.0-beta.1",
-    "@jupyterlab/docregistry": "^4.6.0-beta.1",
-    "@jupyterlab/filebrowser": "^4.6.0-beta.1",
-    "@jupyterlab/fileeditor": "^4.6.0-beta.1",
-    "@jupyterlab/logconsole": "^4.6.0-beta.1",
-    "@jupyterlab/notebook": "^4.6.0-beta.1",
-    "@jupyterlab/settingregistry": "^4.6.0-beta.1",
-    "@jupyterlab/translation": "^4.6.0-beta.1",
+    "@jupyter/collaborative-drive": "^5.0.0-beta.0",
+    "@jupyter/docprovider": "^5.0.0-beta.0",
+    "@jupyter/ydoc": "^4.0.0",
+    "@jupyterlab/application": "^4.6.0",
+    "@jupyterlab/apputils": "^4.7.0",
+    "@jupyterlab/codeeditor": "^4.6.0",
+    "@jupyterlab/docmanager": "^4.6.0",
+    "@jupyterlab/docregistry": "^4.6.0",
+    "@jupyterlab/filebrowser": "^4.6.0",
+    "@jupyterlab/fileeditor": "^4.6.0",
+    "@jupyterlab/logconsole": "^4.6.0",
+    "@jupyterlab/nbformat": "^4.6.0",
+    "@jupyterlab/notebook": "^4.6.0",
+    "@jupyterlab/rendermime": "^4.6.0",
+    "@jupyterlab/settingregistry": "^4.6.0",
+    "@jupyterlab/translation": "^4.6.0",
+    "@jupyterlab/ui-components": "^4.6.0",
     "@lumino/commands": "^2.3.2",
+    "nbdime": "^7.0.4",
     "y-protocols": "^1.0.5",
     "y-websocket": "^1.3.15",
     "yjs": "^13.5.40"
   },
   "devDependencies": {
-    "@jupyterlab/builder": "^4.6.0-alpha.5",
+    "@jupyter/builder": "^1.2.0",
     "@types/react": "~18.3.1",
     "npm-run-all": "^4.1.5",
     "rimraf": "^4.1.2",

package/style/conflictDiff.css

@@ -0,0 +1,37 @@
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|---------------------------------------------------------------------------- */
+
+.jp-conflict-diff-header.nbdime-Diff {
+  border-bottom: var(--jp-border-width) solid var(--jp-toolbar-border-color);
+  box-shadow: var(--jp-toolbar-box-shadow);
+  background: var(--jp-toolbar-background);
+  flex: 0 0 auto;
+}
+
+.jp-conflict-diff-header .nbdime-header-banner {
+  display: grid;
+  grid-template-columns: 47% 6% 47%;
+}
+
+.jp-conflict-diff-header .nbdime-header-base {
+  grid-column: 1;
+  display: inline-block;
+  background-color: var(--jp-diff-deleted-color0);
+  padding: 0 4px;
+}
+
+.jp-conflict-diff-header .nbdime-header-remote {
+  grid-column: 3;
+  display: inline-block;
+  background-color: var(--jp-diff-added-color0);
+  padding: 0 4px;
+}
+
+/* diff.css hides .jp-Cellrow-metadata on added/deleted cells by default.
+   Override that so metadata changes are always visible in the conflict diff. */
+.nbdime-Widget .jp-Diff-added .jp-Cellrow-metadata,
+.nbdime-Widget .jp-Diff-deleted .jp-Cellrow-metadata {
+  display: block !important;
+}