Swimlane visualization for anomalies

[katrin-freihofner]

Part of the user flow discussed in this issue is a new view. This view can be split into multiple parts (ordered by priority):

1. table with anomalies (very bottom of the view)
2. swimlane visualization (top of the view)
3. details chart (middle part)

This issue focuses on the swimlane.

Prototype: https://www.figma.com/proto/T08kdh6YQcVCx1tzljqNHF/Logs-ML-Integration?node-id=714%3A816&viewport=1023%2C1279%2C0.6371562480926514&scaling=min-zoom

Swimlane Requirements:

• calculate bucket size (set min-size to ensure appropriate click target size)
• select bucket
• hover over a bucket
• show tooltips
• focus state + accessible with the keyboard
• coloring according to anomalies + accessible version (different border/shape)
• multi-select buckets (not possible in current ML swimlane)
• adjust height of swimlane/heatmap

Questions to address:

• What is the number of datasets is 10+?
• What does the interaction on the swimlane look like (multi-select)?
• How can a selection be reset?
• What do the colored boxes in the swimlane represent?
• When is a box red/orange...?
• Which severity levels are shown?
• What if the timeframe is very small/very large?

This is an example of the initial wireframe

[elasticmachine]

Pinging @elastic/observability-design (design)

[sophiec20]

For reference, currently working on embeddable swimlane elastic/kibana#64056

[katrin-freihofner]

As I don't see this on our short-term roadmap I'm going to close this issue for now.