linked time: add start and end value column to data table (tensorflow#5879)

When we launch linked time we will be allowing a range selection. The data table needs to be able to handle range values when in that mode. This change adds the Start Value and End Value columns so the user knows which step is selected for each run.

Author: JamesHollyer

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

@@ -292,6 +292,15 @@ export class ScalarCardComponent<Downloader> {
               }
               selectedStepData.END_STEP = closestEndPoint.step;
               continue;
+            case ColumnHeaders.START_VALUE:
+              selectedStepData.START_VALUE = closestStartPoint.value;
+              continue;
+            case ColumnHeaders.END_VALUE:
+              if (!closestEndPoint) {
+                continue;
+              }
+              selectedStepData.END_VALUE = closestEndPoint.value;
+              continue;
             default:
               continue;
           }

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

@@ -429,6 +429,8 @@ export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
         } else {
           headers.push(ColumnHeaders.RUN);
           headers.push(ColumnHeaders.VALUE_CHANGE);
+          headers.push(ColumnHeaders.START_VALUE);
+          headers.push(ColumnHeaders.END_VALUE);
           headers.push(ColumnHeaders.START_STEP);
           headers.push(ColumnHeaders.END_STEP);
         }

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

@@ -2510,13 +2510,17 @@ describe('scalar card', () => {
           VALUE_CHANGE: 19,
           START_STEP: 1,
           END_STEP: 3,
+          START_VALUE: 1,
+          END_VALUE: 20,
         },
         {
           COLOR: '#fff',
           RUN: 'run2',
           VALUE_CHANGE: 24,
           START_STEP: 1,
           END_STEP: 3,
+          START_VALUE: 1,
+          END_VALUE: 25,
         },
       ]);
     }));

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

@@ -87,6 +87,8 @@ export enum ColumnHeaders {
   VALUE_CHANGE = 'VALUE_CHANGE',
   START_STEP = 'START_STEP',
   END_STEP = 'END_STEP',
+  START_VALUE = 'START_VALUE',
+  END_VALUE = 'END_VALUE',
 }
 
 /**

tensorboard/webapp/widgets/data_table/data_table_component.ts

@@ -58,6 +58,10 @@ export class DataTableComponent {
         return 'Start Step';
       case ColumnHeaders.END_STEP:
         return 'End Step';
+      case ColumnHeaders.START_VALUE:
+        return 'Start';
+      case ColumnHeaders.END_VALUE:
+        return 'End';
       default:
         return '';
     }
@@ -126,6 +130,20 @@ export class DataTableComponent {
         return intlNumberFormatter.formatShort(
           selectedStepRunData.END_STEP as number
         );
+      case ColumnHeaders.START_VALUE:
+        if (selectedStepRunData.START_VALUE === undefined) {
+          return '';
+        }
+        return intlNumberFormatter.formatShort(
+          selectedStepRunData.START_VALUE as number
+        );
+      case ColumnHeaders.END_VALUE:
+        if (selectedStepRunData.END_VALUE === undefined) {
+          return '';
+        }
+        return intlNumberFormatter.formatShort(
+          selectedStepRunData.END_VALUE as number
+        );
       default:
         return '';
     }

tensorboard/webapp/widgets/data_table/data_table_test.ts

@@ -74,6 +74,8 @@ describe('data table', () => {
         ColumnHeaders.VALUE_CHANGE,
         ColumnHeaders.START_STEP,
         ColumnHeaders.END_STEP,
+        ColumnHeaders.START_VALUE,
+        ColumnHeaders.END_VALUE,
       ],
     });
     fixture.detectChanges();
@@ -88,6 +90,8 @@ describe('data table', () => {
     expect(headerElements[5].nativeElement.innerText).toBe('Value Change');
     expect(headerElements[6].nativeElement.innerText).toBe('Start Step');
     expect(headerElements[7].nativeElement.innerText).toBe('End Step');
+    expect(headerElements[8].nativeElement.innerText).toBe('Start');
+    expect(headerElements[9].nativeElement.innerText).toBe('End');
   });
 
   it('displays data in order', () => {
@@ -100,6 +104,8 @@ describe('data table', () => {
         ColumnHeaders.VALUE_CHANGE,
         ColumnHeaders.START_STEP,
         ColumnHeaders.END_STEP,
+        ColumnHeaders.START_VALUE,
+        ColumnHeaders.END_VALUE,
       ],
       data: [
         {
@@ -110,6 +116,8 @@ describe('data table', () => {
           VALUE_CHANGE: 20,
           START_STEP: 5,
           END_STEP: 30,
+          START_VALUE: 13,
+          END_VALUE: 23,
         },
       ],
     });
@@ -125,6 +133,8 @@ describe('data table', () => {
     expect(dataElements[5].nativeElement.innerText).toBe(' 20'); // space before the value is kept for down or up arrow
     expect(dataElements[6].nativeElement.innerText).toBe('5');
     expect(dataElements[7].nativeElement.innerText).toBe('30');
+    expect(dataElements[8].nativeElement.innerText).toBe('13');
+    expect(dataElements[9].nativeElement.innerText).toBe('23');
   });
 
   it('displays nothing when no data is available', () => {