linked time: Implement fob deselect logic (#5685)

* implement and test deselect logic

* add comment

Author: JamesHollyer

tensorboard/webapp/widgets/linked_time_fob/linked_time_fob_controller_component.ng.html

@@ -34,6 +34,7 @@
       [step]="linkedTime.start.step"
       (mousedown)="startDrag(FobType().START)"
       (stepChange)="stepTyped(FobType().START, $event)"
+      (removeStep)="deselectFob(FobType().START)"
     ></linked-time-fob>
   </div>
   <div
@@ -48,6 +49,7 @@
       [step]="linkedTime.end.step"
       (mousedown)="startDrag(FobType().END)"
       (stepChange)="stepTyped(FobType().END, $event)"
+      (removeStep)="deselectFob(FobType().END)"
     ></linked-time-fob>
   </div>
 </div>

tensorboard/webapp/widgets/linked_time_fob/linked_time_fob_controller_component.ts

@@ -43,6 +43,8 @@ export class LinkedTimeFobControllerComponent {
   @Input() axisDirection!: AxisDirection;
   @Input() linkedTime!: LinkedTime;
   @Input() cardAdapter!: FobCardAdapter;
+
+  @Output() onSelectTimeToggle = new EventEmitter();
   @Output() onSelectTimeChanged = new EventEmitter<LinkedTime>();
 
   private currentDraggingFob: Fob = Fob.NONE;
@@ -189,4 +191,27 @@ export class LinkedTimeFobControllerComponent {
 
     this.onSelectTimeChanged.emit(newLinkedTime);
   }
+
+  /**
+   * When in range selection(which means we have a start and an end
+   * fob) deselecting a fob will leave the remaining fob in place. This means we
+   * switch to single selection. If the end fob is deselected we simply remove
+   * it. However, if the start fob is deselected we must change the end fob to
+   * the start fob before removing the end fob. This gives the effect that the
+   * start fob was remove. Lastly when in single selection deselecting the fob
+   * toggles the feature entirely.
+   */
+  deselectFob(fob: Fob) {
+    if (fob === Fob.END) {
+      this.onSelectTimeChanged.emit({...this.linkedTime, end: null});
+      return;
+    }
+
+    if (this.linkedTime.end !== null) {
+      this.onSelectTimeChanged.emit({start: this.linkedTime.end, end: null});
+      return;
+    }
+
+    this.onSelectTimeToggle.emit();
+  }
 }

tensorboard/webapp/widgets/linked_time_fob/linked_time_fob_controller_test.ts

@@ -33,6 +33,7 @@ import {AxisDirection, FobCardAdapter, LinkedTime} from './linked_time_types';
       [linkedTime]="linkedTime"
       [cardAdapter]="fobCardAdapter"
       (onSelectTimeChanged)="onSelectTimeChanged($event)"
+      (onSelectTimeToggle)="onSelectTimeToggle()"
     ></linked-time-fob-controller>
   `,
 })
@@ -45,10 +46,12 @@ class TestableComponent {
   @Input() fobCardAdapter!: FobCardAdapter;
 
   @Input() onSelectTimeChanged!: (newLinkedTime: LinkedTime) => void;
+  @Input() onSelectTimeToggle!: () => void;
 }
 
 describe('linked_time_fob_controller', () => {
   let onSelectTimeChanged: jasmine.Spy;
+  let onSelectTimeToggle: jasmine.Spy;
   let getHighestStepSpy: jasmine.Spy;
   let getLowestStepSpy: jasmine.Spy;
   let getAxisPositionFromStepSpy: jasmine.Spy;
@@ -106,6 +109,9 @@ describe('linked_time_fob_controller', () => {
     onSelectTimeChanged = jasmine.createSpy();
     fixture.componentInstance.onSelectTimeChanged = onSelectTimeChanged;
 
+    onSelectTimeToggle = jasmine.createSpy();
+    fixture.componentInstance.onSelectTimeToggle = onSelectTimeToggle;
+
     return fixture;
   }
 
@@ -671,4 +677,56 @@ describe('linked_time_fob_controller', () => {
       });
     });
   });
+  describe('deselecting fob', () => {
+    it('fires onSelectTimeToggle when in single selection', () => {
+      const fixture = createComponent({
+        linkedTime: {start: {step: 1}, end: null},
+      });
+      fixture.detectChanges();
+
+      const deselectButton = fixture.debugElement.query(
+        By.css('linked-time-fob.startFob button')
+      );
+      deselectButton.triggerEventHandler('click', {});
+      fixture.detectChanges();
+
+      expect(onSelectTimeToggle).toHaveBeenCalledOnceWith();
+    });
+
+    it('fires onSelectTimeChanged to remove end fob when end fob is deselected', () => {
+      const fixture = createComponent({
+        linkedTime: {start: {step: 1}, end: {step: 3}},
+      });
+      fixture.detectChanges();
+
+      const deselectButton = fixture.debugElement.query(
+        By.css('linked-time-fob.endFob button')
+      );
+      deselectButton.triggerEventHandler('click', {});
+      fixture.detectChanges();
+
+      expect(onSelectTimeChanged).toHaveBeenCalledOnceWith({
+        start: {step: 1},
+        end: null,
+      });
+    });
+
+    it('fires onSelectTimeChanged to change the start fob step to the current end fob step and the end fob step to null when start fob is deselected in a range selection', () => {
+      const fixture = createComponent({
+        linkedTime: {start: {step: 1}, end: {step: 3}},
+      });
+      fixture.detectChanges();
+
+      const deselectButton = fixture.debugElement.query(
+        By.css('linked-time-fob.startFob button')
+      );
+      deselectButton.triggerEventHandler('click', {});
+      fixture.detectChanges();
+
+      expect(onSelectTimeChanged).toHaveBeenCalledOnceWith({
+        start: {step: 3},
+        end: null,
+      });
+    });
+  });
 });