Linked Time: Enable range selection when linked time is enabled while linked time selection has an end value (#6264)

## Motivation for features / changes
Linked time is supposed to make all cards mirror the state of the card
most recently interacted with. Because cards can have range selection
enabled locally we need to ensure the global value gets updated when
linked time is enabled.

## Technical description of changes
I updated the linked time toggled reducer to enable range selection
globally if the linked time selection has an end value.
For Googlers: [internal tests all
pass](https://fusion2.corp.google.com/presubmit/tap/518701168/OCL:518701168:BASE:518705279:1679528159833:1e20cf2f/targets)

## Screenshots of UI changes

![7574630a-d08f-45da-a499-d686cf12fa8c](https://user-images.githubusercontent.com/78179109/227060003-23373aeb-0fe0-4864-8ae2-ed73ceac6c63.gif)

## Detailed steps to verify changes work correctly (as executed by you)
See gif
1) Start tensorboard
2) Navigate to localhost:6006
3) Ensure global step selection is disabled
4) Add two fobs to a scalar card
5) Enable linked time
6) Ensure range selection is enabled globally

Author: rileyajones

tensorboard/webapp/metrics/store/metrics_reducers.ts

@@ -1046,6 +1046,7 @@ const reducer = createReducer(
     let nextCardStepIndexMap = {...state.cardStepIndex};
     let nextLinkedTimeSelection = state.linkedTimeSelection;
     let nextStepSelectorEnabled = state.stepSelectorEnabled;
+    let nextRangeSelectionEnabled = state.rangeSelectionEnabled;
 
     // Updates cardStepIndex only when toggle to enable linked time.
     if (nextLinkedTimeEnabled) {
@@ -1055,6 +1056,7 @@ const reducer = createReducer(
         start: {step: startStep},
         end: null,
       };
+
       nextCardStepIndexMap = generateNextCardStepIndexFromLinkedTimeSelection(
         state.cardStepIndex,
         state.cardMetadataMap,
@@ -1063,6 +1065,7 @@ const reducer = createReducer(
       );
 
       nextStepSelectorEnabled = nextLinkedTimeEnabled;
+      nextRangeSelectionEnabled = Boolean(nextLinkedTimeSelection.end);
     }
 
     return {
@@ -1071,6 +1074,7 @@ const reducer = createReducer(
       linkedTimeEnabled: nextLinkedTimeEnabled,
       linkedTimeSelection: nextLinkedTimeSelection,
       stepSelectorEnabled: nextStepSelectorEnabled,
+      rangeSelectionEnabled: nextRangeSelectionEnabled,
     };
   }),
   on(actions.rangeSelectionToggled, (state) => {

tensorboard/webapp/metrics/store/metrics_reducers_test.ts

@@ -3551,6 +3551,18 @@ describe('metrics reducers', () => {
         expect(state2.linkedTimeEnabled).toBe(false);
       });
 
+      it('keeps rangeSelection when linkedTime is disabled', () => {
+        const state1 = buildMetricsState({
+          rangeSelectionEnabled: true,
+          stepSelectorEnabled: true,
+          linkedTimeEnabled: true,
+        });
+
+        const state2 = reducers(state1, actions.linkedTimeToggled({}));
+        expect(state2.rangeSelectionEnabled).toBe(true);
+        expect(state2.linkedTimeEnabled).toBe(false);
+      });
+
       it('sets cardStepIndex to step 0 when linkedTimeSelection is null before toggling', () => {
         const state1 = buildMetricsState({
           linkedTimeEnabled: false,
@@ -3690,6 +3702,38 @@ describe('metrics reducers', () => {
           end: null,
         });
       });
+
+      it('enables rangeSelection if linkedTimeSelection has an end step', () => {
+        const state1 = buildMetricsState({
+          stepSelectorEnabled: true,
+          rangeSelectionEnabled: false,
+          linkedTimeEnabled: false,
+          linkedTimeSelection: {
+            start: {step: 5},
+            end: {step: 10},
+          },
+        });
+
+        const state2 = reducers(state1, actions.linkedTimeToggled({}));
+        expect(state2.rangeSelectionEnabled).toBeTrue();
+        expect(state2.linkedTimeEnabled).toBeTrue();
+      });
+
+      it('does not enable rangeSelection if linkedTimeSelection does not have an end step', () => {
+        const state1 = buildMetricsState({
+          stepSelectorEnabled: true,
+          rangeSelectionEnabled: false,
+          linkedTimeEnabled: false,
+          linkedTimeSelection: {
+            start: {step: 5},
+            end: null,
+          },
+        });
+
+        const state2 = reducers(state1, actions.linkedTimeToggled({}));
+        expect(state2.linkedTimeEnabled).toBeTrue();
+        expect(state2.rangeSelectionEnabled).toBeFalse();
+      });
     });
   });