From dc5348d48abc30a294b72ed22324d94f9e219660 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Wed, 24 Feb 2021 15:49:49 +0100
Subject: [PATCH 1/3] [ML] Adds missing info icon tooltips to scatterplot
 matrix option labels.

---
 .../scatterplot_matrix/scatterplot_matrix.tsx | 72 +++++++++++++++----
 1 file changed, 60 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx
index 740d127e1b08d..66d6812c466ab 100644
--- a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx
+++ b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx
@@ -14,6 +14,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
+  EuiIconTip,
   EuiSelect,
   EuiSpacer,
   EuiSwitch,
@@ -57,6 +58,24 @@ const TOGGLE_OFF = i18n.translate('xpack.ml.splom.toggleOff', {
 
 const sampleSizeOptions = [100, 1000, 10000].map((d) => ({ value: d, text: '' + d }));
 
+interface OptionLabelWithIconItipProps {
+  label: string;
+  tooltip: string;
+}
+
+const OptionLabelWithIconTip: FC<OptionLabelWithIconItipProps> = ({ label, tooltip }) => (
+  <>
+    {label}
+    <EuiIconTip
+      content={tooltip}
+      iconProps={{
+        className: 'eui-alignTop',
+      }}
+      size="s"
+    />
+  </>
+);
+
 export interface ScatterplotMatrixProps {
   fields: string[];
   index: string;
@@ -252,9 +271,16 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
           <EuiFlexGroup>
             <EuiFlexItem>
               <EuiFormRow
-                label={i18n.translate('xpack.ml.splom.fieldSelectionLabel', {
-                  defaultMessage: 'Fields',
-                })}
+                label={
+                  <OptionLabelWithIconTip
+                    label={i18n.translate('xpack.ml.splom.fieldSelectionLabel', {
+                      defaultMessage: 'Fields',
+                    })}
+                    tooltip={i18n.translate('xpack.ml.splom.fieldSelectionInfoTooltip', {
+                      defaultMessage: 'Pick fields to explore their relationships.',
+                    })}
+                  />
+                }
                 display="rowCompressed"
                 fullWidth
               >
@@ -276,9 +302,16 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
             </EuiFlexItem>
             <EuiFlexItem style={{ width: '200px' }} grow={false}>
               <EuiFormRow
-                label={i18n.translate('xpack.ml.splom.sampleSizeLabel', {
-                  defaultMessage: 'Sample size',
-                })}
+                label={
+                  <OptionLabelWithIconTip
+                    label={i18n.translate('xpack.ml.splom.sampleSizeLabel', {
+                      defaultMessage: 'Sample size',
+                    })}
+                    tooltip={i18n.translate('xpack.ml.splom.sampleInfoTooltip', {
+                      defaultMessage: 'Amount of documents to display in the scatterplot matrix.',
+                    })}
+                  />
+                }
                 display="rowCompressed"
                 fullWidth
               >
@@ -292,9 +325,17 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
             </EuiFlexItem>
             <EuiFlexItem style={{ width: '120px' }} grow={false}>
               <EuiFormRow
-                label={i18n.translate('xpack.ml.splom.randomScoringLabel', {
-                  defaultMessage: 'Random scoring',
-                })}
+                label={
+                  <OptionLabelWithIconTip
+                    label={i18n.translate('xpack.ml.splom.randomScoringLabel', {
+                      defaultMessage: 'Random scoring',
+                    })}
+                    tooltip={i18n.translate('xpack.ml.splom.randomScoringInfoTooltip', {
+                      defaultMessage:
+                        'Uses a function score query to get randomly selected documents as the sample.',
+                    })}
+                  />
+                }
                 display="rowCompressed"
                 fullWidth
               >
@@ -310,9 +351,16 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
             {resultsField !== undefined && legendType === undefined && (
               <EuiFlexItem style={{ width: '120px' }} grow={false}>
                 <EuiFormRow
-                  label={i18n.translate('xpack.ml.splom.dynamicSizeLabel', {
-                    defaultMessage: 'Dynamic size',
-                  })}
+                  label={
+                    <OptionLabelWithIconTip
+                      label={i18n.translate('xpack.ml.splom.dynamicSizeLabel', {
+                        defaultMessage: 'Dynamic size',
+                      })}
+                      tooltip={i18n.translate('xpack.ml.splom.dynamicSizeInfoTooltip', {
+                        defaultMessage: 'Scales the size of each point by its outlier score.',
+                      })}
+                    />
+                  }
                   display="rowCompressed"
                   fullWidth
                 >

From 15f2a46d24bfaddc97f8ffde1fc93479d725262d Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Wed, 24 Feb 2021 15:53:40 +0100
Subject: [PATCH 2/3] [ML] Fix i18n id.

---
 .../components/scatterplot_matrix/scatterplot_matrix.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx
index 66d6812c466ab..9da470b410c9b 100644
--- a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx
+++ b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx
@@ -307,7 +307,7 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
                     label={i18n.translate('xpack.ml.splom.sampleSizeLabel', {
                       defaultMessage: 'Sample size',
                     })}
-                    tooltip={i18n.translate('xpack.ml.splom.sampleInfoTooltip', {
+                    tooltip={i18n.translate('xpack.ml.splom.sampleSizeInfoTooltip', {
                       defaultMessage: 'Amount of documents to display in the scatterplot matrix.',
                     })}
                   />

From 247d5141011fc78ff6ac32a12ed441069331a2e5 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Wed, 24 Feb 2021 16:10:19 +0100
Subject: [PATCH 3/3] [ML] Fix interface name

---
 .../components/scatterplot_matrix/scatterplot_matrix.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx
index 9da470b410c9b..344464bfe9590 100644
--- a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx
+++ b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx
@@ -58,12 +58,12 @@ const TOGGLE_OFF = i18n.translate('xpack.ml.splom.toggleOff', {
 
 const sampleSizeOptions = [100, 1000, 10000].map((d) => ({ value: d, text: '' + d }));
 
-interface OptionLabelWithIconItipProps {
+interface OptionLabelWithIconTipProps {
   label: string;
   tooltip: string;
 }
 
-const OptionLabelWithIconTip: FC<OptionLabelWithIconItipProps> = ({ label, tooltip }) => (
+const OptionLabelWithIconTip: FC<OptionLabelWithIconTipProps> = ({ label, tooltip }) => (
   <>
     {label}
     <EuiIconTip