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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/lib/index.js +17 -19
  2. package/package.json +13 -13
  3. package/style/base.css +130 -65
package/lib/index.js CHANGED
@@ -211,29 +211,27 @@ const scrollOutput = {
211
211
  const scroll = height > lineHeight * autoScrollThreshold;
212
212
  cell.toggleClass(SCROLLED_OUTPUTS_CLASS, scroll);
213
213
  };
214
+ const handlers = {};
215
+ const setAutoScroll = (cell) => {
216
+ if (cell.model.type === 'code') {
217
+ const codeCell = cell;
218
+ const id = codeCell.model.id;
219
+ autoScroll(codeCell);
220
+ if (handlers[id]) {
221
+ codeCell.outputArea.model.changed.disconnect(handlers[id]);
222
+ }
223
+ handlers[id] = () => autoScroll(codeCell);
224
+ codeCell.outputArea.model.changed.connect(handlers[id]);
225
+ }
226
+ };
214
227
  tracker.widgetAdded.connect((sender, notebook) => {
215
228
  var _a;
216
- (_a = notebook.model) === null || _a === void 0 ? void 0 : _a.cells.changed.connect((sender, changed) => {
217
- // process new cells only
218
- if (!(changed.type === 'add')) {
219
- return;
220
- }
221
- const [cellModel] = changed.newValues;
222
- notebook.content.widgets.forEach(cell => {
223
- if (cell.model.id === cellModel.id && cell.model.type === 'code') {
224
- const codeCell = cell;
225
- codeCell.outputArea.model.changed.connect(() => autoScroll(codeCell));
226
- }
227
- });
228
- });
229
229
  // when the notebook widget is created, process all the cells
230
- // TODO: investigate why notebook.content.fullyRendered is not enough
231
230
  notebook.sessionContext.ready.then(() => {
232
- notebook.content.widgets.forEach(cell => {
233
- if (cell.model.type === 'code') {
234
- autoScroll(cell);
235
- }
236
- });
231
+ notebook.content.widgets.forEach(setAutoScroll);
232
+ });
233
+ (_a = notebook.model) === null || _a === void 0 ? void 0 : _a.cells.changed.connect((sender, args) => {
234
+ notebook.content.widgets.forEach(setAutoScroll);
237
235
  });
238
236
  });
239
237
  if (settingRegistry) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jupyter-notebook/notebook-extension",
3
- "version": "7.0.0-alpha.5",
3
+ "version": "7.0.0-alpha.6",
4
4
  "description": "Jupyter Notebook - Notebook Extension",
5
5
  "homepage": "https://github.com/jupyter/notebook",
6
6
  "bugs": {
@@ -39,20 +39,20 @@
39
39
  "watch": "tsc -b --watch"
40
40
  },
41
41
  "dependencies": {
42
- "@jupyter-notebook/application": "^7.0.0-alpha.5",
43
- "@jupyterlab/application": "^4.0.0-alpha.10",
44
- "@jupyterlab/apputils": "^4.0.0-alpha.10",
45
- "@jupyterlab/cells": "^4.0.0-alpha.10",
46
- "@jupyterlab/docmanager": "^4.0.0-alpha.10",
47
- "@jupyterlab/notebook": "^4.0.0-alpha.10",
48
- "@jupyterlab/settingregistry": "^4.0.0-alpha.10",
49
- "@jupyterlab/translation": "^4.0.0-alpha.10",
50
- "@lumino/polling": "^1.10.0",
51
- "@lumino/widgets": "^1.32.0"
42
+ "@jupyter-notebook/application": "^7.0.0-alpha.6",
43
+ "@jupyterlab/application": "^4.0.0-alpha.14",
44
+ "@jupyterlab/apputils": "^4.0.0-alpha.14",
45
+ "@jupyterlab/cells": "^4.0.0-alpha.14",
46
+ "@jupyterlab/docmanager": "^4.0.0-alpha.14",
47
+ "@jupyterlab/notebook": "^4.0.0-alpha.14",
48
+ "@jupyterlab/settingregistry": "^4.0.0-alpha.14",
49
+ "@jupyterlab/translation": "^4.0.0-alpha.14",
50
+ "@lumino/polling": "^2.0.0-alpha.6",
51
+ "@lumino/widgets": "^2.0.0-alpha.6"
52
52
  },
53
53
  "devDependencies": {
54
- "rimraf": "~3.0.0",
55
- "typescript": "~4.6.3"
54
+ "rimraf": "^3.0.2",
55
+ "typescript": "~4.7.3"
56
56
  },
