Fix safari chart rendering issues. (#6303)

* Motivation for features / changes

I found a couple of problems with scalar line chart rendering in Safari
while investigating
#6280.

* Safari 16.4 introduced limited OffscreenCanvas support. Notably it
does not include 'webgl2' support. We have to be a bit more strict with
our OffscreenCanvas feature detection to check for 'webgl2' support.
* Scalar line charts still would not render in either canvas or svg mode
until the charts were resized manually. We have to adjust our CSS in
order to convince WebKit to render the line chart with the space
available to it. We use 'flex' for this.

* Testing

  I tested in both Safari and Chrome that Canvas/Three.js and SVG
rendering work (using forceSVG=false and forceSVG=true, respectively).

  I imported the changes internally and ran internal presubmits.

  I did not write any more tests because (1) utils.ts is currently not
covered by tests and (2) this is a Safari problem which only has best
effort support.

Author: bmd3k

tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss

@@ -78,6 +78,8 @@ $_title-to-heading-gap: 12px;
 }
 
 .chart-container {
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
 
   mat-spinner {
@@ -94,8 +96,7 @@ $_title-to-heading-gap: 12px;
   }
 
   line-chart {
-    display: block;
-    height: 100%;
+    flex-grow: 1;
   }
 }
 

tensorboard/webapp/widgets/line_chart_v2/lib/BUILD

@@ -112,6 +112,7 @@ tf_ts_library(
     visibility = ["//tensorboard:internal"],
     deps = [
         ":internal_types",
+        "@npm//@types/offscreencanvas",
     ],
 )
 

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

@@ -278,7 +278,7 @@ export class ThreeRenderer implements ObjectRenderer<CacheValue> {
     onContextLost?: EventListener
   ) {
     if (
-      ChartUtils.isOffscreenCanvasSupported() &&
+      ChartUtils.isWebGl2OffscreenCanvasSupported() &&
       canvas instanceof OffscreenCanvas
     ) {
       // THREE.js require the style object which Offscreen canvas lacks.

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

@@ -43,8 +43,13 @@ function isWebGl2Supported(): boolean {
   return cachedIsWebGl2Supported;
 }
 
-function isOffscreenCanvasSupported(): boolean {
-  return self.hasOwnProperty('OffscreenCanvas');
+function isWebGl2OffscreenCanvasSupported(): boolean {
+  if (!self.hasOwnProperty('OffscreenCanvas')) {
+    return false;
+  }
+  // Safari 16.4 rolled out OffscreenCanvas support but without webgl2 support.
+  const context = new OffscreenCanvas(0, 0).getContext('webgl2');
+  return Boolean(context);
 }
 
 function arePolylinesEqual(lineA: Polyline, lineB: Polyline) {
@@ -72,7 +77,7 @@ function areExtentsEqual(extentA: Extent, extentB: Extent): boolean {
 export const ChartUtils = {
   convertRectToExtent,
   isWebGl2Supported,
-  isOffscreenCanvasSupported,
+  isWebGl2OffscreenCanvasSupported,
   arePolylinesEqual,
   areExtentsEqual,
 };

tensorboard/webapp/widgets/line_chart_v2/line_chart_component.scss

@@ -16,7 +16,8 @@ limitations under the License.
 
 :host {
   contain: strict;
-  display: inline-block;
+  display: flex;
+  flex-direction: column;
 
   ::ng-deep .line-chart:has(.horizontal-prospective-area:hover) {
     .x-axis {
@@ -37,6 +38,7 @@ limitations under the License.
 .container {
   background: inherit;
   display: grid;
+  flex-grow: 1;
   height: 100%;
   overflow: hidden;
   width: 100%;

tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts

@@ -397,7 +397,7 @@ export class LineChartComponent
 
     const useWorker =
       rendererType !== RendererType.SVG &&
-      ChartUtils.isOffscreenCanvasSupported();
+      ChartUtils.isWebGl2OffscreenCanvasSupported();
     const klass = useWorker ? WorkerChart : ChartImpl;
     this.lineChart = new klass(params);
   }