Tree widget: Hierarchical categories tree

[grigasp]

At the moment the Categories tree component renders the categories as a flat list, and each category may have its SubCategories as children.

Some iTwin.js applications are starting to group Categories under bis.DefinitionContainer elements and would like to see that represented in the Categories tree. The exact structure is TBD.

Things to take into account:

• Categories not under a definition container should be displayed as root nodes as they are today.
• Definition containers contain definition elements, and a bis.Category is only one of the subclasses. A container may contain other types as well, but we only want to show container that have categories. - needs to be confirmed - is this also the case for editing cases?

[grigasp]

@laurynas111, could you please describe the hierarchy structure you'd like to see? Specifically, I'm interested in:

• what do we show as root nodes,
• how do we get from root nodes to definition containers.

[laurynas111]

Adding cmap jpeg with an example use case:

Also sharing similar component used in a dgn product:

[grigasp]

@laurynas111, as part of this change, we'll want to add icons to nodes, to make sure users can tell the difference between containers, categories and subcategories. Generally, we use icons from here: https://itwin.github.io/iTwinUI-icons/, and for bis.Category we use https://itwin.github.io/iTwinUI-icons/#icons-layers. Any ideas what we could use for DefinitionContainer and SubCategory?

[laurynas111]

I think we should be consistent with the Design Review.
If Design Review does not use icons for these Elements, perhaps UX should be involved to suggest some? Maby iTwin UX team could help? e.g. Veronique

[grigasp]

I think we should be consistent with the Design Review. If Design Review does not use icons for these Elements, perhaps UX should be involved to suggest some? Maby iTwin UX team could help? e.g. Veronique

Design Review doesn't have icons in Categories tree, but that's not that big of a problem there, because it always shows Categories as root nodes and SubCategories as children.

Now, we'll start seeing Categories mixed with DefinitionContainers at the same hierarchy level, at which point being able to distinguish them visually becomes much more important.

@VeroniqueVezina, thoughts?

[grigasp]

Adding existing Categories tree screenshots for reference.

v2, currently used in Design Review PROD:

v3: