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.