Linked Time: Move step selector to redux part 4 - Update scalar_card to read from redux (#6240)

~Blocked by #6241~
~Blocked by #6254~
~Blocked by #6262~

## Motivation for features / changes
There are a variety of issues caused by cards storing their step
selection state without passing it to redux.
1) Pinned versions of cards lose their step selection
2) Adding another card using the comparison view resets all step
selections
3) Shareable links cannot contain step selection information

The time selection is actually derived from a handful of other settings
 * Linked Time Enabled + Linked Time Selection
 * Step Selection Enabled
 * Range Selection
 * Min/Max step contained within a card
* Min/Max step that a user has set (by zooming, modifying the axis, etc)
 * The actual step selection value stored in the card

Historic PRs
* In #6172 I modified the redux state to ensure all these values can be
stored in redux
* In #6234 and #6236 I started storing the step selection and minMax in
redux
* In #6230 I updated the new selectors to account for the changes made
in #6175 and add the ability to fully derive step selector values at the
selector level.

This is the final pr in this saga. It updates the scalar card to READ
from the new redux state.

## Technical description of changes
There are a variety of `null` check updates that need to be updated to
account for `undefined` states.
Now that almost all of the logic lies in the redux level a lot of logic
can be removed from the scalar_card_container.


## Screenshots of UI changes
Using the step selector

![2cfb7651-68ad-49a0-9683-7e51a77c36a7](https://user-images.githubusercontent.com/78179109/225113461-c654d95d-5110-43b6-9c99-24527dbed363.gif)

Pinning a card with a step selection

![34652274-ef57-409e-87f5-881eba7d82e9](https://user-images.githubusercontent.com/78179109/225113667-d79fa2ae-5eb8-4ac4-9d89-345d56e47582.gif)

A scalar card with a step selection next to one without

![image](https://user-images.githubusercontent.com/78179109/225116301-d6d2f3e9-ba7d-4d12-9162-d70dadc3dc3c.png)

A scalar card with step selection disabled (while global step selection
is enabled)

![image](https://user-images.githubusercontent.com/78179109/225116395-0823a55d-7dad-4810-ac22-262802f4abeb.png)

A scalar card with range selection disabled while global range selection
is enabled

![image](https://user-images.githubusercontent.com/78179109/225116581-fc871087-7ceb-49c6-8423-8041f60736ec.png)


## Detailed steps to verify changes work correctly (as executed by you)
While there are a few new tests added, the majority of this PR is
actually updating existing tests as each piece of the underlying
functionality is already fairly well tested.

1) Start tensorboard
2) Navigate to localhost:6006
3) Find two scalar cards
4) Enable step selection on one via the perspective fob
5) Assert it is not enabled on the other
6) Assert global step selection is not enabled
7) Add a second fob to the card
8) Repeat steps 5-7
9) Remove one of the fobs and enable global step selection
10) Assert a step selector appears on the other card
11) Enable global range selection
12) Assert two fobs now exist on both cards
13) Pin a card
14) Assert the pinned copy has the same step selection

## Alternate designs / implementations considered

Author: rileyajones

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

@@ -93,8 +93,8 @@ export class ScalarCardComponent<Downloader> {
   @Input() useDarkMode!: boolean;
   @Input() forceSvg!: boolean;
   @Input() columnCustomizationEnabled!: boolean;
-  @Input() linkedTimeSelection!: TimeSelectionView | null;
-  @Input() stepOrLinkedTimeSelection!: TimeSelection | null;
+  @Input() linkedTimeSelection: TimeSelectionView | undefined;
+  @Input() stepOrLinkedTimeSelection: TimeSelection | undefined;
   @Input() isProspectiveFobFeatureEnabled: Boolean = false;
   @Input() minMaxStep!: MinMaxStep;
   @Input() columnHeaders!: ColumnHeader[];
@@ -238,17 +238,14 @@ export class ScalarCardComponent<Downloader> {
   }
 
   showDataTable() {
-    return (
-      this.xAxisType === XAxisType.STEP &&
-      this.stepOrLinkedTimeSelection !== null
-    );
+    return this.xAxisType === XAxisType.STEP && this.stepOrLinkedTimeSelection;
   }
 
   showFobController() {
     return (
       this.xAxisType === XAxisType.STEP &&
-      (this.stepOrLinkedTimeSelection !== null ||
-        this.isProspectiveFobFeatureEnabled)
+      this.minMaxStep &&
+      (this.stepOrLinkedTimeSelection || this.isProspectiveFobFeatureEnabled)
     );
   }