line chart: better WebGL edge case handle

tensorboard/webapp/app_routing/location.ts

@@ -16,12 +16,7 @@ import {Injectable} from '@angular/core';
 import {fromEvent, Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {createURLSearchParamsFromSerializableQueryParams} from './internal_utils';
-import {
-  Navigation,
-  NavigationFromHistory,
-  Route,
-  SerializableQueryParams,
-} from './types';
+import {NavigationFromHistory, Route, SerializableQueryParams} from './types';
 
 export interface LocationInterface {
   getHref(): string;

tensorboard/webapp/widgets/line_chart_v2/lib/renderer/renderer_types.ts

@@ -84,6 +84,12 @@ export interface ObjectRenderer<CacheValue = {}> {
   destroyObject(cachedValue: CacheValue): void;
 
   setUseDarkMode(useDarkMode: boolean): void;
+
+  /**
+   * Disposes rendering context. After invocation, renderer should never be
+   * used.
+   */
+  dispose(): void;
 }
 
 interface PaintOption {

tensorboard/webapp/widgets/line_chart_v2/lib/renderer/svg_renderer.ts

@@ -270,4 +270,8 @@ export class SvgRenderer implements ObjectRenderer<CacheValue> {
       data: vertices,
     };
   }
+
+  dispose() {
+    // noop.
+  }
 }

tensorboard/webapp/widgets/line_chart_v2/lib/renderer/threejs_renderer.ts

@@ -495,4 +495,8 @@ export class ThreeRenderer implements ObjectRenderer<CacheValue> {
   flush() {
     this.renderer.render(this.scene, this.coordinator.getCamera());
   }
+
+  dispose() {
+    this.renderer.dispose();
+  }
 }

tensorboard/webapp/widgets/line_chart_v2/lib/utils.ts

@@ -22,10 +22,22 @@ export function convertRectToExtent(rect: Rect): Extent {
   };
 }
 
-const cachedIsWebGl2Supported = Boolean(
-  self.hasOwnProperty('document') &&
-    document.createElement('canvas').getContext('webgl2')
-);
+let cachedIsWebGl2Supported = false;
+
+{
+  if (
+    self.hasOwnProperty('WebGL2RenderingContext') &&
+    self.hasOwnProperty('document')
+  ) {
+    const canvas = document.createElement('canvas');
+
+    canvas.addEventListener('webglcontextcreationerror', () => {
+      cachedIsWebGl2Supported = false;
+    });
+    const context = canvas.getContext('webgl2');
+    cachedIsWebGl2Supported = Boolean(context);
+  }
+}
 
 export function isWebGl2Supported(): boolean {
   return cachedIsWebGl2Supported;

tensorboard/webapp/widgets/line_chart_v2/lib/worker/message_types.ts

@@ -28,6 +28,7 @@ export enum HostToGuestEvent {
   INIT,
   DOM_RESIZED,
   DARK_MODE_UPDATED,
+  DISPOSED,
 }
 
 export interface InitMessage {
@@ -73,8 +74,13 @@ export interface DarkModeUpdatedMessage {
   useDarkMode: boolean;
 }
 
+export interface DisposeMessage {
+  type: HostToGuestEvent.DISPOSED;
+}
+
 export type HostToGuestMessage =
   | DarkModeUpdatedMessage
+  | DisposeMessage
   | ResizeMessage
   | ScaleUpdateMessage
   | SeriesMetadataChangedMessage

tensorboard/webapp/widgets/line_chart_v2/lib/worker/worker_chart.ts

@@ -80,6 +80,7 @@ export class WorkerChart implements Chart {
   }
 
   dispose() {
+    this.sendMessage({type: HostToGuestEvent.DISPOSED});
     this.workerInstance.free();
     this.txMessagePort.close();
   }

tensorboard/webapp/widgets/line_chart_v2/lib/worker/worker_chart_bridge.ts

@@ -104,6 +104,10 @@ function createPortHandler(port: MessagePort, initMessage: InitMessage) {
         }
         break;
       }
+      case HostToGuestEvent.DISPOSED: {
+        lineChart.dispose();
+        break;
+      }
     }
   };
 }