[Concept] Group buttons

[LukeG89]

Having a dropdown list to select groups is not really handy. Why not having group buttons instead?

Here's a quick mockup with 6 groups:

@chrisgoringe @JorgeR81 What do you think?

[JorgeR81]

This could be a good option, for simpler workflows ( 3 to 9 groups ).

But to use buttons + colors, we would need a better way to highlight the selected group.
Maybe something similar to the workflow tabs, like this:

---

For larger workflows, I would prefer to use this feature:

• When clicking a group in the workflow, select it in the controller #100

I can zoom out the graph and the buttons will be the groups themselves !

[chrisgoringe]

One advantage of this would be that the group selection need not be exclusive; you could turn each group on and off independently.

Disadvantage is if there are lots of groups...

I don't think this and #100 are contradictory, btw.

[JorgeR81]

Maybe we could have an user setting like this:

"Use group selection buttons, if the workflow groups are less than: _______

[LukeG89]

This could be a good option, for simpler workflows ( 3 to 9 groups ).

Disadvantage is if there are lots of groups...

Maybe we could have an user setting like this:
"Use group selection buttons, if the workflow groups are less than: _______

Yeah, with this option the problem is solved!

(Btw, if the multi-column option is still in consideration, there would also be enough room for the buttons! 😉 )

[chrisgoringe]

(Btw, if the multi-column option is still in consideration, there would also be enough room for the buttons! 😉 )

it is....

[JorgeR81]

One advantage of this would be that the group selection need not be exclusive; you could turn each group on and off independently.
Disadvantage is if there are lots of groups...
I don't think this and #100 are contradictory, btw.

Maybe we could have an user setting like this:
"Use group selection buttons, if the workflow groups are less than: _______

I just thought of a better alternative, that could replace the dropdown list completely !

---

All group buttons in will be in a collapsible panel

