Bug Fix: Emit correct timeSelection when prospective fob is clicked (#6054)

* Motivation for features / changes
When clicking a prospective fob with a value less than the existing fob
both values are set as the maximum.
This only happens when linked time is enabled.
For Googlers https://screenshot.googleplex.com/XbTQfkKUaPkkRGM

* Technical description of changes
This seems to have been caused by setting the start step to a value
which is greater than a end step.

* Screenshots of UI changes
Look! It's fixed!

![26033d1e-dfb0-4205-aee3-992ebbdf6b40](https://user-images.githubusercontent.com/78179109/202323362-50efa253-01ca-49d1-b023-90e58a97270d.gif)


* Detailed steps to verify changes work correctly (as executed by you)
1) Start tensorboard
2) Navigate to
http://localhost:6006?enableLinkedTIme&enableRangeSelection&enableProspectiveFob
3) Enable Linked Time in the settings panel
4) View a scalar card and click someplace on the X Axis to enable step
selection
5) Click someplace to the left of the current fob to enable range
selection
6) Assert that a new fob appears where you clicked

* Alternate designs / implementations considered

Author: rileyajones

tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ts

@@ -382,20 +382,10 @@ export class CardFobControllerComponent {
 
   prospectiveFobClicked(event: Event) {
     event.stopPropagation();
-    if (this.prospectiveStep === null) {
+    const newTimeSelection = this.getProspectiveTimeSelection();
+    if (!newTimeSelection) {
       return;
     }
-    const newTimeSelection = this.timeSelection
-      ? {
-          ...this.timeSelection,
-          end: {
-            step: this.prospectiveStep,
-          },
-        }
-      : {
-          start: {step: this.prospectiveStep},
-          end: null,
-        };
 
     this.onTimeSelectionChanged.emit({
       affordance: TimeSelectionAffordance.FOB_ADDED,
@@ -404,6 +394,31 @@ export class CardFobControllerComponent {
     this.onPrespectiveStepChanged.emit(null);
   }
 
+  private getProspectiveTimeSelection() {
+    if (!this.prospectiveStep) {
+      return;
+    }
+    if (this.timeSelection) {
+      const startStep = Math.min(
+        this.timeSelection.start.step,
+        this.prospectiveStep
+      );
+      const endStep = Math.max(
+        this.timeSelection.start.step,
+        this.prospectiveStep
+      );
+      return {
+        start: {step: startStep},
+        end: {step: endStep},
+      };
+    }
+
+    return {
+      start: {step: this.prospectiveStep},
+      end: null,
+    };
+  }
+
   /**
    * When in range selection(which means we have a start and an end
    * fob) clicking "X" to remove a fob will leave the remaining fob in place.

tensorboard/webapp/widgets/card_fob/card_fob_controller_test.ts

@@ -1347,7 +1347,7 @@ describe('card_fob_controller', () => {
       expect(prospectiveFob).toBeTruthy();
     });
 
-    it('does not render when feature flag is disenabled', () => {
+    it('does not render when feature flag is disabled', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 4}, end: null},
         isProspectiveFobFeatureEnabled: false,
@@ -1407,6 +1407,33 @@ describe('card_fob_controller', () => {
       expect(prospectiveFobTopPosition).toEqual(2);
     });
 
+    describe('builds timeSelection correctly', () => {
+      it('when prospective step is less than timeSelection.start.step', () => {
+        const fixture = createComponent({
+          timeSelection: {start: {step: 4}, end: null},
+          axisDirection: AxisDirection.VERTICAL,
+          isProspectiveFobFeatureEnabled: true,
+          prospectiveStep: 2,
+        });
+        fixture.detectChanges();
+
+        fixture.debugElement
+          .query(By.css('.prospective-fob-area'))
+          .nativeElement.click();
+        expect(onTimeSelectionChanged.calls.allArgs()).toEqual([
+          [
+            {
+              timeSelection: {
+                start: {step: 2},
+                end: {step: 4},
+              },
+              affordance: TimeSelectionAffordance.FOB_ADDED,
+            },
+          ],
+        ]);
+      });
+    });
+
     describe('prospective area', () => {
       it('emits null step on mouseleave', () => {
         const fixture = createComponent({