Fix safari chart rendering issues.

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

@@ -91,6 +91,8 @@ $_data_table_initial_height: 100px;
 }
 
 .chart-container {
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
   overflow: hidden;
   resize: vertical;
@@ -109,8 +111,7 @@ $_data_table_initial_height: 100px;
   }
 
   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);
   }