Linked Time: Render a prospective fob on the scalar card when the feature is enabled (#6026)

Blocked by #6022

## 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. To avoid needing as
many check boxes we're adding a "Prospective Fob" which will be shown
when hovering the axis of a chart.

This PR just starts rendering the feature while #6017 will add the click
interactions.

## Screenshots of UI changes

![image](https://user-images.githubusercontent.com/78179109/200031105-23967eaf-a6a0-427b-8b16-3d2b250e58d5.png)

![image](https://user-images.githubusercontent.com/78179109/200031168-34641531-0ec3-482f-9f2f-5270b37cae08.png)

## Detailed steps to verify changes work correctly (as executed by you)
1) Start tensorboard
2) Nagivate to
http://localhost:6006/?enableDataTable=true&allowRangeSelection=true&enableProspectiveFob=true#timeseries
3) Hover a scalar card chart
4) Assert a prospective fob appears

Author: rileyajones

tensorboard/webapp/feature_flag/types.ts

@@ -49,5 +49,6 @@ export interface FeatureFlags {
   // Adds check box in settings which allows users to enter step selection range.
   allowRangeSelection: boolean;
   // In Linked Time, if enabled, show a prospective fob user to turn on the feature or select a step.
+  // If this is removed update the `getCurrentFob` method of tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ts
   enabledProspectiveFob: boolean;
 }

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

@@ -3238,6 +3238,33 @@ describe('scalar card', () => {
         expect(testController).toBeTruthy();
       }));
 
