[Maps] Add layer edit controls (#99812)

Co-authored-by: miukimiu <elizabet.oliveira@elastic.co>

x-pack/plugins/maps/common/constants.ts

@@ -41,8 +41,9 @@ export const GIS_API_PATH = `api/${APP_ID}`;
 export const INDEX_SETTINGS_API_PATH = `${GIS_API_PATH}/indexSettings`;
 export const FONTS_API_PATH = `${GIS_API_PATH}/fonts`;
 export const INDEX_SOURCE_API_PATH = `${GIS_API_PATH}/docSource`;
-export const INDEX_FEATURE_PATH = `/${GIS_API_PATH}/feature`;
 export const API_ROOT_PATH = `/${GIS_API_PATH}`;
+export const INDEX_FEATURE_PATH = `/${GIS_API_PATH}/feature`;
+export const GET_MATCHING_INDEXES_PATH = `/${GIS_API_PATH}/getMatchingIndexes`;
 
 export const MVT_GETTILE_API_PATH = 'mvt/getTile';
 export const MVT_GETGRIDTILE_API_PATH = 'mvt/getGridTile';
@@ -106,6 +107,7 @@ export const SOURCE_DATA_REQUEST_ID = 'source';
 export const SOURCE_META_DATA_REQUEST_ID = `${SOURCE_DATA_REQUEST_ID}_${META_DATA_REQUEST_ID_SUFFIX}`;
 export const SOURCE_FORMATTERS_DATA_REQUEST_ID = `${SOURCE_DATA_REQUEST_ID}_${FORMATTERS_DATA_REQUEST_ID_SUFFIX}`;
 export const SOURCE_BOUNDS_DATA_REQUEST_ID = `${SOURCE_DATA_REQUEST_ID}_bounds`;
+export const IS_EDITABLE_REQUEST_ID = 'isEditable';
 
 export const MIN_ZOOM = 0;
 export const MAX_ZOOM = 24;
@@ -154,10 +156,20 @@ export const EMPTY_FEATURE_COLLECTION: FeatureCollection = {
   features: [],
 };
 
-export enum DRAW_TYPE {
+export enum DRAW_MODE {
+  DRAW_SHAPES = 'DRAW_SHAPES',
+  DRAW_POINTS = 'DRAW_POINTS',
+  DRAW_FILTERS = 'DRAW_FILTERS',
+  NONE = 'NONE',
+}
+
+export enum DRAW_SHAPE {
   BOUNDS = 'BOUNDS',
   DISTANCE = 'DISTANCE',
   POLYGON = 'POLYGON',
+  POINT = 'POINT',
+  LINE = 'LINE',
+  SIMPLE_SELECT = 'SIMPLE_SELECT',
 }
 
 export const AGG_DELIMITER = '_of_';

x-pack/plugins/maps/common/descriptor_types/data_request_descriptor_types.ts

@@ -29,9 +29,10 @@ export type MapFilters = {
   timeFilters: TimeRange;
   timeslice?: Timeslice;
   zoom: number;
+  isReadOnly: boolean;
 };
 
-type ESSearchSourceSyncMeta = {
+export type ESSearchSourceSyncMeta = {
   filterByMapBounds: boolean;
   sortField: string;
   sortOrder: SortDirection;

x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts

@@ -11,7 +11,7 @@ import { ReactNode } from 'react';
 import { GeoJsonProperties } from 'geojson';
 import { Geometry } from 'geojson';
 import { Query } from '../../../../../src/plugins/data/common';
-import { DRAW_TYPE, ES_SPATIAL_RELATIONS } from '../constants';
+import { DRAW_SHAPE, ES_SPATIAL_RELATIONS } from '../constants';
 
 export type MapExtent = {
   minLon: number;
@@ -63,8 +63,13 @@ export type TooltipState = {
 
 export type DrawState = {
   actionId: string;
-  drawType: DRAW_TYPE;
+  drawShape?: DRAW_SHAPE;
   filterLabel?: string; // point radius filter alias
   geometryLabel?: string;
   relation?: ES_SPATIAL_RELATIONS;
 };
+
+export type EditState = {
+  layerId: string;
+  drawShape?: DRAW_SHAPE;
+};

x-pack/plugins/maps/common/types.ts

@@ -11,6 +11,12 @@ export interface CreateDocSourceResp {
   error?: Error;
 }
 
+export interface MatchingIndexesResp {
+  matchingIndexes?: string[];
+  success: boolean;
+  error?: Error;
+}
+
 export interface IndexSourceMappings {
   _meta?: {
     created_by: string;

x-pack/plugins/maps/public/actions/data_request_actions.ts

@@ -54,13 +54,14 @@ import { IVectorStyle } from '../classes/styles/vector/vector_style';
 const FIT_TO_BOUNDS_SCALE_FACTOR = 0.1;
 
 export type DataRequestContext = {
-  startLoading(dataId: string, requestToken: symbol, requestMeta: DataMeta): void;
+  startLoading(dataId: string, requestToken: symbol, requestMeta?: DataMeta): void;
   stopLoading(dataId: string, requestToken: symbol, data: object, resultsMeta?: DataMeta): void;
   onLoadError(dataId: string, requestToken: symbol, errorMessage: string): void;
   updateSourceData(newData: unknown): void;
   isRequestStillActive(dataId: string, requestToken: symbol): boolean;
   registerCancelCallback(requestToken: symbol, callback: () => void): void;
   dataFilters: MapFilters;
+  forceRefresh: boolean;
 };
 
 export function clearDataRequests(layer: ILayer) {
@@ -113,7 +114,8 @@ export function updateStyleMeta(layerId: string | null) {
 function getDataRequestContext(
   dispatch: ThunkDispatch<MapStoreState, void, AnyAction>,
   getState: () => MapStoreState,
-  layerId: string
+  layerId: string,
+  forceRefresh: boolean = false
 ): DataRequestContext {
   return {
     dataFilters: getDataFilters(getState()),
@@ -135,6 +137,7 @@ function getDataRequestContext(
     },
     registerCancelCallback: (requestToken: symbol, callback: () => void) =>
       dispatch(registerCancelCallback(requestToken, callback)),
+    forceRefresh,
   };
 }
 
@@ -166,9 +169,14 @@ function syncDataForAllJoinLayers() {
   };
 }
 
-export function syncDataForLayer(layer: ILayer) {
+export function syncDataForLayer(layer: ILayer, forceRefresh: boolean = false) {
   return async (dispatch: Dispatch, getState: () => MapStoreState) => {
-    const dataRequestContext = getDataRequestContext(dispatch, getState, layer.getId());
+    const dataRequestContext = getDataRequestContext(
+      dispatch,
+      getState,
+      layer.getId(),
+      forceRefresh
+    );
     if (!layer.isVisible() || !layer.showAtZoomLevel(dataRequestContext.dataFilters.zoom)) {
       return;
     }

x-pack/plugins/maps/public/actions/layer_actions.ts

@@ -10,17 +10,17 @@ import { ThunkDispatch } from 'redux-thunk';
 import { Query } from 'src/plugins/data/public';
 import { MapStoreState } from '../reducers/store';
 import {
+  createLayerInstance,
   getLayerById,
   getLayerList,
   getLayerListRaw,
-  getSelectedLayerId,
-  getMapReady,
   getMapColors,
-  createLayerInstance,
+  getMapReady,
+  getSelectedLayerId,
 } from '../selectors/map_selectors';
 import { FLYOUT_STATE } from '../reducers/ui';
 import { cancelRequest } from '../reducers/non_serializable_instances';
-import { updateFlyout } from './ui_actions';
+import { setDrawMode, updateFlyout } from './ui_actions';
 import {
   ADD_LAYER,
   ADD_WAITING_FOR_MAP_READY_LAYER,
@@ -49,11 +49,12 @@ import {
 } from '../../common/descriptor_types';
 import { ILayer } from '../classes/layers/layer';
 import { IVectorLayer } from '../classes/layers/vector_layer';
-import { LAYER_STYLE_TYPE, LAYER_TYPE } from '../../common/constants';
+import { DRAW_MODE, LAYER_STYLE_TYPE, LAYER_TYPE } from '../../common/constants';
 import { IVectorStyle } from '../classes/styles/vector/vector_style';
 import { notifyLicensedFeatureUsage } from '../licensed_features';
 import { IESAggField } from '../classes/fields/agg';
 import { IField } from '../classes/fields/field';
+import { getDrawMode } from '../selectors/ui_selectors';
 
 export function trackCurrentLayerState(layerId: string) {
   return {
@@ -255,6 +256,9 @@ export function setSelectedLayer(layerId: string | null) {
     if (layerId) {
       dispatch(trackCurrentLayerState(layerId));
     }
+    if (getDrawMode(getState()) !== DRAW_MODE.NONE) {
+      dispatch(setDrawMode(DRAW_MODE.NONE));
+    }
     dispatch({
       type: SET_SELECTED_LAYER,
       selectedLayerId: layerId,

x-pack/plugins/maps/public/actions/map_action_constants.ts

@@ -36,6 +36,7 @@ export const ROLLBACK_TO_TRACKED_LAYER_STATE = 'ROLLBACK_TO_TRACKED_LAYER_STATE'
 export const REMOVE_TRACKED_LAYER_STATE = 'REMOVE_TRACKED_LAYER_STATE';
 export const SET_OPEN_TOOLTIPS = 'SET_OPEN_TOOLTIPS';
 export const UPDATE_DRAW_STATE = 'UPDATE_DRAW_STATE';
+export const UPDATE_EDIT_STATE = 'UPDATE_EDIT_STATE';
 export const SET_SCROLL_ZOOM = 'SET_SCROLL_ZOOM';
 export const SET_MAP_INIT_ERROR = 'SET_MAP_INIT_ERROR';
 export const SET_WAITING_FOR_READY_HIDDEN_LAYERS = 'SET_WAITING_FOR_READY_HIDDEN_LAYERS';

x-pack/plugins/maps/public/actions/map_actions.ts

@@ -11,6 +11,8 @@ import { ThunkDispatch } from 'redux-thunk';
 import turfBboxPolygon from '@turf/bbox-polygon';
 import turfBooleanContains from '@turf/boolean-contains';
 import { Filter, Query, TimeRange } from 'src/plugins/data/public';
+import { Geometry, Position } from 'geojson';
+import { DRAW_MODE, DRAW_SHAPE } from '../../common/constants';
 import { MapStoreState } from '../reducers/store';
 import {
   getDataFilters,
@@ -23,6 +25,8 @@ import {
   getLayerList,
   getSearchSessionId,
   getSearchSessionMapBuffer,
+  getLayerById,
+  getEditState,
 } from '../selectors/map_selectors';
 import {
   CLEAR_GOTO,
@@ -42,8 +46,9 @@ import {
   TRACK_MAP_SETTINGS,
   UPDATE_DRAW_STATE,
   UPDATE_MAP_SETTING,
+  UPDATE_EDIT_STATE,
 } from './map_action_constants';
-import { autoFitToBounds, syncDataForAllLayers } from './data_request_actions';
+import { autoFitToBounds, syncDataForAllLayers, syncDataForLayer } from './data_request_actions';
 import { addLayer, addLayerWithoutDataSync } from './layer_actions';
 import { MapSettings } from '../reducers/map';
 import {
@@ -56,6 +61,8 @@ import {
 import { INITIAL_LOCATION } from '../../common/constants';
 import { scaleBounds } from '../../common/elasticsearch_util';
 import { cleanTooltipStateForLayer } from './tooltip_actions';
+import { VectorLayer } from '../classes/layers/vector_layer';
+import { SET_DRAW_MODE } from './ui_actions';
 import { expandToTileBoundaries } from '../../common/geo_tile_utils';
 
 export interface MapExtentState {
@@ -318,3 +325,54 @@ export function updateDrawState(drawState: DrawState | null) {
     });
   };
 }
+
+export function updateEditShape(shapeToDraw: DRAW_SHAPE | null) {
+  return (dispatch: Dispatch, getState: () => MapStoreState) => {
+    const editState = getEditState(getState());
+    if (!editState) {
+      return;
+    }
+    dispatch({
+      type: UPDATE_EDIT_STATE,
+      editState: {
+        ...editState,
+        drawShape: shapeToDraw,
+      },
+    });
+  };
+}
+
+export function updateEditLayer(layerId: string | null) {
+  return (dispatch: Dispatch) => {
+    if (layerId !== null) {
+      dispatch({ type: SET_OPEN_TOOLTIPS, openTooltips: [] });
+    }
+    dispatch({
+      type: SET_DRAW_MODE,
+      drawMode: DRAW_MODE.NONE,
+    });
+    dispatch({
+      type: UPDATE_EDIT_STATE,
+      editState: layerId ? { layerId } : undefined,
+    });
+  };
+}
+
+export function addNewFeatureToIndex(geometry: Geometry | Position[]) {
+  return async (
+    dispatch: ThunkDispatch<MapStoreState, void, AnyAction>,
+    getState: () => MapStoreState
+  ) => {
+    const editState = getEditState(getState());
+    const layerId = editState ? editState.layerId : undefined;
+    if (!layerId) {
+      return;
+    }
+    const layer = getLayerById(layerId, getState());
+    if (!layer || !(layer instanceof VectorLayer)) {
+      return;
+    }
+    await layer.addFeature(geometry);
+    await dispatch(syncDataForLayer(layer, true));
+  };
+}

x-pack/plugins/maps/public/actions/ui_actions.ts

@@ -12,6 +12,8 @@ import { getFlyoutDisplay } from '../selectors/ui_selectors';
 import { FLYOUT_STATE } from '../reducers/ui';
 import { setQuery, trackMapSettings } from './map_actions';
 import { setSelectedLayer } from './layer_actions';
+import { DRAW_MODE } from '../../common';
+import { UPDATE_EDIT_STATE } from './map_action_constants';
 
 export const UPDATE_FLYOUT = 'UPDATE_FLYOUT';
 export const SET_IS_LAYER_TOC_OPEN = 'SET_IS_LAYER_TOC_OPEN';
@@ -21,6 +23,7 @@ export const SET_READ_ONLY = 'SET_READ_ONLY';
 export const SET_OPEN_TOC_DETAILS = 'SET_OPEN_TOC_DETAILS';
 export const SHOW_TOC_DETAILS = 'SHOW_TOC_DETAILS';
 export const HIDE_TOC_DETAILS = 'HIDE_TOC_DETAILS';
+export const SET_DRAW_MODE = 'SET_DRAW_MODE';
 
 export function exitFullScreen() {
   return {
@@ -89,6 +92,21 @@ export function hideTOCDetails(layerId: string) {
   };
 }
 
+export function setDrawMode(drawMode: DRAW_MODE) {
+  return (dispatch: ThunkDispatch<MapStoreState, void, AnyAction>) => {
+    if (drawMode === DRAW_MODE.NONE) {
+      dispatch({
+        type: UPDATE_EDIT_STATE,
+        editState: undefined,
+      });
+    }
+    dispatch({
+      type: SET_DRAW_MODE,
+      drawMode,
+    });
+  };
+}
+
 export function openTimeslider() {
   return {
     type: SET_IS_TIME_SLIDER_OPEN,

x-pack/plugins/maps/public/classes/layers/__fixtures__/mock_sync_context.ts

@@ -17,6 +17,7 @@ export class MockSyncContext implements DataRequestContext {
   startLoading: (dataId: string, requestToken: symbol, meta: DataMeta) => void;
   stopLoading: (dataId: string, requestToken: symbol, data: object, meta: DataMeta) => void;
   updateSourceData: (newData: unknown) => void;
+  forceRefresh: boolean;
 
   constructor({ dataFilters }: { dataFilters: Partial<MapFilters> }) {
     const mapFilters: MapFilters = {
@@ -27,6 +28,7 @@ export class MockSyncContext implements DataRequestContext {
         mode: 'relative',
       },
       zoom: 0,
+      isReadOnly: false,
       ...dataFilters,
     };
 
@@ -37,5 +39,6 @@ export class MockSyncContext implements DataRequestContext {
     this.startLoading = sinon.spy();
     this.stopLoading = sinon.spy();
     this.updateSourceData = sinon.spy();
+    this.forceRefresh = false;
   }
 }

x-pack/plugins/maps/public/classes/layers/vector_layer/utils.tsx

@@ -69,12 +69,14 @@ export async function syncVectorSource({
   } = syncContext;
   const dataRequestId = SOURCE_DATA_REQUEST_ID;
   const requestToken = Symbol(`${layerId}-${dataRequestId}`);
-  const canSkipFetch = await canSkipSourceUpdate({
-    source,
-    prevDataRequest,
-    nextMeta: requestMeta,
-    extentAware: source.isFilterByMapBounds(),
-  });
+  const canSkipFetch = syncContext.forceRefresh
+    ? false
+    : await canSkipSourceUpdate({
+        source,
+        prevDataRequest,
+        nextMeta: requestMeta,
+        extentAware: source.isFilterByMapBounds(),
+      });
   if (canSkipFetch) {
     return {
       refreshed: false,