From 9ef7969c3b96c3ed8b31ceefdf1364b9831d0b9a Mon Sep 17 00:00:00 2001
From: Brian Dubois <bdubois@google.com>
Date: Mon, 10 Apr 2023 10:50:12 -0400
Subject: [PATCH] Fix safari chart rendering issues.

---
 .../views/card_renderer/scalar_card_component.scss    |  5 +++--
 tensorboard/webapp/widgets/line_chart_v2/lib/BUILD    |  1 +
 .../line_chart_v2/lib/renderer/threejs_renderer.ts    |  2 +-
 tensorboard/webapp/widgets/line_chart_v2/lib/utils.ts | 11 ++++++++---
 .../widgets/line_chart_v2/line_chart_component.scss   |  4 +++-
 .../widgets/line_chart_v2/line_chart_component.ts     |  2 +-
 6 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
index e03d09179a..13939a426f 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
+++ b/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;
   }
 }
 
diff --git a/tensorboard/webapp/widgets/line_chart_v2/lib/BUILD b/tensorboard/webapp/widgets/line_chart_v2/lib/BUILD
index f4751dccde..5cf5b1c9a4 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/lib/BUILD
+++ b/tensorboard/webapp/widgets/line_chart_v2/lib/BUILD
@@ -112,6 +112,7 @@ tf_ts_library(
     visibility = ["//tensorboard:internal"],
     deps = [
         ":internal_types",
+        "@npm//@types/offscreencanvas",
     ],
 )
 
diff --git a/tensorboard/webapp/widgets/line_chart_v2/lib/renderer/threejs_renderer.ts b/tensorboard/webapp/widgets/line_chart_v2/lib/renderer/threejs_renderer.ts
index 49f54006fa..a802fd88fd 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/lib/renderer/threejs_renderer.ts
+++ b/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.
diff --git a/tensorboard/webapp/widgets/line_chart_v2/lib/utils.ts b/tensorboard/webapp/widgets/line_chart_v2/lib/utils.ts
index 75205ac187..a75ca861de 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/lib/utils.ts
+++ b/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,
 };
diff --git a/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.scss b/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.scss
index c6ef0fa12e..157bcd2267 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.scss
+++ b/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%;
diff --git a/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts b/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts
index fa08ea75fb..156321617d 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts
+++ b/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);
   }