fix: correct location of tooltip when dashboard is scrolled

Since Grafana tag 11.3.1 the tooltip position needs to be calculated w.r.t to the whole document due
to changes in the scrolling behaviour described in grafana/grafana#94222
and grafana/grafana#94842.

BREAKING CHANGE: The minimum version of Grafana is now 11.3.1:
https://github.com/grafana/grafana/blob/9225f4a1cbd1cfe8b69f1aa2d62309a9700533a5/public/app/plugins/panel/geomap/utils/tooltip.ts#L48

Author: felix-mu

src/GeomapOverlay.tsx

@@ -1,50 +1,56 @@
-import React, { PureComponent } from 'react';
-import { GrafanaTheme } from '@grafana/data';
-import { config } from '@grafana/runtime';
-import { stylesFactory } from '@grafana/ui';
+import React, { CSSProperties } from 'react';
+import { GrafanaTheme2 } from '@grafana/data';
+// import { config } from '@grafana/runtime';
+import { useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 
 export interface OverlayProps {
-  topRight?: React.ReactNode[];
+  topRight1?: React.ReactNode[];
+  topRight2?: React.ReactNode[];
   bottomLeft?: React.ReactNode[];
+  blStyle?: CSSProperties;
 }
 
-export class GeomapOverlay extends PureComponent<OverlayProps> {
-  style = getStyles(config.theme);
+export const GeomapOverlay = ({ topRight1, topRight2, bottomLeft, blStyle }: OverlayProps) => {
+  const topRight1Exists = (topRight1 && topRight1.length > 0) ?? false;
+  const styles = useStyles2(getStyles(topRight1Exists));
+  return (
+    <div className={styles.overlay}>
+      {Boolean(topRight1?.length) && <div className={styles.TR1}>{topRight1}</div>}
+      {Boolean(topRight2?.length) && <div className={styles.TR2}>{topRight2}</div>}
+      {Boolean(bottomLeft?.length) && (
+        <div className={styles.BL} style={blStyle}>
+          {bottomLeft}
+        </div>
+      )}
+    </div>
+  );
+};
 
-  constructor(props: OverlayProps) {
-    super(props);
-  }
-
-  render() {
-    const { topRight, bottomLeft } = this.props;
-    return (
-      <div className={this.style.overlay}>
-        {Boolean(topRight?.length) && <div className={this.style.TR}>{topRight}</div>}
-        {Boolean(bottomLeft?.length) && <div className={this.style.BL}>{bottomLeft}</div>}
-      </div>
-    );
-  }
-}
-
-const getStyles = stylesFactory((theme: GrafanaTheme) => ({
-  overlay: css`
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 500;
-    pointer-events: none;
-  `,
-  TR: css`
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    pointer-events: auto;
-  `,
-  BL: css`
-    position: absolute;
-    bottom: 8px;
-    left: 8px;
-    pointer-events: auto;
-  `,
-}));
+const getStyles = (topRight1Exists: boolean) => (theme: GrafanaTheme2) => ({
+  overlay: css({
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    zIndex: 500,
+    pointerEvents: 'none',
+  }),
+  TR1: css({
+    right: '0.5em',
+    pointerEvents: 'auto',
+    position: 'absolute',
+    top: '0.5em',
+  }),
+  TR2: css({
+    position: 'absolute',
+    top: topRight1Exists ? '80px' : '8px',
+    right: '8px',
+    pointerEvents: 'auto',
+  }),
+  BL: css({
+    position: 'absolute',
+    bottom: '8px',
+    left: '8px',
+    pointerEvents: 'auto',
+  }),
+});

src/GeomapPanel.tsx

@@ -466,7 +466,7 @@ export class GeomapPanel extends Component<Props, State> {
 
     const { hoverPayload } = this;
     hoverPayload.pageX = mouse.pageX;
-    hoverPayload.pageY = mouse.pageY;
+    hoverPayload.pageY = mouse.pageY - window.scrollY; // since Grafana 11.3.1: https://github.com/grafana/grafana/blob/main/public/app/plugins/panel/geomap/utils/tooltip.ts#L59
     hoverPayload.point = {
       lat: hover[1],
       lon: hover[0],
@@ -743,12 +743,12 @@ export class GeomapPanel extends Component<Props, State> {
     }
 
     // Update the react overlays
-    let topRight: ReactNode[] = [];
+    let topRight2: ReactNode[] = [];
     if (options.showDebug) {
-      topRight = [<DebugOverlay key="debug" map={this.map} />];
+      topRight2 = [<DebugOverlay key="debug" map={this.map} />];
     }
 
-    this.setState({ topRight });
+    this.setState({ topRight2 });
   }
 
   clearTooltip = () => {
@@ -762,7 +762,7 @@ export class GeomapPanel extends Component<Props, State> {
   };
 
   render() {
-    const { ttip, topRight, bottomLeft } = this.state;
+    const { ttip, topRight2, bottomLeft } = this.state;
 
     // Tooltip handling from: https://github.com/grafana/grafana/blob/17a3ec52b651a082bbf5604f75975c12cd2ba9ed/public/app/plugins/panel/geomap/GeomapPanel.tsx#L386
     // let { ttip, ttipOpen, topRight1, legends, topRight2 } = this.state;
@@ -774,19 +774,18 @@ export class GeomapPanel extends Component<Props, State> {
 
     return (
       <>
-        {
-          <Global styles={this.globalCSS} />
-        }
+        <Global styles={this.globalCSS} />
         <div className={styles.wrap} data-testid={testIds.geomapPanel.container} onMouseLeave={this.clearTooltip}>
           <div className={styles.map} ref={this.initMapRef}></div>
-          <GeomapOverlay bottomLeft={bottomLeft} topRight={topRight} />
+          <GeomapOverlay bottomLeft={bottomLeft} topRight2={topRight2} />
         </div>
           {ttip && ttip.data && (
             <Portal>
               <VizTooltipContainer
                 className={styles.viz}
                 position={{ x: ttip.pageX, y: ttip.pageY }}
                 offset={{ x: 10, y: 10 }}
+                allowPointerEvents
               >
                 <DataHoverView {...ttip} />
               </VizTooltipContainer>

src/mapcontrols/CustomLayerSwitcher.ts

@@ -16,6 +16,7 @@ export class CustomLayerSwitcher extends LayerSwitcher {
       this.icon = document.createElement('i');
       this.icon.setAttribute("class", hiddenClassNameButton!);
       this.button.appendChild(this.icon);
+      this.button.style.pointerEvents = "auto";
 
       this.text = document.createTextNode("");
       this.button.appendChild(this.text);

src/mapcontrols/DataExtentZoom.ts

@@ -32,12 +32,14 @@ export class DataExtentZoom extends Control {
         // icon.className = "bi bi-aspect-ratio";
         // icon.className = "bi bi-arrows-fullscreen";
         button.appendChild(icon);
+        button.style.pointerEvents = "auto";
 
         const element = document.createElement('div');
         // element.className = `ol-zoom ol-touch ${olCss.CLASS_UNSELECTABLE}`;
         element.className = `${olCss.CLASS_CONTROL} ol-zoom ol-touch ${olCss.CLASS_UNSELECTABLE}`;
         element.style.bottom = "20%";
         element.style.top = "unset";
+        element.style.pointerEvents = "auto";
 
         element.appendChild(button);
 

src/mapcontrols/SpatialFilter.ts

@@ -45,11 +45,13 @@ class SpatialFilterControl extends Control {
         const icon = document.createElement('i');
         icon.className = "bi bi-funnel";
         button.appendChild(icon);
+        button.style.pointerEvents = "auto";
 
         const element = document.createElement('div');
         element.className = `ol-zoom ol-touch ${olCss.CLASS_UNSELECTABLE} ${olCss.CLASS_CONTROL}`;
         button.setAttribute("aria-label", "spatial filter tool button");
         element.style.top = "50%";
+        // element.style.cursor = "pointer";
         element.appendChild(button);
 
         super({

src/mapcontrols/WMSLegend.tsx

@@ -54,6 +54,7 @@ export class WMSLegend extends Control {
         const icon = document.createElement('i');
         icon.className = "bi bi-list-task";
         button.appendChild(icon);
+        button.style.pointerEvents = "auto";
 
         const legendContainer = document.createElement("div");
         legendContainer.style.display = "block";