data-menu: UI tweaks

[kecnry]

Description

This pull request implements UI tweaks to the data-menu and API hints (app-wide) after consulting with @Jenneh. These changes include:

• adjust color on orientation dropdown API hint to have more contrast with blue background
• show quotes and brackets around API hints for select dropdowns app-wide. This resulted in creating two new reusable components - plugin-select and glue-state-select. The goal in general is to make the API hints as directly "copy-pasteable" as possible. Additional work can be done to text input fields in the future and maybe even a button or keyboard shortcut to copy the full code snippet to clipboard while hovering over an element with an API hint.
• margin on layer selection to make it more obvious when all are selected (addresses comment by @bmorris3: Framework for legend data menu #3254 (comment))
• remove "..." on tooltips which otherwise appear as if they were truncated
• additional heading on header when orientation is present
• move API hint to access plugin API with new description (not shown below)
• custom icon for API hint toggle (not shown below)

To enable for testing (note: both this and the _obj will be removed when making the data-menu public):

for viewer in viz.viewers.values():
    viewer._obj.data_menu._obj.dev_data_menu = True

Before:

After:

Change log entry

• Is a change log needed? If yes, is it added to CHANGES.rst? If you want to avoid merge conflicts,
  list the proposed change log here for review and add to CHANGES.rst before merge. If no, maintainer
  should add a no-changelog-entry-needed label.

Checklist for package maintainer(s)

This checklist is meant to remind the package maintainer(s) who will review this pull request of some common things to look for. This list is not exhaustive.

• Are two approvals required? Branch protection rule does not check for the second approval. If a second approval is not necessary, please apply the trivial label.
• Do the proposed changes actually accomplish desired goals? Also manually run the affected example notebooks, if necessary.
• Do the proposed changes follow the STScI Style Guides?
• Are tests added/updated as required? If so, do they follow the STScI Style Guides?
• Are docs added/updated as required? If so, do they follow the STScI Style Guides?
• Did the CI pass? If not, are the failures related?
• Is a milestone set? Set this to bugfix milestone if this is a bug fix and needs to be released ASAP; otherwise, set this to the next major release milestone. Bugfix milestone also needs an accompanying backport label.
• After merge, any internal documentations need updating (e.g., JIRA, Innerspace)?

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 88.80%. Comparing base (33edc03) to head (b9e3a22).
Report is 6 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3310      +/-   ##
==========================================
- Coverage   88.81%   88.80%   -0.01%     
==========================================
  Files         125      125              
  Lines       19036    19118      +82     
==========================================
+ Hits        16906    16978      +72     
- Misses       2130     2140      +10     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[bmorris3]

Minor Q: if you adjust the orientation selection, the orientation dropdown+label get the accent color as though they're in focus/selected, until you click another item in the data menu:

imviz-dm-ui.mov

Should it do that?

[bmorris3]

(This comment shouldn't block this PR/ticket.)

In developing the orientation plugin, we decided to show the "preset" orientation layers in the data menu only after they've been created by clicking on the preset buttons in the plugin:

imviz-dm-ui-2.mov

We could expose each preset as an option in the new data menu, and only after each option is selected would we could create the corresponding WCS-only layer, load it into the viewer, and link it. Pros: this would save the users some clicks and scrolling to the orientation plugin. Cons: this would make it less clear which selectable options in the data menu are already-loaded data entries and which ones could be created on selection.

[bmorris3]

When I create a subset and toggle its visibility from the data menu, the layer icon remains hashed as though it shouldn't be visible. (Maybe not related to this PR, just logging it.)

imviz-dm-ui-3.mov

[bmorris3]

This all looks good, so I'm leaving an approval. I left a few videos above with behavior that should be fixed in this epic, but not necessarily this PR.

[bmorris3]

Just writing in to say I appreciate these changes.

[bmorris3]

Impressive, I never would have caught a matplotlibian-slip like this.

[kecnry]

Cami actually had during a demo, so I made sure to do a full search for plt. in the code 😂

[bmorris3]

Again, jeez.

[kecnry]

if you adjust the orientation selection, the orientation dropdown+label get the accent color as though they're in focus/selected, until you click another item in the data menu

let me see if I can override that

We could expose each preset as an option in the new data menu, and only after each option is selected would we could create the corresponding WCS-only layer, load it into the viewer, and link it.

I think we had even planned this as future work for the dropdown in the plugin itself. I'd still be in favor of that (and copying the same to the data menu).

When I create a subset and toggle its visibility from the data menu, the layer icon remains hashed as though it shouldn't be visible.

Yes, I believe this is related to the state issues @rosteen is investigating 🤞 Definitely something we want fixed before we swap out the old data menu with this.

[kecnry]

remaining TODO before merge:

• update API hints icon from @Jenneh with styling of "lock" button to match toolbars in plugins (semi-transparent orange)
• dark theme support for orientation dropdown and button
• try to address data-menu: UI tweaks #3310 (comment) - it seems that the primary--text class is being added by vue, and we need to prevent that from changing color or use something that looks better. This color is coming from vue setting to a blue which is then inverted by us because its on a dark toolbar.

[gibsongreen]

The updates look great here, I like the API icon and changes to the lock icon, the boldening with data items selections, dark-mode, and so on. Did see the known subset issue(s) but keeping that out of this review for later efforts. There were two things I noticed in testing, the second is likely out of scope and just an idea to reduce user-click.

1. When linked by pixel, should the Orientation label be above the button?

2. If linked by pixel, and the data loaded has WCS, would it be too much real-estate to add another button next to the existing one for the option to WCS link in the data menu or do we want to enforce user actions like this through the plugin itself?

[kecnry]

@gibsongreen I implemented your first suggestion - let's hold off on the second to see if there is demand for it and design it. I think there are competing desires for convenience but also not having multiple places/ways to do the same thing.