Fix expanding nodes with more than 32768 children

Author: sirgallifrey

__tests__/FixedSizeTree.spec.tsx

@@ -11,9 +11,10 @@ import {
   TreeWalker,
   TreeWalkerValue,
 } from '../src';
-import {NodeComponentProps} from '../src/Tree';
+import {NodeComponentProps, NodePublicState} from '../src/Tree';
 import {
   defaultTree,
+  treeWithLargeNode,
   extractReceivedRecords,
   mockRequestIdleCallback,
   sleep,
@@ -49,15 +50,15 @@ describe('FixedSizeTree', () => {
   >;
   let tree: TreeNode;
   let treeWalkerSpy: jest.Mock;
-  let isOpenByDefault: boolean;
+  let isOpenByDefault: (node: TreeNode) => boolean;
 
   const getNodeData = (
     node: TreeNode,
     nestingLevel: number,
   ): TreeWalkerValue<ExtendedData, NodeMeta> => ({
     data: {
       id: node.id.toString(),
-      isOpenByDefault,
+      isOpenByDefault: isOpenByDefault(node),
       name: node.name,
       nestingLevel,
     },
@@ -103,7 +104,7 @@ describe('FixedSizeTree', () => {
   beforeEach(() => {
     tree = defaultTree;
 
-    isOpenByDefault = true;
+    isOpenByDefault = () => true;
 
     treeWalkerSpy = jest.fn(treeWalker);
 
@@ -596,5 +597,115 @@ describe('FixedSizeTree', () => {
       list = component.find(FixedSizeList);
       expect(list.prop('itemCount')).toBe(7);
     });
+
+    it('correctly collapses node with 100.000 children', async () => {
+      tree = treeWithLargeNode;
+      component = mountComponent();
+
+      const records = extractReceivedRecords(component.find(FixedSizeList));
+      const {setOpen} = records.find(
+        (record) => record.data.id === 'largeNode-1',
+      ) as NodePublicState<ExtendedData>;
+
+      await setOpen(false);
+      component.update(); // Update the wrapper to get the latest changes
+
+      const updatedRecords = extractReceivedRecords(
+        component.find(FixedSizeList),
+      );
+      expect(updatedRecords).toEqual([
+        expect.objectContaining({
+          data: expect.objectContaining({
+            id: 'root-1',
+          }),
+        }),
+        expect.objectContaining({
+          data: expect.objectContaining({
+            id: 'smallNode-1',
+          }),
+        }),
+        expect.objectContaining({
+          data: expect.objectContaining({
+            id: 'smallNodeChild-1',
+          }),
+        }),
+        expect.objectContaining({
+          data: expect.objectContaining({
+            id: 'smallNodeChild-2',
+          }),
+        }),
+        expect.objectContaining({
+          data: expect.objectContaining({
+            id: 'largeNode-1',
+          }),
+        }),
+        expect.objectContaining({
+          data: expect.objectContaining({
+            id: 'smallNode-2',
+          }),
+        }),
+        expect.objectContaining({
+          data: expect.objectContaining({
+            id: 'smallNodeChild-3',
+          }),
+        }),
+        expect.objectContaining({
+          data: expect.objectContaining({
+            id: 'smallNodeChild-4',
+          }),
+        }),
+      ]);
+    });
+
+    it('correctly expands node with 100.000 children', async () => {
+      tree = treeWithLargeNode;
+      isOpenByDefault = (node) => {
+        if (node.id === 'largeNode-1') {
+          return false;
+        }
+        return true;
+      };
+      component = mountComponent();
+
+      const records = extractReceivedRecords(component.find(FixedSizeList));
+      const {setOpen} = records.find(
+        (record) => record.data.id === 'largeNode-1',
+      ) as NodePublicState<ExtendedData>;
+
+      await setOpen(true);
+      component.update(); // Update the wrapper to get the latest changes
+
+      const updatedRecords = extractReceivedRecords(
+        component.find(FixedSizeList),
+      );
+
+      expect(updatedRecords.slice(-5)).toEqual([
+        expect.objectContaining({
+          data: expect.objectContaining({
+            id: 'largeNodeChild-99999',
+          }),
+        }),
+        expect.objectContaining({
+          data: expect.objectContaining({
+            id: 'largeNodeChild-100000',
+          }),
+        }),
+        expect.objectContaining({
+          data: expect.objectContaining({
+            id: 'smallNode-2',
+          }),
+        }),
+        expect.objectContaining({
+          data: expect.objectContaining({
+            id: 'smallNodeChild-3',
+          }),
+        }),
+        expect.objectContaining({
+          data: expect.objectContaining({
+            id: 'smallNodeChild-4',
+          }),
+        }),
+      ]);
+    });
   });
 });

__tests__/utils/misc.ts

@@ -78,3 +78,44 @@ export const defaultTree = {
   id: 'foo-1',
   name: 'Foo #1',
 };
+
+const getLargeSetOfChildren = () => {
+  const children = [];
+
+  for (let i = 0; i < 100000; i++) {
+    children.push({
+      id: `largeNodeChild-${i + 1}`,
+      name: `Large Node Child #${i + 1}`,
+    });
+  }
+
+  return children;
+};
+
+export const treeWithLargeNode = {
+  children: [
+    {
+      children: [
+        {id: 'smallNodeChild-1', name: 'Small Node Child #1'},
+        {id: 'smallNodeChild-2', name: 'Small Node Child #2'},
+      ],
+      id: 'smallNode-1',
+      name: 'Small Node #1',
+    },
+    {
+      children: getLargeSetOfChildren(),
+      id: 'largeNode-1',
+      name: 'Large Node #1',
+    },
+    {
+      children: [
+        {id: 'smallNodeChild-3', name: 'Small Node Child #3'},
+        {id: 'smallNodeChild-4', name: 'Small Node Child #4'},
+      ],
+      id: 'smallNode-2',
+      name: 'Small Node #2',
+    },
+  ],
+  id: 'root-1',
+  name: 'Root #1',
+};

src/Tree.tsx

@@ -386,6 +386,7 @@ const generateNewTree = <
 };
 
 const MAX_FUNCTION_ARGUMENTS = 32768;
+const SPLICE_DEFAULT_ARGUMENTS_NUMBER = 2;
 
 // If we need to perform only the update, treeWalker won't be used. Update will
 // work internally, traversing only the subtree of elements that require
@@ -484,8 +485,13 @@ const updateExistingTree = <
               orderParts[orderPartsCursor].length === MAX_FUNCTION_ARGUMENTS
             ) {
               orderPartsCursor += 1;
+              // Every chunk contains 2 arguments (start and delete) that are not records
+              // we have to account for them when setting the start point of a new chunk.
               orderParts.push([
-                index + 1 + orderPartsCursor * MAX_FUNCTION_ARGUMENTS,
+                index +
+                  1 +
+                  orderPartsCursor * MAX_FUNCTION_ARGUMENTS -
+                  orderPartsCursor * SPLICE_DEFAULT_ARGUMENTS_NUMBER,
                 0,
               ]);
             }