Linked Time: Update prospective fob styling (#6070)

See #6055 for motivation and styling
Unfortunately I broke the zoom functionality with that PR and thus
reverted it via #6068

There was
[discussion](#6055 (comment))
around removing the DOM restructure present in #6055 and because that
was ultimately to blame for the breakage I am resubmitting the PR but
without the DOM restructure.

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

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

tensorboard/webapp/widgets/card_fob/card_fob_controller_component.scss

@@ -51,13 +51,9 @@ limitations under the License.
   }
 }
 
-.prospectiveFob {
-  opacity: 0.8;
-  cursor: pointer;
-}
-
 .horizontal-prospective-area {
   bottom: 0;
+  cursor: pointer;
   position: absolute;
   // Height/Width to match x-axis
   height: 30px;

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([
           [
             {