From 9ba7ab9975fba6bd73367d04ad24c2e465dba095 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Tue, 22 Aug 2023 00:05:22 +0900
Subject: [PATCH] More robust webgl handling

---
 .../block-overview-graph.component.ts         | 22 +++++++++++++++----
 frontend/src/app/shared/graphs.utils.ts       |  2 +-
 2 files changed, 19 insertions(+), 5 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 634d0f524..c32216db9 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
@@ -70,9 +70,11 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     this.canvas.nativeElement.addEventListener('webglcontextlost', this.handleContextLost, false);
     this.canvas.nativeElement.addEventListener('webglcontextrestored', this.handleContextRestored, false);
     this.gl = this.canvas.nativeElement.getContext('webgl');
-    this.initCanvas();
 
-    this.resizeCanvas();
+    if (this.gl) {
+      this.initCanvas();
+      this.resizeCanvas();
+    }
   }
 
   ngOnChanges(changes): void {
@@ -195,10 +197,16 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     cancelAnimationFrame(this.animationFrameRequest);
     this.animationFrameRequest = null;
     this.running = false;
+    this.gl = null;
   }
 
   handleContextRestored(event): void {
-    this.initCanvas();
+    if (this.canvas?.nativeElement) {
+      this.gl = this.canvas.nativeElement.getContext('webgl');
+      if (this.gl) {
+        this.initCanvas();
+      }
+    }
   }
 
   @HostListener('window:resize', ['$event'])
@@ -224,6 +232,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   }
 
   compileShader(src, type): WebGLShader {
+    if (!this.gl) {
+      return;
+    }
     const shader = this.gl.createShader(type);
 
     this.gl.shaderSource(shader, src);
@@ -237,6 +248,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   }
 
   buildShaderProgram(shaderInfo): WebGLProgram {
+    if (!this.gl) {
+      return;
+    }
     const program = this.gl.createProgram();
 
     shaderInfo.forEach((desc) => {
@@ -273,7 +287,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
       now = performance.now();
     }
     // skip re-render if there's no change to the scene
-    if (this.scene) {
+    if (this.scene && this.gl) {
       /* SET UP SHADER UNIFORMS */
       // screen dimensions
       this.gl.uniform2f(this.gl.getUniformLocation(this.shaderProgram, 'screenSize'), this.displayWidth, this.displayHeight);
diff --git a/frontend/src/app/shared/graphs.utils.ts b/frontend/src/app/shared/graphs.utils.ts
index 488e794c3..b00f56163 100644
--- a/frontend/src/app/shared/graphs.utils.ts
+++ b/frontend/src/app/shared/graphs.utils.ts
@@ -90,7 +90,7 @@ export const download = (href, name) => {
 
 export function detectWebGL(): boolean {
   const canvas = document.createElement('canvas');
-  const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+  const gl = canvas.getContext('webgl');
   return !!(gl && gl instanceof WebGLRenderingContext);
 }