@jupyter/collaboration 3.1.0 → 4.0.0-beta.0

package/lib/collaboratorspanel.js

@@ -49,15 +49,19 @@ export class CollaboratorsPanel extends Panel {
          */
         this._onAwarenessChanged = () => {
             const state = this._awareness.getStates();
-            const collaborators = [];
+            const collaboratorsMap = new Map();
             state.forEach((value, key) => {
                 if (this._currentUser.isReady &&
                     value.user &&
                     value.user.username !== this._currentUser.identity.username) {
-                    collaborators.push(value);
+                    const uniqueKey = `${value.user.username}-${value.current || 'no-current'}`;
+                    if (!collaboratorsMap.has(uniqueKey)) {
+                        collaboratorsMap.set(uniqueKey, value);
+                    }
                 }
             });
-            this._collaboratorsChanged.emit(collaborators);
+            // Convert map to array to maintain the same emit interface
+            this._collaboratorsChanged.emit(Array.from(collaboratorsMap.values()));
         };
         this._collaboratorsChanged = new Signal(this);
         this._awareness = awareness;
@@ -72,8 +76,9 @@ export function CollaboratorsBody(props) {
     props.collaboratorsChanged.connect((_, value) => {
         setCollaborators(value);
     });
-    return (React.createElement("div", { className: COLLABORATORS_LIST_CLASS }, collaborators.map((collaborator, i) => {
-        return (React.createElement(Collaborator, { collaborator: collaborator, fileopener: props.fileopener, docRegistry: props.docRegistry }));
+    return (React.createElement("div", { className: COLLABORATORS_LIST_CLASS }, collaborators.map(collaborator => {
+        const uniqueKey = `${collaborator.user.username}-${collaborator.current || 'no-current'}`;
+        return (React.createElement(Collaborator, { key: uniqueKey, collaborator: collaborator, fileopener: props.fileopener, docRegistry: props.docRegistry }));
     })));
 }
 export function Collaborator(props) {
@@ -81,26 +86,25 @@ export function Collaborator(props) {
     const { collaborator, fileopener } = props;
     let currentMain = '';
     if (collaborator.current) {
+        // Discard widget tracker prefix (e.g. `notebook:` or `editor:`)
         const path = collaborator.current.split(':');
-        currentMain = `${path[1]}:${path[2]}`;
+        currentMain = `${path[1]}`;
     }
     const documents = collaborator.documents || [];
     const docs = documents.map(document => {
         var _a, _b;
-        const path = document.split(':');
-        const fileTypes = (_b = (_a = props.docRegistry) === null || _a === void 0 ? void 0 : _a.getFileTypesForPath(path[1])) === null || _b === void 0 ? void 0 : _b.filter(ft => ft.icon !== undefined);
-        const icon = fileTypes ? fileTypes[0].icon : fileIcon;
+        const fileTypes = (_b = (_a = props.docRegistry) === null || _a === void 0 ? void 0 : _a.getFileTypesForPath(document)) === null || _b === void 0 ? void 0 : _b.filter(ft => ft.icon !== undefined);
+        const icon = (fileTypes === null || fileTypes === void 0 ? void 0 : fileTypes.length) ? fileTypes[0].icon : fileIcon;
         const iconClass = fileTypes
             ? fileTypes[0].iconClass
             : undefined;
         return {
-            filepath: path[1],
-            filename: path[1].length > 40
-                ? path[1]
+            filename: document.length > 40
+                ? document
                     .slice(0, 10)
                     .concat('…')
-                    .concat(path[1].slice(path[1].length - 15))
-                : path[1],
+                    .concat(document.slice(document.length - 15))
+                : document,
             fileLocation: document,
             icon,
             iconClass
@@ -127,6 +131,6 @@ export function Collaborator(props) {
                             ? `${COLLABORATOR_FILE_CLASS} jp-mod-running`
                             : COLLABORATOR_FILE_CLASS), key: doc.filename, onClick: () => fileopener(doc.fileLocation) },
                     React.createElement(LabIcon.resolveReact, { icon: doc.icon, iconClass: doc.iconClass, tag: 'span', className: 'jp-DirListing-itemIcon', stylesheet: 'listing' }),
-                    React.createElement("span", { className: 'jp-DirListing-itemText', title: doc.filepath }, doc.filename)));
+                    React.createElement("span", { className: 'jp-DirListing-itemText', title: doc.fileLocation }, doc.filename)));
             })))));
 }

