From fde26b0bd9f115f1ad8837b20cc0c3a4722a672b Mon Sep 17 00:00:00 2001
From: nikki-kiga <42276368+nikki-kiga@users.noreply.github.com>
Date: Wed, 15 Dec 2021 13:51:39 -0800
Subject: [PATCH] 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        |  3 ++
 .../app/plugins/panel/geomap/GeomapPanel.tsx  | 36 +++++++++++++------
 .../panel/geomap/components/DataHoverView.tsx | 33 ++++++++---------
 .../panel/geomap/editor/layerEditor.tsx       |  6 ++++
 .../panel/geomap/layers/data/markersLayer.tsx |  1 +
 5 files changed, 49 insertions(+), 30 deletions(-)

diff --git a/packages/grafana-data/src/geo/layer.ts b/packages/grafana-data/src/geo/layer.ts
index 9909d62ed0f..48757bcebd4 100644
--- a/packages/grafana-data/src/geo/layer.ts
+++ b/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;
 }
 
 /**
diff --git a/public/app/plugins/panel/geomap/GeomapPanel.tsx b/public/app/plugins/panel/geomap/GeomapPanel.tsx
index fedcca09fdd..77f7042f033 100644
--- a/public/app/plugins/panel/geomap/GeomapPanel.tsx
+++ b/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;
   }
 
diff --git a/public/app/plugins/panel/geomap/components/DataHoverView.tsx b/public/app/plugins/panel/geomap/components/DataHoverView.tsx
index ec6b2e361a2..6f585ed024a 100644
--- a/public/app/plugins/panel/geomap/components/DataHoverView.tsx
+++ b/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>
diff --git a/public/app/plugins/panel/geomap/editor/layerEditor.tsx b/public/app/plugins/panel/geomap/editor/layerEditor.tsx
index 44487cba9eb..b873ea9fa21 100644
--- a/public/app/plugins/panel/geomap/editor/layerEditor.tsx
+++ b/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,
+      });
     },
   };
 }
diff --git a/public/app/plugins/panel/geomap/layers/data/markersLayer.tsx b/public/app/plugins/panel/geomap/layers/data/markersLayer.tsx
index 211453025ab..f3bd0f38b06 100644
--- a/public/app/plugins/panel/geomap/layers/data/markersLayer.tsx
+++ b/public/app/plugins/panel/geomap/layers/data/markersLayer.tsx
@@ -42,6 +42,7 @@ export const defaultMarkersConfig: MapLayerOptions<MarkersConfig> = {
   location: {
     mode: FrameGeometrySourceMode.Auto,
   },
+  tooltip: true,
 };
 
 /**