mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[maps] fix layer flashes when query is updated in query bar for mvt layers (#117590)
* [maps] fix layer flashes when query is updated in query bar for mvt layers * remove unused services * eslint Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Nathan Reese
GitHub
parent
6e18f3ff09
commit
f68d5ad752
3 changed files with 298 additions and 79 deletions
|
|
@ -207,12 +207,10 @@ export class MapApp extends React.Component<Props, State> {
|
|||
filters,
|
||||
query,
|
||||
time,
|
||||
forceRefresh = false,
|
||||
}: {
|
||||
filters?: Filter[];
|
||||
query?: Query;
|
||||
time?: TimeRange;
|
||||
forceRefresh?: boolean;
|
||||
}) => {
|
||||
const { filterManager } = getData().query;
|
||||
|
||||
|
|
@ -221,7 +219,7 @@ export class MapApp extends React.Component<Props, State> {
|
|||
}
|
||||
|
||||
this.props.setQuery({
|
||||
forceRefresh,
|
||||
forceRefresh: false,
|
||||
filters: filterManager.getFilters(),
|
||||
query,
|
||||
timeFilters: time,
|
||||
|
|
@ -398,11 +396,16 @@ export class MapApp extends React.Component<Props, State> {
|
|||
filters={this.props.filters}
|
||||
query={this.props.query}
|
||||
onQuerySubmit={({ dateRange, query }) => {
|
||||
this._onQueryChange({
|
||||
query,
|
||||
time: dateRange,
|
||||
forceRefresh: true,
|
||||
});
|
||||
const isUpdate =
|
||||
!_.isEqual(dateRange, this.props.timeFilters) || !_.isEqual(query, this.props.query);
|
||||
if (isUpdate) {
|
||||
this._onQueryChange({
|
||||
query,
|
||||
time: dateRange,
|
||||
});
|
||||
} else {
|
||||
this.props.setQuery({ forceRefresh: true });
|
||||
}
|
||||
}}
|
||||
onFiltersUpdated={this._onFiltersChange}
|
||||
dateRangeFrom={this.props.timeFilters.from}
|
||||
|
|
|
|||
|
|
@ -7,17 +7,18 @@
|
|||
|
||||
import expect from '@kbn/expect';
|
||||
|
||||
const VECTOR_SOURCE_ID = 'caffa63a-ebfb-466d-8ff6-d797975b88ab';
|
||||
|
||||
export default function ({ getPageObjects, getService }) {
|
||||
const PageObjects = getPageObjects(['maps']);
|
||||
const inspector = getService('inspector');
|
||||
const security = getService('security');
|
||||
const testSubjects = getService('testSubjects');
|
||||
|
||||
describe('mvt geoshape layer', () => {
|
||||
describe('mvt scaling', () => {
|
||||
before(async () => {
|
||||
await security.testUser.setRoles(['global_maps_all', 'geoshape_data_reader'], false);
|
||||
await PageObjects.maps.loadSavedMap('geo_shape_mvt');
|
||||
await security.testUser.setRoles(
|
||||
['global_maps_all', 'test_logstash_reader', 'geoshape_data_reader'],
|
||||
false
|
||||
);
|
||||
});
|
||||
|
||||
after(async () => {
|
||||
|
|
@ -25,85 +26,275 @@ export default function ({ getPageObjects, getService }) {
|
|||
await security.testUser.restoreDefaults();
|
||||
});
|
||||
|
||||
it('should render with mvt-source', async () => {
|
||||
const mapboxStyle = await PageObjects.maps.getMapboxStyle();
|
||||
describe('layer style', () => {
|
||||
const VECTOR_SOURCE_ID = 'caffa63a-ebfb-466d-8ff6-d797975b88ab';
|
||||
|
||||
//Source should be correct
|
||||
expect(
|
||||
mapboxStyle.sources[VECTOR_SOURCE_ID].tiles[0].startsWith(
|
||||
`/api/maps/mvt/getTile/{z}/{x}/{y}.pbf?geometryFieldName=geometry&index=geo_shapes*&requestBody=(_source:!(geometry),docvalue_fields:!(prop1),query:(bool:(filter:!(),must:!(),must_not:!(),should:!())),runtime_mappings:(),script_fields:(),size:10001,stored_fields:!(geometry,prop1))`
|
||||
)
|
||||
).to.equal(true);
|
||||
let mapboxStyle;
|
||||
before(async () => {
|
||||
await PageObjects.maps.loadSavedMap('geo_shape_mvt');
|
||||
mapboxStyle = await PageObjects.maps.getMapboxStyle();
|
||||
});
|
||||
|
||||
//Should correctly load meta for style-rule (sigma is set to 1, opacity to 1)
|
||||
const fillLayer = mapboxStyle.layers.find((layer) => layer.id === VECTOR_SOURCE_ID + '_fill');
|
||||
expect(fillLayer.paint).to.eql({
|
||||
'fill-color': [
|
||||
'interpolate',
|
||||
['linear'],
|
||||
[
|
||||
'coalesce',
|
||||
it('should request tiles from /api/maps/mvt/getTile', async () => {
|
||||
const tileUrl = new URL(
|
||||
mapboxStyle.sources[VECTOR_SOURCE_ID].tiles[0],
|
||||
'http://absolute_path'
|
||||
);
|
||||
const searchParams = Object.fromEntries(tileUrl.searchParams);
|
||||
|
||||
expect(tileUrl.pathname).to.equal('/api/maps/mvt/getTile/%7Bz%7D/%7Bx%7D/%7By%7D.pbf');
|
||||
|
||||
// token is an unique id that changes between runs
|
||||
expect(typeof searchParams.token).to.equal('string');
|
||||
delete searchParams.token;
|
||||
|
||||
expect(searchParams).to.eql({
|
||||
geometryFieldName: 'geometry',
|
||||
index: 'geo_shapes*',
|
||||
requestBody:
|
||||
'(_source:!(geometry),docvalue_fields:!(prop1),query:(bool:(filter:!(),must:!(),must_not:!(),should:!())),runtime_mappings:(),script_fields:(),size:10001,stored_fields:!(geometry,prop1))',
|
||||
});
|
||||
});
|
||||
|
||||
it('should have fill layer', async () => {
|
||||
//Should correctly load meta for style-rule (sigma is set to 1, opacity to 1)
|
||||
const fillLayer = mapboxStyle.layers.find(
|
||||
(layer) => layer.id === VECTOR_SOURCE_ID + '_fill'
|
||||
);
|
||||
expect(fillLayer.paint).to.eql({
|
||||
'fill-color': [
|
||||
'interpolate',
|
||||
['linear'],
|
||||
[
|
||||
'case',
|
||||
['==', ['get', 'prop1'], null],
|
||||
0.3819660112501051,
|
||||
'coalesce',
|
||||
[
|
||||
'max',
|
||||
['min', ['to-number', ['get', 'prop1']], 3.618033988749895],
|
||||
1.381966011250105,
|
||||
'case',
|
||||
['==', ['get', 'prop1'], null],
|
||||
0.3819660112501051,
|
||||
[
|
||||
'max',
|
||||
['min', ['to-number', ['get', 'prop1']], 3.618033988749895],
|
||||
1.381966011250105,
|
||||
],
|
||||
],
|
||||
0.3819660112501051,
|
||||
],
|
||||
0.3819660112501051,
|
||||
'rgba(0,0,0,0)',
|
||||
1.381966011250105,
|
||||
'#ecf1f7',
|
||||
1.6614745084375788,
|
||||
'#d9e3ef',
|
||||
1.9409830056250525,
|
||||
'#c5d5e7',
|
||||
2.2204915028125263,
|
||||
'#b2c7df',
|
||||
2.5,
|
||||
'#9eb9d8',
|
||||
2.7795084971874737,
|
||||
'#8bacd0',
|
||||
3.0590169943749475,
|
||||
'#769fc8',
|
||||
3.338525491562421,
|
||||
'#6092c0',
|
||||
],
|
||||
0.3819660112501051,
|
||||
'rgba(0,0,0,0)',
|
||||
1.381966011250105,
|
||||
'#ecf1f7',
|
||||
1.6614745084375788,
|
||||
'#d9e3ef',
|
||||
1.9409830056250525,
|
||||
'#c5d5e7',
|
||||
2.2204915028125263,
|
||||
'#b2c7df',
|
||||
2.5,
|
||||
'#9eb9d8',
|
||||
2.7795084971874737,
|
||||
'#8bacd0',
|
||||
3.0590169943749475,
|
||||
'#769fc8',
|
||||
3.338525491562421,
|
||||
'#6092c0',
|
||||
],
|
||||
'fill-opacity': 1,
|
||||
'fill-opacity': 1,
|
||||
});
|
||||
});
|
||||
|
||||
it('should have toomanyfeatures layer', async () => {
|
||||
const layer = mapboxStyle.layers.find((mbLayer) => {
|
||||
return mbLayer.id === `${VECTOR_SOURCE_ID}_toomanyfeatures`;
|
||||
});
|
||||
|
||||
expect(layer).to.eql({
|
||||
id: 'caffa63a-ebfb-466d-8ff6-d797975b88ab_toomanyfeatures',
|
||||
type: 'line',
|
||||
source: 'caffa63a-ebfb-466d-8ff6-d797975b88ab',
|
||||
'source-layer': 'meta',
|
||||
minzoom: 0,
|
||||
maxzoom: 24,
|
||||
filter: [
|
||||
'all',
|
||||
['==', ['get', 'hits.total.relation'], 'gte'],
|
||||
['>=', ['get', 'hits.total.value'], 10002],
|
||||
],
|
||||
layout: { visibility: 'visible' },
|
||||
paint: {
|
||||
'line-color': '#fec514',
|
||||
'line-width': 3,
|
||||
'line-dasharray': [2, 1],
|
||||
'line-opacity': 1,
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('Style should include toomanyfeatures layer', async () => {
|
||||
const mapboxStyle = await PageObjects.maps.getMapboxStyle();
|
||||
|
||||
const layer = mapboxStyle.layers.find((mbLayer) => {
|
||||
return mbLayer.id === `${VECTOR_SOURCE_ID}_toomanyfeatures`;
|
||||
describe('filtering', () => {
|
||||
before(async () => {
|
||||
await PageObjects.maps.loadSavedMap('MVT documents');
|
||||
});
|
||||
|
||||
expect(layer).to.eql({
|
||||
id: 'caffa63a-ebfb-466d-8ff6-d797975b88ab_toomanyfeatures',
|
||||
type: 'line',
|
||||
source: 'caffa63a-ebfb-466d-8ff6-d797975b88ab',
|
||||
'source-layer': 'meta',
|
||||
minzoom: 0,
|
||||
maxzoom: 24,
|
||||
filter: [
|
||||
'all',
|
||||
['==', ['get', 'hits.total.relation'], 'gte'],
|
||||
['>=', ['get', 'hits.total.value'], 10002],
|
||||
],
|
||||
layout: { visibility: 'visible' },
|
||||
paint: {
|
||||
'line-color': '#fec514',
|
||||
'line-width': 3,
|
||||
'line-dasharray': [2, 1],
|
||||
'line-opacity': 1,
|
||||
},
|
||||
async function getTileUrl() {
|
||||
const mapboxStyle = await PageObjects.maps.getMapboxStyle();
|
||||
return mapboxStyle.sources['a7ab2e06-145b-48c5-bd86-b633849017ad'].tiles[0];
|
||||
}
|
||||
|
||||
describe('applyGlobalQuery: true, applyGlobalTime: true, applyForceRefresh: true', () => {
|
||||
after(async () => {
|
||||
await PageObjects.maps.setAbsoluteRange(
|
||||
'Sep 20, 2015 @ 00:00:00.000',
|
||||
'Sep 20, 2015 @ 01:00:00.000'
|
||||
);
|
||||
await PageObjects.maps.setAndSubmitQuery('');
|
||||
});
|
||||
|
||||
it('should update MVT URL when query changes', async () => {
|
||||
const prevTileUrl = await getTileUrl();
|
||||
await PageObjects.maps.setAndSubmitQuery('machine.os.raw : "win 8"');
|
||||
const nextTileUrl = await getTileUrl();
|
||||
expect(prevTileUrl).to.not.eql(nextTileUrl);
|
||||
});
|
||||
|
||||
it('should update MVT URL when time changes', async () => {
|
||||
const prevTileUrl = await getTileUrl();
|
||||
await PageObjects.maps.setAbsoluteRange(
|
||||
'Sep 20, 2015 @ 00:00:00.000',
|
||||
'Sep 20, 2015 @ 03:00:00.000'
|
||||
);
|
||||
const nextTileUrl = await getTileUrl();
|
||||
expect(prevTileUrl).to.not.eql(nextTileUrl);
|
||||
});
|
||||
|
||||
it('should update MVT URL when refresh clicked', async () => {
|
||||
const prevTileUrl = await getTileUrl();
|
||||
await PageObjects.maps.refreshQuery();
|
||||
const nextTileUrl = await getTileUrl();
|
||||
expect(prevTileUrl).to.not.eql(nextTileUrl);
|
||||
});
|
||||
});
|
||||
|
||||
describe('applyGlobalQuery: false, applyGlobalTime: true, applyForceRefresh: true', () => {
|
||||
before(async () => {
|
||||
await PageObjects.maps.openLayerPanel('logstash-*');
|
||||
await testSubjects.click('mapLayerPanelApplyGlobalQueryCheckbox');
|
||||
await PageObjects.maps.waitForLayersToLoad();
|
||||
});
|
||||
|
||||
after(async () => {
|
||||
await PageObjects.maps.closeLayerPanel();
|
||||
await PageObjects.maps.setAbsoluteRange(
|
||||
'Sep 20, 2015 @ 00:00:00.000',
|
||||
'Sep 20, 2015 @ 01:00:00.000'
|
||||
);
|
||||
await PageObjects.maps.setAndSubmitQuery('');
|
||||
});
|
||||
|
||||
it('should not update MVT URL when query changes', async () => {
|
||||
const prevTileUrl = await getTileUrl();
|
||||
await PageObjects.maps.setAndSubmitQuery('machine.os.raw : "win 8"');
|
||||
const nextTileUrl = await getTileUrl();
|
||||
expect(prevTileUrl).to.eql(nextTileUrl);
|
||||
});
|
||||
|
||||
it('should update MVT URL when time changes', async () => {
|
||||
const prevTileUrl = await getTileUrl();
|
||||
await PageObjects.maps.setAbsoluteRange(
|
||||
'Sep 20, 2015 @ 00:00:00.000',
|
||||
'Sep 20, 2015 @ 03:00:00.000'
|
||||
);
|
||||
const nextTileUrl = await getTileUrl();
|
||||
expect(prevTileUrl).to.not.eql(nextTileUrl);
|
||||
});
|
||||
|
||||
it('should update MVT URL when refresh clicked', async () => {
|
||||
const prevTileUrl = await getTileUrl();
|
||||
await PageObjects.maps.refreshQuery();
|
||||
const nextTileUrl = await getTileUrl();
|
||||
expect(prevTileUrl).to.not.eql(nextTileUrl);
|
||||
});
|
||||
});
|
||||
|
||||
describe('applyGlobalQuery: true, applyGlobalTime: false, applyForceRefresh: true', () => {
|
||||
before(async () => {
|
||||
await PageObjects.maps.openLayerPanel('logstash-*');
|
||||
await testSubjects.click('mapLayerPanelApplyGlobalTimeCheckbox');
|
||||
await PageObjects.maps.waitForLayersToLoad();
|
||||
});
|
||||
|
||||
after(async () => {
|
||||
await PageObjects.maps.closeLayerPanel();
|
||||
await PageObjects.maps.setAbsoluteRange(
|
||||
'Sep 20, 2015 @ 00:00:00.000',
|
||||
'Sep 20, 2015 @ 01:00:00.000'
|
||||
);
|
||||
await PageObjects.maps.setAndSubmitQuery('');
|
||||
});
|
||||
|
||||
it('should update MVT URL when query changes', async () => {
|
||||
const prevTileUrl = await getTileUrl();
|
||||
await PageObjects.maps.setAndSubmitQuery('machine.os.raw : "win 8"');
|
||||
const nextTileUrl = await getTileUrl();
|
||||
expect(prevTileUrl).to.not.eql(nextTileUrl);
|
||||
});
|
||||
|
||||
it('should not update MVT URL when time changes', async () => {
|
||||
const prevTileUrl = await getTileUrl();
|
||||
await PageObjects.maps.setAbsoluteRange(
|
||||
'Sep 20, 2015 @ 00:00:00.000',
|
||||
'Sep 20, 2015 @ 03:00:00.000'
|
||||
);
|
||||
const nextTileUrl = await getTileUrl();
|
||||
expect(prevTileUrl).to.eql(nextTileUrl);
|
||||
});
|
||||
|
||||
it('should update MVT URL when refresh clicked', async () => {
|
||||
const prevTileUrl = await getTileUrl();
|
||||
await PageObjects.maps.refreshQuery();
|
||||
const nextTileUrl = await getTileUrl();
|
||||
expect(prevTileUrl).to.not.eql(nextTileUrl);
|
||||
});
|
||||
});
|
||||
|
||||
describe('applyGlobalQuery: true, applyGlobalTime: true, applyForceRefresh: false', () => {
|
||||
before(async () => {
|
||||
await PageObjects.maps.openLayerPanel('logstash-*');
|
||||
await testSubjects.click('mapLayerPanelRespondToForceRefreshCheckbox');
|
||||
await PageObjects.maps.waitForLayersToLoad();
|
||||
});
|
||||
|
||||
after(async () => {
|
||||
await PageObjects.maps.closeLayerPanel();
|
||||
await PageObjects.maps.setAbsoluteRange(
|
||||
'Sep 20, 2015 @ 00:00:00.000',
|
||||
'Sep 20, 2015 @ 01:00:00.000'
|
||||
);
|
||||
await PageObjects.maps.setAndSubmitQuery('');
|
||||
});
|
||||
|
||||
it('should update MVT URL when query changes', async () => {
|
||||
const prevTileUrl = await getTileUrl();
|
||||
await PageObjects.maps.setAndSubmitQuery('machine.os.raw : "win 8"');
|
||||
const nextTileUrl = await getTileUrl();
|
||||
expect(prevTileUrl).to.not.eql(nextTileUrl);
|
||||
});
|
||||
|
||||
it('should update MVT URL when time changes', async () => {
|
||||
const prevTileUrl = await getTileUrl();
|
||||
await PageObjects.maps.setAbsoluteRange(
|
||||
'Sep 20, 2015 @ 00:00:00.000',
|
||||
'Sep 20, 2015 @ 03:00:00.000'
|
||||
);
|
||||
const nextTileUrl = await getTileUrl();
|
||||
expect(prevTileUrl).to.not.eql(nextTileUrl);
|
||||
});
|
||||
|
||||
it('should not update MVT URL when refresh clicked', async () => {
|
||||
const prevTileUrl = await getTileUrl();
|
||||
await PageObjects.maps.refreshQuery();
|
||||
const nextTileUrl = await getTileUrl();
|
||||
expect(prevTileUrl).to.eql(nextTileUrl);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -911,6 +911,31 @@
|
|||
"version": "WzY0LDJd"
|
||||
}
|
||||
|
||||
{
|
||||
"attributes": {
|
||||
"description": "",
|
||||
"layerListJSON": "[{\"sourceDescriptor\":{\"geoField\":\"geo.coordinates\",\"filterByMapBounds\":true,\"scalingType\":\"MVT\",\"id\":\"a7ab2e06-145b-48c5-bd86-b633849017ad\",\"type\":\"ES_SEARCH\",\"applyGlobalQuery\":true,\"applyGlobalTime\":true,\"applyForceRefresh\":true,\"tooltipProperties\":[],\"sortField\":\"\",\"sortOrder\":\"desc\",\"topHitsSplitField\":\"\",\"topHitsSize\":1,\"indexPatternRefName\":\"layer_0_source_index_pattern\"},\"id\":\"a7ab2e06-145b-48c5-bd86-b633849017ad\",\"label\":null,\"minZoom\":0,\"maxZoom\":24,\"alpha\":0.75,\"visible\":true,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"icon\":{\"type\":\"STATIC\",\"options\":{\"value\":\"marker\"}},\"fillColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#54B399\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#41937c\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"STATIC\",\"options\":{\"size\":6}},\"iconOrientation\":{\"type\":\"STATIC\",\"options\":{\"orientation\":0}},\"labelText\":{\"type\":\"STATIC\",\"options\":{\"value\":\"\"}},\"labelColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#000000\"}},\"labelSize\":{\"type\":\"STATIC\",\"options\":{\"size\":14}},\"labelBorderColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#FFFFFF\"}},\"symbolizeAs\":{\"options\":{\"value\":\"circle\"}},\"labelBorderSize\":{\"options\":{\"size\":\"SMALL\"}}},\"isTimeAware\":true},\"includeInFitToBounds\":true,\"type\":\"TILED_VECTOR\",\"joins\":[]}]",
|
||||
"mapStateJSON": "{\"zoom\":3.45,\"center\":{\"lon\":-99.45039,\"lat\":41.20492},\"timeFilters\":{\"from\":\"2015-09-20T00:00:00.000Z\",\"to\":\"2015-09-20T01:00:00.000Z\"},\"refreshConfig\":{\"isPaused\":true,\"interval\":1000},\"query\":{\"language\":\"kuery\",\"query\":\"\"},\"filters\":[],\"settings\":{\"autoFitToDataBounds\":false,\"backgroundColor\":\"#ffffff\",\"disableInteractive\":false,\"disableTooltipControl\":false,\"hideToolbarOverlay\":false,\"hideLayerControl\":false,\"hideViewControl\":false,\"initialLocation\":\"LAST_SAVED_LOCATION\",\"fixedLocation\":{\"lat\":0,\"lon\":0,\"zoom\":2},\"browserLocation\":{\"zoom\":2},\"maxZoom\":24,\"minZoom\":0,\"showScaleControl\":false,\"showSpatialFilters\":true,\"showTimesliderToggleButton\":true,\"spatialFiltersAlpa\":0.3,\"spatialFiltersFillColor\":\"#DA8B45\",\"spatialFiltersLineColor\":\"#DA8B45\"}}",
|
||||
"title": "MVT documents",
|
||||
"uiStateJSON": "{\"isLayerTOCOpen\":true,\"openTOCDetails\":[]}"
|
||||
},
|
||||
"coreMigrationVersion": "8.1.0",
|
||||
"id": "2aff3160-3d78-11ec-9b35-f52e723e8a71",
|
||||
"migrationVersion": {
|
||||
"map": "8.0.0"
|
||||
},
|
||||
"references": [
|
||||
{
|
||||
"id": "c698b940-e149-11e8-a35a-370a8516603a",
|
||||
"name": "layer_0_source_index_pattern",
|
||||
"type": "index-pattern"
|
||||
}
|
||||
],
|
||||
"type": "map",
|
||||
"updated_at": "2021-11-04T17:21:47.256Z",
|
||||
"version": "Wzk1NywxXQ=="
|
||||
}
|
||||
|
||||
{
|
||||
"attributes": {
|
||||
"description": "",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue