Embedded Single Card: single fob removal (#6510)

Add ability for the internal new single card to prevent single step selection fob removal.

Author: bhuang1323

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

@@ -41,6 +41,7 @@ import {MinMaxStep} from './scalar_card_types';
       [prospectiveStep]="prospectiveStep"
       [cardFobHelper]="cardFobHelper"
       [showExtendedLine]="true"
+      [allowFobRemoval]="allowFobRemoval"
       (onProspectiveStepChanged)="onProspectiveStepChanged($event)"
       (onTimeSelectionChanged)="onTimeSelectionChanged.emit($event)"
       (onTimeSelectionToggled)="onTimeSelectionToggled.emit($event)"
@@ -56,6 +57,7 @@ export class ScalarCardFobController {
   @Input() minMaxStep!: MinMaxStep;
   @Input() axisSize!: number;
   @Input() disableInteraction: boolean = false;
+  @Input() allowFobRemoval?: boolean = true;
 
   @Output() onTimeSelectionChanged = new EventEmitter<{
     timeSelection: TimeSelection;

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

@@ -86,6 +86,7 @@
       [minMaxHorizontalViewExtend]="viewExtent.x"
       [minMaxStep]="minMaxStep"
       [axisSize]="domDim.width"
+      [allowFobRemoval]="allowFobRemoval"
       (onTimeSelectionChanged)="onTimeSelectionChanged.emit($event)"
       (onTimeSelectionToggled)="onFobRemoved()"
     ></scalar-card-fob-controller>

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

@@ -72,6 +72,7 @@ export class ScalarCardLineChartComponent {
   @Input() minMaxStep!: MinMaxStep;
   @Input() userViewBox!: Extent | null;
   @Input() tooltipTemplate!: TooltipTemplate | null;
+  @Input() allowFobRemoval!: boolean;
   @Input() disableTooltip!: boolean;
 
   @Output()

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

@@ -79,6 +79,7 @@ import {ScalarCardLineChartComponent} from './scalar_card_line_chart_component';
       [forceSvg]="forceSvg$ | async"
       [userViewBox]="userViewBox$ | async"
       [disableTooltip]="disableTooltip"
+      [allowFobRemoval]="allowFobRemoval"
       (onTimeSelectionChanged)="onTimeSelectionChanged($event)"
       (onStepSelectorToggled)="onStepSelectorToggled($event)"
       (onLineChartZoom)="onLineChartZoom($event)"
@@ -111,6 +112,7 @@ export class ScalarCardLineChartContainer
   @Input() disableUpdate?: boolean = false;
   @Input() tooltipTemplate?: TooltipTemplate;
   @Input() disableTooltip?: boolean = false;
+  @Input() allowFobRemoval?: boolean = true;
 
   @ViewChild(ScalarCardLineChartComponent)
   scalarCardLineChart?: ScalarCardLineChartComponent;

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

@@ -172,6 +172,7 @@ class TestableLineChart {
       [tooltipTemplate]="tooltip"
       [minMaxStep]="minMaxStep"
       [stepOrLinkedTimeSelection]="stepOrLinkedTimeSelection"
+      [allowFobRemoval]="allowFobRemoval"
     >
     </scalar-card-line-chart>
     <ng-template
@@ -248,6 +249,7 @@ class TestableScalarCardLineChart {
   @Input() dataPointForTesting: {x: number; y: number} = {x: 0, y: 0};
   @Input() smoothingEnabled: boolean = false;
   @Input() tooltipSort: TooltipSort = TooltipSort.ALPHABETICAL;
+  @Input() allowFobRemoval: boolean = true;
 
   readonly relativeXFormatter = relativeTimeFormatter;
   readonly valueFormatter = numberFormatter;
@@ -1577,6 +1579,66 @@ describe('scalar card line chart', () => {
         expect(fobController.endFobWrapper).toBeUndefined();
       }));
     });
+
+    it('does not render dismiss icon for single fob removal when allowFobRemoval is false', fakeAsync(() => {
+      const fixture = createComponent();
+      fixture.componentInstance.cardId = 'card1';
+      fixture.componentInstance.minMaxStep = {
+        minStep: 0,
+        maxStep: 100,
+      };
+      fixture.componentInstance.stepOrLinkedTimeSelection = {
+        start: {step: 20},
+        end: null,
+      };
+      fixture.componentInstance.allowFobRemoval = false;
+      fixture.detectChanges();
+
+      expect(
+        fixture.debugElement.queryAll(By.css('[aria-label="Deselect fob"]'))
+          .length
+      ).toEqual(0);
+    }));
+
+    it('renders dismiss icon for single fob removal when allowFobRemoval is true', fakeAsync(() => {
+      const fixture = createComponent();
+      fixture.componentInstance.cardId = 'card1';
+      fixture.componentInstance.minMaxStep = {
+        minStep: 0,
+        maxStep: 100,
+      };
+      fixture.componentInstance.stepOrLinkedTimeSelection = {
+        start: {step: 20},
+        end: null,
+      };
+      fixture.componentInstance.allowFobRemoval = true;
+      fixture.detectChanges();
+
+      expect(
+        fixture.debugElement.queryAll(By.css('[aria-label="Deselect fob"]'))
+          .length
+      ).toEqual(1);
+    }));
+
+    it('renders dismiss icon for range fob removal even when allowFobRemoval is false', fakeAsync(() => {
+      const fixture = createComponent();
+      fixture.componentInstance.cardId = 'card1';
+      fixture.componentInstance.minMaxStep = {
+        minStep: 0,
+        maxStep: 100,
+      };
+      fixture.componentInstance.stepOrLinkedTimeSelection = {
+        start: {step: 20},
+        end: {step: 40},
+      };
+      fixture.componentInstance.allowFobRemoval = false;
+      fixture.detectChanges();
+
+      expect(
+        fixture.debugElement.queryAll(By.css('[aria-label="Deselect fob"]'))
+          .length
+      ).toEqual(2);
+    }));
   });
 
   describe('data table line chart integration', () => {

tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ng.html

@@ -52,6 +52,7 @@
     ></div>
     <card-fob
       class="startFob"
+      [allowRemoval]="allowFobRemoval ? true : timeSelection.end"
       [ngClass]="isVertical() ? 'vertical-fob' : 'horizontal-fob'"
       [step]="timeSelection.start.step"
       (mousedown)="startDrag(Fob.START, TimeSelectionAffordance.FOB, $event)"

tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ts

@@ -63,6 +63,7 @@ export class CardFobControllerComponent {
   @Input() showExtendedLine?: Boolean = false;
   @Input() prospectiveStep: number | null = null;
   @Input() prospectiveStepAxisPosition?: number | null = null;
+  @Input() allowFobRemoval?: boolean = true;
 
   @Output() onTimeSelectionChanged =
     new EventEmitter<TimeSelectionWithAffordance>();