Notebook Annotations UI usage of hover is problematic

[charlesh88]

Summary

Current approach of only showing delete buttons on hover over tags applied to a Notebook entry can result in a game of whack-a-mole as the Add Tag button gets moved due to wrapping from increased widths being applied to currently applied tags.

Expected vs Current Behavior

The layout of tag elements and the Add Tag button shouldn't be changed on hover.

Steps to Reproduce

1. Add a few tags to a Notebook entry.
2. Set the width of the Inspector such that the "+ Add Tag" link button is near the right edge.
3. Hover over the annotations, and try to use the Add Tag button - note that it can jump around.

Solution Notes

Slide the Remove "X" button over the existing text without changing the overall width, and dim that text down.

Also, do apply a dropshadow of the tag color to the remove button, something like
style="box-shadow: #0000ff 0 0 2px 1px"; for a tag that's blue. That will prevent the label text from showing through the "X" part of the circle X icon. This would probably be best as a new computed property per tag. Ping @charlesh88 for help with this.

Environment

• Open MCT Version: 2.1.6
• Deployment Type: all
• OS:
• Browser:

Impact Check List

• Data loss or misrepresented data?
• Regression? Did this used to work or has it always been broken?
• Is there a workaround available?
• Does this impact a critical component?
• Is this just a visual bug with no functional impact?
• Does this block the execution of e2e tests?
• Does this have an impact on Performance?

Additional Information

[rukmini-bose]

Testing Instructions

1. Navigate/ create a Notebook and add tags to an entry.
2. After tags have been added, hover over the tags and ensure the following: (a) the width of the tag does not change (b) the opacity of the tag name increases and allows for the remove button to appear more prominently.
3. Add many tags and play around with it, and ensure that the "add tag" button doesn't jump around. Change the width of the inspector too and make sure that the "add tag" button is easily accessible.

[unlikelyzero]

Re-opening due to flake introduced in the e2e tests.
Please retest

[michaelrogers]

Fix verified during testathon 03/14/2023.

[jvigliotta]

Verified Fixed - Testathon Pi Day - 23