Feature: Improve Mask Painter UI Layout and Usability

[yulewu]

The current Mask Painter panel has several layout and usability issues that are particularly visible in narrow side-panel contexts:

1. Horizontal overflow in the class color list — The 30%/70% HBox split gives the sorting container only ~105px at typical panel widths, causing TagsInput chips to overflow and the "Show all classes" label to truncate to "Show all c...".
2. ToggleButtons for outline/fill are too wide — Each row renders a ToggleButtons at 160px, causing horizontal overflow in the per-class list.
3. Palette tabs always visible — The Save/Load/Manage Tab occupies permanent vertical space even when not in use, contributing to a cluttered, scroll-heavy panel.
4. Output widget for feedback — Uses a console-style Output widget for status/error messages, which looks out of place and doesn't support styled text.
5. No visual sectioning — There are no dividers between the identifier row, the color pickers, and palette management, making the panel hard to scan.
6. "No identifier selected" warning on Save — The Save button is always enabled even before an identifier or name is set, leading to dead-end warning messages.

---

Proposed Changes

1. Fix the class color list layout — vertical, full-width

Replace the 30%/70% HBox split with a vertical VBox. Move TagsInput and Default color above the per-class list at full width:

VBox
├─ HBox: [Label "Class order / visible:"] [Show all □]
├─ TagsInput  (full width)
├─ HBox: [Label "Default color:"] [ColorPicker]
├─ HTML <hr>
└─ VBox (per-class rows, scrollable)
     [□ vis] [■ ColorPicker "ClassName"] [□ fill]
     ...

2. Compact outline/fill toggle

Replace ToggleButtons(options=["outline","fill"], style={"button_width":"70px"}) with a single Checkbox(description="fill", layout=Layout(width="60px")). Saves ~100px per row.

3. Wrap palette management in a collapsed Accordion

palette_accordion = Accordion(children=[color_set_tab], selected_index=None)
palette_accordion.set_title(0, "Palette: Save / Load / Manage")

Takes zero height by default; expands on demand.

4. Replace Output feedback widget with a styled HTML label

# error
feedback_label.value = '<span style="color:orange">⚠️ No identifier selected.</span>'
# success
feedback_label.value = '<span style="color:green">✓ Colors applied.</span>'

5. Two-row top bar

Row 1: [☑ Enable]  [Identifier ▾──────────────────]
Row 2: [Update Colors]  [Apply saved ▾──────]

Moving Enable to the left as the primary toggle, and consolidating Apply saved + saved_sets_dropdown into the action row reduces the need to navigate into the Manage tab for the common apply workflow.

6. Disable Save button reactively

Disable save_button until both a palette name is entered and an identifier is selected. This prevents the current dead-end warning flow.

---

Final Layout

VBox (max_height=600px, overflow_y=auto)
├─ HBox: [☑ Enable] [Identifier ▾──────────────]
├─ HBox: [Update Colors] [Apply: saved_sets_dropdown ▾] [Manage...]
├─ HTML <hr>
├─ HBox: [Label "Class order:"] [Show all □]
├─ TagsInput (full width)
├─ HBox: [Label "Default color:"] [■ ColorPicker]
├─ HTML <hr>
├─ VBox (scrollable per-class rows)
│    [□] [■ ColorPicker "CD4+"] [□ fill]
│    [□] [■ ColorPicker "CD8+"] [□ fill]
│    ...
├─ Accordion (collapsed): "Palette: Save / Load / Manage"
│    └─ Tab: Save | Load | Manage
└─ HTML feedback_label (inline styled)

---

Acceptance Criteria

• TagsInput and Default color render at full panel width without truncation
• Each class row fits within the panel without horizontal scroll (vis checkbox + ColorPicker + fill checkbox)
• Palette Save/Load/Manage section is collapsed by default and expands on click
• Status and error messages render as styled inline text (not console output)
• Enable checkbox is the leftmost, most prominent control in the top bar
• Save set button is disabled until both an identifier is selected and a palette name is entered
• No regression to existing palette save/load/apply/delete behavior

---

Files Affected

• ueler/viewer/plugin/mask_painter.py — UiComponent.__init__(), MaskPainterDisplay.initiate_ui(), MaskPainterDisplay.on_identifier_change(), MaskPainterDisplay._log()
• mask_painter.py — UiComponent.__init__(), MaskPainterDisplay.initiate_ui(), MaskPainterDisplay.on_identifier_change(), MaskPainterDisplay._log()

[yulewu]

Update Summary: Mask Painter UI redesign (commit df0303e) #89

Mask Painter side panel had horizontal overflow in narrow panel contexts, always-visible palette tabs consuming vertical space, console-style feedback, and a Save button that was always enabled regardless of state.

