@jupyter/docprovider 3.0.0-beta.3 → 3.0.0-beta.4

package/lib/TimelineSlider.d.ts

@@ -0,0 +1,11 @@
+import { ReactWidget } from '@jupyterlab/apputils';
+import { IForkProvider } from './ydrive';
+export declare class TimelineWidget extends ReactWidget {
+    private apiURL;
+    private provider;
+    private contentType;
+    private format;
+    constructor(apiURL: string, provider: IForkProvider, contentType: string, format: string);
+    render(): JSX.Element;
+    updateContent(apiURL: string, provider: IForkProvider): void;
+}

package/lib/TimelineSlider.js

@@ -0,0 +1,27 @@
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+import { ReactWidget } from '@jupyterlab/apputils';
+import { TimelineSliderComponent } from './component';
+import * as React from 'react';
+export class TimelineWidget extends ReactWidget {
+    constructor(apiURL, provider, contentType, format) {
+        super();
+        this.apiURL = apiURL;
+        this.provider = provider;
+        this.contentType = contentType;
+        this.format = format;
+        this.addClass('jp-timelineSliderWrapper');
+    }
+    render() {
+        return (React.createElement(TimelineSliderComponent, { key: this.apiURL, apiURL: this.apiURL, provider: this.provider, contentType: this.contentType, format: this.format }));
+    }
+    updateContent(apiURL, provider) {
+        this.apiURL = apiURL;
+        this.provider = provider;
+        this.contentType = this.provider.contentType;
+        this.format = this.provider.format;
+        this.update();
+    }
+}

package/lib/awareness.d.ts

@@ -1,25 +1,18 @@
 import { User } from '@jupyterlab/services';
 import { IDisposable } from '@lumino/disposable';
-import { IStream } from '@lumino/signaling';
 import { IAwareness } from '@jupyter/ydoc';
 import { WebsocketProvider } from 'y-websocket';
-import { IAwarenessProvider } from './tokens';
 export interface IContent {
     type: string;
     body: string;
 }
-export interface IChatMessage {
-    sender: string;
-    timestamp: number;
-    content: IContent;
-}
 /**
  * A class to provide Yjs synchronization over WebSocket.
  *
  * We specify custom messages that the server can interpret. For reference please look in yjs_ws_server.
  *
  */
