linked time: update scalar to "real" min max step (#5993)

* Motivation for features / changes
The "minMax" input of scalar fob controller is actually the
viewExtend/viewBox, not the min max step, while it's got used as the min
max step. Visually the extend is larger than the min/max step and it is
what we need for forward and reverse function.
```
            A   B   (chart)   C   D
            |---|-------------|---|
```
axis size: A to D
minMax:  A to D
line chart area: B to C
min step: B
max step C

This wasn't noticed because we clip the time selection at the scalar
card level to prevent the fob go out of the valid range (B to C)

* Technical description of changes
This PR adds another minMaxStep input and rename the old minMax to
minMaxHorizentalViewExtend.
(Note: skip the rename in test since that matters less)

* Screenshots of UI changes
Everything should be the same.

Author: japie1235813

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

@@ -231,7 +231,8 @@
     <scalar-card-fob-controller
       [timeSelection]="stepOrLinkedTimeSelection"
       [scale]="xScale"
-      [minMax]="viewExtent.x"
+      [minMaxHorizontalViewExtend]="viewExtent.x"
+      [minMaxStep]="minMaxStep"
       [axisSize]="domDim.width"
       (onTimeSelectionChanged)="onTimeSelectionChanged.emit($event)"
       (onTimeSelectionToggled)="onFobRemoved()"

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

@@ -24,6 +24,7 @@ import {
   TimeSelectionAffordance,
 } from '../../../widgets/card_fob/card_fob_types';
 import {Scale} from '../../../widgets/line_chart_v2/lib/public_types';
+import {MinMaxStep} from './scalar_card_types';
 
 @Component({
   selector: 'scalar-card-fob-controller',
@@ -47,7 +48,8 @@ import {Scale} from '../../../widgets/line_chart_v2/lib/public_types';
 export class ScalarCardFobController {
   @Input() timeSelection!: TimeSelection;
   @Input() scale!: Scale;
-  @Input() minMax!: [number, number];
+  @Input() minMaxHorizontalViewExtend!: [number, number];
+  @Input() minMaxStep!: MinMaxStep;
   @Input() axisSize!: number;
 
   @Output() onTimeSelectionChanged = new EventEmitter<{
@@ -65,7 +67,7 @@ export class ScalarCardFobController {
 
   getAxisPositionFromStartStep() {
     return this.scale.forward(
-      this.minMax,
+      this.minMaxHorizontalViewExtend,
       [0, this.axisSize],
       this.timeSelection.start.step
     );
@@ -76,20 +78,18 @@ export class ScalarCardFobController {
       return null;
     }
     return this.scale.forward(
-      this.minMax,
+      this.minMaxHorizontalViewExtend,
       [0, this.axisSize],
       this.timeSelection.end.step
     );
   }
 
   getHighestStep(): number {
-    const minMax = this.minMax;
-    return Math.floor(minMax[0] < minMax[1] ? minMax[1] : minMax[0]);
+    return this.minMaxStep.maxStep;
   }
 
   getLowestStep(): number {
-    const minMax = this.minMax;
-    return Math.ceil(minMax[0] < minMax[1] ? minMax[0] : minMax[1]);
+    return this.minMaxStep.minStep;
   }
 
   getStepHigherThanAxisPosition(position: number): number {
@@ -113,7 +113,11 @@ export class ScalarCardFobController {
    */
   getStepAtMousePostion(position: number): number {
     const stepAtMouse = Math.round(
-      this.scale.reverse(this.minMax, [0, this.axisSize], position)
+      this.scale.reverse(
+        this.minMaxHorizontalViewExtend,
+        [0, this.axisSize],
+        position
+      )
     );
     if (stepAtMouse > this.getHighestStep()) {
       return this.getHighestStep();

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

@@ -16,6 +16,7 @@ import {CardFobControllerComponent} from '../../../widgets/card_fob/card_fob_con
 import {TimeSelection} from '../../../widgets/card_fob/card_fob_types';
 import {LinearScale} from '../../../widgets/line_chart_v2/lib/scale';
 import {ScalarCardFobController} from './scalar_card_fob_controller';
+import {MinMaxStep} from './scalar_card_types';
 
 const SCALE_RATIO = 10;
 
@@ -33,6 +34,7 @@ describe('ScalarFobController', () => {
   function createComponent(input: {
     timeSelection?: TimeSelection;
     minMax?: [number, number];
+    minMaxStep?: MinMaxStep;
     axisSize?: number;
   }): ComponentFixture<ScalarCardFobController> {
     const fixture = TestBed.createComponent(ScalarCardFobController);
@@ -41,7 +43,13 @@ describe('ScalarFobController', () => {
       end: null,
     };
 
-    fixture.componentInstance.minMax = input.minMax ?? [0, 1];
+    fixture.componentInstance.minMaxHorizontalViewExtend = input.minMax ?? [
+      -1, 2,
+    ];
+    fixture.componentInstance.minMaxStep = input.minMaxStep ?? {
+      minStep: 0,
+      maxStep: 1,
+    };
     fixture.componentInstance.axisSize = input.axisSize ?? 1;
 
     const fakeScale = new LinearScale();
@@ -89,56 +97,14 @@ describe('ScalarFobController', () => {
     });
   });
 
-  describe('getHighestStep', () => {
-    it('gets the highest step when minMax is in order', () => {
-      const fixture = createComponent({minMax: [0, 2]});
-
-      const highestStep = fixture.componentInstance.getHighestStep();
-
-      expect(highestStep).toBe(2);
-    });
-
-    it('gets the highest step when minMax is not in order', () => {
-      const fixture = createComponent({minMax: [2, 0]});
-
-      const highestStep = fixture.componentInstance.getHighestStep();
+  it('gets the highest/lowest step', () => {
+    const fixture = createComponent({minMaxStep: {minStep: 0, maxStep: 2}});
 
-      expect(highestStep).toBe(2);
-    });
-
-    it('returns the next lowest step when max is a floating point.', () => {
-      const fixture = createComponent({minMax: [4.5, 1]});
-
-      const lowestStep = fixture.componentInstance.getHighestStep();
-
-      expect(lowestStep).toBe(4);
-    });
-  });
+    const highestStep = fixture.componentInstance.getHighestStep();
+    const lowestStep = fixture.componentInstance.getLowestStep();
 
-  describe('getLowestStep', () => {
-    it('gets the lowest step when minMax is in order', () => {
-      const fixture = createComponent({minMax: [0, 2]});
-
-      const lowestStep = fixture.componentInstance.getLowestStep();
-
-      expect(lowestStep).toBe(0);
-    });
-
-    it('gets the lowest step when minMax is not in order', () => {
-      const fixture = createComponent({minMax: [2, 0]});
-
-      const lowestStep = fixture.componentInstance.getLowestStep();
-
-      expect(lowestStep).toBe(0);
-    });
-
-    it('returns the next highest step when min is a floating point.', () => {
-      const fixture = createComponent({minMax: [4, 1.5]});
-
-      const lowestStep = fixture.componentInstance.getLowestStep();
-
-      expect(lowestStep).toBe(2);
-    });
+    expect(lowestStep).toBe(0);
+    expect(highestStep).toBe(2);
   });
 
   describe('getStepHigherThanAxisPosition', () => {
@@ -151,15 +117,15 @@ describe('ScalarFobController', () => {
     });
 
     it('gets highest step if given position is higher than the position at highest step', () => {
-      const fixture = createComponent({minMax: [0, 2]});
+      const fixture = createComponent({minMaxStep: {minStep: 0, maxStep: 2}});
 
       const step = fixture.componentInstance.getStepHigherThanAxisPosition(30);
 
       expect(step).toBe(2);
     });
 
     it('gets lowest step if given position is lower than the position at lowest step', () => {
-      const fixture = createComponent({minMax: [1, 3]});
+      const fixture = createComponent({minMaxStep: {minStep: 1, maxStep: 3}});
 
       const step = fixture.componentInstance.getStepHigherThanAxisPosition(0);
 
@@ -177,15 +143,15 @@ describe('ScalarFobController', () => {
     });
 
     it('gets highest step if given position is higher than the position at highest step', () => {
-      const fixture = createComponent({minMax: [0, 2]});
+      const fixture = createComponent({minMaxStep: {minStep: 0, maxStep: 2}});
 
       const step = fixture.componentInstance.getStepLowerThanAxisPosition(30);
 
       expect(step).toBe(2);
     });
 
     it('gets lowest step if given position is lower than the position at lowest step', () => {
-      const fixture = createComponent({minMax: [1, 3]});
+      const fixture = createComponent({minMaxStep: {minStep: 1, maxStep: 3}});
 
       const step = fixture.componentInstance.getStepLowerThanAxisPosition(0);