Segment Editor Effect button size consistency

Continued originally from:

Currently some segment editor effects are larger than others because they have longer text on the button. “Grow from seeds” is a larger size than say “Paint”.

image

We could update buttons so the last one in the row does not stretch in the ctkFlowLayout to the layout current bounds. We could also choose to remove the text from the effect buttons and instead rely on the tooltip to provide information about what the button is if it isn’t clear from the icon.
image

Do others think the text below the icon for the segment editor effects is critical? I’ve looked at other applications and text for the grouping of tools is not something usually done. I realize there are some special effects like “Grow from seeds” which doesn’t have a known equivalent in a regular image editor so just a icon could not be information. However with many like None, Paint, Draw, Erase, Scissors (lasso), there are known icons that can easily describe the effect on its own.

Photoshop:
image

Paint 3D:
image

The old Editor has just the icons and tooltips with the names. I found it worked well. I agree it’s good to avoid scrolling the module panel so saving space is good. Also keeping the tool icons in a fixed order makes it easier to quickly get to the tool you want (the current Segment Editor tools move as the module panel changes width and I find this leads to confusion).

image

1 Like

I’m very much in favor of removing the text from the buttons.

2 Likes

Meaning, use tooltips instead of text embedded with buttons.

@pieper Are you suggesting that the effects no longer be in a ctkFlowLayout but rather a QGridLayout? If I manually expand the left side panel to be larger the effects would move to try and be on 1 row rather than multiple rows. If a QGridLayout, then on smaller screens the minimum size of the side panel would increase as it couldn’t change from say 8 effects across 2 rows to be say 4 effects across 4 rows.

Yes exactly. I don’t think it’s helpful for the effect buttons to jump around. If we just use the icons (no text) we can make multiple rows of a reasonable width. These could be generally grouped by similarity but I wouldn’t bother naming and labeling the groups since I agree with @muratmaga that the concept names aren’t exact, but rows of effects with somewhat similar behavior or interface could be helpful so people remember where to look for a type of operation.

Text looks nice and saves time for novices, but I agree that it may not worth the space it takes.

Flow layout saves space but not the saving is not that significant and forces users to scan through the complete icon list, so a static grid layout would probably work better.

We can allow users to configure both button label visibility and grid layout column count.

If we hide the Slicer logo at the top and put the Data probe in a dockable widget then probably we don’t need to scroll anymore.

If we need even more vertical space then we could add an option to show the toolbar on the side, using 1 or 2 columns.

I also like this idea, with the proviso that font size for these tooltips should a bit bigger than the rest. With my aging eyes, I find it quite difficult to read the contents of tooltips sometimes.

Yes, maybe not a tooltip with a delay, but a label below the rows of buttons that updates instantly as you mouse over the buttons. Similar in effect to the way the DataProbe updates as you mouse over segments.

I’ll post here again once I post another PR with the suggestions discussed on this thread.

Well here’s a first look for visual impressions. Actually using it can come soon after.

Thoughts on the “Segment Editor Effects” toolbar?

  • Does it work as a Toolbar? or should it instead be contained inside the Segment Editor module layout?

  • The allowed areas could be anywhere (Left, Top, Right, Bottom) with the default location being the left toolbar area. Should it be allowed anywhere including floatable?

  • Should it only be shown when the Segment Editor module is the selected module? It really depends on other functionality of the module.

  • For a smaller window size there is automatically an expand button to show the other toolbar buttons (Segment Editor effect buttons). It expands like the following to allow the selection of others and then the expand disappears when the mouse hovers away from it.

  • Regarding tooltip text size, currently it is the same size as other text in the module. If one is difficult to read the others will be difficult to read. Text size would then need to be magnified across the application. I assume this is already handled with the font size setting.
    image

  • If the Segment Editor Effects are in a toolbar the showing or hiding of text would seem to make sense paired to the current “Show text under icons in toolbar buttons” setting.

And of course the more old school method of the segment editor effects directly under the segment table and not movable.

Without being able to modify/change the active segment etc, I can’t see the Segment Editor toolbar being used on its own, at least not very effectively. To me, it feels like it just belongs inside the Editor.

I like that.

I liked what @pieper said about not being delayed tooltips. Would it be possible to bring a label immediately when I hover over (as oppose to waiting a little while before the tooltip shows up)?

In the module window, would it be possible to make the label of the active effect (Threshold in your screenshot) a bit more prominent (larger font or bold face or something).

Thanks again doing all this work!

Thank you, this looks promising.

The widget has to be self-contained (as it is included in many modules now) and we need to allow at least two columns (in the screenshot we already ran out of space with a single column). A simple frame with a grid layout containing QToolButtons should work. Number of columns (or maximum number of rows) could be user-configurable.

QToolBar is quite limited (single column only; dockable only if it is child of the main window, etc.) and if it was outside of the module’s GUI then showing/hiding/positioning would require a lot of extra management. So, I don’t think we can use QToolBar. We could easily make the position/orientation of the button grid user-configurable (horizontal/vertical orientation, left/right/top position), but probably this is not necessary.

Yes, it should only be shown when the corresponding qMRMLSegmentEditorWidget widget is visible. As I wrote above, this could become very complicated if the buttons are not in the widget’s layout.

If the effects are arranged vertically inside the Segment Editor layout should they be to the left of all current widgets in the layout? Would be to the left of help/acknowledgement, to the left of the segment table, to the left of effect options and to the left of masking options.

I guess if the effect buttons have to be within qMRMLSegmentEditorWidget, then they could only extend vertically in the region to the left of the (node selection + segment table + effect options + masking). It could not extend to the left of the acknowledgement group box area.

Exactly. Everything has to be inside the segment editor widget.

Here’s an image of the Segment Effects part of qMRMLSegmentEditorWidget with vertical orientation of effect groupbox. Effects fill into a QGridLayout instead of a ctkFlowlayout and fill in the grid in order from top to bottom utilizing 2 columns always. This is so effects at the beginning of the effect ordered list are at the top. Effects at the very end of the list are always near the bottom of the 2 columns. Also a reminder that since more things no longer need a scrollbar to see (masking options), this means the width of the left side bar area is a little bit wider to accommodate the 2 columns. This makes the decision to prioritize not having to scroll over trying to maintain a slightly smaller left side panel width.

If the window is small, you have to scroll down to see more effects, just like you would have to scroll to see more of the effects. I think this behavior is fine considering it is part of qMRMLSegmentEditorWidget object.
image

Previously mentioned:

This would seem that the QGroupBox that currently has the title “Effects” should be changed to “Tools”. Should we begin referring to these as “Segment Editor Tools” to improve user understanding by using familiar terminology?

Is the effect groupbox resizable by the user (like making it single row, triple row etc)? If people have only the default segment editor tools, would the second row appear empty?

Otherwise this is looking better to me than our current UI.

The layout is filled in from the top to the bottom. So if there are fewer effects, there will be not as many rows instead of not as many columns.

For it to be resizeable and adjust dynamically like you are suggesting, it would need to be a ctkFlowLayout again instead of a QGridLayout.