Linked Time: Fix histogram range selection bug (#6048)

Fix bug with histogram end fob not being shown due t #6033

Author: rileyajones

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

@@ -65,6 +65,7 @@
   [timeProperty]="timeProperty(xAxisType)"
   [color]="runColorScale(runId)"
   [timeSelection]="convertToTimeSelection(linkedTimeSelection)"
+  [rangeSelectionEnabled]="rangeSelectionEnabled"
   (onLinkedTimeSelectionChanged)="onLinkedTimeSelectionChanged.emit($event)"
   (onLinkedTimeToggled)="onLinkedTimeToggled.emit()"
 ></tb-histogram>

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

@@ -50,6 +50,7 @@ export class HistogramCardComponent {
   @Input() showFullSize!: boolean;
   @Input() isPinned!: boolean;
   @Input() linkedTimeSelection!: TimeSelectionView | null;
+  @Input() rangeSelectionEnabled?: boolean;
   @Input() isClosestStepHighlighted!: boolean | null;
 
   @Output() onFullSizeToggle = new EventEmitter<void>();

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

@@ -41,6 +41,7 @@ import {
   getCardTimeSeries,
   getMetricsHistogramMode,
   getMetricsLinkedTimeSelection,
+  getMetricsRangeSelectionEnabled,
   getMetricsXAxisType,
 } from '../../store';
 import {CardId, CardMetadata} from '../../types';
@@ -73,6 +74,7 @@ type HistogramCardMetadata = CardMetadata & {
       [isPinned]="isPinned$ | async"
       [isClosestStepHighlighted]="isClosestStepHighlighted$ | async"
       [linkedTimeSelection]="linkedTimeSelection$ | async"
+      [rangeSelectionEnabled]="rangeSelectionEnabled$ | async"
       (onFullSizeToggle)="onFullSizeToggle()"
       (onPinClicked)="pinStateChanged.emit($event)"
       (onLinkedTimeSelectionChanged)="onLinkedTimeSelectionChanged($event)"
@@ -106,6 +108,7 @@ export class HistogramCardContainer implements CardRenderer, OnInit {
   data$?: Observable<HistogramDatum[]>;
   mode$ = this.store.select(getMetricsHistogramMode);
   xAxisType$ = this.store.select(getMetricsXAxisType);
+  rangeSelectionEnabled$ = this.store.select(getMetricsRangeSelectionEnabled);
   showFullSize = false;
   isPinned$?: Observable<boolean>;
   linkedTimeSelection$?: Observable<TimeSelectionView | null>;

tensorboard/webapp/widgets/histogram/histogram_card_fob_controller.ts

@@ -30,6 +30,7 @@ import {TemporalScale} from './histogram_component';
     <card-fob-controller
       [axisDirection]="axisDirection"
       [timeSelection]="timeSelection"
+      [rangeSelectionEnabled]="rangeSelectionEnabled"
       [startStepAxisPosition]="getAxisPositionFromStartStep()"
       [endStepAxisPosition]="getAxisPositionFromEndStep()"
       [highestStep]="getHighestStep()"
@@ -44,6 +45,7 @@ import {TemporalScale} from './histogram_component';
 export class HistogramCardFobController {
   @Input() steps!: number[];
   @Input() timeSelection!: TimeSelection;
+  @Input() rangeSelectionEnabled?: boolean;
   @Input() temporalScale!: TemporalScale;
   @Output() onTimeSelectionChanged = new EventEmitter<TimeSelection>();
   @Output() onTimeSelectionToggled = new EventEmitter();

tensorboard/webapp/widgets/histogram/histogram_component.ng.html

@@ -54,6 +54,7 @@
       <histogram-card-fob-controller
         class="histogram-card-fob"
         [timeSelection]="timeSelection"
+        [rangeSelectionEnabled]="rangeSelectionEnabled"
         [steps]="getSteps()"
         [temporalScale]="scales.temporalScale"
         (onTimeSelectionChanged)="onLinkedTimeSelectionChanged.emit($event)"

tensorboard/webapp/widgets/histogram/histogram_component.ts

@@ -104,6 +104,8 @@ export class HistogramComponent implements AfterViewInit, OnChanges, OnDestroy {
 
   @Input() timeSelection: TimeSelection | null = null;
 
+  @Input() rangeSelectionEnabled: boolean = false;
+
   @Output() onLinkedTimeSelectionChanged =
     new EventEmitter<TimeSelectionWithAffordance>();
   @Output() onLinkedTimeToggled = new EventEmitter();