Linked Time: Update prospective fob styling (#6055)

## Motivation for features / changes
1) The text in the prospective fob was off center
2) The prospective fob "did not feel clickable"
3) Clicking near the prospective fob would enable it which lead to some
weird bugs

## Technical description of changes
I changed the padding on the fob when the `allowRemoval` flag is set to
fix the text centering issuel

The prospective fob is shown based on the value of the `prospectiveStep`
variable which is set when hovering the `prospective-fob-area` and set
to `null` when the cursor leaves that area. I moved the prospectiveFob
inside the `prospective-fob-area` so the cursor would not count as
leaving it when the fob appears and takes focus. I also moved the click
handler to the fob object (rather than the `prospective-fob-area`) to
ensure click events are more accurate.

The changes to the HTML nesting made css changes much easier allowing
the fob change opacity when hovered to draw additional attention to it
and the cursor should not properly change.

## Screenshots of UI changes
Before:

![image](https://user-images.githubusercontent.com/78179109/202324386-5786a0df-67f2-40a3-8bbf-2e9f77c48cd2.png)

After:
Hovering Area (Not fob)

![image](https://user-images.githubusercontent.com/78179109/202561500-eaa7003b-5c9c-4d24-bdf4-33c41224165e.png)

Hovering Fob

![image](https://user-images.githubusercontent.com/78179109/202561589-f2b70428-2800-4eb4-917f-93432f87c156.png)

## Detailed steps to verify changes work correctly (as executed by you)
1) Start tensorboard
2) Go to
http://localhost:6006?enableDataTable=true&allowRangeSelection=true&enableProspectiveFob=true#timeseries
3) Hover the X Axis of the scalar card and assert a prospective fob
appears
4) Hover the prospective fob and assert the opacity and cursor change
5) Click the prospective fob and assert a start fob is added
6) Repeat steps 3-5 and assert an end fob is added
7) Hover the XAxis and assert no prospective fob is shown

## Alternate designs / implementations considered
I considered increasing the size of the `prospective-fob-area` and I
also considered making the prospective fob larger when hovered.

Author: rileyajones

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