---

Actions Taken

• Full-width class color layout:
  Replaced the 30%/70% HBox split with a vertical VBox (colors_layout): TagsInput and default ColorPicker now sit above the per-class scroll area at full panel width, eliminating chip overflow and label truncation.
• Compact fill/outline toggle:
  Replaced ToggleButtons(options=["outline","fill"]) with Checkbox(description="fill", layout=Layout(width="60px")) per class, saving ~100 px per row.
• Collapsed palette accordion:
  Wrapped Save/Load/Manage Tab in Accordion(selected_index=None) so it is hidden by default and expands on demand.
• Inline HTML feedback:
  Replaced Output widget with HTML label (feedback_label) rendering ✓ (green) or ⚠️ (orange) styled inline text.
• Two-row top bar:
  Row 1: enabled_checkbox + identifier_dropdown. Row 2: update_button + apply_saved_button + saved_sets_dropdown.
• Reactive save-button disable:
  Added _refresh_save_button_state() method, observed on set_name_input.value and identifier_dropdown.value; save_button.disabled=True until both are set.
• Test updates:
  Updated tests/test_mask_painter_mode_visibility.py to use Checkbox-based mode controls and corrected all related assertions.

---

Files Changed

• ueler/viewer/plugin/mask_painter.py — UiComponent.__init__, initiate_ui, on_identifier_change, save_current_color_set, overwrite_saved_color_set, apply_colors_to_masks, _load_color_set, _log, _refresh_save_button_state (new); imports updated
• tests/test_mask_painter_mode_visibility.py — All ToggleButtons replaced with Checkbox bool semantics; test_save_and_load_modes_and_visibility round-trip corrected

---

Tests

python -m unittest tests.test_mask_painter_mode_visibility tests.test_mask_color_sets tests.test_mask_color_overlay -v

• ✅ All 35 tests passed

[yulewu]

Update Summary: Mask Painter anywidget drag-sortable class list (commit a47ed0b) #89 follow-up

Replaced the TagsInput + per-class VBox layout with a single anywidget-based drag-sortable row list where each row integrates the drag handle, visibility checkbox, color picker, class name, and fill checkbox in one compact component.

---

Actions Taken

• New MaskClassListWidget (anywidget):
  Created ueler/viewer/plugin/mask_class_list_widget.py. Traitlets: class_order (list), class_colors / class_visible / class_fill (dicts), default_color. ESM JavaScript renders one <div class="mask-cl-row"> per class with drag handle (draggable), vis <input type="checkbox">, color <input type="color">, name label, and fill checkbox. HTML5 drag API reorders rows and syncs class_order. Targeted DOM sync (not full rebuild) for color/vis/fill traitlet changes.
• _push_to_widget() / _pull_from_widget(change):
  Added bidirectional sync between the anywidget traitlets and the backing ipywidgets. _syncing flag prevents observer loops.
• Simplified logic:
  on_sorting_items_change, on_show_all_toggle, _handle_selection_transition reduced to stubs. _get_visible_classes uses class_list_widget.class_order with a selected_classes fallback for tests. _load_color_set and _set_default_color stripped of hidden_color_cache / sorting_items_tagsinput manipulation.
• Backward compat:
  sorting_items_tagsinput, show_all_checkbox, color_picker_box, selected_classes, hidden_color_cache kept as attributes/widgets (not rendered) so existing tests that set them directly still work.
• Test update:
  tests/test_mask_color_sets.py — replaced selected_classes / hidden_color_cache assertions with class_list_widget traitlet assertions.

---

Files Changed

• ueler/viewer/plugin/mask_class_list_widget.py — new file: MaskClassListWidget anywidget + HasTraits fallback
• ueler/viewer/plugin/mask_painter.py — import added; on_identifier_change, _get_visible_classes, _load_color_set, _set_default_color, _refresh_color_picker_display, UiComponent.__init__ updated; _push_to_widget, _pull_from_widget added; stubs for removed methods
• tests/test_mask_color_sets.py — updated test_load_applies_identifier_and_default_color assertions

---

Tests

python -m unittest tests.test_mask_painter_mode_visibility tests.test_mask_color_sets tests.test_mask_color_overlay -v

• ✅ All 35 tests passed

[yulewu]

Implement "Add item" Functionality

The mask painter UI currently displays all classes present in the dataset. For large datasets, this becomes overwhelming. The preferred workflow is to start with a small subset of classes and expand the selection as needed.

To address this, we should implement an "Add item" button that lets users introduce a new class by specifying its name. Added classes should also be removable, giving users full control over the active class list.

[yulewu]

Update Summary: Mask Painter Add/Remove class feature (commit ce1b348) #89 follow-up

