[ML] Data Frame Analytics results view: add link to custom visualizations for viewing scatterplot charts #149647

alvarezmelissa87 · 2023-01-26T23:20:37Z

Summary

This PR adds a link to the custom visualization UI from scatterplot matrix charts in the data frame analytics job wizard and results views. This allows you to view the data and edit the visualization inside the custom visualization editor, and then save it to a dashboard to explore the data alongside other contextual information.

Related meta issue: #131551

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
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

elasticmachine · 2023-01-26T23:20:40Z

Pinging @elastic/ml-ui (:ml)

walterra · 2023-01-27T12:41:27Z

x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx

+        index,
+        body: {
+          fields: fieldsToFetch,
+          size: 1000,


Can we apply the value from the UI dropdown to select the amount of docs to fetch?

Good catch - updated in e14f32f

walterra · 2023-01-27T12:50:14Z

Really great feature! I tested with different types of jobs and outlier detection and regression seems to work well. With classification somehow the chart doesn't end up fully populated in the Vega editor unfortunately.

This is how it looks in the DFA results page:

This is how it ends up in the Vega Editor:

The data seems to get fully fetched, when I do a drag select it ends up like this:

peteharverson · 2023-01-27T15:20:40Z

x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx

+                <EuiLink
+                  onClick={async () => {
+                    const customVisLink = getCustomVisualizationLink();
+                    await application.navigateToApp('visualize#', {


Do we want it opening in a new tab or the same tab? Currently after the Visualize tab opens, the Save and return / Cancel buttons open up Dashboard. If it opens in the same tab, can the Save and return / Cancel buttons return you to the DFA page from which Visualize was opened?

Opening it up in the same tab in e14f32f

As far as the cancel/return buttons - I'm not seeing them - could you share how you're getting them in the custom vis UI view?

This happens only if you add the charts to a dashboard from Visualize. Looks like that action adds this to session storage:

EMBEDDABLE_STATE_TRANSFER: { "visualize": { "originatingApp": "dashboards", "embeddableId": "e14aa766-2fc1-40c1-ac2f-8daeb9fa4c0c", "searchSessionId": "d95d87ba-8eb0-4034-b23e-57423357f4e2" } }

Any subsequent opening of visualize from the ML DFA pages will then result in the 'Save and return' and 'Cancel' buttons appearing in the header and redirecting to the dashboard rather than ML. Maybe we can set ML as the originating app, or if not, clear that key? Makes sense to address in a follow up.

x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx

alvarezmelissa87 · 2023-01-30T17:06:36Z

@elasticmachine merge upstream

alvarezmelissa87 · 2023-01-30T21:13:10Z

@walterra - the issue regarding the classification job results not showing up correctly (#149647 (comment)) has been fixed in e14f32f

The other updates have been made cc @peteharverson

alvarezmelissa87 · 2023-01-30T21:58:33Z

@elasticmachine merge upstream

kibana-ci · 2023-01-30T23:02:06Z

💚 Build Succeeded

Buildkite Build
Commit: 6bcebc5

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`ml`	3.4MB	3.4MB	+1.6KB

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
`ml`	556	557	+1

Total ESLint disabled count

id	before	after	diff
`ml`	559	560	+1

History

💔 Build #104000 failed e14f32f
💚 Build #103873 succeeded 4441ceb
💚 Build #103200 succeeded e8d1cb7

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

cc @alvarezmelissa87

walterra

Tested the latest version and classification charts now get correctly displayed in the Vega editor! Would be great to have a functional test so we can track regressions should anything with the Vega Editor change, but can be done in a follow up.

peteharverson

Tested latest changes and LGTM.

Would be good to fix that return / cancel behavior in a follow up if possible from the ML code.

… link to custom visualization (#150103) ## Summary Follow up to #149647 Link to flaky test runner: https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/1856 This PR adds a functional test for the scatterplot matrix link in the DFA results view to custom visualizations UI. ### Checklist Delete any items that are not applicable to this PR. - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios

…ions for viewing scatterplot charts (elastic#149647) ## Summary This PR adds a link to the custom visualization UI from scatterplot matrix charts in the data frame analytics job wizard and results views. This allows you to view the data and edit the visualization inside the custom visualization editor, and then save it to a dashboard to explore the data alongside other contextual information. <img width="884" alt="image" src="https://user-images.githubusercontent.com/7405507/215125288-9d5527fa-6074-42bd-98f1-2c04cd025432.png"> Related meta issue: elastic#131551 ### Checklist Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

alvarezmelissa87 added 2 commits January 26, 2023 16:17

add link to custom visualization from dfa results

57ddbca

update jest tests

e8d1cb7

alvarezmelissa87 added release_note:enhancement :ml Feature:Data Frame Analytics ML data frame analytics features v8.7.0 labels Jan 26, 2023

alvarezmelissa87 requested a review from a team as a code owner January 26, 2023 23:20

alvarezmelissa87 self-assigned this Jan 26, 2023

alvarezmelissa87 requested review from walterra and peteharverson January 26, 2023 23:31

walterra reviewed Jan 27, 2023

View reviewed changes

peteharverson reviewed Jan 27, 2023

View reviewed changes

x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx Outdated Show resolved Hide resolved

alvarezmelissa87 mentioned this pull request Jan 30, 2023

[Visualizations][Vega-lite-based editor] Unexpected behavior with color coding in vega spec #149853

Closed

kibanamachine and others added 2 commits January 30, 2023 12:06

Merge branch 'main' into ml-dfa-scatterplot-chart-to-custom-viz

4441ceb

use size from dropdown and update copy

e14f32f

Merge branch 'main' into ml-dfa-scatterplot-chart-to-custom-viz

6bcebc5

walterra approved these changes Jan 31, 2023

View reviewed changes

peteharverson approved these changes Jan 31, 2023

View reviewed changes

alvarezmelissa87 merged commit e534d87 into elastic:main Jan 31, 2023

kibanamachine added the backport:skip This commit does not require backporting label Jan 31, 2023

This was referenced Jan 31, 2023

[ML] Data Frame Analytics: Enhancements for results view #131551

Closed

[ML] Data Frame Analytics: adds functional test for scatterplot chart link to custom visualization #150103

Merged

walterra mentioned this pull request Apr 5, 2023

[ML] Data Frame Analytics: Scatterplot Matrix #84420

Open

41 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ML] Data Frame Analytics results view: add link to custom visualizations for viewing scatterplot charts #149647

[ML] Data Frame Analytics results view: add link to custom visualizations for viewing scatterplot charts #149647

alvarezmelissa87 commented Jan 26, 2023 •

edited by peteharverson

Loading

elasticmachine commented Jan 26, 2023

walterra Jan 27, 2023

alvarezmelissa87 Jan 30, 2023

walterra commented Jan 27, 2023

peteharverson Jan 27, 2023

alvarezmelissa87 Jan 30, 2023 •

edited by peteharverson

Loading

peteharverson Jan 31, 2023

alvarezmelissa87 commented Jan 30, 2023

alvarezmelissa87 commented Jan 30, 2023 •

edited

Loading

alvarezmelissa87 commented Jan 30, 2023

kibana-ci commented Jan 30, 2023

ESLint disabled line counts

Total ESLint disabled count

walterra left a comment

peteharverson left a comment

[ML] Data Frame Analytics results view: add link to custom visualizations for viewing scatterplot charts #149647

[ML] Data Frame Analytics results view: add link to custom visualizations for viewing scatterplot charts #149647

Conversation

alvarezmelissa87 commented Jan 26, 2023 • edited by peteharverson Loading

Summary

Checklist

elasticmachine commented Jan 26, 2023

walterra Jan 27, 2023

Choose a reason for hiding this comment

alvarezmelissa87 Jan 30, 2023

Choose a reason for hiding this comment

walterra commented Jan 27, 2023

peteharverson Jan 27, 2023

Choose a reason for hiding this comment

alvarezmelissa87 Jan 30, 2023 • edited by peteharverson Loading

Choose a reason for hiding this comment

peteharverson Jan 31, 2023

Choose a reason for hiding this comment

alvarezmelissa87 commented Jan 30, 2023

alvarezmelissa87 commented Jan 30, 2023 • edited Loading

alvarezmelissa87 commented Jan 30, 2023

kibana-ci commented Jan 30, 2023

💚 Build Succeeded

Metrics [docs]

Async chunks

ESLint disabled line counts

Total ESLint disabled count

History

walterra left a comment

Choose a reason for hiding this comment

peteharverson left a comment

Choose a reason for hiding this comment

alvarezmelissa87 commented Jan 26, 2023 •

edited by peteharverson

Loading

alvarezmelissa87 Jan 30, 2023 •

edited by peteharverson

Loading

alvarezmelissa87 commented Jan 30, 2023 •

edited

Loading