Improve horizontal layout scroll performance by removing React sync flushing

examples/perf-baselines.ci.json

@@ -12,10 +12,10 @@
     "totalTime": 777.05
   },
   "tests/table/perf/flashing/default:should be able to collapse and expand nodes with no error": {
-    "scriptingTime": 433.34,
-    "renderingTime": 161.39,
-    "paintingTime": 7.77,
-    "totalTime": 681.6
+    "scriptingTime": 202.25,
+    "renderingTime": 68.28,
+    "paintingTime": 6.67,
+    "totalTime": 456.38
   },
   "tests/table/props/column/column-change:works correctly": {
     "scriptingTime": 77.4,
@@ -36,16 +36,16 @@
     "totalTime": 407.06
   },
   "tests/table/props/data/basic-update:via API should not rerender header": {
-    "scriptingTime": 22.74,
-    "renderingTime": 2.54,
-    "paintingTime": 2.12,
-    "totalTime": 282.04
+    "scriptingTime": 10.79,
+    "renderingTime": 1.51,
+    "paintingTime": 0.22,
+    "totalTime": 166.63
   },
   "tests/table/props/data/editing/column-editor:should use custom editor when configured": {
-    "scriptingTime": 181.66,
-    "renderingTime": 33.02,
-    "paintingTime": 6.63,
-    "totalTime": 692.85
+    "scriptingTime": 108.94,
+    "renderingTime": 22.22,
+    "paintingTime": 3,
+    "totalTime": 584.08
   },
   "tests/table/props/data/editing/persistEdit:should not persist changes to the id column": {
     "scriptingTime": 88.33,

examples/src/pages/tests/horizontal-layout/side-by-side.page.tsx

@@ -0,0 +1,69 @@
+import {
+  InfiniteTable,
+  DataSource,
+  type InfiniteTablePropColumns,
+} from '@infinite-table/infinite-react';
+
+import * as React from 'react';
+import { useState } from 'react';
+import { Developer, dataSource } from './horiz-layout-data';
+
+const columns: InfiniteTablePropColumns<Developer> = {
+  id: {
+    field: 'id',
+    type: 'number',
+    /*xdefaultWidth: 80,*/ renderValue: ({ value }) => value - 1,
+    style: (_options) => {
+      return {
+        // background : options.rowInfo.
+      };
+    },
+  },
+  preferredLanguage: { field: 'preferredLanguage' /*xdefaultWidth: 110 */ },
+  // age: { field: 'age' /*xdefaultWidth: 70 */ },
+  // salary: {
+  //   field: 'salary',
+  //   type: 'number',
+  //   /*xdefaultWidth: 100,*/
+  // },
+};
+
+export function getRandomInt(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+const domProps = { style: { height: '30vh', width: '90vw' } };
+// const domProps = { style: { height: '30vh', width: 300 } };
+
+// dataSource.length = 12;
+
+export default function App() {
+  const [wrapRowsHorizontally, setWrapRowsHorizontally] = useState(true);
+  return (
+    <>
+      <button
+        onClick={() => {
+          setWrapRowsHorizontally(!wrapRowsHorizontally);
+        }}
+      >
+        toggle
+      </button>
+      <DataSource<Developer>
+        primaryKey="id"
+        data={dataSource}
+        key={`${wrapRowsHorizontally}`}
+      >
+        <InfiniteTable<Developer>
+          wrapRowsHorizontally={wrapRowsHorizontally}
+          rowHeight={50}
+          domProps={domProps}
+          columns={columns}
+          columnDefaultWidth={150}
+          onCellClick={({ rowIndex, colIndex }) => {
+            console.log('clicked', rowIndex, colIndex);
+          }}
+        />
+      </DataSource>
+    </>
+  );
+}

examples/src/pages/tests/horizontal-layout/test.page.tsx

@@ -28,19 +28,31 @@ const columns: InfiniteTablePropColumns<Developer> = {
     field: 'id',
     type: 'number',
     defaultWidth: 100,
+    style: {
+      background: 'rgba(255, 99, 71, 0.4)',
+    },
   },
   canDesign: {
     field: 'canDesign',
     defaultWidth: 200,
+    style: {
+      background: 'rgba(211, 119, 171, 0.3)',
+    },
   },
   salary: {
     field: 'salary',
     type: 'number',
     defaultWidth: 300,
+    style: {
+      background: 'rgba(55, 99, 171, 0.5)',
+    },
+  },
+  firstName: {
+    field: 'firstName',
+    style: {
+      background: 'rgb(111 255 72 / 48%)',
+    },
   },
-  // firstName: {
-  //   field: 'firstName',
-  // },
   // age: {
   //   field: 'age',
   //   type: 'number',
@@ -53,10 +65,10 @@ const columns: InfiniteTablePropColumns<Developer> = {
 
 const domProps = {
   // style: { height: 420 /*30px header, 420 body*/, width: 230 },
-  style: { height: '50vh' /*30px header, 420 body*/, width: '80vw' },
+  style: { height: '50vh' /*30px header, 420 body*/, width: '100vw' },
 };
 
-const data = Array.from({ length: 100 }, (_, i) => ({
+const data = Array.from({ length: 1000 }, (_, i) => ({
   id: i,
   preferredLanguage: `Lang ${i}`,
   age: i * 10,

examples/src/pages/tests/table/utils/GridCellManager.spec.ts

@@ -10,6 +10,7 @@ const createCell = (node?: string): GridCellInterface<any> => {
     update: (newNode: string) => {
       node = newNode;
     },
+    setPendingAfterCommitWork: () => {},
     getElement: () => null,
     getNode: () => node,
     destroy: () => {},

source/src/components/HeadlessTable/GridCellInterface.ts

@@ -2,13 +2,7 @@ import { Renderable } from '../types/Renderable';
 
 export interface GridCellInterface<T_ADDITIONAL_CELL_INFO = any> {
   debugId: string;
-  update(
-    content: Renderable,
-    additionalInfo?: T_ADDITIONAL_CELL_INFO,
-    scrollingObjectParam?: {
-      scrolling: boolean;
-    },
-  ): void;
+  update(content: Renderable, additionalInfo?: T_ADDITIONAL_CELL_INFO): void;
   getElement(): HTMLElement | null;
   getNode(): Renderable;
   destroy(): void;
@@ -18,4 +12,5 @@ export interface GridCellInterface<T_ADDITIONAL_CELL_INFO = any> {
   getAdditionalInfo(): T_ADDITIONAL_CELL_INFO | undefined;
   isMounted(): boolean;
   ref: React.RefCallback<HTMLElement | undefined>;
+  setPendingAfterCommitWork(fn: (() => void) | null): void;
 }

source/src/components/HeadlessTable/GridCellManager.ts

@@ -185,10 +185,6 @@ export class GridCellManager<T_ADDITIONAL_CELL_INFO> extends Logger {
     cell: GridCellInterface<T_ADDITIONAL_CELL_INFO>,
     cellPos: CellPos,
     additionalInfo?: T_ADDITIONAL_CELL_INFO,
-    scrollingObjectParam?: {
-      scrolling: boolean;
-      isHorizontalLayout: boolean;
-    },
   ) {
     const currentCellAtPos = this.getCellAt(cellPos);
 
@@ -203,7 +199,7 @@ export class GridCellManager<T_ADDITIONAL_CELL_INFO> extends Logger {
 
     this.setCellPositionInMatrix(cell, cellPos);
 
-    cell.update(node, additionalInfo, scrollingObjectParam);
+    cell.update(node, additionalInfo);
 
     return cell;
   }

source/src/components/HeadlessTable/GridCellPoolForReact.tsx

@@ -26,7 +26,7 @@ class GridCellForReact<T_ADDITIONAL_CELL_INFO = any>
 
   private mounted: boolean = false;
 
-  private IS_UPDATED_WHILE_SCROLLING_IN_HORIZONTAL_LAYOUT = false;
+  private pendingAfterCommitWork: (() => void) | null = null;
 
   private mountSubscription =
     buildSubscriptionCallback<GridCellInterface<T_ADDITIONAL_CELL_INFO>>();
@@ -46,7 +46,7 @@ class GridCellForReact<T_ADDITIONAL_CELL_INFO = any>
         key={key}
         name={key}
         updater={this.updater}
-        shouldFlushSync={this.isUpdatedWhileScrolling}
+        afterCommit={this.afterCommit}
       />
     );
 
@@ -61,8 +61,16 @@ class GridCellForReact<T_ADDITIONAL_CELL_INFO = any>
     };
   }
 
-  isUpdatedWhileScrolling = () => {
-    return this.IS_UPDATED_WHILE_SCROLLING_IN_HORIZONTAL_LAYOUT;
+  setPendingAfterCommitWork(fn: (() => void) | null) {
+    this.pendingAfterCommitWork = fn;
+  }
+
+  private afterCommit = () => {
+    if (this.pendingAfterCommitWork) {
+      const work = this.pendingAfterCommitWork;
+      this.pendingAfterCommitWork = null;
+      work();
+    }
   };
 
   isMounted() {
@@ -83,6 +91,7 @@ class GridCellForReact<T_ADDITIONAL_CELL_INFO = any>
     this.mountSubscription.destroy();
     this.updater.destroy();
 
+    this.pendingAfterCommitWork = null;
     this.ref = emptyFn;
     this.element = null;
     this.node = null;
@@ -92,18 +101,7 @@ class GridCellForReact<T_ADDITIONAL_CELL_INFO = any>
     return this.node;
   }
 
-  update(
-    content: Renderable,
-    additionalInfo?: T_ADDITIONAL_CELL_INFO,
-    scrollingObjectParam?: {
-      scrolling: boolean;
-      isHorizontalLayout: boolean;
-    },
-  ): void {
-    this.IS_UPDATED_WHILE_SCROLLING_IN_HORIZONTAL_LAYOUT = scrollingObjectParam
-      ? scrollingObjectParam.scrolling &&
-        scrollingObjectParam.isHorizontalLayout
-      : false;
+  update(content: Renderable, additionalInfo?: T_ADDITIONAL_CELL_INFO): void {
     this.updater(content);
     this.cellInfo = additionalInfo;
   }

source/src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx

@@ -42,11 +42,6 @@ export const columnOffsetAtIndexWhileReordering = stripVar(
   InternalVars.columnOffsetAtIndexWhileReordering,
 );
 
-const SCROLLING_OBJECT_PARAM_FLYWEIGHT = {
-  scrolling: false,
-  isHorizontalLayout: false,
-};
-
 export class GridRenderer extends Logger {
   protected brain: MatrixBrain;
 
@@ -1381,15 +1376,11 @@ export class GridRenderer extends Logger {
 
       return;
     }
-    SCROLLING_OBJECT_PARAM_FLYWEIGHT.scrolling = this.scrolling;
-    SCROLLING_OBJECT_PARAM_FLYWEIGHT.isHorizontalLayout = isHorizontalLayout;
-
     this.cellManager.renderNodeAtCell(
       renderedNode,
       cell,
       [rowIndex, colIndex],
       cellAdditionalInfo,
-      SCROLLING_OBJECT_PARAM_FLYWEIGHT,
     );
 
     this.updateElementPosition(cell, { hidden, rowspan, colspan });
@@ -1501,45 +1492,53 @@ export class GridRenderer extends Logger {
     const { x, y } = itemPosition;
 
     if (itemElement) {
-      this.updateHoverClassNamesForRow(rowIndex);
-
-      // itemElement.style.gridColumn = `${colIndex} / span 1`;
-      // itemElement.style.gridRow = `${rowIndex} / span 1`;
-
-      // (itemElement.dataset as any).elementIndex = elementIndex;
-      const realCoords = this.getCellRealCoordinates(rowIndex, colIndex);
-      (itemElement.dataset as any).rowIndex = realCoords.rowIndex;
+      const applyPosition = () => {
+        this.updateHoverClassNamesForRow(rowIndex);
+        // itemElement.style.gridColumn = `${colIndex} / span 1`;
+        // itemElement.style.gridRow = `${rowIndex} / span 1`;
+
+        // (itemElement.dataset as any).elementIndex = elementIndex;
+        const realCoords = this.getCellRealCoordinates(rowIndex, colIndex);
+        (itemElement.dataset as any).rowIndex = realCoords.rowIndex;
+
+        (itemElement.dataset as any).colIndex = realCoords.colIndex;
+
+        if (ITEM_POSITION_WITH_TRANSFORM) {
+          this.setTransform(itemElement, rowIndex, colIndex, { x, y }, null);
+
+          itemElement.style.willChange = 'transform';
+          itemElement.style.backfaceVisibility = 'hidden';
+          // need to set it to auto
+          // in case some fixed cells are reused
+          // as the fixed cells had a zIndex
+          const hidden = options
+            ? options.hidden
+            : !!this.isCellCovered(rowIndex, colIndex);
+
+          const zIndex = hidden
+            ? '-1'
+            : // #updatezindex - we need to allow elements use their own zIndex, so we
+              // resort to allowing them to have it as a data-z-index attribute
+              itemElement.dataset.zIndex || 'auto';
 
-      (itemElement.dataset as any).colIndex = realCoords.colIndex;
-
-      if (ITEM_POSITION_WITH_TRANSFORM) {
-        this.setTransform(itemElement, rowIndex, colIndex, { x, y }, null);
-
-        itemElement.style.willChange = 'transform';
-        itemElement.style.backfaceVisibility = 'hidden';
-        // need to set it to auto
-        // in case some fixed cells are reused
-        // as the fixed cells had a zIndex
-        const hidden = options
-          ? options.hidden
-          : !!this.isCellCovered(rowIndex, colIndex);
-
-        const zIndex = hidden
-          ? '-1'
-          : // #updatezindex - we need to allow elements use their own zIndex, so we
-            // resort to allowing them to have it as a data-z-index attribute
-            itemElement.dataset.zIndex || 'auto';
-
-        //@ts-ignore
-        if (itemElement.__zIndex !== zIndex) {
           //@ts-ignore
-          itemElement.__zIndex = zIndex;
-          itemElement.style.zIndex = zIndex;
+          if (itemElement.__zIndex !== zIndex) {
+            //@ts-ignore
+            itemElement.__zIndex = zIndex;
+            itemElement.style.zIndex = zIndex;
+          }
+        } else {
+          itemElement.style.display = '';
+          itemElement.style.left = `${x}px`;
+          itemElement.style.top = `${y}px`;
         }
+      };
+
+      // if (this.scrolling && this.brain.isHorizontalLayoutBrain) {
+      if (this.scrolling && this.brain.isHorizontalLayoutBrain) {
+        cell.setPendingAfterCommitWork(applyPosition);
       } else {
-        itemElement.style.display = '';
-        itemElement.style.left = `${x}px`;
-        itemElement.style.top = `${y}px`;
+        applyPosition();
       }
     }
   };