Indicating selected sub nodes for a collapsed node

[manccu]

Hi,
Thanks for your work on this project!

One question - is there any plans on indicating that there are "selected" sub nodes inside a collapsed tree?

A "tri-state" checkbox of course fills this function, but only for hierarchical multi-selection mode (selectMode: 3 in fancyTree).
Thinking of something like bolding a collapsed node that contains selected sub nodes.
Also indicating the number of selected sub nodes would be even nicer. :-)

[mar10]

Hi,

FWIW, Fancytree has a similar extension for node-counter badges:
https://wwwendt.de/tech/fancytree/demo/sample-ext-childcounter.html

Concerning the select-counter badge:

Wunderbaum has no plugins so far. My general approach would be to provide an API that makes such feature requests easy to implement for developers. This feature seems useful and could be a good candidate.

For example handle the selectevent, call methods that can count selected nodes, and add the badge in the extendTitle event.
Ideally a pattern will be simple enough to add it to a Howto section in the documentation.
We can discuss solutions here and see if the API could be improved to allow for more concise implementations.

Adding it as a built-in feature would always come afterwards if at all. This is much harder to implement and maintain, since it would require a specification that handles many potential requirement details from different users.
Once added, it also has to be maintained, tested and considered in future development.

I hope that I can work a bit more on Wunderbaum during the next weeks, but the current focus is still to make the basic functionality and API more robust, towards beta, support embedded input controls and fixed columns .

[manccu]

OK, thanks for the answer!
Had not noticed this "childcounter" Fancytree extension - thanks!
Will familiarize with your suggestion as well.

[mar10]

FWIW: selectMode: 'hier' just landed in WB (no child counter badges though).
See https://mar10.github.io/wunderbaum/demo/#demo-select

[mar10]

v5.0.1 will have experimental support for badges using a new tree.iconBadge event:

  iconBadge: (e) => {
    const count = e.node.children?.length || 0;
    if (count > 0 && !e.node.expanded) {
      if (count > 99) {
        return { badge: "99+", badgeTooltip: `${count} children` };
      }
      // return { badge: count, classes: "red bold" };
      // return "n=" + count;
      return count;
    }

Example: Display count of matching filtered nodes

  iconBadge: (e) => {
    const node = e.node;
    if (node.children?.length > 0 && !node.expanded && node.subMatchCount > 0) {
      return {
        badge: node.subMatchCount,
        badgeTooltip: `${node.subMatchCount} matches`,
      };
    }
  },

Example: Display count of selected sub-nodes

  iconBadge: (e) => {
    const node = e.node;
    if (node.expanded || !node.children) {
      return;
    }
    const count = node.children && node.getSelectedNodes()?.length;
    return { badge: count, badgeTooltip: `${count} selected` };
  },