Geomap: Support showing tooltip content on click (not just hover) (#50985)

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 (
       <>

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,

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);

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' },
+          ],
+        },
       });
   });

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;