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

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

@@ -5,7 +5,7 @@
    "metadata": {},
    "source": [
     "### 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 visulization consists of two charts:\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

@@ -73,7 +73,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

@@ -28,7 +28,7 @@ import { Scale, ScaleModel } from 'bqscales';
 
 import * as popperreference from './PopperReference';
 import popper from 'popper.js';
-import { applyAttrs, applyStyles, getLuminoWidget } from './utils';
+import { applyAttrs, applyStyles } from './utils';
 import { AxisModel } from './AxisModel';
 import { Mark } from './Mark';
 import { MarkModel } from './MarkModel';
@@ -74,6 +74,29 @@ export class Figure extends 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);
   }
 
@@ -339,13 +362,6 @@ export class Figure extends 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);
-    });
-
     this.toolbar_div = this.create_toolbar();
     if (this.model.get('display_toolbar')) {
       this.toolbar_div.node().style.display = 'unset';
@@ -744,29 +760,6 @@ export class Figure extends 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() {
     if (!this.relayoutRequested) {
       this.relayoutRequested = true; // avoid scheduling a relayout twice
@@ -779,9 +772,10 @@ export class Figure extends DOMWidgetView {
     const figureSize = this.getFigureSize();
 
     if (
-      this.width == figureSize.width &&
-      this.height == figureSize.height &&
-      !this.should_relayout
+      (this.width == figureSize.width &&
+        this.height == figureSize.height &&
+        !this.should_relayout) ||
+      !this.visible
     ) {
       // Bypass relayout
       return;
@@ -1018,6 +1012,8 @@ export class Figure extends DOMWidgetView {
     if (this.tooltip_div !== undefined) {
       this.tooltip_div.remove();
     }
+    this.intersectObserver.disconnect();
+    this.resizeObserver.disconnect();
     return super.remove.apply(this, arguments);
   }
 
@@ -1360,6 +1356,9 @@ export class Figure extends DOMWidgetView {
   xPaddingArr: { [id: string]: number };
   y_pad_dict: { [id: string]: number };
   yPaddingArr: { [id: string]: number };
+  intersectObserver: IntersectionObserver;
+  resizeObserver: ResizeObserver;
+  visible: boolean;
 
   public webGLCanvas: HTMLCanvasElement;
   public webGLContext: WebGLRenderingContext | null;
@@ -1378,5 +1377,5 @@ export class Figure extends 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

@@ -7558,10 +7558,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==
 
 ua-parser-js@^0.7.30:
   version "0.7.33"

test-environment.yml

@@ -5,7 +5,7 @@ dependencies:
     - pip
     - python
     - nodejs=16
-    - yarn
+    - yarn <2
     - ipywidgets >=8
     - traitlets >=4.3.0
     - traittypes >=0.0.6