[ML] Replace swim lane implementation with elastic-charts Heatmap #79315

darnautov · 2020-10-02T16:19:37Z

Summary

Anomaly swim lane rendered by heatmap/swimlane from elastic-charts

Checklist

This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
This was checked for cross-browser compatibility

peteharverson · 2020-10-05T11:22:51Z

Some quick feedback after testing c65888d:

No obvious way to deselect. If current method of clicking outside the cells isn't possible, then need an extra 'deselect' link / button above the swim lane (to the right of the legend perhaps?)
Tooltip format should be consistent with current format
New:

Current:
Left hand edge of the legend should align with the swim lane cells, or the whole legend should be center aligned, with less space between the legend items. I missed the > 0 item at first:
Format of the lane label tooltip should be the same as the current one, plus the tooltip text for long uri values in the lane labels is overflowing:
New:

Current:

walterra · 2020-10-05T12:51:34Z

Great progress! Some suggestions:

I wonder if we need the dates on the x-axis for the overall swim lane and the legend for the view-by swim lane, they are quite redundant. Does the component allow to hide them via options? Something like this:

I get the intention of the unmasked selected view-by labels and think it's a good idea, it's just that the resulting cut-out shape of the gray area looks a bit odd. Maybe it's worth revisting the existing style and you can simulate the existing behavior by applying not a gray but a white mask with some transparency? What's happening with the gray mask is that the overall darker shape actually draw's the users attention to the mask because it's more prominent and not to the actual selection unfortunately.

elasticmachine · 2020-10-06T12:54:26Z

Pinging @elastic/ml-ui (:ml)

darnautov · 2020-10-06T12:56:55Z

@peteharverson @walterra thanks for checking the PR on the early stage! I addressed all your comments

cchaos

The SASS changes LGTM. If I could give a couple quick suggestions. There's a lot of white space to the left of the chart making it seem like the chart is right-aligned. Could be nice to pull it more left. Also, I was confused by the legend. Because of it's placement, I thought it was indicating columns like a top X-axis. Maybe instead of equally spacing it out, you just right aligned them all to without a lot of spacing between. And then you can remove the second one since they are the same.

markov00

Checked the @elastic/charts dependency update, LGTM

x-pack/plugins/ml/common/util/anomaly_utils.ts

x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx

peteharverson · 2020-10-06T14:53:41Z

x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx

+ <EuiButtonEmpty size="xs" onClick={setSelectedCells.bind(null, undefined)}>
+ <FormattedMessage
+ id="xpack.ml.explorer.clearSelectionLabel"
+ defaultMessage="Clear selection"


I think we also need a way to clear the selection when the swim lane is used as an embeddable.

peteharverson · 2020-10-06T15:01:07Z

The swimlane selection looks like it needs to be recalculated when the number of lanes changes, as otherwise the selection rectangle appears to extend out of view:

darnautov · 2020-10-06T15:34:05Z

@cchaos thanks for the review!

Regarding empty space on the left. In some cases, labels are quite long so we use a fixed with for Y-axis labels. I've changed the screenshot in the description so you have a visual example
I changed the legend items alignment
I also like the idea of removing the second legend, but they control each swim lane individually, so it's not possible at the moment

cchaos

Got it, thanks. 👍

peteharverson

Tested latest edits and LGTM. The legend labelling, fixing the ability to clear selection in the embeddable, and fixing the selection mask when the number of lanes changed can be done in follow-ups if easier.

peteharverson · 2020-10-06T16:41:21Z

x-pack/plugins/ml/common/util/anomaly_utils.ts