+      it('renders prospective fob', fakeAsync(() => {
+        store.overrideSelector(selectors.getMetricsLinkedTimeSelection, null);
+        store.overrideSelector(selectors.getMetricsStepSelectorEnabled, false);
+        store.overrideSelector(
+          selectors.getIsLinkedTimeProspectiveFobEnabled,
+          true
+        );
+
+        const fixture = createComponent('card1');
+        fixture.detectChanges();
+
+        const cardFobController = fixture.debugElement.query(
+          By.directive(CardFobControllerComponent)
+        ).componentInstance;
+        expect(cardFobController).toBeDefined();
+
+        cardFobController.onPrespectiveStepChanged.emit(1);
+        fixture.detectChanges();
+
+        const prospectiveFob = fixture.debugElement.query(
+          By.directive(CardFobComponent)
+        ).componentInstance;
+        expect(prospectiveFob).toBeDefined();
+        expect(cardFobController.prospectiveFobWrapper).toBeDefined();
+        expect(cardFobController.prospectiveStep).toEqual(1);
+      }));
+
       it('Does not render fobs when axis type is RELATIVE', fakeAsync(() => {
         store.overrideSelector(
           selectors.getIsLinkedTimeProspectiveFobEnabled,

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

@@ -25,11 +25,14 @@
     <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

tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ts

@@ -22,6 +22,7 @@ import {
   Output,
   ViewChild,
 } from '@angular/core';
+import {CardFobComponent} from './card_fob_component';
 import {
   AxisDirection,
   CardFobGetStepFromPositionHelper,
@@ -61,7 +62,7 @@ export class CardFobControllerComponent {
   @Input() lowestStep!: number;
   @Input() showExtendedLine?: Boolean = false;
   @Input() isProspectiveFobFeatureEnabled?: Boolean = false;
-  @Input() prospectiveStep?: number | null = null;
+  @Input() prospectiveStep: number | null = null;
   @Input() prospectiveStepAxisPosition?: number | null = null;
 
   @Output() onTimeSelectionChanged =
@@ -200,21 +201,30 @@ export class CardFobControllerComponent {
     return newTimeSelection;
   }
 
-  mouseMove(event: MouseEvent) {
-    if (this.currentDraggingFob === Fob.NONE) return;
-
+  getNewStepFromMouseEvent(event: MouseEvent): number | null {
     let newStep: number | null = null;
     const mousePosition = this.getMousePositionFromEvent(event);
     const movement =
       this.axisDirection === AxisDirection.VERTICAL
         ? event.movementY
         : event.movementX;
-    if (this.isDraggingHigher(mousePosition, movement)) {
+    if (this.isMovingHigher(mousePosition, movement)) {
       newStep = this.cardFobHelper.getStepHigherThanAxisPosition(mousePosition);
-    } else if (this.isDraggingLower(mousePosition, movement)) {
+    } else if (this.isMovingLower(mousePosition, movement)) {
       newStep = this.cardFobHelper.getStepLowerThanAxisPosition(mousePosition);
     }
 
+    if (newStep === null) {
+      return null;
+    }
+
+    return newStep;
+  }
+
+  mouseMove(event: MouseEvent) {
+    if (this.currentDraggingFob === Fob.NONE) return;
+
+    const newStep = this.getNewStepFromMouseEvent(event);
     if (newStep === null || !this.timeSelection) {
       return;
     }
@@ -229,19 +239,53 @@ export class CardFobControllerComponent {
     this.hasFobMoved = true;
   }
 
-  isDraggingLower(position: number, movement: number): boolean {
+  mouseOver(event: MouseEvent) {
+    if (
+      this.timeSelection?.end !== null &&
+      this.timeSelection?.end !== undefined
+    ) {
+      return;
+    }
+
+    const newStep = this.getNewStepFromMouseEvent(event);
+    if (newStep === null) {
+      return;
+    }
+
+    this.onPrespectiveStepChanged.emit(newStep);
+  }
+
+  isMovingLower(position: number, movement: number): boolean {
+    if (this.currentDraggingFob === Fob.NONE && this.prospectiveStep === null) {
+      return true;
+    }
+
+    const currentStep = this.getCurrentFobStep();
+    if (currentStep === undefined) {
+      return false;
+    }
+
     return (
       position < this.getDraggingFobCenter() &&
       movement < 0 &&
-      this.getDraggingFobStep() > this.lowestStep
+      currentStep > this.lowestStep
     );
   }
 
-  isDraggingHigher(position: number, movement: number): boolean {
+  isMovingHigher(position: number, movement: number): boolean {
+    if (this.currentDraggingFob === Fob.NONE && this.prospectiveStep === null) {
+      return true;
+    }
+
+    const currentStep = this.getCurrentFobStep();
+    if (currentStep === undefined) {
+      return false;
+    }
+
     return (
       position > this.getDraggingFobCenter() &&
       movement > 0 &&
-      this.getDraggingFobStep() < this.highestStep
+      currentStep < this.highestStep
     );
   }
 
@@ -252,27 +296,43 @@ export class CardFobControllerComponent {
     // the element's natural position(using translateY(-50%)). While in the
     // horizontal direction the fob's center is actually rendered over the left
     // of the element's natural position (using translateX(-50%)).
+    const currentFob = this.getCurrentFob()?.nativeElement;
+    if (!currentFob) {
+      return 0;
+    }
+    let fobTopPosition = currentFob.getBoundingClientRect().top;
+    let fobLeftPosition = currentFob.getBoundingClientRect().left;
+
     if (this.axisDirection === AxisDirection.VERTICAL) {
       return (
-        (this.currentDraggingFob !== Fob.END
-          ? this.startFobWrapper.nativeElement.getBoundingClientRect().top
-          : this.endFobWrapper.nativeElement.getBoundingClientRect().top) -
-        this.root.nativeElement.getBoundingClientRect().top
-      );
-    } else {
-      return (
-        (this.currentDraggingFob !== Fob.END
-          ? this.startFobWrapper.nativeElement.getBoundingClientRect().left
-          : this.endFobWrapper.nativeElement.getBoundingClientRect().left) -
-        this.root.nativeElement.getBoundingClientRect().left
+        fobTopPosition - this.root.nativeElement.getBoundingClientRect().top
       );
     }
+    return (
+      fobLeftPosition - this.root.nativeElement.getBoundingClientRect().left
+    );
+  }
+
+  getCurrentFob(): ElementRef<CardFobComponent & HTMLElement> | null {
+    switch (this.currentDraggingFob) {
+      case Fob.START:
+        return this.startFobWrapper;
+      case Fob.END:
+        return this.endFobWrapper;
+      case Fob.NONE:
+        return this.prospectiveFobWrapper;
+    }
   }
 
-  getDraggingFobStep(): number {
-    return this.currentDraggingFob !== Fob.END
-      ? this.timeSelection!.start.step
-      : this.timeSelection!.end!.step;
+  getCurrentFobStep(): number | undefined {
+    switch (this.currentDraggingFob) {
+      case Fob.START:
+        return this.timeSelection?.start.step;
+      case Fob.END:
+        return this.timeSelection?.end?.step;
+      case Fob.NONE:
+        return this.prospectiveStep ?? undefined;
+    }
   }
 
   getMousePositionFromEvent(event: MouseEvent): number {