@jupyter-notebook/notebook-extension 7.0.0-alpha.1 → 7.0.0-alpha.11

package/lib/index.js

@@ -1,15 +1,14 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-import { DOMUtils } from '@jupyterlab/apputils';
+import { DOMUtils, IToolbarWidgetRegistry } from '@jupyterlab/apputils';
 import { Text, Time } from '@jupyterlab/coreutils';
 import { IDocumentManager } from '@jupyterlab/docmanager';
-import { IMainMenu } from '@jupyterlab/mainmenu';
-import { NotebookPanel, INotebookTracker } from '@jupyterlab/notebook';
+import { NotebookPanel, INotebookTracker, INotebookTools } from '@jupyterlab/notebook';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { ITranslator } from '@jupyterlab/translation';
 import { INotebookShell } from '@jupyter-notebook/application';
 import { Poll } from '@lumino/polling';
-import { Menu, Widget } from '@lumino/widgets';
+import { Widget } from '@lumino/widgets';
 /**
  * The class for kernel status errors.
  */
@@ -37,14 +36,19 @@ const checkpoints = {
     id: '@jupyter-notebook/notebook-extension:checkpoints',
     autoStart: true,
     requires: [IDocumentManager, ITranslator],
-    optional: [INotebookShell],
-    activate: (app, docManager, translator, notebookShell) => {
+    optional: [INotebookShell, IToolbarWidgetRegistry],
+    activate: (app, docManager, translator, notebookShell, toolbarRegistry) => {
         const { shell } = app;
         const trans = translator.load('notebook');
-        const widget = new Widget();
-        widget.id = DOMUtils.createDomID();
-        widget.addClass('jp-NotebookCheckpoint');
-        app.shell.add(widget, 'top', { rank: 100 });
+        const node = document.createElement('div');
+        if (toolbarRegistry) {
+            toolbarRegistry.addFactory('TopBar', 'checkpoint', toolbar => {
+                const widget = new Widget({ node });
+                widget.id = DOMUtils.createDomID();
+                widget.addClass('jp-NotebookCheckpoint');
+                return widget;
+            });
+        }
         const onChange = async () => {
             const current = shell.currentWidget;
             if (!current) {
@@ -58,7 +62,7 @@ const checkpoints = {
                 return;
             }
             const checkpoint = checkpoints[checkpoints.length - 1];
-            widget.node.textContent = trans.__('Last Checkpoint: %1', Time.formatHuman(new Date(checkpoint.last_modified)));
+            node.textContent = trans.__('Last Checkpoint: %1', Time.formatHuman(new Date(checkpoint.last_modified)));
         };
         if (notebookShell) {
             notebookShell.currentChanged.connect(onChange);
@@ -81,15 +85,14 @@ const kernelLogo = {
     id: '@jupyter-notebook/notebook-extension:kernel-logo',
     autoStart: true,
     requires: [INotebookShell],
-    activate: (app, shell) => {
+    optional: [IToolbarWidgetRegistry],
+    activate: (app, shell, toolbarRegistry) => {
         const { serviceManager } = app;
-        let widget;
+        const node = document.createElement('div');
+        const img = document.createElement('img');
+        node.appendChild(img);
         const onChange = async () => {
             var _a, _b, _c, _d, _e;
-            if (widget) {
-                widget.dispose();
-                widget.parent = null;
-            }
             const current = shell.currentWidget;
             if (!(current instanceof NotebookPanel)) {
                 return;
@@ -106,15 +109,16 @@ const kernelLogo = {
             if (!kernelIconUrl) {
                 return;
             }
-            const node = document.createElement('div');
-            const img = document.createElement('img');
             img.src = kernelIconUrl;
             img.title = spec.display_name;
-            node.appendChild(img);
-            widget = new Widget({ node });
-            widget.addClass('jp-NotebookKernelLogo');
-            app.shell.add(widget, 'top', { rank: 10010 });
         };
+        if (toolbarRegistry) {
+            toolbarRegistry.addFactory('TopBar', 'kernelLogo', toolbar => {
+                const widget = new Widget({ node });
+                widget.addClass('jp-NotebookKernelLogo');
+                return widget;
+            });
+        }
         app.started.then(() => {
             shell.currentChanged.connect(onChange);
         });
@@ -173,36 +177,6 @@ const kernelStatus = {
         shell.currentChanged.connect(onChange);
     }
 };
-/**
- * A plugin to customize notebook related menu entries
- * TODO: switch to settings define menus when fixed upstream: https://github.com/jupyterlab/jupyterlab/issues/11754
- */
-const menuPlugin = {
-    id: '@jupyter-notebook/notebook-extension:menu-plugin',
-    autoStart: true,
-    requires: [IMainMenu, ITranslator],
-    activate: (app, mainMenu, translator) => {
-        const { commands } = app;
-        const trans = translator.load('notebook');
-        const cellTypeSubmenu = new Menu({ commands });
-        cellTypeSubmenu.title.label = trans._p('menu', 'Cell Type');
-        [
-            'notebook:change-cell-to-code',
-            'notebook:change-cell-to-markdown',
-            'notebook:change-cell-to-raw'
-        ].forEach(command => {
-            cellTypeSubmenu.addItem({
-                command
-            });
-        });
-        mainMenu.runMenu.addItem({ type: 'separator', rank: 1000 });
-        mainMenu.runMenu.addItem({
-            type: 'submenu',
-            submenu: cellTypeSubmenu,
-            rank: 1010
-        });
-    }
-};
 /**
  * A plugin to enable scrolling for outputs by default.
  * Mimic the logic from the classic notebook, as found here:
@@ -224,7 +198,7 @@ const scrollOutput = {
             }
             const { outputArea } = cell;
             // respect cells with an explicit scrolled state
-            const scrolled = cell.model.metadata.get('scrolled');
+            const scrolled = cell.model.getMetadata('scrolled');
             if (scrolled !== undefined) {
                 return;
             }
@@ -237,29 +211,27 @@ const scrollOutput = {
             const scroll = height > lineHeight * autoScrollThreshold;
             cell.toggleClass(SCROLLED_OUTPUTS_CLASS, scroll);
         };
+        const handlers = {};
+        const setAutoScroll = (cell) => {
+            if (cell.model.type === 'code') {
+                const codeCell = cell;
+                const id = codeCell.model.id;
+                autoScroll(codeCell);
+                if (handlers[id]) {
+                    codeCell.outputArea.model.changed.disconnect(handlers[id]);
+                }
+                handlers[id] = () => autoScroll(codeCell);
+                codeCell.outputArea.model.changed.connect(handlers[id]);
+            }
+        };
         tracker.widgetAdded.connect((sender, notebook) => {
             var _a;
-            (_a = notebook.model) === null || _a === void 0 ? void 0 : _a.cells.changed.connect((sender, changed) => {
-                // process new cells only
-                if (!(changed.type === 'add')) {
-                    return;
-                }
-                const [cellModel] = changed.newValues;
-                notebook.content.widgets.forEach(cell => {
-                    if (cell.model.id === cellModel.id && cell.model.type === 'code') {
-                        const codeCell = cell;
-                        codeCell.outputArea.model.changed.connect(() => autoScroll(codeCell));
-                    }
-                });
-            });
             // when the notebook widget is created, process all the cells
-            // TODO: investigate why notebook.content.fullyRendered is not enough
             notebook.sessionContext.ready.then(() => {
-                notebook.content.widgets.forEach(cell => {
-                    if (cell.model.type === 'code') {
-                        autoScroll(cell);
-                    }
-                });
+                notebook.content.widgets.forEach(setAutoScroll);
+            });
+            (_a = notebook.model) === null || _a === void 0 ? void 0 : _a.cells.changed.connect((sender, args) => {
+                notebook.content.widgets.forEach(setAutoScroll);
             });
         });
         if (settingRegistry) {
@@ -281,6 +253,28 @@ const scrollOutput = {
         }
     }
 };
+/**
+ * A plugin to add the NotebookTools to the side panel;
+ */
+const notebookToolsWidget = {
+    id: '@jupyter-notebook/notebook-extension:notebook-tools',
+    autoStart: true,
+    requires: [INotebookShell],
+    optional: [INotebookTools],
+    activate: (app, shell, notebookTools) => {
+        const onChange = async () => {
+            const current = shell.currentWidget;
+            if (!(current instanceof NotebookPanel)) {
+                return;
+            }
+            // Add the notebook tools in right area.
+            if (notebookTools) {
+                shell.add(notebookTools, 'right');
+            }
+        };
+        shell.currentChanged.connect(onChange);
+    }
+};
 /**
  * Export the plugins as default.
  */
@@ -288,7 +282,7 @@ const plugins = [
     checkpoints,
     kernelLogo,
     kernelStatus,
-    menuPlugin,
-    scrollOutput
+    scrollOutput,
+    notebookToolsWidget
 ];
 export default plugins;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter-notebook/notebook-extension",
-  "version": "7.0.0-alpha.1",
+  "version": "7.0.0-alpha.11",
   "description": "Jupyter Notebook - Notebook Extension",
   "homepage": "https://github.com/jupyter/notebook",
   "bugs": {
@@ -39,20 +39,20 @@
     "watch": "tsc -b --watch"
   },
   "dependencies": {
-    "@jupyter-notebook/application": "^7.0.0-alpha.1",
-    "@jupyterlab/application": "^4.0.0-alpha.5",
-    "@jupyterlab/apputils": "^4.0.0-alpha.5",
-    "@jupyterlab/cells": "^4.0.0-alpha.5",
-    "@jupyterlab/docmanager": "^4.0.0-alpha.5",
-    "@jupyterlab/notebook": "^4.0.0-alpha.5",
-    "@jupyterlab/settingregistry": "^4.0.0-alpha.5",
-    "@jupyterlab/translation": "^4.0.0-alpha.4",
-    "@lumino/polling": "^1.10.0",
-    "@lumino/widgets": "^1.31.1"
+    "@jupyter-notebook/application": "^7.0.0-alpha.11",
+    "@jupyterlab/application": "^4.0.0-alpha.17",
+    "@jupyterlab/apputils": "^4.0.0-alpha.17",
+    "@jupyterlab/cells": "^4.0.0-alpha.17",
+    "@jupyterlab/docmanager": "^4.0.0-alpha.17",
+    "@jupyterlab/notebook": "^4.0.0-alpha.17",
+    "@jupyterlab/settingregistry": "^4.0.0-alpha.17",
+    "@jupyterlab/translation": "^4.0.0-alpha.17",
+    "@lumino/polling": "^2.0.0-alpha.7",
+    "@lumino/widgets": "^2.0.0-alpha.7"
   },
   "devDependencies": {
-    "rimraf": "~3.0.0",
-    "typescript": "~4.1.3"
+    "rimraf": "^3.0.2",
+    "typescript": "~4.9.3"
   },
   "publishConfig": {
     "access": "public"

package/schema/checkpoints.json

@@ -0,0 +1,10 @@
+{
+  "title": "Notebook checkpoint indicator",
+  "description": "Notebook checkpoint indicator",
+  "jupyter.lab.toolbars": {
+    "TopBar": [{ "name": "checkpoint", "rank": 20 }]
+  },
+  "properties": {},
+  "additionalProperties": false,
+  "type": "object"
+}

package/schema/kernel-logo.json

@@ -0,0 +1,10 @@
+{
+  "title": "Kernel logo",
+  "description": "Kernel logo in the top area",
+  "jupyter.lab.toolbars": {
+    "TopBar": [{ "name": "kernelLogo", "rank": 110 }]
+  },
+  "properties": {},
+  "additionalProperties": false,
+  "type": "object"
+}

package/style/base.css

@@ -6,16 +6,53 @@
 
 @import './variables.css';
 
-/* Document oriented look for the notebook (scrollbar to the right of the page) */
+/**
+  Document oriented look for the notebook.
+  This includes changes to the look and feel of the JupyterLab Notebook
+  component like:
+  - scrollbar to the right of the page
+  - drop shadow on the notebook
+  - smaller empty space at the bottom of the notebook
+  - compact view on mobile
+*/
+
+/* Keep the notebook centered on the page */
 
 body[data-notebook='notebooks'] .jp-NotebookPanel-toolbar {
   padding-left: calc(calc(100% - var(--jp-notebook-max-width)) * 0.5);
   padding-right: calc(calc(100% - var(--jp-notebook-max-width)) * 0.5);
 }
 
+body[data-notebook='notebooks'] .jp-Notebook {
+  padding-top: unset;
+  padding-left: calc(calc(100% - var(--jp-notebook-max-width)) * 0.5);
+  padding-right: calc(
+    calc(
+        100% - var(--jp-notebook-max-width) - var(--jp-notebook-padding-offset)
+      ) * 0.5
+  );
+  background: var(--jp-layout-color2);
+}
+
+body[data-notebook='notebooks'] .jp-WindowedPanel-inner {
+  margin-top: var(--jp-notebook-toolbar-margin-bottom);
+}
+
+body[data-notebook='notebooks'] .jp-Notebook-cell {
+  background: var(--jp-layout-color0);
+  padding-left: calc(2 * var(--jp-cell-padding));
+  padding-right: calc(2 * var(--jp-cell-padding));
+}
+
+/* Empty space at the bottom of the notebook (similar to classic) */
+body[data-notebook='notebooks'] .jp-Notebook.jp-mod-scrollPastEnd::after {
+  min-height: 100px;
+}
+
+/* Fix background colors */
+
 body[data-notebook='notebooks'] .jp-Notebook > * {
   background: var(--jp-layout-color0);
-  padding: var(--jp-notebook-padding);
 }
 
 body[data-notebook='notebooks']
@@ -24,28 +61,119 @@ body[data-notebook='notebooks']
   background: var(--jp-layout-color0) !important;
 }
 
-body[data-notebook='notebooks'] .jp-Notebook > *:first-child {
-  padding-top: var(--jp-notebook-padding-offset);
-  margin-top: var(--jp-notebook-toolbar-margin-bottom);
+/**
+  Extra padding to the first and and last cell of the notebook.
+  TODO: revisit when https://github.com/jupyterlab/jupyterlab/issues/13151 is fixed
+*/
+.jp-Notebook-cell[data-windowed-list-index='0'] {
+  padding-top: calc(2 * var(--jp-notebook-padding));
 }
 
-body[data-notebook='notebooks'] .jp-Notebook {
-  padding-top: unset;
-  padding-bottom: unset;
-  padding-left: calc(calc(100% - var(--jp-notebook-max-width)) * 0.5);
-  padding-right: calc(
-    calc(
-        100% - var(--jp-notebook-max-width) - var(--jp-notebook-padding-offset)
-      ) * 0.5
-  );
-  background: var(--jp-layout-color2);
+body[data-notebook='notebooks'] .jp-WindowedPanel-window > *:last-child {
+  padding-bottom: calc(2 * var(--jp-notebook-padding));
 }
 
-body[data-notebook='notebooks'] .jp-Notebook.jp-mod-scrollPastEnd::after {
+body[data-notebook='notebooks']
+  .jp-Notebook
+  .jp-Notebook-cell:not(:first-child)::before {
+  content: ' ';
+  height: 100%;
+  position: absolute;
+  top: 0;
+  width: 11px;
+}
+
+/* Cell toolbar adjustements */
+
+body[data-notebook='notebooks'] .jp-cell-toolbar {
+  background: unset;
+  box-shadow: unset;
+}
+
+body[data-notebook='notebooks']
+  .jp-RawCell[data-windowed-list-index='0']
+  .jp-cell-toolbar,
+body[data-notebook='notebooks']
+  .jp-MarkdownCell[data-windowed-list-index='0']
+  .jp-cell-toolbar {
+  top: calc(2 * var(--jp-notebook-padding));
+}
+
+/** first code cell on mobile
+    (keep the selector above the media query)
+*/
+body[data-notebook='notebooks']
+  .jp-CodeCell[data-windowed-list-index='0']
+  .jp-cell-toolbar {
+  top: unset;
+}
+
+@media only screen and (max-width: 760px) {
+  /* first code cell on mobile */
+  body[data-notebook='notebooks']
+    .jp-CodeCell[data-windowed-list-index='0']
+    .jp-cell-toolbar {
+    top: var(--jp-notebook-padding);
+  }
+
+  body[data-notebook='notebooks'] .jp-MarkdownCell .jp-cell-toolbar,
+  body[data-notebook='notebooks'] .jp-RawCell .jp-cell-toolbar {
+    top: calc(0.5 * var(--jp-notebook-padding));
+  }
+}
+
+/* Mobile View */
+
+body[data-format='mobile'] .jp-NotebookCheckpoint {
+  display: none;
+}
+
+body[data-format='mobile'] .jp-Notebook > *:first-child {
+  margin-top: 0;
+}
+
+/* Virtual Notebook fixes */
+
+body[data-notebook='notebooks'] .jp-WindowedPanel-window {
   background: var(--jp-layout-color0);
 }
 
-/* ---- */
+/* Notebook box shadow */
+
+body[data-notebook='notebooks'] .jp-Notebook > *:first-child:not(:last-child) {
+  box-shadow: 0px 0px 12px 1px var(--jp-shadow-umbra-color);
+}
+
+body[data-notebook='notebooks'] .jp-Notebook > *:first-child:not(:last-child) {
+  box-shadow: 0px 0px 12px 1px var(--jp-shadow-umbra-color);
+}
+
+body[data-notebook='notebooks']
+  .jp-Notebook
+  > *:first-child:last-child::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  box-shadow: 0px 0px 12px 1px var(--jp-shadow-umbra-color);
+}
+
+body[data-notebook='notebooks']
+  .jp-Notebook
+  .jp-Notebook-cell:not(:first-child)::after,
+body[data-notebook='notebooks']
+  .jp-Notebook
+  .jp-Notebook-cell:not(:first-child)::before {
+  content: ' ';
+  height: 100%;
+  position: absolute;
+  top: 0;
+  width: 11px;
+}
+
+/* Additional customizations of the components on the notebook page */
 
 .jp-NotebookKernelLogo {
   flex: 0 0 auto;
@@ -126,13 +254,3 @@ body[data-notebook='notebooks'] .jp-Notebook.jp-mod-scrollPastEnd::after {
   overflow: hidden;
   white-space: nowrap;
 }
-
-/* Mobile View */
-
-body[data-format='mobile'] .jp-NotebookCheckpoint {
-  display: none;
-}
-
-body[data-format='mobile'] .jp-Notebook > *:first-child {
-  margin-top: 0;
-}