package/lib/index.d.ts

@@ -8,3 +8,4 @@ export * from './cursors';
 export * from './menu';
 export * from './sharedlink';
 export * from './userinfopanel';
+export * from './users-item';

package/lib/index.js

@@ -10,3 +10,4 @@ export * from './cursors';
 export * from './menu';
 export * from './sharedlink';
 export * from './userinfopanel';
+export * from './users-item';

package/lib/users-item.d.ts

@@ -0,0 +1,85 @@
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { User } from '@jupyterlab/services';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import * as React from 'react';
+/**
+ * The namespace for the UsersItem component.
+ */
+export declare namespace UsersItem {
+    /**
+     * Properties of the component.
+     */
+    interface IProps {
+        /**
+         * The model of the document.
+         */
+        model: DocumentRegistry.IModel | null;
+        /**
+         * A function to display the user icons, optional.
+         * This function will overwrite the default one, and can be used to handle event on
+         * icons.
+         */
+        iconRenderer?: (props: UsersItem.IIconRendererProps) => JSX.Element;
+    }
+    /**
+     * The state of the component.
+     */
+    interface IState {
+        /**
+         * The user list.
+         */
+        usersList: IUserData[];
+    }
+    /**
+     * Properties send to the iconRenderer function.
+     */
+    interface IIconRendererProps extends React.HTMLAttributes<HTMLElement> {
+        /**
+         * The user.
+         */
+        user: IUserData;
+        /**
+         * The document's model.
+         */
+        model?: DocumentRegistry.IModel;
+    }
+    /**
+     * The user data type.
+     */
+    type IUserData = {
+        /**
+         * User id (the client id of the awareness).
+         */
+        userId: number;
+        /**
+         * User data.
+         */
+        userData: User.IIdentity;
+    };
+}
+/**
+ * A component displaying the collaborative users of a document.
+ */
+export declare class UsersItem extends React.Component<UsersItem.IProps, UsersItem.IState> {
+    constructor(props: UsersItem.IProps);
+    /**
+     * Static method to create a widget.
+     */
+    static createWidget(options: UsersItem.IProps): ReactWidget;
+    componentDidMount(): void;
+    /**
+     * Filter out the duplicated users, which can happen temporary on reload.
+     */
+    private filterDuplicated;
+    render(): React.ReactNode;
+    /**
+     * Triggered when a change occurs in the document awareness, to build again the users list.
+     */
+    private _awarenessChange;
+    private _model;
+    private _iconRenderer;
+}
+/**
+ * Default renderer for the user icon.
+ */
+export declare function DefaultIconRenderer(props: UsersItem.IIconRendererProps): JSX.Element;

package/lib/users-item.js

