[ML] Add annotation markers to the Anomaly Swimlane axis by qn895 · Pull Request #97202 · elastic/kibana

qn895 · 2021-04-15T03:35:46Z

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 · 2021-04-15T10:29:43Z

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 · 2021-04-15T10:35:22Z

      tap(explorerService.setChartsDataLoading),
      mergeMap(
        ({
+          allAnnotations,


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".

Updated here bc00e98 (#97202)

peteharverson · 2021-04-15T11:20:08Z

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.

…allAnnotations

qn895 · 2021-04-15T16:30:02Z

@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 · 2021-04-15T16:30:07Z

Pinging @elastic/ml-ui (:ml)

peteharverson

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

peteharverson · 2021-04-19T10:17:38Z

+      chartElement.selectAll('*').remove();
+
+      const startingXPos = Y_AXIS_LABEL_WIDTH + 2 * Y_AXIS_LABEL_PADDING;
+      const endingXPos = startingXPos + chartWidth - Y_AXIS_LABEL_PADDING;


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

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.

…imlane

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 · 2021-04-20T18:33:24Z

💚 Build Succeeded

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 · 2021-04-20T18:36:47Z

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

…7708) Co-authored-by: Quynh Nguyen <43350163+qn895@users.noreply.github.com>

qn895 added 6 commits April 14, 2021 15:37

[ML] Add annotation

2101c11

[ML] Clean up

af34336

[ML] Clean up load all annotations

e942924

Merge upstream/master into branch

d28c594

Fix allAnnotations

df8f981

Remove unrelated change

7a5bedf

qn895 added release_note:enhancement :ml Feature:Anomaly Detection ML anomaly detection v8.0.0 v7.13.0 labels Apr 15, 2021

qn895 requested review from darnautov, peteharverson and walterra April 15, 2021 03:35

qn895 self-assigned this Apr 15, 2021

walterra reviewed Apr 15, 2021

View reviewed changes

qn895 added 2 commits April 15, 2021 11:02

[ML] Add annotation border, label text, rename allAnnotations -> over…

bc00e98

…allAnnotations

[ML] Update annotation label styling

85401ba

qn895 marked this pull request as ready for review April 15, 2021 16:30

qn895 requested a review from a team as a code owner April 15, 2021 16:30

[ML] Fix swimlane embeddable broken

f213802

peteharverson reviewed Apr 19, 2021

View reviewed changes

[ML] Re-enable tests

1a8cee3

qn895 mentioned this pull request Apr 20, 2021

[Meta] [ML] Improve Annotations #69538

Closed

25 tasks

qn895 added 2 commits April 20, 2021 09:19

Merge remote-tracking branch 'upstream/master' into ml-annotations-sw…

a0c887d

…imlane

[ML] Fix markers overflowing beyond the start and ending time range

985fced

qn895 added 2 commits April 20, 2021 09:44

[ML] Make styling more consistent with SMV

229b4fa

[ML] Renable tests

ce159b0

peteharverson reviewed Apr 20, 2021

View reviewed changes

Comment thread x-pack/plugins/ml/public/application/explorer/swimlane_annotation_container.tsx Outdated

qn895 added 3 commits April 20, 2021 11:23

[ML] Fix model snapshot annotation missing

49d3a8e

[ML] Fix model snapshot annotation missing

c65cd32

[ML] Fix duration to account for contextXRangeStart

55b5362

peteharverson approved these changes Apr 20, 2021

View reviewed changes

qn895 added the auto-backport Deprecated - use backport:version if exact versions are needed label Apr 20, 2021

qn895 merged commit 9365ca8 into elastic:master Apr 20, 2021

qn895 deleted the ml-annotations-swimlane branch April 20, 2021 18:33

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Apr 20, 2021

[ML] Add annotation markers to the Anomaly Swimlane axis (elastic#97202)

cc177a3

kibanamachine mentioned this pull request Apr 20, 2021

[7.x] [ML] Add annotation markers to the Anomaly Swimlane axis (#97202) #97708

Merged

kibanamachine added a commit that referenced this pull request Apr 20, 2021

[ML] Add annotation markers to the Anomaly Swimlane axis (#97202) (#9…

253cfcb

…7708) Co-authored-by: Quynh Nguyen <43350163+qn895@users.noreply.github.com>

peteharverson mentioned this pull request May 6, 2021

[ML] Anomaly Explorer - Add annotation indicator to swim lanes #93463

Closed

Conversation

qn895 commented Apr 15, 2021

Summary

Checklist

Uh oh!

walterra commented Apr 15, 2021

Uh oh!

walterra Apr 15, 2021

Choose a reason for hiding this comment

Uh oh!

qn895 Apr 15, 2021

Choose a reason for hiding this comment

Uh oh!

peteharverson commented Apr 15, 2021

Uh oh!

qn895 commented Apr 15, 2021

Uh oh!

elasticmachine commented Apr 15, 2021

Uh oh!

peteharverson left a comment

Choose a reason for hiding this comment

Uh oh!

peteharverson Apr 19, 2021

Choose a reason for hiding this comment

Uh oh!

qn895 Apr 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

peteharverson left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Apr 20, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

Uh oh!

kibanamachine commented Apr 20, 2021

💚 Backport successful

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

qn895 Apr 20, 2021 •

edited

Loading