Revert "Linked Time: Update prospective fob styling" (#6068)

Reverts #6055

This breaks zooming 🤦‍♂️

Author: rileyajones

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

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

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

@@ -15,9 +15,7 @@
 limitations under the License.
 -->
 
-<div
-  [ngClass]="{'fob': true, 'unremovable': !allowRemoval, 'prospective': isProspective}"
->
+<div class="fob">
   <span
     contenteditable
     #stepSpan
@@ -36,11 +34,4 @@
   >
     <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,35 +25,14 @@ 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,8 +38,6 @@ 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,36 +15,30 @@
 limitations under the License.
 -->
 
-<div class="card-fob-controller">
+<div>
   <ng-container
     *ngIf="isProspectiveFobFeatureEnabled && !rangeSelectionEnabled"
   >
     <div
-      *ngIf="showExtendedLine && prospectiveStep !== null"
-      class="extended-line"
+      #prospectiveFobWrapper
+      *ngIf="prospectiveStep !== null"
+      class="time-fob-wrapper prospectiveFob"
       [style.transform]="getCssTranslatePxForProspectiveFob()"
-    ></div>
+    >
+      <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)="mouseOverProspectiveFobArea($event)"
+      (mousemove)="mouseOver($event)"
       (mouseleave)="onProspectiveAreaMouseLeave()"
-    >
-      <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>
+      (click)="prospectiveFobClicked($event)"
+    ></div>
   </ng-container>
   <div
     #startFobWrapper

tensorboard/webapp/widgets/card_fob/card_fob_controller_component.scss

@@ -16,11 +16,6 @@ limitations under the License.
   pointer-events: all;
 }
 
-.card-fob-controller {
-  height: calc(100% + 30px);
-  position: relative;
-}
-
 .time-fob-wrapper {
   display: inline-block;
   position: absolute;
@@ -56,6 +51,11 @@ 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;
   }
 
-  mouseOverProspectiveFobArea(event: MouseEvent) {
+  mouseOver(event: MouseEvent) {
     if (
       this.timeSelection?.end !== null &&
       this.timeSelection?.end !== undefined

tensorboard/webapp/widgets/card_fob/card_fob_controller_test.ts

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