-export declare class WebSocketAwarenessProvider extends WebsocketProvider implements IAwarenessProvider, IDisposable {
+export declare class WebSocketAwarenessProvider extends WebsocketProvider implements IDisposable {
     /**
      * Construct a new WebSocketAwarenessProvider
      *
@@ -27,22 +20,11 @@ export declare class WebSocketAwarenessProvider extends WebsocketProvider implem
      */
     constructor(options: WebSocketAwarenessProvider.IOptions);
     get isDisposed(): boolean;
-    /**
-     * A signal to subscribe for incoming messages.
-     */
-    get messageStream(): IStream<this, IChatMessage>;
     dispose(): void;
-    /**
-     * Send a message to every collaborator.
-     *
-     * @param msg message
-     */
-    sendMessage(msg: string): void;
     private _onUserChanged;
     private _isDisposed;
     private _user;
     private _awareness;
-    private _messageStream;
 }
 /**
  * A namespace for WebSocketAwarenessProvider statics.

package/lib/awareness.js

@@ -2,11 +2,7 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
-import { Stream } from '@lumino/signaling';
-import * as decoding from 'lib0/decoding';
-import * as encoding from 'lib0/encoding';
 import { WebsocketProvider } from 'y-websocket';
-import { MessageType } from './utils';
 /**
  * A class to provide Yjs synchronization over WebSocket.
  *
@@ -30,22 +26,10 @@ export class WebSocketAwarenessProvider extends WebsocketProvider {
             .then(() => this._onUserChanged(this._user))
             .catch(e => console.error(e));
         this._user.userChanged.connect(this._onUserChanged, this);
-        this._messageStream = new Stream(this);
-        this.messageHandlers[MessageType.CHAT] = (encoder, decoder, provider, emitSynced, messageType) => {
-            const content = decoding.readVarString(decoder);
-            const data = JSON.parse(content);
-            this._messageStream.emit(data);
-        };
     }
     get isDisposed() {
         return this._isDisposed;
     }
-    /**
-     * A signal to subscribe for incoming messages.
-     */
-    get messageStream() {
-        return this._messageStream;
-    }
     dispose() {
         if (this._isDisposed) {
             return;
@@ -54,21 +38,6 @@ export class WebSocketAwarenessProvider extends WebsocketProvider {
         this._isDisposed = true;
         this.destroy();
     }
-    /**
-     * Send a message to every collaborator.
-     *
-     * @param msg message
-     */
-    sendMessage(msg) {
-        const data = {
-            type: 'text',
-            body: msg
-        };
-        const encoder = encoding.createEncoder();
-        encoding.writeVarUint(encoder, MessageType.CHAT);
-        encoding.writeVarString(encoder, JSON.stringify(data));
-        this.ws.send(encoding.toUint8Array(encoder));
-    }
     _onUserChanged(user) {
         this._awareness.setLocalStateField('user', user.identity);
     }

package/lib/component.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import '../style/slider.css';
+import { IForkProvider } from './ydrive';
+type Props = {
+    apiURL: string;
+    provider: IForkProvider;
+    contentType: string;
+    format: string;
+};
+export declare const TimelineSliderComponent: React.FC<Props>;
+export {};

package/lib/component.js

@@ -0,0 +1,135 @@
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+import React, { useState, useRef } from 'react';
+import '../style/slider.css';
+import { requestUndoRedo, requestDocSession, requestDocumentTimeline } from './requests';
+import { historyIcon } from '@jupyterlab/ui-components';
+import { Notification } from '@jupyterlab/apputils';
+export const TimelineSliderComponent = ({ apiURL, provider, contentType, format }) => {
+    const [data, setData] = useState({
+        roomId: '',
+        timestamps: [],
+        forkRoom: '',
+        sessionId: ''
+    });
+    const [currentTimestampIndex, setCurrentTimestampIndex] = useState(data.timestamps.length - 1);
+    const [toggle, setToggle] = useState(false);
+    const [isBtn, setIsBtn] = useState(false);
+    const isFirstChange = useRef(true);
+    const isFirstSliderChange = useRef(true);
+    const sessionRef = useRef(null);
+    async function fetchTimeline(notebookPath) {
+        try {
+            if (isFirstChange.current) {
+                const response = await requestDocumentTimeline(format, contentType, notebookPath);
+                if (!response.ok) {
+                    if (response.status === 404) {
+                        throw new Error('Not found');
+                    }
+                    else if (response.status === 503) {
+                        throw new Error('WebSocket closed');
+                    }
+                    else {
+                        throw new Error(`Failed to fetch data: ${response.statusText}`);
+                    }
+                }
+                const text = await response.text();
+                let data = { roomId: '', timestamps: [], forkRoom: '', sessionId: '' };
+                if (text) {
+                    Notification.warning('Document is now in read-only mode. Changes will not be saved.', { autoClose: 2500 });
+                    data = JSON.parse(text);
+                    setData(data);
+                    setCurrentTimestampIndex(data.timestamps.length - 1);
+                    provider.connectToForkDoc(data.forkRoom, data.sessionId);
+                    sessionRef.current = await requestDocSession(format, contentType, extractFilenameFromURL(apiURL));
+                }
+                setToggle(true);
+                isFirstChange.current = false;
+                return data;
+            }
+        }
+        catch (error) {
+            console.error('Error fetching data:', error);
+        }
+    }
+    const handleRestore = async () => {
+        if (!sessionRef.current) {
+            console.error('Session is not initialized');
+            return;
+        }
+        const response = await requestUndoRedo(`${sessionRef.current.format}:${sessionRef.current.type}:${sessionRef.current.fileId}`, 'restore', 0, data.forkRoom);
+        if (response.code === 200) {
+            Notification.success(response.status, { autoClose: 4000 });
+            provider.reconnect();
+            setToggle(false);
+            isFirstChange.current = true;
+        }
+        else {
+            Notification.error(response.status, { autoClose: 4000 });
+        }
+    };
+    const handleSliderChange = async (event) => {
+        const currentTimestamp = parseInt(event.target.value);
+        const steps = Math.abs(currentTimestamp - currentTimestampIndex);
+        try {
+            const action = determineAction(currentTimestamp);
+            setCurrentTimestampIndex(currentTimestamp);
+            if (isFirstSliderChange.current) {
+                setIsBtn(true);
+                isFirstSliderChange.current = false;
+            }
+            if (!sessionRef.current) {
+                console.error('Session is not initialized');
+                return;
+            }
+            await requestUndoRedo(`${sessionRef.current.format}:${sessionRef.current.type}:${sessionRef.current.fileId}`, action, steps, data.forkRoom);
+        }
+        catch (error) {
+            console.error('Error fetching or applying updates:', error);
+        }
+    };
+    function determineAction(currentTimestamp) {
+        return currentTimestamp < currentTimestampIndex ? 'undo' : 'redo';
+    }
+    function extractFilenameFromURL(url) {
+        try {
+            const parsedURL = new URL(url);
+            const pathname = parsedURL.pathname;
+            const segments = pathname.split('/');
+            return segments.slice(4 - segments.length).join('/');
+        }
+        catch (error) {
+            console.error('Invalid URL:', error);
+            return '';
+        }
+    }
+    const formatTimestamp = (timestamp) => {
+        const date = new Date(timestamp * 1000);
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        const hours = String(date.getHours()).padStart(2, '0');
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+        const seconds = String(date.getSeconds()).padStart(2, '0');
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    };
+    return (React.createElement("div", { className: "jp-sliderContainer" },
+        React.createElement("div", { onClick: () => {
+                fetchTimeline(extractFilenameFromURL(apiURL));
+            }, className: "jp-mod-highlighted", title: "Document Timeline" },
+            React.createElement(historyIcon.react, { marginRight: "4px" })),
+        toggle && (React.createElement("div", { className: "jp-timestampDisplay" },
+            React.createElement("input", { type: "range", min: 0, max: data.timestamps.length - 1, value: currentTimestampIndex, onChange: handleSliderChange, className: "jp-Slider" }),
+            React.createElement("div", null,
+                React.createElement("strong", null,
+                    extractFilenameFromURL(apiURL).split('/').pop(),
+                    " "),
+                ' '),
+            isBtn && (React.createElement("div", { className: "jp-restoreBtnContainer" },
+                React.createElement("button", { onClick: handleRestore, className: "jp-ToolbarButtonComponent jp-restoreBtn" },
+                    "Restore version",
+                    ' ',
+                    formatTimestamp(data.timestamps[currentTimestampIndex]))))))));
+};

package/lib/index.d.ts

@@ -8,3 +8,4 @@ export * from './requests';
 export * from './ydrive';
 export * from './yprovider';
 export * from './tokens';
+export * from './TimelineSlider';

package/lib/index.js

@@ -12,3 +12,4 @@ export * from './requests';
 export * from './ydrive';
 export * from './yprovider';
 export * from './tokens';
+export * from './TimelineSlider';

package/lib/requests.d.ts

@@ -21,3 +21,5 @@ export interface ISessionModel {
     sessionId: string;
 }
 export declare function requestDocSession(format: string, type: string, path: string): Promise<ISessionModel>;
+export declare function requestDocumentTimeline(format: string, type: string, path: string): Promise<any>;
+export declare function requestUndoRedo(roomid: string, action: 'undo' | 'redo' | 'restore', steps: number, forkRoom: string): Promise<any>;

package/lib/requests.js

@@ -9,6 +9,8 @@ import { ServerConnection } from '@jupyterlab/services';
  * See https://github.com/jupyterlab/jupyter_collaboration
  */
 const DOC_SESSION_URL = 'api/collaboration/session';
+const DOC_FORK_URL = 'api/collaboration/undo_redo';
+const TIMELINE_URL = 'api/collaboration/timeline';
 export async function requestDocSession(format, type, path) {
     const settings = ServerConnection.makeSettings();
     const url = URLExt.join(settings.baseUrl, DOC_SESSION_URL, encodeURIComponent(path));
@@ -37,3 +39,45 @@ export async function requestDocSession(format, type, path) {
     }
     return data;
 }
+export async function requestDocumentTimeline(format, type, path) {
+    const settings = ServerConnection.makeSettings();
+    let url = URLExt.join(settings.baseUrl, TIMELINE_URL, path);
+    url = url.concat(`?format=${format}&&type=${type}`);
+    const body = {
+        method: 'GET'
+    };
+    let response;
+    try {
+        response = await ServerConnection.makeRequest(url, body, settings);
+    }
+    catch (error) {
+        throw new ServerConnection.NetworkError(error);
+    }
+    return response;
+}
+export async function requestUndoRedo(roomid, action, steps, forkRoom) {
+    const settings = ServerConnection.makeSettings();
+    let url = URLExt.join(settings.baseUrl, DOC_FORK_URL, encodeURIComponent(roomid));
+    url = url.concat(`?action=${action}&&steps=${steps}&&forkRoom=${forkRoom}`);
+    const body = { method: 'PUT' };
+    let response;
+    try {
+        response = await ServerConnection.makeRequest(url, body, settings);
+    }
+    catch (error) {
+        throw new ServerConnection.NetworkError(error);
+    }
+    let data = await response.text();
+    if (data.length > 0) {
+        try {
+            data = JSON.parse(data);
+        }
+        catch (error) {
+            console.log('Not a JSON response body.', response);
+        }
+    }
+    if (!response.ok) {
+        throw new ServerConnection.ResponseError(response, data.message || data);
+    }
+    return data;
+}

package/lib/tokens.d.ts

@@ -1,8 +1,7 @@
 import { DocumentChange, YDocument } from '@jupyter/ydoc';
 import { Contents } from '@jupyterlab/services';
 import { Token } from '@lumino/coreutils';
-import { IStream } from '@lumino/signaling';
-import { IChatMessage } from './awareness';
+import { WebSocketProvider } from './yprovider';
 /**
  * The collaborative drive.
  */
@@ -24,6 +23,7 @@ export interface ICollaborativeDrive extends Contents.IDrive {
      * SharedModel factory for the YDrive.
      */
     readonly sharedModelFactory: ISharedModelFactory;
+    readonly providers: Map<string, WebSocketProvider>;
 }
 /**
  * Yjs sharedModel factory for real-time collaboration.
@@ -37,18 +37,3 @@ export interface ISharedModelFactory extends Contents.ISharedFactory {
      */
     registerDocumentFactory(type: Contents.ContentType, factory: SharedDocumentFactory): void;
 }
-/**
- * A provider interface for global awareness features.
- */
-export interface IAwarenessProvider {
-    /**
-     * A signal to subscribe for incoming messages.
-     */
-    readonly messageStream: IStream<this, IChatMessage>;
-    /**
-     * Send a message to every collaborator.
-     *
-     * @param msg message
-     */
-    sendMessage(msg: string): void;
-}

package/lib/ydrive.d.ts

@@ -1,8 +1,15 @@
 import { TranslationBundle } from '@jupyterlab/translation';
 import { Contents, Drive, User } from '@jupyterlab/services';
 import { ISignal } from '@lumino/signaling';
+import { WebSocketProvider } from './yprovider';
 import { ICollaborativeDrive, ISharedModelFactory } from './tokens';
 import { Awareness } from 'y-protocols/awareness';
+export interface IForkProvider {
+    connectToForkDoc: (forkRoomId: string, sessionId: string) => Promise<void>;
+    reconnect: () => Promise<void>;
+    contentType: string;
+    format: string;
+}
 /**
  * A Collaborative implementation for an `IDrive`, talking to the
  * server using the Jupyter REST API and a WebSocket connection.
@@ -18,6 +25,7 @@ export declare class YDrive extends Drive implements ICollaborativeDrive {
      * SharedModel factory for the YDrive.
      */
     readonly sharedModelFactory: ISharedModelFactory;
+    get providers(): Map<string, WebSocketProvider>;
     /**
      * Dispose of the resources held by the manager.
      */

package/lib/ydrive.js

@@ -103,6 +103,9 @@ export class YDrive extends Drive {
             this._ydriveFileChanged.emit(change);
         });
     }