• It could have a square in the header and/or borders to differentiate it from the node panels.
• With this we can fit 30 groups in 10 lines. It will be more usable than a 30 line dropdown list.
• If we have few groups, we can just leave it open all the time.
• This panel will not be draggable. It will always be on the top.
• If the title is too long, the layout could be reconfigured to have 2 buttons per line ( not pictured ).
• The All Groups button, on top, would toggle all group buttons "on".
• We can click a group in the graph to toggle only one button "on", and all the others "off" ( When clicking a group in the workflow, select it in the controller #100 )
• Insted of button highlight, the buttons could have a checkbox.
  The checkbox and the button are the same clickable area.
  Basically these buttons are just color coded "checkboxes".
  For colored buttons, the checkbox it's just a better visual indicator, than highlight.
  The checkbox could have only light / dark grey colors ( to better identify selection in the colored buttons ).

---

alternative layout ( simpler )

• The panel could have the background's color ( to make it invisible )
• I could just be clickable header text, with an arrow indicator ( to show the colapsed / expanded state )
• When it's collapsed, it could have a indicator for the nº of buttons "on", e.g.: > group selection ( 4 )
• We could have another line divider, below the butons.
• This would give a cleaner look and it would help differentiate the panel.
• It could also allow slightly larger buttons ( to fit more text ).

[LukeG89]

I've got another idea.

On each group in the dropdown list there could be a checkbox (or a switch) to enable the button:

This way, users can enable the buttons of their most-used groups and keep all the others in the dropdown list.

@chrisgoringe Is it possible in this situation to both select a group if you click on the name and tick a checkbox (or click a switch) to just enable the group button?

[LukeG89]

Or just to select the buttons that it would be displayed ?

Yes, to enable only the buttons of your "favorite" groups.

If it's the latter, then we would have checkboxes in the dropdown list, and in the buttons themselves ( to allow multi selection ).
That may be too complex.

Mine and your idea of multi selection could possibly co-exist, but wouldn't be too chaotic to select more than one group at the same time?
Because you can't visually identify groups in the window, so it would be like a "skimmed" version of All Groups mode. It's still more intuitive switching single groups.

[JorgeR81]

Mine and your idea of multi selection could possibly co-exist, but wouldn't be too chaotic to select more than one group at the same time?

Multi selection was @chrisgoringe 's idea. I think that's what he meant when he said:

One advantage of this would be that the group selection need not be exclusive; you could turn each group on and off independently.

---

And I think it could work well:

Let's say you have an workflow with these groups:

• the normal text to image nodes ( including a KSampler )
• ControlNet
• Face Detailer
• Upscaler nodes

If you're not using the Face Detailer or Upscaler, then :

• You could enable only the other 2 group buttons, to display the both KSampler and the Apply ControlNet nodes ( which would fit nicely in a single Controller column ).

• And you can hide the Face Detailer and Upscaler nodes ( which would require column scroll or 2 columns )

[LukeG89]

Maybe I have a possible solution: Instead of a tickbox on the buttons, you can use ctrl+click to multi-select buttons

[JorgeR81]

Maybe I have a possible solution: Instead of a tickbox on the buttons, you can use ctrl+click to multi-select buttons

The tick box and the button would be the "same thing". Same clicable area. ( I'm going to clarify this in my comment ).

To multi select you just need to click the button.
Basically there are no buttons, they are just, ( color coded ) check boxes.

And the tick box shape would be a way to identify the groups that are "on" ( visible ).
In your original mockup, the button highlight ( in the "prompts" button ), was not easy to differentiate . 

[LukeG89]

The tick box and the button would be the "same thing". Same clicable area.

And the tick box shape would be a way to identify the groups that are "on" ( visible ).
In your original mockup, the button highlight ( in the "prompts" button ), was not easy to differentiate .

That would be kinda redundant. It would be better to improve highlighting in the buttons, don't get distracted by my terrible mockup. A stronger white border should be enough (not to mention that tickboxes on buttons are a waste of space for the group name) (and they are pretty awful to see) (and I really hate tickboxes! 😆).

I propose to merge all the ideas:

• Dropdown list with tickboxes (🤮) or switches (😍) on each group name. With this option you can:
  • Show/hide group buttons on the Controller window, to only have your most-used ones.
    • And by the order you enable them, you can also choose how to arrange them.
  • You can still select groups from the dropdown list.
• If you need to see more than one group at the same time, you can Ctrl+click the buttons to multi-select them.
  • Ctrl+click on selected buttons to deselect them.
• (optional) Expand/collapse option as shown in the alternative layout ( simpler ), useful if you want to show plenty of buttons.

I think this would be the best for most use cases. What do you think?

[chrisgoringe]

I'm currently inclined towards something like

but without the checkboxes; instead some other visual indication of 'active' v 'inactive'. This actually is a dropdown list of buttons, in a way, but one that makes better use of vertical space.

[JorgeR81]

instead some other visual indication of 'active' v 'inactive'.

Here's a thicker highlight on all sides:

---

Maybe in white ?

[JorgeR81]

Highlight just the left side ( like the on the Sidebar )

I think this looks better !

Highlight on all sides is too confusing / distracting.
( e.g. if we surround 1 "off" button, with multiple "on" buttons, it's hard to tell what's going on ).

But this it's still readable for me.
If we align the text to the left, people will notice the blue line, when reading the group's name.

[chrisgoringe]

I've created this as #168. When I implement we'll get a better idea of how it works best.

[LukeG89]

Improving Group identification

Currently it is difficult to tell which group each controller belongs to inside the window (as I mentioned here #160 (reply in thread)), so I propose a way to better identify them, especially in multi-select mode.

Quick mockup:

Original:

And to keep the arrange flexibility and not limiting in group blocks, the background color could be associated to the single Controller.

@chrisgoringe @JorgeR81 What do you think?

[LukeG89]

A better alternative could be a colored bar only on the side (less distracting):

[JorgeR81]

Yeah, I like this one.