StateTimeline: Fix tooltip showing erroneously in shared crosshair dashboards (#55809) (#56521)

* StateTimeline: Fix shared crosshair

* Fix for StatusHistory also

(cherry picked from commit b622a87aee)

Co-authored-by: Victor Marin <36818606+mdvictor@users.noreply.github.com>

packages/grafana-ui/src/components/uPlot/config/addTooltipSupport.ts

@@ -1,6 +1,6 @@
 import { Dispatch, MutableRefObject, SetStateAction } from 'react';
 
-import { CartesianCoords2D } from '@grafana/data';
+import { CartesianCoords2D, DashboardCursorSync } from '@grafana/data';
 
 import { positionTooltip } from '../plugins/TooltipPlugin';
 
@@ -21,6 +21,9 @@ type SetupConfigParams = {
   setCoords: Dispatch<SetStateAction<{ viewport: CartesianCoords2D; canvas: CartesianCoords2D } | null>>;
   setHover: Dispatch<SetStateAction<HoverEvent | undefined>>;
   isToolTipOpen: MutableRefObject<boolean>;
+  isActive: boolean;
+  setIsActive: Dispatch<SetStateAction<boolean>>;
+  sync?: (() => DashboardCursorSync) | undefined;
 };
 
 // This applies config hooks to setup tooltip listener. Ideally this could happen in the same `prepConfig` function
@@ -33,13 +36,26 @@ export const addTooltipSupport = ({
   setCoords,
   setHover,
   isToolTipOpen,
+  isActive,
+  setIsActive,
+  sync,
 }: SetupConfigParams): UPlotConfigBuilder => {
   // Ensure tooltip is closed on config changes
   isToolTipOpen.current = false;
 
+  const onMouseEnter = () => {
+    if (setIsActive) {
+      setIsActive(true);
+    }
+  };
+
   const onMouseLeave = () => {
     if (!isToolTipOpen.current) {
       setCoords(null);
+
+      if (setIsActive) {
+        setIsActive(false);
+      }
     }
   };
 
@@ -50,6 +66,11 @@ export const addTooltipSupport = ({
     ref_over = u.over;
     ref_parent?.addEventListener('click', onUPlotClick);
     ref_over.addEventListener('mouseleave', onMouseLeave);
+    ref_over.addEventListener('mouseenter', onMouseEnter);
+
+    if (sync && sync() === DashboardCursorSync.Crosshair) {
+      u.root.classList.add('shared-crosshair');
+    }
   });
 
   const clearPopupIfOpened = () => {
@@ -64,6 +85,7 @@ export const addTooltipSupport = ({
   config.addHook('destroy', () => {
     ref_parent?.removeEventListener('click', onUPlotClick);
     ref_over?.removeEventListener('mouseleave', onMouseLeave);
+    ref_over?.removeEventListener('mouseenter', onMouseEnter);
     clearPopupIfOpened();
   });
 
@@ -84,7 +106,7 @@ export const addTooltipSupport = ({
         setFocusedSeriesIdx,
         setFocusedPointIdx,
         (clear) => {
-          if (clear) {
+          if (clear && isActive) {
             setCoords(null);
             return;
           }
@@ -104,7 +126,7 @@ export const addTooltipSupport = ({
   }
 
   config.addHook('setLegend', (u) => {
-    if (!isToolTipOpen.current && !tooltipInterpolator) {
+    if (!isToolTipOpen.current) {
       setFocusedPointIdx(u.legend.idx!);
     }
     if (u.cursor.idxs != null) {