+    get providers() {
+        return this._providers;
+    }
     /**
      * Dispose of the resources held by the manager.
      */

package/lib/yprovider.d.ts

@@ -2,6 +2,8 @@ import { User } from '@jupyterlab/services';
 import { TranslationBundle } from '@jupyterlab/translation';
 import { IDisposable } from '@lumino/disposable';
 import { DocumentChange, YDocument } from '@jupyter/ydoc';
+import { WebsocketProvider as YWebsocketProvider } from 'y-websocket';
+import { IForkProvider } from './ydrive';
 /**
  * An interface for a document provider.
  */
@@ -17,7 +19,7 @@ export interface IDocumentProvider extends IDisposable {
  * We specify custom messages that the server can interpret. For reference please look in yjs_ws_server.
  *
  */
-export declare class WebSocketProvider implements IDocumentProvider {
+export declare class WebSocketProvider implements IDocumentProvider, IForkProvider {
     /**
      * Construct a new WebSocketProvider
      *
@@ -32,11 +34,17 @@ export declare class WebSocketProvider implements IDocumentProvider {
      * A promise that resolves when the document provider is ready.
      */
     get ready(): Promise<void>;
+    get contentType(): string;
+    get format(): string;
     /**
      * Dispose of the resources held by the object.
      */
     dispose(): void;
+    reconnect(): Promise<void>;
     private _connect;
+    connectToForkDoc(forkRoomId: string, sessionId: string): Promise<void>;
+    get wsProvider(): YWebsocketProvider | null;
+    private _disconnect;
     private _onUserChanged;
     private _onConnectionClosed;
     private _onSync;

package/lib/yprovider.js

@@ -72,6 +72,12 @@ export class WebSocketProvider {
     get ready() {
         return this._ready.promise;
     }
+    get contentType() {
+        return this._contentType;
+    }
+    get format() {
+        return this._format;
+    }
     /**
      * Dispose of the resources held by the object.
      */
@@ -84,8 +90,13 @@ export class WebSocketProvider {
         (_a = this._yWebsocketProvider) === null || _a === void 0 ? void 0 : _a.off('connection-close', this._onConnectionClosed);
         (_b = this._yWebsocketProvider) === null || _b === void 0 ? void 0 : _b.off('sync', this._onSync);
         (_c = this._yWebsocketProvider) === null || _c === void 0 ? void 0 : _c.destroy();
+        this._disconnect();
         Signal.clearData(this);
     }
+    async reconnect() {
+        this._disconnect();
+        this._connect();
+    }
     async _connect() {
         const session = await requestDocSession(this._format, this._contentType, this._path);
         this._yWebsocketProvider = new YWebsocketProvider(this._serverUrl, `${session.format}:${session.type}:${session.fileId}`, this._sharedModel.ydoc, {
@@ -96,6 +107,24 @@ export class WebSocketProvider {
         this._yWebsocketProvider.on('sync', this._onSync);
         this._yWebsocketProvider.on('connection-close', this._onConnectionClosed);
     }
+    async connectToForkDoc(forkRoomId, sessionId) {
+        this._disconnect();
+        this._yWebsocketProvider = new YWebsocketProvider(this._serverUrl, forkRoomId, this._sharedModel.ydoc, {
+            disableBc: true,
+            params: { sessionId },
+            awareness: this._awareness
+        });
+    }
+    get wsProvider() {
+        return this._yWebsocketProvider;
+    }
+    _disconnect() {
+        var _a, _b, _c;
+        (_a = this._yWebsocketProvider) === null || _a === void 0 ? void 0 : _a.off('connection-close', this._onConnectionClosed);
+        (_b = this._yWebsocketProvider) === null || _b === void 0 ? void 0 : _b.off('sync', this._onSync);
+        (_c = this._yWebsocketProvider) === null || _c === void 0 ? void 0 : _c.destroy();
+        this._yWebsocketProvider = null;
+    }
     _onUserChanged(user) {
         this._awareness.setLocalStateField('user', user.identity);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/docprovider",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.0-beta.4",
   "description": "JupyterLab - Document Provider",
   "homepage": "https://github.com/jupyterlab/jupyter-collaboration",
   "bugs": {

package/{lib/utils.js → style/base.css}

@@ -1,8 +1,6 @@
 /* -----------------------------------------------------------------------------
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-export var MessageType;
-(function (MessageType) {
-    MessageType[MessageType["CHAT"] = 125] = "CHAT";
-})(MessageType || (MessageType = {}));
+|---------------------------------------------------------------------------- */
+
+@import url('./slider.css');

package/style/index.css

@@ -0,0 +1,6 @@
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|---------------------------------------------------------------------------- */
+
+@import url('./base.css');

package/style/index.js

@@ -0,0 +1,6 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+import './base.css';

package/style/slider.css

@@ -0,0 +1,35 @@
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|---------------------------------------------------------------------------- */
+
+.jp-timelineSliderWrapper .jp-sliderContainer{
+  display: flex;
+  align-items: center;
+}
+
+.jp-Slider {
+  height: 4.5px
+}
+
+#jp-slider-status-bar {
+  display: flex;
+}
+
+.jp-timestampDisplay {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+}
+
+.jp-restoreBtnContainer {
+  width: 192px;
+}
+
+.jp-ToolbarButtonComponent.jp-restoreBtn {
+  cursor: pointer;
+  color: var(--jp-layout-color2);
+  width: 100%;
+  background: var(--jp-accept-color-normal)
+}

package/lib/utils.d.ts

@@ -1,3 +0,0 @@
-export declare enum MessageType {
-    CHAT = 125
-}