linked time: set up feature flag and fob rendering (#5995)

Introduce feature flag in the card fob and used to render a fob component.

Author: japie1235813

tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html

@@ -234,6 +234,7 @@
       [minMaxHorizontalViewExtend]="viewExtent.x"
       [minMaxStep]="minMaxStep"
       [axisSize]="domDim.width"
+      [isProspectiveFobFeatureEnabled]="isProspectiveFobFeatureEnabled"
       (onTimeSelectionChanged)="onTimeSelectionChanged.emit($event)"
       (onTimeSelectionToggled)="onFobRemoved()"
     ></scalar-card-fob-controller>

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

@@ -92,6 +92,7 @@ export class ScalarCardComponent<Downloader> {
   @Input() forceSvg!: boolean;
   @Input() linkedTimeSelection!: TimeSelectionView | null;
   @Input() stepOrLinkedTimeSelection!: TimeSelection | null;
+  @Input() isProspectiveFobFeatureEnabled: Boolean = false;
   @Input() minMaxStep!: MinMaxStep;
   @Input() dataHeaders!: ColumnHeaders[];
 

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

@@ -51,6 +51,7 @@ import {
   getDarkModeEnabled,
   getExperimentIdForRunId,
   getExperimentIdToExperimentAliasMap,
+  getIsLinkedTimeProspectiveFobEnabled,
   getMetricsLinkedTimeEnabled,
   getMetricsLinkedTimeSelection,
   getMetricsStepSelectorEnabled,
@@ -156,6 +157,7 @@ function areSeriesEqual(
       [useDarkMode]="useDarkMode$ | async"
       [linkedTimeSelection]="linkedTimeSelection$ | async"
       [stepOrLinkedTimeSelection]="stepOrLinkedTimeSelection$ | async"
+      [isProspectiveFobFeatureEnabled]="isProspectiveFobFeatureEnabled$ | async"
       [forceSvg]="forceSvg$ | async"
       [minMaxStep]="minMaxSteps$ | async"
       [dataHeaders]="columnHeaders$ | async"
@@ -204,6 +206,9 @@ export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
   columnHeaders$?: Observable<ColumnHeaders[]>;
   stepOrLinkedTimeSelection$?: Observable<TimeSelection | null>;
 
+  readonly isProspectiveFobFeatureEnabled$: Observable<boolean> =
+    this.store.select(getIsLinkedTimeProspectiveFobEnabled);
+
   onVisibilityChange({visible}: {visible: boolean}) {
     this.isVisible = visible;
   }

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

@@ -36,6 +36,8 @@ import {MinMaxStep} from './scalar_card_types';
       [endStepAxisPosition]="getAxisPositionFromEndStep()"
       [highestStep]="getHighestStep()"
       [lowestStep]="getLowestStep()"
+      [prospectiveStep]="prospectiveStep"
+      [isProspectiveFobFeatureEnabled]="isProspectiveFobFeatureEnabled"
       [cardFobHelper]="cardFobHelper"
       [showExtendedLine]="true"
       (onTimeSelectionChanged)="onTimeSelectionChanged.emit($event)"
@@ -51,6 +53,7 @@ export class ScalarCardFobController {
   @Input() minMaxHorizontalViewExtend!: [number, number];
   @Input() minMaxStep!: MinMaxStep;
   @Input() axisSize!: number;
+  @Input() isProspectiveFobFeatureEnabled: Boolean = false;
 
   @Output() onTimeSelectionChanged = new EventEmitter<{
     timeSelection: TimeSelection;
@@ -64,6 +67,7 @@ export class ScalarCardFobController {
       this.getStepHigherThanAxisPosition.bind(this),
     getStepLowerThanAxisPosition: this.getStepLowerThanAxisPosition.bind(this),
   };
+  prospectiveStep: number | null = null;
 
   getAxisPositionFromStartStep() {
     return this.scale.forward(

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

@@ -335,6 +335,10 @@ describe('scalar card', () => {
     store.overrideSelector(selectors.getDarkModeEnabled, false);
     store.overrideSelector(selectors.getForceSvgFeatureFlag, false);
     store.overrideSelector(selectors.getMetricsStepSelectorEnabled, false);
+    store.overrideSelector(
+      selectors.getIsLinkedTimeProspectiveFobEnabled,
+      false
+    );
   });
 
   describe('basic renders', () => {

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

@@ -16,6 +16,16 @@
 -->
 
 <div>
+  <div
+    #prospectiveFobWrapper
+    class="time-fob-wrapper"
+    *ngIf="prospectiveStep !== null && isProspectiveFobFeatureEnabled"
+  >
+    <div *ngIf="showExtendedLine" class="extended-line"></div>
+    <card-fob
+      [ngClass]="isVertical() ? 'vertical-fob' : 'horizontal-fob'"
+    ></card-fob>
+  </div>
   <div
     #startFobWrapper
     class="time-fob-wrapper"

tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ts

@@ -50,6 +50,8 @@ const TIME_SELECTION_TO_FOB: Record<keyof TimeSelection, Fob> = {
 export class CardFobControllerComponent {
   @ViewChild('startFobWrapper') readonly startFobWrapper!: ElementRef;
   @ViewChild('endFobWrapper') readonly endFobWrapper!: ElementRef;
+  @ViewChild('prospectiveFobWrapper')
+  readonly prospectiveFobWrapper!: ElementRef;
   @Input() axisDirection!: AxisDirection;
   @Input() timeSelection!: TimeSelection;
   @Input() cardFobHelper!: CardFobGetStepFromPositionHelper;
@@ -58,6 +60,8 @@ export class CardFobControllerComponent {
   @Input() highestStep!: number;
   @Input() lowestStep!: number;
   @Input() showExtendedLine?: Boolean = false;
+  @Input() isProspectiveFobFeatureEnabled?: Boolean = false;
+  @Input() prospectiveStep?: number | null = null;
 
   @Output() onTimeSelectionChanged =
     new EventEmitter<TimeSelectionWithAffordance>();

tensorboard/webapp/widgets/card_fob/card_fob_controller_test.ts

@@ -39,6 +39,8 @@ import {
       [lowestStep]="lowestStep"
       [cardFobHelper]="cardFobHelper"
       [showExtendedLine]="showExtendedLine"
+      [isProspectiveFobFeatureEnabled]="isProspectiveFobFeatureEnabled"
+      [prospectiveStep]="prospectiveStep"
       (onTimeSelectionChanged)="onTimeSelectionChanged($event)"
       (onTimeSelectionToggled)="onTimeSelectionToggled()"
     ></card-fob-controller>
@@ -56,6 +58,8 @@ class TestableComponent {
   @Input() lowestStep!: number;
   @Input() getAxisPositionFromStartStep!: () => number;
   @Input() getAxisPositionFromEndStep!: () => number;
+  @Input() isProspectiveFobFeatureEnabled!: Boolean;
+  @Input() prospectiveStep!: number | null;
 
   @Input() onTimeSelectionChanged!: (newTimeSelection: TimeSelection) => void;
   @Input() onTimeSelectionToggled!: () => void;
@@ -85,6 +89,8 @@ describe('card_fob_controller', () => {
     timeSelection: TimeSelection;
     showExtendedLine?: Boolean;
     steps?: number[];
+    isProspectiveFobFeatureEnabled?: Boolean;
+    prospectiveStep?: number | null;
   }): ComponentFixture<TestableComponent> {
     const fixture = TestBed.createComponent(TestableComponent);
 
@@ -133,6 +139,10 @@ describe('card_fob_controller', () => {
     fixture.componentInstance.showExtendedLine =
       input.showExtendedLine ?? false;
 
+    fixture.componentInstance.isProspectiveFobFeatureEnabled =
+      input.isProspectiveFobFeatureEnabled ?? false;
+    fixture.componentInstance.prospectiveStep = input.prospectiveStep ?? null;
+
     onTimeSelectionChanged = jasmine.createSpy();
     fixture.componentInstance.onTimeSelectionChanged = onTimeSelectionChanged;
     onTimeSelectionChanged.and.callFake(
@@ -1269,4 +1279,46 @@ describe('card_fob_controller', () => {
       });
     });
   });
+
+  describe('prospective fob', () => {
+    it('renders when feature flag is enabled and the step is not null', () => {
+      const fixture = createComponent({
+        timeSelection: {start: {step: 4}, end: null},
+        isProspectiveFobFeatureEnabled: true,
+        prospectiveStep: 2,
+      });
+      fixture.detectChanges();
+
+      const fobController = fixture.componentInstance.fobController;
+      const prospectiveFob = fobController.prospectiveFobWrapper.nativeElement;
+
+      expect(prospectiveFob).toBeTruthy();
+    });
+
+    it('does not render when feature flag is disenabled', () => {
+      const fixture = createComponent({
+        timeSelection: {start: {step: 4}, end: null},
+        isProspectiveFobFeatureEnabled: false,
+        prospectiveStep: 2,
+      });
+      fixture.detectChanges();
+
+      expect(
+        fixture.componentInstance.fobController.prospectiveFobWrapper
+      ).toBeUndefined();
+    });
+
+    it('does not render when step is null', () => {
+      const fixture = createComponent({
+        timeSelection: {start: {step: 4}, end: null},
+        isProspectiveFobFeatureEnabled: true,
+        prospectiveStep: null,
+      });
+      fixture.detectChanges();
+
+      expect(
+        fixture.componentInstance.fobController.prospectiveFobWrapper
+      ).toBeUndefined();
+    });
+  });
 });