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

bqplot · Oct 10, 2022 · d4e0958 · d4e0958
1 parent c09efe1
commit d4e0958
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 38 deletions.
diff --git a/js/package.json b/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"
   },

diff --git a/js/src/Figure.ts b/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);
   }
 
@@ -336,13 +359,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';
@@ -741,29 +757,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
@@ -775,7 +768,10 @@ export class Figure extends DOMWidgetView {
     this.relayoutRequested = false; // reset relayout request
     const figureSize = this.getFigureSize();
 
-    if (this.width == figureSize.width && this.height == figureSize.height) {
+    if (
+      (this.width == figureSize.width && this.height == figureSize.height) ||
+      !this.visible
+    ) {
       // Bypass relayout
       return;
     }
@@ -1010,6 +1006,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);
   }
 
@@ -1352,6 +1350,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;

diff --git a/js/yarn.lock b/js/yarn.lock
@@ -9000,16 +9000,16 @@ 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.1.3:
   version "4.1.6"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.6.tgz#1becd85d77567c3c741172339e93ce2e69932138"
   integrity sha512-pxnwLxeb/Z5SP80JDRzVjh58KsM6jZHRAOtTpS7sXLS4ogXNKC9ANxHHZqLLeVHZN35jCtI4JdmLLbLiC1kBow==
 
+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.31"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"