From 692e8958a3a0731d013f72b54748a752672fa722 Mon Sep 17 00:00:00 2001
From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
Date: Thu, 4 Jan 2024 08:29:39 -0600
Subject: [PATCH] VizTooltips: Disable `newVizTooltips` when dashboard shared
 cursor is enabled (#79996)

---
 .../plugins/panel/candlestick/CandlestickPanel.tsx |  7 ++++---
 public/app/plugins/panel/heatmap/HeatmapPanel.tsx  | 14 +++++++-------
 .../panel/state-timeline/StateTimelinePanel.tsx    |  5 +++--
 .../panel/status-history/StatusHistoryPanel.tsx    |  6 ++++--
 .../plugins/panel/timeseries/TimeSeriesPanel.tsx   |  7 ++++---
 public/app/plugins/panel/trend/TrendPanel.tsx      |  4 +---
 public/app/plugins/panel/trend/TrendTooltip.tsx    |  1 -
 7 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx b/public/app/plugins/panel/candlestick/CandlestickPanel.tsx
index 10b0746ddc4..ea6d2b90616 100644
--- a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx
+++ b/public/app/plugins/panel/candlestick/CandlestickPanel.tsx
@@ -4,7 +4,7 @@
 import React, { useMemo } from 'react';
 import uPlot from 'uplot';
 
-import { Field, getDisplayProcessor, getLinksSupplier, PanelProps } from '@grafana/data';
+import { DashboardCursorSync, Field, getDisplayProcessor, getLinksSupplier, PanelProps } from '@grafana/data';
 import { PanelDataErrorView } from '@grafana/runtime';
 import { TooltipDisplayMode } from '@grafana/schema';
 import { TooltipPlugin, TooltipPlugin2, UPlotConfigBuilder, usePanelContext, useTheme2, ZoomPlugin } from '@grafana/ui';
@@ -229,6 +229,7 @@ export const CandlestickPanel = ({
   }
 
   const enableAnnotationCreation = Boolean(canAddAnnotations && canAddAnnotations());
+  const showNewVizTooltips = config.featureToggles.newVizTooltips && sync && sync() === DashboardCursorSync.Off;
 
   return (
     <TimeSeries
@@ -257,7 +258,7 @@ export const CandlestickPanel = ({
 
         return (
           <>
-            {config.featureToggles.newVizTooltips ? (
+            {showNewVizTooltips ? (
               <TooltipPlugin2
                 config={uplotConfig}
                 hoverMode={TooltipHoverMode.xAll}
@@ -293,7 +294,7 @@ export const CandlestickPanel = ({
               <AnnotationsPlugin annotations={data.annotations} config={uplotConfig} timeZone={timeZone} />
             )}
             {/* Enables annotations creation*/}
-            {!config.featureToggles.newVizTooltips ? (
+            {!showNewVizTooltips ? (
               enableAnnotationCreation ? (
                 <AnnotationEditorPlugin data={alignedDataFrame} timeZone={timeZone} config={uplotConfig}>
                   {({ startAnnotating }) => {
diff --git a/public/app/plugins/panel/heatmap/HeatmapPanel.tsx b/public/app/plugins/panel/heatmap/HeatmapPanel.tsx
index 16a884189d3..5e4e545925c 100644
--- a/public/app/plugins/panel/heatmap/HeatmapPanel.tsx
+++ b/public/app/plugins/panel/heatmap/HeatmapPanel.tsx
@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import {
+  DashboardCursorSync,
   DataFrame,
   DataFrameType,
   Field,
@@ -156,6 +157,7 @@ export const HeatmapPanel = ({
   // ugh
   const dataRef = useRef(info);
   dataRef.current = info;
+  const showNewVizTooltips = config.featureToggles.newVizTooltips && sync && sync() === DashboardCursorSync.Off;
 
   const builder = useMemo(() => {
     const scaleConfig: ScaleDistributionConfig = dataRef.current?.heatmap?.fields[1].config?.custom?.scaleDistribution;
@@ -164,8 +166,8 @@ export const HeatmapPanel = ({
       dataRef,
       theme,
       eventBus,
-      onhover: onhover,
-      onclick: options.tooltip.show ? onclick : null,
+      onhover: !showNewVizTooltips ? onhover : null,
+      onclick: !showNewVizTooltips && options.tooltip.show ? onclick : null,
       isToolTipOpen,
       timeZone,
       getTimeRange: () => timeRangeRef.current,
@@ -223,16 +225,14 @@ export const HeatmapPanel = ({
     );
   }
 
-  const newVizTooltips = config.featureToggles.newVizTooltips ?? false;
-
   return (
     <>
       <VizLayout width={width} height={height} legend={renderLegend()}>
         {(vizWidth: number, vizHeight: number) => (
           <UPlotChart config={builder} data={facets as any} width={vizWidth} height={vizHeight}>
             {/*children ? children(config, alignedFrame) : null*/}
-            {!newVizTooltips && <ZoomPlugin config={builder} onZoom={onChangeTimeRange} />}
-            {newVizTooltips && options.tooltip.show && (
+            {!showNewVizTooltips && <ZoomPlugin config={builder} onZoom={onChangeTimeRange} />}
+            {showNewVizTooltips && options.tooltip.show && (
               <TooltipPlugin2
                 config={builder}
                 hoverMode={TooltipHoverMode.xyOne}
@@ -267,7 +267,7 @@ export const HeatmapPanel = ({
           </UPlotChart>
         )}
       </VizLayout>
-      {!newVizTooltips && (
+      {!showNewVizTooltips && (
         <Portal>
           {hover && options.tooltip.show && (
             <VizTooltipContainer
diff --git a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
index f9928ec7a9e..385804ad129 100644
--- a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
+++ b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
@@ -163,6 +163,7 @@ export const StateTimelinePanel = ({
     }
   }
   const enableAnnotationCreation = Boolean(canAddAnnotations && canAddAnnotations());
+  const showNewVizTooltips = config.featureToggles.newVizTooltips && sync && sync() === DashboardCursorSync.Off;
 
   return (
     <TimelineChart
@@ -178,7 +179,7 @@ export const StateTimelinePanel = ({
       mode={TimelineMode.Changes}
     >
       {(builder, alignedFrame) => {
-        if (oldConfig.current !== builder) {
+        if (oldConfig.current !== builder && !showNewVizTooltips) {
           oldConfig.current = addTooltipSupport({
             config: builder,
             onUPlotClick,
@@ -195,7 +196,7 @@ export const StateTimelinePanel = ({
 
         return (
           <>
-            {config.featureToggles.newVizTooltips ? (
+            {showNewVizTooltips ? (
               <>
                 {options.tooltip.mode !== TooltipDisplayMode.None && (
                   <TooltipPlugin2
diff --git a/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx b/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
index 060694d0e75..3d73160272b 100644
--- a/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
+++ b/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
@@ -190,6 +190,8 @@ export const StatusHistoryPanel = ({
     );
   }
 
+  const showNewVizTooltips = config.featureToggles.newVizTooltips && sync && sync() === DashboardCursorSync.Off;
+
   return (
     <TimelineChart
       theme={theme}
@@ -204,7 +206,7 @@ export const StatusHistoryPanel = ({
       mode={TimelineMode.Samples}
     >
       {(builder, alignedFrame) => {
-        if (oldConfig.current !== builder) {
+        if (oldConfig.current !== builder && !showNewVizTooltips) {
           oldConfig.current = addTooltipSupport({
             config: builder,
             onUPlotClick,
@@ -228,7 +230,7 @@ export const StatusHistoryPanel = ({
                 disableCanvasRendering={true}
               />
             )}
-            {config.featureToggles.newVizTooltips ? (
+            {showNewVizTooltips ? (
               <>
                 {options.tooltip.mode !== TooltipDisplayMode.None && (
                   <TooltipPlugin2
diff --git a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
index 7cb96db9f22..8f858438e78 100644
--- a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
+++ b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 
-import { PanelProps, DataFrameType } from '@grafana/data';
+import { PanelProps, DataFrameType, DashboardCursorSync } from '@grafana/data';
 import { PanelDataErrorView } from '@grafana/runtime';
 import { TooltipDisplayMode } from '@grafana/schema';
 import { KeyboardPlugin, TooltipPlugin, TooltipPlugin2, usePanelContext, ZoomPlugin } from '@grafana/ui';
@@ -64,6 +64,7 @@ export const TimeSeriesPanel = ({
   }
 
   const enableAnnotationCreation = Boolean(canAddAnnotations && canAddAnnotations());
+  const showNewVizTooltips = config.featureToggles.newVizTooltips && sync && sync() === DashboardCursorSync.Off;
 
   return (
     <TimeSeries
@@ -92,7 +93,7 @@ export const TimeSeriesPanel = ({
             <KeyboardPlugin config={uplotConfig} />
             {options.tooltip.mode === TooltipDisplayMode.None || (
               <>
-                {config.featureToggles.newVizTooltips ? (
+                {showNewVizTooltips ? (
                   <TooltipPlugin2
                     config={uplotConfig}
                     hoverMode={
@@ -135,7 +136,7 @@ export const TimeSeriesPanel = ({
               <AnnotationsPlugin annotations={data.annotations} config={uplotConfig} timeZone={timeZone} />
             )}
             {/*Enables annotations creation*/}
-            {!config.featureToggles.newVizTooltips ? (
+            {!showNewVizTooltips ? (
               enableAnnotationCreation ? (
                 <AnnotationEditorPlugin data={alignedDataFrame} timeZone={timeZone} config={uplotConfig}>
                   {({ startAnnotating }) => {
diff --git a/public/app/plugins/panel/trend/TrendPanel.tsx b/public/app/plugins/panel/trend/TrendPanel.tsx
index fa3c6d355be..8990eb1bfe9 100644
--- a/public/app/plugins/panel/trend/TrendPanel.tsx
+++ b/public/app/plugins/panel/trend/TrendPanel.tsx
@@ -26,7 +26,7 @@ export const TrendPanel = ({
   replaceVariables,
   id,
 }: PanelProps<Options>) => {
-  const { sync, dataLinkPostProcessor } = usePanelContext();
+  const { dataLinkPostProcessor } = usePanelContext();
   // Need to fallback to first number field if no xField is set in options otherwise panel crashes 😬
   const trendXFieldName =
     options.xField ?? data.series[0].fields.find((field) => field.type === FieldType.number)?.name;
@@ -137,7 +137,6 @@ export const TrendPanel = ({
                           data={alignedDataFrame}
                           mode={options.tooltip.mode}
                           sortOrder={options.tooltip.sort}
-                          sync={sync}
                           dataIdxs={dataIdxs}
                           seriesIdx={seriesIdx}
                           isPinned={isPinned}
@@ -152,7 +151,6 @@ export const TrendPanel = ({
                     config={uPlotConfig}
                     mode={options.tooltip.mode}
                     sortOrder={options.tooltip.sort}
-                    sync={sync}
                     timeZone={timeZone}
                   />
                 )}
diff --git a/public/app/plugins/panel/trend/TrendTooltip.tsx b/public/app/plugins/panel/trend/TrendTooltip.tsx
index 277fde8f0e0..78c3fa48d28 100644
--- a/public/app/plugins/panel/trend/TrendTooltip.tsx
+++ b/public/app/plugins/panel/trend/TrendTooltip.tsx
@@ -43,7 +43,6 @@ export const TrendTooltip = ({
   data,
   mode = TooltipDisplayMode.Single,
   sortOrder = SortOrder.None,
-  sync,
   dataIdxs,
   seriesIdx,
   isPinned,