Skip to content

Commit

Permalink
Linked Time: Replace view encapsulation hack with ::ng-deep (tensor…
Browse files Browse the repository at this point in the history
…flow#6103)

## Motivation for features / changes
tensorflow#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 tensorflow#6092
  • Loading branch information
rileyajones authored and yatbear committed Mar 27, 2023
1 parent 62a54d3 commit ce9e45f
Show file tree
Hide file tree
Showing 5 changed files with 8 additions and 51 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
#overlayTarget="cdkOverlayOrigin"
cdkOverlayOrigin
>
<line-chart-unencapsulated></line-chart-unencapsulated>
<div class="series-view" #seriesView>
<line-chart-grid-view
*ngIf="!lineOnly"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion tensorboard/webapp/widgets/line_chart_v2/sub_view/BUILD
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -34,13 +33,11 @@ import {LineChartUnencapsulated} from './line_chart_unencapsulated';
LineChartAxisComponent,
LineChartInteractiveViewComponent,
LineChartGridView,
LineChartUnencapsulated,
],
exports: [
LineChartAxisComponent,
LineChartInteractiveViewComponent,
LineChartGridView,
LineChartUnencapsulated,
],
imports: [
CommonModule,
Expand Down

0 comments on commit ce9e45f

Please sign in to comment.