Skip to content

fix: BROS-123: Grid scroll #7906

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jul 8, 2025
Merged

fix: BROS-123: Grid scroll #7906

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4b36bb1
Grid scroll fix attempt 1
nick-skriabin Jul 2, 2025
75e2b3d
Fix grid resize and infinite scroll
nick-skriabin Jul 3, 2025
62e365c
Cleanup
nick-skriabin Jul 3, 2025
2f95581
Cleanup
nick-skriabin Jul 3, 2025
4cb4bb3
Merge branch 'develop' into fb-bros-123/grid-scroll
nick-skriabin Jul 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion web/libs/datamanager/src/components/DataManager/Toolbar/GridWidthButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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],
);
Expand Down
62 changes: 39 additions & 23 deletions web/libs/datamanager/src/components/MainView/GridView/GridView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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: {
Expand All @@ -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 (
Expand All @@ -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
Expand All @@ -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" }}
>
Expand Down
3 changes: 2 additions & 1 deletion web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
8 changes: 4 additions & 4 deletions web/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading