From ee3a320540d923f2377a23863f8c43a5f70acb20 Mon Sep 17 00:00:00 2001 From: Ryan McKinley Date: Mon, 19 Jul 2021 08:40:56 -0700 Subject: [PATCH] Geomap: improve the view configuration (#36893) --- .../app/plugins/panel/geomap/GeomapPanel.tsx | 10 +- .../panel/geomap/editor/MapCenterEditor.tsx | 85 ------------- .../panel/geomap/editor/MapViewEditor.tsx | 120 ++++++++++++++++++ .../panel/geomap/editor/MapZoomEditor.tsx | 18 --- .../plugins/panel/geomap/migrations.test.ts | 8 +- public/app/plugins/panel/geomap/migrations.ts | 12 +- public/app/plugins/panel/geomap/module.tsx | 23 +--- public/app/plugins/panel/geomap/types.ts | 12 +- public/app/plugins/panel/geomap/view.ts | 10 +- 9 files changed, 151 insertions(+), 147 deletions(-) delete mode 100644 public/app/plugins/panel/geomap/editor/MapCenterEditor.tsx create mode 100644 public/app/plugins/panel/geomap/editor/MapViewEditor.tsx delete mode 100644 public/app/plugins/panel/geomap/editor/MapZoomEditor.tsx diff --git a/public/app/plugins/panel/geomap/GeomapPanel.tsx b/public/app/plugins/panel/geomap/GeomapPanel.tsx index cde9d910e58..5c9bc7923e9 100644 --- a/public/app/plugins/panel/geomap/GeomapPanel.tsx +++ b/public/app/plugins/panel/geomap/GeomapPanel.tsx @@ -31,6 +31,7 @@ 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; export class GeomapPanel extends Component { @@ -43,6 +44,10 @@ export class GeomapPanel extends Component { style = getStyles(config.theme); overlayProps: OverlayProps = {}; + componentDidMount() { + lastGeomapPanelInstance = this; + } + shouldComponentUpdate(nextProps: Props) { if (!this.map) { return true; // not yet initalized @@ -206,13 +211,12 @@ export class GeomapPanel extends Component { } } - const v = centerPointRegistry.getIfExists(config.center.id); + const v = centerPointRegistry.getIfExists(config.id); if (v) { let coord: Coordinate | undefined = undefined; if (v.lat == null) { if (v.id === MapCenterID.Coordinates) { - const center = config.center ?? {}; - coord = [center.lon ?? 0, center.lat ?? 0]; + coord = [config.lon ?? 0, config.lat ?? 0]; } else { console.log('TODO, view requires special handling', v); } diff --git a/public/app/plugins/panel/geomap/editor/MapCenterEditor.tsx b/public/app/plugins/panel/geomap/editor/MapCenterEditor.tsx deleted file mode 100644 index 901a2e1ff26..00000000000 --- a/public/app/plugins/panel/geomap/editor/MapCenterEditor.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React, { FC, useMemo } from 'react'; -import { GrafanaTheme, StandardEditorProps } from '@grafana/data'; -import { Select, stylesFactory, useStyles } from '@grafana/ui'; -import { GeomapPanelOptions, MapCenterConfig } from '../types'; -import { centerPointRegistry, MapCenterID } from '../view'; -import { css } from '@emotion/css'; -import { NumberInput } from '../components/NumberInput'; - -export const MapCenterEditor: FC> = ({ - value, - onChange, - context, -}) => { - const style = useStyles(getStyles); - - const views = useMemo(() => { - const ids: string[] = []; - if (value?.id) { - ids.push(value.id); - } else { - ids.push(centerPointRegistry.list()[0].id); - } - return centerPointRegistry.selectOptions(ids); - }, [value?.id]); - - return ( -
- + + + {value?.id === MapCenterID.Coordinates && ( + <> + + + { + onChange({ ...value, lat: v }); + }} + /> + + + + + { + onChange({ ...value, lon: v }); + }} + /> + + + + )} + + + + { + onChange({ ...value, zoom: v }); + }} + /> + + + + + + + + ); +}; diff --git a/public/app/plugins/panel/geomap/editor/MapZoomEditor.tsx b/public/app/plugins/panel/geomap/editor/MapZoomEditor.tsx deleted file mode 100644 index 651871b443a..00000000000 --- a/public/app/plugins/panel/geomap/editor/MapZoomEditor.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React, { FC } from 'react'; -import { StandardEditorProps } from '@grafana/data'; -import { GeomapPanelOptions } from '../types'; -import { NumberInput } from '../components/NumberInput'; - -export const MapZoomEditor: FC> = ({ - value, - onChange, - context, -}) => { - // TODO: - // Somehow use context to get the current map and listen to zoom changes - return ( -
- -
- ); -}; diff --git a/public/app/plugins/panel/geomap/migrations.test.ts b/public/app/plugins/panel/geomap/migrations.test.ts index c14f26c2b63..603401579c9 100644 --- a/public/app/plugins/panel/geomap/migrations.test.ts +++ b/public/app/plugins/panel/geomap/migrations.test.ts @@ -57,11 +57,9 @@ describe('Worldmap Migrations', () => { }, "layers": Array [], "view": Object { - "center": Object { - "id": "europe", - "lat": 46, - "lon": 14, - }, + "id": "europe", + "lat": 46, + "lon": 14, "zoom": 6, }, }, diff --git a/public/app/plugins/panel/geomap/migrations.ts b/public/app/plugins/panel/geomap/migrations.ts index 5b3ca894b7c..2c4eaf9a8dc 100644 --- a/public/app/plugins/panel/geomap/migrations.ts +++ b/public/app/plugins/panel/geomap/migrations.ts @@ -27,9 +27,7 @@ export function worldmapToGeomapOptions(angular: any): { fieldConfig: FieldConfi const options: GeomapPanelOptions = { view: { - center: { - id: MapCenterID.Zero, - }, + id: MapCenterID.Zero, }, controls: { showZoom: true, @@ -88,11 +86,11 @@ export function worldmapToGeomapOptions(angular: any): { fieldConfig: FieldConfi Europe: 'europe', 'West Asia': 'west-asia', 'SE Asia': 'se-asia', - 'Last GeoHash': MapCenterID.LastPoint, + 'Last GeoHash': MapCenterID.Coordinates, // MapCenterID.LastPoint, }; - options.view.center.id = mapCenters[angular.mapCenter as any]; - options.view.center.lat = asNumber(angular.mapCenterLatitude); - options.view.center.lon = asNumber(angular.mapCenterLongitude); + options.view.id = mapCenters[angular.mapCenter as any]; + options.view.lat = asNumber(angular.mapCenterLatitude); + options.view.lon = asNumber(angular.mapCenterLongitude); return { fieldConfig, options }; } diff --git a/public/app/plugins/panel/geomap/module.tsx b/public/app/plugins/panel/geomap/module.tsx index 17c6a09dda1..39952dfe99f 100644 --- a/public/app/plugins/panel/geomap/module.tsx +++ b/public/app/plugins/panel/geomap/module.tsx @@ -2,9 +2,8 @@ import { FrameGeometrySourceMode, PanelPlugin } from '@grafana/data'; import { BaseLayerEditor } from './editor/BaseLayerEditor'; import { DataLayersEditor } from './editor/DataLayersEditor'; import { GeomapPanel } from './GeomapPanel'; -import { MapCenterEditor } from './editor/MapCenterEditor'; +import { MapViewEditor } from './editor/MapViewEditor'; import { defaultView, GeomapPanelOptions } from './types'; -import { MapZoomEditor } from './editor/MapZoomEditor'; import { mapPanelChangedHandler } from './migrations'; import { defaultGrafanaThemedMap } from './layers/basemaps'; import { MARKERS_LAYER_ID } from './layers/data/markersLayer'; @@ -17,20 +16,12 @@ export const plugin = new PanelPlugin(GeomapPanel) let category = ['Map View']; builder.addCustomEditor({ category, - id: 'view.center', - path: 'view.center', - name: 'Center', - editor: MapCenterEditor, - defaultValue: defaultView.center, - }); - - builder.addCustomEditor({ - category, - id: 'view.zoom', - path: 'view.zoom', - name: 'Initial zoom', - editor: MapZoomEditor, - defaultValue: defaultView.zoom, + id: 'view', + path: 'view', + name: 'Initial view', // don't show it + description: 'This location will show when the panel first loads', + editor: MapViewEditor, + defaultValue: defaultView, }); builder.addBooleanSwitch({ diff --git a/public/app/plugins/panel/geomap/types.ts b/public/app/plugins/panel/geomap/types.ts index 84230046e8f..b9205cdce6e 100644 --- a/public/app/plugins/panel/geomap/types.ts +++ b/public/app/plugins/panel/geomap/types.ts @@ -23,14 +23,10 @@ export interface ControlsOptions { showDebug?: boolean; } -export interface MapCenterConfig { +export interface MapViewConfig { id: string; // placename > lookup lat?: number; lon?: number; -} - -export interface MapViewConfig { - center: MapCenterConfig; zoom?: number; minZoom?: number; maxZoom?: number; @@ -38,9 +34,9 @@ export interface MapViewConfig { } export const defaultView: MapViewConfig = { - center: { - id: MapCenterID.Zero, - }, + id: MapCenterID.Zero, + lat: 0, + lon: 0, zoom: 1, }; diff --git a/public/app/plugins/panel/geomap/view.ts b/public/app/plugins/panel/geomap/view.ts index c7b30ec912f..1f25d0cbdb1 100644 --- a/public/app/plugins/panel/geomap/view.ts +++ b/public/app/plugins/panel/geomap/view.ts @@ -3,12 +3,12 @@ import { Registry, RegistryItem } from '@grafana/data'; interface MapCenterItems extends RegistryItem { lat?: number; lon?: number; + zoom?: number; } export enum MapCenterID { Zero = 'zero', Coordinates = 'coords', - LastPoint = 'last', } export const centerPointRegistry = new Registry(() => [ @@ -23,31 +23,31 @@ export const centerPointRegistry = new Registry(() => [ name: 'North America', lat: 40, lon: -100, + zoom: 4, }, { id: 'europe', name: 'Europe', lat: 46, lon: 14, + zoom: 4, }, { id: 'west-asia', name: 'West Asia', lat: 26, lon: 53, + zoom: 4, }, { id: 'se-asia', name: 'South-east Asia', lat: 10, lon: 106, + zoom: 4, }, { id: MapCenterID.Coordinates as string, name: 'Coordinates', }, - { - id: MapCenterID.LastPoint as string, - name: 'Last value', - }, ]);