Skip to content

Commit b457b5f

Browse files
authored
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
1 parent 1675de9 commit b457b5f

File tree

5 files changed

+8
-51
lines changed

5 files changed

+8
-51
lines changed

tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ng.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
#overlayTarget="cdkOverlayOrigin"
2424
cdkOverlayOrigin
2525
>
26-
<line-chart-unencapsulated></line-chart-unencapsulated>
2726
<div class="series-view" #seriesView>
2827
<line-chart-grid-view
2928
*ngIf="!lineOnly"

tensorboard/webapp/widgets/line_chart_v2/line_chart_component.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,14 @@ limitations under the License.
1818
contain: strict;
1919
display: inline-block;
2020

21+
::ng-deep .line-chart:has(.horizontal-prospective-area:hover) {
22+
.x-axis {
23+
.extent-edit-button {
24+
visibility: visible;
25+
}
26+
}
27+
}
28+
2129
.custom-vis {
2230
// custom-vis shows on top of interactive-view but we still need to give
2331
// mouse interactions to the interactive-view. Currently, the contract is

tensorboard/webapp/widgets/line_chart_v2/sub_view/BUILD

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ tf_ng_module(
2222
"line_chart_grid_view.ts",
2323
"line_chart_interactive_utils.ts",
2424
"line_chart_interactive_view.ts",
25-
"line_chart_unencapsulated.ts",
2625
"sub_view_module.ts",
2726
],
2827
assets = [

tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_unencapsulated.ts

Lines changed: 0 additions & 46 deletions
This file was deleted.

tensorboard/webapp/widgets/line_chart_v2/sub_view/sub_view_module.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import {MatMenuModule} from '@angular/material/menu';
2222
import {LineChartAxisComponent} from './line_chart_axis_view';
2323
import {LineChartGridView} from './line_chart_grid_view';
2424
import {LineChartInteractiveViewComponent} from './line_chart_interactive_view';
25-
import {LineChartUnencapsulated} from './line_chart_unencapsulated';
2625

2726
/**
2827
* SubViewModule provides UI elements for a traditional line chart; axes, grid, and
@@ -34,13 +33,11 @@ import {LineChartUnencapsulated} from './line_chart_unencapsulated';
3433
LineChartAxisComponent,
3534
LineChartInteractiveViewComponent,
3635
LineChartGridView,
37-
LineChartUnencapsulated,
3836
],
3937
exports: [
4038
LineChartAxisComponent,
4139
LineChartInteractiveViewComponent,
4240
LineChartGridView,
43-
LineChartUnencapsulated,
4441
],
4542
imports: [
4643
CommonModule,

0 commit comments

Comments
 (0)