Linked Time: Make timeSelection optional in fob controllers (#6005)

* Motivation for features / changes
We would like to be able to enable step selection using a prospective
fob. The prospective fob is currently implemented withing the
fob_controller_component which has a required `timeSelection` parameter.

* Screenshots of UI changes
None

* Detailed steps to verify changes work correctly (as executed by you)
1) Start tensorboard
2) Go to
[http://localhost:6006?enableDataTable=true&enableProspectiveFob=true](http://localhost:6006?enableDataTable=true&enableProspectiveFob=true)
3) View a scalar card
4) Assert that no fobs are shown
5) Enable step selection
6) Assert that a single fob is shown

Author: rileyajones

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

@@ -49,7 +49,7 @@ import {MinMaxStep} from './scalar_card_types';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ScalarCardFobController {
-  @Input() timeSelection!: TimeSelection;
+  @Input() timeSelection?: TimeSelection;
   @Input() scale!: Scale;
   @Input() minMaxHorizontalViewExtend!: [number, number];
   @Input() minMaxStep!: MinMaxStep;
@@ -71,6 +71,9 @@ export class ScalarCardFobController {
   prospectiveStep: number | null = null;
 
   getAxisPositionFromStartStep() {
+    if (!this.timeSelection) {
+      return '';
+    }
     return this.scale.forward(
       this.minMaxHorizontalViewExtend,
       [0, this.axisSize],
@@ -79,13 +82,13 @@ export class ScalarCardFobController {
   }
 
   getAxisPositionFromEndStep() {
-    if (this.timeSelection.end === null) {
+    if (!this.timeSelection?.end) {
       return null;
     }
     return this.scale.forward(
       this.minMaxHorizontalViewExtend,
       [0, this.axisSize],
-      this.timeSelection.end.step
+      this.timeSelection?.end.step ?? this.minMaxStep.maxStep
     );
   }
 

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

@@ -2376,6 +2376,26 @@ describe('scalar card', () => {
           }),
         ]);
       }));
+
+      // TODO(rileyajones) refactor this test with #6006
+      it('does not render fobs when no timeSelection is provided', fakeAsync(() => {
+        store.overrideSelector(getMetricsLinkedTimeSelection, {
+          start: {step: 20},
+          end: null,
+        });
+        const fixture = createComponent('card1');
+        const scalarCardFobController = fixture.debugElement.query(
+          By.directive(ScalarCardFobController)
+        ).componentInstance;
+        delete scalarCardFobController.timeSelection;
+        fixture.detectChanges();
+        const fobController = fixture.debugElement.query(
+          By.directive(CardFobComponent)
+        ).componentInstance;
+
+        expect(fobController.startFobWrapper).toBeUndefined();
+        expect(fobController.endFobWrapper).toBeUndefined();
+      }));
     });
 
     describe('scalar card data table', () => {

tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ng.html

@@ -31,6 +31,7 @@
     #startFobWrapper
     class="time-fob-wrapper"
     [style.transform]="getCssTranslatePxForStartFob()"
+    *ngIf="timeSelection"
   >
     <div
       *ngIf="showExtendedLine"
@@ -48,7 +49,7 @@
   </div>
   <div
     #endFobWrapper
-    *ngIf="timeSelection.end"
+    *ngIf="timeSelection && timeSelection.end"
     class="time-fob-wrapper"
     [style.transform]="getCssTranslatePxForEndFob()"
   >

tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ts

@@ -53,7 +53,7 @@ export class CardFobControllerComponent {
   @ViewChild('prospectiveFobWrapper')
   readonly prospectiveFobWrapper!: ElementRef;
   @Input() axisDirection!: AxisDirection;
-  @Input() timeSelection!: TimeSelection;
+  @Input() timeSelection?: TimeSelection;
   @Input() cardFobHelper!: CardFobGetStepFromPositionHelper;
   @Input() startStepAxisPosition!: number;
   @Input() endStepAxisPosition!: number | null;
@@ -134,7 +134,7 @@ export class CardFobControllerComponent {
     document.removeEventListener('mousemove', this.mouseListener);
     document.removeEventListener('mouseup', this.stopListener);
     this.currentDraggingFob = Fob.NONE;
-    if (this.hasFobMoved) {
+    if (this.hasFobMoved && this.timeSelection) {
       this.onTimeSelectionChanged.emit({
         timeSelection: this.timeSelection,
         affordance: this.affordance,
@@ -149,7 +149,7 @@ export class CardFobControllerComponent {
   }
 
   private shouldSwapFobs(newStep: number) {
-    if (!this.timeSelection.end) {
+    if (!this.timeSelection || !this.timeSelection.end) {
       return false;
     }
     if (this.currentDraggingFob === Fob.END) {
@@ -168,6 +168,9 @@ export class CardFobControllerComponent {
   ): TimeSelection {
     const newTimeSelection = {...timeSelection};
 
+    if (!this.timeSelection) {
+      return newTimeSelection;
+    }
     // Single Selection
     if (!this.timeSelection.end) {
       newTimeSelection.start = {step: newStep};
@@ -211,7 +214,7 @@ export class CardFobControllerComponent {
       newStep = this.cardFobHelper.getStepLowerThanAxisPosition(mousePosition);
     }
 
-    if (newStep === null) {
+    if (newStep === null || !this.timeSelection) {
       return;
     }
 
@@ -267,8 +270,8 @@ export class CardFobControllerComponent {
 
   getDraggingFobStep(): number {
     return this.currentDraggingFob !== Fob.END
-      ? this.timeSelection.start.step
-      : this.timeSelection.end!.step;
+      ? this.timeSelection!.start.step
+      : this.timeSelection!.end!.step;
   }
 
   getMousePositionFromEvent(event: MouseEvent): number {
@@ -281,7 +284,7 @@ export class CardFobControllerComponent {
     // Types empty string in fob.
     if (step === null) {
       // Removes fob on range selection and sets step to minimum on single selection.
-      if (this.timeSelection.end !== null) {
+      if (this.timeSelection!.end !== null) {
         this.onFobRemoved(fob);
       } else {
         // TODO(jieweiwu): sets start step to minum.
@@ -290,7 +293,7 @@ export class CardFobControllerComponent {
       return;
     }
 
-    let newTimeSelection = {...this.timeSelection};
+    let newTimeSelection = {...this.timeSelection!};
     if (fob === Fob.START) {
       newTimeSelection.start = {step};
     } else if (fob === Fob.END) {
@@ -328,16 +331,16 @@ export class CardFobControllerComponent {
     if (fob === Fob.END) {
       this.onTimeSelectionChanged.emit({
         affordance: TimeSelectionAffordance.FOB_REMOVED,
-        timeSelection: {...this.timeSelection, end: null},
+        timeSelection: {...this.timeSelection!, end: null},
       });
       return;
     }
 
-    if (this.timeSelection.end !== null) {
+    if (this.timeSelection!.end !== null) {
       this.onTimeSelectionChanged.emit({
         affordance: TimeSelectionAffordance.FOB_REMOVED,
         timeSelection: {
-          start: this.timeSelection.end,
+          start: this.timeSelection!.end,
           end: null,
         },
       });