fix: reset fetch range when requested page is out of visible range (#7316)

* fix: reset fetch range when requested page is out of visible range

Author: TatuLund

vaadin-grid-flow-parent/vaadin-grid-flow/src/main/resources/META-INF/resources/frontend/gridConnector.js

@@ -207,7 +207,7 @@
             grid.activeItem = item;
           }
         });
-        
+
         grid.selectedItems = Object.values(selectedKeys);
       });
 
@@ -277,16 +277,23 @@
         detailsVisibleOnClick = visibleOnClick;
       });
 
-      grid.$connector._getPageIfSameLevel = tryCatchWrapper(function(parentKey, index, defaultPage) {
-        let cacheAndIndex = grid._cache.getCacheAndIndex(index);
-        let parentItem = cacheAndIndex.cache.parentItem;
-        let parentKeyOfIndex = (parentItem) ? grid.getItemId(parentItem) : root;
-        if(parentKey !== parentKeyOfIndex) {
-          return defaultPage;
-        } else {
-          return grid._getPageForIndex(cacheAndIndex.scaledIndex);
+      grid.$connector._getSameLevelPage = tryCatchWrapper(function (parentKey, currentCache, currentCacheItemIndex) {
+        const currentParentKey = currentCache.parentItem ? grid.getItemId(currentCache.parentItem) : root;
+        if (currentParentKey === parentKey) {
+          // Level match found
+          return grid._getPageForIndex(currentCacheItemIndex);
         }
-      })
+        const { parentCache } = currentCache;
+        if (!parentCache) {
+          // There is no parent cache to match level
+          return null;
+        }
+        const parentCacheItemIndex = Object.entries(parentCache.itemCaches).find(
+          ([index, cache]) => cache === currentCache
+        )[0];
+        // Traverse the tree upwards until a match is found or the end is reached
+        return this._getSameLevelPage(parentKey, parentCache, parentCacheItemIndex);
+      });
 
       grid.$connector.getCacheByKey = tryCatchWrapper(function(key) {
         let cacheAndIndex = grid._cache.getCacheAndIndexByKey(key);
@@ -350,39 +357,56 @@
       })
 
       grid.$connector.fetchPage = tryCatchWrapper(function(fetch, page, parentKey) {
+        // Adjust the requested page to be within the valid range in case
+        // the grid size has changed while fetchPage was debounced.
+        if (parentKey === root) {
+          page = Math.min(page, Math.floor((grid.size - 1) / grid.pageSize));
+        }
+
         // Determine what to fetch based on scroll position and not only
         // what grid asked for
+        let start = grid._virtualStart;
+        let end = grid._virtualEnd;
 
         // The buffer size could be multiplied by some constant defined by the user,
         // if he needs to reduce the number of items sent to the Grid to improve performance
         // or to increase it to make Grid smoother when scrolling
-        let start = grid._virtualStart;
-        let end = grid._virtualEnd;
         let buffer = end - start;
 
         let firstNeededIndex = Math.max(0, start + grid._vidxOffset - buffer);
         let lastNeededIndex = Math.min(end + grid._vidxOffset + buffer, grid._effectiveSize);
 
-        let firstNeededPage = page;
-        let lastNeededPage = page;
+        let pageRange = [null, null];
         for(let idx = firstNeededIndex; idx <= lastNeededIndex; idx++) {
-          firstNeededPage = Math.min(firstNeededPage, grid.$connector._getPageIfSameLevel(parentKey, idx, firstNeededPage));
-          lastNeededPage = Math.max(lastNeededPage, grid.$connector._getPageIfSameLevel(parentKey, idx, lastNeededPage));
+          const { cache, scaledIndex } = grid._cache.getCacheAndIndex(idx);
+
+          const sameLevelPage = grid.$connector._getSameLevelPage(parentKey, cache, scaledIndex);
+          if (sameLevelPage === null) {
+            continue;
+          }
+
+          pageRange[0] = Math.min(pageRange[0] !== null ? pageRange[0] : sameLevelPage, sameLevelPage);
+          pageRange[1] = Math.max(pageRange[1] !== null ? pageRange[1] : sameLevelPage, sameLevelPage);
         }
 
-        let firstPage = Math.max(0,  firstNeededPage);
-        let lastPage = (parentKey !== root) ? lastNeededPage: Math.min(lastNeededPage, Math.floor(grid.size / grid.pageSize));
-        let lastRequestedRange = lastRequestedRanges[parentKey];
-        if(!lastRequestedRange) {
-          lastRequestedRange = [-1, -1];
+        // When the viewport doesn't contain the requested page or it doesn't contain any items from
+        // the requested level at all, it means that the scroll position has changed while fetchPage
+        // was debounced. For example, it can happen if the user scrolls the grid to the bottom and
+        // then immediately back to the top. In this case, the request for the last page will be left
+        // hanging. To avoid this, as a workaround, we reset the range to only include the requested page
+        // to make sure all hanging requests are resolved. After that, the grid requests the first page
+        // or whatever in the viewport again.
+        if (pageRange.some((p) => p === null) || page < pageRange[0] || page > pageRange[1]) {
+          pageRange = [page, page];
         }
-        if (lastRequestedRange[0] != firstPage || lastRequestedRange[1] != lastPage) {
-          lastRequestedRange = [firstPage, lastPage];
-          lastRequestedRanges[parentKey] = lastRequestedRange;
-          let count = lastPage - firstPage + 1;
-          fetch(firstPage * grid.pageSize, count * grid.pageSize);
+
+        let lastRequestedRange = lastRequestedRanges[parentKey] || [-1, -1];
+        if (lastRequestedRange[0] != pageRange[0] || lastRequestedRange[1] != pageRange[1]) {
+          lastRequestedRanges[parentKey] = pageRange;
+          let pageCount = pageRange[1] - pageRange[0] + 1;
+          fetch(pageRange[0] * grid.pageSize, pageCount * grid.pageSize);
         }
-      })
+      });
 
       grid.dataProvider = tryCatchWrapper(function(params, callback) {
         if (params.pageSize != grid.pageSize) {
@@ -906,7 +930,7 @@
           const callback = rootPageCallbacks[page];
           if ((cache[root] && cache[root][page]) || page < lastRequestedRange[0] || +page > lastRequestedRangeEnd) {
             delete rootPageCallbacks[page];
-            
+
             if (cache[root][page]) {
               // Cached data is available, resolve the callback
               callback(cache[root][page]);