From 4ed019887cbf04ce53ef124671ec184a129624bc Mon Sep 17 00:00:00 2001
From: dej611 <marco.liberati@elastic.co>
Date: Tue, 25 Oct 2022 12:19:29 +0200
Subject: [PATCH 1/2] :lipstick: Revisit settings ui

---
 .../datasources/form_based/layer_settings.tsx | 116 ++++++++++++------
 1 file changed, 78 insertions(+), 38 deletions(-)

diff --git a/x-pack/plugins/lens/public/datasources/form_based/layer_settings.tsx b/x-pack/plugins/lens/public/datasources/form_based/layer_settings.tsx
index 7d02ac98f23a4..81b4e4eb0955d 100644
--- a/x-pack/plugins/lens/public/datasources/form_based/layer_settings.tsx
+++ b/x-pack/plugins/lens/public/datasources/form_based/layer_settings.tsx
@@ -5,9 +5,18 @@
  * 2.0.
  */
 
-import { EuiFormRow, EuiRange, EuiBetaBadge } from '@elastic/eui';
+import {
+  EuiFormRow,
+  EuiRange,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiBadge,
+  EuiText,
+  EuiLink,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
 import type { DatasourceLayerSettingsProps } from '../../types';
 import type { FormBasedPrivateState } from './types';
 
@@ -22,54 +31,85 @@ export function LayerSettingsPanel({
   const currentSamplingIndex = samplingIndex > -1 ? samplingIndex : samplingValue.length - 1;
   return (
     <EuiFormRow
-      display="columnCompressed"
+      display="rowCompressed"
       data-test-subj="lns-indexPattern-random-sampling-row"
       fullWidth
-      helpText={i18n.translate('xpack.lens.xyChart.randomSampling.help', {
-        defaultMessage: 'Change the sampling probability to see how your chart is affected',
-      })}
+      helpText={
+        <FormattedMessage
+          id="xpack.lens.xyChart.randomSampling.help"
+          defaultMessage="The sampling is accomplished by providing a random subset of the entire set of documents. The lower the value the higher the error and speed: consider the usage of lower values for big datasets. {link}"
+          values={{
+            link: (
+              <EuiLink
+                href="https://www.elastic.co/guide/en/elasticsearch/reference/master/search-aggregations-random-sampler-aggregation.html"
+                target="_blank"
+                external
+              >
+                <FormattedMessage
+                  id="xpack.lens.xyChart.randomSampling.learnMore"
+                  defaultMessage="Learn more"
+                />
+              </EuiLink>
+            ),
+          }}
+        />
+      }
       label={
         <>
           {i18n.translate('xpack.lens.xyChart.randomSampling.label', {
-            defaultMessage: 'Sampling',
+            defaultMessage: 'Random sampling',
           })}{' '}
-          <EuiBetaBadge
-            label={i18n.translate('xpack.lens.randomSampling.experimentalLabel', {
-              defaultMessage: 'Technical preview',
-            })}
-            color="hollow"
-            iconType="beaker"
-            size="s"
-            tooltipContent={i18n.translate('xpack.lens.randomSampling.experimentalLabel', {
+          <EuiBadge color="hollow">
+            {i18n.translate('xpack.lens.randomSampling.experimentalLabel', {
               defaultMessage: 'Technical preview',
             })}
-          />
+          </EuiBadge>
         </>
       }
     >
-      <EuiRange
-        data-test-subj="lns-indexPattern-random-sampling"
-        value={currentSamplingIndex}
-        onChange={(e) => {
-          setState({
-            ...state,
-            layers: {
-              ...state.layers,
-              [layerId]: {
-                ...state.layers[layerId],
-                sampling: samplingValue[Number(e.currentTarget.value)],
-              },
-            },
-          });
-        }}
-        showInput={false}
-        showRange={false}
-        showTicks
-        step={1}
-        min={0}
-        max={samplingValue.length - 1}
-        ticks={samplingValue.map((v, i) => ({ label: `${v}`, value: i }))}
-      />
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <EuiText size="s">
+            <FormattedMessage
+              id="xpack.lens.xyChart.randomSampling.speedLabel"
+              defaultMessage="Speed"
+            />
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiRange
+            data-test-subj="lns-indexPattern-random-sampling"
+            value={currentSamplingIndex}
+            onChange={(e) => {
+              setState({
+                ...state,
+                layers: {
+                  ...state.layers,
+                  [layerId]: {
+                    ...state.layers[layerId],
+                    sampling: samplingValue[Number(e.currentTarget.value)],
+                  },
+                },
+              });
+            }}
+            showInput={false}
+            showRange={false}
+            showTicks
+            step={1}
+            min={0}
+            max={samplingValue.length - 1}
+            ticks={samplingValue.map((v, i) => ({ label: `${v * 100}%`, value: i }))}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiText size="s">
+            <FormattedMessage
+              id="xpack.lens.xyChart.randomSampling.accuracyLabel"
+              defaultMessage="Accuracy"
+            />
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiFormRow>
   );
 }

From 2160aa35ccabeffa19840021a7f22199ef5459ad Mon Sep 17 00:00:00 2001
From: Michael Marcialis <michael@marcial.is>
Date: Wed, 26 Oct 2022 04:35:12 -0400
Subject: [PATCH 2/2] Design suggestions (#18)

---
 .../datasources/form_based/layer_settings.tsx | 62 +++++++++++--------
 1 file changed, 37 insertions(+), 25 deletions(-)

diff --git a/x-pack/plugins/lens/public/datasources/form_based/layer_settings.tsx b/x-pack/plugins/lens/public/datasources/form_based/layer_settings.tsx
index 81b4e4eb0955d..ec161ef996737 100644
--- a/x-pack/plugins/lens/public/datasources/form_based/layer_settings.tsx
+++ b/x-pack/plugins/lens/public/datasources/form_based/layer_settings.tsx
@@ -10,11 +10,13 @@ import {
   EuiRange,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiBadge,
+  EuiBetaBadge,
   EuiText,
   EuiLink,
+  EuiSpacer,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { DatasourceLayerSettingsProps } from '../../types';
@@ -35,41 +37,51 @@ export function LayerSettingsPanel({
       data-test-subj="lns-indexPattern-random-sampling-row"
       fullWidth
       helpText={
-        <FormattedMessage
-          id="xpack.lens.xyChart.randomSampling.help"
-          defaultMessage="The sampling is accomplished by providing a random subset of the entire set of documents. The lower the value the higher the error and speed: consider the usage of lower values for big datasets. {link}"
-          values={{
-            link: (
-              <EuiLink
-                href="https://www.elastic.co/guide/en/elasticsearch/reference/master/search-aggregations-random-sampler-aggregation.html"
-                target="_blank"
-                external
-              >
-                <FormattedMessage
-                  id="xpack.lens.xyChart.randomSampling.learnMore"
-                  defaultMessage="Learn more"
-                />
-              </EuiLink>
-            ),
-          }}
-        />
+        <>
+          <EuiSpacer size="s" />
+          <p>
+            <FormattedMessage
+              id="xpack.lens.xyChart.randomSampling.help"
+              defaultMessage="Lower sampling percentages increase speed at the cost of accuracy. It is recommended that lower sampling percentages only be used for large datasets. {link}"
+              values={{
+                link: (
+                  <EuiLink
+                    href="https://www.elastic.co/guide/en/elasticsearch/reference/master/search-aggregations-random-sampler-aggregation.html"
+                    target="_blank"
+                    external
+                  >
+                    <FormattedMessage
+                      id="xpack.lens.xyChart.randomSampling.learnMore"
+                      defaultMessage="View documentation"
+                    />
+                  </EuiLink>
+                ),
+              }}
+            />
+          </p>
+        </>
       }
       label={
         <>
           {i18n.translate('xpack.lens.xyChart.randomSampling.label', {
             defaultMessage: 'Random sampling',
           })}{' '}
-          <EuiBadge color="hollow">
-            {i18n.translate('xpack.lens.randomSampling.experimentalLabel', {
+          <EuiBetaBadge
+            css={css`
+              vertical-align: middle;
+            `}
+            iconType="beaker"
+            label={i18n.translate('xpack.lens.randomSampling.experimentalLabel', {
               defaultMessage: 'Technical preview',
             })}
-          </EuiBadge>
+            size="s"
+          />
         </>
       }
     >
-      <EuiFlexGroup>
+      <EuiFlexGroup gutterSize="none">
         <EuiFlexItem grow={false}>
-          <EuiText size="s">
+          <EuiText color="subdued" size="xs">
             <FormattedMessage
               id="xpack.lens.xyChart.randomSampling.speedLabel"
               defaultMessage="Speed"
@@ -102,7 +114,7 @@ export function LayerSettingsPanel({
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiText size="s">
+          <EuiText color="subdued" size="xs">
             <FormattedMessage
               id="xpack.lens.xyChart.randomSampling.accuracyLabel"
               defaultMessage="Accuracy"