[Lens] Add more parameters for the manual annotations

[darnautov]

Lens embeddable with manual annotations worked out nicely overall with the Change Point Detection prototype, but some additional control over the annotation marker is still needed:

• Set a custom width for the label to prevent text from truncating
• Set additional tooltip content

[elasticmachine]

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

[MichaelMarcialis]

Thanks for the issue, @darnautov!

Set a custom width for the label to prevent text from truncating

I agree that the current truncation behavior of the annotation labels is something that could definitely be improved. I believe right now, we support a maximum of four annotation labels to be shown in any given XY visualization. Additionally, I believe the max width for these labels are hard-coded to be very small, regardless of overall annotation label quantity or proximity to other labels. While allowing users to customize the label max-width would offer a way for users to fix the situation you've highlighted in your screenshot, I'm not super keen on putting the onus on the user to make such changes (and thus adding more complexity to the Lens interface in the process).

Instead, I'd love for the annotation label truncation to be dynamic. Ideally, we'd be able to detect both the quantity of annotation labels and their proximity to one another and use that information to dynamically apply an appropriate max-width and determine if/when labels would need to be hidden outright (in extreme situations where there is an overwhelming number of annotations present). CCing @stratoula, @markov00, and @gvnmagni as they can likely speak more on whether this would be a good approach and what our current technical capabilities are.

Set additional tooltip content

Could you elaborate on the sort of additional content you are looking to include in the annotation tooltips? We were originally planning on including the ability for users to select additional fields (and their subsequent values) to be shown in the annotation tooltip. Would such an enhancement address your use case? Or are you looking to include content that is more freeform in nature (ex. content entered via a textarea with support for fields/variables)? CCing @formgeist here, as I believe he has previously mentioned Observability having a desire to support this more freeform style of content to be added into annotation tooltips.

[darnautov]

hi @MichaelMarcialis,

In our case, the annotation layer is manual, here you can see how it is defined. The value comes from an agg request outside of the Lens embeddable component, so field selection isn't going to work for us. Having an additional property, e.g. tooltipContent that receives a react component should be sufficient.

[MichaelMarcialis]

Thanks, @darnautov! It sounds like the freeform content direction I was describing above would indeed be a better fit for your needs. Do you have any timelines that you're working within to have such a feature available in Lens' annotation implementation?

@ninoslavmiskovic, @stratoula, @mbondyra: Similarly, do we have an estimate as to when we were planning on including these more advanced tooltip configurations? Assuming we all agree with this proposed change in direction (from selecting a one or more fields to display in a tooltip to instead use more freeform content), this will likely require some addition design thought on my part. I'm happy to created updated wireframes that account for this change. Just let me know how I should plan to prioritize it against current design requests.

[stratoula]

@MichaelMarcialis so far about the tooltip (not only for annotations but in general) we have the following requests:

• Display multiple metrics (that are not used in the chart) [Lens] Allow extra metrics in the tooltip #106024
• A freeform text

I think we should create a design that covers both cases, wdyt? Other teams want to display their own content (and do some calculations on their side) and other teams just want to choose specific aggs as metrics (and let Lens to do the calculation).

[ninoslavmiskovic]

I am in for the most scalable design, where we think in solutions and other teams use cases.

[MichaelMarcialis]

I think we should create a design that covers both cases, wdyt? Other teams want to display their own content (and do some calculations on their side) and other teams just want to choose specific aggs as metrics (and let Lens to do the calculation).

@stratoula, @ninoslavmiskovic: Based on a side Slack conversation that Stratoula and I had, I agree that it makes sense to support both. We can likely achieve this in one of two ways.

Two separate input areas

• User supplies one or more field/function/format pairs to show their value in the tooltip.
• User supplies plain text or Markdown to display static text in the tooltip.

Single input area

• User supplies both text and formula syntax within a single input. For example, imagine something like a textarea that supports adding formulas in curly braces (possibly with autocomplete) and would allow the following: Hello, this thing has {median(bytes)} bytes!

Do ya'll have a preference as to which direction would be more ideal for our needs? I tend to like the single input direction for the sake of reducing the overall configuration flyout UI and ultimate flexibility, but not sure if such a direction aligns with our technical capabilities.

Also, do we have a rough estimate as to when we were planning to add such tooltip enhancements to the annotation configurations? And would ya'll like me to prioritize updating the annotation designs for this request against the current list of Lens design priorities?

[stratoula]

We discussed with @dej611 about the technical difficulties. We both find it a good idea, we do have some concerns about:

• performance (the most important one)
• number of metrics
• autocomplete can be tricky

so we vote to have a spike first to see how we can marry formula and markdown.

[formgeist]

Or are you looking to include content that is more freeform in nature (ex. content entered via a textarea with support for fields/variables)? CCing @formgeist here, as I believe he has previously mentioned Observability having a desire to support this more freeform style of content to be added into annotation tooltips.

Sorry for the delayed response, but yes - we imagine a solution where the user can enter freeform text to leave a "note" for their team on a chart. We also have auto-generated annotations for deployments today which just shows the service.version. So both capabilities would be great to have for our use-cases.

[darnautov]

hey @elastic/kibana-visualizations 👋🏻 do you have any updates on the issue? or do you have a target release version in mind?

[stratoula]

@darnautov I am pinging @ninoslavmiskovic as he is responsible for the roadmap of the team.

[ninoslavmiskovic]

@darnautov Thank you for your input. It is much appropriated. We are going to invest in tooltips and annotations moving forward, and will take your input in consideration. In 8.7 we are adding "Adding filter from tooltips on charts" and are planning on adding capabilities for annotation groups in the near future. Currently there is no target release for this particular request and our near term focus is on other key initiatives. Still, we will update this issue when there are relevant updates.