From ce9e45fbf7103d6e5b6024518909a6081771b2b0 Mon Sep 17 00:00:00 2001
From: Riley Jones <78179109+rileyajones@users.noreply.github.com>
Date: Tue, 13 Dec 2022 03:43:58 +0000
Subject: [PATCH] Linked Time: Replace view encapsulation hack with `::ng-deep`
 (#6103)

## Motivation for features / changes
#6092 was pretty hacky and also didn't work internally

## Technical description of changes
Apparently the pseudo selector ::ng-deep temporarily removes
encapsulation and generally works better anyway.

## Screenshots of UI changes
It works in OSS

![image](https://user-images.githubusercontent.com/78179109/207216000-4993095f-a419-4c10-9463-c57b7420e5dd.png)

It works internally

![image](https://user-images.githubusercontent.com/78179109/207215848-fab8de51-38a6-45b5-a550-2f021306ef77.png)

## Detailed steps to verify changes work correctly (as executed by you)
See #6092
---
 .../line_chart_component.ng.html              |  1 -
 .../line_chart_v2/line_chart_component.scss   |  8 ++++
 .../widgets/line_chart_v2/sub_view/BUILD      |  1 -
 .../sub_view/line_chart_unencapsulated.ts     | 46 -------------------
 .../line_chart_v2/sub_view/sub_view_module.ts |  3 --
 5 files changed, 8 insertions(+), 51 deletions(-)
 delete mode 100644 tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_unencapsulated.ts

diff --git a/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ng.html b/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ng.html
index 44da6e0fd39..3ee1d977938 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ng.html
+++ b/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ng.html
@@ -23,7 +23,6 @@
   #overlayTarget="cdkOverlayOrigin"
   cdkOverlayOrigin
 >
-  <line-chart-unencapsulated></line-chart-unencapsulated>
   <div class="series-view" #seriesView>
     <line-chart-grid-view
       *ngIf="!lineOnly"
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 aed86b925fc..c6ef0fa12e6 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.scss
+++ b/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.scss
@@ -18,6 +18,14 @@ limitations under the License.
   contain: strict;
   display: inline-block;
 
+  ::ng-deep .line-chart:has(.horizontal-prospective-area:hover) {
+    .x-axis {
+      .extent-edit-button {
+        visibility: visible;
+      }
+    }
+  }
+
   .custom-vis {
     // custom-vis shows on top of interactive-view but we still need to give
     // mouse interactions to the interactive-view. Currently, the contract is
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/BUILD b/tensorboard/webapp/widgets/line_chart_v2/sub_view/BUILD
index 8d70c3ecd17..ccff204c9ea 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/BUILD
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/BUILD
@@ -22,7 +22,6 @@ tf_ng_module(
         "line_chart_grid_view.ts",
         "line_chart_interactive_utils.ts",
         "line_chart_interactive_view.ts",
-        "line_chart_unencapsulated.ts",
         "sub_view_module.ts",
     ],
     assets = [
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_unencapsulated.ts b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_unencapsulated.ts
deleted file mode 100644
index e2cde1009a1..00000000000
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_unencapsulated.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/* Copyright 2022 The TensorFlow Authors. All Rights Reserved.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-==============================================================================*/
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-} from '@angular/core';
-
-@Component({
-  selector: 'line-chart-unencapsulated',
-  template: '',
-  styles: [
-    /**
-     * Why this weird hack?
-     * The prospective fob area is absolutely positioned over the XAxis.
-     * This prevents hover events from reaching the XAxis.
-     * The .extent-edit-button should appear when the XAxis is hovered.
-     */
-    `
-      .line-chart:has(.horizontal-prospective-area:hover) {
-        .x-axis {
-          .extent-edit-button {
-            visibility: visible;
-          }
-        }
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  // This prevents the CSS generated from being namespaced thus allowing CSS
-  // to reach into the line_chart_component and card_fob_controller_component
-  encapsulation: ViewEncapsulation.None,
-})
-export class LineChartUnencapsulated {}
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/sub_view_module.ts b/tensorboard/webapp/widgets/line_chart_v2/sub_view/sub_view_module.ts
index e163394a18c..94d3ccce2b6 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/sub_view_module.ts
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/sub_view_module.ts
@@ -22,7 +22,6 @@ import {MatMenuModule} from '@angular/material/menu';
 import {LineChartAxisComponent} from './line_chart_axis_view';
 import {LineChartGridView} from './line_chart_grid_view';
 import {LineChartInteractiveViewComponent} from './line_chart_interactive_view';
-import {LineChartUnencapsulated} from './line_chart_unencapsulated';
 
 /**
  * SubViewModule provides UI elements for a traditional line chart; axes, grid, and
@@ -34,13 +33,11 @@ import {LineChartUnencapsulated} from './line_chart_unencapsulated';
     LineChartAxisComponent,
     LineChartInteractiveViewComponent,
     LineChartGridView,
-    LineChartUnencapsulated,
   ],
   exports: [
     LineChartAxisComponent,
     LineChartInteractiveViewComponent,
     LineChartGridView,
-    LineChartUnencapsulated,
   ],
   imports: [
     CommonModule,