Hierarchical widgets

I would like to implement interactive widgets for hierarchical structures.

A simple example could be a file system. I need one widget for documents, which would render some details like file size, permissions and a short summary of the contents. Another widget for folders, which can contain other folders or documents, and which would render a file tree.

I have experimented with Building a Custom Widget - Email widget — Jupyter Widgets 8.1.0 documentation. It seems like I have to define a Document class, derived from TraitType, and a Folder class, derived from TraitType. These two traits would then be used by the corresponding widgets.
But how can I achieve that a Folder can hold a list of Folders or Documents? Can you show some example code of similar hierarchical (nested) traits?

It may be that my question doesn’t make sense at all. If so, can you give a brief description, how one could design a widget for a model type (“document”) that can be nested in a different model type (“folder”), which can again be displayed as a widget?


Did you check out the file_tree example under ’ Build small applications’? The example running in that animation is sourced from the ipytree.ipynb example.
You can run it by going here and clicking on the ‘launch binder’ badge at the top of the ‘Try it online’ section. When the Jupyter sessions starts up, double-click on the ipytree.ipynb listed in the file browser on the left pane and step through running the cells in the notebook.

ipytree itself is here and described as such:

" A Tree Widget using Jupyter-widgets protocol and jsTree"

Thank you, ipytree looks very close to what I need. ipytree’s Node is derived from Widget, not DOMWidget, so that it cannot be displayed. I’ll try if that can be changed - then your answer solves my question.