Implemented the "Add/Remove class" feature for the Mask Painter: users now start with ≤6 active classes and can dynamically expand or contract the active set via inline anywidget JS controls.

---

Actions Taken

• New traitlets in MaskClassListWidget:
  Added available_classes: List[str] (classes in the dataset but not currently active), add_requested: str (JS→Python signal when Add button clicked), remove_requested: str (JS→Python signal when × button clicked). All sync=True; also added to the HasTraits fallback for test environments.
• JS UI changes:
  Each class row now has a × (mask-cl-remove) button that signals removal. A footer div.mask-cl-add-row below the scroll area shows a <select> populated from available_classes and a + Add button. The select shows a "(all classes active)" placeholder and the button is disabled when available_classes is empty.
• _active_classes attribute:
  Added self._active_classes: List[str] to MaskPainterDisplay. on_identifier_change caps the initial active set to classes[:min(len(classes), 6)].
• _push_to_widget() updated:
  Derives active from _active_classes, computes available = [cls not in active_set], filters color/vis/fill dicts to active set, and sets w.available_classes.
• _pull_from_widget fixed:
  class_order change now updates self._active_classes (was incorrectly updating self.current_classes).
• New observers:
  _on_add_requested appends class to _active_classes and calls _push_to_widget(); _on_remove_requested removes class and calls _push_to_widget().
• _load_color_set / on_cell_table_change updated:
  Both set self._active_classes appropriately on palette load and table reset.
• _get_hidden_classes() simplified:
  Returns all classes in class_color_controls not in _get_visible_classes(), so inactive (non-active) classes automatically receive the "" sentinel on next apply.
• Tests:
  Updated _make_painter fixture; added TestMaskPainterAddRemoveClass with 4 new tests.

---

Files Changed

• ueler/viewer/plugin/mask_class_list_widget.py — 3 new traitlets, CSS for add-row and remove button, JS × button per row, buildAddRow/rebuildAddOptions functions, new model observers
• ueler/viewer/plugin/mask_painter.py — _active_classes attribute, updated on_identifier_change, _push_to_widget, _pull_from_widget, _load_color_set, on_cell_table_change, _get_hidden_classes; new _on_add_requested, _on_remove_requested methods; new observers wired in __init__
• tests/test_mask_painter_mode_visibility.py — _make_painter fixture updated; TestMaskPainterAddRemoveClass (4 tests) added

---

Tests

python -m unittest tests.test_mask_painter_mode_visibility tests.test_mask_color_sets tests.test_mask_color_overlay -v

• ✅ All 39 tests passed

[yulewu]

Update Summary: Mask Painter "Only specified" toggle (commit 0a115b8) #89 follow-up

Added an "Only specified" toggle to the Mask Painter: when ON, classes still at the default color are filtered out of the active class list and receive the "" sentinel on the next apply; when OFF, all classes are restored to active.

---

Actions Taken

• only_specified_checkbox added to UiComponent:
  A Checkbox(value=False, description="Only specified") placed inline with default_color_picker in colors_layout.
• _on_only_specified_toggle(change) method:
  When change["new"] is True, filters _active_classes to classes where colors_match(picker.value, default_color) is False. When False, restores all current_classes. Calls _push_to_widget() to sync.
• Observer wired in __init__:
  only_specified_checkbox.observe(self._on_only_specified_toggle, names="value").
• Tests:
  Added TestMaskPainterOnlySpecified with 4 tests to tests/test_mask_painter_mode_visibility.py. Tests call _on_only_specified_toggle({"new": True/False}) directly because the bootstrap stub's Widget.observe() is a no-op — real ipywidgets traitlet observers are not available in the test environment for Checkbox-based callbacks.

---

Files Changed

• ueler/viewer/plugin/mask_painter.py — only_specified_checkbox in UiComponent.__init__, updated colors_layout, new _on_only_specified_toggle method, observer registered in MaskPainterDisplay.__init__
• tests/test_mask_painter_mode_visibility.py — TestMaskPainterOnlySpecified (4 tests) added; _make_painter_with_custom_colors fixture added

---

Tests

python -m unittest tests.test_mask_painter_mode_visibility tests.test_mask_color_sets tests.test_mask_color_overlay -v

• ✅ All 43 tests passed

Reply 2 to issue #89: remove classes with default color from the UI

The mask painter UI can become cluttered when many classes are present, especially if some classes are not of interest to the user. To improve usability, we should allow for removing classes that are currently set to the default color from the class list. To do so, we can introduce a "only specified" toggle that filters out any class whose assigned color matches the default color. This way, users can focus on the classes they have customized while still having the option to reveal all classes when needed.