@oceanum/oceanumlab 4.7.1 → 4.8.0

package/lib/share/upload.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Ask the user for a notebook file on their computer; null if they cancel.
+ *
+ * Kept apart from the plugin because it is browser-only: the tests replace it.
+ */
+export declare function chooseNotebookFile(): Promise<File | null>;

package/lib/share/upload.js

@@ -0,0 +1,27 @@
+/**
+ * Ask the user for a notebook file on their computer; null if they cancel.
+ *
+ * Kept apart from the plugin because it is browser-only: the tests replace it.
+ */
+export function chooseNotebookFile() {
+    return new Promise(resolve => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.ipynb,application/x-ipynb+json';
+        input.hidden = true;
+        // Attached while the picker is open: some browsers (Safari) drop the `change`
+        // event of a detached input, or collect the input before it fires.
+        document.body.appendChild(input);
+        const settle = (file) => {
+            input.remove();
+            resolve(file);
+        };
+        input.addEventListener('change', () => { var _a, _b; return settle((_b = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null); }, {
+            once: true
+        });
+        // Browsers fire `cancel` when the picker is dismissed; without it the promise
+        // would simply never settle, which is harmless.
+        input.addEventListener('cancel', () => settle(null), { once: true });
+        input.click();
+    });
+}

package/lib/share/widgets.d.ts

@@ -0,0 +1,25 @@
+import { Dialog } from '@jupyterlab/apputils';
+import { Widget } from '@lumino/widgets';
+import type { ShareChoice } from './client';
+import { ISpecSummary } from './notebook';
+/** Dialog body listing notebooks to open; its value is the selected record id. */
+export declare class NotebookListBody extends Widget implements Dialog.IBodyWidget<string | null> {
+    constructor(mine: readonly ISpecSummary[], shared: readonly ISpecSummary[]);
+    getValue(): string | null;
+    private _addSection;
+    private _select;
+    private _selected;
+}
+export declare const EVERYONE_WARNING: string;
+/** Dialog body for sharing; its value is the change to make, or `null` if incomplete. */
+export declare class ShareBody extends Widget implements Dialog.IBodyWidget<ShareChoice | null> {
+    constructor(link: string);
+    getValue(): ShareChoice | null;
+    private _radio;
+    private static _count;
+    private readonly _person;
+    private readonly _everyone;
+    private readonly _stopEveryone;
+    private readonly _email;
+    private readonly _level;
+}

package/lib/share/widgets.js

