Virtualized feature

[dilincoln]

Would it be possible to add an example in docs about virtualized tree or maybe implement it in the library?

Currently, I'm working with a tree that can have in some cases 10 thousand items, and in cases like that, is very slow to handle it.

[lukasbach]

Hey, I've tried virtualization before, but found that unfortunately RCT's current architecture isn't really compatible with virtualization, so that is unfortunately not supported. I am currently experimenting with a new library with a different API that has virtualization in mind, so I might be able to come up with something in the future that provides the same features with virtualization support.

[Nishchit14]

@lukasbach you mean to create a new library for tree with better architecture?

[dilincoln]

Hi @lukasbach and @Nishchit14, I reached some good results. I still have to do only two more things to improve even more, then I can share, and maybe we can test together to make sure it didn't break anything. See the results below:

https://s12.gifyu.com/images/CleanShot-2023-05-17-at-21.26.22.gif

[Nishchit14]

This is fantastic @lukasbach, If we also want to improve the tree API then we can take inspiration from VSCode tree APIs too. Sure, would be happy to test out the early version and share feedback.

[lukasbach]

@Nishchit14 yes a new library. I'm currently working on getting an early alpha in an usable state, then I'd be happy to get some feedback on what you think.

@dilincoln that looks cool, I would be interested to see how it works.

[Nishchit14]

@dilincoln The demo looks impressive, please do share once it is ready.

[FatalWorm]

Hello, I have managed to implement virtualization, but I have encountered a number of unsolvable problems, the biggest of them, Drag&Drop does not work correctly. I used react-window, if anyone is interested to try it. It works in a similar way to @dilincoln.

[dilincoln]

Hi @FatalWorm, could you share your solution?

[FatalWorm]

			<ControlledTreeEnvironment<NavigationTreeItemData>
				...
				renderItem={renderNavigationTreeItem}
				renderItemsContainer={renderNavigationTreeListWrapper}
			>
				<Tree
					ref={treeRef}
					treeId={id}
					rootItem={rootIndex}
					treeLabel="Navigation Tree"
				/>
			</ControlledTreeEnvironment>

const renderNavigationTreeListWrapper = ({ info, containerProps, children }: NavigationTreeListWrapperProps) => (
	<NavigationTreeListWrapper
		info={info}
		containerProps={containerProps}
		children={children}
	/>
);

const NavigationTreeListWrapper: FC<NavigationTreeListWrapperProps> = ({ children }) => {
	const components = useMemo(() => (Array.isArray(children) ? Array.from(children) : []), [children]);

	return (
		components.length > 0 && (
			<InfiniteLoader className="complex-navigation-tree__infinite-loader">
				{({ width, height }) => (
					<FixedSizeList
						className="complex-navigation-tree__list"
						itemSize={40}
						itemCount={components.length || 0}
						width={width}
						height={height}
						itemData={components}
						children={({ index, data, style }): JSX.Element => {
							return <div style={style}>{data[index]}</div>;
						}}
					/>
				)}
			</InfiniteLoader>
		)
	);
};

@dilincoln If you need clarification, please contact.

[Nishchit14]

@Nishchit14 yes a new library. I'm currently working on getting an early alpha in an usable state, then I'd be happy to get some feedback on what you think.

@dilincoln that looks cool, I would be interested to see how it works.

Hey, @lukasbach Have you made any progress on the new lib? I am curious to know about it and if possible then try it.

[lukasbach]

Hey @Nishchit14, yes, the code for the library is at https://github.com/lukasbach/headless-tree, and some stubs for documentation exist at https://headless-tree.lukasbach.com. Progress has been a bit slow recently, and there is still much to do, but I am still working on it. Happy to hear some early feedback on it, I also thought of opening some form of community platform like discord to discuss that soon.

[Nishchit14]

This is awesommmmm @lukasbach. I'll give it some more time to try the examples. I feel that the performance is so optimized.

[asajim]

@FatalWorm Hi, thank you sharing your solution. But can you create a repo with a complete solution please? I'm having difficulties figuring out how the InfiniteLoader and FixedSizeList components work

[FatalWorm]

@asajim I can't share it. Look at the documentation for the "react-window" library, it allows you to create virtual lists and tables, a handy tool.