Merge pull request #402 from jasongrout/jitter

Fixes output areas to work well with @interact

jupyterlab/package.json

@@ -10,7 +10,7 @@
     "font-awesome": "^4.6.1",
     "material-design-icons": "^2.2.3",
     "jupyter-js-services": "^0.15.1",
-    "jupyter-js-widgets-labextension": "^0.0.7",
+    "jupyter-js-widgets-labextension": "0.0.9",
     "jupyterlab": "file:../",
     "phosphide": "^0.10.0"
   },

src/notebook/index.css

@@ -110,3 +110,9 @@
   -webkit-user-select: text;
   -ms-user-select: text;
 }
+
+/* If we have two nested output areas (for example, as with output widgets),
+   then the inner output looks weird with a prompt, so we hide it. */
+.jp-Output .jp-Output .jp-Output-prompt {
+  display: none;
+}

src/notebook/output-area/widget.ts

@@ -341,6 +341,16 @@ class OutputAreaWidget extends Widget {
       break;
     case ListChangeType.Replace:
       // Only "clear" is supported by the model.
+
+      // When an output area is cleared and then quickly replaced with new content
+      // (as happens with @interact in widgets, for example), the quickly changing
+      // height can make the page jitter. We introduce a small delay in the minimum height
+      // to prevent this jitter.
+      let rect = this.node.getBoundingClientRect()
+      let oldHeight = this.node.style.minHeight;
+      this.node.style.minHeight = `${rect.height}px`;
+      setTimeout(() => { this.node.style.minHeight = oldHeight; }, 50);
+
       let oldValues = args.oldValue as nbformat.IOutput[];
       for (let i = args.oldIndex; i < oldValues.length; i++) {
         this._removeChild(args.oldIndex);