From 5dbc73f1b41d7d7c2159674ff8ce260c74554bfc Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Tue, 11 May 2021 09:38:40 -0600 Subject: [PATCH] [Maps] use deep equals for mapbox filter expression equals check (#99673) * [Maps] use deep equals for mapbox filter expression equals check * cleanup --- .../layers/vector_layer/vector_layer.tsx | 10 +-- .../classes/util/mb_filter_expressions.ts | 82 +++++++++---------- .../functional/apps/maps/mapbox_styles.js | 41 ++++------ 3 files changed, 57 insertions(+), 76 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.tsx b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.tsx index db781344eb6f..a1474237f6c9 100644 --- a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.tsx +++ b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.tsx @@ -782,7 +782,7 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer { } const filterExpr = getPointFilterExpression(this.hasJoins()); - if (filterExpr !== mbMap.getFilter(pointLayerId)) { + if (!_.isEqual(filterExpr, mbMap.getFilter(pointLayerId))) { mbMap.setFilter(pointLayerId, filterExpr); mbMap.setFilter(textLayerId, filterExpr); } @@ -818,7 +818,7 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer { } const filterExpr = getPointFilterExpression(this.hasJoins()); - if (filterExpr !== mbMap.getFilter(symbolLayerId)) { + if (!_.isEqual(filterExpr, mbMap.getFilter(symbolLayerId))) { mbMap.setFilter(symbolLayerId, filterExpr); } @@ -900,14 +900,14 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer { this.syncVisibilityWithMb(mbMap, fillLayerId); mbMap.setLayerZoomRange(fillLayerId, this.getMinZoom(), this.getMaxZoom()); const fillFilterExpr = getFillFilterExpression(hasJoins); - if (fillFilterExpr !== mbMap.getFilter(fillLayerId)) { + if (!_.isEqual(fillFilterExpr, mbMap.getFilter(fillLayerId))) { mbMap.setFilter(fillLayerId, fillFilterExpr); } this.syncVisibilityWithMb(mbMap, lineLayerId); mbMap.setLayerZoomRange(lineLayerId, this.getMinZoom(), this.getMaxZoom()); const lineFilterExpr = getLineFilterExpression(hasJoins); - if (lineFilterExpr !== mbMap.getFilter(lineLayerId)) { + if (!_.isEqual(lineFilterExpr, mbMap.getFilter(lineLayerId))) { mbMap.setFilter(lineLayerId, lineFilterExpr); } @@ -931,7 +931,7 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer { } const filterExpr = getCentroidFilterExpression(this.hasJoins()); - if (filterExpr !== mbMap.getFilter(centroidLayerId)) { + if (!_.isEqual(filterExpr, mbMap.getFilter(centroidLayerId))) { mbMap.setFilter(centroidLayerId, filterExpr); } diff --git a/x-pack/plugins/maps/public/classes/util/mb_filter_expressions.ts b/x-pack/plugins/maps/public/classes/util/mb_filter_expressions.ts index 4526340d3d86..c798f05df981 100644 --- a/x-pack/plugins/maps/public/classes/util/mb_filter_expressions.ts +++ b/x-pack/plugins/maps/public/classes/util/mb_filter_expressions.ts @@ -15,61 +15,55 @@ import { export const EXCLUDE_TOO_MANY_FEATURES_BOX = ['!=', ['get', KBN_TOO_MANY_FEATURES_PROPERTY], true]; const EXCLUDE_CENTROID_FEATURES = ['!=', ['get', KBN_IS_CENTROID_FEATURE], true]; -const VISIBILITY_FILTER_CLAUSE = ['all', ['==', ['get', FEATURE_VISIBLE_PROPERTY_NAME], true]]; -// Kibana features are features added by kibana that do not exist in real data -const EXCLUDE_KBN_FEATURES = ['all', EXCLUDE_TOO_MANY_FEATURES_BOX, EXCLUDE_CENTROID_FEATURES]; +function getFilterExpression(geometryFilter: unknown[], hasJoins: boolean) { + const filters: unknown[] = [ + EXCLUDE_TOO_MANY_FEATURES_BOX, + EXCLUDE_CENTROID_FEATURES, + geometryFilter, + ]; -const CLOSED_SHAPE_MB_FILTER = [ - ...EXCLUDE_KBN_FEATURES, - [ - 'any', - ['==', ['geometry-type'], GEO_JSON_TYPE.POLYGON], - ['==', ['geometry-type'], GEO_JSON_TYPE.MULTI_POLYGON], - ], -]; + if (hasJoins) { + filters.push(['==', ['get', FEATURE_VISIBLE_PROPERTY_NAME], true]); + } -const VISIBLE_CLOSED_SHAPE_MB_FILTER = [...VISIBILITY_FILTER_CLAUSE, CLOSED_SHAPE_MB_FILTER]; - -const ALL_SHAPE_MB_FILTER = [ - ...EXCLUDE_KBN_FEATURES, - [ - 'any', - ['==', ['geometry-type'], GEO_JSON_TYPE.POLYGON], - ['==', ['geometry-type'], GEO_JSON_TYPE.MULTI_POLYGON], - ['==', ['geometry-type'], GEO_JSON_TYPE.LINE_STRING], - ['==', ['geometry-type'], GEO_JSON_TYPE.MULTI_LINE_STRING], - ], -]; - -const VISIBLE_ALL_SHAPE_MB_FILTER = [...VISIBILITY_FILTER_CLAUSE, ALL_SHAPE_MB_FILTER]; - -const POINT_MB_FILTER = [ - ...EXCLUDE_KBN_FEATURES, - [ - 'any', - ['==', ['geometry-type'], GEO_JSON_TYPE.POINT], - ['==', ['geometry-type'], GEO_JSON_TYPE.MULTI_POINT], - ], -]; - -const VISIBLE_POINT_MB_FILTER = [...VISIBILITY_FILTER_CLAUSE, POINT_MB_FILTER]; - -const CENTROID_MB_FILTER = ['all', ['==', ['get', KBN_IS_CENTROID_FEATURE], true]]; - -const VISIBLE_CENTROID_MB_FILTER = [...VISIBILITY_FILTER_CLAUSE, CENTROID_MB_FILTER]; + return ['all', ...filters]; +} export function getFillFilterExpression(hasJoins: boolean): unknown[] { - return hasJoins ? VISIBLE_CLOSED_SHAPE_MB_FILTER : CLOSED_SHAPE_MB_FILTER; + return getFilterExpression( + [ + 'any', + ['==', ['geometry-type'], GEO_JSON_TYPE.POLYGON], + ['==', ['geometry-type'], GEO_JSON_TYPE.MULTI_POLYGON], + ], + hasJoins + ); } export function getLineFilterExpression(hasJoins: boolean): unknown[] { - return hasJoins ? VISIBLE_ALL_SHAPE_MB_FILTER : ALL_SHAPE_MB_FILTER; + return getFilterExpression( + [ + 'any', + ['==', ['geometry-type'], GEO_JSON_TYPE.POLYGON], + ['==', ['geometry-type'], GEO_JSON_TYPE.MULTI_POLYGON], + ['==', ['geometry-type'], GEO_JSON_TYPE.LINE_STRING], + ['==', ['geometry-type'], GEO_JSON_TYPE.MULTI_LINE_STRING], + ], + hasJoins + ); } export function getPointFilterExpression(hasJoins: boolean): unknown[] { - return hasJoins ? VISIBLE_POINT_MB_FILTER : POINT_MB_FILTER; + return getFilterExpression( + [ + 'any', + ['==', ['geometry-type'], GEO_JSON_TYPE.POINT], + ['==', ['geometry-type'], GEO_JSON_TYPE.MULTI_POINT], + ], + hasJoins + ); } export function getCentroidFilterExpression(hasJoins: boolean): unknown[] { - return hasJoins ? VISIBLE_CENTROID_MB_FILTER : CENTROID_MB_FILTER; + return getFilterExpression(['==', ['get', KBN_IS_CENTROID_FEATURE], true], hasJoins); } diff --git a/x-pack/test/functional/apps/maps/mapbox_styles.js b/x-pack/test/functional/apps/maps/mapbox_styles.js index b483b95e0ca1..31cb366f826c 100644 --- a/x-pack/test/functional/apps/maps/mapbox_styles.js +++ b/x-pack/test/functional/apps/maps/mapbox_styles.js @@ -40,13 +40,10 @@ export default function ({ getPageObjects, getService }) { maxzoom: 24, filter: [ 'all', + ['!=', ['get', '__kbn_too_many_features__'], true], + ['!=', ['get', '__kbn_is_centroid_feature__'], true], + ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']], ['==', ['get', '__kbn_isvisibleduetojoin__'], true], - [ - 'all', - ['!=', ['get', '__kbn_too_many_features__'], true], - ['!=', ['get', '__kbn_is_centroid_feature__'], true], - ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']], - ], ], layout: { visibility: 'visible' }, paint: { @@ -124,17 +121,10 @@ export default function ({ getPageObjects, getService }) { maxzoom: 24, filter: [ 'all', + ['!=', ['get', '__kbn_too_many_features__'], true], + ['!=', ['get', '__kbn_is_centroid_feature__'], true], + ['any', ['==', ['geometry-type'], 'Polygon'], ['==', ['geometry-type'], 'MultiPolygon']], ['==', ['get', '__kbn_isvisibleduetojoin__'], true], - [ - 'all', - ['!=', ['get', '__kbn_too_many_features__'], true], - ['!=', ['get', '__kbn_is_centroid_feature__'], true], - [ - 'any', - ['==', ['geometry-type'], 'Polygon'], - ['==', ['geometry-type'], 'MultiPolygon'], - ], - ], ], layout: { visibility: 'visible' }, paint: { @@ -208,19 +198,16 @@ export default function ({ getPageObjects, getService }) { maxzoom: 24, filter: [ 'all', - ['==', ['get', '__kbn_isvisibleduetojoin__'], true], + ['!=', ['get', '__kbn_too_many_features__'], true], + ['!=', ['get', '__kbn_is_centroid_feature__'], true], [ - 'all', - ['!=', ['get', '__kbn_too_many_features__'], true], - ['!=', ['get', '__kbn_is_centroid_feature__'], true], - [ - 'any', - ['==', ['geometry-type'], 'Polygon'], - ['==', ['geometry-type'], 'MultiPolygon'], - ['==', ['geometry-type'], 'LineString'], - ['==', ['geometry-type'], 'MultiLineString'], - ], + 'any', + ['==', ['geometry-type'], 'Polygon'], + ['==', ['geometry-type'], 'MultiPolygon'], + ['==', ['geometry-type'], 'LineString'], + ['==', ['geometry-type'], 'MultiLineString'], ], + ['==', ['get', '__kbn_isvisibleduetojoin__'], true], ], layout: { visibility: 'visible' }, paint: { 'line-color': '#41937c', 'line-opacity': 0.75, 'line-width': 1 },