Linked Time: Fix issue with prospective fob when axis is not step (#6022)

* Motivation for features / changes
There is a bug (that cannot currently be replicated) when the
`enableProspectiveFob` feature is enabled where a prospective fob will
appear even when the axis is not in `STEP`

* Screenshots of UI changes
NONE

* Detailed steps to verify changes work correctly (as executed by you)
1) Go to the future 

![image](https://user-images.githubusercontent.com/78179109/199848607-1c1cf9fa-83da-45b4-b928-8fa4b5355204.png)
2) Start tensorboard
3) Go to http://localhost:6006?allowRangeSelection=true
4) Change the horizontal axis to anything other than STEP
5) Hover your cursor on the X Axis of a scalar card chart
6) Assert nothing happens?

Author: rileyajones

tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html

@@ -168,7 +168,7 @@
     </table>
   </ng-template>
 </div>
-<ng-container *ngIf="inTimeSelectionMode()">
+<ng-container *ngIf="showDataTable()">
   <div class="data-table-container">
     <scalar-card-data-table
       [chartMetadataMap]="chartMetadataMap"
@@ -187,7 +187,7 @@
   let-domDim="domDimension"
   let-xScale="xScale"
 >
-  <ng-container *ngIf="inTimeSelectionMode() || isProspectiveFobFeatureEnabled">
+  <ng-container *ngIf="showFobController()">
     <scalar-card-fob-controller
       [timeSelection]="stepOrLinkedTimeSelection"
       [scale]="xScale"

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

@@ -221,10 +221,18 @@ export class ScalarCardComponent<Downloader> {
     this.onStepSelectorToggled.emit(TimeSelectionToggleAffordance.FOB_DESELECT);
   }
 
-  inTimeSelectionMode(): boolean {
+  showDataTable() {
     return (
       this.xAxisType === XAxisType.STEP &&
       this.stepOrLinkedTimeSelection !== null
     );
   }
+
+  showFobController() {
+    return (
+      this.xAxisType === XAxisType.STEP &&
+      (this.stepOrLinkedTimeSelection !== null ||
+        this.isProspectiveFobFeatureEnabled)
+    );
+  }
 }

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

@@ -2378,20 +2378,18 @@ describe('scalar card', () => {
       }));
 
       it('does not render fobs when no timeSelection is provided', fakeAsync(() => {
-        store.overrideSelector(getMetricsLinkedTimeSelection, {
-          start: {step: 20},
-          end: null,
-        });
+        store.overrideSelector(getMetricsLinkedTimeSelection, null);
         store.overrideSelector(
           selectors.getIsLinkedTimeProspectiveFobEnabled,
           true
         );
         const fixture = createComponent('card1');
         fixture.detectChanges();
         const fobController = fixture.debugElement.query(
-          By.directive(CardFobComponent)
+          By.directive(CardFobControllerComponent)
         ).componentInstance;
 
+        expect(fobController).toBeDefined();
         expect(fobController.startFobWrapper).toBeUndefined();
         expect(fobController.endFobWrapper).toBeUndefined();
       }));
@@ -3192,10 +3190,6 @@ describe('scalar card', () => {
         aliasText: 'a',
         aliasNumber: 1,
       };
-      console.log(
-        'ChartMetadatMap: ',
-        scalarCardDataTable.componentInstance.chartMetadataMap
-      );
       fixture.detectChanges();
 
       const data =
@@ -3245,6 +3239,10 @@ describe('scalar card', () => {
       }));
 
       it('Does not render fobs when axis type is RELATIVE', fakeAsync(() => {
+        store.overrideSelector(
+          selectors.getIsLinkedTimeProspectiveFobEnabled,
+          true
+        );
         store.overrideSelector(
           selectors.getMetricsXAxisType,
           XAxisType.RELATIVE
@@ -3258,6 +3256,10 @@ describe('scalar card', () => {
       }));
 
       it('Does not render fobs when axis type is WALL_TIME', fakeAsync(() => {
+        store.overrideSelector(
+          selectors.getIsLinkedTimeProspectiveFobEnabled,
+          true
+        );
         store.overrideSelector(
           selectors.getMetricsXAxisType,
           XAxisType.WALL_TIME