57
57
  "publishConfig": {
58
58
  "access": "public"
package/style/base.css CHANGED
@@ -6,16 +6,53 @@
6
6
 
7
7
  @import './variables.css';
8
8
 
9
- /* Document oriented look for the notebook (scrollbar to the right of the page) */
9
+ /**
10
+ Document oriented look for the notebook.
11
+ This includes changes to the look and feel of the JupyterLab Notebook
12
+ component like:
13
+ - scrollbar to the right of the page
14
+ - drop shadow on the notebook
15
+ - smaller empty space at the bottom of the notebook
16
+ - compact view on mobile
17
+ */
18
+
19
+ /* Keep the notebook centered on the page */
10
20
 
11
21
  body[data-notebook='notebooks'] .jp-NotebookPanel-toolbar {
12
22
  padding-left: calc(calc(100% - var(--jp-notebook-max-width)) * 0.5);
13
23
  padding-right: calc(calc(100% - var(--jp-notebook-max-width)) * 0.5);
14
24
  }
15
25
 
26
+ body[data-notebook='notebooks'] .jp-Notebook {
27
+ padding-top: unset;
28
+ padding-left: calc(calc(100% - var(--jp-notebook-max-width)) * 0.5);
29
+ padding-right: calc(
30
+ calc(
31
+ 100% - var(--jp-notebook-max-width) - var(--jp-notebook-padding-offset)
32
+ ) * 0.5
33
+ );
34
+ background: var(--jp-layout-color2);
35
+ }
36
+
37
+ body[data-notebook='notebooks'] .jp-WindowedPanel-inner {
38
+ margin-top: var(--jp-notebook-toolbar-margin-bottom);
39
+ }
40
+
41
+ body[data-notebook='notebooks'] .jp-Notebook-cell {
42
+ background: var(--jp-layout-color0);
43
+ padding-left: calc(2 * var(--jp-cell-padding));
44
+ padding-right: calc(2 * var(--jp-cell-padding));
45
+ }
46
+
47
+ /* Empty space at the bottom of the notebook (similar to classic) */
48
+ body[data-notebook='notebooks'] .jp-Notebook.jp-mod-scrollPastEnd::after {
49
+ min-height: 100px;
50
+ }
51
+
52
+ /* Fix background colors */
53
+
16
54
  body[data-notebook='notebooks'] .jp-Notebook > * {
17
55
  background: var(--jp-layout-color0);
18
- padding: var(--jp-notebook-padding);
19
56
  }
20
57
 
21
58
  body[data-notebook='notebooks']
@@ -24,13 +61,98 @@ body[data-notebook='notebooks']
24
61
  background: var(--jp-layout-color0) !important;
25
62
  }
26
63
 
