[ML] Add annotation markers to the Anomaly Swimlane axis

[qn895]

Summary

This PR addresses #93463 and adds annotation markers to the Anomaly swimlane within the Anomaly Explorer page.

Checklist

Delete any items that are not applicable to this PR.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support

[walterra]

Noticed that with just a few annotations and without further labeling it might not be that obvious for users what they are looking at:

Here's a quick&dirty suggestion how to improve:

• Remove the duplicate anomaly levels legend and date labels
• Move annotations to the top with an "Annotations" labels similar to "Overall".
• Style the row with annotations slightly similar to the swimlanes so it's more obvious to users that they are looking at another "row" of data. That gray border is really just a quick suggestion, maybe it's also enough to make it more subtle, e.g. just a line below the annoation markers.

[walterra]

Wondering if we should rename everything related to allAnnotations to overallAnnotations. "all" might be a bit misleading since ANNOTATIONS_TABLE_DEFAULT_QUERY_SIZE = 500 limits how many annotations we fetch and it's not really "all".

[qn895]

Updated here bc00e98 (#97202)

[peteharverson]

Agree with @walterra that the annotations would benefit from a label, and I like his proposed styling with border (or single line).

I guess that the legend is part of the swim lane chart, so it may be more practical to stick with your current layout where the annotations are below the Overall swim lane. The Overall timeline is probably more important information that the annotations, so again it makes sense to make that the top element in the view.

[qn895]

@walterra @peteharverson I have updated the styling to include the border and label on the y axis here. The result is definitely much more pleasing!

[elasticmachine]

Pinging @elastic/ml-ui (:ml)

[peteharverson]

Tested and overall looks good. Just found a few styling / range issues.

[peteharverson]

Does the end of the annotation chart need adjusting? It always seems to extend past the swim lane for me:

[qn895]

After discussing with Dima, we think the best way to fix this issue is through some modifications with the elastic-charts component itself. We can provide a callback function that exposes the positions of the heatmap cells whenever the swimlane is resized. Added this to the meta issue for Annotations.

[peteharverson]

Tested latest edits and LGTM. Would be good to align the ends of the annotation bar and the swim lanes, but it is only off by a few pixels so can be addressed separately.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 55b5362
• Storybooks Preview

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
ml	1796	1802	+6

Async chunks

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

id	before	after	diff
ml	6.0MB	6.0MB	+64.3KB

History

• 💚 Build #121003 succeeded ce159b0
• 💚 Build #120190 succeeded f213802
• 💔 Build #120060 failed 85401ba
• 💔 Build #119857 failed 7a5bedf

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

cc @qn895

[kibanamachine]

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.