[Maps] Do not check count for blended layers when layer is not visible (#66460)

* [Maps] Do not check count for blended layers when layer is not visible

* move visibility logic to map_actions where syncData is called

* clean up

* fix syntax error

* remove async action

* make syncDataForAllLayers a proper redux action

* simplify

* fix functional test

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: nreese

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

@@ -111,14 +111,36 @@ function getLayerById(layerId, state) {
   });
 }
 
-async function syncDataForAllLayers(dispatch, getState, dataFilters) {
-  const state = getState();
-  const layerList = getLayerList(state);
-  const syncs = layerList.map(layer => {
-    const loadingFunctions = getLayerLoadingCallbacks(dispatch, getState, layer.getId());
-    return layer.syncData({ ...loadingFunctions, dataFilters });
-  });
-  await Promise.all(syncs);
+function syncDataForAllLayers() {
+  return async (dispatch, getState) => {
+    const syncPromises = getLayerList(getState()).map(async layer => {
+      return dispatch(syncDataForLayer(layer));
+    });
+    await Promise.all(syncPromises);
+  };
+}
+
+function syncDataForLayer(layer) {
+  return async (dispatch, getState) => {
+    const dataFilters = getDataFilters(getState());
+    if (!layer.isVisible() || !layer.showAtZoomLevel(dataFilters.zoom)) {
+      return;
+    }
+
+    await layer.syncData({
+      ...getLayerLoadingCallbacks(dispatch, getState, layer.getId()),
+      dataFilters,
+    });
+  };
+}
+
+function syncDataForLayerId(layerId) {
+  return async (dispatch, getState) => {
+    const layer = getLayerById(layerId, getState());
+    if (layer) {
+      dispatch(syncDataForLayer(layer));
+    }
+  };
 }
 
 export function cancelAllInFlightRequests() {
@@ -192,7 +214,7 @@ export function rollbackToTrackedLayerStateForSelectedLayer() {
     // syncDataForLayer may not trigger endDataLoad if no re-fetch is required
     dispatch(updateStyleMeta(layerId));
 
-    dispatch(syncDataForLayer(layerId));
+    dispatch(syncDataForLayerId(layerId));
   };
 }
 
@@ -252,7 +274,7 @@ export function addLayer(layerDescriptor) {
       type: ADD_LAYER,
       layer: layerDescriptor,
     });
-    dispatch(syncDataForLayer(layerDescriptor.id));
+    dispatch(syncDataForLayerId(layerDescriptor.id));
   };
 }
 
@@ -333,7 +355,7 @@ export function setLayerVisibility(layerId, makeVisible) {
       visibility: makeVisible,
     });
     if (makeVisible) {
-      dispatch(syncDataForLayer(layerId));
+      dispatch(syncDataForLayer(layer));
     }
   };
 }
@@ -466,8 +488,7 @@ export function mapExtentChanged(newMapConstants) {
         ...newMapConstants,
       },
     });
-    const newDataFilters = { ...dataFilters, ...newMapConstants };
-    await syncDataForAllLayers(dispatch, getState, newDataFilters);
+    await dispatch(syncDataForAllLayers());
   };
 }
 
@@ -751,7 +772,7 @@ export function updateSourceProp(layerId, propName, value, newLayerType) {
       dispatch(updateLayerType(layerId, newLayerType));
     }
     await dispatch(clearMissingStyleProperties(layerId));
-    dispatch(syncDataForLayer(layerId));
+    dispatch(syncDataForLayerId(layerId));
   };
 }
 
@@ -771,20 +792,6 @@ function updateLayerType(layerId, newLayerType) {
   };
 }
 
-export function syncDataForLayer(layerId) {
-  return async (dispatch, getState) => {
-    const targetLayer = getLayerById(layerId, getState());
-    if (targetLayer) {
-      const dataFilters = getDataFilters(getState());
-      const loadingFunctions = getLayerLoadingCallbacks(dispatch, getState, layerId);
-      await targetLayer.syncData({
-        ...loadingFunctions,
-        dataFilters,
-      });
-    }
-  };
-}
-
 export function updateLayerLabel(id, newLabel) {
   return {
     type: UPDATE_LAYER_PROP,
@@ -830,7 +837,7 @@ export function setLayerQuery(id, query) {
       newValue: query,
     });
 
-    dispatch(syncDataForLayer(id));
+    dispatch(syncDataForLayerId(id));
   };
 }
 
