[docs] RichTreeView nesting/recursive component approach? - redux integration

[vivere-dally]

Related page

https://mui.com/x/react-tree-view/rich-tree-view/items/

Kind of issue

Unclear explanations

Issue description

Given that the RichTreeView requires a nested array structure:

export interface UseTreeViewItemsParameters<R extends {
    children?: R[];
}> {
    // ... stuff
    items: readonly R[];
    // more stuff
}

It isn't immediately clear how you would integrate it with a tool like Redux or how you would do state management for fetching/adding/moving files by communicating with a backend.

Redux recommends having a normalized state structure, thus mapping from a flatten structure to a deeply nested one could be very inefficient.

I was thinking that having some sort of functionality where a Node can render itself and it's immediate children would allow for you to ask from a redux store: for this parent id, give me the children. Thus you would lazy load and react at node level.

As it is, it's not clear for me how I could react at the same level as RichTreeView when a change happens somewhere in the tree without rebuilding the structure.

Am I wrong in my assumptions, are there any recommendations or examples?

Context

I am trying to build a file explorer starting from your example

Search keywords: rich-tree-view

[michelengelen]

Hey @vivere-dally
thanks for opening this issue here.

From what I understand from your question is that you basically want to implement a lazy loading approach, right? This is something we definitely have on our radar for the near future (no estimate yet) and is being tracked in #9687

One thing I could think of to improve efficiency in redux would be to use a path pattern for your items.

The state could look something like this:

const normalizedData = {
  pages: {
    ids: [
      "page1", "page2", "page3", "page4", "page5", 
      "page6", "page7", "page8", "page9", "page10", 
      "page11", "page12", "page13", "page14", "page15", 
      "page16", "page17", "page18", "page19", "page20"
    ],
    entities: {
      "page1": { id: "page1", label: "Home", path: "root" },
      "page2": { id: "page2", label: "About", path: "root" },
      "page3": { id: "page3", label: "Contact", path: "root" },
      "page4": { id: "page4", label: "Services", path: "root/page1" },
      "page5": { id: "page5", label: "Blog", path: "root/page2" },
      "page6": { id: "page6", label: "Team", path: "root/page1/page4" },
      "page7": { id: "page7", label: "Careers", path: "root/page1/page4" },
      "page8": { id: "page8", label: "History", path: "root/page2/page5" },
      "page9": { id: "page9", label: "Mission", path: "root/page2/page5" },
      "page10": { id: "page10", label: "FAQ", path: "root/page3" },
      "page11": { id: "page11", label: "Support", path: "root/page3/page10" },
      "page12": { id: "page12", label: "Pricing", path: "root/page4" },
      "page13": { id: "page13", label: "Testimonials", path: "root/page4/page12" },
      "page14": { id: "page14", label: "Portfolio", path: "root/page4/page12" },
      "page15": { id: "page15", label: "Case Studies", path: "root/page4/page12/page14" },
      "page16": { id: "page16", label: "Events", path: "root/page5" },
      "page17": { id: "page17", label: "News", path: "root/page5/page16" },
      "page18": { id: "page18", label: "Press", path: "root/page5/page16" },
      "page19": { id: "page19", label: "Gallery", path: "root/page5/page16/page18" },
      "page20": { id: "page20", label: "Blog Post", path: "root/page5/page16/page18/page19" }
    }
  }
};

each path could then be used to fetch a parent from the state as well.

@flaviendelangle I am not too familiar with the render updates in the tree view. Could you clarify this question?

As it is, it's not clear for me how I could react at the same level as RichTreeView when a change happens somewhere in the tree without rebuilding the structure.

[flaviendelangle]

I agree that lazy loading would probably be the solution here.
The data grid has a new set of APIs to load data (that you can discover here) and we plan to do something similar on the tree view.

Being optimized for locally stored data might require some tweaking (avoid useless async for instance).

---

Alternatively we could release a version of the tree view that works like the tree data feature of the grid out of the box with a flat dataset and a getTreeDataPath prop (with a different name of course).
But having two different ways of providing data to the component would increase the overall complexity of the codebase and make it harder for people to understand how the component should be used. If the lazy loading can take care of it, it would be awesome.

[michelengelen]

I do agree that lazy loading would be the ideal solution to this.
How this can be used in a redux context is up to the user implementation in that case, but I guess it should not be that hard to implement .. I guess there are at least a few examples to be found elsewhere.

I do agree that we should add an example to the docs once we do have a working solution to the lazy loading feature.

I'll keep this open as a request to add a recipe to the docs. Objections @flaviendelangle ?

[flaviendelangle]

This would require #9687
But yeah, once we have it, it could definitely be a recipe 👍

[vivere-dally]

Something like this for the tree view I think would be great