add tests

Author: rileyajones

tensorboard/webapp/core/views/layout_test.ts

@@ -23,7 +23,10 @@ import {provideMockTbStore} from '../../testing/utils';
 import {MouseEventButtons} from '../../util/dom';
 import {sideBarWidthChanged} from '../actions';
 import {State} from '../state';
-import {getSideBarWidthInPercent} from '../store/core_selectors';
+import {
+  getRunsTableFullScreen,
+  getSideBarWidthInPercent,
+} from '../store/core_selectors';
 import {LayoutContainer} from './layout_container';
 
 @Component({
@@ -137,6 +140,15 @@ describe('layout test', () => {
     expect(navEl.styles['width']).toBe('70%');
   });
 
+  it('overrides max width when the runs table full screen is true', () => {
+    store.overrideSelector(getRunsTableFullScreen, true);
+    const fixture = TestBed.createComponent(TestableComponent);
+    fixture.detectChanges();
+
+    const navEl = fixture.debugElement.query(byCss.SIDEBAR_CONTAINER);
+    expect(navEl.styles['width']).toBe('100%');
+  });
+
   describe('interactions', () => {
     function triggerMouseMove(
       fixture: ComponentFixture<TestableComponent>,

tensorboard/webapp/metrics/views/BUILD

@@ -81,9 +81,11 @@ tf_ts_library(
         "//tensorboard/webapp/angular:expect_angular_core_testing",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "//tensorboard/webapp/angular:expect_ngrx_store_testing",
+        "//tensorboard/webapp/core/store",
         "//tensorboard/webapp/feature_flag/store",
         "//tensorboard/webapp/metrics/actions",
         "//tensorboard/webapp/metrics/data_source",
+        "//tensorboard/webapp/metrics/views/main_view",
         "//tensorboard/webapp/runs/views/runs_selector",
         "//tensorboard/webapp/testing:utils",
         "@npm//@angular/core",

tensorboard/webapp/metrics/views/metrics_container_test.ts

@@ -22,6 +22,8 @@ import {getEnableHparamsInTimeSeries} from '../../feature_flag/store/feature_fla
 import {RunsSelectorContainer} from '../../runs/views/runs_selector/runs_selector_container';
 import {provideMockTbStore} from '../../testing/utils';
 import {MetricsDashboardContainer} from './metrics_container';
+import {getRunsTableFullScreen} from '../../core/store/core_selectors';
+import {MainViewContainer} from './main_view/main_view_container';
 
 describe('metrics view', () => {
   let store: MockStore<State>;
@@ -64,4 +66,14 @@ describe('metrics view', () => {
         .showHparamsAndMetrics
     ).toBeFalse();
   });
+
+  it('hides main view when the runs table is full screen is true', () => {
+    store.overrideSelector(getRunsTableFullScreen, true);
+    const fixture = TestBed.createComponent(MetricsDashboardContainer);
+    fixture.detectChanges();
+
+    expect(
+      fixture.debugElement.query(By.directive(MainViewContainer))
+    ).toBeNull();
+  });
 });

tensorboard/webapp/runs/views/runs_table/runs_data_table.scss

@@ -61,7 +61,7 @@ tb-data-table-header-cell {
   // Ensure the button is on the right side then add 2px for the drag target.
   left: calc(100% + 2px);
   top: 0;
-  z-index: 10;
+  z-index: 1;
   display: flex;
   align-items: center;