Embedded Single Card: disable tooltip on line chart (#6511)

The internal embedded single card will not render the tooltip, so the line chart needs to handle that behavior.

Author: bhuang1323

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

@@ -26,6 +26,7 @@
   [ignoreYOutliers]="ignoreOutliers"
   [useDarkMode]="useDarkMode"
   [userViewBox]="userViewBox"
+  [disableTooltip]="disableTooltip"
   (onViewBoxOverridden)="isViewBoxOverridden = $event"
   (viewBoxChanged)="onLineChartZoom.emit($event)"
   [customVisTemplate]="lineChartCustomVis"

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() disableTooltip!: boolean;
 
   @Output()
   onTimeSelectionChanged = new EventEmitter<{

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

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

tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ng.html

@@ -50,6 +50,7 @@
       [tooltipOriginEl]="overlayTarget"
       [domDim]="domDimensions.main"
       [tooltipTemplate]="tooltipTemplate"
+      [disableTooltip]="disableTooltip"
       (onViewExtentChange)="onViewBoxChanged($event)"
       (onViewExtentReset)="viewBoxReset()"
       (onInteractionStateChange)="onInteractionStateChange($event)"

tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts

@@ -142,6 +142,8 @@ export class LineChartComponent
   @Input()
   lineOnly?: boolean = false;
 
+  @Input() disableTooltip?: boolean = false;
+
   @Output()
   viewBoxChanged = new EventEmitter<Extent | null>();
 

tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_interactive_view.ng.html

@@ -52,6 +52,7 @@
   #tooltipOrigin="cdkOverlayOrigin"
 ></div>
 <ng-template
+  *ngIf="!disableTooltip"
   cdkConnectedOverlay
   [cdkConnectedOverlayOrigin]="tooltipOriginEl"
   [cdkConnectedOverlayOpen]="tooltipDisplayAttached && state.getValue() === InteractionState.NONE"

tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_interactive_view.ts

@@ -132,6 +132,8 @@ export class LineChartInteractiveViewComponent
   @Input()
   tooltipTemplate?: TooltipTemplate;
 
+  @Input() disableTooltip?: boolean;
+
   @Output()
   onViewExtentChange = new EventEmitter<{dataExtent: Extent}>();
 

tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_interactive_view_test.ts

@@ -48,6 +48,7 @@ interface Coord {
       [yScale]="yScale"
       [domDim]="domDim"
       [tooltipOriginEl]="tooltipOrigin"
+      [disableTooltip]="disableTooltip"
       (onViewExtentChange)="onViewExtentChange($event)"
       (onViewExtentReset)="onViewExtentReset()"
       (onInteractionStateChange)="onInteractionStateChange($event)"
@@ -83,6 +84,9 @@ class TestableComponent {
   @Input()
   domDim!: Dimension;
 
+  @Input()
+  disableTooltip: boolean = false;
+
   @Input()
   onViewExtentChange!: (extent: Extent) => void;
 
@@ -274,6 +278,17 @@ describe('line_chart_v2/sub_view/interactive_view test', () => {
       expect(overlayContainer.getContainerElement().childElementCount).toBe(0);
     });
 
+    it('does not render tooltip when disableTooltip is true', () => {
+      const fixture = createComponent();
+      fixture.componentInstance.disableTooltip = true;
+      fixture.detectChanges();
+
+      emitEvent(fixture, 'mouseenter', {clientX: 10, clientY: 10});
+      fixture.detectChanges();
+
+      expect(overlayContainer.getContainerElement().childElementCount).toBe(0);
+    });
+
     it('omits data series that does not have the metadata or series', () => {
       const fixture = createComponent();
       fixture.componentInstance.seriesData = [