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

* StateTimeline: Fix shared crosshair

* Fix for StatusHistory also

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) {

public/app/plugins/panel/barchart/BarChartPanel.tsx

@@ -82,6 +82,7 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({
   const [coords, setCoords] = useState<{ viewport: CartesianCoords2D; canvas: CartesianCoords2D } | null>(null);
   const [focusedSeriesIdx, setFocusedSeriesIdx] = useState<number | null>(null);
   const [focusedPointIdx, setFocusedPointIdx] = useState<number | null>(null);
+  const [isActive, setIsActive] = useState<boolean>(false);
   const [shouldDisplayCloseButton, setShouldDisplayCloseButton] = useState<boolean>(false);
 
   const onCloseToolTip = () => {
@@ -298,6 +299,8 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({
             setCoords,
             setHover,
             isToolTipOpen,
+            isActive,
+            setIsActive,
           });
         }
 
@@ -307,7 +310,7 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({
 
         return (
           <Portal>
-            {hover && coords && (
+            {hover && coords && focusedSeriesIdx && (
               <VizTooltipContainer
                 position={{ x: coords.viewport.x, y: coords.viewport.y }}
                 offset={{ x: TOOLTIP_OFFSET, y: TOOLTIP_OFFSET }}

public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
-import { CartesianCoords2D, DataFrame, FieldType, PanelProps } from '@grafana/data';
+import { CartesianCoords2D, DashboardCursorSync, DataFrame, FieldType, PanelProps } from '@grafana/data';
 import {
   Portal,
   TooltipDisplayMode,
@@ -50,8 +50,9 @@ export const StateTimelinePanel: React.FC<TimelinePanelProps> = ({
   const [coords, setCoords] = useState<{ viewport: CartesianCoords2D; canvas: CartesianCoords2D } | null>(null);
   const [focusedSeriesIdx, setFocusedSeriesIdx] = useState<number | null>(null);
   const [focusedPointIdx, setFocusedPointIdx] = useState<number | null>(null);
+  const [isActive, setIsActive] = useState<boolean>(false);
   const [shouldDisplayCloseButton, setShouldDisplayCloseButton] = useState<boolean>(false);
-  const { canAddAnnotations } = usePanelContext();
+  const { sync, canAddAnnotations } = usePanelContext();
 
   const onCloseToolTip = () => {
     isToolTipOpen.current = false;
@@ -178,6 +179,9 @@ export const StateTimelinePanel: React.FC<TimelinePanelProps> = ({
             setCoords,
             setHover,
             isToolTipOpen,
+            isActive,
+            setIsActive,
+            sync,
           });
         }
 
@@ -198,9 +202,13 @@ export const StateTimelinePanel: React.FC<TimelinePanelProps> = ({
                     return null;
                   }
 
+                  if (focusedPointIdx === null || (!isActive && sync && sync() === DashboardCursorSync.Crosshair)) {
+                    return null;
+                  }
+
                   return (
                     <Portal>
-                      {hover && coords && (
+                      {hover && coords && focusedSeriesIdx && (
                         <VizTooltipContainer
                           position={{ x: coords.viewport.x, y: coords.viewport.y }}
                           offset={{ x: TOOLTIP_OFFSET, y: TOOLTIP_OFFSET }}

public/app/plugins/panel/status-history/StatusHistoryPanel.tsx

@@ -1,10 +1,11 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
-import { CartesianCoords2D, DataFrame, FieldType, PanelProps } from '@grafana/data';
+import { CartesianCoords2D, DashboardCursorSync, DataFrame, FieldType, PanelProps } from '@grafana/data';
 import {
   Portal,
   TooltipDisplayMode,
   UPlotConfigBuilder,
+  usePanelContext,
   useTheme2,
   VizTooltipContainer,
   ZoomPlugin,
@@ -46,7 +47,9 @@ export const StatusHistoryPanel: React.FC<TimelinePanelProps> = ({
   const [coords, setCoords] = useState<{ viewport: CartesianCoords2D; canvas: CartesianCoords2D } | null>(null);
   const [focusedSeriesIdx, setFocusedSeriesIdx] = useState<number | null>(null);
   const [focusedPointIdx, setFocusedPointIdx] = useState<number | null>(null);
+  const [isActive, setIsActive] = useState<boolean>(false);
   const [shouldDisplayCloseButton, setShouldDisplayCloseButton] = useState<boolean>(false);
+  const { sync } = usePanelContext();
 
   const onCloseToolTip = () => {
     isToolTipOpen.current = false;
@@ -179,6 +182,8 @@ export const StatusHistoryPanel: React.FC<TimelinePanelProps> = ({
             setCoords,
             setHover,
             isToolTipOpen,
+            isActive,
+            setIsActive,
           });
         }
 
@@ -186,11 +191,15 @@ export const StatusHistoryPanel: React.FC<TimelinePanelProps> = ({
           return null;
         }
 
+        if (focusedPointIdx === null || (!isActive && sync && sync() === DashboardCursorSync.Crosshair)) {
+          return null;
+        }
+
         return (
           <>
             <ZoomPlugin config={config} onZoom={onChangeTimeRange} />
             <Portal>
-              {hover && coords && (
+              {hover && coords && focusedSeriesIdx && (
                 <VizTooltipContainer
                   position={{ x: coords.viewport.x, y: coords.viewport.y }}
                   offset={{ x: TOOLTIP_OFFSET, y: TOOLTIP_OFFSET }}