@@ -3455,20 +3455,23 @@ describe('scalar card', () => {
         expect(fobs.length).toEqual(1);
 
         // Click the prospective fob to set the start time
-        fixture.debugElement
-          .query(By.css('.prospective-fob-area'))
-          .nativeElement.click();
+        testController.prospectiveFobClicked(new MouseEvent('mouseclick'));
+        fixture.detectChanges();
+
+        // One start fob
+        fobs = fixture.debugElement.queryAll(By.directive(CardFobComponent));
+        expect(fobs.length).toEqual(2);
         fixture.detectChanges();
 
         // One start fob + 1 prospective fob
+        testController.prospectiveStep = 25;
+        fixture.detectChanges();
+
         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();
+        testController.prospectiveFobClicked(new MouseEvent('mouseclick'));
         fixture.detectChanges();
 
         // One start fob, one end fob

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

@@ -15,7 +15,9 @@
 limitations under the License.
 -->
 
-<div class="fob">
+<div
+  [ngClass]="{'fob': true, 'unremovable': !allowRemoval, 'prospective': isProspective}"
+>
   <span
     contenteditable
     #stepSpan
@@ -34,4 +36,11 @@
   >
     <mat-icon svgIcon="close_24px"></mat-icon>
   </button>
+  <button
+    aria-label="Deselect fob"
+    (click)="fobRemoved.emit()"
+    *ngIf="isProspective"
+  >
+    <mat-icon svgIcon="keep_24px"></mat-icon>
+  </button>
 </div>

tensorboard/webapp/widgets/card_fob/card_fob_component.scss

@@ -25,14 +25,35 @@ limitations under the License.
   border-radius: 25px;
   padding: 2px 2px 2px 4px;
   font-size: 11px;
+  text-align: center;
   width: min-content;
 
+  > .prospective {
+    padding-top: 1px;
+  }
+
   &:hover {
     cursor: grab;
+
+    &.prospective {
+      cursor: pointer;
+    }
   }
   &:active {
     cursor: grabbing;
   }
+
+  &.unremovable {
+    padding: 2px 4px;
+  }
+
+  &.prospective {
+    align-items: center;
+    box-sizing: border-box;
+    border: 1px dashed mat.get-color-from-palette(mat.$gray-palette, 500);
+    font-weight: bold;
+    height: 17px;
+  }
 }
 
 span {

tensorboard/webapp/widgets/card_fob/card_fob_component.ts

@@ -38,6 +38,8 @@ export class CardFobComponent {
 
   @Input() allowRemoval?: boolean = true;
 
+  @Input() isProspective?: boolean = false;
+
   @Output() stepChanged = new EventEmitter<number | null>();
   @Output() fobRemoved = new EventEmitter();
 

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

@@ -15,30 +15,36 @@
 limitations under the License.
 -->
 
-<div>
+<div class="card-fob-controller">
   <ng-container
     *ngIf="isProspectiveFobFeatureEnabled && !rangeSelectionEnabled"
   >
     <div
-      #prospectiveFobWrapper
-      *ngIf="prospectiveStep !== null"
-      class="time-fob-wrapper prospectiveFob"
+      *ngIf="showExtendedLine && prospectiveStep !== null"
+      class="extended-line"
       [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>
     <div
       class="prospective-fob-area"
       [ngClass]="isVertical() ? 'vertical-prospective-area' : 'horizontal-prospective-area'"
-      (mousemove)="mouseOver($event)"
+      (mousemove)="mouseOverProspectiveFobArea($event)"
       (mouseleave)="onProspectiveAreaMouseLeave()"
-      (click)="prospectiveFobClicked($event)"
-    ></div>
+    >
+      <div
+        #prospectiveFobWrapper
+        *ngIf="prospectiveStep !== null"
+        (click)="prospectiveFobClicked($event)"
+        class="time-fob-wrapper"
+        [style.transform]="getCssTranslatePxForProspectiveFob()"
+      >
+        <card-fob
+          [ngClass]="isVertical() ? 'vertical-fob' : 'horizontal-fob'"
+          [allowRemoval]="false"
+          [isProspective]="true"
+          [step]="prospectiveStep"
+        ></card-fob>
+      </div>
+    </div>
   </ng-container>
   <div
     #startFobWrapper

tensorboard/webapp/widgets/card_fob/card_fob_controller_component.scss

@@ -16,6 +16,11 @@ limitations under the License.
   pointer-events: all;
 }
 
+.card-fob-controller {
+  height: calc(100% + 30px);
+  position: relative;
+}
+
 .time-fob-wrapper {
   display: inline-block;
   position: absolute;
@@ -51,11 +56,6 @@ limitations under the License.
   }
 }
 
-.prospectiveFob {
-  opacity: 0.8;
-  cursor: pointer;
-}
-
 .horizontal-prospective-area {
   bottom: 0;
   position: absolute;

tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ts

@@ -240,7 +240,7 @@ export class CardFobControllerComponent {
     this.hasFobMoved = true;
   }
 
-  mouseOver(event: MouseEvent) {
+  mouseOverProspectiveFobArea(event: MouseEvent) {
     if (
       this.timeSelection?.end !== null &&
       this.timeSelection?.end !== undefined

tensorboard/webapp/widgets/card_fob/card_fob_controller_test.ts

@@ -1417,9 +1417,11 @@ describe('card_fob_controller', () => {
         });
         fixture.detectChanges();
 
-        fixture.debugElement
-          .query(By.css('.prospective-fob-area'))
-          .nativeElement.click();
+        const testController = fixture.debugElement.query(
+          By.directive(CardFobControllerComponent)
+        ).componentInstance;
+        testController.prospectiveFobClicked(new MouseEvent('mouseclick'));
+
         expect(onTimeSelectionChanged.calls.allArgs()).toEqual([
           [
             {