@@ -0,0 +1,154 @@
+import { Clipboard } from '@jupyterlab/apputils';
+import { Widget } from '@lumino/widgets';
+import { parseShareEmails, parseTimestamp } from './notebook';
+function element(tag, className, text) {
+    const node = document.createElement(tag);
+    node.className = className;
+    if (text !== undefined) {
+        // Names and emails come from other users: always set text, never HTML.
+        node.textContent = text;
+    }
+    return node;
+}
+/** Dialog body listing notebooks to open; its value is the selected record id. */
+export class NotebookListBody extends Widget {
+    constructor(mine, shared) {
+        super();
+        this._selected = null;
+        this.addClass('jp-OceanumShare-body');
+        this._addSection('My notebooks', mine, false);
+        this._addSection('Shared with me', shared, true);
+    }
+    getValue() {
+        return this._selected;
+    }
+    _addSection(title, items, showCreator) {
+        this.node.appendChild(element('h3', 'jp-OceanumShare-heading', title));
+        if (items.length === 0) {
+            this.node.appendChild(element('p', 'jp-OceanumShare-empty', 'None'));
+            return;
+        }
+        const list = element('ul', 'jp-OceanumShare-list');
+        list.setAttribute('role', 'listbox');
+        list.setAttribute('aria-label', title);
+        for (const item of items) {
+            const option = element('li', 'jp-OceanumShare-item');
+            option.setAttribute('role', 'option');
+            option.setAttribute('aria-selected', 'false');
+            option.tabIndex = 0;
+            option.appendChild(element('span', 'jp-OceanumShare-name', item.name));
+            const modified = parseTimestamp(item.modified);
+            const details = [
+                modified ? `Modified ${modified.toLocaleDateString()}` : '',
+                showCreator && item.creator ? item.creator : ''
+            ].filter(Boolean);
+            option.appendChild(element('span', 'jp-OceanumShare-meta', details.join(' · ')));
+            const select = () => this._select(item.id, option);
+            option.addEventListener('click', select);
+            option.addEventListener('focus', select);
+            list.appendChild(option);
+        }
+        this.node.appendChild(list);
+    }
+    _select(id, option) {
+        this._selected = id;
+        for (const node of this.node.querySelectorAll('.jp-OceanumShare-item')) {
+            const selected = node === option;
+            node.classList.toggle('jp-mod-selected', selected);
+            node.setAttribute('aria-selected', String(selected));
+        }
+    }
+}
+export const EVERYONE_WARNING = 'Anyone with the link can read this notebook, including people without an Oceanum ' +
+    'account. This cannot be limited to your organisation. Its name and your email ' +
+    'address also become visible to anyone who lists Oceanum notebooks.';
+const PUBLIC_GRANT = {
+    type: 'public',
+    entity: '',
+    permission: 'read'
+};
+/** Dialog body for sharing; its value is the change to make, or `null` if incomplete. */
+export class ShareBody extends Widget {
+    constructor(link) {
+        super();
+        this.addClass('jp-OceanumShare-body');
+        this.node.appendChild(element('h3', 'jp-OceanumShare-heading', 'Link'));
+        const row = element('div', 'jp-OceanumShare-linkRow');
+        const linkInput = element('input', 'jp-OceanumShare-link');
+        linkInput.readOnly = true;
+        linkInput.value = link;
+        linkInput.setAttribute('aria-label', 'Notebook link');
+        const copy = element('button', 'jp-mod-styled jp-OceanumShare-copy', 'Copy link');
+        copy.type = 'button';
+        copy.addEventListener('click', () => {
+            Clipboard.copyToSystem(link);
+            copy.textContent = 'Copied';
+        });
+        row.append(linkInput, copy);
+        this.node.appendChild(row);
+        this.node.appendChild(element('p', 'jp-OceanumShare-hint', 'The link opens the notebook for anyone it is shared with.'));
+        this.node.appendChild(element('h3', 'jp-OceanumShare-heading', 'Share with'));
+        const name = `jp-OceanumShare-who-${++ShareBody._count}`;
+        this._person = this._radio(name, 'A specific person', true);
+        const personRow = element('div', 'jp-OceanumShare-personRow');
+        this._email = element('textarea', 'jp-OceanumShare-email');
+        this._email.rows = 2;
+        this._email.placeholder = 'name@example.com, another@example.com';
+        this._email.setAttribute('aria-label', 'Email addresses');
+        this._level = element('select', 'jp-OceanumShare-level');
+        this._level.setAttribute('aria-label', 'Access');
+        for (const [value, label] of [
+            ['read', 'can view'],
+            ['write', 'can edit']
+        ]) {
+            const option = element('option', '', label);
+            option.value = value;
+            this._level.appendChild(option);
+        }
+        personRow.append(this._email, this._level);
+        this.node.appendChild(personRow);
+        this.node.appendChild(element('p', 'jp-OceanumShare-hint', 
+        // Not "new lines": JupyterLab's dialog swallows Enter before it reaches the
+        // textarea, so one cannot be typed here. Pasted ones still separate addresses.
+        'Separate several addresses with commas or spaces. Everyone you add gets the access chosen here.'));
+        this._everyone = this._radio(name, 'Everyone with the link', false);
+        this.node.appendChild(element('p', 'jp-OceanumShare-warning', EVERYONE_WARNING));
+        this._stopEveryone = this._radio(name, 'Stop sharing with everyone', false);
+        const update = () => {
+            this._email.disabled = !this._person.checked;
+            this._level.disabled = !this._person.checked;
+        };
+        for (const radio of [this._person, this._everyone, this._stopEveryone]) {
+            radio.addEventListener('change', update);
+        }
+    }
+    getValue() {
+        if (this._everyone.checked) {
+            return { action: 'grant', grants: [PUBLIC_GRANT], invalid: [] };
+        }
+        if (this._stopEveryone.checked) {
+            return { action: 'revoke', grant: PUBLIC_GRANT };
+        }
+        const { emails, invalid } = parseShareEmails(this._email.value);
+        if (emails.length === 0 && invalid.length === 0) {
+            return null;
+        }
+        const permission = this._level.value === 'write' ? 'write' : 'read';
+        return {
+            action: 'grant',
+            grants: emails.map(entity => ({ type: 'user', entity, permission })),
+            invalid
+        };
+    }
+    _radio(name, text, checked) {
+        const label = element('label', 'jp-OceanumShare-choice');
+        const input = element('input', 'jp-OceanumShare-radio');
+        input.type = 'radio';
+        input.name = name;
+        input.checked = checked;
+        label.append(input, document.createTextNode(` ${text}`));
+        this.node.appendChild(label);
+        return input;
+    }
+}
+ShareBody._count = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oceanum/oceanumlab",
-    "version": "4.7.1",
+    "version": "4.8.0",
     "description": "A Jupyterlab extension to interact with the Oceanum.io platform",
     "keywords": [
         "jupyter",
@@ -62,12 +62,16 @@
         "@jupyterlab/cells": "^4.6.3",
         "@jupyterlab/console": "^4.6.3",
         "@jupyterlab/coreutils": "^6.6.3",
+        "@jupyterlab/docmanager": "^4.6.3",
+        "@jupyterlab/mainmenu": "^4.6.3",
+        "@jupyterlab/nbformat": "^4.6.3",
         "@jupyterlab/notebook": "^4.6.3",
         "@jupyterlab/services": "^7.6.3",
         "@jupyterlab/settingregistry": "^4.6.3",
         "@lumino/commands": "^2.3.3",
         "@lumino/coreutils": "^2.2.2",
         "@lumino/disposable": "^2.1.5",
+        "@lumino/messaging": "^2.0.3",
         "@lumino/signaling": "^2.1.5",
         "@lumino/widgets": "^2.8.0",
         "@phosphor-icons/react": "^2.1.10",

package/schema/datamesh-connect.json

@@ -29,6 +29,12 @@
       "title": "Iterate",
       "description": "After running, send each cell's output back to the AI so it can fix an error or take the next step. Only takes effect with Auto-run code on.",
       "default": false
+    },
+    "showExamples": {
+      "type": "boolean",
+      "title": "Show examples",
+      "description": "List Oceanum's example notebooks in the Notebooks tab, where the site provides them. Also switched from the Examples heading.",
+      "default": true
     }
   },
   "patternProperties": {

package/src/DatameshWidget.tsx

@@ -22,6 +22,7 @@ import { marked } from 'marked';
 
 import { DatasourceItem } from './DatasourceItem';
 import { IOceanumAuth } from './auth/tokens';
+import { startSignIn } from './auth/startSignIn';
 import { StoredNotebooks } from './StoredNotebooks';
 import { ITab, Tabs } from './Tabs';
 import {
@@ -29,6 +30,7 @@ import {
   aiBackendUrl,
   aiCredentialSource,
   canSignIn,
+  isSignedIn,
   pastedToken,
   resolveAiCredential,
   signInToken,
@@ -496,6 +498,8 @@ interface IAiAccess {
   pasted: string;
   /** Whether the host can sign the user in to Oceanum.io on this site. */
   canSignIn: boolean;
+  /** Whether the host says the user is signed in to Oceanum.io. */
+  signedIn: boolean;
   /** The backend address: the deployment's Oceanum AI. */
   backend: string;
 }
@@ -509,6 +513,7 @@ function readAiAccess(
     source: aiCredentialSource(datameshToken, commands),
     pasted: pastedToken(datameshToken),
     canSignIn: canSignIn(commands),
+    signedIn: isSignedIn(commands),
     backend: aiBackendUrl(settings.aiBackendUrl())
   };
 }
@@ -550,6 +555,34 @@ function useAiAccess(
   return access;
 }
 
+/**
+ * The `showExamples` setting, read again whenever the settings change. True where the
+ * host passes no such setting; null while the host's setting has not loaded.
+ */
+function useShowExamples(
+  settingsChanged: ISignal<unknown, void>,
+  read: (() => boolean | null) | undefined
+): boolean | null {
+  const [show, setShow] = React.useState<boolean | null>(() =>
+    read ? read() : true
+  );
+
+  React.useEffect(() => {
+    if (!read) {
+      return;
+    }
+    const update = () => setShow(read());
+    // Anything that changed between the first render and now.
+    update();
+    settingsChanged.connect(update);
+    return () => {
+      settingsChanged.disconnect(update);
+    };
+  }, [settingsChanged, read]);
+
+  return show;
+}
+
 /**
  * Shows a message prompting the user to sign in to Oceanum.io, or to configure
  * their Datamesh token where the site has no sign-in. Only renders when there
@@ -961,6 +994,17 @@ export interface IDatameshWidgetProps {
   auth?: IOceanumAuth | null;
   /** Open a stored notebook by spec store id. */
   openStoredNotebook?: (id: string) => void;
+  /** Open a copy of an example by spec store id, named from its title. */
+  openExample?: (id: string, title: string) => void;
+  /** Upload a notebook from the user's computer. */
+  uploadNotebook?: () => void;
+  /**
+   * The `showExamples` setting: whether the Notebooks tab lists the examples; null
+   * until the settings have loaded.
+   */
+  showExamples?: () => boolean | null;
+  /** Save the `showExamples` setting, from the switch on the Examples heading. */
+  setShowExamples?: (show: boolean) => void;
 }
 
 /**
@@ -977,6 +1021,11 @@ function PanelTabs({
   commands,
   settings,
   renderDatamesh,
+  openStoredNotebook,
+  openExample,
+  uploadNotebook,
+  showExamples,
+  setShowExamples,
   selected,
   onSelect
 }: {
@@ -984,10 +1033,16 @@ function PanelTabs({
   commands: CommandRegistry;
   settings: IAiSettings;
   renderDatamesh: () => React.ReactElement;
+  openStoredNotebook?: (id: string) => void;
+  openExample?: (id: string, title: string) => void;
+  uploadNotebook?: () => void;
+  showExamples?: () => boolean | null;
+  setShowExamples?: (show: boolean) => void;
   selected: string;
   onSelect: (id: string) => void;
 }): React.ReactElement {
   const access = useAiAccess(commands, settings);
+  const examplesShown = useShowExamples(settings.settingsChanged, showExamples);
   const tabs: ITab[] = [
     {
       id: 'notebooks',
@@ -996,7 +1051,21 @@ function PanelTabs({
         // An auth with no environment is a provider that has nothing to sign in to (the
         // server has sign-in turned off). Asking the user to sign in would be a dead end.
         auth?.environment ? (
-          <StoredNotebooks auth={auth} />
+          <StoredNotebooks
+            auth={auth}
+            onOpen={openStoredNotebook && (item => openStoredNotebook(item.id))}
+            onOpenExample={
+              openExample && (item => openExample(item.id, item.title))
+            }
+            onUpload={uploadNotebook}
+            showExamples={examplesShown}
+            onShowExamplesChange={setShowExamples}
+            onSignIn={() => {
+              startSignIn(commands, auth).catch(error => {
+                console.warn('Oceanum.io sign-in could not start.', error);
+              });
+            }}
+          />
         ) : (
           <div className="oceanum-text-empty">
             Oceanum.io sign-in is not configured for this host.
@@ -1005,7 +1074,10 @@ function PanelTabs({
     },
     { id: 'datamesh', label: 'Datamesh', render: renderDatamesh }
   ];
-  if (access.source) {
+  // Signed in, not merely holding a credential: a Datamesh token pasted into the
+  // settings would reach the backend, but the tab stays out of the way until someone
+  // has signed in to Oceanum.io.
+  if (access.signedIn) {
     tabs.push({
       id: 'ai',
       label: 'Oceanum AI',
@@ -1128,6 +1200,11 @@ export class DatameshConnectWidget extends ReactWidget {
               commands={this.props.commands}
               settings={this.props}
               renderDatamesh={() => this.renderDatamesh()}
+              openStoredNotebook={this.props.openStoredNotebook}
+              openExample={this.props.openExample}
+              uploadNotebook={this.props.uploadNotebook}
+              showExamples={this.props.showExamples}
+              setShowExamples={this.props.setShowExamples}
               selected={this.selectedTab}
               onSelect={id => this.selectTab(id)}
             />