[ML] Explorer Chart Tweaks

[elasticmachine]

Original comment by @walterra:

Recently we discussed some options to improve the explorer charts. This issue summarizes these thoughts and some possible improvements. This is how the chart currently looks:

• We use a gray area to highlight the currently selected area. This is the opposite of what we do in the selector time series viewer where the selected area is white.
• In the swimlane itself and in the time series selector, the areas outside the highlighted areas have reduced opacity/saturation. This is not reflected in the explorer chart. The highlight we're trying to focus on with the gray background is not reflected by the data points.

Here are suggestions for alternatives:

1. The above inverts the highlighting and desaturates the data outside the highlighted area. While this puts more focus on the centered area, the large gray areas make the chart less lightweight.

2. The version above tries to resemble the styling of the swimlane including its selected element. The visual similarity makes it easier to tell that there's a connection between the swimlane selection and the highlighted area in the explorer chart. The chart is much more lightweight too.

Here's are screenshots of the whole interface to demonstrate the idea:

@sophiec20 @jgowdyelastic @peteharverson please let me know what you think and if it's ok to move forward with this.

[elasticmachine]

Original comment by @walterra:

@peteharverson Here's another variant which combines the two:

[elasticmachine]

Original comment by @walterra:

Another version with a more sublte gray background

[elasticmachine]

Original comment by @peteharverson:

Visually I like that last option the best. Using the gray background really helps the selected time stand out. It also ties in with the effect used in the Single Metric Viewer 'context' chart:

How about the same gray background added over the swimlanes too, to really tie the charts together with a consistent style?

[elasticmachine]

Original comment by @jgowdyelastic:

I like this last version.
As long as the selected (boxed) areas are displaying the same interval.
I also agree that using the same or similar greys would be good.

[elasticmachine]

Original comment by @sophiec20:

Hopefully not too late to the party... @walterra

The anomaly explorer chart shows the time series, with 10 buckets either side.

The 10 buckets either side contain useful information... it is not "decoration" ... it's important context for what was happening around the time of the anomaly.

The grey shaded area highlights the swimlane block that has been selected, which gives more information on the relative duration of the various time windows.

I believe that the aim of the visual effect ought to be to inform the time span of the block selected, but not to de-emphasis the surrounding info.

I'm not offering a solution, but I do worry that greying out the surrounding time series is not appropriate. This is different to the Single Metric viewer mystic hand.

[elasticmachine]

Original comment by @walterra:

Thanks for the feedback @sophiec20 - I will do another version with the gray across swimlanes and chart "in sync", then let's reassess all the options.

[elasticmachine]

Original comment by @walterra:

Here's another version. It has the grey cells in the swimlanes, but with 1px white padding.

Here's a summary of the explored options:

1. Just invert the white/grey areas of the original.
2. Simulate swimlane design in chart: white background, grey cell borders, dark grey selected cell border.
3. Simulate swimlane design in chart: grey background for unselected cells, grey cell borders, dark grey border with white background for selected cell.
4. All possible combinations of the above :)

Taking Sophie's comment, visual consistency and personal taste into account, I'd prefer version 2 :).

[elasticmachine]

Original comment by @jgowdyelastic:

i think this does a better job of conveying that what is shown in the charts is the same as what is shown in the swimlane.

[elasticmachine]

Original comment by @peteharverson:

Reprioritizing to v6.4.0