linked time: set prospective fob position from prospective step (#5999)

This is pre-work of placing prospective fob at the mouse position. First we want to get the position which reflects the prospective step.

Author: japie1235813

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

@@ -34,6 +34,7 @@ import {MinMaxStep} from './scalar_card_types';
       [timeSelection]="timeSelection"
       [startStepAxisPosition]="getAxisPositionFromStartStep()"
       [endStepAxisPosition]="getAxisPositionFromEndStep()"
+      [prospectiveStepAxisPosition]="getAxisPositionFromProspectiveStep()"
       [highestStep]="getHighestStep()"
       [lowestStep]="getLowestStep()"
       [prospectiveStep]="prospectiveStep"
@@ -88,6 +89,16 @@ export class ScalarCardFobController {
     );
   }
 
+  getAxisPositionFromProspectiveStep() {
+    if (this.prospectiveStep === null) return null;
+
+    return this.scale.forward(
+      this.minMaxHorizontalViewExtend,
+      [0, this.axisSize],
+      this.prospectiveStep
+    );
+  }
+
   getHighestStep(): number {
     return this.minMaxStep.maxStep;
   }

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

@@ -18,8 +18,9 @@
 <div>
   <div
     #prospectiveFobWrapper
-    class="time-fob-wrapper"
+    class="time-fob-wrapper prospectiveFob"
     *ngIf="prospectiveStep !== null && isProspectiveFobFeatureEnabled"
+    [style.transform]="getCssTranslatePxForProspectiveFob()"
   >
     <div *ngIf="showExtendedLine" class="extended-line"></div>
     <card-fob

tensorboard/webapp/widgets/card_fob/card_fob_controller_component.scss

@@ -49,3 +49,8 @@ limitations under the License.
     padding: 0 20px;
   }
 }
+
+.prospectiveFob {
+  opacity: 0.8;
+  cursor: pointer;
+}

tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ts

@@ -62,6 +62,7 @@ export class CardFobControllerComponent {
   @Input() showExtendedLine?: Boolean = false;
   @Input() isProspectiveFobFeatureEnabled?: Boolean = false;
   @Input() prospectiveStep?: number | null = null;
+  @Input() prospectiveStepAxisPosition?: number | null = null;
 
   @Output() onTimeSelectionChanged =
     new EventEmitter<TimeSelectionWithAffordance>();
@@ -99,6 +100,17 @@ export class CardFobControllerComponent {
     return `translate(${this.endStepAxisPosition}px, 0px)`;
   }
 
+  getCssTranslatePxForProspectiveFob() {
+    if (this.prospectiveStep === null) {
+      return '';
+    }
+
+    if (this.axisDirection === AxisDirection.VERTICAL) {
+      return `translate(0px, ${this.prospectiveStepAxisPosition}px)`;
+    }
+    return `translate(${this.prospectiveStepAxisPosition}px, 0px)`;
+  }
+
   stopEventPropagation(e: Event) {
     e.stopPropagation();
     e.preventDefault();

tensorboard/webapp/widgets/card_fob/card_fob_controller_test.ts

@@ -35,6 +35,7 @@ import {
       [timeSelection]="timeSelection"
       [startStepAxisPosition]="getAxisPositionFromStartStep()"
       [endStepAxisPosition]="getAxisPositionFromEndStep()"
+      [prospectiveStepAxisPosition]="getAxisPositionFromProspectiveStep()"
       [highestStep]="highestStep"
       [lowestStep]="lowestStep"
       [cardFobHelper]="cardFobHelper"
@@ -58,6 +59,7 @@ class TestableComponent {
   @Input() lowestStep!: number;
   @Input() getAxisPositionFromStartStep!: () => number;
   @Input() getAxisPositionFromEndStep!: () => number;
+  @Input() getAxisPositionFromProspectiveStep!: () => number;
   @Input() isProspectiveFobFeatureEnabled!: Boolean;
   @Input() prospectiveStep!: number | null;
 
@@ -72,6 +74,7 @@ describe('card_fob_controller', () => {
   let getStepLowerSpy: jasmine.Spy;
   let getAxisPositionFromStartStepSpy: jasmine.Spy;
   let getAxisPositionFromEndStepSpy: jasmine.Spy;
+  let getAxisPositionFromProspectiveStepSpy: jasmine.Spy;
   let cardFobHelper: CardFobGetStepFromPositionHelper;
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -104,6 +107,7 @@ describe('card_fob_controller', () => {
     getStepLowerSpy = jasmine.createSpy();
     getAxisPositionFromStartStepSpy = jasmine.createSpy();
     getAxisPositionFromEndStepSpy = jasmine.createSpy();
+    getAxisPositionFromProspectiveStepSpy = jasmine.createSpy();
     getStepHigherSpy.and.callFake((step: number) => {
       return step;
     });
@@ -118,6 +122,11 @@ describe('card_fob_controller', () => {
         ? fixture.componentInstance.timeSelection.end.step
         : null;
     });
+    getAxisPositionFromProspectiveStepSpy.and.callFake(() => {
+      return fixture.componentInstance.prospectiveStep
+        ? fixture.componentInstance.prospectiveStep
+        : null;
+    });
     cardFobHelper = {
       getStepHigherThanAxisPosition: getStepHigherSpy,
       getStepLowerThanAxisPosition: getStepLowerSpy,
@@ -127,6 +136,8 @@ describe('card_fob_controller', () => {
       getAxisPositionFromStartStepSpy;
     fixture.componentInstance.getAxisPositionFromEndStep =
       getAxisPositionFromEndStepSpy;
+    fixture.componentInstance.getAxisPositionFromProspectiveStep =
+      getAxisPositionFromProspectiveStepSpy;
     fixture.componentInstance.highestStep = 4;
     fixture.componentInstance.lowestStep = 0;
     fixture.componentInstance.cardFobHelper = cardFobHelper;
@@ -1320,5 +1331,39 @@ describe('card_fob_controller', () => {
         fixture.componentInstance.fobController.prospectiveFobWrapper
       ).toBeUndefined();
     });
+
+    it('sets horizontal position based on prospective step', () => {
+      const fixture = createComponent({
+        timeSelection: {start: {step: 4}, end: null},
+        axisDirection: AxisDirection.HORIZONTAL,
+        isProspectiveFobFeatureEnabled: true,
+        prospectiveStep: 2,
+      });
+      fixture.detectChanges();
+
+      const fobController = fixture.componentInstance.fobController;
+      const prospectiveFobLeftPosition =
+        fobController.prospectiveFobWrapper.nativeElement.getBoundingClientRect()
+          .left;
+
+      expect(prospectiveFobLeftPosition).toEqual(2);
+    });
+
+    it('sets vertical position based on prospective step', () => {
+      const fixture = createComponent({
+        timeSelection: {start: {step: 4}, end: null},
+        axisDirection: AxisDirection.VERTICAL,
+        isProspectiveFobFeatureEnabled: true,
+        prospectiveStep: 2,
+      });
+      fixture.detectChanges();
+
+      const fobController = fixture.componentInstance.fobController;
+      const prospectiveFobTopPosition =
+        fobController.prospectiveFobWrapper.nativeElement.getBoundingClientRect()
+          .top;
+
+      expect(prospectiveFobTopPosition).toEqual(2);
+    });
   });
 });