Implementing classBreakRenderer sends extra query req to feature layer

Mayur_Shinde — Fri, 18 Nov 2022 15:19:25 GMT

I have upgraded the JavaScript API to 4.22 version from 4.5. The existing functionality of implementing classBreakRenderer using smart mapping is having performance issue.

I observed that there are extra 8-9 query requests sent to the server which my code has not created.

Here is step-wise implementation

API is integrated in ReactJS App

Here is the functionality implementation

I have put inline comment relevant to this post in blow code itself, starting with //** Note

const sellAccrualFeatureLayer = new FeatureLayer({ url: '........../MapServer/4', id: 'sellAccrualFeatureLayer', outFields: ['*'], legendEnabled: true, visible: false }) sellAccrualFeatureLayer.opacity = 0.5 sellAccrualFeatureLayer.definitionExpression = '1=2' esrijs.map.add(sellAccrualFeatureLayer) esrijs.sellAccrualFeatureLayer = sellAccrualFeatureLayer

Saved in esrijs variable and added to map with visible false.

2) On click of feature I have identify request to another layer to get the attribute of that feature and this acts as input where clause for sellAccrualFeatureLayer created in step 1

And here is the first query for sellAccrualFeatureLayer layer

makeQuerys = () => { const sellAccrualFeatureLayer = esrijs.sellAccrualFeatureLayer const colorRendererCreator = window.require('esri/smartMapping/renderers/color') const legendContainer = this.legendContainer const map = esrijs.map const dispatch = this.props.dispatch const kauppapaikkaNro = this.props.selectedStore.feature.attributes.Kauppapaikkanro const queryTimeStamps = sellAccrualFeatureLayer.createQuery() queryTimeStamps.where = 'Kauppa=' + kauppapaikkaNro queryTimeStamps.spatialRelationship = 'intersects' queryTimeStamps.outFields = ['Aikaleima'] queryTimeStamps.returnDistinctValues = true queryTimeStamps.returnGeometry = false queryTimeStamps.orderByFields = ['Aikaleima DESC'] const colorSchemes = window.require('esri/smartMapping/symbology/color') const schemes = colorSchemes.getSchemes({ basemap: map.basemap, geometryType: sellAccrualFeatureLayer.geometryType, theme: 'high-to-low' }) // console.log(schemes) // console.log(schemes.secondarySchemes.find(sc => sc.id === 'high-to-low/gray/seq-browns-bright')) sellAccrualFeatureLayer.queryFeatures(queryTimeStamps) .then(function (responseTimeStamps) { if (responseTimeStamps.features.length > 0 && responseTimeStamps.features[0].attributes.Aikaleima) { const params = { layer: sellAccrualFeatureLayer, field: 'Kertyma', view: esrijs.view, classificationMethod: 'natural-breaks', numClasses: 4, legendOptions: { title: 'Kertymä' }, // colorScheme: {...schemes.secondarySchemes.find(sc => sc.id === 'high-to-low/' + schemes.basemapId + '/seq-browns-bright'), ...{opacity: 0.95}} colorScheme: {...schemes.secondarySchemes.find(sc => sc.id === 'high-to-low/gray/seq-browns-bright'), ...{opacity: 0.95}} } // generate the renderer and set it on the layer // ** Note this create renderer request to layer is executed within 1 sec so no issue here colorRendererCreator.createClassBreaksRenderer(params) .then(function (response) { const renderer = response.renderer renderer.defaultSymbol = null sellAccrualFeatureLayer.renderer = renderer if (!esrijs.legend || esrijs.legend.destroyed) { const Legend = window.require('esri/widgets/Legend') esrijs.legend = new Legend({ view: esrijs.view, container: legendContainer }) } }).catch(console.error) const timeStamps = responseTimeStamps.features.map(x => x.attributes.Aikaleima) const latestTimestamp = timeStamps[0] const comparisonTimestamp = timeStamps.length > 1 ? timeStamps[1] : latestTimestamp const zipcodeWhere = 'Kauppa=' + kauppapaikkaNro + ' and Aikaleima=' + latestTimestamp + ' and Rank <=40' sellAccrualFeatureLayer.definitionExpression = zipcodeWhere const queryZipcodeSellAccrual = sellAccrualFeatureLayer.createQuery() queryZipcodeSellAccrual.where = zipcodeWhere queryZipcodeSellAccrual.spatialRelationship = 'intersects' queryZipcodeSellAccrual.outFields = ['*'] queryZipcodeSellAccrual.returnGeometry = false queryZipcodeSellAccrual.orderByFields = ['Rank'] // ** Note - observed from the Network tab, that when this below query is executed and req is sent, those extra query requests (PFA RankQueryreq.png are initiated and are in a pending state - and when these extra req are completed then only after that the req in the below Promise.All() are excuted, hence taking more time) sellAccrualFeatureLayer.queryFeatures(queryZipcodeSellAccrual) .then(function (responseZipcodeSellAccrual) { esrijs.sellAccrualFeatureLayer.visible = true const top40AccrualData = responseZipcodeSellAccrual.features.map(x => x.attributes).reduce((acc, curr) => { acc[curr.Postinumero] = true return acc }, {}) const top40AccrualZipcodes = Object.keys(top40AccrualData) const queryZipcodeSellAccrualOver40 = sellAccrualFeatureLayer.createQuery() queryZipcodeSellAccrualOver40.where = 'Kauppa=' + kauppapaikkaNro + ' and Aikaleima=' + latestTimestamp + ' and Rank >40' queryZipcodeSellAccrualOver40.spatialRelationship = 'intersects' queryZipcodeSellAccrualOver40.outFields = ['*'] queryZipcodeSellAccrualOver40.returnGeometry = false queryZipcodeSellAccrualOver40.outStatistics = statisticDefinitionOver40 const queryComparisonZipcodeSellAccrualTop40 = sellAccrualFeatureLayer.createQuery() queryComparisonZipcodeSellAccrualTop40.where = 'Kauppa=' + kauppapaikkaNro + ' and Aikaleima=' + comparisonTimestamp + ' and Postinumero IN (\'' + top40AccrualZipcodes.join('\',\'') + '\')' queryComparisonZipcodeSellAccrualTop40.spatialRelationship = 'intersects' queryComparisonZipcodeSellAccrualTop40.outFields = ['*'] queryComparisonZipcodeSellAccrualTop40.returnGeometry = false queryComparisonZipcodeSellAccrualTop40.orderByFields = ['Rank'] const queryComparisonZipcodeSellAccrualOver40 = sellAccrualFeatureLayer.createQuery() queryComparisonZipcodeSellAccrualOver40.where = 'Kauppa=' + kauppapaikkaNro + ' and Aikaleima=' + comparisonTimestamp + ' and Postinumero NOT IN (\'' + top40AccrualZipcodes.join('\',\'') + '\')' queryComparisonZipcodeSellAccrualOver40.spatialRelationship = 'intersects' queryComparisonZipcodeSellAccrualOver40.outFields = ['*'] queryComparisonZipcodeSellAccrualOver40.returnGeometry = false queryComparisonZipcodeSellAccrualOver40.outStatistics = statisticDefinitionOver40 //** Note - These are the 3 req that start only after the extra req are completed Promise.all([ sellAccrualFeatureLayer.queryFeatures(queryZipcodeSellAccrualOver40), sellAccrualFeatureLayer.queryFeatures(queryComparisonZipcodeSellAccrualTop40), sellAccrualFeatureLayer.queryFeatures(queryComparisonZipcodeSellAccrualOver40) ]).then(([currentAccrualSumOver40, comparisonAccrualTop40, comparisonAccrualSumOver40]) => { console.log("after promise"); const currentTop40Attributes = responseZipcodeSellAccrual.features.map(x => x.attributes) const comparisonTop40Attributes = comparisonAccrualTop40.features.map(x => x.attributes) const currentSumEurot = currentTop40Attributes.reduce((acc, curr) => acc + curr.Eurot, currentAccrualSumOver40.features[0].attributes.SUMMA_Eurot) const comparisonSumEurot = comparisonTop40Attributes.reduce((acc, curr) => acc + curr.Eurot, comparisonAccrualSumOver40.features[0].attributes.SUMMA_Eurot) const data = { currentAccrualTop40: currentTop40Attributes.reduce((acc, curr) => { acc[curr.Postinumero] = calculateAdditionalFields(curr, currentSumEurot) return acc }, {}), currentAccrualSumOver40: calculateAdditionalFields({ ...currentAccrualSumOver40.features[0].attributes, usedTimestamp: latestTimestamp }, currentSumEurot, true), comparisonAccrualTop40: comparisonTop40Attributes.reduce((acc, curr) => { acc[curr.Postinumero] = calculateAdditionalFields(curr, comparisonSumEurot) return acc }, {}), comparisonAccrualSumOver40: calculateAdditionalFields({ ...comparisonAccrualSumOver40.features[0].attributes, usedTimestamp: comparisonTimestamp }, comparisonSumEurot, true) } dispatch(setSellAccrualData(data)) }) }).catch(console.error) }

Attachment info

1) extraquery.png - Showing the extra req and req from promises

2) extraquerydetail.png - Details of one of the extra req

3) queryreq.png

I tried sending a list of outFields in all queries in the code, including in FeatureLayer Constructor - issue persists.

The issue is why it is sending extra req and those too for "ID" fields as orderby and this field is OID of that layer.

Will be grateful if anyone can help.

topic Implementing classBreakRenderer sends extra query req to feature layer in ArcGIS JavaScript Maps SDK Questions

Implementing classBreakRenderer sends extra query req to feature layer