Linked Time: Render end fob based on the status of rangeSelectionEnabled (#6033)

## Motivation for features / changes
We currently have two sources of truth for determining if range
selection is enabled, the existence of the timeSelection end step AND
the state variable `rangeSelectionEnabled`. This means that when range
selection is disabled we need to clear the end step.

In a future PR I will stop the end step from being removed when range
selection is disabled.

## Screenshots of UI changes
None

* Detailed steps to verify changes work correctly (as executed by you)
1) Start tensorboard
2) Go to http://localhost:6006?enableRangeSelection
3) Enable range selection
4) Ensure a second fob appears on the scalar card
5) Disable range selection
6) Assert the end fob is removed.

Author: rileyajones

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

@@ -194,6 +194,7 @@
       [minMaxHorizontalViewExtend]="viewExtent.x"
       [minMaxStep]="minMaxStep"
       [axisSize]="domDim.width"
+      [rangeSelectionEnabled]="rangeSelectionEnabled"
       [isProspectiveFobFeatureEnabled]="isProspectiveFobFeatureEnabled"
       (onTimeSelectionChanged)="onTimeSelectionChanged.emit($event)"
       (onTimeSelectionToggled)="onFobRemoved()"

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() rangeSelectionEnabled: boolean = false;
   @Input() isProspectiveFobFeatureEnabled: Boolean = false;
   @Input() minMaxStep!: MinMaxStep;
   @Input() dataHeaders!: ColumnHeaders[];

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

@@ -157,6 +157,7 @@ function areSeriesEqual(
       [useDarkMode]="useDarkMode$ | async"
       [linkedTimeSelection]="linkedTimeSelection$ | async"
       [stepOrLinkedTimeSelection]="stepOrLinkedTimeSelection$ | async"
+      [rangeSelectionEnabled]="rangeSelectionEnabled$ | async"
       [isProspectiveFobFeatureEnabled]="isProspectiveFobFeatureEnabled$ | async"
       [forceSvg]="forceSvg$ | async"
       [minMaxStep]="minMaxSteps$ | async"
@@ -223,6 +224,9 @@ export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
   });
   readonly stepSelectorTimeSelection$ =
     new BehaviorSubject<TimeSelection | null>(null);
+  readonly rangeSelectionEnabled$ = this.store.select(
+    getMetricsRangeSelectionEnabled
+  );
   readonly useDarkMode$ = this.store.select(getDarkModeEnabled);
   readonly ignoreOutliers$ = this.store.select(getMetricsIgnoreOutliers);
   readonly tooltipSort$ = this.store.select(getMetricsTooltipSort);

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

@@ -32,6 +32,7 @@ import {MinMaxStep} from './scalar_card_types';
     <card-fob-controller
       [axisDirection]="axisDirection"
       [timeSelection]="timeSelection"
+      [rangeSelectionEnabled]="rangeSelectionEnabled"
       [startStepAxisPosition]="getAxisPositionFromStartStep()"
       [endStepAxisPosition]="getAxisPositionFromEndStep()"
       [prospectiveStepAxisPosition]="getAxisPositionFromProspectiveStep()"
@@ -55,6 +56,7 @@ export class ScalarCardFobController {
   @Input() minMaxHorizontalViewExtend!: [number, number];
   @Input() minMaxStep!: MinMaxStep;
   @Input() axisSize!: number;
+  @Input() rangeSelectionEnabled: boolean = false;
   @Input() isProspectiveFobFeatureEnabled: Boolean = false;
 
   @Output() onTimeSelectionChanged = new EventEmitter<{

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

@@ -3299,6 +3299,19 @@ describe('scalar card', () => {
         ).toBeFalsy();
       }));
 
+      it('Does not render end fob when range selection is disabled', fakeAsync(() => {
+        store.overrideSelector(
+          selectors.getMetricsRangeSelectionEnabled,
+          false
+        );
+        const fixture = createComponent('card1');
+        fixture.detectChanges();
+
+        expect(
+          fixture.debugElement.queryAll(By.directive(CardFobComponent)).length
+        ).toEqual(1);
+      }));
+
       it('dispatches timeSelectionChanged actions when fob is dragged while linked time is enabled', fakeAsync(() => {
         store.overrideSelector(getMetricsLinkedTimeEnabled, true);
         store.overrideSelector(getMetricsLinkedTimeSelection, {

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

@@ -57,7 +57,7 @@
   </div>
   <div
     #endFobWrapper
-    *ngIf="timeSelection && timeSelection.end"
+    *ngIf="timeSelection && timeSelection.end && rangeSelectionEnabled"
     class="time-fob-wrapper"
     [style.transform]="getCssTranslatePxForEndFob()"
   >

tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ts

@@ -55,6 +55,7 @@ export class CardFobControllerComponent {
   readonly prospectiveFobWrapper!: ElementRef;
   @Input() axisDirection!: AxisDirection;
   @Input() timeSelection?: TimeSelection;
+  @Input() rangeSelectionEnabled: boolean = false;
   @Input() cardFobHelper!: CardFobGetStepFromPositionHelper;
   @Input() startStepAxisPosition!: number;
   @Input() endStepAxisPosition!: number | null;

tensorboard/webapp/widgets/card_fob/card_fob_controller_test.ts

@@ -33,6 +33,7 @@ import {
       #FobController
       [axisDirection]="axisDirection"
       [timeSelection]="timeSelection"
+      [rangeSelectionEnabled]="rangeSelectionEnabled"
       [startStepAxisPosition]="getAxisPositionFromStartStep()"
       [endStepAxisPosition]="getAxisPositionFromEndStep()"
       [prospectiveStepAxisPosition]="getAxisPositionFromProspectiveStep()"
@@ -54,6 +55,7 @@ class TestableComponent {
 
   @Input() axisDirection!: AxisDirection;
   @Input() timeSelection!: TimeSelection;
+  @Input() rangeSelectionEnabled: boolean = false;
   @Input() cardFobHelper!: CardFobGetStepFromPositionHelper;
   @Input() showExtendedLine?: Boolean;
   @Input() highestStep!: number;
@@ -94,6 +96,7 @@ describe('card_fob_controller', () => {
   function createComponent(input: {
     axisDirection?: AxisDirection;
     timeSelection: TimeSelection;
+    enableRangeSelection?: boolean;
     showExtendedLine?: Boolean;
     steps?: number[];
     isProspectiveFobFeatureEnabled?: Boolean;
@@ -150,6 +153,9 @@ describe('card_fob_controller', () => {
       input.axisDirection ?? AxisDirection.VERTICAL;
 
     fixture.componentInstance.timeSelection = input.timeSelection;
+    fixture.componentInstance.rangeSelectionEnabled = Boolean(
+      input.enableRangeSelection
+    );
 
     fixture.componentInstance.showExtendedLine =
       input.showExtendedLine ?? false;
@@ -183,6 +189,7 @@ describe('card_fob_controller', () => {
   it('sets fob position based on time selection', () => {
     const fixture = createComponent({
       timeSelection: {start: {step: 2}, end: {step: 5}},
+      enableRangeSelection: true,
       axisDirection: AxisDirection.HORIZONTAL,
     });
     fixture.detectChanges();
@@ -253,6 +260,7 @@ describe('card_fob_controller', () => {
     it('swaps fobs being dragged when start > end', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 1}, end: {step: 2}},
+        enableRangeSelection: true,
       });
       fixture.detectChanges();
       const fobController = fixture.componentInstance.fobController;
@@ -286,6 +294,7 @@ describe('card_fob_controller', () => {
     it('swaps fobs being dragged when end < start', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 2}, end: {step: 3}},
+        enableRangeSelection: true,
       });
       fixture.detectChanges();
       const fobController = fixture.componentInstance.fobController;
@@ -319,6 +328,7 @@ describe('card_fob_controller', () => {
     it('does not swaps fobs when start === end', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 2}, end: {step: 3}},
+        enableRangeSelection: true,
       });
       fixture.detectChanges();
       const fobController = fixture.componentInstance.fobController;
@@ -353,6 +363,7 @@ describe('card_fob_controller', () => {
     it('does not fire event when time selection does not change', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 2}, end: {step: 3}},
+        enableRangeSelection: true,
       });
       fixture.detectChanges();
       const fobController = fixture.componentInstance.fobController;
@@ -544,6 +555,7 @@ describe('card_fob_controller', () => {
     it('end fob moves to the mouse when mouse is dragging up and mouse is above the fob', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 1}, end: {step: 1}},
+        enableRangeSelection: true,
       });
       fixture.detectChanges();
       const fobController = fixture.componentInstance.fobController;
@@ -582,6 +594,7 @@ describe('card_fob_controller', () => {
     it('end fob moves to the mouse when mouse is dragging down and mouse is below the fob', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 1}, end: {step: 4}},
+        enableRangeSelection: true,
       });
       fixture.detectChanges();
       const fobController = fixture.componentInstance.fobController;
@@ -619,6 +632,7 @@ describe('card_fob_controller', () => {
     it('end fob does not move when mouse is dragging down but, mouse is above the fob', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 1}, end: {step: 2}},
+        enableRangeSelection: true,
       });
       fixture.detectChanges();
       const fobController = fixture.componentInstance.fobController;
@@ -649,6 +663,7 @@ describe('card_fob_controller', () => {
     it('end fob does not move when mouse is dragging up but, mouse is below the fob', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 1}, end: {step: 3}},
+        enableRangeSelection: true,
       });
       fixture.detectChanges();
       const fobController = fixture.componentInstance.fobController;
@@ -855,6 +870,7 @@ describe('card_fob_controller', () => {
     it('end fob moves to the mouse when mouse is dragging left and mouse is left of the fob', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 1}, end: {step: 1}},
+        enableRangeSelection: true,
         axisDirection: AxisDirection.HORIZONTAL,
       });
       fixture.detectChanges();
@@ -894,6 +910,7 @@ describe('card_fob_controller', () => {
     it('end fob moves to the mouse when mouse is dragging right and mouse is right of the fob', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 1}, end: {step: 4}},
+        enableRangeSelection: true,
         axisDirection: AxisDirection.HORIZONTAL,
       });
       fixture.detectChanges();
@@ -932,6 +949,7 @@ describe('card_fob_controller', () => {
     it('end fob does not move when mouse is dragging right but, mouse is left of the fob', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 1}, end: {step: 2}},
+        enableRangeSelection: true,
         axisDirection: AxisDirection.HORIZONTAL,
       });
       fixture.detectChanges();
@@ -963,6 +981,7 @@ describe('card_fob_controller', () => {
     it('end fob does not move when mouse is dragging left but, mouse is right of the fob', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 1}, end: {step: 3}},
+        enableRangeSelection: true,
         axisDirection: AxisDirection.HORIZONTAL,
       });
       fixture.detectChanges();
@@ -1008,6 +1027,7 @@ describe('card_fob_controller', () => {
     it('renders two lines on range selection', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 1}, end: {step: 4}},
+        enableRangeSelection: true,
         showExtendedLine: true,
       });
       fixture.detectChanges();
@@ -1021,6 +1041,7 @@ describe('card_fob_controller', () => {
     it('clicks and drags the line to change selected step in horizontal axis', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 1}, end: {step: 3}},
+        enableRangeSelection: true,
         axisDirection: AxisDirection.HORIZONTAL,
         showExtendedLine: true,
       });
@@ -1111,6 +1132,7 @@ describe('card_fob_controller', () => {
     it('range selection start fob step typed which is less than end fob step', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 1}, end: {step: 4}},
+        enableRangeSelection: true,
       });
       fixture.detectChanges();
       const fobController = fixture.componentInstance.fobController;
@@ -1128,6 +1150,7 @@ describe('card_fob_controller', () => {
     it('range selection end fob step typed which is greater than start fob step', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 1}, end: {step: 4}},
+        enableRangeSelection: true,
       });
       fixture.detectChanges();
       const fobController = fixture.componentInstance.fobController;
@@ -1145,6 +1168,7 @@ describe('card_fob_controller', () => {
     it('range selection swaps when start step is typed in which is greater than end step', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 1}, end: {step: 2}},
+        enableRangeSelection: true,
       });
       fixture.detectChanges();
       const fobController = fixture.componentInstance.fobController;
@@ -1162,6 +1186,7 @@ describe('card_fob_controller', () => {
     it('range selection swaps when end step is typed in which is less than start step', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 3}, end: {step: 4}},
+        enableRangeSelection: true,
       });
       fixture.detectChanges();
       const fobController = fixture.componentInstance.fobController;
@@ -1179,6 +1204,7 @@ describe('card_fob_controller', () => {
     it('properly handles a 0 step', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 3}, end: {step: 4}},
+        enableRangeSelection: true,
       });
       fixture.detectChanges();
       const fobController = fixture.componentInstance.fobController;
@@ -1220,6 +1246,7 @@ describe('card_fob_controller', () => {
     it('changing end fob input modifies end step', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 1}, end: {step: 3}},
+        enableRangeSelection: true,
       });
       fixture.detectChanges();
 
@@ -1263,6 +1290,7 @@ describe('card_fob_controller', () => {
     it('fires onTimeSelectionChanged to remove end fob when end fob is deselected', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 1}, end: {step: 3}},
+        enableRangeSelection: true,
       });
       fixture.detectChanges();
 
@@ -1284,6 +1312,7 @@ describe('card_fob_controller', () => {
     it('fires onTimeSelectionChanged to change the start fob step to the current end fob step and the end fob step to null when start fob is deselected in a range selection', () => {
       const fixture = createComponent({
         timeSelection: {start: {step: 1}, end: {step: 3}},
+        enableRangeSelection: true,
       });
       fixture.detectChanges();