Exclude webgl block viz from SSR rendering

frontend/src/app/components/block-overview-graph/block-overview-graph.component.html

@@ -1,7 +1,7 @@
 
 <div class="grid-align" [style.gridTemplateColumns]="'repeat(auto-fit, ' + resolution + 'px)'">
   <div class="block-overview-graph">
-    <canvas class="block-overview-canvas" [class.clickable]="!!hoverTx" #blockCanvas></canvas>
+    <canvas *browserOnly class="block-overview-canvas" [class.clickable]="!!hoverTx" #blockCanvas></canvas>
     <div class="loader-wrapper" [class.hidden]="(!isLoading || disableSpinner) && !unavailable">
       <div *ngIf="!unavailable" class="spinner-border ml-3 loading" role="status"></div>
       <div *ngIf="!isLoading && unavailable" class="ml-3" i18n="block.not-available">not available</div>

frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts

@@ -94,6 +94,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   }
 
   ngAfterViewInit(): void {
+    if (this.canvas) {
       this.canvas.nativeElement.addEventListener('webglcontextlost', this.handleContextLost, false);
       this.canvas.nativeElement.addEventListener('webglcontextrestored', this.handleContextRestored, false);
       this.gl = this.canvas.nativeElement.getContext('webgl');
@@ -103,6 +104,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
         this.resizeCanvas();
       }
     }
+  }
 
   ngOnChanges(changes): void {
     if (changes.orientation || changes.flip) {
@@ -142,9 +144,11 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
       cancelAnimationFrame(this.animationFrameRequest);
       clearTimeout(this.animationHeartBeat);
     }
+    if (this.canvas) {
       this.canvas.nativeElement.removeEventListener('webglcontextlost', this.handleContextLost);
       this.canvas.nativeElement.removeEventListener('webglcontextrestored', this.handleContextRestored);
     }
+  }
 
   clear(direction): void {
     this.exit(direction);
@@ -209,6 +213,10 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   }
 
   initCanvas(): void {
+    if (!this.canvas || !this.gl) {
+      return;
+    }
+
     this.gl.clearColor(0.0, 0.0, 0.0, 0.0);
     this.gl.clear(this.gl.COLOR_BUFFER_BIT);
 
@@ -262,6 +270,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
 
   @HostListener('window:resize', ['$event'])
   resizeCanvas(): void {
+    if (this.canvas) {
       this.cssWidth = this.canvas.nativeElement.offsetParent.clientWidth;
       this.cssHeight = this.canvas.nativeElement.offsetParent.clientHeight;
       this.displayWidth = window.devicePixelRatio * this.cssWidth;
@@ -282,6 +291,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
         this.start();
       }
     }
+  }
 
   compileShader(src, type): WebGLShader {
     if (!this.gl) {
@@ -406,6 +416,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
 
   @HostListener('pointerup', ['$event'])
   onClick(event) {
+    if (!this.canvas) {
+      return;
+    }
     if (event.target === this.canvas.nativeElement && event.pointerType === 'touch') {
       this.setPreviewTx(event.offsetX, event.offsetY, true);
     } else if (event.target === this.canvas.nativeElement) {
@@ -417,6 +430,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
 
   @HostListener('pointermove', ['$event'])
   onPointerMove(event) {
+    if (!this.canvas) {
+      return;
+    }
     if (event.target === this.canvas.nativeElement) {
       this.setPreviewTx(event.offsetX, event.offsetY, false);
     } else {

frontend/src/app/components/block/block.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ViewChildren, QueryList } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChildren, QueryList, Inject, PLATFORM_ID } from '@angular/core';
 import { Location } from '@angular/common';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ElectrsApiService } from '../../services/electrs-api.service';
@@ -17,6 +17,7 @@ import { seoDescriptionNetwork } from '../../shared/common.utils';
 import { PriceService, Price } from '../../services/price.service';
 import { CacheService } from '../../services/cache.service';
 import { ServicesApiServices } from '../../services/services-api.service';
+import { isPlatformServer } from '@angular/common';
 
 @Component({
   selector: 'app-block',
@@ -108,8 +109,9 @@ export class BlockComponent implements OnInit, OnDestroy {
     private priceService: PriceService,
     private cacheService: CacheService,
     private servicesApiService: ServicesApiServices,
+    @Inject(PLATFORM_ID) private platformId: Object,
   ) {
-    this.webGlEnabled = detectWebGL();
+    this.webGlEnabled = isPlatformServer(this.platformId) || detectWebGL();
   }
 
   ngOnInit() {

frontend/src/app/components/mempool-block/mempool-block.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Inject, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
+import { detectWebGL } from '../../shared/graphs.utils';
 import { StateService } from '../../services/state.service';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { switchMap, map, tap, filter } from 'rxjs/operators';
@@ -7,6 +8,7 @@ import { Observable, BehaviorSubject } from 'rxjs';
 import { SeoService } from '../../services/seo.service';
 import { seoDescriptionNetwork } from '../../shared/common.utils';
 import { WebsocketService } from '../../services/websocket.service';
+import { isPlatformServer } from '@angular/common';
 
 @Component({
   selector: 'app-mempool-block',
@@ -29,8 +31,9 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
     private seoService: SeoService,
     private websocketService: WebsocketService,
     private cd: ChangeDetectorRef,
+    @Inject(PLATFORM_ID) private platformId: Object,
   ) {
-    this.webGlEnabled = detectWebGL();
+    this.webGlEnabled = isPlatformServer(this.platformId) || detectWebGL();
   }
 
   ngOnInit(): void {
@@ -93,9 +96,3 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
     this.previewTx = event;
   }
 }
-
-function detectWebGL() {
-  const canvas = document.createElement('canvas');
-  const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
-  return (gl && gl instanceof WebGLRenderingContext);
-}