# New Segment Editor layout - vertical effect toolbar

**URL:** <https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649>\
**Category:** Support\
**Tags:** feature, segmentation\
**Created:** [September 13, 2021, 7:51pm UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649 "2021-09-13T19:51:18Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![lassoan](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/lassoan/32/13_2.png) [@lassoan](https://discourse.slicer.org/u/lassoan)\
**Post date:** [September 13, 2021, 7:51pm UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/1 "2021-09-13T19:51:18Z")

</div>

Thanks to all the development efforts of @jamesobutler and feedback from the community, the new, more space-efficient Segment Editor user interface is now ready (available in latest Slicer Preview Release). The main difference is that the effect toolbar is vertical, with fixed number of columns and without icon labels. This layout makes it easier to remember where to find an effect (because the same effect always appears at the same place), and the space is used more efficiently (there is less need for scrolling).

 ![image](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/a/7/a7a87dfbdf1b798215c165caafdf2a6771214f32.jpeg)

Feedbacks and suggestions are welcome.

---

<div class="post-metadata">

**Author:** ![tomekcz](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/tomekcz/32/11462_2.png) [@tomekcz](https://discourse.slicer.org/u/tomekcz)\
**Post date:** [September 15, 2021, 2:01pm UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/2 "2021-09-15T14:01:16Z")

</div>

This is looking great. One minor suggestion now that the Effect labels have been removed and the button icons are much smaller is to consider creating some new artwork for very common effects to harmonize them with well-known painting and image editing programs.

For example, the Draw tool could be made into a simple pencil icon, the Paint tool could just be a paintbrush, Flood Filling could be a paint can, Level Tracing could be a magic wand, Eraser just a simple eraser. I’m not sure what exactly to do with Scissors, the icon implies cutting/deleting to me, but the functionality is more like a “shapes” tool that lets you draw circles and rectangles. The more advanced, 3D image icons are probably fine as is, but worth putting some thought into given the new design.

---

<div class="post-metadata">

**Author:** ![lassoan](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/lassoan/32/13_2.png) [@lassoan](https://discourse.slicer.org/u/lassoan)\
**Post date:** [September 15, 2021, 2:15pm UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/3 "2021-09-15T14:15:13Z")

</div>

> [@tomekcz](#):
>
> consider creating some new artwork for very common effects to harmonize them with well-known painting and image editing programs

Good idea. Contributions for improving these icons are very welcome. We actually need to update all Slicer icons, as screen resolutions increased since the current icons were created and the style has become inconsistent over the years.

---

<div class="post-metadata">

**Author:** ![simonoxen](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/simonoxen/32/66398_2.png) [@simonoxen](https://discourse.slicer.org/u/simonoxen)\
**Post date:** [September 16, 2021, 7:44am UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/4 "2021-09-16T07:44:45Z")

</div>

Hi, just looked at this, it is great! Thanks for the effort!

One comment: would it make sense to put the undo/redo buttons like the picture attached? Then they would also always stay in the same place and not relocate in the GUI with each effect description.

 ![segment](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/b/e/be39465f1bf076f9e448eaa556032456bca5ed1c.png)

I think it might also be clearer that they are not dependent on the effect

Thanks

---

<div class="post-metadata">

**Author:** ![lassoan](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/lassoan/32/13_2.png) [@lassoan](https://discourse.slicer.org/u/lassoan)\
**Post date:** [September 16, 2021, 11:46am UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/5 "2021-09-16T11:46:47Z")

</div>

What do you think about showing it below the effect toolbar?  
It would keep the (none) effect stand out and and preserve the concept of workflows starting in the top-left corner (you would not start with undo/redo). Also, if you scroll up to see the all segment effects and masking settings then the top of the effect list may not be visible anymore.

Could you give this a try to implement this and give it a try how it works for you? Probably placing it into a separate frame (not in the effect toolbar) would be better, so that if the effect toolbar is configured with more columns, the undo/redo would still span the whole width.

---

<div class="post-metadata">

**Author:** ![simonoxen](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/simonoxen/32/66398_2.png) [@simonoxen](https://discourse.slicer.org/u/simonoxen)\
**Post date:** [September 17, 2021, 5:59am UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/6 "2021-09-17T05:59:57Z")

</div>

> [@lassoan](#):
>
> It would keep the (none) effect stand out and and preserve the concept of workflows starting in the top-left corner (you would not start with undo/redo)

I see, this makes sense.

> [@lassoan](#):
>
> Could you give this a try to implement this and give it a try how it works for you?

Yes, unfortunately lately haven’t had much time to work on developing in Slicer environment. This could be something to check out in the future.

---

<div class="post-metadata">

**Author:** ![lassoan](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/lassoan/32/13_2.png) [@lassoan](https://discourse.slicer.org/u/lassoan)\
**Post date:** [September 17, 2021, 1:36pm UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/7 "2021-09-17T13:36:39Z")

</div>

No problem. Thanks for the suggestion anyway.

@jamesobutler when you implemented this new design, have you experimented with placing the undo/redo buttons in different locations? Would you have time to me to give it a try to put it under the effect toolbar?

---

<div class="post-metadata">

**Author:** ![jamesobutler](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/jamesobutler/32/7511_2.png) [@jamesobutler](https://discourse.slicer.org/u/jamesobutler)\
**Post date:** [September 17, 2021, 1:40pm UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/8 "2021-09-17T13:40:50Z")

</div>

I never considered moving the undo/redo button location, but moving it to smaller toolbuttons under the Segment Effect frame does make sense. That would then bring up masking to be directly below the effect options groupbox.

Yes, I can spend some time maybe this weekend to experiment with that change.

---

<div class="post-metadata">

**Author:** ![jamesobutler](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/jamesobutler/32/7511_2.png) [@jamesobutler](https://discourse.slicer.org/u/jamesobutler)\
**Post date:** [September 18, 2021, 3:36pm UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/9 "2021-09-18T15:36:46Z")

</div>

Here’s some images of the prototype. I’ve put it below the segment effects as @lassoan suggested based on the concept of the workflow starting at the top left and then working down. I’ve put the undo/redo in a similar styled frame groupbox like the effects frame.

I made it a separate frame rather than putting inside the same one as the effects to decouple logic associated with effect count which is based on the number of items in the layout in the effects layout. I had previously considered putting a horizontal line at the bottom of the effects frame and then putting the undo/redo buttons below that which would have had everything within that same effects frame. However, the two separate frames (Effects group and then the Undo/Redo group) appears to work well too.

Let me know what you think and I’ll issue a PR.

Overview Prototype:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/5/5/550b5d7c7fff031242534c79d5ad322c5fa56280.jpeg)

1Column:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/b/1/b122111d202c0671b566c290b0d5df7c0a4c4636.png)

2 Column (Default)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/6/b/6bc1b3f319d91e8e897c015597613bbeed20be03.png)

3+ Column  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/4/b/4b838f3c7fc14c17c314294e6fe8248b8ba0c448.png)

---

<div class="post-metadata">

**Author:** ![lassoan](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/lassoan/32/13_2.png) [@lassoan](https://discourse.slicer.org/u/lassoan)\
**Post date:** [September 18, 2021, 3:59pm UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/10 "2021-09-18T15:59:28Z")

</div>

This looks great!

Just one small change we could consider is adjustment of the space between the effects frame and undo/redo frame. The space between the two frames should be the same (or maybe a bit larger) than the internal margin (space between the frame and the buttons inside).

---

<div class="post-metadata">

**Author:** ![jamesobutler](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/jamesobutler/32/7511_2.png) [@jamesobutler](https://discourse.slicer.org/u/jamesobutler)\
**Post date:** [September 18, 2021, 4:08pm UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/11 "2021-09-18T16:08:24Z")

</div>

This is with the spacing set to 11 (same as QGridLayout margin values) instead of the default 7. This what you are thinking?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/1/c/1c912540ba8eb81a0df58312aa9cac2d64cf7323.jpeg)

---

<div class="post-metadata">

**Author:** ![jamesobutler](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/jamesobutler/32/7511_2.png) [@jamesobutler](https://discourse.slicer.org/u/jamesobutler)\
**Post date:** [September 18, 2021, 4:19pm UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/12 "2021-09-18T16:19:06Z")

</div>

This is with the value set to 7. I thought this was the default, but actually looks a little different for the better. I think this looks a little better than the 11 value I showed above.  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/6/0/6045ff57a2bbf846892203c34c1c12236697e4bc.png)

---

<div class="post-metadata">

**Author:** ![jamesobutler](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/jamesobutler/32/7511_2.png) [@jamesobutler](https://discourse.slicer.org/u/jamesobutler)\
**Post date:** [September 18, 2021, 4:29pm UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/13 "2021-09-18T16:29:35Z")

</div>

I have issued PR based on this work and if others want to experiment different values for spacing they can easily do it with the code.

> <https://github.com/Slicer/Slicer/pull/5875>
>
> This moves the Undo and Redo buttons in the Segment Editor module to be under th…e effects groupbox. This is motivated by the desire for these buttons to not move when different segment editor effects are selected.
> 
> See https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/9?u=jamesobutler for more details about this development.
> 
> | Current | This PR |
> |----------|---------|
> |!\[image\](https://user-images.githubusercontent.com/15837524/133895687-bbf355b0-63a4-4e8f-8139-4832499b87d5.png)|!\[image\](https://user-images.githubusercontent.com/15837524/133895637-9b5d8e05-0de0-4f1d-9e9a-28bbd744d613.png)|

---

<div class="post-metadata">

**Author:** ![lassoan](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/lassoan/32/13_2.png) [@lassoan](https://discourse.slicer.org/u/lassoan)\
**Post date:** [September 18, 2021, 5:16pm UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/14 "2021-09-18T17:16:47Z")

</div>

Looks perfect to me, thank you. If there are no other comments then I’ll merge this later today.

---

<div class="post-metadata">

**Author:** ![simonoxen](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/simonoxen/32/66398_2.png) [@simonoxen](https://discourse.slicer.org/u/simonoxen)\
**Post date:** [September 20, 2021, 8:35am UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/15 "2021-09-20T08:35:50Z")

</div>

That was fast, very nice! thanks!

---

<div class="post-metadata">

**Author:** ![rbumm](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/rbumm/32/9404_2.png) [@rbumm](https://discourse.slicer.org/u/rbumm)\
**Post date:** [September 20, 2021, 10:05am UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/16 "2021-09-20T10:05:53Z")

</div>

Do one has to use this new layout ? or is that an option ? I liked the older too because of the text labels.

---

<div class="post-metadata">

**Author:** ![lassoan](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/lassoan/32/13_2.png) [@lassoan](https://discourse.slicer.org/u/lassoan)\
**Post date:** [September 20, 2021, 2:52pm UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/17 "2021-09-20T14:52:03Z")

</div>

Yes, the labels are “nice”, that’s why we have been holding out until now. However, it has become clear that displaying the labels only in tooltips (as all other software do) is better, because it takes much less space. We now fix the button positions to make the toolbar buttons easier to find.

I see that for new users the labels could save time, and you can enable that with a single line of code (the varying width of the buttons will be fixed in tomorrow’s Slicer Preview Relase):

```python
getModuleGui('SegmentEditor').editor.effectButtonStyle = qt.Qt.ToolButtonTextUnderIcon

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/5/0/50739746cfee81e0a69b2fd400c6d268517561d6.jpeg)

We could make the button style configurable in application settings, but it would be difficult to let users know that the option exists. It would be better to implement alternative solutions to make effect buttons easier to find.

What do you think about the suggestion above of making the icons more similar to commonly-used other software (Paint, Photoshop, Gimp?) - would that be sufficient?

---

<div class="post-metadata">

**Author:** ![pieper](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/pieper/32/8_2.png) [@pieper](https://discourse.slicer.org/u/pieper)\
**Post date:** [September 20, 2021, 4:40pm UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/18 "2021-09-20T16:40:34Z")

</div>

The current tooltips are pretty good, but it could be nice if the buttons had a no-delay mouseover effect that set a label with the effect name, say at the top of the toolbar. That way the information would be readily discoverable without taking much space. Tool tips aren’t as nice because of the initial delay, they are sometimes covered by the mouse pointer, and because they jump around making them a little harder to read.

---

<div class="post-metadata">

**Author:** ![jamesobutler](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/jamesobutler/32/7511_2.png) [@jamesobutler](https://discourse.slicer.org/u/jamesobutler)\
**Post date:** [September 20, 2021, 4:46pm UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/19 "2021-09-20T16:46:54Z")

</div>

Regarding other applications use of tool tips, how do their tool tips behave? What delay is a common value to show? You would of course not want to show it immediately but only during a moment of delayed inspection.

---

<div class="post-metadata">

**Author:** ![rbumm](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/rbumm/32/9404_2.png) [@rbumm](https://discourse.slicer.org/u/rbumm)\
**Post date:** [September 20, 2021, 4:50pm UTC](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649/20 "2021-09-20T16:50:34Z")

</div>

The sidebar of effects is an elegant solution.  
Maybe we could make the label text toggle when the user right-clicks on this particular frame and selects a menu option “button texts”, then save this preference for the next start? New users would certainly benefit from the label texts because the full selection of editor tools can be quite overwhelming, as soon as people are experts they could hide the labels.  
Much of this is personal preference - f.e. I do not like program toolbars very much and prefer flexible, labeled buttons or using a menu.  
The problem with tool text is, that you always get a short but significant time delay to actually see them - in my Slicer installations this is around 3 s

Updating the icons and styling them similarly in a flexible resolution would be great.

[Next page](https://discourse.slicer.org/t/new-segment-editor-layout-vertical-effect-toolbar/19649.md?page=2)