fix: display and resize plots when not in a lumino context (#1531)

* fix: display and resize plots when not in a lumino context

* chore: fix CI

(cherry picked from commit 55d660d)

examples/Applications/Equity Index Performance/Time Series.ipynb

@@ -4,8 +4,8 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "### US Equity market performance from 1995 to 2020\n",
-    "In this visualization we'll look S&P 500 Index performance from 1995 to 2020. The visualization consists of two charts:\n",
+    "### US Equity market performance from 1995 to 2021\n",
+    "In this visualization we'll look S&P 500 Index performance from 1995 to 2021. The visualization consists of two charts:\n",
     "* Time Series Chart of Index prices\n",
     "* Histogram of the log returns\n",
     "\n",

js/package.json

@@ -71,7 +71,7 @@
     "sinon": "^9.0.2",
     "sinon-chai": "^3.3.0",
     "style-loader": "^1.2.0",
-    "typescript": "^3.5.2",
+    "typescript": "~4.2.0",
     "webpack": "^5",
     "webpack-cli": "^3.3.12"
   },

js/src/Figure.ts

@@ -21,7 +21,7 @@ import * as popperreference from './PopperReference';
 import popper from 'popper.js';
 import * as THREE from 'three';
 import { Dict, WidgetModel, WidgetView } from '@jupyter-widgets/base';
-import { applyAttrs, applyStyles, getLuminoWidget } from './utils';
+import { applyAttrs, applyStyles } from './utils';
 import { Scale } from './Scale';
 import { ScaleModel } from './ScaleModel';
 import { AxisModel } from './AxisModel';
@@ -71,6 +71,29 @@ export class Figure extends widgets.DOMWidgetView {
       this._initial_marks_created_resolve = resolve;
     });
 
+    this.intersectObserver = new IntersectionObserver(
+      (entries: IntersectionObserverEntry[]) => {
+        if (entries[0].isIntersecting) {
+          this.visible = true;
+          this.debouncedRelayout();
+        } else if (entries[0].rootBounds != null) {
+          /* When 'rootBounds' is null, 'isIntersecting' is 'false', but the plot is visible, so only change 'visible'
+           * if rootBonds is set. I can't find any info on this behaviour. */
+          this.visible = false;
+        }
+      },
+      { threshold: 0 }
+    );
+    this.intersectObserver.observe(this.el);
+
+    this.resizeObserver = new ResizeObserver(
+      (entries: ResizeObserverEntry[]) => {
+        this.debouncedRelayout();
+      }
+    );
+
+    this.resizeObserver.observe(this.el);
+
     super.initialize.apply(this, arguments);
   }
 
@@ -324,13 +347,6 @@ export class Figure extends widgets.DOMWidgetView {
     document.body.appendChild(this.tooltip_div.node());
     this.create_listeners();
 
-    // In the classic notebook, we should relayout the figure on
-    // resize of the main window.
-    window.addEventListener('resize', this.debouncedRelayout);
-    this.once('remove', () => {
-      window.removeEventListener('resize', this.debouncedRelayout);
-    });
-
     return Promise.all([mark_views_updated, axis_views_updated]);
   }
 
@@ -735,38 +751,16 @@ export class Figure extends widgets.DOMWidgetView {
     this.plotarea_height = this.height - this.margin.top - this.margin.bottom;
   }
 
-  processPhosphorMessage(msg) {
-    // @ts-ignore: The following line can only compile with ipywidgets 7
-    this._processLuminoMessage(msg, super.processPhosphorMessage);
-  }
-
-  processLuminoMessage(msg) {
-    this._processLuminoMessage(msg, super.processLuminoMessage);
-  }
-
-  _processLuminoMessage(msg, _super) {
-    _super.call(this, msg);
-
-    switch (msg.type) {
-      case 'resize':
-      case 'after-show':
-      case 'after-attach':
-        if (getLuminoWidget(this).isVisible) {
-          this.debouncedRelayout();
-        }
-        break;
-    }
-  }
-
   relayout() {
     const relayoutImpl = () => {
       this.relayoutRequested = false; // reset relayout request
       const figureSize = this.getFigureSize();
 
       if (
-        this.width == figureSize.width &&
+        (this.width == figureSize.width &&
         this.height == figureSize.height &&
-        !this.should_relayout
+        !this.should_relayout) ||
+        !this.visible
       ) {
         // Bypass relayout
         return;
@@ -1014,6 +1008,8 @@ export class Figure extends widgets.DOMWidgetView {
     if (this.tooltip_div !== undefined) {
       this.tooltip_div.remove();
     }
+    this.intersectObserver.disconnect();
+    this.resizeObserver.disconnect();
     return super.remove.apply(this, arguments);
   }
 
@@ -1316,6 +1312,9 @@ export class Figure extends widgets.DOMWidgetView {
   xPaddingArr: { [id: string]: number };
   y_pad_dict: { [id: string]: number };
   yPaddingArr: { [id: string]: number };
+  intersectObserver: IntersectionObserver;
+  resizeObserver: ResizeObserver;
+  visible: boolean;
 
   private dummyNodes: Dict<any> = {};
 
@@ -1325,5 +1324,5 @@ export class Figure extends widgets.DOMWidgetView {
   // this is public for the test framework, but considered a private API
   public _initial_marks_created: Promise<any>;
   private _initial_marks_created_resolve: Function;
-  private should_relayout: boolean = false;
+  private should_relayout = false;
 }

js/yarn.lock

@@ -8844,10 +8844,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
-typescript@^3.5.2:
-  version "3.9.10"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.10.tgz#70f3910ac7a51ed6bef79da7800690b19bf778b8"
-  integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==
+typescript@~4.2.0:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.4.tgz#8610b59747de028fda898a8aef0e103f156d0961"
+  integrity sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==
 
 typescript@~4.1.3:
   version "4.1.6"