[Lens] Improve Ignore global filters UI

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

@@ -37,7 +37,6 @@ import type {
   IndexPatternField,
   IndexPattern,
   IndexPatternRef,
-  DatasourceLayerSettingsProps,
   DataSourceInfo,
   UserMessage,
   FrameDatasourceAPI,
@@ -429,10 +428,7 @@ export function getFormBasedDatasource({
     toExpression: (state, layerId, indexPatterns, dateRange, searchSessionId) =>
       toExpression(state, layerId, indexPatterns, uiSettings, dateRange, searchSessionId),
 
-    renderLayerSettings(
-      domElement: Element,
-      props: DatasourceLayerSettingsProps<FormBasedPrivateState>
-    ) {
+    renderLayerSettings(domElement, props) {
       render(
         <KibanaThemeProvider theme$={core.theme.theme$}>
           <I18nProvider>

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

@@ -109,101 +109,86 @@ export function LayerSettingsPanel({
   setState,
   layerId,
 }: DatasourceLayerSettingsProps<FormBasedPrivateState>) {
-  const { euiTheme } = useEuiTheme();
   const isSamplingValueDisabled = !isSamplingValueEnabled(state.layers[layerId]);
   const currentValue = isSamplingValueDisabled
     ? samplingValues[samplingValues.length - 1]
     : state.layers[layerId].sampling;
   return (
-    <div id={layerId}>
-      <EuiText
-        size="s"
-        css={css`
-          margin-bottom: ${euiTheme.size.base};
-        `}
-      >
-        <h4>
-          {i18n.translate('xpack.lens.indexPattern.layerSettings.headingData', {
-            defaultMessage: 'Data',
-          })}
-        </h4>
-      </EuiText>
-      <EuiFormRow
-        display="rowCompressed"
-        data-test-subj="lns-indexPattern-random-sampling-row"
-        fullWidth
-        helpText={
-          <>
-            <EuiSpacer size="s" />
-            <p>
-              <FormattedMessage
-                id="xpack.lens.indexPattern.randomSampling.help"
-                defaultMessage="Lower sampling percentages increases the performance, but lowers the accuracy. Lower sampling percentages are best 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.indexPattern.randomSampling.learnMore"
-                        defaultMessage="View documentation"
-                      />
-                    </EuiLink>
-                  ),
-                }}
-              />
-            </p>
-          </>
-        }
-        label={
-          <>
-            {i18n.translate('xpack.lens.indexPattern.randomSampling.label', {
-              defaultMessage: 'Sampling',
-            })}{' '}
-            <EuiToolTip
-              content={i18n.translate('xpack.lens.indexPattern.randomSampling.experimentalLabel', {
+    <EuiFormRow
+      display="rowCompressed"
+      data-test-subj="lns-indexPattern-random-sampling-row"
+      fullWidth
+      helpText={
+        <>
+          <EuiSpacer size="s" />
+          <p>
+            <FormattedMessage
+              id="xpack.lens.indexPattern.randomSampling.help"
+              defaultMessage="Lower sampling percentages increases the performance, but lowers the accuracy. Lower sampling percentages are best 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.indexPattern.randomSampling.learnMore"
+                      defaultMessage="View documentation"
+                    />
+                  </EuiLink>
+                ),
+              }}
+            />
+          </p>
+        </>
+      }
+      label={
+        <>
+          {i18n.translate('xpack.lens.indexPattern.randomSampling.label', {
+            defaultMessage: 'Sampling',
+          })}{' '}
+          <EuiToolTip
+            content={i18n.translate('xpack.lens.indexPattern.randomSampling.experimentalLabel', {
+              defaultMessage: 'Technical preview',
+            })}
+          >
+            <EuiBetaBadge
+              css={css`
+                vertical-align: middle;
+              `}
+              iconType="beaker"
+              label={i18n.translate('xpack.lens.indexPattern.randomSampling.experimentalLabel', {
                 defaultMessage: 'Technical preview',
               })}
-            >
-              <EuiBetaBadge
-                css={css`
-                  vertical-align: middle;
-                `}
-                iconType="beaker"
-                label={i18n.translate('xpack.lens.indexPattern.randomSampling.experimentalLabel', {
-                  defaultMessage: 'Technical preview',
-                })}
-                size="s"
-              />
-            </EuiToolTip>
-          </>
-        }
-      >
-        <SamplingSlider
-          disabled={isSamplingValueDisabled}
-          disabledReason={i18n.translate('xpack.lens.indexPattern.randomSampling.disabledMessage', {
-            defaultMessage:
-              'In order to select a reduced sampling percentage, you must remove any maximum or minimum functions applied on this layer.',
-          })}
-          values={samplingValues}
-          currentValue={currentValue}
-          data-test-subj="lns-indexPattern-random-sampling-slider"
-          onChange={(newSamplingValue) => {
-            setState({
-              ...state,
-              layers: {
-                ...state.layers,
-                [layerId]: {
-                  ...state.layers[layerId],
-                  sampling: newSamplingValue,
-                },
+              size="s"
+            />
+          </EuiToolTip>
+        </>
+      }
+    >
+      <SamplingSlider
+        disabled={isSamplingValueDisabled}
+        disabledReason={i18n.translate('xpack.lens.indexPattern.randomSampling.disabledMessage', {
+          defaultMessage:
+            'In order to select a reduced sampling percentage, you must remove any maximum or minimum functions applied on this layer.',
+        })}
+        values={samplingValues}
+        currentValue={currentValue}
+        data-test-subj="lns-indexPattern-random-sampling-slider"
+        onChange={(newSamplingValue) => {
+          setState({
+            ...state,
+            layers: {
+              ...state.layers,
+              [layerId]: {
+                ...state.layers[layerId],
+                sampling: newSamplingValue,
               },
-            });
-          }}
-        />
-      </EuiFormRow>
-    </div>
+            },
+          });
+        }}
+      />
+    </EuiFormRow>
   );
 }

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

@@ -8,10 +8,12 @@
 import React from 'react';
 import { I18nProvider } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
+import { useEuiTheme } from '@elastic/eui';
 import { DatasourceLayerPanelProps } from '../../types';
 import { FormBasedPrivateState } from './types';
 import { ChangeIndexPattern } from '../../shared_components/dataview_picker/dataview_picker';
 import { getSamplingValue } from './utils';
+import { RandomSamplingIcon } from './sampling_icon';
 
 export interface FormBasedLayerPanelProps extends DatasourceLayerPanelProps<FormBasedPrivateState> {
   state: FormBasedPrivateState;
@@ -25,6 +27,7 @@ export function LayerPanel({
   dataViews,
 }: FormBasedLayerPanelProps) {
   const layer = state.layers[layerId];
+  const { euiTheme } = useEuiTheme();
 
   const indexPattern = dataViews.indexPatterns[layer.indexPatternId];
   const notFoundTitleLabel = i18n.translate('xpack.lens.layerPanel.missingDataView', {
@@ -38,6 +41,26 @@ export function LayerPanel({
     };
   });
 
+  const samplingValue = getSamplingValue(layer);
+  const extraIconLabelProps =
+    samplingValue !== 1
+      ? {
+          icon: {
+            component: (
+              <RandomSamplingIcon color={euiTheme.colors.disabledText} fill="currentColor" />
+            ),
+            value: `${samplingValue * 100}%`,
+            tooltipValue: i18n.translate('xpack.lens.indexPattern.randomSamplingInfo', {
+              defaultMessage: '{value}% sampling',
+              values: {
+                value: samplingValue * 100,
+              },
+            }),
+            'data-test-subj': 'lnsChangeIndexPatternSamplingInfo',
+          },
+        }
+      : {};
+
   return (
     <I18nProvider>
       <ChangeIndexPattern
@@ -48,7 +71,7 @@ export function LayerPanel({
           'data-test-subj': 'lns_layerIndexPatternLabel',
           size: 's',
           fontWeight: 'normal',
-          samplingValue: getSamplingValue(layer),
+          ...extraIconLabelProps,
         }}
         indexPatternId={layer.indexPatternId}
         indexPatternRefs={indexPatternRefs}

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx

@@ -318,6 +318,16 @@ export function LayerPanel(
   const [datasource] = Object.values(framePublicAPI.datasourceLayers);
   const isTextBasedLanguage = Boolean(datasource?.isTextBasedLanguage());
 
+  const visualizationLayerSettings = useMemo(
+    () =>
+      activeVisualization.hasLayerSettings?.({
+        layerId,
+        state: visualizationState,
+        frame: props.framePublicAPI,
+      }) || { data: false, appearance: false },
+    [activeVisualization, layerId, props.framePublicAPI, visualizationState]
+  );
+
   const compatibleActions = useMemo<LayerAction[]>(
     () =>
       [
@@ -341,11 +351,7 @@ export function LayerPanel(
           isOnlyLayer,
           isTextBasedLanguage,
           hasLayerSettings: Boolean(
-            (activeVisualization.hasLayerSettings?.({
-              layerId,
-              state: visualizationState,
-              frame: props.framePublicAPI,
-            }) &&
+            (Object.values(visualizationLayerSettings).some(Boolean) &&
               activeVisualization.renderLayerSettings) ||
               layerDatasource?.renderLayerSettings
           ),
@@ -364,8 +370,8 @@ export function LayerPanel(
       layerIndex,
       onCloneLayer,
       onRemoveLayer,
-      props.framePublicAPI,
       updateVisualization,
+      visualizationLayerSettings,
       visualizationState,
     ]
   );
@@ -682,22 +688,64 @@ export function LayerPanel(
         >
           <div id={layerId}>
             <div className="lnsIndexPatternDimensionEditor--padded">
+              {layerDatasource?.renderLayerSettings || visualizationLayerSettings.data ? (
+                <EuiText
+                  size="s"
+                  css={css`
+                    margin-bottom: ${euiThemeVars.euiSize};
+                  `}
+                >
+                  <h4>
+                    {i18n.translate('xpack.lens.editorFrame.layerSettings.headingData', {
+                      defaultMessage: 'Data',
+                    })}
+                  </h4>
+                </EuiText>
+              ) : null}
               {layerDatasource?.renderLayerSettings && (
                 <>
                   <NativeRenderer
                     render={layerDatasource.renderLayerSettings}
                     nativeProps={layerDatasourceConfigProps}
                   />
-                  <EuiSpacer size="m" />
                 </>
               )}
+              {layerDatasource?.renderLayerSettings && visualizationLayerSettings.data ? (
+                <EuiSpacer size="m" />
+              ) : null}
+              {activeVisualization?.renderLayerSettings && visualizationLayerSettings.data ? (
+                <NativeRenderer
+                  render={activeVisualization?.renderLayerSettings}
+                  nativeProps={{
+                    ...layerVisualizationConfigProps,
+                    setState: props.updateVisualization,
+                    panelRef: settingsPanelRef,
+                    section: 'data',
+                  }}
+                />
+              ) : null}
+              {visualizationLayerSettings.appearance ? (
+                <EuiText
+                  size="s"
+                  css={css`
+                    margin-bottom: ${euiThemeVars.euiSize};
+                  `}
+                >
+                  <h4>
+                    {i18n.translate('xpack.lens.editorFrame.layerSettings.headingAppearance', {
+                      defaultMessage: 'Appearance',
+                    })}
+                  </h4>
+                </EuiText>
+              ) : null}
               {activeVisualization?.renderLayerSettings && (
                 <NativeRenderer
                   render={activeVisualization?.renderLayerSettings}
                   nativeProps={{
                     ...layerVisualizationConfigProps,
                     setState: props.updateVisualization,
                     panelRef: settingsPanelRef,
+                    section: 'appearance',
                   }}
                 />
               )}