[Maps] Add layer edit controls

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,