Geomap: use panel context editor state (#39920)

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

@@ -25,7 +25,7 @@ import { centerPointRegistry, MapCenterID } from './view';
 import { fromLonLat, toLonLat } from 'ol/proj';
 import { Coordinate } from 'ol/coordinate';
 import { css } from '@emotion/css';
-import { Portal, stylesFactory, VizTooltipContainer } from '@grafana/ui';
+import { PanelContext, PanelContextRoot, Portal, stylesFactory, VizTooltipContainer } from '@grafana/ui';
 import { GeomapOverlay, OverlayProps } from './GeomapOverlay';
 import { DebugOverlay } from './components/DebugOverlay';
 import { getGlobalStyles } from './globalStyles';
@@ -41,7 +41,6 @@ interface MapLayerState {
 
 // Allows multiple panels to share the same view instance
 let sharedView: View | undefined = undefined;
-export let lastGeomapPanelInstance: GeomapPanel | undefined = undefined;
 
 type Props = PanelProps<GeomapPanelOptions>;
 interface State extends OverlayProps {
@@ -49,6 +48,9 @@ interface State extends OverlayProps {
 }
 
 export class GeomapPanel extends Component<Props, State> {
+  static contextType = PanelContextRoot;
+  panelContext: PanelContext = {} as PanelContext;
+
   globalCSS = getGlobalStyles(config.theme2);
 
   counter = 0;
@@ -66,7 +68,10 @@ export class GeomapPanel extends Component<Props, State> {
   }
 
   componentDidMount() {
-    lastGeomapPanelInstance = this;
+    this.panelContext = this.context as PanelContext;
+    if (this.panelContext.onInstanceStateChange) {
+      this.panelContext.onInstanceStateChange(this);
+    }
   }
 
   shouldComponentUpdate(nextProps: Props) {

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

@@ -4,10 +4,10 @@ import { Button, InlineField, InlineFieldRow, Select, VerticalGroup } from '@gra
 import { GeomapPanelOptions, MapViewConfig } from '../types';
 import { centerPointRegistry, MapCenterID } from '../view';
 import { NumberInput } from 'app/features/dimensions/editors/NumberInput';
-import { lastGeomapPanelInstance } from '../GeomapPanel';
 import { toLonLat } from 'ol/proj';
+import { GeomapPanel } from '../GeomapPanel';
 
-export const MapViewEditor: FC<StandardEditorProps<MapViewConfig, any, GeomapPanelOptions>> = ({
+export const MapViewEditor: FC<StandardEditorProps<MapViewConfig, any, GeomapPanelOptions, GeomapPanel>> = ({
   value,
   onChange,
   context,
@@ -25,7 +25,7 @@ export const MapViewEditor: FC<StandardEditorProps<MapViewConfig, any, GeomapPan
   }, [value?.id]);
 
   const onSetCurrentView = useCallback(() => {
-    const map = lastGeomapPanelInstance?.map;
+    const map = context.instanceState?.map;
     if (map) {
       const view = map.getView();
       const coords = view.getCenter();
@@ -40,7 +40,7 @@ export const MapViewEditor: FC<StandardEditorProps<MapViewConfig, any, GeomapPan
         });
       }
     }
-  }, [value, onChange]);
+  }, [value, onChange, context.instanceState]);
 
   const onSelectView = useCallback(
     (selection: SelectableValue<string>) => {