What is a good UX design for letting a user select a complex set of nodes from a 2-level, dynamic, moderate-size tree? (I say a 2-level tree, but to be more accurate, the implied root could be considered a third, hidden level; the root is not to be represented to the user.) All leaves of a branch may be selected distinctly from the branch itself (because branch selection implies future inclusion of added leaves, whereas selecting all current leaves does not).
Is there a good existing design to this problem?
The tree will have at least one branch node, and all branch nodes will have at least one leaf node. Both the original tree and the selection are dynamic. That is, the membership of the tree can change in the future (branches and leaves can be added and removed), and so can the user's selection (if the user revisits the app).
The resulting selection will be composed of a set of branch and leaf nodes. If a branch is selected, then implicitly all its leaves (now and in the future) are effectively selected as well (and that should somehow be made clear to the user). Therefore if a branch is selected, it is redundant to select any of its leaves (indeed this could be prevented in the UX design). However, it is valid to select all leaves in a branch rather than the branch (and leave the branch unselected), because in the future the membership of the branch's leaves could change -- if additional leaves are later added to the branch but the selection has not changed, such leaves will not be implied selected unless and until the user explicitly does so in a future selection.
The scale is moderate. Roughly 10 branches max, 50 leaves per branch max. Small enough to load everything at once (no lazy loading or infinite scroll). Large enough that scrolling may be required, and searching is helpful but not critical. The resulting selection is likely relatively small, because generally leaves won't be individually selected if more than 5 or so leaves (in those cases the branch would generally be selected instead). Most likely the selection could be represented with 25 or fewer nodes.
Examples of Original Tree
The structure being selected from could be represented like this:
branch1 ∟ leaf1-1 branch2 ∟ leaf2-1 ∟ leaf2-2 branch3 ∟ leaf3-1 ...
And the minimal structure is:
branch1 ∟ leaf1-1
I am thinking of a 2-column view showing the unselected (first/source column) and selected (second/destination column), but that's not set in stone.
Also thinking a drag-and-drop or add/remove interaction (or both) to move members from one set to the other. Pre-move multi-select of the nodes (e.g. Ctrl+click several nodes then add or remove them) can be considered as well but is not strictly required.
Searching/filtering the nodes can be considered, but that feature is of secondary importance for this design.
One challenge of the design is whether and how to depict a branch that has some but not all of its leaves selected. If a 2-column design (see Design Possibilities above) is used, should the branch be depicted in both columns, and if so should there be any visual indication that it is partly selected?
Another challenge of the design is now to depict the leaves of a branch where the branch itself is selected but its leaves aren't explicitly selected. Should the leaves appear as if they have been explicitly selected or not, or should they appear in some third state that indicates their selection is implicit?
Another challenge is, if a branch is added to the selection, (how) can one of its leaves be removed from the selection? Must the user remove the branch first, or is there a way to remove a leaf from a selected branch? If the latter, is the branch removed from the selection but its remaining leaves added to the selection?
A final challenge is, whether to represent the final selection in the same way as the original tree. It might be easier to visualize the final selection in a more compact representation.
An excellent UX design solution to this problem would address the above challenges in a way that is clear and intuitive.
This question addresses selecting a single path (one node per branch): Designing a control to select elements from a tree?
This question is very similar but does not address the critical distinction between selecting all leaves of a branch vs. selecting the branch (which are distinct selections in my question): For large hierarchies - checkbox tree or 'guided tree construction'
This question is similar but not as detailed and is more tied to large scale rather than basic usability: Alternative UI patterns for a large, shallow tree