@jupyter-notebook/notebook-extension 7.0.0-alpha.5 → 7.0.0-alpha.7

package/lib/index.js

@@ -3,7 +3,7 @@
 import { DOMUtils, IToolbarWidgetRegistry } from '@jupyterlab/apputils';
 import { Text, Time } from '@jupyterlab/coreutils';
 import { IDocumentManager } from '@jupyterlab/docmanager';
-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';
@@ -211,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) {
@@ -255,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.
  */
@@ -262,6 +282,7 @@ const plugins = [
     checkpoints,
     kernelLogo,
     kernelStatus,
-    scrollOutput
+    scrollOutput,
+    notebookToolsWidget
 ];
 export default plugins;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter-notebook/notebook-extension",
-  "version": "7.0.0-alpha.5",
+  "version": "7.0.0-alpha.7",
   "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.5",
-    "@jupyterlab/application": "^4.0.0-alpha.10",
-    "@jupyterlab/apputils": "^4.0.0-alpha.10",
-    "@jupyterlab/cells": "^4.0.0-alpha.10",
-    "@jupyterlab/docmanager": "^4.0.0-alpha.10",
-    "@jupyterlab/notebook": "^4.0.0-alpha.10",
-    "@jupyterlab/settingregistry": "^4.0.0-alpha.10",
-    "@jupyterlab/translation": "^4.0.0-alpha.10",
-    "@lumino/polling": "^1.10.0",
-    "@lumino/widgets": "^1.32.0"
+    "@jupyter-notebook/application": "^7.0.0-alpha.7",
+    "@jupyterlab/application": "^4.0.0-alpha.15",
+    "@jupyterlab/apputils": "^4.0.0-alpha.15",
+    "@jupyterlab/cells": "^4.0.0-alpha.15",
+    "@jupyterlab/docmanager": "^4.0.0-alpha.15",
+    "@jupyterlab/notebook": "^4.0.0-alpha.15",
+    "@jupyterlab/settingregistry": "^4.0.0-alpha.15",
+    "@jupyterlab/translation": "^4.0.0-alpha.15",
+    "@lumino/polling": "^2.0.0-alpha.6",
+    "@lumino/widgets": "^2.0.0-alpha.6"
   },
   "devDependencies": {
-    "rimraf": "~3.0.0",
-    "typescript": "~4.6.3"
+    "rimraf": "^3.0.2",
+    "typescript": "~4.7.3"
   },
   "publishConfig": {
     "access": "public"

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,13 +61,91 @@ 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-WindowedPanel-window > *:last-child {
+  padding-bottom: calc(2 * var(--jp-notebook-padding));
+}
+
+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 rgb(87 87 87 / 20%);
+  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']
@@ -42,26 +157,7 @@ body[data-notebook='notebooks']
   bottom: 0;
   left: 0;
   right: 0;
-  box-shadow: 0px 0px 12px 1px rgb(87 87 87 / 20%);
-  margin-bottom: -11px;
-}
-
-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-Notebook.jp-mod-scrollPastEnd::after {
-  background: var(--jp-layout-color0);
-  min-height: var(--jp-notebook-padding);
-  box-shadow: 0px 0px 12px 1px rgb(87 87 87 / 20%);
+  box-shadow: 0px 0px 12px 1px var(--jp-shadow-umbra-color);
 }
 
 body[data-notebook='notebooks']
@@ -77,35 +173,7 @@ body[data-notebook='notebooks']
   width: 11px;
 }
 
-body[data-notebook='notebooks']
-  .jp-Notebook
-  .jp-Notebook-cell:not(:first-child)::before {
-  box-shadow: -11px 0 11px -11px rgb(87 87 87 / 20%) inset;
-  left: -11px;
-}
-
-body[data-notebook='notebooks']
-  .jp-Notebook
-  .jp-Notebook-cell:not(:first-child)::after {
-  box-shadow: 12px 0 11px -11px rgb(87 87 87 / 20%) inset;
-  right: -11px;
-}
-
-/* Cell toolbar adjustements */
-
-body[data-notebook='notebooks'] .jp-cell-toolbar {
-  background: unset;
-  top: unset;
-  box-shadow: unset;
-}
-
-@media only screen and (max-width: 760px) {
-  body[data-notebook='notebooks'] .jp-cell-toolbar {
-    top: 5px;
-  }
-}
-
-/* ---- */
+/* Additional customizations of the components on the notebook page */
 
 .jp-NotebookKernelLogo {
   flex: 0 0 auto;
@@ -186,13 +254,3 @@ body[data-notebook='notebooks'] .jp-cell-toolbar {
   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;
-}