Linked Time: Make Prospective Fob Interactive (#6017)

Blocked by #6006 and #6016

## Motivation for features / changes
We believe the many check boxes in the settings panel to not be very
discoverable and a generally poor user experience.

![image](https://user-images.githubusercontent.com/78179109/199616005-4fbe6df0-ebe8-462e-b684-cf883e6675cb.png)

To remedy this we would like to shown a "Prospective Fob" when the user
hovers over the scalar card chart. When the user clicks on this
"prospective fob", a fob will be placed at the corresponding location
and step selection / range selection will be enabled as appropriate.

## Technical description of changes

## Screenshots of UI changes
Step Selection Disabled

![f469e422-ad1e-4c33-a329-4d60c3ba437f](https://user-images.githubusercontent.com/78179109/199615269-39b9305d-3922-4608-ad57-f122ebdff542.gif)

Step Selection Enabled

![761fb76e-b4ff-43be-bfe8-cf9410752c81](https://user-images.githubusercontent.com/78179109/199615324-5f48779f-b880-4121-a71c-50ad2cf34920.gif)

## Detailed steps to verify changes work correctly (as executed by you)
### Enabling Step Selection
1) Start tensorboard
2) Navigate to
http://localhost:6006?enableDataTable=true&allowRangeSelection=true&enableProspectiveFob=true
3) Hover over the X Axis of a scalar card chart
4) Assert a prospective fob is shown and has no deselect button
5) Click on the prospective fob
6) Assert step selection is enabled and the data table is shown

### Enabling Range Selection
With Step Selection Enabled
1) Hovering the X Axis of the scalar card
2) Assert a prospective fob is shown
3) Click the prospective fob
4) Assert range selection is now enabled
5) Continue hovering the X Axis of the scalar card
6) Assert no prospective fob is shown
7) Remove a fob
8) Hover the X Axis of the scalar card
9) Assert a prospective fob is shown

* Alternate designs / implementations considered

Author: rileyajones

tensorboard/webapp/metrics/store/metrics_reducers.ts

@@ -23,6 +23,7 @@ import {DataLoadState} from '../../types/data';
 import {ElementId} from '../../util/dom';
 import {mapObjectValues} from '../../util/lang';
 import {composeReducers} from '../../util/ngrx';
+import {TimeSelectionAffordance} from '../../widgets/card_fob/card_fob_types';
 import * as actions from '../actions';
 import {
   isFailedTimeSeriesResponse,
@@ -1018,6 +1019,9 @@ const reducer = createReducer(
     const {timeSelection} = change;
     const nextStartStep = timeSelection.start.step;
     const nextEndStep = timeSelection.end?.step;
+    const nextStepSelectorEnabled =
+      change.affordance === TimeSelectionAffordance.FOB_ADDED ||
+      state.stepSelectorEnabled;
     const end =
       nextEndStep === undefined
         ? null
@@ -1046,6 +1050,7 @@ const reducer = createReducer(
       linkedTimeSelection,
       cardStepIndex: nextCardStepIndexMap,
       rangeSelectionEnabled,
+      stepSelectorEnabled: nextStepSelectorEnabled,
     };
   }),
   on(actions.stepSelectorToggled, (state) => {

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

@@ -3420,6 +3420,66 @@ describe('scalar card', () => {
         ]);
       }));
 
