Geomap: add geojson feature hover and tooltip (#39608)

public/app/plugins/panel/geomap/GeomapPanel.tsx

@@ -188,6 +188,7 @@ export class GeomapPanel extends Component<Props, State> {
     hoverPayload.data = undefined;
     hoverPayload.columnIndex = undefined;
     hoverPayload.rowIndex = undefined;
+    hoverPayload.feature = undefined;
 
     let ttip: GeomapHoverPayload = {} as GeomapHoverPayload;
     const features: GeomapHoverFeature[] = [];
@@ -198,6 +199,8 @@ export class GeomapPanel extends Component<Props, State> {
         if (frame) {
           hoverPayload.data = ttip.data = frame as DataFrame;
           hoverPayload.rowIndex = ttip.rowIndex = props['rowIndex'];
+        } else {
+          hoverPayload.feature = ttip.feature = feature;
         }
       }
       features.push({ feature, layer, geo });
@@ -206,7 +209,11 @@ export class GeomapPanel extends Component<Props, State> {
     this.props.eventBus.publish(this.hoverEvent);
 
     const currentTTip = this.state.ttip;
-    if (ttip.data !== currentTTip?.data || ttip.rowIndex !== currentTTip?.rowIndex) {
+    if (
+      ttip.data !== currentTTip?.data ||
+      ttip.rowIndex !== currentTTip?.rowIndex ||
+      ttip.feature !== currentTTip?.feature
+    ) {
       this.setState({ ttip: { ...hoverPayload } });
     }
   };
@@ -360,7 +367,7 @@ export class GeomapPanel extends Component<Props, State> {
           <GeomapOverlay bottomLeft={bottomLeft} topRight={topRight} />
         </div>
         <Portal>
-          {ttip && ttip.data && (
+          {ttip && (ttip.data || ttip.feature) && (
             <VizTooltipContainer position={{ x: ttip.pageX, y: ttip.pageY }} offset={{ x: 10, y: 10 }}>
               <DataHoverView {...ttip} />
             </VizTooltipContainer>

public/app/plugins/panel/geomap/components/DataHoverView.tsx

@@ -3,9 +3,11 @@ import { stylesFactory } from '@grafana/ui';
 import { DataFrame, Field, formattedValueToString, getFieldDisplayName, GrafanaTheme2 } from '@grafana/data';
 import { css } from '@emotion/css';
 import { config } from 'app/core/config';
+import { FeatureLike } from 'ol/Feature';
 
 export interface Props {
   data?: DataFrame; // source data
+  feature?: FeatureLike;
   rowIndex?: number; // the hover row
   columnIndex?: number; // the hover column
 }
@@ -14,7 +16,26 @@ export class DataHoverView extends PureComponent<Props> {
   style = getStyles(config.theme2);
 
   render() {
-    const { data, rowIndex, columnIndex } = this.props;
+    const { data, feature, rowIndex, columnIndex } = this.props;
+
+    if (feature) {
+      return (
+        <table className={this.style.infoWrap}>
+          <tbody>
+            {Object.entries(feature.getProperties()).map(
+              (e, i) =>
+                e[0] === 'geometry' || ( //don't include geojson feature geometry
+                  <tr key={`${e}-${i}`}>
+                    <th>{`${e[0]}: `}</th>
+                    <td>{`${e[1]}`}</td>
+                  </tr>
+                )
+            )}
+          </tbody>
+        </table>
+      );
+    }
+
     if (!data || rowIndex == null) {
       return null;
     }

public/app/plugins/panel/geomap/event.ts

@@ -12,6 +12,7 @@ export interface GeomapHoverFeature {
 
 export interface GeomapHoverPayload extends DataHoverPayload {
   features?: GeomapHoverFeature[];
+  feature?: FeatureLike;
   pageX: number;
   pageY: number;
 }