27
- body[data-notebook='notebooks'] .jp-Notebook > *:first-child {
28
- padding-top: var(--jp-notebook-padding-offset);
29
- margin-top: var(--jp-notebook-toolbar-margin-bottom);
64
+ /**
65
+ Extra padding to the first and and last cell of the notebook.
66
+ TODO: revisit when https://github.com/jupyterlab/jupyterlab/issues/13151 is fixed
67
+ */
68
+ .jp-Notebook-cell[data-windowed-list-index='0'] {
69
+ padding-top: calc(2 * var(--jp-notebook-padding));
70
+ }
71
+
72
+ body[data-notebook='notebooks'] .jp-WindowedPanel-window > *:last-child {
73
+ padding-bottom: calc(2 * var(--jp-notebook-padding));
74
+ }
75
+
76
+ body[data-notebook='notebooks']
77
+ .jp-Notebook
78
+ .jp-Notebook-cell:not(:first-child)::before {
79
+ content: ' ';
80
+ height: 100%;
81
+ position: absolute;
82
+ top: 0;
83
+ width: 11px;
84
+ }
85
+
86
+ /* Cell toolbar adjustements */
87
+
88
+ body[data-notebook='notebooks'] .jp-cell-toolbar {
89
+ background: unset;
90
+ box-shadow: unset;
91
+ }
92
+
93
+ body[data-notebook='notebooks']
94
+ .jp-RawCell[data-windowed-list-index='0']
95
+ .jp-cell-toolbar,
96
+ body[data-notebook='notebooks']
97
+ .jp-MarkdownCell[data-windowed-list-index='0']
98
+ .jp-cell-toolbar {
99
+ top: calc(2 * var(--jp-notebook-padding));
100
+ }
101
+
102
+ /** first code cell on mobile
103
+ (keep the selector above the media query)
104
+ */
105
+ body[data-notebook='notebooks']
106
+ .jp-CodeCell[data-windowed-list-index='0']
107
+ .jp-cell-toolbar {
108
+ top: unset;
109
+ }
110
+
111
+ @media only screen and (max-width: 760px) {
112
+ /* first code cell on mobile */
113
+ body[data-notebook='notebooks']
114
+ .jp-CodeCell[data-windowed-list-index='0']
115
+ .jp-cell-toolbar {
116
+ top: var(--jp-notebook-padding);
117
+ }
118
+
119
+ body[data-notebook='notebooks'] .jp-MarkdownCell .jp-cell-toolbar,
120
+ body[data-notebook='notebooks'] .jp-RawCell .jp-cell-toolbar {
121
+ top: calc(0.5 * var(--jp-notebook-padding));
122
+ }
123
+ }
124
+
125
+ /* Mobile View */
126
+
127
+ body[data-format='mobile'] .jp-NotebookCheckpoint {
128
+ display: none;
129
+ }
130
+
131
+ body[data-format='mobile'] .jp-Notebook > *:first-child {
132
+ margin-top: 0;
133
+ }
134
+
135
+ /* Virtual Notebook fixes */
136
+
137
+ body[data-notebook='notebooks'] .jp-WindowedPanel-window {
138
+ background: var(--jp-layout-color0);
139
+ /* TODO: remove when https://github.com/jupyterlab/jupyterlab/pull/13154 is released */
140
+ width: unset;
141
+ }
142
+
143
+ body[data-notebook='notebooks'] .jp-WindowedPanel-inner {
144
+ /* TODO: remove when https://github.com/jupyterlab/jupyterlab/pull/13157 is released */
145
+ width: unset;
146
+ }
147
+
148
+ /* Notebook box shadow */
149
+
150
+ body[data-notebook='notebooks'] .jp-Notebook > *:first-child:not(:last-child) {
151
+ box-shadow: 0px 0px 12px 1px var(--jp-shadow-umbra-color);
30
152
  }
31
153
 
32
154
  body[data-notebook='notebooks'] .jp-Notebook > *:first-child:not(:last-child) {
33
- box-shadow: 0px 0px 12px 1px rgb(87 87 87 / 20%);
155
+ box-shadow: 0px 0px 12px 1px var(--jp-shadow-umbra-color);
34
156
  }
35
157
 
36
158
  body[data-notebook='notebooks']
@@ -42,26 +164,7 @@ body[data-notebook='notebooks']
42
164
  bottom: 0;
43
165
  left: 0;
44
166
  right: 0;
45
- box-shadow: 0px 0px 12px 1px rgb(87 87 87 / 20%);
46
- margin-bottom: -11px;
47
- }
48
-
49
- body[data-notebook='notebooks'] .jp-Notebook {
50
- padding-top: unset;
51
- padding-bottom: unset;
52
- padding-left: calc(calc(100% - var(--jp-notebook-max-width)) * 0.5);
53
- padding-right: calc(
54
- calc(
55
- 100% - var(--jp-notebook-max-width) - var(--jp-notebook-padding-offset)
56
- ) * 0.5
57
- );
58
- background: var(--jp-layout-color2);
59
- }
60
-
61
- body[data-notebook='notebooks'] .jp-Notebook.jp-mod-scrollPastEnd::after {
62
- background: var(--jp-layout-color0);
63
- min-height: var(--jp-notebook-padding);
64
- box-shadow: 0px 0px 12px 1px rgb(87 87 87 / 20%);
167
+ box-shadow: 0px 0px 12px 1px var(--jp-shadow-umbra-color);
65
168
  }
66
169
 
67
170
  body[data-notebook='notebooks']
@@ -77,35 +180,7 @@ body[data-notebook='notebooks']
77
180
  width: 11px;
78
181
  }
79
182
 
80
- body[data-notebook='notebooks']
81
- .jp-Notebook
82
- .jp-Notebook-cell:not(:first-child)::before {
83
- box-shadow: -11px 0 11px -11px rgb(87 87 87 / 20%) inset;
84
- left: -11px;
85
- }
86
-
87
- body[data-notebook='notebooks']
88
- .jp-Notebook
89
- .jp-Notebook-cell:not(:first-child)::after {
90
- box-shadow: 12px 0 11px -11px rgb(87 87 87 / 20%) inset;
91
- right: -11px;
92
- }
93
-
94
- /* Cell toolbar adjustements */
95
-
96
- body[data-notebook='notebooks'] .jp-cell-toolbar {
97
- background: unset;
98
- top: unset;
99
- box-shadow: unset;
100
- }
101
-
102
- @media only screen and (max-width: 760px) {
103
- body[data-notebook='notebooks'] .jp-cell-toolbar {
104
- top: 5px;
105
- }
106
- }
107
-
108
- /* ---- */
183
+ /* Additional customizations of the components on the notebook page */
109
184
 
110
185
  .jp-NotebookKernelLogo {
111
186
  flex: 0 0 auto;
@@ -186,13 +261,3 @@ body[data-notebook='notebooks'] .jp-cell-toolbar {
186
261
  overflow: hidden;
187
262
  white-space: nowrap;
188
263
  }
189
-
190
- /* Mobile View */
191
-
192
- body[data-format='mobile'] .jp-NotebookCheckpoint {
193
- display: none;
194
- }
195
-
196
- body[data-format='mobile'] .jp-Notebook > *:first-child {
197
- margin-top: 0;
198
- }