Automatically check additional views for memory leaks on navigation

e2e/tests/performance/memory/navigation.memory.perf.spec.js

@@ -60,6 +60,96 @@
     await expect(page.locator('a:has-text("Memory Leak Detection")')).toBeVisible();
   });
 
+  test('gauge', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'gauge-single-1hz-swg', {
+      timeout: NAV_LEAK_TIMEOUT
+    });
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('plan', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'plan-generated', {
+      timeout: NAV_LEAK_TIMEOUT
+    });
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('time list', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'time-list', {
+      timeout: NAV_LEAK_TIMEOUT
+    });
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('scatter', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'scatter-plot-single-1hz-swg', {
+      timeout: NAV_LEAK_TIMEOUT
+    });
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('graph', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'graph-single-1hz-swg', {
+      timeout: NAV_LEAK_TIMEOUT
+    });
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('gantt chart', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'gantt-chart', {
+      timeout: NAV_LEAK_TIMEOUT
+    });
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('clock', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'clock', {
+      timeout: NAV_LEAK_TIMEOUT
+    });
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('timer', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'timer-far-future', {
+      timeout: NAV_LEAK_TIMEOUT
+    });
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('web page (nasa.gov)', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'web-page', {
+      timeout: NAV_LEAK_TIMEOUT
+    });
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
+  test('Complex Display Layout', async ({ page }) => {
+    const result = await navigateToObjectAndDetectMemoryLeak(page, 'complex-display-layout', {
+      timeout: NAV_LEAK_TIMEOUT
+    });
+
+    // If we got here without timing out, then the root view object was garbage collected and no memory leak was detected.
+    expect(result).toBe(true);
+  });
+
   test('plot view', async ({ page }) => {
     const result = await navigateToObjectAndDetectMemoryLeak(page, 'overlay-plot-single-1hz-swg', {
       timeout: NAV_LEAK_TIMEOUT

src/plugins/charts/bar/BarGraphPlot.vue

@@ -99,13 +99,16 @@ export default {
   },
   beforeUnmount() {
     if (this.plotResizeObserver) {
+      this.plotResizeObserver.unobserve(this.$refs.plotWrapper);
       this.plotResizeObserver.disconnect();
       clearTimeout(this.resizeTimer);
     }
 
     if (this.removeBarColorListener) {
       this.removeBarColorListener();
     }
+
+    Plotly.purge(this.$refs.plot);
   },
   methods: {
     getAxisMinMax(axis) {

src/plugins/charts/bar/inspector/BarGraphOptions.vue

@@ -26,7 +26,7 @@
       <li>
         <series-options
           v-for="series in plotSeries"
-          :key="series.key"
+          :key="series.keyString"
           :item="series"
           :color-palette="colorPalette"
         />

src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue

@@ -131,6 +131,8 @@ export default {
     if (this.unobserveColorChanges) {
       this.unobserveColorChanges();
     }
+
+    Plotly.purge(this.$refs.plot);
   },
   methods: {
     getUnderlayPlotData() {