@jupyter-notebook/notebook-extension 7.0.0-alpha.4 → 7.0.0-alpha.6

package/lib/index.js

@@ -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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter-notebook/notebook-extension",
-  "version": "7.0.0-alpha.4",
+  "version": "7.0.0-alpha.6",
   "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.4",
-    "@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.6",
+    "@jupyterlab/application": "^4.0.0-alpha.14",
+    "@jupyterlab/apputils": "^4.0.0-alpha.14",
+    "@jupyterlab/cells": "^4.0.0-alpha.14",
+    "@jupyterlab/docmanager": "^4.0.0-alpha.14",
+    "@jupyterlab/notebook": "^4.0.0-alpha.14",
+    "@jupyterlab/settingregistry": "^4.0.0-alpha.14",
+    "@jupyterlab/translation": "^4.0.0-alpha.14",
+    "@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,42 +61,126 @@ 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 {
-  background: var(--jp-layout-color0);
-  min-height: 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) {
-  body[data-notebook='notebooks'] .jp-cell-toolbar {
-    top: 5px;
+  /* 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);
+  /* TODO: remove when https://github.com/jupyterlab/jupyterlab/pull/13154 is released */
+  width: unset;
+}
+
+body[data-notebook='notebooks'] .jp-WindowedPanel-inner {
+  /* TODO: remove when https://github.com/jupyterlab/jupyterlab/pull/13157 is released */
+  width: unset;
+}
+
+/* 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;
@@ -140,13 +261,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;
-}