Bug Fix: Prevent Card Fob from dispatching duplicate events when a fo…

…b is removed (tensorflow#5976)

## Motivation for features / changes
tensorflow#5968

## Technical description of changes
The card fob would dispatch a `timeSelectionChanged` event on mouse up
even if the time selection had not changed...

## Detailed steps to verify changes work correctly (as executed by you)
1) Start tensorboard
2) Go to http://localhost:6006
3) Enable step selection
4) Open the console and clear it
5) Dismiss the fob by clicking this button

![image](https://user-images.githubusercontent.com/78179109/195714210-5f1bee4e-fb1b-4c89-ae24-e6933fa004c0.png)

## Alternate designs / implementations considered
Add a `mousedown` event listener to the dismiss button which prevents
propagation. Unfortunately this would prevent clicks starting on the
dismiss button from dragging the fob.

tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ts

@@ -63,6 +63,7 @@ export class CardFobControllerComponent {
     new EventEmitter<TimeSelectionWithAffordance>();
   @Output() onTimeSelectionToggled = new EventEmitter();
 
+  private hasFobMoved: boolean = false;
   private currentDraggingFob: Fob = Fob.NONE;
   private affordance: TimeSelectionAffordance = TimeSelectionAffordance.NONE;
 
@@ -117,11 +118,14 @@ export class CardFobControllerComponent {
     document.removeEventListener('mousemove', this.mouseListener);
     document.removeEventListener('mouseup', this.stopListener);
     this.currentDraggingFob = Fob.NONE;
-    this.onTimeSelectionChanged.emit({
-      timeSelection: this.timeSelection,
-      affordance: this.affordance,
-    });
+    if (this.hasFobMoved) {
+      this.onTimeSelectionChanged.emit({
+        timeSelection: this.timeSelection,
+        affordance: this.affordance,
+      });
+    }
     this.affordance = TimeSelectionAffordance.NONE;
+    this.hasFobMoved = false;
   }
 
   isVertical() {
@@ -202,6 +206,7 @@ export class CardFobControllerComponent {
     this.onTimeSelectionChanged.emit({
       timeSelection: newTimeSelection,
     });
+    this.hasFobMoved = true;
   }
 
   isDraggingLower(position: number, movement: number): boolean {

tensorboard/webapp/widgets/card_fob/card_fob_controller_test.ts

@@ -316,6 +316,34 @@ describe('card_fob_controller', () => {
         affordance: TimeSelectionAffordance.FOB,
       });
     });
+
+    it('does not fire event when time selection does not change', () => {
+      const fixture = createComponent({
+        timeSelection: {start: {step: 2}, end: {step: 3}},
+      });
+      fixture.detectChanges();
+      const fobController = fixture.componentInstance.fobController;
+
+      fobController.startDrag(
+        Fob.END,
+        TimeSelectionAffordance.FOB,
+        new MouseEvent('mouseDown')
+      );
+      expect((fobController as any).currentDraggingFob).toEqual(Fob.END);
+
+      const fakeEvent = new MouseEvent('mousemove', {
+        clientY: 0,
+        movementY: 0,
+      });
+      fobController.mouseMove(fakeEvent);
+      expect((fobController as any).currentDraggingFob).toEqual(Fob.END);
+
+      fixture.detectChanges();
+      fobController.stopDrag();
+      fixture.detectChanges();
+
+      expect(onTimeSelectionChanged).not.toHaveBeenCalled();
+    });
   });
 
   describe('vertical dragging', () => {
@@ -723,13 +751,7 @@ describe('card_fob_controller', () => {
       expect(
         fobController.startFobWrapper.nativeElement.getBoundingClientRect().left
       ).toEqual(2);
-      expect(onTimeSelectionChanged).toHaveBeenCalledWith({
-        timeSelection: {
-          start: {step: 2},
-          end: null,
-        },
-        affordance: TimeSelectionAffordance.FOB,
-      });
+      expect(onTimeSelectionChanged).not.toHaveBeenCalled();
     });
 
     it('does not call getStepLowerThanMousePosition or getStepHigherThanMousePosition when mouse is dragging right but, is left of the fob', () => {
@@ -762,13 +784,7 @@ describe('card_fob_controller', () => {
       expect(
         fobController.startFobWrapper.nativeElement.getBoundingClientRect().left
       ).toEqual(4);
-      expect(onTimeSelectionChanged).toHaveBeenCalledWith({
-        timeSelection: {
-          start: {step: 4},
-          end: null,
-        },
-        affordance: TimeSelectionAffordance.FOB,
-      });
+      expect(onTimeSelectionChanged).not.toHaveBeenCalled();
     });
 
     it('does not move the start fob or call call getStepLowerThanMousePosition or getStepHigherThanMousePosition when mouse is dragging right but, the fob is already on the final step', () => {