fix: refactoring, true virtualization

astandrik · astandrik · commit db4bda6c34c2 · 2025-04-26T12:35:34.000+03:00
diff --git a/src/components/PaginatedTable/PaginatedTable.tsx b/src/components/PaginatedTable/PaginatedTable.tsx
@@ -38,7 +38,7 @@ export interface PaginatedTableProps<T, F> {
     containerClassName?: string;
 }
 
-const DEFAULT_PAGINATION_LIMIT = 20;
+const DEFAULT_PAGINATION_LIMIT = 200;
 
 export const PaginatedTable = <T, F>({
     limit: chunkSize = DEFAULT_PAGINATION_LIMIT,
@@ -67,7 +67,7 @@ export const PaginatedTable = <T, F>({
 
     const tableRef = React.useRef<HTMLDivElement>(null);
 
-    const activeChunks = useScrollBasedChunks({
+    const [activeChunks, visibleRange] = useScrollBasedChunks({
         parentRef,
         tableRef,
         totalItems: foundEntities,
@@ -118,6 +118,7 @@ export const PaginatedTable = <T, F>({
                 renderEmptyDataMessage={renderEmptyDataMessage}
                 onDataFetched={handleDataFetched}
                 isActive={isActive}
+                visibleRange={visibleRange}
             />
         ));
     };
diff --git a/src/components/PaginatedTable/TableChunk.tsx b/src/components/PaginatedTable/TableChunk.tsx
@@ -16,6 +16,7 @@ import type {
     RenderErrorMessage,
     SortParams,
 } from './types';
+import type {VisibleRange} from './useScrollBasedChunks';
 import {typedMemo} from './utils';
 
 const DEBOUNCE_TIMEOUT = 200;
@@ -30,6 +31,7 @@ interface TableChunkProps<T, F> {
     sortParams?: SortParams;
     isActive: boolean;
     tableName: string;
+    visibleRange: VisibleRange;
 
     fetchData: FetchData<T, F>;
     getRowClassName?: GetRowClassName<T>;
@@ -54,6 +56,7 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
     renderEmptyDataMessage,
     onDataFetched,
     isActive,
+    visibleRange,
 }: TableChunkProps<T, F>) {
     const [isTimeoutActive, setIsTimeoutActive] = React.useState(true);
     const [autoRefreshInterval] = useAutoRefreshInterval();
@@ -100,6 +103,15 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
 
     const dataLength = currentData?.data?.length || calculatedCount;
 
+    // Check if a row is within the visible range
+    const isRowVisible = (rowIndex: number): boolean => {
+        // Calculate the absolute row index within the entire table
+        const absoluteRowIndex = id * chunkSize + rowIndex;
+
+        // Check if the row is within the visible range (including overscan)
+        return absoluteRowIndex >= visibleRange.startRow && absoluteRowIndex <= visibleRange.endRow;
+    };
+
     const renderContent = () => {
         if (!isActive) {
             return null;
@@ -119,7 +131,12 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
                 );
             } else {
                 return getArray(dataLength).map((value) => (
-                    <LoadingTableRow key={value} columns={columns} height={rowHeight} />
+                    <LoadingTableRow
+                        key={value}
+                        columns={columns}
+                        height={rowHeight}
+                        isVisible={isRowVisible(value)}
+                    />
                 ));
             }
         }
@@ -140,6 +157,7 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
                 columns={columns}
                 height={rowHeight}
                 getRowClassName={getRowClassName}
+                isVisible={isRowVisible(index)}
             />
         ));
     };
diff --git a/src/components/PaginatedTable/TableRow.tsx b/src/components/PaginatedTable/TableRow.tsx
@@ -42,7 +42,15 @@ interface LoadingTableRowProps<T> {
     height: number;
 }
 
-export const LoadingTableRow = typedMemo(function <T>({columns, height}: LoadingTableRowProps<T>) {
+interface VisibilityProps {
+    isVisible?: boolean;
+}
+
+export const LoadingTableRow = typedMemo(function <T>({
+    columns,
+    height,
+    isVisible = true,
+}: LoadingTableRowProps<T> & VisibilityProps) {
     return (
         <tr className={b('row', {loading: true})}>
             {columns.map((column) => {
@@ -57,45 +65,71 @@ export const LoadingTableRow = typedMemo(function <T>({columns, height}: Loading
                         className={column.className}
                         resizeable={resizeable}
                     >
-                        <Skeleton
-                            className={b('row-skeleton')}
-                            style={{width: '80%', height: '50%'}}
-                        />
+                        {isVisible ? (
+                            <Skeleton
+                                className={b('row-skeleton')}
+                                style={{width: '80%', height: '50%'}}
+                            />
+                        ) : null}
                     </TableRowCell>
                 );
             })}
         </tr>
     );
 });
 
+interface TableRowColumnProps<T> {
+    column: Column<T>;
+    row: T;
+    height: number;
+}
+
+export const TableRowColumn = typedMemo(
+    <T,>({row, column, height, isVisible = true}: TableRowColumnProps<T> & VisibilityProps) => {
+        const resizeable = column.resizeable ?? DEFAULT_RESIZEABLE;
+
+        return (
+            <TableRowCell
+                key={column.name}
+                height={height}
+                width={column.width}
+                align={column.align}
+                className={column.className}
+                resizeable={resizeable}
+            >
+                {isVisible ? column.render({row}) : null}
+            </TableRowCell>
+        );
+    },
+);
+
 interface TableRowProps<T> {
     columns: Column<T>[];
     row: T;
     height: number;
     getRowClassName?: GetRowClassName<T>;
 }
 
-export const TableRow = <T,>({row, columns, getRowClassName, height}: TableRowProps<T>) => {
+export const TableRow = <T,>({
+    row,
+    columns,
+    getRowClassName,
+    height,
+    isVisible = true,
+}: TableRowProps<T> & VisibilityProps) => {
     const additionalClassName = getRowClassName?.(row);
 
     return (
         <tr className={b('row', additionalClassName)}>
-            {columns.map((column) => {
-                const resizeable = column.resizeable ?? DEFAULT_RESIZEABLE;
-
-                return (
-                    <TableRowCell
-                        key={column.name}
-                        height={height}
-                        width={column.width}
-                        align={column.align}
-                        className={column.className}
-                        resizeable={resizeable}
-                    >
-                        {column.render({row})}
-                    </TableRowCell>
-                );
-            })}
+            {columns.map((column) => (
+                <TableRowColumn
+                    key={column.name}
+                    column={column}
+                    row={row}
+                    height={height}
+                    isVisible={isVisible}
+                />
+            ))}
         </tr>
     );
 };
diff --git a/src/components/PaginatedTable/useScrollBasedChunks.ts b/src/components/PaginatedTable/useScrollBasedChunks.ts
@@ -13,6 +13,13 @@ interface UseScrollBasedChunksProps {
     overscanCount?: number;
 }
 
+export interface VisibleRange {
+    startChunk: number;
+    endChunk: number;
+    startRow: number;
+    endRow: number;
+}
+
 const DEFAULT_OVERSCAN_COUNT = 1;
 const THROTTLE_DELAY = 100;
 
@@ -23,7 +30,7 @@ export const useScrollBasedChunks = ({
     rowHeight,
     chunkSize,
     overscanCount = DEFAULT_OVERSCAN_COUNT,
-}: UseScrollBasedChunksProps): boolean[] => {
+}: UseScrollBasedChunksProps): [boolean[], VisibleRange] => {
     const chunksCount = React.useMemo(
         () => Math.ceil(totalItems / chunkSize),
         [chunkSize, totalItems],
@@ -34,6 +41,12 @@ export const useScrollBasedChunks = ({
         Math.min(overscanCount, Math.max(chunksCount - 1, 0)),
     );
 
+    // Track exact visible rows (not just chunks)
+    const [startRow, setStartRow] = React.useState(0);
+    const [endRow, setEndRow] = React.useState(
+        Math.min(overscanCount * chunkSize, Math.max(totalItems - 1, 0)),
+    );
+
     const calculateVisibleRange = React.useCallback(() => {
         const container = parentRef?.current;
         const table = tableRef.current;
@@ -46,20 +59,38 @@ export const useScrollBasedChunks = ({
         const visibleStart = Math.max(containerScroll - tableOffset, 0);
         const visibleEnd = visibleStart + container.clientHeight;
 
-        const start = Math.max(Math.floor(visibleStart / rowHeight / chunkSize) - overscanCount, 0);
-        const end = Math.min(
+        // Calculate visible chunks (with overscan)
+        const startChunk = Math.max(
+            Math.floor(visibleStart / rowHeight / chunkSize) - overscanCount,
+            0,
+        );
+        const endChunk = Math.min(
             Math.floor(visibleEnd / rowHeight / chunkSize) + overscanCount,
             Math.max(chunksCount - 1, 0),
         );
 
-        return {start, end};
+        // Calculate visible rows (more precise)
+        const startRowIndex = Math.max(Math.floor(visibleStart / rowHeight), 0);
+        const endRowIndex = Math.min(
+            Math.floor(visibleEnd / rowHeight),
+            Math.max(totalItems - 1, 0),
+        );
+
+        return {
+            start: startChunk,
+            end: endChunk,
+            startRow: startRowIndex,
+            endRow: endRowIndex,
+        };
     }, [parentRef, tableRef, rowHeight, chunkSize, overscanCount, chunksCount]);
 
     const handleScroll = React.useCallback(() => {
         const newRange = calculateVisibleRange();
         if (newRange) {
             setStartChunk(newRange.start);
             setEndChunk(newRange.end);
+            setStartRow(newRange.startRow);
+            setEndRow(newRange.endRow);
         }
     }, [calculateVisibleRange]);
 
@@ -81,12 +112,24 @@ export const useScrollBasedChunks = ({
         };
     }, [handleScroll, parentRef]);
 
-    return React.useMemo(() => {
+    // Create the visibility information
+    const activeChunks = React.useMemo(() => {
         // boolean array that represents active chunks
-        const activeChunks = Array(chunksCount).fill(false);
+        const chunks = Array(chunksCount).fill(false);
         for (let i = startChunk; i <= endChunk; i++) {
-            activeChunks[i] = true;
+            chunks[i] = true;
         }
-        return activeChunks;
+        return chunks;
     }, [chunksCount, startChunk, endChunk]);
+
+    const visibleRange = React.useMemo(() => {
+        return {
+            startChunk,
+            endChunk,
+            startRow,
+            endRow,
+        };
+    }, [startChunk, endChunk, startRow, endRow]);
+
+    return [activeChunks, visibleRange];
 };
diff --git a/src/containers/Storage/StorageNodes/getNodes.ts b/src/containers/Storage/StorageNodes/getNodes.ts
@@ -48,7 +48,7 @@ export const getStorageNodes: FetchData<
         type,
         storage,
         limit,
-        offset,
+        offset: 0,
         sort,
         filter: searchValue,
         uptime: getUptimeParamValue(nodesUptimeFilter),
@@ -61,9 +61,23 @@ export const getStorageNodes: FetchData<
         fieldsRequired: dataFieldsRequired,
     });
     const preparedResponse = prepareStorageNodesResponse(response);
+
+    let mockedData = preparedResponse.nodes?.slice();
+
+    for (let i = 0; i < 4000; i++) {
+        mockedData = mockedData?.concat(
+            preparedResponse.nodes?.map((data, j) => ({
+                ...data,
+                NodeId: data.NodeId + i * 2000 + j,
+                Host: data.Host || String(i) + ',' + j,
+            })) || [],
+        );
+    }
+    const paginatedData = mockedData?.slice(offset, offset + limit);
+
     return {
-        data: preparedResponse.nodes || [],
-        found: preparedResponse.found || 0,
-        total: preparedResponse.total || 0,
+        data: paginatedData || [],
+        found: mockedData?.length || 0,
+        total: mockedData?.length || 0,
     };
 };
