[ML] Data visualizer: Add field types in-product help #137121

qn895 · 2022-07-25T21:00:22Z

Summary

This PR addresses #131577 and is part of #86387. It adds the popover with the help information for each field type.

Index based

File based

Checklist

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

Fixes #131577

elasticmachine · 2022-07-25T21:34:21Z

Pinging @elastic/ml-ui (:ml)

alvarezmelissa87 · 2022-07-25T23:00:56Z

x-pack/plugins/data_visualizer/common/constants.ts

+        defaultMessage: 'Software versions. Supports {SemanticVersioningLink} precedence rules.',
+        values: {
+          SemanticVersioningLink:
+            `<a href="https://semver.org/"


Any reason this has to be a string of an a tag as opposed to a link component from the eui library?

This is originally copied from Discover. Since this is in a constant file used in a helper function, using EuiLink would require this file to be importing React. However, if readability is important, we can definitely switch over.

Sounds good 👍

alvarezmelissa87 · 2022-07-25T23:02:24Z

...ualizer/public/application/common/components/field_types_filter/field_types_help_popover.tsx

+    const closeHelp = () => setIsHelpOpen(false);
+
+    const items: FieldTypeTableItem[] = useMemo(() => {
+      return fieldTypes.map((type, index) => ({


nit: could be implicit return

Updated here 024eac1

alvarezmelissa87 · 2022-07-25T23:03:28Z

...ualizer/public/application/common/components/field_types_filter/field_types_help_popover.tsx

+          defaultMessage: 'Description',
+        }),
+        // eslint-disable-next-line react/no-danger
+        render: (description: string) => <div dangerouslySetInnerHTML={{ __html: description }} />,


The description here is only ever set internally, right? Just making sure we want use the set inner html

I realized we don't even need it so I removed that part here 024eac1

lcawl

Minor comments about the punctuation, otherwise text strings LGTM

lcawl · 2022-07-26T00:52:22Z

x-pack/plugins/data_visualizer/common/constants.ts

+  switch (type) {
+    case SUPPORTED_FIELD_TYPES.BOOLEAN:
+      return i18n.translate('xpack.dataVisualizer.index.fieldNameDescription.booleanField', {
+        defaultMessage: 'True and false values.',


These incomplete phrases don't warrant punctuation IMO

Suggested change

defaultMessage: 'True and false values.',

defaultMessage: 'True and false values',

Updated here 024eac1

lcawl · 2022-07-26T00:52:47Z

x-pack/plugins/data_visualizer/common/constants.ts

+      });
+    case SUPPORTED_FIELD_TYPES.DATE:
+      return i18n.translate('xpack.dataVisualizer.index.fieldNameDescription.dateField', {
+        defaultMessage: 'A date string or the number of seconds or milliseconds since 1/1/1970.',


Suggested change

defaultMessage: 'A date string or the number of seconds or milliseconds since 1/1/1970.',

defaultMessage: 'A date string or the number of seconds or milliseconds since 1/1/1970',

Updated here 024eac1

lcawl · 2022-07-26T00:54:42Z

x-pack/plugins/data_visualizer/common/constants.ts

+      });
+    case SUPPORTED_FIELD_TYPES.GEO_POINT:
+      return i18n.translate('xpack.dataVisualizer.index.fieldNameDescription.geoPointField', {
+        defaultMessage: 'Latitude and longitude points.',


Suggested change

defaultMessage: 'Latitude and longitude points.',

defaultMessage: 'Latitude and longitude points',

Updated here 024eac1

lcawl · 2022-07-26T00:54:57Z

x-pack/plugins/data_visualizer/common/constants.ts

+      });
+    case SUPPORTED_FIELD_TYPES.GEO_SHAPE:
+      return i18n.translate('xpack.dataVisualizer.index.fieldNameDescription.geoShapeField', {
+        defaultMessage: 'Complex shapes, such as polygons.',


Suggested change

defaultMessage: 'Complex shapes, such as polygons.',

defaultMessage: 'Complex shapes such as polygons',

Updated here 024eac1

lcawl · 2022-07-26T00:55:13Z

x-pack/plugins/data_visualizer/common/constants.ts

+      });
+    case SUPPORTED_FIELD_TYPES.HISTOGRAM:
+      return i18n.translate('xpack.dataVisualizer.index.fieldNameDescription.histogramField', {
+        defaultMessage: 'Pre-aggregated numerical values in the form of a histogram.',


Suggested change

defaultMessage: 'Pre-aggregated numerical values in the form of a histogram.',

defaultMessage: 'Pre-aggregated numerical values in the form of a histogram',

Updated here 024eac1

lcawl · 2022-07-26T00:59:05Z

x-pack/plugins/data_visualizer/common/constants.ts

+      });
+    case SUPPORTED_FIELD_TYPES.NUMBER:
+      return i18n.translate('xpack.dataVisualizer.index.fieldNameDescription.numberField', {
+        defaultMessage: 'Long, integer, short, byte, double, and float values.',


Suggested change

defaultMessage: 'Long, integer, short, byte, double, and float values.',

defaultMessage: 'Long, integer, short, byte, double, and float values',

Updated here 024eac1

lcawl · 2022-07-26T00:59:15Z

x-pack/plugins/data_visualizer/common/constants.ts

+      });
+    case SUPPORTED_FIELD_TYPES.STRING:
+      return i18n.translate('xpack.dataVisualizer.index.fieldNameDescription.stringField', {
+        defaultMessage: 'Full text such as the body of an email or a product description.',


Suggested change

defaultMessage: 'Full text such as the body of an email or a product description.',

defaultMessage: 'Full text such as the body of an email or a product description',

Updated here 024eac1

lcawl · 2022-07-26T00:59:31Z

x-pack/plugins/data_visualizer/common/constants.ts

+      });
+    case SUPPORTED_FIELD_TYPES.TEXT:
+      return i18n.translate('xpack.dataVisualizer.index.fieldNameDescription.textField', {
+        defaultMessage: 'Full text such as the body of an email or a product description.',


Suggested change

defaultMessage: 'Full text such as the body of an email or a product description.',

defaultMessage: 'Full text such as the body of an email or a product description',

Updated here 024eac1

lcawl · 2022-07-26T01:00:29Z

x-pack/plugins/data_visualizer/common/constants.ts

+    case SUPPORTED_FIELD_TYPES.KEYWORD:
+      return i18n.translate('xpack.dataVisualizer.index.fieldNameDescription.keywordField', {
+        defaultMessage:
+          'Structured content such as an ID, email address, hostname, status code, or tag.',


Suggested change

'Structured content such as an ID, email address, hostname, status code, or tag.',

'Structured content such as an ID, email address, hostname, status code, or tag',

Updated here 024eac1

lcawl · 2022-07-26T01:01:02Z

x-pack/plugins/data_visualizer/common/constants.ts

+      });
+    case SUPPORTED_FIELD_TYPES.VERSION:
+      return i18n.translate('xpack.dataVisualizer.index.fieldNameDescription.versionField', {
+        defaultMessage: 'Software versions. Supports {SemanticVersioningLink} precedence rules.',


Suggested change

defaultMessage: 'Software versions. Supports {SemanticVersioningLink} precedence rules.',

defaultMessage: 'Software versions. Supports {SemanticVersioningLink} precedence rules',

Updated here 024eac1

peteharverson

Tested and other than the changes already suggested LGTM

alvarezmelissa87

LGTM ⚡

…lp-pop-over

kibana-ci · 2022-07-26T17:45:32Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`dataVisualizer`	377	378	+1

Async chunks

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

id	before	after	diff
`dataVisualizer`	561.6KB	565.1KB	+3.5KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`dataVisualizer`	16.6KB	20.4KB	+3.8KB

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
`dataVisualizer`	38	39	+1

Total ESLint disabled count

id	before	after	diff
`dataVisualizer`	38	39	+1

History

💔 Build #60880 failed dc62950
💚 Build #60616 succeeded 69cd035

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

cc @qn895

qn895 added release_note:enhancement :ml v8.4.0 labels Jul 25, 2022

qn895 requested review from alvarezmelissa87, peteharverson and lcawl July 25, 2022 21:00

qn895 self-assigned this Jul 25, 2022

[ML] Add popup for field type help

69cd035

qn895 force-pushed the ml-dv-field-type-help-pop-over branch from 48b5c7b to 69cd035 Compare July 25, 2022 21:27

qn895 added the Feature:File and Index Data Viz ML file and index data visualizer label Jul 25, 2022

qn895 marked this pull request as ready for review July 25, 2022 21:34

qn895 requested a review from a team as a code owner July 25, 2022 21:34

alvarezmelissa87 reviewed Jul 25, 2022

View reviewed changes

lcawl approved these changes Jul 26, 2022

View reviewed changes

peteharverson approved these changes Jul 26, 2022

View reviewed changes

alvarezmelissa87 approved these changes Jul 26, 2022

View reviewed changes

qn895 added 4 commits July 26, 2022 10:27

[ML] Remove punctuations

024eac1

Merge remote-tracking branch 'upstream/main' into ml-dv-field-type-he…

dc62950

…lp-pop-over

[ML] Fix linting

8033924

[ML] Change back to prev description

1e8ae13

qn895 added the ci:deploy-cloud label Jul 26, 2022

qn895 merged commit 0cf9cb2 into elastic:main Jul 26, 2022

kibanamachine added the backport:skip This commit does not require backporting label Jul 26, 2022

qn895 deleted the ml-dv-field-type-help-pop-over branch August 10, 2022 16:38

tylersmalley added ci:cloud-deploy Create or update a Cloud deployment and removed ci:deploy-cloud labels Aug 17, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ML] Data visualizer: Add field types in-product help #137121

[ML] Data visualizer: Add field types in-product help #137121

qn895 commented Jul 25, 2022 •

edited

Loading

elasticmachine commented Jul 25, 2022

alvarezmelissa87 Jul 25, 2022

qn895 Jul 25, 2022

alvarezmelissa87 Jul 26, 2022

alvarezmelissa87 Jul 25, 2022

qn895 Jul 26, 2022

alvarezmelissa87 Jul 25, 2022

qn895 Jul 26, 2022

lcawl left a comment

lcawl Jul 26, 2022

qn895 Jul 26, 2022

lcawl Jul 26, 2022

qn895 Jul 26, 2022

lcawl Jul 26, 2022

qn895 Jul 26, 2022

lcawl Jul 26, 2022

qn895 Jul 26, 2022

lcawl Jul 26, 2022

qn895 Jul 26, 2022

lcawl Jul 26, 2022

qn895 Jul 26, 2022

lcawl Jul 26, 2022

qn895 Jul 26, 2022

lcawl Jul 26, 2022

qn895 Jul 26, 2022

lcawl Jul 26, 2022

qn895 Jul 26, 2022

lcawl Jul 26, 2022

qn895 Jul 26, 2022

peteharverson left a comment

alvarezmelissa87 left a comment

kibana-ci commented Jul 26, 2022

ESLint disabled line counts

Total ESLint disabled count

	defaultMessage: 'True and false values.',
	defaultMessage: 'True and false values',

	defaultMessage: 'A date string or the number of seconds or milliseconds since 1/1/1970.',
	defaultMessage: 'A date string or the number of seconds or milliseconds since 1/1/1970',

	defaultMessage: 'Latitude and longitude points.',
	defaultMessage: 'Latitude and longitude points',

	defaultMessage: 'Complex shapes, such as polygons.',
	defaultMessage: 'Complex shapes such as polygons',

	defaultMessage: 'Pre-aggregated numerical values in the form of a histogram.',
	defaultMessage: 'Pre-aggregated numerical values in the form of a histogram',

	defaultMessage: 'Long, integer, short, byte, double, and float values.',
	defaultMessage: 'Long, integer, short, byte, double, and float values',

	defaultMessage: 'Full text such as the body of an email or a product description.',
	defaultMessage: 'Full text such as the body of an email or a product description',

	'Structured content such as an ID, email address, hostname, status code, or tag.',
	'Structured content such as an ID, email address, hostname, status code, or tag',

	defaultMessage: 'Software versions. Supports {SemanticVersioningLink} precedence rules.',
	defaultMessage: 'Software versions. Supports {SemanticVersioningLink} precedence rules',

[ML] Data visualizer: Add field types in-product help #137121

[ML] Data visualizer: Add field types in-product help #137121

Conversation

qn895 commented Jul 25, 2022 • edited Loading

Summary

Index based

File based

Checklist

elasticmachine commented Jul 25, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lcawl left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

peteharverson left a comment

Choose a reason for hiding this comment

alvarezmelissa87 left a comment

Choose a reason for hiding this comment

kibana-ci commented Jul 26, 2022

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

ESLint disabled line counts

Total ESLint disabled count

History

qn895 commented Jul 25, 2022 •

edited

Loading