From 4a749e68a844a78f4a01dc7b1a5b2841ba07428e Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Thu, 16 Jun 2022 13:08:42 -0700
Subject: [PATCH] Geomap: Support showing tooltip content on click (not just
 hover) (#50985)

---
 public/app/plugins/panel/geomap/GeomapPanel.tsx   | 15 +++++++++++----
 .../app/plugins/panel/geomap/migrations.test.ts   |  3 +++
 public/app/plugins/panel/geomap/migrations.ts     |  3 ++-
 public/app/plugins/panel/geomap/module.tsx        | 14 +++++++++++++-
 public/app/plugins/panel/geomap/types.ts          | 10 ++++++++++
 5 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/public/app/plugins/panel/geomap/GeomapPanel.tsx b/public/app/plugins/panel/geomap/GeomapPanel.tsx
index e6958ccfd3e..effdc6e63b3 100644
--- a/public/app/plugins/panel/geomap/GeomapPanel.tsx
+++ b/public/app/plugins/panel/geomap/GeomapPanel.tsx
@@ -39,7 +39,7 @@ import { GeomapHoverPayload, GeomapLayerHover } from './event';
 import { getGlobalStyles } from './globalStyles';
 import { defaultMarkersConfig, MARKERS_LAYER_ID } from './layers/data/markersLayer';
 import { DEFAULT_BASEMAP_CONFIG, geomapLayerRegistry } from './layers/registry';
-import { ControlsOptions, GeomapPanelOptions, MapLayerState, MapViewConfig } from './types';
+import { ControlsOptions, GeomapPanelOptions, MapLayerState, MapViewConfig, TooltipMode } from './types';
 import { centerPointRegistry, MapCenterID } from './view';
 
 // Allows multiple panels to share the same view instance
@@ -341,6 +341,7 @@ export class GeomapPanel extends Component<Props, State> {
     if (this.pointerMoveListener(evt)) {
       evt.preventDefault();
       evt.stopPropagation();
+      this.mapDiv!.style.cursor = 'auto';
       this.setState({ ttipOpen: true });
     }
   };
@@ -419,7 +420,9 @@ export class GeomapPanel extends Component<Props, State> {
       });
     }
 
-    return layers.length ? true : false;
+    const found = layers.length ? true : false;
+    this.mapDiv!.style.cursor = found ? 'pointer' : 'auto';
+    return found;
   };
 
   private updateLayer = async (uid: string, newOptions: MapLayerOptions): Promise<boolean> => {
@@ -658,8 +661,12 @@ export class GeomapPanel extends Component<Props, State> {
   }
 
   render() {
-    const { ttip, ttipOpen, topRight, legends } = this.state;
-    const showScale = this.props.options.controls.showScale;
+    let { ttip, ttipOpen, topRight, legends } = this.state;
+    const { options } = this.props;
+    const showScale = options.controls.showScale;
+    if (!ttipOpen && options.tooltip?.mode === TooltipMode.None) {
+      ttip = undefined;
+    }
 
     return (
       <>
diff --git a/public/app/plugins/panel/geomap/migrations.test.ts b/public/app/plugins/panel/geomap/migrations.test.ts
index a100738d189..9be13781f04 100644
--- a/public/app/plugins/panel/geomap/migrations.test.ts
+++ b/public/app/plugins/panel/geomap/migrations.test.ts
@@ -56,6 +56,9 @@ describe('Worldmap Migrations', () => {
             "showZoom": true,
           },
           "layers": Array [],
+          "tooltip": Object {
+            "mode": "details",
+          },
           "view": Object {
             "id": "europe",
             "lat": 46,
diff --git a/public/app/plugins/panel/geomap/migrations.ts b/public/app/plugins/panel/geomap/migrations.ts
index 68c36caa859..e7a4d991143 100644
--- a/public/app/plugins/panel/geomap/migrations.ts
+++ b/public/app/plugins/panel/geomap/migrations.ts
@@ -6,7 +6,7 @@ import { ResourceDimensionMode } from 'app/features/dimensions';
 import { MarkersConfig } from './layers/data/markersLayer';
 import { getMarkerAsPath } from './style/markers';
 import { defaultStyleConfig } from './style/types';
-import { GeomapPanelOptions } from './types';
+import { GeomapPanelOptions, TooltipMode } from './types';
 import { MapCenterID } from './view';
 
 /**
@@ -47,6 +47,7 @@ export function worldmapToGeomapOptions(angular: any): { fieldConfig: FieldConfi
     layers: [
       // TODO? depends on current configs
     ],
+    tooltip: { mode: TooltipMode.Details },
   };
 
   let v = asNumber(angular.decimals);
diff --git a/public/app/plugins/panel/geomap/module.tsx b/public/app/plugins/panel/geomap/module.tsx
index 655d34ae9ce..c7b24bb79da 100644
--- a/public/app/plugins/panel/geomap/module.tsx
+++ b/public/app/plugins/panel/geomap/module.tsx
@@ -9,7 +9,7 @@ import { LayersEditor } from './editor/LayersEditor';
 import { MapViewEditor } from './editor/MapViewEditor';
 import { getLayerEditor } from './editor/layerEditor';
 import { mapPanelChangedHandler, mapMigrationHandler } from './migrations';
-import { defaultView, GeomapPanelOptions } from './types';
+import { defaultView, GeomapPanelOptions, TooltipMode } from './types';
 
 export const plugin = new PanelPlugin<GeomapPanelOptions>(GeomapPanel)
   .setNoPadding()
@@ -121,5 +121,17 @@ export const plugin = new PanelPlugin<GeomapPanelOptions>(GeomapPanel)
         name: 'Show debug',
         description: 'Show map info',
         defaultValue: false,
+      })
+      .addRadio({
+        category,
+        path: 'tooltip.mode',
+        name: 'Tooltip',
+        defaultValue: TooltipMode.Details,
+        settings: {
+          options: [
+            { label: 'None', value: TooltipMode.None, description: 'Show contents on click, not hover' },
+            { label: 'Details', value: TooltipMode.Details, description: 'Show popup on hover' },
+          ],
+        },
       });
   });
diff --git a/public/app/plugins/panel/geomap/types.ts b/public/app/plugins/panel/geomap/types.ts
index 521ceb498e9..c724647b574 100644
--- a/public/app/plugins/panel/geomap/types.ts
+++ b/public/app/plugins/panel/geomap/types.ts
@@ -28,6 +28,15 @@ export interface ControlsOptions {
   showDebug?: boolean;
 }
 
+export enum TooltipMode {
+  None = 'none',
+  Details = 'details',
+}
+
+export interface TooltipOptions {
+  mode: TooltipMode;
+}
+
 export interface MapViewConfig {
   id: string; // placename > lookup
   lat?: number;
@@ -55,6 +64,7 @@ export interface GeomapPanelOptions {
   controls: ControlsOptions;
   basemap: MapLayerOptions;
   layers: MapLayerOptions[];
+  tooltip: TooltipOptions;
 }
 export interface FeatureStyleConfig {
   style?: StyleConfig;