From 9f5666f41043d0eb5c34269d39d867fb0d87530d Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Mon, 6 Jan 2025 19:02:24 +0000
Subject: [PATCH] explicitly destroy block scenes

---
 .../block-overview-graph.component.ts                 | 11 +++++++----
 .../block-overview-graph/fast-vertex-array.ts         |  8 ++++++++
 .../app/components/block-view/block-view.component.ts |  3 +++
 frontend/src/app/components/block/block.component.ts  |  6 ++++++
 .../components/eight-blocks/eight-blocks.component.ts |  3 +++
 .../mempool-block-overview.component.ts               |  1 +
 6 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
index 605a9c222..3d6a76531 100644
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
@@ -172,12 +172,17 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   ngOnDestroy(): void {
     if (this.animationFrameRequest) {
       cancelAnimationFrame(this.animationFrameRequest);
-      clearTimeout(this.animationHeartBeat);
     }
+    clearTimeout(this.animationHeartBeat);
     if (this.canvas) {
       this.canvas.nativeElement.removeEventListener('webglcontextlost', this.handleContextLost);
       this.canvas.nativeElement.removeEventListener('webglcontextrestored', this.handleContextRestored);
     }
+    if (this.scene) {
+      this.scene.destroy();
+    }
+    this.vertexArray.destroy();
+    this.vertexArray = null;
     this.themeChangedSubscription?.unsubscribe();
     this.searchSubscription?.unsubscribe();
   }
@@ -490,9 +495,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     if (this.running && this.scene && now <= (this.scene.animateUntil + 500)) {
       this.doRun();
     } else {
-      if (this.animationHeartBeat) {
-        clearTimeout(this.animationHeartBeat);
-      }
+      clearTimeout(this.animationHeartBeat);
       this.animationHeartBeat = window.setTimeout(() => {
         this.start();
       }, 1000);
diff --git a/frontend/src/app/components/block-overview-graph/fast-vertex-array.ts b/frontend/src/app/components/block-overview-graph/fast-vertex-array.ts
index 42439ef8d..98cf7ce4d 100644
--- a/frontend/src/app/components/block-overview-graph/fast-vertex-array.ts
+++ b/frontend/src/app/components/block-overview-graph/fast-vertex-array.ts
@@ -110,4 +110,12 @@ export class FastVertexArray {
   getVertexData(): Float32Array {
     return this.data;
   }
+
+  destroy(): void {
+    this.data = null;
+    this.sprites = null;
+    this.freeSlots = null;
+    this.lastSlot = 0;
+    this.dirty = false;
+  }
 }
diff --git a/frontend/src/app/components/block-view/block-view.component.ts b/frontend/src/app/components/block-view/block-view.component.ts
index 9c316fe1a..19a18383e 100644
--- a/frontend/src/app/components/block-view/block-view.component.ts
+++ b/frontend/src/app/components/block-view/block-view.component.ts
@@ -176,5 +176,8 @@ export class BlockViewComponent implements OnInit, OnDestroy {
     if (this.queryParamsSubscription) {
       this.queryParamsSubscription.unsubscribe();
     }
+    if (this.blockGraph) {
+      this.blockGraph.destroy();
+    }
   }
 }
diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts
index 072e76755..ddcf023ed 100644
--- a/frontend/src/app/components/block/block.component.ts
+++ b/frontend/src/app/components/block/block.component.ts
@@ -428,6 +428,12 @@ export class BlockComponent implements OnInit, OnDestroy {
     this.isAuditEnabledSubscription?.unsubscribe();
     this.oobSubscription?.unsubscribe();
     this.priceSubscription?.unsubscribe();
+    this.blockGraphProjected.forEach(graph => {
+      graph.destroy();
+    });
+    this.blockGraphActual.forEach(graph => {
+      graph.destroy();
+    });
   }
 
   // TODO - Refactor this.fees/this.reward for liquid because it is not
diff --git a/frontend/src/app/components/eight-blocks/eight-blocks.component.ts b/frontend/src/app/components/eight-blocks/eight-blocks.component.ts
index 8ca8437ac..0e0861382 100644
--- a/frontend/src/app/components/eight-blocks/eight-blocks.component.ts
+++ b/frontend/src/app/components/eight-blocks/eight-blocks.component.ts
@@ -162,6 +162,9 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
     this.cacheBlocksSubscription?.unsubscribe();
     this.networkChangedSubscription?.unsubscribe();
     this.queryParamsSubscription?.unsubscribe();
+    this.blockGraphs.forEach(graph => {
+      graph.destroy();
+    });
   }
 
   shiftTestBlocks(): void {
diff --git a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
index fca8b279c..a46be2733 100644
--- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
+++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
@@ -120,6 +120,7 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
   }
 
   ngOnDestroy(): void {
+    this.blockGraph?.destroy();
     this.blockSub.unsubscribe();
     this.timeLtrSubscription.unsubscribe();
     this.websocketService.stopTrackMempoolBlock();