@@ -168,17 +175,17 @@ export function getSeverityWithLow(normalizedScore: number): SeverityType {
 // for the supplied normalized anomaly score (a value between 0 and 100).
 export function getSeverityColor(normalizedScore: number): string {
 if (normalizedScore >= ANOMALY_THRESHOLD.CRITICAL) {


The > in the legend should actually be >= to match these conditions? Could the condition in the legend labelling be changed in a follow-up?

thanks for spotting this! yes, I'll adjust the legend labels in a follow-up PR.

kibanamachine · 2020-10-06T18:49:14Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 7910908

Metrics [docs]

@kbn/optimizer bundle module count

id	before	after	diff
`ml`	1222	1220	-2

@kbn/ui-shared-deps asset size

id	before	after	diff
`kbn-ui-shared-deps.@elastic.js`	2.4MB	2.4MB	+2.1KB
`kbn-ui-shared-deps.js`	4.7MB	4.7MB	+2.0B
total			+2.1KB

async chunks size

id	before	after	diff
`ml`	10.6MB	11.3MB	⚠️ +659.2KB

distributable file count

id	before	after	diff
`default`	48282	48280	-2
`oss`	29048	29049	+1

page load bundle size

id	before	after	diff
`ml`	58.5KB	59.4KB	+848.0B

History

💔 Build #80154 failed f3c7a94
💔 Build #80091 failed 3a98bce
💔 Build #80074 failed d1d2c72
💔 Build #79615 failed 0dc7b5b
💔 Build #79526 failed c65888d

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

…astic#79315) * [ML] replace swim lane vis * [ML] update swimlane_container, add colors constant * [ML] update swimlane_container, add colors constant * [ML] update swimlane_container, add colors constant * [ML] unfiltered label for Overall swim lane * [ML] tooltip content * [ML] fix styles, override legend styles * [ML] hide timeline for overall swimlane on the Anomaly Explorer page * [ML] remove explorer_swimlane component * [ML] remove dragselect dependency * [ML] fix types * [ML] fix tooltips, change mask fill to white * [ML] fix highlightedData * [ML] maxLegendHeight, fix Y-axis tooltip * [ML] clear selection * [ML] dataTestSubj * [ML] remove jest snapshot for explorer_swimlane * [ML] handle empty string label, fix translation key * [ML] better positioning for the loading indicator * [ML] update elastic/charts version * [ML] fix getFormattedSeverityScore and showSwimlane condition * [ML] fix selector for functional test * [ML] change the legend alignment * [ML] update elastic charts

…9315) (#79744) * [ML] replace swim lane vis * [ML] update swimlane_container, add colors constant * [ML] update swimlane_container, add colors constant * [ML] update swimlane_container, add colors constant * [ML] unfiltered label for Overall swim lane * [ML] tooltip content * [ML] fix styles, override legend styles * [ML] hide timeline for overall swimlane on the Anomaly Explorer page * [ML] remove explorer_swimlane component * [ML] remove dragselect dependency * [ML] fix types * [ML] fix tooltips, change mask fill to white * [ML] fix highlightedData * [ML] maxLegendHeight, fix Y-axis tooltip * [ML] clear selection * [ML] dataTestSubj * [ML] remove jest snapshot for explorer_swimlane * [ML] handle empty string label, fix translation key * [ML] better positioning for the loading indicator * [ML] update elastic/charts version * [ML] fix getFormattedSeverityScore and showSwimlane condition * [ML] fix selector for functional test * [ML] change the legend alignment * [ML] update elastic charts

darnautov added 4 commits October 2, 2020 18:12

[ML] replace swim lane vis

38c3593

[ML] update swimlane_container, add colors constant

d2c7bff

[ML] update swimlane_container, add colors constant

577342c

[ML] update swimlane_container, add colors constant

7ade2c3

darnautov self-assigned this Oct 2, 2020

Merge remote-tracking branch 'upstream/master' into ML-new-swimlane

34a3995

darnautov added :ml Feature:Anomaly Detection ML anomaly detection release_note:skip Skip the PR/issue when compiling release notes v7.10.0 v8.0.0 labels Oct 5, 2020

darnautov requested review from peteharverson and walterra October 5, 2020 08:43

[ML] unfiltered label for Overall swim lane

c65888d

[ML] tooltip content

f8b31f3

darnautov added 13 commits October 5, 2020 15:31

[ML] fix styles, override legend styles

76c1b08

[ML] hide timeline for overall swimlane on the Anomaly Explorer page

42e70ba

[ML] remove explorer_swimlane component

1bc52a2

[ML] remove dragselect dependency

0dc7b5b

[ML] fix types

43291f6

[ML] fix tooltips, change mask fill to white

58e9ac6

[ML] fix highlightedData

54bab97

[ML] maxLegendHeight, fix Y-axis tooltip

a7de8bc

[ML] clear selection

622fbc8

[ML] dataTestSubj

a97dfad

[ML] remove jest snapshot for explorer_swimlane

f34d0f3

[ML] handle empty string label, fix translation key

d1d2c72

[ML] better positioning for the loading indicator

99b0717

darnautov marked this pull request as ready for review October 6, 2020 12:54

darnautov requested review from a team as code owners October 6, 2020 12:54

darnautov requested a review from markov00 October 6, 2020 12:54

cchaos reviewed Oct 6, 2020

View reviewed changes

markov00 approved these changes Oct 6, 2020

View reviewed changes

peteharverson reviewed Oct 6, 2020

View reviewed changes

x-pack/plugins/ml/common/util/anomaly_utils.ts Outdated Show resolved Hide resolved

peteharverson reviewed Oct 6, 2020

View reviewed changes

x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx Show resolved Hide resolved

peteharverson reviewed Oct 6, 2020

View reviewed changes

darnautov added 3 commits October 6, 2020 17:05

[ML] fix getFormattedSeverityScore and showSwimlane condition

6e63215

[ML] fix selector for functional test

d30b08e

[ML] change the legend alignment

f3c7a94

darnautov requested review from peteharverson and cchaos October 6, 2020 15:39

cchaos approved these changes Oct 6, 2020

View reviewed changes

peteharverson approved these changes Oct 6, 2020

View reviewed changes

[ML] update elastic charts

7910908

darnautov merged commit 827f0c0 into elastic:master Oct 6, 2020

darnautov deleted the ML-new-swimlane branch October 6, 2020 18:51

darnautov mentioned this pull request Oct 6, 2020

[7.x] [ML] Replace swim lane implementation with elastic-charts Heatmap (#79315) #79744

Merged

markov00 mentioned this pull request Oct 7, 2020

Update dependency @elastic/charts to v23.2.0 #79649

Closed

1 task

darnautov mentioned this pull request Oct 7, 2020

[ML] Fix clear selection for the embeddable swim lane #79834

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ML] Replace swim lane implementation with elastic-charts Heatmap #79315

[ML] Replace swim lane implementation with elastic-charts Heatmap #79315

darnautov commented Oct 2, 2020 •

edited

Loading

peteharverson commented Oct 5, 2020 •

edited

Loading

walterra commented Oct 5, 2020

elasticmachine commented Oct 6, 2020

darnautov commented Oct 6, 2020

cchaos left a comment

markov00 left a comment

peteharverson Oct 6, 2020

peteharverson commented Oct 6, 2020

darnautov commented Oct 6, 2020

cchaos left a comment

peteharverson left a comment

peteharverson Oct 6, 2020

darnautov Oct 6, 2020

kibanamachine commented Oct 6, 2020

[ML] Replace swim lane implementation with elastic-charts Heatmap #79315

[ML] Replace swim lane implementation with elastic-charts Heatmap #79315

Conversation

darnautov commented Oct 2, 2020 • edited Loading

Summary

Checklist

peteharverson commented Oct 5, 2020 • edited Loading

walterra commented Oct 5, 2020

elasticmachine commented Oct 6, 2020

darnautov commented Oct 6, 2020

cchaos left a comment

Choose a reason for hiding this comment

markov00 left a comment

Choose a reason for hiding this comment

peteharverson Oct 6, 2020

Choose a reason for hiding this comment

peteharverson commented Oct 6, 2020

darnautov commented Oct 6, 2020

cchaos left a comment

Choose a reason for hiding this comment

peteharverson left a comment

Choose a reason for hiding this comment

peteharverson Oct 6, 2020

Choose a reason for hiding this comment

darnautov Oct 6, 2020

Choose a reason for hiding this comment

kibanamachine commented Oct 6, 2020

💚 Build Succeeded

Metrics [docs]

@kbn/optimizer bundle module count

@kbn/ui-shared-deps asset size

async chunks size

distributable file count

page load bundle size

History

darnautov commented Oct 2, 2020 •

edited

Loading

peteharverson commented Oct 5, 2020 •

edited

Loading