@@ -895,8 +902,7 @@ export function setQuery({ query, timeFilters, filters = [], refresh = false })
       filters,
     });
 
-    const dataFilters = getDataFilters(getState());
-    await syncDataForAllLayers(dispatch, getState, dataFilters);
+    await dispatch(syncDataForAllLayers());
   };
 }
 
@@ -909,13 +915,12 @@ export function setRefreshConfig({ isPaused, interval }) {
 }
 
 export function triggerRefreshTimer() {
-  return async (dispatch, getState) => {
+  return async dispatch => {
     dispatch({
       type: TRIGGER_REFRESH_TIMER,
     });
 
-    const dataFilters = getDataFilters(getState());
-    await syncDataForAllLayers(dispatch, getState, dataFilters);
+    await dispatch(syncDataForAllLayers());
   };
 }
 
@@ -956,7 +961,7 @@ export function updateLayerStyle(layerId, styleDescriptor) {
     dispatch(updateStyleMeta(layerId));
 
     // Style update may require re-fetch, for example ES search may need to retrieve field used for dynamic styling
-    dispatch(syncDataForLayer(layerId));
+    dispatch(syncDataForLayerId(layerId));
   };
 }
 
@@ -994,12 +999,12 @@ export function setJoinsForLayer(layer, joins) {
   return async dispatch => {
     await dispatch({
       type: SET_JOINS,
-      layer: layer,
-      joins: joins,
+      layer,
+      joins,
     });
 
     await dispatch(clearMissingStyleProperties(layer.getId()));
-    dispatch(syncDataForLayer(layer.getId()));
+    dispatch(syncDataForLayerId(layer.getId()));
   };
 }
 

x-pack/plugins/maps/public/classes/layers/tile_layer/tile_layer.js

