Geomap: Add tooltip check to display tooltip by layer (#43131)

* Add tooltip check to display tooltip by layer

packages/grafana-data/src/geo/layer.ts

@@ -61,6 +61,9 @@ export interface MapLayerOptions<TConfig = any> {
   // https://openlayers.org/en/latest/apidoc/module-ol_layer_Base-BaseLayer.html
   // Layer opacity (0-1)
   opacity?: number;
+
+  //Check tooltip
+  tooltip?: boolean;
 }
 
 /**

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

@@ -179,6 +179,7 @@ export class GeomapPanel extends Component<Props, State> {
           type: item.id,
           name: this.getNextLayerName(),
           config: cloneDeep(item.defaultOptions),
+          tooltip: true,
         },
         false
       ).then((lyr) => {
@@ -331,19 +332,31 @@ export class GeomapPanel extends Component<Props, State> {
 
     let ttip: GeomapHoverPayload = {} as GeomapHoverPayload;
     const features: GeomapHoverFeature[] = [];
-    this.map.forEachFeatureAtPixel(pixel, (feature, layer, geo) => {
-      if (!hoverPayload.data) {
-        const props = feature.getProperties();
-        const frame = props['frame'];
-        if (frame) {
-          hoverPayload.data = ttip.data = frame as DataFrame;
-          hoverPayload.rowIndex = ttip.rowIndex = props['rowIndex'];
-        } else {
-          hoverPayload.feature = ttip.feature = feature;
+    this.map.forEachFeatureAtPixel(
+      pixel,
+      (feature, layer, geo) => {
+        //match hover layer to layer in layers
+        //check if the layer show tooltip is enabled
+        //then also pass the list of tooltip fields if exists
+        if (!hoverPayload.data) {
+          const props = feature.getProperties();
+          const frame = props['frame'];
+          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 });
+      },
+      {
+        layerFilter: (l) => {
+          const hoverLayerState = (l as any).__state as MapLayerState;
+          return hoverLayerState.options.tooltip !== false;
+        },
       }
-      features.push({ feature, layer, geo });
-    });
+    );
     this.hoverPayload.features = features.length ? features : undefined;
     this.props.eventBus.publish(this.hoverEvent);
 
@@ -461,6 +474,7 @@ export class GeomapPanel extends Component<Props, State> {
       },
     };
     this.byName.set(UID, state);
+    (state.layer as any).__state = state;
     return state;
   }
 

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

@@ -1,6 +1,13 @@
 import React, { PureComponent } from 'react';
 import { stylesFactory } from '@grafana/ui';
-import { DataFrame, Field, formattedValueToString, getFieldDisplayName, GrafanaTheme2 } from '@grafana/data';
+import {
+  ArrayDataFrame,
+  DataFrame,
+  Field,
+  formattedValueToString,
+  getFieldDisplayName,
+  GrafanaTheme2,
+} from '@grafana/data';
 import { css } from '@emotion/css';
 import { config } from 'app/core/config';
 import { FeatureLike } from 'ol/Feature';
@@ -16,24 +23,12 @@ export class DataHoverView extends PureComponent<Props> {
   style = getStyles(config.theme2);
 
   render() {
-    const { data, feature, rowIndex, columnIndex } = this.props;
-
+    const { feature, columnIndex } = this.props;
+    let { data, rowIndex } = 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>
-      );
+      const { geometry, ...properties } = feature.getProperties();
+      data = new ArrayDataFrame([properties]);
+      rowIndex = 0;
     }
 
     if (!data || rowIndex == null) {
@@ -48,7 +43,7 @@ export class DataHoverView extends PureComponent<Props> {
             .map((f, i) => (
               <tr key={`${i}/${rowIndex}`} className={i === columnIndex ? this.style.highlight : ''}>
                 <th>{getFieldDisplayName(f, data)}:</th>
-                <td>{fmt(f, rowIndex)}</td>
+                <td>{fmt(f, rowIndex!)}</td>
               </tr>
             ))}
         </tbody>

public/app/plugins/panel/geomap/editor/layerEditor.tsx

@@ -150,6 +150,12 @@ export function getLayerEditor(opts: LayerEditorOptions): NestedPanelOptions<Map
       if (layer.showOpacity) {
         // TODO -- add opacity check
       }
+      builder.addBooleanSwitch({
+        path: 'tooltip',
+        name: 'Display tooltip',
+        description: 'Show the tooltip for layer',
+        defaultValue: true,
+      });
     },
   };
 }

public/app/plugins/panel/geomap/layers/data/markersLayer.tsx

@@ -42,6 +42,7 @@ export const defaultMarkersConfig: MapLayerOptions<MarkersConfig> = {
   location: {
     mode: FrameGeometrySourceMode.Auto,
   },
+  tooltip: true,
 };
 
 /**