[ML] Data Frame Analytics: Highlight filtered data in scatterplot charts #144871
Conversation
|
Gave this a test, and really like this feature! Just one thought, as discussed, might be nice to add an item to the legend to indicate the background layer. Not sure if that's possible?
|
4f11e56 to
209d813
Compare
…-ref HEAD~1..HEAD --fix'
There was a problem hiding this comment.
Great feature, I like how you've achieved this with Vega layers! There's now quite some redundant code though. Suggest to consolidate the layer code into a function where you can pass in options to get a spec for foreground and background layer.
I played around a bit with what Pete suggested regarding making the unselected dots part of the legend. IMHO this is a bit messy, Vega tries to combine the colors based on different attributes into one, will be even more problematic for classification/regression.
That legend item is also in conflict with brush selecting where the style chart with gray unselected areas will be the same but no legend will indicate that.
An alternative could be an explanatory text when there's a background distribution shown below the chart or on an info-icon somewhere.
(Just for reference the stuff I changed to get that adapted but not so great working legend: scatterplot_matrix_vega_lite_spec.ts.zip)
| function filterChartableItems(items: estypes.SearchHit[], resultsField?: string) { | ||
| return ( | ||
| items | ||
| ?.map((d) => |
There was a problem hiding this comment.
Don't think we need the ? here since items isn't optional.
There was a problem hiding this comment.
Yep - good catch - updated in 1ed0db8
| }; | ||
|
|
||
| if (backgroundValues.length) { | ||
| schema.spec.layer.push({ |
There was a problem hiding this comment.
Suggest to use unshift here instead of push to add the background layer under the regular items otherwise the gray dots will be drawn on top of the foreground data.
There was a problem hiding this comment.
Good catch! Updated in 1ed0db8
This sounds a good alternative to indicating it in the legend. Maybe below the chart? I can't think of any obvious place to add an info icon. |
|
Pinging @elastic/ml-ui (:ml) |
|
Added helper text and consolidated layer code into a function to prevent duplication in 1ed0db8 This is ready for a final look when you get a chance - cc @walterra, @peteharverson 🙏 |
|
@elasticmachine merge upstream |
|
cc @lcawl regarding the help text below the charts |
…-ref HEAD~1..HEAD --fix'
| fullWidth | ||
| helpText={i18n.translate('xpack.ml.splom.backgroundLayerHelpText', { | ||
| defaultMessage: | ||
| "If the data points match your filter, they're shown in color; otherwise, they're blurred gray", |
There was a problem hiding this comment.
Super nit: Might deserve a dot at the end of the sentence.
There was a problem hiding this comment.
Added in 6047a9e
|
@elasticmachine merge upstream |
There was a problem hiding this comment.
LGTM. Agree with @walterra about the minor text edit for the label about chart colors with a filter.
|
@elasticmachine merge upstream |
💚 Build Succeeded
Metrics [docs]Async chunks
Unknown metric groupsESLint disabled in files
ESLint disabled line counts
Total ESLint disabled count
History
To update your PR or re-run it, just comment with: |
Summary
Related meta issue: #131551
This PR adds functionality to the scatterplot charts to show the full data sample and, when the user has added a filter/query in the query bar, the portion of the data reflecting the filter is highlighted so it can be differentiated from the background data.
Classification results view with query for
AvgTicketPrice > 400Outlier detection results view with same filter
Regression results view with same filter
Help text:
Checklist
Delete any items that are not applicable to this PR.