From 2099f88bafc238cd0276d405b2135ebd041ce94f Mon Sep 17 00:00:00 2001
From: "Maarten A. Breddels" <maartenbreddels@gmail.com>
Date: Thu, 7 Jul 2022 12:07:35 +0200
Subject: [PATCH] fix: clean up resize listener when view gets removed

Fixes #3100

If this is not cleaned up, we see a lot of stacktraces in the JS console:

index.js?v=20220623202309:2 Uncaught (in promise) Error: Resize must be passed a displayed plot div element.
    at index.js?v=20220623202309:2:2385247
    at new Promise (<anonymous>)
    at b.resize (index.js?v=20220623202309:2:2385199)
    at h.autosizeFigure (index.js?v=20220623202309:2:3736430)
    at index.js?v=20220623202309:2:3736222

Also, the destroy methods is renamed to remove. Destroy will never be
called, but remove is.
---
 packages/javascript/jupyterlab-plotly/src/Figure.ts | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/javascript/jupyterlab-plotly/src/Figure.ts b/packages/javascript/jupyterlab-plotly/src/Figure.ts
index 6b0b4a63342..994ff318fc9 100644
--- a/packages/javascript/jupyterlab-plotly/src/Figure.ts
+++ b/packages/javascript/jupyterlab-plotly/src/Figure.ts
@@ -804,6 +804,7 @@ export class FigureModel extends DOMWidgetModel {
  */
 export class FigureView extends DOMWidgetView {
   viewID: string;
+  resizeEventListener: () => void;
 
   /**
    * The perform_render method is called by processPhosphorMessage
@@ -920,10 +921,10 @@ export class FigureView extends DOMWidgetView {
           xaxis: axisHidden,
           yaxis: axisHidden,
         });
-
-        window.addEventListener("resize", function () {
-          that.autosizeFigure();
-        });
+        this.resizeEventListener = () => {
+          this.autosizeFigure();
+        }
+        window.addEventListener("resize", this.resizeEventListener);
         break;
       case "after-attach":
         // Rendering actual figure in the after-attach event allows
@@ -953,8 +954,10 @@ export class FigureView extends DOMWidgetView {
    * Purge Plotly.js data structures from the notebook output display
    * element when the view is destroyed
    */
-  destroy() {
+   remove() {
+    super.remove();
     Plotly.purge(this.el);
+    window.removeEventListener("resize", this.resizeEventListener);
   }
 
   /**