+      it('dispatches timeSelectionChanged actions when fob is added by clicking prospective fob', fakeAsync(() => {
+        store.overrideSelector(
+          selectors.getIsLinkedTimeProspectiveFobEnabled,
+          true
+        );
+        const fixture = createComponent('card1');
+        fixture.detectChanges();
+
+        const testController = fixture.debugElement.query(
+          By.directive(CardFobControllerComponent)
+        ).componentInstance;
+        testController.timeSelection = null;
+        testController.prospectiveStep = 10;
+        fixture.detectChanges();
+
+        // One prospective fob
+        let fobs = fixture.debugElement.queryAll(
+          By.directive(CardFobComponent)
+        );
+        expect(fobs.length).toEqual(1);
+
+        // Click the prospective fob to set the start time
+        fixture.debugElement
+          .query(By.css('.prospective-fob-area'))
+          .nativeElement.click();
+        fixture.detectChanges();
+
+        // One start fob + 1 prospective fob
+        fobs = fixture.debugElement.queryAll(By.directive(CardFobComponent));
+        expect(fobs.length).toEqual(2);
+
+        // Click the prospective fob to set the end time
+        testController.prospectiveStep = 25;
+        fixture.debugElement
+          .query(By.css('.prospective-fob-area'))
+          .nativeElement.click();
+        fixture.detectChanges();
+
+        // One start fob, one end fob
+        fobs = fixture.debugElement.queryAll(By.directive(CardFobComponent));
+        expect(fobs.length).toEqual(2);
+
+        expect(dispatchedActions).toEqual([
+          timeSelectionChanged({
+            timeSelection: {
+              start: {step: 10},
+              end: null,
+            },
+            affordance: TimeSelectionAffordance.FOB_ADDED,
+          }),
+          timeSelectionChanged({
+            timeSelection: {
+              start: {step: 10},
+              end: {step: 25},
+            },
+            affordance: TimeSelectionAffordance.FOB_ADDED,
+          }),
+        ]);
+      }));
+
       it('toggles when single fob is deselected', fakeAsync(() => {
         const fixture = createComponent('card1');
         fixture.detectChanges();

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

@@ -16,25 +16,30 @@
 -->
 
 <div>
-  <div
-    #prospectiveFobWrapper
-    class="time-fob-wrapper prospectiveFob"
-    *ngIf="prospectiveStep !== null && isProspectiveFobFeatureEnabled"
-    [style.transform]="getCssTranslatePxForProspectiveFob()"
+  <ng-container
+    *ngIf="isProspectiveFobFeatureEnabled && !rangeSelectionEnabled"
   >
-    <div *ngIf="showExtendedLine" class="extended-line"></div>
-    <card-fob
-      [ngClass]="isVertical() ? 'vertical-fob' : 'horizontal-fob'"
-      [allowRemoval]="false"
-      [step]="prospectiveStep"
-    ></card-fob>
-  </div>
-  <div
-    class="prospective-fob-area"
-    [ngClass]="isVertical() ? 'vertical-prospective-area' : 'horizontal-prospective-area'"
-    (mousemove)="mouseOver($event)"
-    (mouseleave)="onProspectiveAreaMouseLeave()"
-  ></div>
+    <div
+      #prospectiveFobWrapper
+      *ngIf="prospectiveStep !== null"
+      class="time-fob-wrapper prospectiveFob"
+      [style.transform]="getCssTranslatePxForProspectiveFob()"
+    >
+      <div *ngIf="showExtendedLine" class="extended-line"></div>
+      <card-fob
+        [ngClass]="isVertical() ? 'vertical-fob' : 'horizontal-fob'"
+        [allowRemoval]="false"
+        [step]="prospectiveStep"
+      ></card-fob>
+    </div>
+    <div
+      class="prospective-fob-area"
+      [ngClass]="isVertical() ? 'vertical-prospective-area' : 'horizontal-prospective-area'"
+      (mousemove)="mouseOver($event)"
+      (mouseleave)="onProspectiveAreaMouseLeave()"
+      (click)="prospectiveFobClicked($event)"
+    ></div>
+  </ng-container>
   <div
     #startFobWrapper
     class="time-fob-wrapper"

tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ts

@@ -380,6 +380,29 @@ export class CardFobControllerComponent {
     });
   }
 
+  prospectiveFobClicked(event: Event) {
+    event.stopPropagation();
+    if (this.prospectiveStep === null) {
+      return;
+    }
+    const newTimeSelection = this.timeSelection
+      ? {
+          ...this.timeSelection,
+          end: {
+            step: this.prospectiveStep,
+          },
+        }
+      : {
+          start: {step: this.prospectiveStep},
+          end: null,
+        };
+
+    this.onTimeSelectionChanged.emit({
+      affordance: TimeSelectionAffordance.FOB_ADDED,
+      timeSelection: newTimeSelection,
+    });
+  }
+
   /**
    * 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_types.ts

@@ -42,6 +42,8 @@ export enum TimeSelectionAffordance {
   CHANGE_TO_SINGLE = 'changeToSingle',
   // User clicks on Histogram Chart to change to range selection.
   HISTOGRAM_CLICK_TO_RANGE = 'histogramClickToRange',
+  // Adding a new fob
+  FOB_ADDED = 'fobAdded',
 }
 
 /**