linked time: create listen area for fob and set step to null on mouseleave (#6004)

On mouse hovering the axis, we want to show the prospective fob. On mouse leaving, we want to remove the fob. This PR creates that element and implement the mouse leaving part.

Author: japie1235813

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

@@ -41,6 +41,7 @@ import {MinMaxStep} from './scalar_card_types';
       [isProspectiveFobFeatureEnabled]="isProspectiveFobFeatureEnabled"
       [cardFobHelper]="cardFobHelper"
       [showExtendedLine]="true"
+      (onPrespectiveStepChanged)="onPrespectiveStepChanged($event)"
       (onTimeSelectionChanged)="onTimeSelectionChanged.emit($event)"
       (onTimeSelectionToggled)="onTimeSelectionToggled.emit($event)"
     ></card-fob-controller>
@@ -102,6 +103,10 @@ export class ScalarCardFobController {
     );
   }
 
+  onPrespectiveStepChanged(step: number | null) {
+    this.prospectiveStep = step;
+  }
+
   getHighestStep(): number {
     return this.minMaxStep.maxStep;
   }

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

@@ -27,6 +27,11 @@
       [ngClass]="isVertical() ? 'vertical-fob' : 'horizontal-fob'"
     ></card-fob>
   </div>
+  <div
+    class="prospective-fob-area"
+    [ngClass]="isVertical() ? 'vertical-prospective-area' : 'horizontal-prospective-area'"
+    (mouseleave)="onProspectiveAreaMouseLeave()"
+  ></div>
   <div
     #startFobWrapper
     class="time-fob-wrapper"

tensorboard/webapp/widgets/card_fob/card_fob_controller_component.scss

@@ -19,6 +19,7 @@ limitations under the License.
 .time-fob-wrapper {
   display: inline-block;
   position: absolute;
+  top: 0;
   width: 0;
 }
 
@@ -54,3 +55,15 @@ limitations under the License.
   opacity: 0.8;
   cursor: pointer;
 }
+
+.horizontal-prospective-area {
+  bottom: 0;
+  position: absolute;
+  // Height/Width to match x-axis
+  height: 30px;
+  width: calc(100% - 50px); // dot on the left takes up 50px
+}
+
+.prospective-area {
+  display: block;
+}

tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ts

@@ -67,6 +67,7 @@ export class CardFobControllerComponent {
   @Output() onTimeSelectionChanged =
     new EventEmitter<TimeSelectionWithAffordance>();
   @Output() onTimeSelectionToggled = new EventEmitter();
+  @Output() onPrespectiveStepChanged = new EventEmitter<number | null>();
 
   private hasFobMoved: boolean = false;
   private currentDraggingFob: Fob = Fob.NONE;
@@ -349,4 +350,8 @@ export class CardFobControllerComponent {
 
     this.onTimeSelectionToggled.emit();
   }
+
+  onProspectiveAreaMouseLeave() {
+    this.onPrespectiveStepChanged.emit(null);
+  }
 }

tensorboard/webapp/widgets/card_fob/card_fob_controller_test.ts

@@ -44,6 +44,7 @@ import {
       [prospectiveStep]="prospectiveStep"
       (onTimeSelectionChanged)="onTimeSelectionChanged($event)"
       (onTimeSelectionToggled)="onTimeSelectionToggled()"
+      (onPrespectiveStepChanged)="onPrespectiveStepChanged($event)"
     ></card-fob-controller>
   `,
 })
@@ -65,6 +66,7 @@ class TestableComponent {
 
   @Input() onTimeSelectionChanged!: (newTimeSelection: TimeSelection) => void;
   @Input() onTimeSelectionToggled!: () => void;
+  @Input() onPrespectiveStepChanged!: (step: number | null) => void;
 }
 
 describe('card_fob_controller', () => {
@@ -76,6 +78,8 @@ describe('card_fob_controller', () => {
   let getAxisPositionFromEndStepSpy: jasmine.Spy;
   let getAxisPositionFromProspectiveStepSpy: jasmine.Spy;
   let cardFobHelper: CardFobGetStepFromPositionHelper;
+  let onPrespectiveStepChangedSpy: jasmine.Spy;
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [
@@ -165,6 +169,14 @@ describe('card_fob_controller', () => {
 
     onTimeSelectionToggled = jasmine.createSpy();
     fixture.componentInstance.onTimeSelectionToggled = onTimeSelectionToggled;
+
+    onPrespectiveStepChangedSpy = jasmine.createSpy();
+    fixture.componentInstance.onPrespectiveStepChanged =
+      onPrespectiveStepChangedSpy;
+    onPrespectiveStepChangedSpy.and.callFake((step: number | null) => {
+      fixture.componentInstance.prospectiveStep = step;
+    });
+
     return fixture;
   }
 
@@ -1365,5 +1377,25 @@ describe('card_fob_controller', () => {
 
       expect(prospectiveFobTopPosition).toEqual(2);
     });
+
+    describe('prospective area', () => {
+      it('emits null step on mouseleave', () => {
+        const fixture = createComponent({
+          timeSelection: {start: {step: 4}, end: null},
+          axisDirection: AxisDirection.HORIZONTAL,
+          isProspectiveFobFeatureEnabled: true,
+          prospectiveStep: 2,
+        });
+        fixture.detectChanges();
+
+        const hoverArea = fixture.debugElement.query(
+          By.css('.prospective-fob-area')
+        );
+        hoverArea.triggerEventHandler('mouseleave', {});
+        fixture.detectChanges();
+
+        expect(onPrespectiveStepChangedSpy).toHaveBeenCalledWith(null);
+      });
+    });
   });
 });