@@ -25,9 +25,6 @@ export class TileLayer extends AbstractLayer {
   }
 
   async syncData({ startLoading, stopLoading, onLoadError, dataFilters }) {
-    if (!this.isVisible() || !this.showAtZoomLevel(dataFilters.zoom)) {
-      return;
-    }
     const sourceDataRequest = this.getSourceDataRequest();
     if (sourceDataRequest) {
       //data is immmutable

x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx

@@ -78,10 +78,6 @@ export class TiledVectorLayer extends VectorLayer {
   }
 
   async syncData(syncContext: SyncContext) {
-    if (!this.isVisible() || !this.showAtZoomLevel(syncContext.dataFilters.zoom)) {
-      return;
-    }
-
     await this._syncSourceStyleMeta(syncContext, this._source, this._style);
     await this._syncSourceFormatters(syncContext, this._source, this._style);
     await this._syncMVTUrlTemplate(syncContext);

x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js

@@ -571,10 +571,6 @@ export class VectorLayer extends AbstractLayer {
   // Given 2 above, which source/style to use can not be pulled from data request state.
   // Therefore, source and style are provided as arugments and must be used instead of calling getSource or getCurrentStyle.
   async _syncData(syncContext, source, style) {
-    if (!this.isVisible() || !this.showAtZoomLevel(syncContext.dataFilters.zoom)) {
-      return;
-    }
-
     await this._syncSourceStyleMeta(syncContext, source, style);
     await this._syncSourceFormatters(syncContext, source, style);
     const sourceResult = await this._syncSource(syncContext, source, style);

x-pack/plugins/maps/public/classes/layers/vector_tile_layer/vector_tile_layer.js

@@ -45,10 +45,6 @@ export class VectorTileLayer extends TileLayer {
   }
 
   async syncData({ startLoading, stopLoading, onLoadError, dataFilters }) {
-    if (!this.isVisible() || !this.showAtZoomLevel(dataFilters.zoom)) {
-      return;
-    }
-
     const nextMeta = { tileLayerId: this.getSource().getTileLayerId() };
     const canSkipSync = this._canSkipSync({
       prevDataRequest: this.getSourceDataRequest(),

x-pack/test/functional/es_archives/maps/kibana/data.json

@@ -233,7 +233,7 @@
         "title" : "document example top hits",
         "description" : "",
         "mapStateJSON" : "{\"zoom\":4.1,\"center\":{\"lon\":-100.61091,\"lat\":33.23887},\"timeFilters\":{\"from\":\"2015-09-20T00:00:00.000Z\",\"to\":\"2015-09-24T01:00:00.000Z\"},\"refreshConfig\":{\"isPaused\":true,\"interval\":1000},\"query\":{\"query\":\"\",\"language\":\"kuery\"}}",
-        "layerListJSON" : "[{\"id\":\"0hmz5\",\"sourceDescriptor\":{\"type\":\"EMS_TMS\",\"id\":\"road_map\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"TILE\",\"properties\":{}},\"type\":\"TILE\",\"minZoom\":0,\"maxZoom\":24},{\"id\":\"z52lq\",\"label\":\"logstash\",\"minZoom\":0,\"maxZoom\":24,\"sourceDescriptor\":{\"id\":\"e1a5e1a6-676c-4a89-8ea9-0d91d64b73c6\",\"type\":\"ES_SEARCH\",\"geoField\":\"geo.coordinates\",\"limit\":2048,\"filterByMapBounds\":true,\"showTooltip\":true,\"tooltipProperties\":[],\"topHitsTimeField\":\"@timestamp\",\"useTopHits\":true,\"topHitsSplitField\":\"machine.os.raw\",\"topHitsSize\":2,\"indexPatternRefName\":\"layer_1_source_index_pattern\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#e6194b\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#FFFFFF\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"STATIC\",\"options\":{\"size\":10}}},\"previousStyle\":null},\"type\":\"VECTOR\"}]",
+        "layerListJSON" : "[{\"id\":\"z52lq\",\"label\":\"logstash\",\"minZoom\":0,\"maxZoom\":24,\"sourceDescriptor\":{\"id\":\"e1a5e1a6-676c-4a89-8ea9-0d91d64b73c6\",\"type\":\"ES_SEARCH\",\"geoField\":\"geo.coordinates\",\"limit\":2048,\"filterByMapBounds\":true,\"showTooltip\":true,\"tooltipProperties\":[],\"topHitsTimeField\":\"@timestamp\",\"useTopHits\":true,\"topHitsSplitField\":\"machine.os.raw\",\"topHitsSize\":2,\"indexPatternRefName\":\"layer_1_source_index_pattern\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#e6194b\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#FFFFFF\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"STATIC\",\"options\":{\"size\":10}}},\"previousStyle\":null},\"type\":\"VECTOR\"}]",
         "uiStateJSON" : "{\"isLayerTOCOpen\":true,\"openTOCDetails\":[]}",
         "bounds" : {
           "type" : "polygon",
@@ -467,7 +467,7 @@
           "type": "envelope"
         },
         "description": "",
-        "layerListJSON" : "[{\"id\":\"0hmz5\",\"label\":\"EMS base layer (road_map)\",\"sourceDescriptor\":{\"type\":\"EMS_TMS\",\"id\":\"road_map\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"TILE\",\"properties\":{}},\"type\":\"VECTOR_TILE\",\"minZoom\":0,\"maxZoom\":24},{\"id\":\"n1t6f\",\"label\":null,\"minZoom\":0,\"maxZoom\":24,\"sourceDescriptor\":{\"id\":\"62eca1fc-fe42-11e8-8eb2-f2801f1b9fd1\",\"type\":\"ES_SEARCH\",\"geoField\":\"geometry\",\"limit\":2048,\"filterByMapBounds\":false,\"showTooltip\":true,\"tooltipProperties\":[\"name\"],\"applyGlobalQuery\":false,\"indexPatternRefName\":\"layer_1_source_index_pattern\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"DYNAMIC\",\"options\":{\"fieldMetaOptions\":{\"isEnabled\":false,\"sigma\":3},\"field\":{\"label\":\"max(prop1) group by meta_for_geo_shapes*.shape_name\",\"name\":\"__kbnjoin__max_of_prop1_groupby_meta_for_geo_shapes*.shape_name\",\"origin\":\"join\"},\"color\":\"Blues\"}},\"iconSize\":{\"type\":\"STATIC\",\"options\":{\"size\":10}}},\"temporary\":true,\"previousStyle\":null},\"type\":\"VECTOR\",\"joins\":[{\"leftField\":\"name\",\"right\":{\"id\":\"855ccb86-fe42-11e8-8eb2-f2801f1b9fd1\",\"indexPatternTitle\":\"meta_for_geo_shapes*\",\"term\":\"shape_name\",\"metrics\":[{\"type\":\"max\",\"field\":\"prop1\"}],\"applyGlobalQuery\":true,\"indexPatternRefName\":\"layer_1_join_0_index_pattern\"}}]}]",
+        "layerListJSON" : "[{\"id\":\"n1t6f\",\"label\":null,\"minZoom\":0,\"maxZoom\":24,\"sourceDescriptor\":{\"id\":\"62eca1fc-fe42-11e8-8eb2-f2801f1b9fd1\",\"type\":\"ES_SEARCH\",\"geoField\":\"geometry\",\"limit\":2048,\"filterByMapBounds\":false,\"showTooltip\":true,\"tooltipProperties\":[\"name\"],\"applyGlobalQuery\":false,\"indexPatternRefName\":\"layer_1_source_index_pattern\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"DYNAMIC\",\"options\":{\"fieldMetaOptions\":{\"isEnabled\":false,\"sigma\":3},\"field\":{\"label\":\"max(prop1) group by meta_for_geo_shapes*.shape_name\",\"name\":\"__kbnjoin__max_of_prop1_groupby_meta_for_geo_shapes*.shape_name\",\"origin\":\"join\"},\"color\":\"Blues\"}},\"iconSize\":{\"type\":\"STATIC\",\"options\":{\"size\":10}}},\"temporary\":true,\"previousStyle\":null},\"type\":\"VECTOR\",\"joins\":[{\"leftField\":\"name\",\"right\":{\"id\":\"855ccb86-fe42-11e8-8eb2-f2801f1b9fd1\",\"indexPatternTitle\":\"meta_for_geo_shapes*\",\"term\":\"shape_name\",\"metrics\":[{\"type\":\"max\",\"field\":\"prop1\"}],\"applyGlobalQuery\":true,\"indexPatternRefName\":\"layer_1_join_0_index_pattern\"}}]}]",
         "mapStateJSON": "{\"zoom\":3.02,\"center\":{\"lon\":77.33426,\"lat\":-0.04647},\"timeFilters\":{\"from\":\"now-17m\",\"to\":\"now\",\"mode\":\"quick\"},\"refreshConfig\":{\"isPaused\":true,\"interval\":1000}}",
         "title": "join example",
         "uiStateJSON": "{\"isLayerTOCOpen\":true,\"openTOCDetails\":[\"n1t6f\"]}"
@@ -512,7 +512,7 @@
           ],
           "type": "envelope"
         },
-        "layerListJSON": "[{\"id\":\"0hmz5\",\"sourceDescriptor\":{\"type\":\"EMS_TMS\",\"id\":\"road_map\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"TILE\",\"properties\":{}},\"type\":\"TILE\",\"minZoom\":0,\"maxZoom\":24},{\"id\":\"3xlvm\",\"label\":null,\"minZoom\":0,\"maxZoom\":24,\"sourceDescriptor\":{\"resolution\": \"COARSE\",\"type\":\"ES_GEO_GRID\",\"id\":\"427aa49d-a552-4e7d-a629-67c47db27128\",\"indexPatternId\":\"c698b940-e149-11e8-a35a-370a8516603a\",\"geoField\":\"geo.coordinates\",\"requestType\":\"heatmap\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"HEATMAP\",\"refinement\":\"coarse\",\"properties\":{},\"previousStyle\":null},\"type\":\"HEATMAP\"}]",
+        "layerListJSON": "[{\"id\":\"3xlvm\",\"label\":null,\"minZoom\":0,\"maxZoom\":24,\"sourceDescriptor\":{\"resolution\": \"COARSE\",\"type\":\"ES_GEO_GRID\",\"id\":\"427aa49d-a552-4e7d-a629-67c47db27128\",\"indexPatternId\":\"c698b940-e149-11e8-a35a-370a8516603a\",\"geoField\":\"geo.coordinates\",\"requestType\":\"heatmap\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"HEATMAP\",\"refinement\":\"coarse\",\"properties\":{},\"previousStyle\":null},\"type\":\"HEATMAP\"}]",
         "mapStateJSON": "{\"zoom\":3.59,\"center\":{\"lon\":-98.05765,\"lat\":38.32288},\"timeFilters\":{\"from\":\"2015-09-20T00:00:00.000Z\",\"to\":\"2015-09-20T01:00:00.000Z\"},\"refreshConfig\":{\"isPaused\":true,\"interval\":1000}}",
         "title": "geo grid heatmap example",
         "uiStateJSON": "{\"isDarkMode\":false}"
@@ -543,7 +543,7 @@
           "type": "envelope"
         },
         "description": "",
-        "layerListJSON": "[{\"id\":\"0hmz5\",\"sourceDescriptor\":{\"type\":\"EMS_TMS\",\"id\":\"road_map\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"TILE\",\"properties\":{}},\"type\":\"TILE\",\"minZoom\":0,\"maxZoom\":24},{\"id\":\"g1xkv\",\"label\":null,\"minZoom\":0,\"maxZoom\":24,\"sourceDescriptor\":{\"resolution\": \"COARSE\",\"type\":\"ES_GEO_GRID\",\"id\":\"9305f6ea-4518-4c06-95b9-33321aa38d6a\",\"indexPatternId\":\"c698b940-e149-11e8-a35a-370a8516603a\",\"geoField\":\"geo.coordinates\",\"requestType\":\"grid\",\"metrics\":[{\"type\":\"count\"},{\"type\":\"max\",\"field\":\"bytes\"}]},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"DYNAMIC\",\"options\":{\"field\":{\"label\":\"max of bytes\",\"name\":\"max_of_bytes\",\"origin\":\"source\"},\"color\":\"Blues\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#cccccc\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"DYNAMIC\",\"options\":{\"field\":{\"label\":\"Count\",\"name\":\"doc_count\",\"origin\":\"source\"},\"minSize\":4,\"maxSize\":32}}},\"temporary\":true,\"previousStyle\":null},\"type\":\"VECTOR\"}]",
+        "layerListJSON": "[{\"id\":\"g1xkv\",\"label\":null,\"minZoom\":0,\"maxZoom\":24,\"sourceDescriptor\":{\"resolution\": \"COARSE\",\"type\":\"ES_GEO_GRID\",\"id\":\"9305f6ea-4518-4c06-95b9-33321aa38d6a\",\"indexPatternId\":\"c698b940-e149-11e8-a35a-370a8516603a\",\"geoField\":\"geo.coordinates\",\"requestType\":\"grid\",\"metrics\":[{\"type\":\"count\"},{\"type\":\"max\",\"field\":\"bytes\"}]},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"DYNAMIC\",\"options\":{\"field\":{\"label\":\"max of bytes\",\"name\":\"max_of_bytes\",\"origin\":\"source\"},\"color\":\"Blues\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#cccccc\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"DYNAMIC\",\"options\":{\"field\":{\"label\":\"Count\",\"name\":\"doc_count\",\"origin\":\"source\"},\"minSize\":4,\"maxSize\":32}}},\"temporary\":true,\"previousStyle\":null},\"type\":\"VECTOR\"}]",
         "mapStateJSON": "{\"zoom\":3.59,\"center\":{\"lon\":-98.05765,\"lat\":38.32288},\"timeFilters\":{\"from\":\"2015-09-20T00:00:00.000Z\",\"to\":\"2015-09-20T01:00:00.000Z\"},\"refreshConfig\":{\"isPaused\":true,\"interval\":1000}}",
         "title": "geo grid vector grid example",
         "uiStateJSON": "{\"isDarkMode\":false}"