Tighten up design of channel settings

[frasercl]

Use Case

The expanded channel settings menu could use a little bit of design polish to clarify margins between elements. In particular:

• The isosurface settings sliders use ant's Slider component while the colorize slider uses Nouislider.
• Text elements like the colorize slider's tooltip and the opacity slider's title have too little bottom margin and intersect with the elements below them.
• The amount of empty space to the right of controls is inconsistent.

Screenshot:

Solution

Modify the appearance of this component to be more consistent with the design of the rest of the app. Work from guidance and feedback from @lynwilhelm if she has the bandwidth.

Design Link: https://www.figma.com/file/yGTPga2j961NKfQT7xTird/2023-Sept-Settings-Redesign?type=design&node-id=1%3A2&mode=dev

[lynwilhelm]

Yes, let me know if you need any input! @toloudis @frasercl Do we want to include the updated designs I have for the checkboxes and settings in this work?

It's shown in the panel settings design file: https://xd.adobe.com/view/904d6444-a800-48b6-8844-4f6f116d85ab-c51e/

Screenshot:

[toloudis]

@lynwilhelm I agree with including the updated designs you mentioned above and we should get this on the ux backlog, just to have those controls cleaned up and/or styled. This section of the ui gets into some interesting questions of what controls are actually needed, and are they really effective as they are, but maybe the first pass can just be an improved layout. I don't know.

[toloudis]

Background

We have done a big overhaul of the styling of the viewer, with an eye toward making it usable as a standalone app, and also embeddable in other environments like CFE or jupyter notebook. There is one area of the user interface that has not been re-examined yet.

User needs statement(s) The channel settings look less polished than the rest of the user interface. The controls within the channel settings sometimes have confusing interactions.

Size ??

Requirements When channel settings are opened, they have a consistent and clean appearance with the rest of the viewer.

Deliverables High fidelity design for Channel Settings. (An optional / bonus deliverable is a rethinking of what the controls do and how they interplay.)

Stakeholder(s) @frasercl @toloudis

Timeline ??

Notes

[toloudis]

I'm thinking we should revisit this for a possible revamp of the transfer function editor, colorize slider, opacity etc. Driving factor there is that it's extra complexity and most scientific users won't touch all those controls. Here are a couple of notes.

• most scientists just want to set min/max and have a couple of buttons that make good choices of min/max (like auto98 and autoij)
• colorize is still interesting for auto-assigning different colors in segmentation images
• opacity is also still a thing here

[lynwilhelm]

@toloudis I think I'm done with this. Sorry it dragged on so long! PLease let me know if I missed providing anything in the designs and I can add it. Design link above and here: https://www.figma.com/file/yGTPga2j961NKfQT7xTird/2023-Sept-Settings-Redesign?type=design&node-id=1%3A2&mode=dev

Who will be implementing this? Feel free to assign this ticket to them or I can!