From 07aa2bbbba3cfe6e1688c1cf2f79852f6d9c66a5 Mon Sep 17 00:00:00 2001 From: Drew Slobodnjak <60050885+drew08t@users.noreply.github.com> Date: Mon, 13 Jun 2022 14:07:20 -0700 Subject: [PATCH] GeomapPanel: Add base types to data layer options (#50053) * GeomapPanel: Add base types to data layer options Removed isBaseMap check from data layer filter, which used to remove base layer types from data layer options. For layer editor, slider to control opacity is added. * GeomapPanel: Reorder data layer options For data layer selection, present user with data layer types first, before base map layer types. Refactored to consolidate layer options into a single exported function in registry with a base map boolean. * GeomapPanel: Add descriptions to base map types * GeomapPanel: add hideOpacity and apply to markers * GeomapPanel: update descriptions for map types Closes #47812 --- packages/grafana-data/src/geo/layer.ts | 4 +- .../app/plugins/panel/geomap/GeomapPanel.tsx | 3 ++ .../panel/geomap/editor/LayersEditor.tsx | 6 +-- .../panel/geomap/editor/layerEditor.tsx | 49 +++++++------------ .../panel/geomap/layers/basemaps/carto.ts | 3 +- .../panel/geomap/layers/basemaps/esri.ts | 1 + .../panel/geomap/layers/basemaps/generic.ts | 1 + .../panel/geomap/layers/basemaps/osm.ts | 1 + .../panel/geomap/layers/data/markersLayer.tsx | 1 + .../plugins/panel/geomap/layers/registry.ts | 38 +++++++++++++- 10 files changed, 67 insertions(+), 40 deletions(-) diff --git a/packages/grafana-data/src/geo/layer.ts b/packages/grafana-data/src/geo/layer.ts index caa0360a672..10252788728 100644 --- a/packages/grafana-data/src/geo/layer.ts +++ b/packages/grafana-data/src/geo/layer.ts @@ -104,9 +104,9 @@ export interface MapLayerRegistryItem extends Registr showLocation?: boolean; /** - * Show transparency controls in UI (for non-basemaps) + * Hide transparency controls in UI */ - showOpacity?: boolean; + hideOpacity?: boolean; /** * Function that configures transformation and returns a transformer diff --git a/public/app/plugins/panel/geomap/GeomapPanel.tsx b/public/app/plugins/panel/geomap/GeomapPanel.tsx index 23d58e9702f..e6958ccfd3e 100644 --- a/public/app/plugins/panel/geomap/GeomapPanel.tsx +++ b/public/app/plugins/panel/geomap/GeomapPanel.tsx @@ -503,6 +503,9 @@ export class GeomapPanel extends Component { const handler = await item.create(map, options, config.theme2); const layer = handler.init(); + if (options.opacity != null) { + layer.setOpacity(1 - options.opacity); + } if (!options.name) { options.name = this.getNextLayerName(); diff --git a/public/app/plugins/panel/geomap/editor/LayersEditor.tsx b/public/app/plugins/panel/geomap/editor/LayersEditor.tsx index 7dc9d4f18b4..83a78dd2894 100644 --- a/public/app/plugins/panel/geomap/editor/LayersEditor.tsx +++ b/public/app/plugins/panel/geomap/editor/LayersEditor.tsx @@ -7,11 +7,9 @@ import { AddLayerButton } from 'app/core/components/Layers/AddLayerButton'; import { LayerDragDropList } from 'app/core/components/Layers/LayerDragDropList'; import { GeomapInstanceState } from '../GeomapPanel'; -import { geomapLayerRegistry } from '../layers/registry'; +import { getLayersOptions } from '../layers/registry'; import { GeomapPanelOptions, MapLayerState } from '../types'; -import { dataLayerFilter } from './layerEditor'; - type LayersEditorProps = StandardEditorProps; export const LayersEditor = (props: LayersEditorProps) => { @@ -61,7 +59,7 @@ export const LayersEditor = (props: LayersEditorProps) => { actions.addlayer(v.value!)} - options={geomapLayerRegistry.selectOptions(undefined, dataLayerFilter).options} + options={getLayersOptions(false).options} label={'Add layer'} /> diff --git a/public/app/plugins/panel/geomap/editor/layerEditor.tsx b/public/app/plugins/panel/geomap/editor/layerEditor.tsx index 755e3390ba3..7f62209450f 100644 --- a/public/app/plugins/panel/geomap/editor/layerEditor.tsx +++ b/public/app/plugins/panel/geomap/editor/layerEditor.tsx @@ -1,14 +1,13 @@ import { get as lodashGet, isEqual } from 'lodash'; -import { FrameGeometrySourceMode, MapLayerOptions, MapLayerRegistryItem, PluginState } from '@grafana/data'; +import { FrameGeometrySourceMode, MapLayerOptions } from '@grafana/data'; import { NestedPanelOptions, NestedValueAccess } from '@grafana/data/src/utils/OptionsUIBuilders'; -import { hasAlphaPanels } from 'app/core/config'; import { setOptionImmutably } from 'app/features/dashboard/components/PanelEditor/utils'; import { addLocationFields } from 'app/features/geo/editor/locationEditor'; import { FrameSelectionEditor } from '../layers/data/FrameSelectionEditor'; import { defaultMarkersConfig } from '../layers/data/markersLayer'; -import { DEFAULT_BASEMAP_CONFIG, geomapLayerRegistry } from '../layers/registry'; +import { DEFAULT_BASEMAP_CONFIG, geomapLayerRegistry, getLayersOptions } from '../layers/registry'; import { MapLayerState } from '../types'; export interface LayerEditorOptions { @@ -62,11 +61,11 @@ export function getLayerEditor(opts: LayerEditorOptions): NestedPanelOptions = { id: 'carto', - name: 'CARTO reference map', + name: 'CARTO basemap', + description: 'Add layer CARTO Raster basemaps', isBaseMap: true, defaultOptions: defaultCartoConfig, diff --git a/public/app/plugins/panel/geomap/layers/basemaps/esri.ts b/public/app/plugins/panel/geomap/layers/basemaps/esri.ts index e8873235e6a..321230129cf 100644 --- a/public/app/plugins/panel/geomap/layers/basemaps/esri.ts +++ b/public/app/plugins/panel/geomap/layers/basemaps/esri.ts @@ -57,6 +57,7 @@ export interface ESRIXYZConfig extends XYZConfig { export const esriXYZTiles: MapLayerRegistryItem = { id: 'esri-xyz', name: 'ArcGIS MapServer', + description: 'Add layer from an ESRI ArcGIS MapServer', isBaseMap: true, create: async (map: Map, options: MapLayerOptions, theme: GrafanaTheme2) => { diff --git a/public/app/plugins/panel/geomap/layers/basemaps/generic.ts b/public/app/plugins/panel/geomap/layers/basemaps/generic.ts index 622a10768e0..10feba2f1d2 100644 --- a/public/app/plugins/panel/geomap/layers/basemaps/generic.ts +++ b/public/app/plugins/panel/geomap/layers/basemaps/generic.ts @@ -20,6 +20,7 @@ export const defaultXYZConfig: XYZConfig = { export const xyzTiles: MapLayerRegistryItem = { id: 'xyz', name: 'XYZ Tile layer', + description: 'Add map from a generic tile layer', isBaseMap: true, create: async (map: Map, options: MapLayerOptions, theme: GrafanaTheme2) => ({ diff --git a/public/app/plugins/panel/geomap/layers/basemaps/osm.ts b/public/app/plugins/panel/geomap/layers/basemaps/osm.ts index e51e181315e..9808235541e 100644 --- a/public/app/plugins/panel/geomap/layers/basemaps/osm.ts +++ b/public/app/plugins/panel/geomap/layers/basemaps/osm.ts @@ -7,6 +7,7 @@ import { MapLayerRegistryItem, MapLayerOptions } from '@grafana/data'; export const standard: MapLayerRegistryItem = { id: 'osm-standard', name: 'Open Street Map', + description: 'Add map from a collaborative free geographic world database', isBaseMap: true, /** diff --git a/public/app/plugins/panel/geomap/layers/data/markersLayer.tsx b/public/app/plugins/panel/geomap/layers/data/markersLayer.tsx index 8641c09ce0b..122b0798643 100644 --- a/public/app/plugins/panel/geomap/layers/data/markersLayer.tsx +++ b/public/app/plugins/panel/geomap/layers/data/markersLayer.tsx @@ -53,6 +53,7 @@ export const markersLayer: MapLayerRegistryItem = { description: 'Use markers to render each data point', isBaseMap: false, showLocation: true, + hideOpacity: true, /** * Function that configures transformation and returns a transformer diff --git a/public/app/plugins/panel/geomap/layers/registry.ts b/public/app/plugins/panel/geomap/layers/registry.ts index b346e552f23..3673dd13eb8 100644 --- a/public/app/plugins/panel/geomap/layers/registry.ts +++ b/public/app/plugins/panel/geomap/layers/registry.ts @@ -1,7 +1,14 @@ import Map from 'ol/Map'; -import { MapLayerRegistryItem, Registry, MapLayerOptions, GrafanaTheme2 } from '@grafana/data'; -import { config } from 'app/core/config'; +import { + MapLayerRegistryItem, + Registry, + MapLayerOptions, + GrafanaTheme2, + SelectableValue, + PluginState, +} from '@grafana/data'; +import { config, hasAlphaPanels } from 'app/core/config'; import { basemapLayers } from './basemaps'; import { carto } from './basemaps/carto'; @@ -42,3 +49,30 @@ export const geomapLayerRegistry = new Registry>(() => ...basemapLayers, // simple basemaps ...dataLayers, // Layers with update functions ]); + +interface RegistrySelectInfo { + options: Array>; + current: Array>; +} + +function getLayersSelection(items: Array>, current?: string): RegistrySelectInfo { + const res: RegistrySelectInfo = { options: [], current: [] }; + for (const layer of items) { + if (layer.state === PluginState.alpha && !hasAlphaPanels) { + continue; + } + const opt = { label: layer.name, value: layer.id, description: layer.description }; + res.options.push(opt); + if (layer.id === current) { + res.current.push(opt); + } + } + return res; +} + +export function getLayersOptions(basemap: boolean, current?: string): RegistrySelectInfo { + if (basemap) { + return getLayersSelection([defaultBaseLayer, ...basemapLayers], current); + } + return getLayersSelection([...dataLayers, ...basemapLayers], current); +}