[Lens] Annotations design review

[mbondyra]

Summary

Tooltip design improvements

These two are done:

✅ Rather than grouping under annotation names, display in chronological order.
✅ remove header

But there are some problems with the requirements so I tried to work around them different way.
❓ width of the tooltip is limited by elastic-charts (256px) so I had to move the date below the annotation name instead of showing the two in the same row.

❓Apply some form of truncation to prevent the tooltip’s height from growing taller than the viewport.

Truncation is a complex problem in this case, and I am afraid we might not able to implement it before Tuesday. For now:
- I added a box shadow to indicate there’s more to show
- I limited annotations to 5 instead of real truncation. Because each annotation can have a lot of extra fields, we cannot easily predict how many we can squeeze. This will sometimes display very small tooltip, but it works in many cases.

Annotation query input

❓ Would it be possible to auto-focus the "Annotation query" field when "Query" is selected for "Placement type"?

It has been changed to allow the bigger input, let me know what you think!

Field input preserving after changing text decoration

⌛ If a field is selected for the "Field" type "Text decoration", changing to "None" or "Name" and then returning back to "Field" causes the previous selection to be lost. Can we restore the user's previous selection instead of wiping it out?

I will work on it on the separate PR - sadly, it's bigger than it seems.

The rest

✅ Can we lowercase the "T" in the "Placement Type" label so it reads as "Placement type"?
✅ Can we lowercase the "D" in the "Static Date" button-group button so it reads as "Static date"?
✅Can we rename "Query" to "Custom query" in the button-group to match the designs?
✅The margining between "Annotation query" and "Target date field" is currently being overridden to be 8px. Can we remove these overriding styles so that it returns to the default 16px margining?
✅For the field selector in "Text decoration" of type "Field", can we change the current "Field" text placeholder to read "Select a field" to match the designs?
✅When selecting "Field" for "Text decoration", the visualization shows as if the "Name" decoration was chosen until the user selects a field to display. I think we should be treating the visualization as if "None" is selected until the field is selected instead.
✅In my testing, toggling on "Hide annotation" resulted in an error on the visualization: “[layeredXyVis] > [event_annotations_result] > [fetch_event_annotations] > [event_annotation_group] > event_annotation_group requires the "annotations" argument”
✅Would it be possible to remove the bolding from the "None selected" text when "Show additional fields" is empty?
✅In the field selectors for "Show additional fields", can we change the placeholder text from "Field" to "Select a field" to better match the designs?
✅Can we add 4px margin above the "Add field" button for "Show additional fields"?
✅For the field drag-and-drop interface in "Show additional fields", can we adopt a similar style there as we've done for other DND areas lately for consistency (with draggable rows contained in gray box that turns green during a drag event)? See the multi-field top values interface for an example.

[elasticmachine]

Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors)

[flash1293]

Tested and everything works well, LGTM

[MichaelMarcialis]

Thanks for making those changes, @mbondyra. This looks really great! Thanks for going the extra mile to do that quick pass on tooltips too. I like the changes you've made to them. Any final recommendations to their styling has been added as a code comment below.

Otherwise, here's my list of comments for your review:

• It looks like we switched back to using the popover-based query input, rather than the previous iteration that used an inline query input that automatically increased its height on focus. Out of curiosity, what was the reason for the switch? I personally liked the version without the popover.

• With the current popover-based query input, I noticed that there is no autocomplete that appears when focusing or typing in the input. I assume this is a bug, as it used to appear in other areas of Lens as well (such as the "Filter" quick function), but no longer appears to do so now.

• The padding and margining seem a bit off in the "Show additional fields" container (compared to the other DND field containers, like multi-field top values). There should be 8px of padding on the container and 8px of margining in between the field rows. Would that be possible to fix?

• The green drop zone that appears during drag events for the "Show additional fields" container doesn't appear to have the rounded corners that match the ones shown on the originating gray container. Possible to add?

• When there is only one field in "Show additional fields" (or any other similar DND interface in Lens), would it be possible to disable the ability to drag it and also apply a disabled color and cursor to the drag handle? No point in allowing users to reorder a single item.

[mbondyra]

Thank you for your review and valuable comments!

It looks like we switched back to using the popover-based query input, rather than the previous iteration that used an inline query input that automatically increased its height on focus. Out of curiosity, what was the reason for the switch? I personally liked the version without the popover.

That's because it was very short for the queries and with couple of words we couldn't see what the user types. We can try to go back, but I think we have to address this problem. Let me know if you prefer this version to be introduced:

With the current popover-based query input, I noticed that there is no autocomplete that appears when focusing or typing in the input. I assume this is a bug, as it used to appear in other areas of Lens as well (such as the "Filter" quick function), but no longer appears to do so now.

✅ That's not the bug from this PR and it's fixed in another PR (this one: #140313)

The padding and margining seem a bit off in the "Show additional fields" container (compared to the other DND field containers, like multi-field top values). There should be 8px of padding on the container and 8px of margining in between the field rows. Would that be possible to fix?

✅ I tried to align it, let me know if I understood correctly.

The green drop zone that appears during drag events for the "Show additional fields" container doesn't appear to have the rounded corners that match the ones shown on the originating gray container. Possible to add?

✅ Done!

When there is only one field in "Show additional fields" (or any other similar DND interface in Lens), would it be possible to disable the ability to drag it and also apply a disabled color and cursor to the drag handle? No point in allowing users to reorder a single item.

✅ Fixed it for annotations for now, will keep iterating for other elements tracking it in this issue: #140940

[MichaelMarcialis]

Thanks for making those changes, @mbondyra. This looks great. For your re-review, I've left you a few additional comments below, but nothing worth holding you up over. Assuming you can address them, I'm approving now.

Also, is it possible for us to slightly increase the max-width on the visualization tooltips? If not, no worries (since it's all going to change with the forthcoming tooltip updates). But if it's easy, it might be nice to give some extra space to those additional field key/value rows.

[mbondyra]

Regarding the width of the tooltip, it's unfortunately controlled by charts so cannot be modified from Kibana sourcecode.
I mentioned it in the main description. Thank you for the re-review!

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 3d7b952

Failed CI Steps

• FTR Configs #8

Test Failures

• [job] [logs] FTR Configs #8 / Cases cases deletion sub privilege create two cases logging in with user cases_all_user single case view User cases_all_user can delete a case while on a specific case page

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
expressionXY	118.4KB	119.5KB	+1.2KB
lens	1.2MB	1.2MB	+933.0B
total			+2.1KB

Unknown metric groups

API count

id	before	after	diff
expressionXY	154	153	-1

History

• 💔 Build #73454 failed a7e7aef
• 💚 Build #73352 succeeded 5e81a3e
• 💔 Build #72994 failed 4904594
• 💔 Build #72988 failed 45f3114
• 💔 Build #72985 failed 75b917b
• 💔 Build #72976 failed fc21cab

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream