fix: BROS-123: Grid scroll (#7906)

Author: nick-skriabin

web/libs/datamanager/src/components/DataManager/Toolbar/GridWidthButton.jsx

@@ -4,6 +4,7 @@ import { Button } from "../../Common/Button/Button";
 import { Dropdown } from "../../Common/Dropdown/DropdownComponent";
 import { Toggle } from "../../Common/Form";
 import { IconSettings, IconMinus, IconPlus } from "@humansignal/icons";
+import debounce from "lodash.debounce";
 
 const injector = inject(({ store }) => {
   const view = store?.currentView;
@@ -23,12 +24,16 @@ const injector = inject(({ store }) => {
 export const GridWidthButton = injector(({ view, isGrid, gridWidth, fitImagesToWidth, hasImage, size }) => {
   const [width, setWidth] = useState(gridWidth);
 
+  const setGridWidthStore = debounce((value) => {
+    view.setGridWidth(value);
+  }, 200);
+
   const setGridWidth = useCallback(
     (width) => {
       const newWidth = Math.max(1, Math.min(width, 10));
 
       setWidth(newWidth);
-      view.setGridWidth(newWidth);
+      setGridWidthStore(newWidth);
     },
     [view],
   );

web/libs/datamanager/src/components/MainView/GridView/GridView.jsx

@@ -129,7 +129,7 @@ export const GridCell = observer(({ view, selected, row, fields, onClick, column
 export const GridView = observer(({ data, view, loadMore, fields, onChange, hiddenFields }) => {
   const columnCount = view.gridWidth ?? 4;
 
-  const getCellIndex = (row, column) => columnCount * row + column;
+  const getCellIndex = useCallback((row, column) => columnCount * row + column, [columnCount]);
 
   const fieldsData = useMemo(() => {
     return prepareColumns(fields, hiddenFields);
@@ -148,11 +148,15 @@ export const GridView = observer(({ data, view, loadMore, fields, onChange, hidd
   const finalRowHeight =
     CELL_HEADER_HEIGHT + rowHeight * (hasImage ? Math.max(1, (IMAGE_SIZE_COEFFICIENT - columnCount) * 0.5) : 1);
 
+  // Calculate the total number of rows needed to display all items
+  const itemCount = view.dataStore.total || data.length;
+  const totalRows = Math.ceil(itemCount / columnCount);
+
   const renderItem = useCallback(
     ({ style, rowIndex, columnIndex }) => {
       const index = getCellIndex(rowIndex, columnIndex);
-      if (!data || !(index in data)) return null;
       const row = data[index];
+      if (!row) return null;
 
       const props = {
         style: {
@@ -173,30 +177,42 @@ export const GridView = observer(({ data, view, loadMore, fields, onChange, hidd
         />
       );
     },
-    [data, columnCount, fieldsData, view.selected, view, view.selected.list, view.selected.all, getCellIndex],
+    [data, columnCount, fieldsData, view, onChange, getCellIndex],
   );
 
-  const onItemsRenderedWrap =
+  const onItemsRenderedWrap = useCallback(
     (cb) =>
-    ({ visibleRowStartIndex, visibleRowStopIndex, overscanRowStopIndex, overscanRowStartIndex }) => {
-      cb({
-        overscanStartIndex: overscanRowStartIndex,
-        overscanStopIndex: overscanRowStopIndex,
-        visibleStartIndex: visibleRowStartIndex,
-        visibleStopIndex: visibleRowStopIndex,
-      });
-    };
-
-  const itemCount = Math.ceil(data.length / columnCount);
+      ({ visibleRowStartIndex, visibleRowStopIndex, overscanRowStopIndex, overscanRowStartIndex }) => {
+        // Check if we're near the end and need to load more
+        const visibleItemStopIndex = getCellIndex(visibleRowStopIndex, columnCount - 1);
+
+        // If we're showing items near the end of our loaded data, trigger loading
+        if (
+          visibleItemStopIndex >= data.length - columnCount * 2 &&
+          view.dataStore.hasNextPage &&
+          !view.dataStore.loading
+        ) {
+          loadMore?.();
+        }
+
+        cb({
+          overscanStartIndex: overscanRowStartIndex,
+          overscanStopIndex: overscanRowStopIndex,
+          visibleStartIndex: visibleRowStartIndex,
+          visibleStopIndex: visibleRowStopIndex,
+        });
+      },
+    [data.length, columnCount, view.dataStore.hasNextPage, view.dataStore.loading, loadMore, getCellIndex],
+  );
 
+  // Check if a specific item index is loaded
   const isItemLoaded = useCallback(
     (index) => {
-      const rowIndex = index * columnCount;
-      const rowFullfilled = data.slice(rowIndex, columnCount).length === columnCount;
-
-      return !view.dataStore.hasNextPage || rowFullfilled;
+      const rowExists = index < data.length && !!data[index];
+      const hasNextPage = view.dataStore.hasNextPage;
+      return !hasNextPage || rowExists;
     },
-    [columnCount, data, view.dataStore.hasNextPage],
+    [data.length, view.dataStore.hasNextPage],
   );
 
   return (
@@ -208,8 +224,8 @@ export const GridView = observer(({ data, view, loadMore, fields, onChange, hidd
               itemCount={itemCount}
               isItemLoaded={isItemLoaded}
               loadMoreItems={loadMore}
-              threshold={Math.floor(view.dataStore.pageSize / 2)}
-              minimumBatchSize={view.dataStore.pageSize}
+              threshold={Math.max(1, Math.floor(view.dataStore.pageSize / 4))}
+              minimumBatchSize={Math.max(1, Math.floor(view.dataStore.pageSize / 2))}
             >
               {({ onItemsRendered, ref }) => (
                 <Elem
@@ -219,10 +235,10 @@ export const GridView = observer(({ data, view, loadMore, fields, onChange, hidd
                   height={height}
                   name="list"
                   rowHeight={finalRowHeight}
-                  overscanRowCount={view.dataStore.pageSize}
+                  overscanRowCount={Math.max(2, Math.floor(view.dataStore.pageSize / 2))}
                   columnCount={columnCount}
+                  rowCount={totalRows}
                   columnWidth={width / columnCount - 9.5}
-                  rowCount={itemCount}
                   onItemsRendered={onItemsRenderedWrap(onItemsRendered)}
                   style={{ overflowX: "hidden" }}
                 >

web/package.json

@@ -82,6 +82,7 @@
     "js-base64": "^3.7.7",
     "keymaster": "^1.6.2",
     "konva": "^8.1.3",
+    "lodash.debounce": "^4.0.8",
     "lodash.get": "^4.4.0",
     "lodash.ismatch": "^4.4.0",
     "lodash.throttle": "^4.1.1",
@@ -106,7 +107,7 @@
     "react-router-dom": "^5.2.0",
     "react-singleton-hook": "^3.1.1",
     "react-virtualized-auto-sizer": "^1.0.20",
-    "react-window": "^1.8.9",
+    "react-window": "^1.8.11",
     "react-window-infinite-loader": "^1.0.5",
     "sanitize-html": "^2.14.0",
     "shadcn": "^2.1.8",

web/yarn.lock

@@ -15865,10 +15865,10 @@ react-window-infinite-loader@^1.0.5:
   resolved "https://registry.yarnpkg.com/react-window-infinite-loader/-/react-window-infinite-loader-1.0.9.tgz#d861c03d5cbc550e2f185371af820fd22d46c099"
   integrity sha512-5Hg89IdU4Vrp0RT8kZYKeTIxWZYhNkVXeI1HbKo01Vm/Z7qztDvXljwx16sMzsa9yapRJQW3ODZfMUw38SOWHw==
 
-react-window@^1.8.9:
-  version "1.8.10"
-  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.10.tgz#9e6b08548316814b443f7002b1cf8fd3a1bdde03"
-  integrity sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==
+react-window@^1.8.11:
+  version "1.8.11"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.11.tgz#a857b48fa85bd77042d59cc460964ff2e0648525"
+  integrity sha512-+SRbUVT2scadgFSWx+R1P754xHPEqvcfSfVX10QYg6POOz+WNgkN48pS+BtZNIMGiL1HYrSEiCkwsMS15QogEQ==
   dependencies:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"