@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { classes, ReactWidget } from '@jupyterlab/ui-components';
+import * as React from 'react';
+const USERS_ITEM_CLASS = 'jp-toolbar-users-item';
+/**
+ * A component displaying the collaborative users of a document.
+ */
+export class UsersItem extends React.Component {
+    constructor(props) {
+        var _a;
+        super(props);
+        /**
+         * Triggered when a change occurs in the document awareness, to build again the users list.
+         */
+        this._awarenessChange = () => {
+            var _a;
+            const clients = (_a = this._model) === null || _a === void 0 ? void 0 : _a.sharedModel.awareness.getStates();
+            const users = [];
+            if (clients) {
+                clients.forEach((val, key) => {
+                    if (val.user) {
+                        users.push({ userId: key, userData: val.user });
+                    }
+                });
+            }
+            this.setState(old => ({ ...old, usersList: users }));
+        };
+        this._model = props.model;
+        this._iconRenderer = (_a = props.iconRenderer) !== null && _a !== void 0 ? _a : null;
+        this.state = { usersList: [] };
+    }
+    /**
+     * Static method to create a widget.
+     */
+    static createWidget(options) {
+        return ReactWidget.create(React.createElement(UsersItem, { ...options }));
+    }
+    componentDidMount() {
+        var _a;
+        (_a = this._model) === null || _a === void 0 ? void 0 : _a.sharedModel.awareness.on('change', this._awarenessChange);
+        this._awarenessChange();
+    }
+    /**
+     * Filter out the duplicated users, which can happen temporary on reload.
+     */
+    filterDuplicated(usersList) {
+        var _a;
+        const newList = [];
+        const selected = new Set();
+        for (const element of usersList) {
+            if (((_a = element === null || element === void 0 ? void 0 : element.userData) === null || _a === void 0 ? void 0 : _a.username) &&
+                !selected.has(element.userData.username)) {
+                selected.add(element.userData.username);
+                newList.push(element);
+            }
+        }
+        return newList;
+    }
+    render() {
+        var _a;
+        const IconRenderer = (_a = this._iconRenderer) !== null && _a !== void 0 ? _a : DefaultIconRenderer;
+        return (React.createElement("div", { className: USERS_ITEM_CLASS }, this.filterDuplicated(this.state.usersList).map(user => {
+            if (this._model &&
+                user.userId !== this._model.sharedModel.awareness.clientID) {
+                return IconRenderer({ user, model: this._model });
+            }
+        })));
+    }
+}
+/**
+ * Default renderer for the user icon.
+ */
+export function DefaultIconRenderer(props) {
+    let el;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { user, model, ...htmlProps } = props;
+    const iconClasses = classes('lm-MenuBar-itemIcon', props.className || '');
+    if (user.userData.avatar_url) {
+        el = (React.createElement("div", { ...htmlProps, key: user.userId, title: user.userData.display_name, className: classes(iconClasses, 'jp-MenuBar-imageIcon') },
+            React.createElement("img", { src: user.userData.avatar_url, alt: "" })));
+    }
+    else {
+        el = (React.createElement("div", { ...htmlProps, key: user.userId, title: user.userData.display_name, className: classes(iconClasses, 'jp-MenuBar-anonymousIcon'), style: { backgroundColor: user.userData.color } },
+            React.createElement("span", null, user.userData.initials)));
+    }
+    return el;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/collaboration",
-  "version": "3.1.0",
+  "version": "4.0.0-beta.0",
   "description": "JupyterLab - Real-Time Collaboration Widgets",
   "homepage": "https://github.com/jupyterlab/jupyter-collaboration",
   "bugs": {
@@ -41,11 +41,11 @@
   "dependencies": {
     "@codemirror/state": "^6.2.0",
     "@codemirror/view": "^6.7.0",
-    "@jupyterlab/apputils": "^4.0.5",
-    "@jupyterlab/coreutils": "^6.0.5",
-    "@jupyterlab/docregistry": "^4.0.5",
-    "@jupyterlab/services": "^7.0.5",
-    "@jupyterlab/ui-components": "^4.0.5",
+    "@jupyterlab/apputils": "^4.4.0-alpha.2",
+    "@jupyterlab/coreutils": "^6.4.0-alpha.2",
+    "@jupyterlab/docregistry": "^4.4.0-alpha.2",
+    "@jupyterlab/services": "^7.4.0-alpha.2",
+    "@jupyterlab/ui-components": "^4.4.0-alpha.2",
     "@lumino/coreutils": "^2.1.0",
     "@lumino/signaling": "^2.0.0",
     "@lumino/virtualdom": "^2.0.0",
@@ -57,7 +57,7 @@
   "devDependencies": {
     "@types/react": "~18.3.1",
     "rimraf": "^4.1.2",
-    "typescript": "~5.0.4"
+    "typescript": "~5.1.6"
   },
   "publishConfig": {
     "access": "public"

package/style/base.css

@@ -5,6 +5,7 @@
 
 @import url('./menu.css');
 @import url('./sidepanel.css');
+@import url('./users-item.css');
 
 .jp-shared-link-body {
     user-select: none;

package/style/users-item.css

@@ -0,0 +1,20 @@
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|---------------------------------------------------------------------------- */
+
+.jp-toolbar-users-item {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+}
+
+.jp-toolbar-users-item .jp-MenuBar-anonymousIcon,
+.jp-toolbar-users-item .jp-MenuBar-imageIcon {
+  position: relative;
+  left: 0;
+  height: 22px;
+  width: 22px;
+  box-sizing: border-box;
+  cursor: default;
+}