time series: move the fit button to header (#4856)

The scalar line chart in the time series has had the feature where we
automatically fit domain to the new data when it is unaltered. However,
because it was hidden inside the overflow menu and because there was no
clear visual indication when the chart will fit to the domain or not, it
was largely confusing. With the recent changes to make it more salient
with `title` and `disabled` on the button, we improved in this area but
was still not too obvious.

To fix this problem, we are now moving the control out of the overflow
menu into the chart header so there is a clearer visual difference
between domains overridden vs. not.

Author: stephanwlee

tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html

@@ -21,6 +21,21 @@
     value="{{ title }}"
   ></tb-truncated-path>
   <span class="controls">
+    <button
+      mat-icon-button
+      [disabled]="!seriesDataList || !seriesDataList.length || (newLineChart && !newLineChart.getIsViewBoxOverridden())"
+      (click)="resetDomain()"
+      [title]="
+            (newLineChart && !newLineChart.getIsViewBoxOverridden()) ?
+                'Line chart is already fitted to data. When data updates, the line chart '
+                + 'will auto fit to its domain.' :
+                'Fit line chart domains to data'
+        "
+      i18n-aria-label="A button that resets line chart domain to the data"
+      aria-label="Fit line chart domains to data"
+    >
+      <mat-icon svgIcon="settings_overscan_24px"></mat-icon>
+    </button>
     <button
       mat-icon-button
       class="pin-button"
@@ -64,22 +79,6 @@
         <mat-icon svgIcon="line_weight_24px"></mat-icon>
         <span>Toggle Y-axis log scale</span>
       </button>
-      <button
-        mat-menu-item
-        [disabled]="!seriesDataList || !seriesDataList.length || (newLineChart && !newLineChart.getIsViewBoxOverridden())"
-        (click)="resetDomain()"
-        [title]="
-            (newLineChart && !newLineChart.getIsViewBoxOverridden) ?
-                'Line chart is already fitted to data. When data updates, the line chart '
-                + 'will auto fit to its domain.' :
-                ''
-        "
-        i18n-aria-label="A button that resets line chart domain to the data"
-        aria-label="Fit line chart domains to data"
-      >
-        <mat-icon svgIcon="settings_overscan_24px"></mat-icon>
-        <span>Fit domain to data</span>
-      </button>
       <button
         mat-menu-item
         (click)="openDataDownloadDialog()"

tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts

@@ -779,13 +779,16 @@ describe('scalar card', () => {
     expect(visibleRunIds).toEqual(['run3']);
   }));
 
-  describe('overflow menu', () => {
-    beforeEach(() => {
+  describe('controls', () => {
+    const ByCss = {
+      FIT_TO_DOMAIN: By.css('[aria-label="Fit line chart domains to data"]'),
+    };
+
+    it('resets domain when user clicks on reset button', fakeAsync(() => {
       const runToSeries = {
-        run1: [
-          {wallTime: 100, value: 1, step: 333},
-          {wallTime: 101, value: 2, step: 555},
-        ],
+        run1: [{wallTime: 100, value: 1, step: 333}],
+        run2: [{wallTime: 100, value: 1, step: 333}],
+        run3: [{wallTime: 100, value: 1, step: 333}],
       };
       provideMockCardRunToSeriesData(
         selectSpy,
@@ -794,31 +797,6 @@ describe('scalar card', () => {
         null /* metadataOverride */,
         runToSeries
       );
-    });
-
-    it('toggles yAxisType when you click on button in overflow menu', fakeAsync(() => {
-      const fixture = createComponent('card1');
-
-      openOverflowMenu(fixture);
-      getMenuButton('Toggle Y-axis log scale on line chart').click();
-      fixture.detectChanges();
-
-      const lineChartEl = fixture.debugElement.query(
-        By.directive(TestableLineChart)
-      );
-      expect(lineChartEl.componentInstance.yAxisType).toBe(YAxisType.LOG);
-
-      openOverflowMenu(fixture);
-      getMenuButton('Toggle Y-axis log scale on line chart').click();
-      fixture.detectChanges();
-
-      expect(lineChartEl.componentInstance.yAxisType).toBe(YAxisType.LINEAR);
-
-      // Clicking on overflow menu and mat button enqueue asyncs. Flush them.
-      flush();
-    }));
-
-    it('resets domain when user clicks on reset button', fakeAsync(() => {
       const fixture = createComponent('card1');
 
       const lineChartEl = fixture.debugElement.query(
@@ -829,14 +807,10 @@ describe('scalar card', () => {
         'resetDomain'
       );
 
-      openOverflowMenu(fixture);
-      getMenuButton('Fit line chart domains to data').click();
+      fixture.debugElement.query(ByCss.FIT_TO_DOMAIN).nativeElement.click();
       fixture.detectChanges();
 
       expect(resetDomainSpy).toHaveBeenCalledTimes(1);
-
-      // Clicking on overflow menu and mat button enqueue asyncs. Flush them.
-      flush();
     }));
 
     it('disables the resetDomain button when there are no runs', fakeAsync(() => {
@@ -850,11 +824,47 @@ describe('scalar card', () => {
       );
       const fixture = createComponent('card1');
 
+      const button = fixture.debugElement.query(ByCss.FIT_TO_DOMAIN);
+      expect(button.properties['disabled']).toBe(true);
+    }));
+  });
+
+  describe('overflow menu', () => {
+    beforeEach(() => {
+      const runToSeries = {
+        run1: [
+          {wallTime: 100, value: 1, step: 333},
+          {wallTime: 101, value: 2, step: 555},
+        ],
+      };
+      provideMockCardRunToSeriesData(
+        selectSpy,
+        PluginType.SCALARS,
+        'card1',
+        null /* metadataOverride */,
+        runToSeries
+      );
+    });
+
+    it('toggles yAxisType when you click on button in overflow menu', fakeAsync(() => {
+      const fixture = createComponent('card1');
+
+      openOverflowMenu(fixture);
+      getMenuButton('Toggle Y-axis log scale on line chart').click();
+      fixture.detectChanges();
+
+      const lineChartEl = fixture.debugElement.query(
+        By.directive(TestableLineChart)
+      );
+      expect(lineChartEl.componentInstance.yAxisType).toBe(YAxisType.LOG);
+
       openOverflowMenu(fixture);
-      const button = getMenuButton('Fit line chart domains to data');
-      expect(button.disabled).toBe(true);
+      getMenuButton('Toggle Y-axis log scale on line chart').click();
+      fixture.detectChanges();
+
+      expect(lineChartEl.componentInstance.yAxisType).toBe(YAxisType.LINEAR);
 
-      // Clicking on overflow menu enqueues async.
+      // Clicking on overflow menu and mat button enqueue asyncs. Flush them.
       flush();
     }));
   });