[Lens] Revisit Random sampling UI

x-pack/plugins/lens/public/datasources/form_based/layer_settings.tsx

@@ -5,9 +5,20 @@
  * 2.0.
  */
 
-import { EuiFormRow, EuiRange, EuiBetaBadge } from '@elastic/eui';
+import {
+  EuiFormRow,
+  EuiRange,
+  EuiFlexGroup,
+  EuiFlexItem,
+  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';
 import type { FormBasedPrivateState } from './types';
 
@@ -22,54 +33,95 @@ 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={
+        <>
+          <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: 'Sampling',
+            defaultMessage: 'Random sampling',
           })}{' '}
           <EuiBetaBadge
+            css={css`
+              vertical-align: middle;
+            `}
+            iconType="beaker"
             label={i18n.translate('xpack.lens.randomSampling.experimentalLabel', {
               defaultMessage: 'Technical preview',
             })}
-            color="hollow"
-            iconType="beaker"
             size="s"
-            tooltipContent={i18n.translate('xpack.lens.randomSampling.experimentalLabel', {
-              defaultMessage: 'Technical preview',
-            })}
           />
         </>
       }
     >
-      <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 gutterSize="none">
+        <EuiFlexItem grow={false}>
+          <EuiText color="subdued" size="xs">
+            <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 color="subdued" size="xs">
+            <FormattedMessage
+              id="xpack.lens.xyChart.randomSampling.accuracyLabel"
+              defaultMessage="Accuracy"
+            />
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiFormRow>
   );
 }