Linked Time: Update histogram card to show linked time end step based on global range selection (#6263)

## Motivation for features / changes
Now that the step selection is being read from redux I found a bug where
the histogram card will show a linked time end step even if range
selection is disabled. Note this could only happen if an end step was
set a card.

## Technical description of changes
I added another parameter to the observable that gets the value of the
linked time selection in the histogram container card then conditionally
removed the end value based on status of the global range selection
setting.

## Screenshots of UI changes
Before

![image](https://user-images.githubusercontent.com/78179109/227029314-9198f501-308e-47e6-8e6e-fafbfad692f8.png)

After

![image](https://user-images.githubusercontent.com/78179109/227028830-2191560e-b0ff-4ef0-824f-6699e57d2efe.png)


## Detailed steps to verify changes work correctly (as executed by you)
1) Start tensorboard
2) Navigate to localhost:6006
3) Add a start step to two different scalar cards
4) Add an end step to one of the scalar cards
5) Enable link by step
6) Ensure range selection is not enabled and that end steps are not
shown on either card
7) Ensure only the start step is shown on histogram cards
8) Enable range selection
9) Ensure an end step is shown on all cards

Author: rileyajones

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

@@ -42,17 +42,19 @@ import {
   getCardLoadState,
   getCardMetadata,
   getCardPinnedState,
+  getCardStateMap,
   getCardTimeSeries,
   getMetricsHistogramMode,
   getMetricsLinkedTimeSelection,
+  getMetricsRangeSelectionEnabled,
   getMetricsXAxisType,
 } from '../../store';
-import {getCardStateMap} from '../../../selectors';
 import {CardId, CardMetadata} from '../../types';
 import {CardRenderer} from '../metrics_view_types';
 import {getTagDisplayName} from '../utils';
 import {
   maybeClipTimeSelectionView,
+  maybeOmitTimeSelectionEnd,
   maybeSetClosestStartStep,
   TimeSelectionView,
 } from './utils';
@@ -173,8 +175,9 @@ export class HistogramCardContainer implements CardRenderer, OnInit {
     this.linkedTimeSelection$ = combineLatest([
       this.store.select(getMetricsLinkedTimeSelection),
       this.steps$,
+      this.store.select(getMetricsRangeSelectionEnabled),
     ]).pipe(
-      map(([linkedTimeSelection, steps]) => {
+      map(([linkedTimeSelection, steps, rangeSelectionEnabled]) => {
         if (!linkedTimeSelection) return null;
 
         let minStep = Infinity;
@@ -183,8 +186,12 @@ export class HistogramCardContainer implements CardRenderer, OnInit {
           minStep = Math.min(step, minStep);
           maxStep = Math.max(step, maxStep);
         }
-        const linkedTimeSelectionView = maybeClipTimeSelectionView(
+        const formattedTimeSelection = maybeOmitTimeSelectionEnd(
           linkedTimeSelection,
+          rangeSelectionEnabled
+        );
+        const linkedTimeSelectionView = maybeClipTimeSelectionView(
+          formattedTimeSelection,
           minStep,
           maxStep
         );

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

@@ -39,9 +39,9 @@ import {
 import {buildNormalizedHistograms} from '../../../widgets/histogram/histogram_util';
 import {TruncatedPathModule} from '../../../widgets/text/truncated_path_module';
 import {
+  metricsCardFullSizeToggled,
   stepSelectorToggled,
   timeSelectionChanged,
-  metricsCardFullSizeToggled,
 } from '../../actions';
 import {PluginType} from '../../data_source';
 import * as selectors from '../../store/metrics_selectors';
@@ -287,6 +287,10 @@ describe('histogram card', () => {
   });
 
   describe('linked time', () => {
+    beforeEach(() => {
+      store.overrideSelector(selectors.getMetricsRangeSelectionEnabled, true);
+    });
+
     it('dispatches timeSelectionChanged when HistogramComponent emits onLinkedTimeSelectionChanged event', () => {
       provideMockCardSeriesData(selectSpy, PluginType.HISTOGRAMS, 'card1');
       store.overrideSelector(selectors.getMetricsLinkedTimeSelection, {
@@ -368,6 +372,31 @@ describe('histogram card', () => {
       });
     });
 
+    it('removes end step when range selection is disabled', () => {
+      provideMockCardSeriesData(
+        selectSpy,
+        PluginType.HISTOGRAMS,
+        'card1',
+        undefined,
+        [buildHistogramStepData({step: 5}), buildHistogramStepData({step: 15})]
+      );
+      store.overrideSelector(selectors.getMetricsLinkedTimeSelection, {
+        start: {step: 5},
+        end: {step: 10},
+      });
+      store.overrideSelector(selectors.getMetricsRangeSelectionEnabled, false);
+      const fixture = createHistogramCardContainer();
+      fixture.detectChanges();
+
+      const viz = fixture.debugElement.query(
+        By.directive(TestableHistogramWidget)
+      );
+      expect(viz.componentInstance.timeSelection).toEqual({
+        start: {step: 5},
+        end: null,
+      });
+    });
+
     describe('time selection beyond range of data', () => {
       it('clips the time selection to max step', () => {
         provideMockCardSeriesData(

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

@@ -221,7 +221,7 @@ export function isDatumVisible(
  * @param timeSelection
  * @param rangeSelectionEnabled
  */
-function maybeOmitTimeSelectionEnd(
+export function maybeOmitTimeSelectionEnd(
   timeSelection: TimeSelection,
   rangeSelectionEnabled: boolean
 ): TimeSelection {

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

@@ -20,6 +20,7 @@ import {
   getClosestStep,
   getDisplayNameForRun,
   maybeClipTimeSelectionView,
+  maybeOmitTimeSelectionEnd,
   maybeSetClosestStartStep,
   partitionSeries,
 } from './utils';
@@ -469,6 +470,38 @@ describe('metrics card_renderer utils test', () => {
     });
   });
 
+  describe('#maybeOmitTimeSelectionEnd', () => {
+    it('does nothing when range selection is enabled', () => {
+      expect(
+        maybeOmitTimeSelectionEnd(
+          {
+            start: {step: 5},
+            end: {step: 10},
+          },
+          true
+        )
+      ).toEqual({
+        start: {step: 5},
+        end: {step: 10},
+      });
+    });
+
+    it('sets end step to null when range selection is disabled', () => {
+      expect(
+        maybeOmitTimeSelectionEnd(
+          {
+            start: {step: 5},
+            end: {step: 10},
+          },
+          false
+        )
+      ).toEqual({
+        start: {step: 5},
+        end: null,
+      });
+    });
+  });
+
   describe('#formatTimeSelection', () => {
     it('returns [maxStep, maxStep] when above minMax', () => {
       expect(