GimmeWidget is firing off 7 requests for a single data point?

[brucecrevensten]

STR:

Env: API = development.earthmaps.io / Rasdaman = zeus

• http://localhost:3000/item/permafrost-magt
• open network tab of dev console
• pick Fairbanks as a place

I'm seeing 7 HTTP requests fired off for the same target data. This doesn't seem right!

[cstephen]

It looks like the number of identical API HTTP requests corresponds to the number of charts that are displayed on the ARDAC item. Since the permafrost-magt item displays 7 charts (one chart for each MAGT depth), it fires off 7 requests. Similarly, the permafrost base & top item fires off 2 identical HTTP requests since it displays two charts.

I haven't dug into this very deep, but here's the watch function that fires off the permafrost API HTTP request:

https://github.com/ua-snap/ardac-explorer/blob/b30b110460beee6902d53ba26903204144282a9f/components/PermafrostChart.vue#L222-L226

And I suspect this line is the culprit:

https://github.com/ua-snap/ardac-explorer/blob/b30b110460beee6902d53ba26903204144282a9f/components/PermafrostChart.vue#L18

In other words, it appears that each time PermafrostChart.vue is mounted, it sets a new latLng computed property for that instance of PermafrostChart.vue and triggers another API fetch.

There are probably several ways to fix this, but it might make the most sense to move these two lines of code out of the PermafrostChart.vue component's watch function and into a similar watch function inside PermafrostChartControls.vue (which only gets mounted once regardless of the number of charts):

dataStore.apiData = null 
dataStore.fetchData('permafrost') 

• [ ] It looks like the hydrology-iswe item has the same problem, so whatever we do for the permafrost charts we'll want to do for HydrologyChart.vue / HydrologyChartControls.vue also.
• [ ] And for IndicatorsCmip6Chart.vue / IndicatorsCmip6ChartControls.vue also even though the CMIP6 indicator items don't have this problem since no CMIP6 indicator item has multiple charts (yet).