diff --git a/x-pack/legacy/plugins/lens/public/_config_panel.scss b/x-pack/legacy/plugins/lens/public/_config_panel.scss
deleted file mode 100644
index 5c6d25bf10818e..00000000000000
--- a/x-pack/legacy/plugins/lens/public/_config_panel.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.lnsConfigPanel__panel {
-  margin-bottom: $euiSizeS;
-}
-
-.lnsConfigPanel__axis {
-  background: $euiColorLightestShade;
-  padding: $euiSizeS;
-  border-radius: $euiBorderRadius;
-
-  // Add margin to the top of the next same panel
-  & + & {
-    margin-top: $euiSizeS;
-  }
-}
-
-.lnsConfigPanel__addLayerBtn {
-  color: transparentize($euiColorMediumShade, .3);
-  // sass-lint:disable-block no-important
-  box-shadow: none !important;
-  border: 1px dashed currentColor;
-}
diff --git a/x-pack/legacy/plugins/lens/public/datatable_visualization/visualization.test.tsx b/x-pack/legacy/plugins/lens/public/datatable_visualization/visualization.test.tsx
index 0cba22170df1fc..e18190b6c2d692 100644
--- a/x-pack/legacy/plugins/lens/public/datatable_visualization/visualization.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/datatable_visualization/visualization.test.tsx
@@ -4,18 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
 import { createMockDatasource } from '../editor_frame_service/mocks';
-import {
-  DatatableVisualizationState,
-  datatableVisualization,
-  DataTableLayer,
-} from './visualization';
-import { mount } from 'enzyme';
+import { DatatableVisualizationState, datatableVisualization } from './visualization';
 import { Operation, DataType, FramePublicAPI, TableSuggestionColumn } from '../types';
-import { generateId } from '../id_generator';
-
-jest.mock('../id_generator');
 
 function mockFrame(): FramePublicAPI {
   return {
@@ -34,12 +25,11 @@ function mockFrame(): FramePublicAPI {
 describe('Datatable Visualization', () => {
   describe('#initialize', () => {
     it('should initialize from the empty state', () => {
-      (generateId as jest.Mock).mockReturnValueOnce('id');
       expect(datatableVisualization.initialize(mockFrame(), undefined)).toEqual({
         layers: [
           {
             layerId: 'aaa',
-            columns: ['id'],
+            columns: [],
           },
         ],
       });
@@ -88,7 +78,6 @@ describe('Datatable Visualization', () => {
 
   describe('#clearLayer', () => {
     it('should reset the layer', () => {
-      (generateId as jest.Mock).mockReturnValueOnce('testid');
       const state: DatatableVisualizationState = {
         layers: [
           {
@@ -101,7 +90,7 @@ describe('Datatable Visualization', () => {
         layers: [
           {
             layerId: 'baz',
-            columns: ['testid'],
+            columns: [],
           },
         ],
       });
@@ -214,29 +203,35 @@ describe('Datatable Visualization', () => {
     });
   });
 
-  describe('DataTableLayer', () => {
-    it('allows all kinds of operations', () => {
-      const setState = jest.fn();
-      const datasource = createMockDatasource();
-      const layer = { layerId: 'a', columns: ['b', 'c'] };
+  describe('#getConfiguration', () => {
+    it('returns a single layer option', () => {
+      const datasource = createMockDatasource('test');
       const frame = mockFrame();
-      frame.datasourceLayers = { a: datasource.publicAPIMock };
+      frame.datasourceLayers = { first: datasource.publicAPIMock };
 
-      mount(
-        <DataTableLayer
-          layerId="layer1"
-          dragDropContext={{ dragging: undefined, setDragging: () => {} }}
-          frame={frame}
-          layer={layer}
-          setState={setState}
-          state={{ layers: [layer] }}
-        />
-      );
+      expect(
+        datatableVisualization.getConfiguration({
+          layerId: 'first',
+          state: {
+            layers: [{ layerId: 'first', columns: [] }],
+          },
+          frame,
+        }).groups
+      ).toHaveLength(1);
+    });
 
-      expect(datasource.publicAPIMock.renderDimensionPanel).toHaveBeenCalled();
+    it('allows all kinds of operations', () => {
+      const datasource = createMockDatasource('test');
+      const frame = mockFrame();
+      frame.datasourceLayers = { first: datasource.publicAPIMock };
 
-      const filterOperations =
-        datasource.publicAPIMock.renderDimensionPanel.mock.calls[0][1].filterOperations;
+      const filterOperations = datatableVisualization.getConfiguration({
+        layerId: 'first',
+        state: {
+          layers: [{ layerId: 'first', columns: [] }],
+        },
+        frame,
+      }).groups[0].filterOperations;
 
       const baseOperation: Operation = {
         dataType: 'string',
@@ -253,108 +248,80 @@ describe('Datatable Visualization', () => {
       );
     });
 
-    it('allows columns to be removed', () => {
-      const setState = jest.fn();
-      const datasource = createMockDatasource();
+    it('reorders the rendered colums based on the order from the datasource', () => {
+      const datasource = createMockDatasource('test');
       const layer = { layerId: 'a', columns: ['b', 'c'] };
       const frame = mockFrame();
       frame.datasourceLayers = { a: datasource.publicAPIMock };
-      const component = mount(
-        <DataTableLayer
-          layerId="layer1"
-          dragDropContext={{ dragging: undefined, setDragging: () => {} }}
-          frame={frame}
-          layer={layer}
-          setState={setState}
-          state={{ layers: [layer] }}
-        />
-      );
-
-      const onRemove = component
-        .find('[data-test-subj="datatable_multicolumnEditor"]')
-        .first()
-        .prop('onRemove') as (k: string) => {};
-
-      onRemove('b');
+      datasource.publicAPIMock.getTableSpec.mockReturnValue([{ columnId: 'c' }, { columnId: 'b' }]);
+
+      expect(
+        datatableVisualization.getConfiguration({
+          layerId: 'a',
+          state: { layers: [layer] },
+          frame,
+        }).groups[0].accessors
+      ).toEqual(['c', 'b']);
+    });
+  });
 
-      expect(setState).toHaveBeenCalledWith({
+  describe('#removeDimension', () => {
+    it('allows columns to be removed', () => {
+      const layer = { layerId: 'layer1', columns: ['b', 'c'] };
+      expect(
+        datatableVisualization.removeDimension({
+          prevState: { layers: [layer] },
+          layerId: 'layer1',
+          columnId: 'b',
+        })
+      ).toEqual({
         layers: [
           {
-            layerId: 'a',
+            layerId: 'layer1',
             columns: ['c'],
           },
         ],
       });
     });
+  });
 
+  describe('#setDimension', () => {
     it('allows columns to be added', () => {
-      (generateId as jest.Mock).mockReturnValueOnce('d');
-      const setState = jest.fn();
-      const datasource = createMockDatasource();
-      const layer = { layerId: 'a', columns: ['b', 'c'] };
-      const frame = mockFrame();
-      frame.datasourceLayers = { a: datasource.publicAPIMock };
-      const component = mount(
-        <DataTableLayer
-          layerId="layer1"
-          dragDropContext={{ dragging: undefined, setDragging: () => {} }}
-          frame={frame}
-          layer={layer}
-          setState={setState}
-          state={{ layers: [layer] }}
-        />
-      );
-
-      const onAdd = component
-        .find('[data-test-subj="datatable_multicolumnEditor"]')
-        .first()
-        .prop('onAdd') as () => {};
-
-      onAdd();
-
-      expect(setState).toHaveBeenCalledWith({
+      const layer = { layerId: 'layer1', columns: ['b', 'c'] };
+      expect(
+        datatableVisualization.setDimension({
+          prevState: { layers: [layer] },
+          layerId: 'layer1',
+          columnId: 'd',
+          groupId: '',
+        })
+      ).toEqual({
         layers: [
           {
-            layerId: 'a',
+            layerId: 'layer1',
             columns: ['b', 'c', 'd'],
           },
         ],
       });
     });
 
-    it('reorders the rendered colums based on the order from the datasource', () => {
-      const datasource = createMockDatasource();
-      const layer = { layerId: 'a', columns: ['b', 'c'] };
-      const frame = mockFrame();
-      frame.datasourceLayers = { a: datasource.publicAPIMock };
-      const component = mount(
-        <DataTableLayer
-          layerId="layer1"
-          dragDropContext={{ dragging: undefined, setDragging: () => {} }}
-          frame={frame}
-          layer={layer}
-          setState={jest.fn()}
-          state={{ layers: [layer] }}
-        />
-      );
-
-      const accessors = component
-        .find('[data-test-subj="datatable_multicolumnEditor"]')
-        .first()
-        .prop('accessors') as string[];
-
-      expect(accessors).toEqual(['b', 'c']);
-
-      component.setProps({
-        layer: { layerId: 'a', columns: ['c', 'b'] },
+    it('does not set a duplicate dimension', () => {
+      const layer = { layerId: 'layer1', columns: ['b', 'c'] };
+      expect(
+        datatableVisualization.setDimension({
+          prevState: { layers: [layer] },
+          layerId: 'layer1',
+          columnId: 'b',
+          groupId: '',
+        })
+      ).toEqual({
+        layers: [
+          {
+            layerId: 'layer1',
+            columns: ['b', 'c'],
+          },
+        ],
       });
-
-      const newAccessors = component
-        .find('[data-test-subj="datatable_multicolumnEditor"]')
-        .first()
-        .prop('accessors') as string[];
-
-      expect(newAccessors).toEqual(['c', 'b']);
     });
   });
 });
diff --git a/x-pack/legacy/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/legacy/plugins/lens/public/datatable_visualization/visualization.tsx
index 79a018635134f6..4248d722d55409 100644
--- a/x-pack/legacy/plugins/lens/public/datatable_visualization/visualization.tsx
+++ b/x-pack/legacy/plugins/lens/public/datatable_visualization/visualization.tsx
@@ -4,20 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { render } from 'react-dom';
-import { EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { I18nProvider } from '@kbn/i18n/react';
-import { MultiColumnEditor } from '../multi_column_editor';
-import {
-  SuggestionRequest,
-  Visualization,
-  VisualizationLayerConfigProps,
-  VisualizationSuggestion,
-  Operation,
-} from '../types';
-import { generateId } from '../id_generator';
+import { SuggestionRequest, Visualization, VisualizationSuggestion, Operation } from '../types';
 import chartTableSVG from '../assets/chart_datatable.svg';
 
 export interface LayerState {
@@ -32,58 +20,10 @@ export interface DatatableVisualizationState {
 function newLayerState(layerId: string): LayerState {
   return {
     layerId,
-    columns: [generateId()],
+    columns: [],
   };
 }
 
-function updateColumns(
-  state: DatatableVisualizationState,
-  layer: LayerState,
-  fn: (columns: string[]) => string[]
-) {
-  const columns = fn(layer.columns);
-  const updatedLayer = { ...layer, columns };
-  const layers = state.layers.map(l => (l.layerId === layer.layerId ? updatedLayer : l));
-  return { ...state, layers };
-}
-
-const allOperations = () => true;
-
-export function DataTableLayer({
-  layer,
-  frame,
-  state,
-  setState,
-  dragDropContext,
-}: { layer: LayerState } & VisualizationLayerConfigProps<DatatableVisualizationState>) {
-  const datasource = frame.datasourceLayers[layer.layerId];
-
-  const originalOrder = datasource.getTableSpec().map(({ columnId }) => columnId);
-  // When we add a column it could be empty, and therefore have no order
-  const sortedColumns = Array.from(new Set(originalOrder.concat(layer.columns)));
-
-  return (
-    <EuiFormRow
-      className="lnsConfigPanel__axis"
-      label={i18n.translate('xpack.lens.datatable.columns', { defaultMessage: 'Columns' })}
-    >
-      <MultiColumnEditor
-        accessors={sortedColumns}
-        datasource={datasource}
-        dragDropContext={dragDropContext}
-        filterOperations={allOperations}
-        layerId={layer.layerId}
-        onAdd={() => setState(updateColumns(state, layer, columns => [...columns, generateId()]))}
-        onRemove={column =>
-          setState(updateColumns(state, layer, columns => columns.filter(c => c !== column)))
-        }
-        testSubj="datatable_columns"
-        data-test-subj="datatable_multicolumnEditor"
-      />
-    </EuiFormRow>
-  );
-}
-
 export const datatableVisualization: Visualization<
   DatatableVisualizationState,
   DatatableVisualizationState
@@ -188,17 +128,56 @@ export const datatableVisualization: Visualization<
     ];
   },
 
-  renderLayerConfigPanel(domElement, props) {
-    const layer = props.state.layers.find(l => l.layerId === props.layerId);
-
-    if (layer) {
-      render(
-        <I18nProvider>
-          <DataTableLayer {...props} layer={layer} />
-        </I18nProvider>,
-        domElement
-      );
+  getConfiguration({ state, frame, layerId }) {
+    const layer = state.layers.find(l => l.layerId === layerId);
+    if (!layer) {
+      return { groups: [] };
     }
+
+    const datasource = frame.datasourceLayers[layer.layerId];
+    const originalOrder = datasource.getTableSpec().map(({ columnId }) => columnId);
+    // When we add a column it could be empty, and therefore have no order
+    const sortedColumns = Array.from(new Set(originalOrder.concat(layer.columns)));
+
+    return {
+      groups: [
+        {
+          groupId: 'columns',
+          groupLabel: i18n.translate('xpack.lens.datatable.columns', {
+            defaultMessage: 'Columns',
+          }),
+          layerId: state.layers[0].layerId,
+          accessors: sortedColumns,
+          supportsMoreColumns: true,
+          filterOperations: () => true,
+        },
+      ],
+    };
+  },
+
+  setDimension({ prevState, layerId, columnId }) {
+    return {
+      ...prevState,
+      layers: prevState.layers.map(l => {
+        if (l.layerId !== layerId || l.columns.includes(columnId)) {
+          return l;
+        }
+        return { ...l, columns: [...l.columns, columnId] };
+      }),
+    };
+  },
+  removeDimension({ prevState, layerId, columnId }) {
+    return {
+      ...prevState,
+      layers: prevState.layers.map(l =>
+        l.layerId === layerId
+          ? {
+              ...l,
+              columns: l.columns.filter(c => c !== columnId),
+            }
+          : l
+      ),
+    };
   },
 
   toExpression(state, frame) {
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/_config_panel_wrapper.scss b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/_config_panel_wrapper.scss
new file mode 100644
index 00000000000000..62a7f6b023f314
--- /dev/null
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/_config_panel_wrapper.scss
@@ -0,0 +1,50 @@
+.lnsConfigPanel__panel {
+  margin-bottom: $euiSizeS;
+}
+
+.lnsConfigPanel__row {
+  background: $euiColorLightestShade;
+  padding: $euiSizeS;
+  border-radius: $euiBorderRadius;
+
+  // Add margin to the top of the next same panel
+  & + & {
+    margin-top: $euiSizeS;
+  }
+}
+
+.lnsConfigPanel__addLayerBtn {
+  color: transparentize($euiColorMediumShade, .3);
+  // Remove EuiButton's default shadow to make button more subtle
+  // sass-lint:disable-block no-important
+  box-shadow: none !important;
+  border: 1px dashed currentColor;
+}
+
+.lnsConfigPanel__dimension {
+  @include euiFontSizeS;
+  background: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightestShade);
+  border-radius: $euiBorderRadius;
+  display: flex;
+  align-items: center;
+  margin-top: $euiSizeXS;
+  overflow: hidden;
+}
+
+.lnsConfigPanel__trigger {
+  max-width: 100%;
+  display: block;
+}
+
+.lnsConfigPanel__triggerLink {
+  padding: $euiSizeS;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  min-height: $euiSizeXXL;
+}
+
+.lnsConfigPanel__popover {
+  line-height: 0;
+  flex-grow: 1;
+}
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/chart_switch.test.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/chart_switch.test.tsx
index 1b60098fd45ad1..6698c9e68b98c0 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/chart_switch.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/chart_switch.test.tsx
@@ -84,7 +84,7 @@ describe('chart_switch', () => {
   }
 
   function mockDatasourceMap() {
-    const datasource = createMockDatasource();
+    const datasource = createMockDatasource('testDatasource');
     datasource.getDatasourceSuggestionsFromCurrentState.mockReturnValue([
       {
         state: {},
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/config_panel_wrapper.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/config_panel_wrapper.tsx
index 1422ee86be3e9b..c2cd0485de67ee 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/config_panel_wrapper.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/config_panel_wrapper.tsx
@@ -16,17 +16,21 @@ import {
   EuiToolTip,
   EuiButton,
   EuiForm,
+  EuiFormRow,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { NativeRenderer } from '../../native_renderer';
 import { Action } from './state_management';
 import {
   Visualization,
   FramePublicAPI,
   Datasource,
-  VisualizationLayerConfigProps,
+  VisualizationLayerWidgetProps,
+  DatasourceDimensionEditorProps,
+  StateSetter,
 } from '../../types';
-import { DragContext } from '../../drag_drop';
+import { DragContext, DragDrop, ChildDragDropProvider } from '../../drag_drop';
 import { ChartSwitch } from './chart_switch';
 import { trackUiEvent } from '../../lens_ui_telemetry';
 import { generateId } from '../../id_generator';
@@ -47,6 +51,7 @@ interface ConfigPanelWrapperProps {
       state: unknown;
     }
   >;
+  core: DatasourceDimensionEditorProps['core'];
 }
 
 export const ConfigPanelWrapper = memo(function ConfigPanelWrapper(props: ConfigPanelWrapperProps) {
@@ -86,8 +91,7 @@ function LayerPanels(
     activeDatasourceId,
     datasourceMap,
   } = props;
-  const dragDropContext = useContext(DragContext);
-  const setState = useMemo(
+  const setVisualizationState = useMemo(
     () => (newState: unknown) => {
       props.dispatch({
         type: 'UPDATE_VISUALIZATION_STATE',
@@ -98,6 +102,43 @@ function LayerPanels(
     },
     [props.dispatch, activeVisualization]
   );
+  const updateDatasource = useMemo(
+    () => (datasourceId: string, newState: unknown) => {
+      props.dispatch({
+        type: 'UPDATE_DATASOURCE_STATE',
+        updater: () => newState,
+        datasourceId,
+        clearStagedPreview: false,
+      });
+    },
+    [props.dispatch]
+  );
+  const updateAll = useMemo(
+    () => (datasourceId: string, newDatasourceState: unknown, newVisualizationState: unknown) => {
+      props.dispatch({
+        type: 'UPDATE_STATE',
+        subType: 'UPDATE_ALL_STATES',
+        updater: prevState => {
+          return {
+            ...prevState,
+            datasourceStates: {
+              ...prevState.datasourceStates,
+              [datasourceId]: {
+                state: newDatasourceState,
+                isLoading: false,
+              },
+            },
+            visualization: {
+              activeId: activeVisualization.id,
+              state: newVisualizationState,
+            },
+            stagedPreview: undefined,
+          };
+        },
+      });
+    },
+    [props.dispatch]
+  );
   const layerIds = activeVisualization.getLayerIds(visualizationState);
 
   return (
@@ -108,12 +149,13 @@ function LayerPanels(
           key={layerId}
           layerId={layerId}
           activeVisualization={activeVisualization}
-          dragDropContext={dragDropContext}
-          state={setState}
-          setState={setState}
+          visualizationState={visualizationState}
+          updateVisualization={setVisualizationState}
+          updateDatasource={updateDatasource}
+          updateAll={updateAll}
           frame={framePublicAPI}
           isOnlyLayer={layerIds.length === 1}
-          onRemove={() => {
+          onRemoveLayer={() => {
             dispatch({
               type: 'UPDATE_STATE',
               subType: 'REMOVE_OR_CLEAR_LAYER',
@@ -143,7 +185,7 @@ function LayerPanels(
               className="lnsConfigPanel__addLayerBtn"
               fullWidth
               size="s"
-              data-test-subj={`lnsXY_layer_add`}
+              data-test-subj="lnsXY_layer_add"
               aria-label={i18n.translate('xpack.lens.xyChart.addLayerButton', {
                 defaultMessage: 'Add layer',
               })}
@@ -174,85 +216,399 @@ function LayerPanels(
 }
 
 function LayerPanel(
-  props: ConfigPanelWrapperProps &
-    VisualizationLayerConfigProps<unknown> & {
-      isOnlyLayer: boolean;
-      activeVisualization: Visualization;
-      onRemove: () => void;
-    }
+  props: Exclude<ConfigPanelWrapperProps, 'state' | 'setState'> & {
+    frame: FramePublicAPI;
+    layerId: string;
+    isOnlyLayer: boolean;
+    activeVisualization: Visualization;
+    visualizationState: unknown;
+    updateVisualization: StateSetter<unknown>;
+    updateDatasource: (datasourceId: string, newState: unknown) => void;
+    updateAll: (
+      datasourceId: string,
+      newDatasourcestate: unknown,
+      newVisualizationState: unknown
+    ) => void;
+    onRemoveLayer: () => void;
+  }
 ) {
-  const { framePublicAPI, layerId, activeVisualization, isOnlyLayer, onRemove } = props;
+  const dragDropContext = useContext(DragContext);
+  const { framePublicAPI, layerId, activeVisualization, isOnlyLayer, onRemoveLayer } = props;
   const datasourcePublicAPI = framePublicAPI.datasourceLayers[layerId];
-  const layerConfigProps = {
+  if (!datasourcePublicAPI) {
+    return null;
+  }
+  const layerVisualizationConfigProps = {
     layerId,
-    dragDropContext: props.dragDropContext,
+    dragDropContext,
     state: props.visualizationState,
-    setState: props.setState,
     frame: props.framePublicAPI,
+    dateRange: props.framePublicAPI.dateRange,
   };
+  const datasourceId = datasourcePublicAPI.datasourceId;
+  const layerDatasourceState = props.datasourceStates[datasourceId].state;
+  const layerDatasource = props.datasourceMap[datasourceId];
 
-  return (
-    <EuiPanel className="lnsConfigPanel__panel" paddingSize="s">
-      <EuiFlexGroup gutterSize="s" alignItems="flexStart" responsive={false}>
-        <EuiFlexItem grow={false}>
-          <LayerSettings
-            layerId={layerId}
-            layerConfigProps={layerConfigProps}
-            activeVisualization={activeVisualization}
-          />
-        </EuiFlexItem>
+  const layerDatasourceDropProps = {
+    layerId,
+    dragDropContext,
+    state: layerDatasourceState,
+    setState: (newState: unknown) => {
+      props.updateDatasource(datasourceId, newState);
+    },
+  };
 
-        {datasourcePublicAPI && (
-          <EuiFlexItem className="eui-textTruncate">
-            <NativeRenderer
-              render={datasourcePublicAPI.renderLayerPanel}
-              nativeProps={{ layerId }}
+  const layerDatasourceConfigProps = {
+    ...layerDatasourceDropProps,
+    frame: props.framePublicAPI,
+    dateRange: props.framePublicAPI.dateRange,
+  };
+
+  const [popoverState, setPopoverState] = useState<{
+    isOpen: boolean;
+    openId: string | null;
+    addingToGroupId: string | null;
+  }>({
+    isOpen: false,
+    openId: null,
+    addingToGroupId: null,
+  });
+
+  const { groups } = activeVisualization.getConfiguration(layerVisualizationConfigProps);
+  const isEmptyLayer = !groups.some(d => d.accessors.length > 0);
+
+  function wrapInPopover(
+    id: string,
+    groupId: string,
+    trigger: React.ReactElement,
+    panel: React.ReactElement
+  ) {
+    const noMatch = popoverState.isOpen ? !groups.some(d => d.accessors.includes(id)) : false;
+    return (
+      <EuiPopover
+        className="lnsConfigPanel__popover"
+        anchorClassName="lnsConfigPanel__trigger"
+        isOpen={
+          popoverState.isOpen &&
+          (popoverState.openId === id || (noMatch && popoverState.addingToGroupId === groupId))
+        }
+        closePopover={() => {
+          setPopoverState({ isOpen: false, openId: null, addingToGroupId: null });
+        }}
+        button={trigger}
+        anchorPosition="leftUp"
+        withTitle
+        panelPaddingSize="s"
+      >
+        {panel}
+      </EuiPopover>
+    );
+  }
+
+  return (
+    <ChildDragDropProvider {...dragDropContext}>
+      <EuiPanel className="lnsConfigPanel__panel" paddingSize="s">
+        <EuiFlexGroup gutterSize="s" alignItems="flexStart" responsive={false}>
+          <EuiFlexItem grow={false}>
+            <LayerSettings
+              layerId={layerId}
+              layerConfigProps={{
+                ...layerVisualizationConfigProps,
+                setState: props.updateVisualization,
+              }}
+              activeVisualization={activeVisualization}
             />
           </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
-
-      <EuiSpacer size="s" />
 
-      <NativeRenderer
-        render={activeVisualization.renderLayerConfigPanel}
-        nativeProps={layerConfigProps}
-      />
+          {layerDatasource && (
+            <EuiFlexItem className="eui-textTruncate">
+              <NativeRenderer
+                render={layerDatasource.renderLayerPanel}
+                nativeProps={{
+                  layerId,
+                  state: layerDatasourceState,
+                  setState: (updater: unknown) => {
+                    const newState =
+                      typeof updater === 'function' ? updater(layerDatasourceState) : updater;
+                    // Look for removed columns
+                    const nextPublicAPI = layerDatasource.getPublicAPI({
+                      state: newState,
+                      layerId,
+                      dateRange: props.framePublicAPI.dateRange,
+                    });
+                    const nextTable = new Set(
+                      nextPublicAPI.getTableSpec().map(({ columnId }) => columnId)
+                    );
+                    const removed = datasourcePublicAPI
+                      .getTableSpec()
+                      .map(({ columnId }) => columnId)
+                      .filter(columnId => !nextTable.has(columnId));
+                    let nextVisState = props.visualizationState;
+                    removed.forEach(columnId => {
+                      nextVisState = activeVisualization.removeDimension({
+                        layerId,
+                        columnId,
+                        prevState: nextVisState,
+                      });
+                    });
 
-      <EuiSpacer size="s" />
+                    props.updateAll(datasourceId, newState, nextVisState);
+                  },
+                }}
+              />
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
 
-      <EuiFlexGroup justifyContent="center">
-        <EuiFlexItem grow={false}>
-          <EuiButtonEmpty
-            size="xs"
-            iconType="trash"
-            color="danger"
-            data-test-subj="lns_layer_remove"
-            onClick={() => {
-              // If we don't blur the remove / clear button, it remains focused
-              // which is a strange UX in this case. e.target.blur doesn't work
-              // due to who knows what, but probably event re-writing. Additionally,
-              // activeElement does not have blur so, we need to do some casting + safeguards.
-              const el = (document.activeElement as unknown) as { blur: () => void };
+        <EuiSpacer size="s" />
 
-              if (el && el.blur) {
-                el.blur();
+        {groups.map((group, index) => {
+          const newId = generateId();
+          const isMissing = !isEmptyLayer && group.required && group.accessors.length === 0;
+          return (
+            <EuiFormRow
+              className="lnsConfigPanel__row"
+              label={group.groupLabel}
+              key={index}
+              isInvalid={isMissing}
+              error={
+                isMissing
+                  ? i18n.translate('xpack.lens.editorFrame.requiredDimensionWarningLabel', {
+                      defaultMessage: 'Required dimension',
+                    })
+                  : []
               }
+            >
+              <>
+                {group.accessors.map(accessor => (
+                  <DragDrop
+                    key={accessor}
+                    className="lnsConfigPanel__dimension"
+                    data-test-subj={group.dataTestSubj}
+                    droppable={
+                      dragDropContext.dragging &&
+                      layerDatasource.canHandleDrop({
+                        ...layerDatasourceDropProps,
+                        columnId: accessor,
+                        filterOperations: group.filterOperations,
+                      })
+                    }
+                    onDrop={droppedItem => {
+                      layerDatasource.onDrop({
+                        ...layerDatasourceDropProps,
+                        droppedItem,
+                        columnId: accessor,
+                        filterOperations: group.filterOperations,
+                      });
+                    }}
+                  >
+                    {wrapInPopover(
+                      accessor,
+                      group.groupId,
+                      <NativeRenderer
+                        render={props.datasourceMap[datasourceId].renderDimensionTrigger}
+                        nativeProps={{
+                          ...layerDatasourceConfigProps,
+                          columnId: accessor,
+                          filterOperations: group.filterOperations,
+                          suggestedPriority: group.suggestedPriority,
+                          togglePopover: () => {
+                            if (popoverState.isOpen) {
+                              setPopoverState({
+                                isOpen: false,
+                                openId: null,
+                                addingToGroupId: null,
+                              });
+                            } else {
+                              setPopoverState({
+                                isOpen: true,
+                                openId: accessor,
+                                addingToGroupId: null, // not set for existing dimension
+                              });
+                            }
+                          },
+                        }}
+                      />,
+                      <NativeRenderer
+                        render={props.datasourceMap[datasourceId].renderDimensionEditor}
+                        nativeProps={{
+                          ...layerDatasourceConfigProps,
+                          core: props.core,
+                          columnId: accessor,
+                          filterOperations: group.filterOperations,
+                        }}
+                      />
+                    )}
 
-              onRemove();
-            }}
-          >
-            {isOnlyLayer
-              ? i18n.translate('xpack.lens.resetLayer', {
-                  defaultMessage: 'Reset layer',
-                })
-              : i18n.translate('xpack.lens.deleteLayer', {
-                  defaultMessage: 'Delete layer',
-                })}
-          </EuiButtonEmpty>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiPanel>
+                    <EuiButtonIcon
+                      data-test-subj="indexPattern-dimensionPopover-remove"
+                      iconType="cross"
+                      iconSize="s"
+                      size="s"
+                      color="danger"
+                      aria-label={i18n.translate('xpack.lens.indexPattern.removeColumnLabel', {
+                        defaultMessage: 'Remove configuration',
+                      })}
+                      title={i18n.translate('xpack.lens.indexPattern.removeColumnLabel', {
+                        defaultMessage: 'Remove configuration',
+                      })}
+                      onClick={() => {
+                        trackUiEvent('indexpattern_dimension_removed');
+                        props.updateAll(
+                          datasourceId,
+                          layerDatasource.removeColumn({
+                            layerId,
+                            columnId: accessor,
+                            prevState: layerDatasourceState,
+                          }),
+                          props.activeVisualization.removeDimension({
+                            layerId,
+                            columnId: accessor,
+                            prevState: props.visualizationState,
+                          })
+                        );
+                      }}
+                    />
+                  </DragDrop>
+                ))}
+                {group.supportsMoreColumns ? (
+                  <DragDrop
+                    className="lnsConfigPanel__dimension"
+                    data-test-subj={group.dataTestSubj}
+                    droppable={
+                      dragDropContext.dragging &&
+                      layerDatasource.canHandleDrop({
+                        ...layerDatasourceDropProps,
+                        columnId: newId,
+                        filterOperations: group.filterOperations,
+                      })
+                    }
+                    onDrop={droppedItem => {
+                      const dropSuccess = layerDatasource.onDrop({
+                        ...layerDatasourceDropProps,
+                        droppedItem,
+                        columnId: newId,
+                        filterOperations: group.filterOperations,
+                      });
+                      if (dropSuccess) {
+                        props.updateVisualization(
+                          activeVisualization.setDimension({
+                            layerId,
+                            groupId: group.groupId,
+                            columnId: newId,
+                            prevState: props.visualizationState,
+                          })
+                        );
+                      }
+                    }}
+                  >
+                    {wrapInPopover(
+                      newId,
+                      group.groupId,
+                      <div className="lnsConfigPanel__triggerLink">
+                        <EuiButtonEmpty
+                          iconType="plusInCircleFilled"
+                          data-test-subj="lns-empty-dimension"
+                          aria-label={i18n.translate('xpack.lens.configure.addConfig', {
+                            defaultMessage: 'Add a configuration',
+                          })}
+                          title={i18n.translate('xpack.lens.configure.addConfig', {
+                            defaultMessage: 'Add a configuration',
+                          })}
+                          onClick={() => {
+                            if (popoverState.isOpen) {
+                              setPopoverState({
+                                isOpen: false,
+                                openId: null,
+                                addingToGroupId: null,
+                              });
+                            } else {
+                              setPopoverState({
+                                isOpen: true,
+                                openId: newId,
+                                addingToGroupId: group.groupId,
+                              });
+                            }
+                          }}
+                          size="xs"
+                        >
+                          <FormattedMessage
+                            id="xpack.lens.configure.emptyConfig"
+                            defaultMessage="Drop a field here"
+                          />
+                        </EuiButtonEmpty>
+                      </div>,
+                      <NativeRenderer
+                        render={props.datasourceMap[datasourceId].renderDimensionEditor}
+                        nativeProps={{
+                          ...layerDatasourceConfigProps,
+                          core: props.core,
+                          columnId: newId,
+                          filterOperations: group.filterOperations,
+                          suggestedPriority: group.suggestedPriority,
+
+                          setState: (newState: unknown) => {
+                            props.updateAll(
+                              datasourceId,
+                              newState,
+                              activeVisualization.setDimension({
+                                layerId,
+                                groupId: group.groupId,
+                                columnId: newId,
+                                prevState: props.visualizationState,
+                              })
+                            );
+                            setPopoverState({
+                              isOpen: true,
+                              openId: newId,
+                              addingToGroupId: null, // clear now that dimension exists
+                            });
+                          },
+                        }}
+                      />
+                    )}
+                  </DragDrop>
+                ) : null}
+              </>
+            </EuiFormRow>
+          );
+        })}
+
+        <EuiSpacer size="s" />
+
+        <EuiFlexGroup justifyContent="center">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              size="xs"
+              iconType="trash"
+              color="danger"
+              data-test-subj="lns_layer_remove"
+              onClick={() => {
+                // If we don't blur the remove / clear button, it remains focused
+                // which is a strange UX in this case. e.target.blur doesn't work
+                // due to who knows what, but probably event re-writing. Additionally,
+                // activeElement does not have blur so, we need to do some casting + safeguards.
+                const el = (document.activeElement as unknown) as { blur: () => void };
+
+                if (el?.blur) {
+                  el.blur();
+                }
+
+                onRemoveLayer();
+              }}
+            >
+              {isOnlyLayer
+                ? i18n.translate('xpack.lens.resetLayer', {
+                    defaultMessage: 'Reset layer',
+                  })
+                : i18n.translate('xpack.lens.deleteLayer', {
+                    defaultMessage: 'Delete layer',
+                  })}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+    </ChildDragDropProvider>
   );
 }
 
@@ -263,7 +619,7 @@ function LayerSettings({
 }: {
   layerId: string;
   activeVisualization: Visualization;
-  layerConfigProps: VisualizationLayerConfigProps;
+  layerConfigProps: VisualizationLayerWidgetProps;
 }) {
   const [isOpen, setIsOpen] = useState(false);
 
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx
index dd591b3992fe52..8d8d38944e18a3 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx
@@ -87,14 +87,15 @@ describe('editor_frame', () => {
     mockVisualization.getLayerIds.mockReturnValue(['first']);
     mockVisualization2.getLayerIds.mockReturnValue(['second']);
 
-    mockDatasource = createMockDatasource();
-    mockDatasource2 = createMockDatasource();
+    mockDatasource = createMockDatasource('testDatasource');
+    mockDatasource2 = createMockDatasource('testDatasource2');
 
     expressionRendererMock = createExpressionRendererMock();
   });
 
   describe('initialization', () => {
     it('should initialize initial datasource', async () => {
+      mockVisualization.getLayerIds.mockReturnValue([]);
       await act(async () => {
         mount(
           <EditorFrame
@@ -138,7 +139,7 @@ describe('editor_frame', () => {
     });
 
     it('should initialize all datasources with state from doc', async () => {
-      const mockDatasource3 = createMockDatasource();
+      const mockDatasource3 = createMockDatasource('testDatasource3');
       const datasource1State = { datasource1: '' };
       const datasource2State = { datasource2: '' };
 
@@ -198,9 +199,9 @@ describe('editor_frame', () => {
             ExpressionRenderer={expressionRendererMock}
           />
         );
-        expect(mockVisualization.renderLayerConfigPanel).not.toHaveBeenCalled();
         expect(mockDatasource.renderDataPanel).not.toHaveBeenCalled();
       });
+      expect(mockDatasource.renderDataPanel).toHaveBeenCalled();
     });
 
     it('should not initialize visualization before datasource is initialized', async () => {
@@ -289,6 +290,7 @@ describe('editor_frame', () => {
       mockDatasource2.initialize.mockReturnValue(Promise.resolve(initialState));
       mockDatasource2.getLayers.mockReturnValue(['abc', 'def']);
       mockDatasource2.removeLayer.mockReturnValue({ removed: true });
+      mockVisualization.getLayerIds.mockReturnValue(['first', 'abc', 'def']);
       await act(async () => {
         mount(
           <EditorFrame
@@ -374,8 +376,7 @@ describe('editor_frame', () => {
         );
       });
 
-      expect(mockVisualization.renderLayerConfigPanel).toHaveBeenCalledWith(
-        expect.any(Element),
+      expect(mockVisualization.getConfiguration).toHaveBeenCalledWith(
         expect.objectContaining({ state: initialState })
       );
     });
@@ -614,15 +615,14 @@ describe('editor_frame', () => {
         );
       });
       const updatedState = {};
-      const setVisualizationState = (mockVisualization.renderLayerConfigPanel as jest.Mock).mock
-        .calls[0][1].setState;
+      const setDatasourceState = (mockDatasource.renderDataPanel as jest.Mock).mock.calls[0][1]
+        .setState;
       act(() => {
-        setVisualizationState(updatedState);
+        setDatasourceState(updatedState);
       });
 
-      expect(mockVisualization.renderLayerConfigPanel).toHaveBeenCalledTimes(2);
-      expect(mockVisualization.renderLayerConfigPanel).toHaveBeenLastCalledWith(
-        expect.any(Element),
+      expect(mockVisualization.getConfiguration).toHaveBeenCalledTimes(2);
+      expect(mockVisualization.getConfiguration).toHaveBeenLastCalledWith(
         expect.objectContaining({
           state: updatedState,
         })
@@ -688,8 +688,7 @@ describe('editor_frame', () => {
       });
 
       const updatedPublicAPI: DatasourcePublicAPI = {
-        renderLayerPanel: jest.fn(),
-        renderDimensionPanel: jest.fn(),
+        datasourceId: 'testDatasource',
         getOperationForColumnId: jest.fn(),
         getTableSpec: jest.fn(),
       };
@@ -701,9 +700,8 @@ describe('editor_frame', () => {
         setDatasourceState({});
       });
 
-      expect(mockVisualization.renderLayerConfigPanel).toHaveBeenCalledTimes(2);
-      expect(mockVisualization.renderLayerConfigPanel).toHaveBeenLastCalledWith(
-        expect.any(Element),
+      expect(mockVisualization.getConfiguration).toHaveBeenCalledTimes(2);
+      expect(mockVisualization.getConfiguration).toHaveBeenLastCalledWith(
         expect.objectContaining({
           frame: expect.objectContaining({
             datasourceLayers: {
@@ -719,6 +717,7 @@ describe('editor_frame', () => {
     it('should pass the datasource api for each layer to the visualization', async () => {
       mockDatasource.getLayers.mockReturnValue(['first']);
       mockDatasource2.getLayers.mockReturnValue(['second', 'third']);
+      mockVisualization.getLayerIds.mockReturnValue(['first', 'second', 'third']);
 
       await act(async () => {
         mount(
@@ -755,10 +754,10 @@ describe('editor_frame', () => {
         );
       });
 
-      expect(mockVisualization.renderLayerConfigPanel).toHaveBeenCalled();
+      expect(mockVisualization.getConfiguration).toHaveBeenCalled();
 
       const datasourceLayers =
-        mockVisualization.renderLayerConfigPanel.mock.calls[0][1].frame.datasourceLayers;
+        mockVisualization.getConfiguration.mock.calls[0][0].frame.datasourceLayers;
       expect(datasourceLayers.first).toBe(mockDatasource.publicAPIMock);
       expect(datasourceLayers.second).toBe(mockDatasource2.publicAPIMock);
       expect(datasourceLayers.third).toBe(mockDatasource2.publicAPIMock);
@@ -811,21 +810,18 @@ describe('editor_frame', () => {
       expect(mockDatasource.getPublicAPI).toHaveBeenCalledWith(
         expect.objectContaining({
           state: datasource1State,
-          setState: expect.anything(),
           layerId: 'first',
         })
       );
       expect(mockDatasource2.getPublicAPI).toHaveBeenCalledWith(
         expect.objectContaining({
           state: datasource2State,
-          setState: expect.anything(),
           layerId: 'second',
         })
       );
       expect(mockDatasource2.getPublicAPI).toHaveBeenCalledWith(
         expect.objectContaining({
           state: datasource2State,
-          setState: expect.anything(),
           layerId: 'third',
         })
       );
@@ -858,45 +854,9 @@ describe('editor_frame', () => {
       expect(mockDatasource.getPublicAPI).toHaveBeenCalledWith({
         dateRange,
         state: datasourceState,
-        setState: expect.any(Function),
         layerId: 'first',
       });
     });
-
-    it('should re-create the public api after state has been set', async () => {
-      mockDatasource.getLayers.mockReturnValue(['first']);
-
-      await act(async () => {
-        mount(
-          <EditorFrame
-            {...getDefaultProps()}
-            visualizationMap={{
-              testVis: mockVisualization,
-            }}
-            datasourceMap={{
-              testDatasource: mockDatasource,
-            }}
-            initialDatasourceId="testDatasource"
-            initialVisualizationId="testVis"
-            ExpressionRenderer={expressionRendererMock}
-          />
-        );
-      });
-
-      const updatedState = {};
-      const setDatasourceState = mockDatasource.getPublicAPI.mock.calls[0][0].setState;
-      act(() => {
-        setDatasourceState(updatedState);
-      });
-
-      expect(mockDatasource.getPublicAPI).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          state: updatedState,
-          setState: expect.any(Function),
-          layerId: 'first',
-        })
-      );
-    });
   });
 
   describe('switching', () => {
@@ -1021,8 +981,7 @@ describe('editor_frame', () => {
 
       expect(mockVisualization2.getSuggestions).toHaveBeenCalled();
       expect(mockVisualization2.initialize).toHaveBeenCalledWith(expect.anything(), initialState);
-      expect(mockVisualization2.renderLayerConfigPanel).toHaveBeenCalledWith(
-        expect.any(Element),
+      expect(mockVisualization2.getConfiguration).toHaveBeenCalledWith(
         expect.objectContaining({ state: { initial: true } })
       );
     });
@@ -1039,8 +998,7 @@ describe('editor_frame', () => {
           datasourceLayers: expect.objectContaining({ first: mockDatasource.publicAPIMock }),
         })
       );
-      expect(mockVisualization2.renderLayerConfigPanel).toHaveBeenCalledWith(
-        expect.any(Element),
+      expect(mockVisualization2.getConfiguration).toHaveBeenCalledWith(
         expect.objectContaining({ state: { initial: true } })
       );
     });
@@ -1239,9 +1197,8 @@ describe('editor_frame', () => {
           .simulate('click');
       });
 
-      expect(mockVisualization.renderLayerConfigPanel).toHaveBeenCalledTimes(1);
-      expect(mockVisualization.renderLayerConfigPanel).toHaveBeenCalledWith(
-        expect.any(Element),
+      expect(mockVisualization.getConfiguration).toHaveBeenCalledTimes(1);
+      expect(mockVisualization.getConfiguration).toHaveBeenCalledWith(
         expect.objectContaining({
           state: suggestionVisState,
         })
@@ -1306,8 +1263,7 @@ describe('editor_frame', () => {
           .simulate('drop');
       });
 
-      expect(mockVisualization.renderLayerConfigPanel).toHaveBeenCalledWith(
-        expect.any(Element),
+      expect(mockVisualization.getConfiguration).toHaveBeenCalledWith(
         expect.objectContaining({
           state: suggestionVisState,
         })
@@ -1375,14 +1331,16 @@ describe('editor_frame', () => {
       instance.update();
 
       act(() => {
-        instance.find(DragDrop).prop('onDrop')!({
+        instance
+          .find(DragDrop)
+          .filter('[data-test-subj="mockVisA"]')
+          .prop('onDrop')!({
           indexPatternId: '1',
           field: {},
         });
       });
 
-      expect(mockVisualization2.renderLayerConfigPanel).toHaveBeenCalledWith(
-        expect.any(Element),
+      expect(mockVisualization2.getConfiguration).toHaveBeenCalledWith(
         expect.objectContaining({
           state: suggestionVisState,
         })
@@ -1472,14 +1430,16 @@ describe('editor_frame', () => {
       instance.update();
 
       act(() => {
-        instance.find(DragDrop).prop('onDrop')!({
+        instance
+          .find(DragDrop)
+          .filter('[data-test-subj="lnsWorkspace"]')
+          .prop('onDrop')!({
           indexPatternId: '1',
           field: {},
         });
       });
 
-      expect(mockVisualization3.renderLayerConfigPanel).toHaveBeenCalledWith(
-        expect.any(Element),
+      expect(mockVisualization3.getConfiguration).toHaveBeenCalledWith(
         expect.objectContaining({
           state: suggestionVisState,
         })
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx
index a456372c99c01d..082519d9a8febc 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx
@@ -21,6 +21,7 @@ import { FrameLayout } from './frame_layout';
 import { SuggestionPanel } from './suggestion_panel';
 import { WorkspacePanel } from './workspace_panel';
 import { Document } from '../../persistence/saved_object_store';
+import { RootDragDropProvider } from '../../drag_drop';
 import { getSavedObjectFormat } from './save';
 import { WorkspacePanelWrapper } from './workspace_panel_wrapper';
 import { generateId } from '../../id_generator';
@@ -90,21 +91,11 @@ export function EditorFrame(props: EditorFrameProps) {
 
       const layers = datasource.getLayers(datasourceState);
       layers.forEach(layer => {
-        const publicAPI = props.datasourceMap[id].getPublicAPI({
+        datasourceLayers[layer] = props.datasourceMap[id].getPublicAPI({
           state: datasourceState,
-          setState: (newState: unknown) => {
-            dispatch({
-              type: 'UPDATE_DATASOURCE_STATE',
-              datasourceId: id,
-              updater: newState,
-              clearStagedPreview: true,
-            });
-          },
           layerId: layer,
           dateRange: props.dateRange,
         });
-
-        datasourceLayers[layer] = publicAPI;
       });
     });
 
@@ -235,74 +226,79 @@ export function EditorFrame(props: EditorFrameProps) {
   ]);
 
   return (
-    <FrameLayout
-      dataPanel={
-        <DataPanelWrapper
-          datasourceMap={props.datasourceMap}
-          activeDatasource={state.activeDatasourceId}
-          datasourceState={
-            state.activeDatasourceId ? state.datasourceStates[state.activeDatasourceId].state : null
-          }
-          datasourceIsLoading={
-            state.activeDatasourceId
-              ? state.datasourceStates[state.activeDatasourceId].isLoading
-              : true
-          }
-          dispatch={dispatch}
-          core={props.core}
-          query={props.query}
-          dateRange={props.dateRange}
-          filters={props.filters}
-        />
-      }
-      configPanel={
-        allLoaded && (
-          <ConfigPanelWrapper
-            activeDatasourceId={state.activeDatasourceId!}
+    <RootDragDropProvider>
+      <FrameLayout
+        dataPanel={
+          <DataPanelWrapper
             datasourceMap={props.datasourceMap}
-            datasourceStates={state.datasourceStates}
-            visualizationMap={props.visualizationMap}
-            activeVisualizationId={state.visualization.activeId}
+            activeDatasource={state.activeDatasourceId}
+            datasourceState={
+              state.activeDatasourceId
+                ? state.datasourceStates[state.activeDatasourceId].state
+                : null
+            }
+            datasourceIsLoading={
+              state.activeDatasourceId
+                ? state.datasourceStates[state.activeDatasourceId].isLoading
+                : true
+            }
             dispatch={dispatch}
-            visualizationState={state.visualization.state}
-            framePublicAPI={framePublicAPI}
+            core={props.core}
+            query={props.query}
+            dateRange={props.dateRange}
+            filters={props.filters}
           />
-        )
-      }
-      workspacePanel={
-        allLoaded && (
-          <WorkspacePanelWrapper title={state.title}>
-            <WorkspacePanel
+        }
+        configPanel={
+          allLoaded && (
+            <ConfigPanelWrapper
+              activeDatasourceId={state.activeDatasourceId!}
+              datasourceMap={props.datasourceMap}
+              datasourceStates={state.datasourceStates}
+              visualizationMap={props.visualizationMap}
+              activeVisualizationId={state.visualization.activeId}
+              dispatch={dispatch}
+              visualizationState={state.visualization.state}
+              framePublicAPI={framePublicAPI}
+              core={props.core}
+            />
+          )
+        }
+        workspacePanel={
+          allLoaded && (
+            <WorkspacePanelWrapper title={state.title}>
+              <WorkspacePanel
+                activeDatasourceId={state.activeDatasourceId}
+                activeVisualizationId={state.visualization.activeId}
+                datasourceMap={props.datasourceMap}
+                datasourceStates={state.datasourceStates}
+                framePublicAPI={framePublicAPI}
+                visualizationState={state.visualization.state}
+                visualizationMap={props.visualizationMap}
+                dispatch={dispatch}
+                ExpressionRenderer={props.ExpressionRenderer}
+                core={props.core}
+              />
+            </WorkspacePanelWrapper>
+          )
+        }
+        suggestionsPanel={
+          allLoaded && (
+            <SuggestionPanel
+              frame={framePublicAPI}
               activeDatasourceId={state.activeDatasourceId}
               activeVisualizationId={state.visualization.activeId}
               datasourceMap={props.datasourceMap}
               datasourceStates={state.datasourceStates}
-              framePublicAPI={framePublicAPI}
               visualizationState={state.visualization.state}
               visualizationMap={props.visualizationMap}
               dispatch={dispatch}
               ExpressionRenderer={props.ExpressionRenderer}
-              core={props.core}
+              stagedPreview={state.stagedPreview}
             />
-          </WorkspacePanelWrapper>
-        )
-      }
-      suggestionsPanel={
-        allLoaded && (
-          <SuggestionPanel
-            frame={framePublicAPI}
-            activeDatasourceId={state.activeDatasourceId}
-            activeVisualizationId={state.visualization.activeId}
-            datasourceMap={props.datasourceMap}
-            datasourceStates={state.datasourceStates}
-            visualizationState={state.visualization.state}
-            visualizationMap={props.visualizationMap}
-            dispatch={dispatch}
-            ExpressionRenderer={props.ExpressionRenderer}
-            stagedPreview={state.stagedPreview}
-          />
-        )
-      }
-    />
+          )
+        }
+      />
+    </RootDragDropProvider>
   );
 }
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.tsx
index a69da8b49e2330..56afe3ed69a734 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.tsx
@@ -6,7 +6,6 @@
 
 import React from 'react';
 import { EuiPage, EuiPageSideBar, EuiPageBody } from '@elastic/eui';
-import { RootDragDropProvider } from '../../drag_drop';
 
 export interface FrameLayoutProps {
   dataPanel: React.ReactNode;
@@ -17,19 +16,17 @@ export interface FrameLayoutProps {
 
 export function FrameLayout(props: FrameLayoutProps) {
   return (
-    <RootDragDropProvider>
-      <EuiPage className="lnsFrameLayout">
-        <div className="lnsFrameLayout__pageContent">
-          <EuiPageSideBar className="lnsFrameLayout__sidebar">{props.dataPanel}</EuiPageSideBar>
-          <EuiPageBody className="lnsFrameLayout__pageBody" restrictWidth={false}>
-            {props.workspacePanel}
-            {props.suggestionsPanel}
-          </EuiPageBody>
-          <EuiPageSideBar className="lnsFrameLayout__sidebar lnsFrameLayout__sidebar--right">
-            {props.configPanel}
-          </EuiPageSideBar>
-        </div>
-      </EuiPage>
-    </RootDragDropProvider>
+    <EuiPage className="lnsFrameLayout">
+      <div className="lnsFrameLayout__pageContent">
+        <EuiPageSideBar className="lnsFrameLayout__sidebar">{props.dataPanel}</EuiPageSideBar>
+        <EuiPageBody className="lnsFrameLayout__pageBody" restrictWidth={false}>
+          {props.workspacePanel}
+          {props.suggestionsPanel}
+        </EuiPageBody>
+        <EuiPageSideBar className="lnsFrameLayout__sidebar lnsFrameLayout__sidebar--right">
+          {props.configPanel}
+        </EuiPageSideBar>
+      </div>
+    </EuiPage>
   );
 }
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/index.scss b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/index.scss
index fee28c374ef7ef..6c6a63c8c7eb6d 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/index.scss
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/index.scss
@@ -1,4 +1,5 @@
 @import './chart_switch';
+@import './config_panel_wrapper';
 @import './data_panel_wrapper';
 @import './expression_renderer';
 @import './frame_layout';
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/save.test.ts b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/save.test.ts
index 158a6cb8c979aa..60bfbc493f61cc 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/save.test.ts
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/save.test.ts
@@ -11,7 +11,7 @@ import { esFilters, IIndexPattern, IFieldType } from '../../../../../../../src/p
 describe('save editor frame state', () => {
   const mockVisualization = createMockVisualization();
   mockVisualization.getPersistableState.mockImplementation(x => x);
-  const mockDatasource = createMockDatasource();
+  const mockDatasource = createMockDatasource('a');
   const mockIndexPattern = ({ id: 'indexpattern' } as unknown) as IIndexPattern;
   const mockField = ({ name: '@timestamp' } as unknown) as IFieldType;
 
@@ -45,7 +45,7 @@ describe('save editor frame state', () => {
   };
 
   it('transforms from internal state to persisted doc format', async () => {
-    const datasource = createMockDatasource();
+    const datasource = createMockDatasource('a');
     datasource.getPersistableState.mockImplementation(state => ({
       stuff: `${state}_datasource_persisted`,
     }));
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.test.ts b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.test.ts
index 487a91c22b5d53..63b8b1f0482968 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.test.ts
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.test.ts
@@ -30,7 +30,7 @@ let datasourceStates: Record<
 
 beforeEach(() => {
   datasourceMap = {
-    mock: createMockDatasource(),
+    mock: createMockDatasource('a'),
   };
 
   datasourceStates = {
@@ -147,9 +147,9 @@ describe('suggestion helpers', () => {
       },
     };
     const multiDatasourceMap = {
-      mock: createMockDatasource(),
-      mock2: createMockDatasource(),
-      mock3: createMockDatasource(),
+      mock: createMockDatasource('a'),
+      mock2: createMockDatasource('a'),
+      mock3: createMockDatasource('a'),
     };
     const droppedField = {};
     getSuggestions({
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx
index 9729d6259f84ac..b146f2467c46cd 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx
@@ -39,7 +39,7 @@ describe('suggestion_panel', () => {
 
   beforeEach(() => {
     mockVisualization = createMockVisualization();
-    mockDatasource = createMockDatasource();
+    mockDatasource = createMockDatasource('a');
     expressionRendererMock = createExpressionRendererMock();
     dispatchMock = jest.fn();
 
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
index 1115126792c861..93f6ea6ea67acb 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
@@ -373,7 +373,6 @@ function getPreviewExpression(
           layerId,
           dateRange: frame.dateRange,
           state: datasourceState,
-          setState: () => {},
         });
       }
     });
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel.test.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel.test.tsx
index a51091d39f84c8..748e5b876da951 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel.test.tsx
@@ -36,7 +36,7 @@ describe('workspace_panel', () => {
     mockVisualization = createMockVisualization();
     mockVisualization2 = createMockVisualization();
 
-    mockDatasource = createMockDatasource();
+    mockDatasource = createMockDatasource('a');
 
     expressionRendererMock = createExpressionRendererMock();
   });
@@ -199,7 +199,7 @@ describe('workspace_panel', () => {
   });
 
   it('should include data fetching for each layer in the expression', () => {
-    const mockDatasource2 = createMockDatasource();
+    const mockDatasource2 = createMockDatasource('a');
     const framePublicAPI = createMockFramePublicAPI();
     framePublicAPI.datasourceLayers = {
       first: mockDatasource.publicAPIMock,
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_service/mocks.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_service/mocks.tsx
index e606c69c8c3867..5d2f68a5567ebd 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_service/mocks.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_service/mocks.tsx
@@ -33,9 +33,24 @@ export function createMockVisualization(): jest.Mocked<Visualization> {
     getPersistableState: jest.fn(_state => _state),
     getSuggestions: jest.fn(_options => []),
     initialize: jest.fn((_frame, _state?) => ({})),
-    renderLayerConfigPanel: jest.fn(),
+    getConfiguration: jest.fn(props => ({
+      groups: [
+        {
+          groupId: 'a',
+          groupLabel: 'a',
+          layerId: 'layer1',
+          supportsMoreColumns: true,
+          accessors: [],
+          filterOperations: jest.fn(() => true),
+          dataTestSubj: 'mockVisA',
+        },
+      ],
+    })),
     toExpression: jest.fn((_state, _frame) => null),
     toPreviewExpression: jest.fn((_state, _frame) => null),
+
+    setDimension: jest.fn(),
+    removeDimension: jest.fn(),
   };
 }
 
@@ -43,12 +58,11 @@ export type DatasourceMock = jest.Mocked<Datasource> & {
   publicAPIMock: jest.Mocked<DatasourcePublicAPI>;
 };
 
-export function createMockDatasource(): DatasourceMock {
+export function createMockDatasource(id: string): DatasourceMock {
   const publicAPIMock: jest.Mocked<DatasourcePublicAPI> = {
+    datasourceId: id,
     getTableSpec: jest.fn(() => []),
     getOperationForColumnId: jest.fn(),
-    renderDimensionPanel: jest.fn(),
-    renderLayerPanel: jest.fn(),
   };
 
   return {
@@ -60,12 +74,19 @@ export function createMockDatasource(): DatasourceMock {
     getPublicAPI: jest.fn().mockReturnValue(publicAPIMock),
     initialize: jest.fn((_state?) => Promise.resolve()),
     renderDataPanel: jest.fn(),
+    renderLayerPanel: jest.fn(),
     toExpression: jest.fn((_frame, _state) => null),
     insertLayer: jest.fn((_state, _newLayerId) => {}),
     removeLayer: jest.fn((_state, _layerId) => {}),
+    removeColumn: jest.fn(props => {}),
     getLayers: jest.fn(_state => []),
     getMetaData: jest.fn(_state => ({ filterableIndexPatterns: [] })),
 
+    renderDimensionTrigger: jest.fn(),
+    renderDimensionEditor: jest.fn(),
+    canHandleDrop: jest.fn(),
+    onDrop: jest.fn(),
+
     // this is an additional property which doesn't exist on real datasources
     // but can be used to validate whether specific API mock functions are called
     publicAPIMock,
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_service/service.test.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_service/service.test.tsx
index 2e1645c816140c..b1c0b3c8b4c2c5 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_service/service.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_service/service.test.tsx
@@ -43,7 +43,7 @@ describe('editor_frame service', () => {
       (async () => {
         pluginInstance.setup(coreMock.createSetup(), pluginSetupDependencies);
         const publicAPI = pluginInstance.start(coreMock.createStart(), pluginStartDependencies);
-        const instance = await publicAPI.createInstance({});
+        const instance = await publicAPI.createInstance();
         instance.mount(mountpoint, {
           onError: jest.fn(),
           onChange: jest.fn(),
@@ -59,7 +59,7 @@ describe('editor_frame service', () => {
   it('should not have child nodes after unmount', async () => {
     pluginInstance.setup(coreMock.createSetup(), pluginSetupDependencies);
     const publicAPI = pluginInstance.start(coreMock.createStart(), pluginStartDependencies);
-    const instance = await publicAPI.createInstance({});
+    const instance = await publicAPI.createInstance();
     instance.mount(mountpoint, {
       onError: jest.fn(),
       onChange: jest.fn(),
diff --git a/x-pack/legacy/plugins/lens/public/index.scss b/x-pack/legacy/plugins/lens/public/index.scss
index 496573f6a1c9a4..2f91d14c397c70 100644
--- a/x-pack/legacy/plugins/lens/public/index.scss
+++ b/x-pack/legacy/plugins/lens/public/index.scss
@@ -4,8 +4,6 @@
 @import './variables';
 @import './mixins';
 
-@import './config_panel';
-
 @import './app_plugin/index';
 @import 'datatable_visualization/index';
 @import './drag_drop/index';
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/_dimension_panel.scss b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/_dimension_panel.scss
deleted file mode 100644
index ddb37505f99851..00000000000000
--- a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/_dimension_panel.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.lnsIndexPatternDimensionPanel {
-  @include euiFontSizeS;
-  background-color: $euiColorEmptyShade;
-  border-radius: $euiBorderRadius;
-  display: flex;
-  align-items: center;
-  margin-top: $euiSizeXS;
-  overflow: hidden;
-}
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/_index.scss b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/_index.scss
index 2ce3e11171fc9e..26f805fe735f02 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/_index.scss
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/_index.scss
@@ -1,3 +1,2 @@
-@import './dimension_panel';
 @import './field_select';
 @import './popover';
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/_popover.scss b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/_popover.scss
index 8f26ab91e0f167..07a72ee1f66fce 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/_popover.scss
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/_popover.scss
@@ -1,37 +1,24 @@
-.lnsPopoverEditor {
+.lnsIndexPatternDimensionEditor {
   flex-grow: 1;
   line-height: 0;
   overflow: hidden;
 }
 
-.lnsPopoverEditor__anchor {
-  max-width: 100%;
-  display: block;
-}
-
-.lnsPopoverEditor__link {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: $euiSizeS;
-  min-height: $euiSizeXXL;
-}
-
-.lnsPopoverEditor__left,
-.lnsPopoverEditor__right {
+.lnsIndexPatternDimensionEditor__left,
+.lnsIndexPatternDimensionEditor__right {
   padding: $euiSizeS;
 }
 
-.lnsPopoverEditor__left {
+.lnsIndexPatternDimensionEditor__left {
   padding-top: 0;
   background-color: $euiPageBackgroundColor;
 }
 
-.lnsPopoverEditor__right {
+.lnsIndexPatternDimensionEditor__right {
   width: $euiSize * 20;
 }
 
-.lnsPopoverEditor__operation {
+.lnsIndexPatternDimensionEditor__operation {
   @include euiFontSizeS;
   color: $euiColorPrimary;
 
@@ -41,11 +28,11 @@
   }
 }
 
-.lnsPopoverEditor__operation--selected {
+.lnsIndexPatternDimensionEditor__operation--selected {
   font-weight: bold;
   color: $euiTextColor;
 }
 
-.lnsPopoverEditor__operation--incompatible {
+.lnsIndexPatternDimensionEditor__operation--incompatible {
   color: $euiColorMediumShade;
 }
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx
index 56f75ae4b17be7..41c317ccab290f 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx
@@ -7,27 +7,28 @@
 import { ReactWrapper, ShallowWrapper } from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import {
-  EuiComboBox,
-  EuiSideNav,
-  EuiSideNavItemType,
-  EuiPopover,
-  EuiFieldNumber,
-} from '@elastic/eui';
+import { EuiComboBox, EuiSideNav, EuiSideNavItemType, EuiFieldNumber } from '@elastic/eui';
 import { DataPublicPluginStart } from '../../../../../../../src/plugins/data/public';
 import { changeColumn } from '../state_helpers';
 import {
-  IndexPatternDimensionPanel,
-  IndexPatternDimensionPanelComponent,
-  IndexPatternDimensionPanelProps,
+  IndexPatternDimensionEditorComponent,
+  IndexPatternDimensionEditorProps,
+  onDrop,
+  canHandleDrop,
 } from './dimension_panel';
-import { DropHandler, DragContextState } from '../../drag_drop';
+import { DragContextState } from '../../drag_drop';
 import { createMockedDragDropContext } from '../mocks';
 import { mountWithIntl as mount, shallowWithIntl as shallow } from 'test_utils/enzyme_helpers';
-import { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'src/core/public';
+import {
+  IUiSettingsClient,
+  SavedObjectsClientContract,
+  HttpSetup,
+  CoreSetup,
+} from 'src/core/public';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import { IndexPatternPrivateState } from '../types';
 import { documentField } from '../document_field';
+import { OperationMetadata } from '../../types';
 
 jest.mock('ui/new_platform');
 jest.mock('../loader');
@@ -79,20 +80,12 @@ const expectedIndexPatterns = {
   },
 };
 
-describe('IndexPatternDimensionPanel', () => {
-  let wrapper: ReactWrapper | ShallowWrapper;
+describe('IndexPatternDimensionEditorPanel', () => {
   let state: IndexPatternPrivateState;
   let setState: jest.Mock;
-  let defaultProps: IndexPatternDimensionPanelProps;
+  let defaultProps: IndexPatternDimensionEditorProps;
   let dragDropContext: DragContextState;
 
-  function openPopover() {
-    wrapper
-      .find('[data-test-subj="indexPattern-configure-dimension"]')
-      .first()
-      .simulate('click');
-  }
-
   beforeEach(() => {
     state = {
       indexPatternRefs: [],
@@ -134,7 +127,6 @@ describe('IndexPatternDimensionPanel', () => {
     dragDropContext = createMockedDragDropContext();
 
     defaultProps = {
-      dragDropContext,
       state,
       setState,
       dateRange: { fromDate: 'now-1d', toDate: 'now' },
@@ -158,475 +150,582 @@ describe('IndexPatternDimensionPanel', () => {
           }),
         } as unknown) as DataPublicPluginStart['fieldFormats'],
       } as unknown) as DataPublicPluginStart,
+      core: {} as CoreSetup,
     };
 
     jest.clearAllMocks();
   });
 
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-  });
+  describe('Editor component', () => {
+    let wrapper: ReactWrapper | ShallowWrapper;
 
-  it('should display a configure button if dimension has no column yet', () => {
-    wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} columnId={'col2'} />);
-    expect(
-      wrapper
-        .find('[data-test-subj="indexPattern-configure-dimension"]')
-        .first()
-        .prop('iconType')
-    ).toEqual('plusInCircleFilled');
-  });
+    afterEach(() => {
+      if (wrapper) {
+        wrapper.unmount();
+      }
+    });
 
-  it('should call the filterOperations function', () => {
-    const filterOperations = jest.fn().mockReturnValue(true);
+    it('should call the filterOperations function', () => {
+      const filterOperations = jest.fn().mockReturnValue(true);
 
-    wrapper = shallow(
-      <IndexPatternDimensionPanelComponent {...defaultProps} filterOperations={filterOperations} />
-    );
+      wrapper = shallow(
+        <IndexPatternDimensionEditorComponent
+          {...defaultProps}
+          filterOperations={filterOperations}
+        />
+      );
 
-    expect(filterOperations).toBeCalled();
-  });
+      expect(filterOperations).toBeCalled();
+    });
 
-  it('should show field select combo box on click', () => {
-    wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} />);
+    it('should show field select combo box on click', () => {
+      wrapper = mount(<IndexPatternDimensionEditorComponent {...defaultProps} />);
 
-    openPopover();
+      expect(
+        wrapper.find(EuiComboBox).filter('[data-test-subj="indexPattern-dimension-field"]')
+      ).toHaveLength(1);
+    });
 
-    expect(
-      wrapper.find(EuiComboBox).filter('[data-test-subj="indexPattern-dimension-field"]')
-    ).toHaveLength(1);
-  });
+    it('should not show any choices if the filter returns false', () => {
+      wrapper = mount(
+        <IndexPatternDimensionEditorComponent
+          {...defaultProps}
+          columnId={'col2'}
+          filterOperations={() => false}
+        />
+      );
 
-  it('should not show any choices if the filter returns false', () => {
-    wrapper = mount(
-      <IndexPatternDimensionPanel
-        {...defaultProps}
-        columnId={'col2'}
-        filterOperations={() => false}
-      />
-    );
+      expect(
+        wrapper
+          .find(EuiComboBox)
+          .filter('[data-test-subj="indexPattern-dimension-field"]')!
+          .prop('options')!
+      ).toHaveLength(0);
+    });
 
-    openPopover();
+    it('should list all field names and document as a whole in prioritized order', () => {
+      wrapper = mount(<IndexPatternDimensionEditorComponent {...defaultProps} />);
 
-    expect(
-      wrapper
+      const options = wrapper
         .find(EuiComboBox)
-        .filter('[data-test-subj="indexPattern-dimension-field"]')!
-        .prop('options')!
-    ).toHaveLength(0);
-  });
-
-  it('should list all field names and document as a whole in prioritized order', () => {
-    wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} />);
-
-    openPopover();
-
-    const options = wrapper
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]')
-      .prop('options');
+        .filter('[data-test-subj="indexPattern-dimension-field"]')
+        .prop('options');
 
-    expect(options).toHaveLength(2);
+      expect(options).toHaveLength(2);
 
-    expect(options![0].label).toEqual('Records');
+      expect(options![0].label).toEqual('Records');
 
-    expect(options![1].options!.map(({ label }) => label)).toEqual([
-      'timestamp',
-      'bytes',
-      'memory',
-      'source',
-    ]);
-  });
+      expect(options![1].options!.map(({ label }) => label)).toEqual([
+        'timestamp',
+        'bytes',
+        'memory',
+        'source',
+      ]);
+    });
 
-  it('should hide fields that have no data', () => {
-    const props = {
-      ...defaultProps,
-      state: {
-        ...defaultProps.state,
-        existingFields: {
-          'my-fake-index-pattern': {
-            timestamp: true,
-            source: true,
+    it('should hide fields that have no data', () => {
+      const props = {
+        ...defaultProps,
+        state: {
+          ...defaultProps.state,
+          existingFields: {
+            'my-fake-index-pattern': {
+              timestamp: true,
+              source: true,
+            },
           },
         },
-      },
-    };
-    wrapper = mount(<IndexPatternDimensionPanel {...props} />);
-
-    openPopover();
-
-    const options = wrapper
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]')
-      .prop('options');
+      };
+      wrapper = mount(<IndexPatternDimensionEditorComponent {...props} />);
 
-    expect(options![1].options!.map(({ label }) => label)).toEqual(['timestamp', 'source']);
-  });
+      const options = wrapper
+        .find(EuiComboBox)
+        .filter('[data-test-subj="indexPattern-dimension-field"]')
+        .prop('options');
 
-  it('should indicate fields which are incompatible for the operation of the current column', () => {
-    wrapper = mount(
-      <IndexPatternDimensionPanel
-        {...defaultProps}
-        state={{
-          ...state,
-          layers: {
-            first: {
-              ...state.layers.first,
-              columns: {
-                ...state.layers.first.columns,
-                col1: {
-                  label: 'Max of bytes',
-                  dataType: 'number',
-                  isBucketed: false,
+      expect(options![1].options!.map(({ label }) => label)).toEqual(['timestamp', 'source']);
+    });
 
-                  // Private
-                  operationType: 'max',
-                  sourceField: 'bytes',
+    it('should indicate fields which are incompatible for the operation of the current column', () => {
+      wrapper = mount(
+        <IndexPatternDimensionEditorComponent
+          {...defaultProps}
+          state={{
+            ...state,
+            layers: {
+              first: {
+                ...state.layers.first,
+                columns: {
+                  ...state.layers.first.columns,
+                  col1: {
+                    label: 'Max of bytes',
+                    dataType: 'number',
+                    isBucketed: false,
+
+                    // Private
+                    operationType: 'max',
+                    sourceField: 'bytes',
+                  },
                 },
               },
             },
-          },
-        }}
-      />
-    );
-
-    openPopover();
-
-    const options = wrapper
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]')
-      .prop('options');
+          }}
+        />
+      );
 
-    expect(options![0]['data-test-subj']).toEqual('lns-fieldOptionIncompatible-Records');
+      const options = wrapper
+        .find(EuiComboBox)
+        .filter('[data-test-subj="indexPattern-dimension-field"]')
+        .prop('options');
 
-    expect(
-      options![1].options!.filter(({ label }) => label === 'timestamp')[0]['data-test-subj']
-    ).toContain('Incompatible');
-    expect(
-      options![1].options!.filter(({ label }) => label === 'memory')[0]['data-test-subj']
-    ).not.toContain('Incompatible');
-  });
+      expect(options![0]['data-test-subj']).toEqual('lns-fieldOptionIncompatible-Records');
 
-  it('should indicate operations which are incompatible for the field of the current column', () => {
-    wrapper = mount(
-      <IndexPatternDimensionPanel
-        {...defaultProps}
-        state={{
-          ...state,
-          layers: {
-            first: {
-              ...state.layers.first,
-              columns: {
-                ...state.layers.first.columns,
-                col1: {
-                  label: 'Max of bytes',
-                  dataType: 'number',
-                  isBucketed: false,
+      expect(
+        options![1].options!.filter(({ label }) => label === 'timestamp')[0]['data-test-subj']
+      ).toContain('Incompatible');
+      expect(
+        options![1].options!.filter(({ label }) => label === 'memory')[0]['data-test-subj']
+      ).not.toContain('Incompatible');
+    });
 
-                  // Private
-                  operationType: 'max',
-                  sourceField: 'bytes',
+    it('should indicate operations which are incompatible for the field of the current column', () => {
+      wrapper = mount(
+        <IndexPatternDimensionEditorComponent
+          {...defaultProps}
+          state={{
+            ...state,
+            layers: {
+              first: {
+                ...state.layers.first,
+                columns: {
+                  ...state.layers.first.columns,
+                  col1: {
+                    label: 'Max of bytes',
+                    dataType: 'number',
+                    isBucketed: false,
+
+                    // Private
+                    operationType: 'max',
+                    sourceField: 'bytes',
+                  },
                 },
               },
             },
-          },
-        }}
-      />
-    );
-
-    openPopover();
+          }}
+        />
+      );
 
-    interface ItemType {
-      name: string;
-      'data-test-subj': string;
-    }
-    const items: Array<EuiSideNavItemType<ItemType>> = wrapper.find(EuiSideNav).prop('items');
-    const options = (items[0].items as unknown) as ItemType[];
+      interface ItemType {
+        name: string;
+        'data-test-subj': string;
+      }
+      const items: Array<EuiSideNavItemType<ItemType>> = wrapper.find(EuiSideNav).prop('items');
+      const options = (items[0].items as unknown) as ItemType[];
 
-    expect(options.find(({ name }) => name === 'Minimum')!['data-test-subj']).not.toContain(
-      'Incompatible'
-    );
+      expect(options.find(({ name }) => name === 'Minimum')!['data-test-subj']).not.toContain(
+        'Incompatible'
+      );
 
-    expect(options.find(({ name }) => name === 'Date histogram')!['data-test-subj']).toContain(
-      'Incompatible'
-    );
-  });
+      expect(options.find(({ name }) => name === 'Date histogram')!['data-test-subj']).toContain(
+        'Incompatible'
+      );
+    });
 
-  it('should keep the operation when switching to another field compatible with this operation', () => {
-    const initialState: IndexPatternPrivateState = {
-      ...state,
-      layers: {
-        first: {
-          ...state.layers.first,
-          columns: {
-            ...state.layers.first.columns,
-            col1: {
-              label: 'Max of bytes',
-              dataType: 'number',
-              isBucketed: false,
+    it('should keep the operation when switching to another field compatible with this operation', () => {
+      const initialState: IndexPatternPrivateState = {
+        ...state,
+        layers: {
+          first: {
+            ...state.layers.first,
+            columns: {
+              ...state.layers.first.columns,
+              col1: {
+                label: 'Max of bytes',
+                dataType: 'number',
+                isBucketed: false,
 
-              // Private
-              operationType: 'max',
-              sourceField: 'bytes',
-              params: { format: { id: 'bytes' } },
+                // Private
+                operationType: 'max',
+                sourceField: 'bytes',
+                params: { format: { id: 'bytes' } },
+              },
             },
           },
         },
-      },
-    };
-
-    wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} state={initialState} />);
+      };
 
-    openPopover();
+      wrapper = mount(
+        <IndexPatternDimensionEditorComponent {...defaultProps} state={initialState} />
+      );
 
-    const comboBox = wrapper
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]')!;
-    const option = comboBox.prop('options')![1].options!.find(({ label }) => label === 'memory')!;
+      const comboBox = wrapper
+        .find(EuiComboBox)
+        .filter('[data-test-subj="indexPattern-dimension-field"]')!;
+      const option = comboBox.prop('options')![1].options!.find(({ label }) => label === 'memory')!;
 
-    act(() => {
-      comboBox.prop('onChange')!([option]);
-    });
+      act(() => {
+        comboBox.prop('onChange')!([option]);
+      });
 
-    expect(setState).toHaveBeenCalledWith({
-      ...initialState,
-      layers: {
-        first: {
-          ...state.layers.first,
-          columns: {
-            ...state.layers.first.columns,
-            col1: expect.objectContaining({
-              operationType: 'max',
-              sourceField: 'memory',
-              params: { format: { id: 'bytes' } },
-              // Other parts of this don't matter for this test
-            }),
+      expect(setState).toHaveBeenCalledWith({
+        ...initialState,
+        layers: {
+          first: {
+            ...state.layers.first,
+            columns: {
+              ...state.layers.first.columns,
+              col1: expect.objectContaining({
+                operationType: 'max',
+                sourceField: 'memory',
+                params: { format: { id: 'bytes' } },
+                // Other parts of this don't matter for this test
+              }),
+            },
           },
         },
-      },
+      });
     });
-  });
-
-  it('should switch operations when selecting a field that requires another operation', () => {
-    wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} />);
 
-    openPopover();
+    it('should switch operations when selecting a field that requires another operation', () => {
+      wrapper = mount(<IndexPatternDimensionEditorComponent {...defaultProps} />);
 
-    const comboBox = wrapper
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]')!;
-    const option = comboBox.prop('options')![1].options!.find(({ label }) => label === 'source')!;
+      const comboBox = wrapper
+        .find(EuiComboBox)
+        .filter('[data-test-subj="indexPattern-dimension-field"]')!;
+      const option = comboBox.prop('options')![1].options!.find(({ label }) => label === 'source')!;
 
-    act(() => {
-      comboBox.prop('onChange')!([option]);
-    });
+      act(() => {
+        comboBox.prop('onChange')!([option]);
+      });
 
-    expect(setState).toHaveBeenCalledWith({
-      ...state,
-      layers: {
-        first: {
-          ...state.layers.first,
-          columns: {
-            ...state.layers.first.columns,
-            col1: expect.objectContaining({
-              operationType: 'terms',
-              sourceField: 'source',
-              // Other parts of this don't matter for this test
-            }),
+      expect(setState).toHaveBeenCalledWith({
+        ...state,
+        layers: {
+          first: {
+            ...state.layers.first,
+            columns: {
+              ...state.layers.first.columns,
+              col1: expect.objectContaining({
+                operationType: 'terms',
+                sourceField: 'source',
+                // Other parts of this don't matter for this test
+              }),
+            },
           },
         },
-      },
+      });
     });
-  });
-
-  it('should keep the field when switching to another operation compatible for this field', () => {
-    wrapper = mount(
-      <IndexPatternDimensionPanel
-        {...defaultProps}
-        state={{
-          ...state,
-          layers: {
-            first: {
-              ...state.layers.first,
-              columns: {
-                ...state.layers.first.columns,
-                col1: {
-                  label: 'Max of bytes',
-                  dataType: 'number',
-                  isBucketed: false,
 
-                  // Private
-                  operationType: 'max',
-                  sourceField: 'bytes',
-                  params: { format: { id: 'bytes' } },
+    it('should keep the field when switching to another operation compatible for this field', () => {
+      wrapper = mount(
+        <IndexPatternDimensionEditorComponent
+          {...defaultProps}
+          state={{
+            ...state,
+            layers: {
+              first: {
+                ...state.layers.first,
+                columns: {
+                  ...state.layers.first.columns,
+                  col1: {
+                    label: 'Max of bytes',
+                    dataType: 'number',
+                    isBucketed: false,
+
+                    // Private
+                    operationType: 'max',
+                    sourceField: 'bytes',
+                    params: { format: { id: 'bytes' } },
+                  },
                 },
               },
             },
-          },
-        }}
-      />
-    );
-
-    openPopover();
+          }}
+        />
+      );
 
-    act(() => {
-      wrapper.find('button[data-test-subj="lns-indexPatternDimension-min"]').simulate('click');
-    });
+      act(() => {
+        wrapper.find('button[data-test-subj="lns-indexPatternDimension-min"]').simulate('click');
+      });
 
-    expect(setState).toHaveBeenCalledWith({
-      ...state,
-      layers: {
-        first: {
-          ...state.layers.first,
-          columns: {
-            ...state.layers.first.columns,
-            col1: expect.objectContaining({
-              operationType: 'min',
-              sourceField: 'bytes',
-              params: { format: { id: 'bytes' } },
-              // Other parts of this don't matter for this test
-            }),
+      expect(setState).toHaveBeenCalledWith({
+        ...state,
+        layers: {
+          first: {
+            ...state.layers.first,
+            columns: {
+              ...state.layers.first.columns,
+              col1: expect.objectContaining({
+                operationType: 'min',
+                sourceField: 'bytes',
+                params: { format: { id: 'bytes' } },
+                // Other parts of this don't matter for this test
+              }),
+            },
           },
         },
-      },
+      });
     });
-  });
 
-  it('should not set the state if selecting the currently active operation', () => {
-    wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} />);
+    it('should not set the state if selecting the currently active operation', () => {
+      wrapper = mount(<IndexPatternDimensionEditorComponent {...defaultProps} />);
 
-    openPopover();
+      act(() => {
+        wrapper
+          .find('button[data-test-subj="lns-indexPatternDimension-date_histogram"]')
+          .simulate('click');
+      });
 
-    act(() => {
-      wrapper
-        .find('button[data-test-subj="lns-indexPatternDimension-date_histogram"]')
-        .simulate('click');
+      expect(setState).not.toHaveBeenCalled();
     });
 
-    expect(setState).not.toHaveBeenCalled();
-  });
-
-  it('should update label on label input changes', () => {
-    wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} />);
+    it('should update label on label input changes', () => {
+      wrapper = mount(<IndexPatternDimensionEditorComponent {...defaultProps} />);
 
-    openPopover();
-
-    act(() => {
-      wrapper
-        .find('input[data-test-subj="indexPattern-label-edit"]')
-        .simulate('change', { target: { value: 'New Label' } });
-    });
+      act(() => {
+        wrapper
+          .find('input[data-test-subj="indexPattern-label-edit"]')
+          .simulate('change', { target: { value: 'New Label' } });
+      });
 
-    expect(setState).toHaveBeenCalledWith({
-      ...state,
-      layers: {
-        first: {
-          ...state.layers.first,
-          columns: {
-            ...state.layers.first.columns,
-            col1: expect.objectContaining({
-              label: 'New Label',
-              // Other parts of this don't matter for this test
-            }),
+      expect(setState).toHaveBeenCalledWith({
+        ...state,
+        layers: {
+          first: {
+            ...state.layers.first,
+            columns: {
+              ...state.layers.first.columns,
+              col1: expect.objectContaining({
+                label: 'New Label',
+                // Other parts of this don't matter for this test
+              }),
+            },
           },
         },
-      },
+      });
     });
-  });
 
-  describe('transient invalid state', () => {
-    it('should not set the state if selecting an operation incompatible with the current field', () => {
-      wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} />);
+    describe('transient invalid state', () => {
+      it('should not set the state if selecting an operation incompatible with the current field', () => {
+        wrapper = mount(<IndexPatternDimensionEditorComponent {...defaultProps} />);
 
-      openPopover();
+        act(() => {
+          wrapper
+            .find('button[data-test-subj="lns-indexPatternDimensionIncompatible-terms"]')
+            .simulate('click');
+        });
+
+        expect(setState).not.toHaveBeenCalled();
+      });
+
+      it('should show error message in invalid state', () => {
+        wrapper = mount(<IndexPatternDimensionEditorComponent {...defaultProps} />);
 
-      act(() => {
         wrapper
           .find('button[data-test-subj="lns-indexPatternDimensionIncompatible-terms"]')
           .simulate('click');
+
+        expect(wrapper.find('[data-test-subj="indexPattern-invalid-operation"]')).not.toHaveLength(
+          0
+        );
+
+        expect(setState).not.toHaveBeenCalled();
       });
 
-      expect(setState).not.toHaveBeenCalled();
-    });
+      it('should leave error state if a compatible operation is selected', () => {
+        wrapper = mount(<IndexPatternDimensionEditorComponent {...defaultProps} />);
 
-    it('should show error message in invalid state', () => {
-      wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} />);
+        wrapper
+          .find('button[data-test-subj="lns-indexPatternDimensionIncompatible-terms"]')
+          .simulate('click');
 
-      openPopover();
+        wrapper
+          .find('button[data-test-subj="lns-indexPatternDimension-date_histogram"]')
+          .simulate('click');
 
-      wrapper
-        .find('button[data-test-subj="lns-indexPatternDimensionIncompatible-terms"]')
-        .simulate('click');
+        expect(wrapper.find('[data-test-subj="indexPattern-invalid-operation"]')).toHaveLength(0);
+      });
 
-      expect(wrapper.find('[data-test-subj="indexPattern-invalid-operation"]')).not.toHaveLength(0);
+      it('should indicate fields compatible with selected operation', () => {
+        wrapper = mount(<IndexPatternDimensionEditorComponent {...defaultProps} />);
 
-      expect(setState).not.toHaveBeenCalled();
-    });
+        wrapper
+          .find('button[data-test-subj="lns-indexPatternDimensionIncompatible-terms"]')
+          .simulate('click');
 
-    it('should leave error state if a compatible operation is selected', () => {
-      wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} />);
+        const options = wrapper
+          .find(EuiComboBox)
+          .filter('[data-test-subj="indexPattern-dimension-field"]')
+          .prop('options');
 
-      openPopover();
+        expect(options![0]['data-test-subj']).toContain('Incompatible');
 
-      wrapper
-        .find('button[data-test-subj="lns-indexPatternDimensionIncompatible-terms"]')
-        .simulate('click');
+        expect(
+          options![1].options!.filter(({ label }) => label === 'timestamp')[0]['data-test-subj']
+        ).toContain('Incompatible');
+        expect(
+          options![1].options!.filter(({ label }) => label === 'source')[0]['data-test-subj']
+        ).not.toContain('Incompatible');
+      });
 
-      wrapper
-        .find('button[data-test-subj="lns-indexPatternDimension-date_histogram"]')
-        .simulate('click');
+      it('should select compatible operation if field not compatible with selected operation', () => {
+        wrapper = mount(
+          <IndexPatternDimensionEditorComponent {...defaultProps} columnId={'col2'} />
+        );
 
-      expect(wrapper.find('[data-test-subj="indexPattern-invalid-operation"]')).toHaveLength(0);
-    });
+        wrapper.find('button[data-test-subj="lns-indexPatternDimension-avg"]').simulate('click');
 
-    it('should leave error state if the popover gets closed', () => {
-      wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} />);
+        const comboBox = wrapper
+          .find(EuiComboBox)
+          .filter('[data-test-subj="indexPattern-dimension-field"]');
+        const options = comboBox.prop('options');
 
-      openPopover();
+        // options[1][2] is a `source` field of type `string` which doesn't support `avg` operation
+        act(() => {
+          comboBox.prop('onChange')!([options![1].options![2]]);
+        });
 
-      wrapper
-        .find('button[data-test-subj="lns-indexPatternDimensionIncompatible-terms"]')
-        .simulate('click');
+        expect(setState).toHaveBeenCalledWith({
+          ...state,
+          layers: {
+            first: {
+              ...state.layers.first,
+              columns: {
+                ...state.layers.first.columns,
+                col2: expect.objectContaining({
+                  sourceField: 'source',
+                  operationType: 'terms',
+                  // Other parts of this don't matter for this test
+                }),
+              },
+              columnOrder: ['col1', 'col2'],
+            },
+          },
+        });
+      });
 
-      act(() => {
-        wrapper.find(EuiPopover).prop('closePopover')!();
+      it('should select the Records field when count is selected', () => {
+        const initialState: IndexPatternPrivateState = {
+          ...state,
+          layers: {
+            first: {
+              ...state.layers.first,
+              columns: {
+                ...state.layers.first.columns,
+                col2: {
+                  dataType: 'number',
+                  isBucketed: false,
+                  label: '',
+                  operationType: 'avg',
+                  sourceField: 'bytes',
+                },
+              },
+            },
+          },
+        };
+        wrapper = mount(
+          <IndexPatternDimensionEditorComponent
+            {...defaultProps}
+            state={initialState}
+            columnId="col2"
+          />
+        );
+
+        wrapper
+          .find('button[data-test-subj="lns-indexPatternDimensionIncompatible-count"]')
+          .simulate('click');
+
+        const newColumnState = setState.mock.calls[0][0].layers.first.columns.col2;
+        expect(newColumnState.operationType).toEqual('count');
+        expect(newColumnState.sourceField).toEqual('Records');
       });
 
-      openPopover();
+      it('should indicate document and field compatibility with selected document operation', () => {
+        const initialState: IndexPatternPrivateState = {
+          ...state,
+          layers: {
+            first: {
+              ...state.layers.first,
+              columns: {
+                ...state.layers.first.columns,
+                col2: {
+                  dataType: 'number',
+                  isBucketed: false,
+                  label: '',
+                  operationType: 'count',
+                  sourceField: 'Records',
+                },
+              },
+            },
+          },
+        };
+        wrapper = mount(
+          <IndexPatternDimensionEditorComponent
+            {...defaultProps}
+            state={initialState}
+            columnId="col2"
+          />
+        );
+
+        wrapper
+          .find('button[data-test-subj="lns-indexPatternDimensionIncompatible-terms"]')
+          .simulate('click');
 
-      expect(wrapper.find('[data-test-subj="indexPattern-invalid-operation"]')).toHaveLength(0);
-    });
+        const options = wrapper
+          .find(EuiComboBox)
+          .filter('[data-test-subj="indexPattern-dimension-field"]')
+          .prop('options');
 
-    it('should indicate fields compatible with selected operation', () => {
-      wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} />);
+        expect(options![0]['data-test-subj']).toContain('Incompatible');
 
-      openPopover();
+        expect(
+          options![1].options!.filter(({ label }) => label === 'timestamp')[0]['data-test-subj']
+        ).toContain('Incompatible');
+        expect(
+          options![1].options!.filter(({ label }) => label === 'source')[0]['data-test-subj']
+        ).not.toContain('Incompatible');
+      });
 
-      wrapper
-        .find('button[data-test-subj="lns-indexPatternDimensionIncompatible-terms"]')
-        .simulate('click');
+      it('should set datasource state if compatible field is selected for operation', () => {
+        wrapper = mount(<IndexPatternDimensionEditorComponent {...defaultProps} />);
 
-      const options = wrapper
-        .find(EuiComboBox)
-        .filter('[data-test-subj="indexPattern-dimension-field"]')
-        .prop('options');
+        act(() => {
+          wrapper
+            .find('button[data-test-subj="lns-indexPatternDimensionIncompatible-terms"]')
+            .simulate('click');
+        });
 
-      expect(options![0]['data-test-subj']).toContain('Incompatible');
+        const comboBox = wrapper
+          .find(EuiComboBox)
+          .filter('[data-test-subj="indexPattern-dimension-field"]')!;
+        const option = comboBox
+          .prop('options')![1]
+          .options!.find(({ label }) => label === 'source')!;
 
-      expect(
-        options![1].options!.filter(({ label }) => label === 'timestamp')[0]['data-test-subj']
-      ).toContain('Incompatible');
-      expect(
-        options![1].options!.filter(({ label }) => label === 'source')[0]['data-test-subj']
-      ).not.toContain('Incompatible');
-    });
+        act(() => {
+          comboBox.prop('onChange')!([option]);
+        });
 
-    it('should select compatible operation if field not compatible with selected operation', () => {
-      wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} columnId={'col2'} />);
+        expect(setState).toHaveBeenCalledWith({
+          ...state,
+          layers: {
+            first: {
+              ...state.layers.first,
+              columns: {
+                ...state.layers.first.columns,
+                col1: expect.objectContaining({
+                  sourceField: 'source',
+                  operationType: 'terms',
+                }),
+              },
+            },
+          },
+        });
+      });
+    });
 
-      openPopover();
+    it('should support selecting the operation before the field', () => {
+      wrapper = mount(<IndexPatternDimensionEditorComponent {...defaultProps} columnId={'col2'} />);
 
       wrapper.find('button[data-test-subj="lns-indexPatternDimension-avg"]').simulate('click');
 
@@ -635,9 +734,8 @@ describe('IndexPatternDimensionPanel', () => {
         .filter('[data-test-subj="indexPattern-dimension-field"]');
       const options = comboBox.prop('options');
 
-      // options[1][2] is a `source` field of type `string` which doesn't support `avg` operation
       act(() => {
-        comboBox.prop('onChange')!([options![1].options![2]]);
+        comboBox.prop('onChange')!([options![1].options![0]]);
       });
 
       expect(setState).toHaveBeenCalledWith({
@@ -648,8 +746,8 @@ describe('IndexPatternDimensionPanel', () => {
             columns: {
               ...state.layers.first.columns,
               col2: expect.objectContaining({
-                sourceField: 'source',
-                operationType: 'terms',
+                sourceField: 'bytes',
+                operationType: 'avg',
                 // Other parts of this don't matter for this test
               }),
             },
@@ -659,41 +757,93 @@ describe('IndexPatternDimensionPanel', () => {
       });
     });
 
-    it('should select the Records field when count is selected', () => {
-      const initialState: IndexPatternPrivateState = {
+    it('should select operation directly if only one field is possible', () => {
+      const initialState = {
+        ...state,
+        indexPatterns: {
+          1: {
+            ...state.indexPatterns['1'],
+            fields: state.indexPatterns['1'].fields.filter(field => field.name !== 'memory'),
+          },
+        },
+      };
+
+      wrapper = mount(
+        <IndexPatternDimensionEditorComponent
+          {...defaultProps}
+          state={initialState}
+          columnId={'col2'}
+        />
+      );
+
+      wrapper.find('button[data-test-subj="lns-indexPatternDimension-avg"]').simulate('click');
+
+      expect(setState).toHaveBeenCalledWith({
+        ...initialState,
+        layers: {
+          first: {
+            ...initialState.layers.first,
+            columns: {
+              ...initialState.layers.first.columns,
+              col2: expect.objectContaining({
+                sourceField: 'bytes',
+                operationType: 'avg',
+                // Other parts of this don't matter for this test
+              }),
+            },
+            columnOrder: ['col1', 'col2'],
+          },
+        },
+      });
+    });
+
+    it('should select operation directly if only document is possible', () => {
+      wrapper = mount(<IndexPatternDimensionEditorComponent {...defaultProps} columnId={'col2'} />);
+
+      wrapper.find('button[data-test-subj="lns-indexPatternDimension-count"]').simulate('click');
+
+      expect(setState).toHaveBeenCalledWith({
         ...state,
         layers: {
           first: {
             ...state.layers.first,
             columns: {
               ...state.layers.first.columns,
-              col2: {
-                dataType: 'number',
-                isBucketed: false,
-                label: '',
-                operationType: 'avg',
-                sourceField: 'bytes',
-              },
+              col2: expect.objectContaining({
+                operationType: 'count',
+                // Other parts of this don't matter for this test
+              }),
             },
+            columnOrder: ['col1', 'col2'],
           },
         },
-      };
-      wrapper = mount(
-        <IndexPatternDimensionPanel {...defaultProps} state={initialState} columnId="col2" />
-      );
+      });
+    });
 
-      openPopover();
+    it('should indicate compatible fields when selecting the operation first', () => {
+      wrapper = mount(<IndexPatternDimensionEditorComponent {...defaultProps} columnId={'col2'} />);
 
-      wrapper
-        .find('button[data-test-subj="lns-indexPatternDimensionIncompatible-count"]')
-        .simulate('click');
+      wrapper.find('button[data-test-subj="lns-indexPatternDimension-avg"]').simulate('click');
 
-      const newColumnState = setState.mock.calls[0][0].layers.first.columns.col2;
-      expect(newColumnState.operationType).toEqual('count');
-      expect(newColumnState.sourceField).toEqual('Records');
+      const options = wrapper
+        .find(EuiComboBox)
+        .filter('[data-test-subj="indexPattern-dimension-field"]')
+        .prop('options');
+
+      expect(options![0]['data-test-subj']).toContain('Incompatible');
+
+      expect(
+        options![1].options!.filter(({ label }) => label === 'timestamp')[0]['data-test-subj']
+      ).toContain('Incompatible');
+      expect(
+        options![1].options!.filter(({ label }) => label === 'bytes')[0]['data-test-subj']
+      ).not.toContain('Incompatible');
+      expect(
+        options![1].options!.filter(({ label }) => label === 'memory')[0]['data-test-subj']
+      ).not.toContain('Incompatible');
     });
 
-    it('should indicate document and field compatibility with selected document operation', () => {
+    it('should indicate document compatibility when document operation is selected', () => {
       const initialState: IndexPatternPrivateState = {
         ...state,
         layers: {
@@ -713,45 +863,56 @@ describe('IndexPatternDimensionPanel', () => {
         },
       };
       wrapper = mount(
-        <IndexPatternDimensionPanel {...defaultProps} state={initialState} columnId="col2" />
+        <IndexPatternDimensionEditorComponent
+          {...defaultProps}
+          state={initialState}
+          columnId={'col2'}
+        />
       );
 
-      openPopover();
-
-      wrapper
-        .find('button[data-test-subj="lns-indexPatternDimensionIncompatible-terms"]')
-        .simulate('click');
-
       const options = wrapper
         .find(EuiComboBox)
         .filter('[data-test-subj="indexPattern-dimension-field"]')
         .prop('options');
 
-      expect(options![0]['data-test-subj']).toContain('Incompatible');
+      expect(options![0]['data-test-subj']).not.toContain('Incompatible');
 
-      expect(
-        options![1].options!.filter(({ label }) => label === 'timestamp')[0]['data-test-subj']
-      ).toContain('Incompatible');
-      expect(
-        options![1].options!.filter(({ label }) => label === 'source')[0]['data-test-subj']
-      ).not.toContain('Incompatible');
+      options![1].options!.map(operation =>
+        expect(operation['data-test-subj']).toContain('Incompatible')
+      );
     });
 
-    it('should set datasource state if compatible field is selected for operation', () => {
-      wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} />);
+    it('should show all operations that are not filtered out', () => {
+      wrapper = mount(
+        <IndexPatternDimensionEditorComponent
+          {...defaultProps}
+          filterOperations={(op: OperationMetadata) => !op.isBucketed && op.dataType === 'number'}
+        />
+      );
 
-      openPopover();
+      interface ItemType {
+        name: React.ReactNode;
+      }
+      const items: Array<EuiSideNavItemType<ItemType>> = wrapper.find(EuiSideNav).prop('items');
+      const options = (items[0].items as unknown) as ItemType[];
+
+      expect(options.map(({ name }: { name: React.ReactNode }) => name)).toEqual([
+        'Unique count',
+        'Average',
+        'Count',
+        'Maximum',
+        'Minimum',
+        'Sum',
+      ]);
+    });
 
-      act(() => {
-        wrapper
-          .find('button[data-test-subj="lns-indexPatternDimensionIncompatible-terms"]')
-          .simulate('click');
-      });
+    it('should add a column on selection of a field', () => {
+      wrapper = mount(<IndexPatternDimensionEditorComponent {...defaultProps} columnId={'col2'} />);
 
       const comboBox = wrapper
         .find(EuiComboBox)
         .filter('[data-test-subj="indexPattern-dimension-field"]')!;
-      const option = comboBox.prop('options')![1].options!.find(({ label }) => label === 'source')!;
+      const option = comboBox.prop('options')![1].options![0];
 
       act(() => {
         comboBox.prop('onChange')!([option]);
@@ -764,479 +925,237 @@ describe('IndexPatternDimensionPanel', () => {
             ...state.layers.first,
             columns: {
               ...state.layers.first.columns,
-              col1: expect.objectContaining({
-                sourceField: 'source',
-                operationType: 'terms',
+              col2: expect.objectContaining({
+                sourceField: 'bytes',
+                // Other parts of this don't matter for this test
               }),
             },
+            columnOrder: ['col1', 'col2'],
           },
         },
       });
     });
-  });
-
-  it('should support selecting the operation before the field', () => {
-    wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} columnId={'col2'} />);
-
-    openPopover();
-
-    wrapper.find('button[data-test-subj="lns-indexPatternDimension-avg"]').simulate('click');
-
-    const comboBox = wrapper
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]');
-    const options = comboBox.prop('options');
-
-    act(() => {
-      comboBox.prop('onChange')!([options![1].options![0]]);
-    });
-
-    expect(setState).toHaveBeenCalledWith({
-      ...state,
-      layers: {
-        first: {
-          ...state.layers.first,
-          columns: {
-            ...state.layers.first.columns,
-            col2: expect.objectContaining({
-              sourceField: 'bytes',
-              operationType: 'avg',
-              // Other parts of this don't matter for this test
-            }),
-          },
-          columnOrder: ['col1', 'col2'],
-        },
-      },
-    });
-  });
-
-  it('should select operation directly if only one field is possible', () => {
-    const initialState = {
-      ...state,
-      indexPatterns: {
-        1: {
-          ...state.indexPatterns['1'],
-          fields: state.indexPatterns['1'].fields.filter(field => field.name !== 'memory'),
-        },
-      },
-    };
-
-    wrapper = mount(
-      <IndexPatternDimensionPanel {...defaultProps} state={initialState} columnId={'col2'} />
-    );
-
-    openPopover();
-
-    wrapper.find('button[data-test-subj="lns-indexPatternDimension-avg"]').simulate('click');
-
-    expect(setState).toHaveBeenCalledWith({
-      ...initialState,
-      layers: {
-        first: {
-          ...initialState.layers.first,
-          columns: {
-            ...initialState.layers.first.columns,
-            col2: expect.objectContaining({
-              sourceField: 'bytes',
-              operationType: 'avg',
-              // Other parts of this don't matter for this test
-            }),
-          },
-          columnOrder: ['col1', 'col2'],
-        },
-      },
-    });
-  });
-
-  it('should select operation directly if only document is possible', () => {
-    wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} columnId={'col2'} />);
-
-    openPopover();
-
-    wrapper.find('button[data-test-subj="lns-indexPatternDimension-count"]').simulate('click');
-
-    expect(setState).toHaveBeenCalledWith({
-      ...state,
-      layers: {
-        first: {
-          ...state.layers.first,
-          columns: {
-            ...state.layers.first.columns,
-            col2: expect.objectContaining({
-              operationType: 'count',
-              // Other parts of this don't matter for this test
-            }),
-          },
-          columnOrder: ['col1', 'col2'],
-        },
-      },
-    });
-  });
 
-  it('should indicate compatible fields when selecting the operation first', () => {
-    wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} columnId={'col2'} />);
-
-    openPopover();
-
-    wrapper.find('button[data-test-subj="lns-indexPatternDimension-avg"]').simulate('click');
-
-    const options = wrapper
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]')
-      .prop('options');
-
-    expect(options![0]['data-test-subj']).toContain('Incompatible');
-
-    expect(
-      options![1].options!.filter(({ label }) => label === 'timestamp')[0]['data-test-subj']
-    ).toContain('Incompatible');
-    expect(
-      options![1].options!.filter(({ label }) => label === 'bytes')[0]['data-test-subj']
-    ).not.toContain('Incompatible');
-    expect(
-      options![1].options!.filter(({ label }) => label === 'memory')[0]['data-test-subj']
-    ).not.toContain('Incompatible');
-  });
-
-  it('should indicate document compatibility when document operation is selected', () => {
-    const initialState: IndexPatternPrivateState = {
-      ...state,
-      layers: {
-        first: {
-          ...state.layers.first,
-          columns: {
-            ...state.layers.first.columns,
-            col2: {
-              dataType: 'number',
-              isBucketed: false,
-              label: '',
-              operationType: 'count',
-              sourceField: 'Records',
-            },
-          },
-        },
-      },
-    };
-    wrapper = mount(
-      <IndexPatternDimensionPanel {...defaultProps} state={initialState} columnId={'col2'} />
-    );
-
-    openPopover();
-
-    const options = wrapper
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]')
-      .prop('options');
-
-    expect(options![0]['data-test-subj']).not.toContain('Incompatible');
-
-    options![1].options!.map(operation =>
-      expect(operation['data-test-subj']).toContain('Incompatible')
-    );
-  });
-
-  it('should show all operations that are not filtered out', () => {
-    wrapper = mount(
-      <IndexPatternDimensionPanel
-        {...defaultProps}
-        filterOperations={op => !op.isBucketed && op.dataType === 'number'}
-      />
-    );
-
-    openPopover();
-
-    interface ItemType {
-      name: React.ReactNode;
-    }
-    const items: Array<EuiSideNavItemType<ItemType>> = wrapper.find(EuiSideNav).prop('items');
-    const options = (items[0].items as unknown) as ItemType[];
-
-    expect(options.map(({ name }: { name: React.ReactNode }) => name)).toEqual([
-      'Unique count',
-      'Average',
-      'Count',
-      'Maximum',
-      'Minimum',
-      'Sum',
-    ]);
-  });
-
-  it('should add a column on selection of a field', () => {
-    wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} columnId={'col2'} />);
-
-    openPopover();
-
-    const comboBox = wrapper
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]')!;
-    const option = comboBox.prop('options')![1].options![0];
-
-    act(() => {
-      comboBox.prop('onChange')!([option]);
-    });
-
-    expect(setState).toHaveBeenCalledWith({
-      ...state,
-      layers: {
-        first: {
-          ...state.layers.first,
-          columns: {
-            ...state.layers.first.columns,
-            col2: expect.objectContaining({
-              sourceField: 'bytes',
-              // Other parts of this don't matter for this test
-            }),
-          },
-          columnOrder: ['col1', 'col2'],
-        },
-      },
-    });
-  });
-
-  it('should use helper function when changing the function', () => {
-    const initialState: IndexPatternPrivateState = {
-      ...state,
-      layers: {
-        first: {
-          ...state.layers.first,
-          columns: {
-            ...state.layers.first.columns,
-            col1: {
-              label: 'Max of bytes',
-              dataType: 'number',
-              isBucketed: false,
+    it('should use helper function when changing the function', () => {
+      const initialState: IndexPatternPrivateState = {
+        ...state,
+        layers: {
+          first: {
+            ...state.layers.first,
+            columns: {
+              ...state.layers.first.columns,
+              col1: {
+                label: 'Max of bytes',
+                dataType: 'number',
+                isBucketed: false,
 
-              // Private
-              operationType: 'max',
-              sourceField: 'bytes',
+                // Private
+                operationType: 'max',
+                sourceField: 'bytes',
+              },
             },
           },
         },
-      },
-    };
-    wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} state={initialState} />);
-
-    openPopover();
-
-    act(() => {
-      wrapper
-        .find('[data-test-subj="lns-indexPatternDimension-min"]')
-        .first()
-        .prop('onClick')!({} as React.MouseEvent<{}, MouseEvent>);
-    });
-
-    expect(changeColumn).toHaveBeenCalledWith({
-      state: initialState,
-      columnId: 'col1',
-      layerId: 'first',
-      newColumn: expect.objectContaining({
-        sourceField: 'bytes',
-        operationType: 'min',
-      }),
-    });
-  });
-
-  it('should clear the dimension with the clear button', () => {
-    wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} />);
-
-    const clearButton = wrapper.find(
-      'EuiButtonIcon[data-test-subj="indexPattern-dimensionPopover-remove"]'
-    );
+      };
+      wrapper = mount(
+        <IndexPatternDimensionEditorComponent {...defaultProps} state={initialState} />
+      );
 
-    act(() => {
-      clearButton.simulate('click');
-    });
+      act(() => {
+        wrapper
+          .find('[data-test-subj="lns-indexPatternDimension-min"]')
+          .first()
+          .prop('onClick')!({} as React.MouseEvent<{}, MouseEvent>);
+      });
 
-    expect(setState).toHaveBeenCalledWith({
-      ...state,
-      layers: {
-        first: {
-          indexPatternId: '1',
-          columns: {},
-          columnOrder: [],
-        },
-      },
+      expect(changeColumn).toHaveBeenCalledWith({
+        state: initialState,
+        columnId: 'col1',
+        layerId: 'first',
+        newColumn: expect.objectContaining({
+          sourceField: 'bytes',
+          operationType: 'min',
+        }),
+      });
     });
-  });
-
-  it('should clear the dimension when removing the selection in field combobox', () => {
-    wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} />);
 
-    openPopover();
+    it('should clear the dimension when removing the selection in field combobox', () => {
+      wrapper = mount(<IndexPatternDimensionEditorComponent {...defaultProps} />);
 
-    act(() => {
-      wrapper
-        .find(EuiComboBox)
-        .filter('[data-test-subj="indexPattern-dimension-field"]')
-        .prop('onChange')!([]);
-    });
+      act(() => {
+        wrapper
+          .find(EuiComboBox)
+          .filter('[data-test-subj="indexPattern-dimension-field"]')
+          .prop('onChange')!([]);
+      });
 
-    expect(setState).toHaveBeenCalledWith({
-      ...state,
-      layers: {
-        first: {
-          indexPatternId: '1',
-          columns: {},
-          columnOrder: [],
+      expect(setState).toHaveBeenCalledWith({
+        ...state,
+        layers: {
+          first: {
+            indexPatternId: '1',
+            columns: {},
+            columnOrder: [],
+          },
         },
-      },
+      });
     });
-  });
 
-  it('allows custom format', () => {
-    const stateWithNumberCol: IndexPatternPrivateState = {
-      ...state,
-      layers: {
-        first: {
-          indexPatternId: '1',
-          columnOrder: ['col1'],
-          columns: {
-            col1: {
-              label: 'Average of bar',
-              dataType: 'number',
-              isBucketed: false,
-              // Private
-              operationType: 'avg',
-              sourceField: 'bar',
+    it('allows custom format', () => {
+      const stateWithNumberCol: IndexPatternPrivateState = {
+        ...state,
+        layers: {
+          first: {
+            indexPatternId: '1',
+            columnOrder: ['col1'],
+            columns: {
+              col1: {
+                label: 'Average of bar',
+                dataType: 'number',
+                isBucketed: false,
+                // Private
+                operationType: 'avg',
+                sourceField: 'bar',
+              },
             },
           },
         },
-      },
-    };
-
-    wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} state={stateWithNumberCol} />);
+      };
 
-    openPopover();
+      wrapper = mount(
+        <IndexPatternDimensionEditorComponent {...defaultProps} state={stateWithNumberCol} />
+      );
 
-    act(() => {
-      wrapper
-        .find(EuiComboBox)
-        .filter('[data-test-subj="indexPattern-dimension-format"]')
-        .prop('onChange')!([{ value: 'bytes', label: 'Bytes' }]);
-    });
+      act(() => {
+        wrapper
+          .find(EuiComboBox)
+          .filter('[data-test-subj="indexPattern-dimension-format"]')
+          .prop('onChange')!([{ value: 'bytes', label: 'Bytes' }]);
+      });
 
-    expect(setState).toHaveBeenCalledWith({
-      ...state,
-      layers: {
-        first: {
-          ...state.layers.first,
-          columns: {
-            ...state.layers.first.columns,
-            col1: expect.objectContaining({
-              params: {
-                format: { id: 'bytes', params: { decimals: 2 } },
-              },
-            }),
+      expect(setState).toHaveBeenCalledWith({
+        ...state,
+        layers: {
+          first: {
+            ...state.layers.first,
+            columns: {
+              ...state.layers.first.columns,
+              col1: expect.objectContaining({
+                params: {
+                  format: { id: 'bytes', params: { decimals: 2 } },
+                },
+              }),
+            },
           },
         },
-      },
+      });
     });
-  });
 
-  it('keeps decimal places while switching', () => {
-    const stateWithNumberCol: IndexPatternPrivateState = {
-      ...state,
-      layers: {
-        first: {
-          indexPatternId: '1',
-          columnOrder: ['col1'],
-          columns: {
-            col1: {
-              label: 'Average of bar',
-              dataType: 'number',
-              isBucketed: false,
-              // Private
-              operationType: 'avg',
-              sourceField: 'bar',
-              params: {
-                format: { id: 'bytes', params: { decimals: 0 } },
+    it('keeps decimal places while switching', () => {
+      const stateWithNumberCol: IndexPatternPrivateState = {
+        ...state,
+        layers: {
+          first: {
+            indexPatternId: '1',
+            columnOrder: ['col1'],
+            columns: {
+              col1: {
+                label: 'Average of bar',
+                dataType: 'number',
+                isBucketed: false,
+                // Private
+                operationType: 'avg',
+                sourceField: 'bar',
+                params: {
+                  format: { id: 'bytes', params: { decimals: 0 } },
+                },
               },
             },
           },
         },
-      },
-    };
+      };
 
-    wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} state={stateWithNumberCol} />);
+      wrapper = mount(
+        <IndexPatternDimensionEditorComponent {...defaultProps} state={stateWithNumberCol} />
+      );
 
-    openPopover();
+      act(() => {
+        wrapper
+          .find(EuiComboBox)
+          .filter('[data-test-subj="indexPattern-dimension-format"]')
+          .prop('onChange')!([{ value: '', label: 'Default' }]);
+      });
 
-    act(() => {
-      wrapper
-        .find(EuiComboBox)
-        .filter('[data-test-subj="indexPattern-dimension-format"]')
-        .prop('onChange')!([{ value: '', label: 'Default' }]);
-    });
+      act(() => {
+        wrapper
+          .find(EuiComboBox)
+          .filter('[data-test-subj="indexPattern-dimension-format"]')
+          .prop('onChange')!([{ value: 'number', label: 'Number' }]);
+      });
 
-    act(() => {
-      wrapper
-        .find(EuiComboBox)
-        .filter('[data-test-subj="indexPattern-dimension-format"]')
-        .prop('onChange')!([{ value: 'number', label: 'Number' }]);
+      expect(
+        wrapper
+          .find(EuiFieldNumber)
+          .filter('[data-test-subj="indexPattern-dimension-formatDecimals"]')
+          .prop('value')
+      ).toEqual(0);
     });
 
-    expect(
-      wrapper
-        .find(EuiFieldNumber)
-        .filter('[data-test-subj="indexPattern-dimension-formatDecimals"]')
-        .prop('value')
-    ).toEqual(0);
-  });
-
-  it('allows custom format with number of decimal places', () => {
-    const stateWithNumberCol: IndexPatternPrivateState = {
-      ...state,
-      layers: {
-        first: {
-          indexPatternId: '1',
-          columnOrder: ['col1'],
-          columns: {
-            col1: {
-              label: 'Average of bar',
-              dataType: 'number',
-              isBucketed: false,
-              // Private
-              operationType: 'avg',
-              sourceField: 'bar',
-              params: {
-                format: { id: 'bytes', params: { decimals: 2 } },
+    it('allows custom format with number of decimal places', () => {
+      const stateWithNumberCol: IndexPatternPrivateState = {
+        ...state,
+        layers: {
+          first: {
+            indexPatternId: '1',
+            columnOrder: ['col1'],
+            columns: {
+              col1: {
+                label: 'Average of bar',
+                dataType: 'number',
+                isBucketed: false,
+                // Private
+                operationType: 'avg',
+                sourceField: 'bar',
+                params: {
+                  format: { id: 'bytes', params: { decimals: 2 } },
+                },
               },
             },
           },
         },
-      },
-    };
-
-    wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} state={stateWithNumberCol} />);
+      };
 
-    openPopover();
+      wrapper = mount(
+        <IndexPatternDimensionEditorComponent {...defaultProps} state={stateWithNumberCol} />
+      );
 
-    act(() => {
-      wrapper
-        .find(EuiFieldNumber)
-        .filter('[data-test-subj="indexPattern-dimension-formatDecimals"]')
-        .prop('onChange')!({ target: { value: '0' } });
-    });
+      act(() => {
+        wrapper
+          .find(EuiFieldNumber)
+          .filter('[data-test-subj="indexPattern-dimension-formatDecimals"]')
+          .prop('onChange')!({ target: { value: '0' } });
+      });
 
-    expect(setState).toHaveBeenCalledWith({
-      ...state,
-      layers: {
-        first: {
-          ...state.layers.first,
-          columns: {
-            ...state.layers.first.columns,
-            col1: expect.objectContaining({
-              params: {
-                format: { id: 'bytes', params: { decimals: 0 } },
-              },
-            }),
+      expect(setState).toHaveBeenCalledWith({
+        ...state,
+        layers: {
+          first: {
+            ...state.layers.first,
+            columns: {
+              ...state.layers.first.columns,
+              col1: expect.objectContaining({
+                params: {
+                  format: { id: 'bytes', params: { decimals: 0 } },
+                },
+              }),
+            },
           },
         },
-      },
+      });
     });
   });
 
-  describe('drag and drop', () => {
+  describe('Drag and drop', () => {
     function dragDropState(): IndexPatternPrivateState {
       return {
         indexPatternRefs: [],
@@ -1287,112 +1206,80 @@ describe('IndexPatternDimensionPanel', () => {
     }
 
     it('is not droppable if no drag is happening', () => {
-      wrapper = mount(
-        <IndexPatternDimensionPanel {...defaultProps} state={dragDropState()} layerId="myLayer" />
-      );
-
       expect(
-        wrapper
-          .find('[data-test-subj="indexPattern-dropTarget"]')
-          .first()
-          .prop('droppable')
-      ).toBeFalsy();
+        canHandleDrop({
+          ...defaultProps,
+          dragDropContext,
+          state: dragDropState(),
+          layerId: 'myLayer',
+        })
+      ).toBe(false);
     });
 
     it('is not droppable if the dragged item has no field', () => {
-      wrapper = shallow(
-        <IndexPatternDimensionPanelComponent
-          {...defaultProps}
-          dragDropContext={{
+      expect(
+        canHandleDrop({
+          ...defaultProps,
+          dragDropContext: {
             ...dragDropContext,
             dragging: { name: 'bar' },
-          }}
-          state={dragDropState()}
-          layerId="myLayer"
-        />
-      );
-
-      expect(
-        wrapper
-          .find('[data-test-subj="indexPattern-dropTarget"]')
-          .first()
-          .prop('droppable')
-      ).toBeFalsy();
+          },
+        })
+      ).toBe(false);
     });
 
     it('is not droppable if field is not supported by filterOperations', () => {
-      wrapper = shallow(
-        <IndexPatternDimensionPanelComponent
-          {...defaultProps}
-          dragDropContext={{
+      expect(
+        canHandleDrop({
+          ...defaultProps,
+          dragDropContext: {
             ...dragDropContext,
             dragging: {
               indexPatternId: 'foo',
               field: { type: 'string', name: 'mystring', aggregatable: true },
             },
-          }}
-          state={dragDropState()}
-          filterOperations={() => false}
-          layerId="myLayer"
-        />
-      );
-
-      expect(
-        wrapper
-          .find('[data-test-subj="indexPattern-dropTarget"]')
-          .first()
-          .prop('droppable')
-      ).toBeFalsy();
+          },
+          state: dragDropState(),
+          filterOperations: () => false,
+          layerId: 'myLayer',
+        })
+      ).toBe(false);
     });
 
     it('is droppable if the field is supported by filterOperations', () => {
-      wrapper = shallow(
-        <IndexPatternDimensionPanelComponent
-          {...defaultProps}
-          dragDropContext={{
+      expect(
+        canHandleDrop({
+          ...defaultProps,
+          dragDropContext: {
             ...dragDropContext,
             dragging: {
               field: { type: 'number', name: 'bar', aggregatable: true },
               indexPatternId: 'foo',
             },
-          }}
-          state={dragDropState()}
-          filterOperations={op => op.dataType === 'number'}
-          layerId="myLayer"
-        />
-      );
-
-      expect(
-        wrapper
-          .find('[data-test-subj="indexPattern-dropTarget"]')
-          .first()
-          .prop('droppable')
-      ).toBeTruthy();
+          },
+          state: dragDropState(),
+          filterOperations: (op: OperationMetadata) => op.dataType === 'number',
+          layerId: 'myLayer',
+        })
+      ).toBe(true);
     });
 
-    it('is notdroppable if the field belongs to another index pattern', () => {
-      wrapper = shallow(
-        <IndexPatternDimensionPanelComponent
-          {...defaultProps}
-          dragDropContext={{
+    it('is not droppable if the field belongs to another index pattern', () => {
+      expect(
+        canHandleDrop({
+          ...defaultProps,
+          dragDropContext: {
             ...dragDropContext,
             dragging: {
               field: { type: 'number', name: 'bar', aggregatable: true },
               indexPatternId: 'foo2',
             },
-          }}
-          state={dragDropState()}
-          filterOperations={op => op.dataType === 'number'}
-          layerId="myLayer"
-        />
-      );
-
-      expect(
-        wrapper
-          .find('[data-test-subj="indexPattern-dropTarget"]')
-          .first()
-          .prop('droppable')
-      ).toBeFalsy();
+          },
+          state: dragDropState(),
+          filterOperations: (op: OperationMetadata) => op.dataType === 'number',
+          layerId: 'myLayer',
+        })
+      ).toBe(false);
     });
 
     it('appends the dropped column when a field is dropped', () => {
@@ -1401,27 +1288,18 @@ describe('IndexPatternDimensionPanel', () => {
         indexPatternId: 'foo',
       };
       const testState = dragDropState();
-      wrapper = shallow(
-        <IndexPatternDimensionPanelComponent
-          {...defaultProps}
-          dragDropContext={{
-            ...dragDropContext,
-            dragging,
-          }}
-          state={testState}
-          columnId={'col2'}
-          filterOperations={op => op.dataType === 'number'}
-          layerId="myLayer"
-        />
-      );
-
-      act(() => {
-        const onDrop = wrapper
-          .find('[data-test-subj="indexPattern-dropTarget"]')
-          .first()
-          .prop('onDrop') as DropHandler;
 
-        onDrop(dragging);
+      onDrop({
+        ...defaultProps,
+        dragDropContext: {
+          ...dragDropContext,
+          dragging,
+        },
+        droppedItem: dragging,
+        state: testState,
+        columnId: 'col2',
+        filterOperations: (op: OperationMetadata) => op.dataType === 'number',
+        layerId: 'myLayer',
       });
 
       expect(setState).toBeCalledTimes(1);
@@ -1449,27 +1327,17 @@ describe('IndexPatternDimensionPanel', () => {
         indexPatternId: 'foo',
       };
       const testState = dragDropState();
-      wrapper = shallow(
-        <IndexPatternDimensionPanelComponent
-          {...defaultProps}
-          dragDropContext={{
-            ...dragDropContext,
-            dragging,
-          }}
-          state={testState}
-          columnId={'col2'}
-          filterOperations={op => op.isBucketed}
-          layerId="myLayer"
-        />
-      );
-
-      act(() => {
-        const onDrop = wrapper
-          .find('[data-test-subj="indexPattern-dropTarget"]')
-          .first()
-          .prop('onDrop') as DropHandler;
-
-        onDrop(dragging);
+      onDrop({
+        ...defaultProps,
+        dragDropContext: {
+          ...dragDropContext,
+          dragging,
+        },
+        droppedItem: dragging,
+        state: testState,
+        columnId: 'col2',
+        filterOperations: (op: OperationMetadata) => op.isBucketed,
+        layerId: 'myLayer',
       });
 
       expect(setState).toBeCalledTimes(1);
@@ -1497,26 +1365,16 @@ describe('IndexPatternDimensionPanel', () => {
         indexPatternId: 'foo',
       };
       const testState = dragDropState();
-      wrapper = shallow(
-        <IndexPatternDimensionPanelComponent
-          {...defaultProps}
-          dragDropContext={{
-            ...dragDropContext,
-            dragging,
-          }}
-          state={testState}
-          filterOperations={op => op.dataType === 'number'}
-          layerId="myLayer"
-        />
-      );
-
-      act(() => {
-        const onDrop = wrapper
-          .find('[data-test-subj="indexPattern-dropTarget"]')
-          .first()
-          .prop('onDrop') as DropHandler;
-
-        onDrop(dragging);
+      onDrop({
+        ...defaultProps,
+        dragDropContext: {
+          ...dragDropContext,
+          dragging,
+        },
+        droppedItem: dragging,
+        state: testState,
+        filterOperations: (op: OperationMetadata) => op.dataType === 'number',
+        layerId: 'myLayer',
       });
 
       expect(setState).toBeCalledTimes(1);
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx
index 59350ff215c27c..5d87137db3d39e 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx
@@ -5,27 +5,36 @@
  */
 
 import _ from 'lodash';
-import React, { memo, useMemo } from 'react';
-import { EuiButtonIcon } from '@elastic/eui';
+import React, { memo } from 'react';
 import { i18n } from '@kbn/i18n';
+import { EuiLink } from '@elastic/eui';
 import { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'src/core/public';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
+import {
+  DatasourceDimensionTriggerProps,
+  DatasourceDimensionEditorProps,
+  DatasourceDimensionDropProps,
+  DatasourceDimensionDropHandlerProps,
+} from '../../types';
 import { DataPublicPluginStart } from '../../../../../../../src/plugins/data/public';
-import { DatasourceDimensionPanelProps, StateSetter } from '../../types';
 import { IndexPatternColumn, OperationType } from '../indexpattern';
 import { getAvailableOperationsByMetadata, buildColumn, changeField } from '../operations';
 import { PopoverEditor } from './popover_editor';
-import { DragContextState, ChildDragDropProvider, DragDrop } from '../../drag_drop';
-import { changeColumn, deleteColumn } from '../state_helpers';
+import { changeColumn } from '../state_helpers';
 import { isDraggedField, hasField } from '../utils';
 import { IndexPatternPrivateState, IndexPatternField } from '../types';
 import { trackUiEvent } from '../../lens_ui_telemetry';
 import { DateRange } from '../../../../../../plugins/lens/common';
 
-export type IndexPatternDimensionPanelProps = DatasourceDimensionPanelProps & {
-  state: IndexPatternPrivateState;
-  setState: StateSetter<IndexPatternPrivateState>;
-  dragDropContext: DragContextState;
+export type IndexPatternDimensionTriggerProps = DatasourceDimensionTriggerProps<
+  IndexPatternPrivateState
+> & {
+  uniqueLabel: string;
+};
+
+export type IndexPatternDimensionEditorProps = DatasourceDimensionEditorProps<
+  IndexPatternPrivateState
+> & {
   uiSettings: IUiSettingsClient;
   storage: IStorageWrapper;
   savedObjectsClient: SavedObjectsClientContract;
@@ -41,152 +50,181 @@ export interface OperationFieldSupportMatrix {
   fieldByOperation: Partial<Record<OperationType, string[]>>;
 }
 
-export const IndexPatternDimensionPanelComponent = function IndexPatternDimensionPanel(
-  props: IndexPatternDimensionPanelProps
-) {
+type Props = Pick<
+  DatasourceDimensionDropProps<IndexPatternPrivateState>,
+  'layerId' | 'columnId' | 'state' | 'filterOperations'
+>;
+
+// TODO: This code has historically been memoized, as a potentially performance
+// sensitive task. If we can add memoization without breaking the behavior, we should.
+const getOperationFieldSupportMatrix = (props: Props): OperationFieldSupportMatrix => {
   const layerId = props.layerId;
   const currentIndexPattern = props.state.indexPatterns[props.state.layers[layerId].indexPatternId];
 
-  const operationFieldSupportMatrix = useMemo(() => {
-    const filteredOperationsByMetadata = getAvailableOperationsByMetadata(
-      currentIndexPattern
-    ).filter(operation => props.filterOperations(operation.operationMetaData));
-
-    const supportedOperationsByField: Partial<Record<string, OperationType[]>> = {};
-    const supportedFieldsByOperation: Partial<Record<OperationType, string[]>> = {};
-
-    filteredOperationsByMetadata.forEach(({ operations }) => {
-      operations.forEach(operation => {
-        if (supportedOperationsByField[operation.field]) {
-          supportedOperationsByField[operation.field]!.push(operation.operationType);
-        } else {
-          supportedOperationsByField[operation.field] = [operation.operationType];
-        }
-
-        if (supportedFieldsByOperation[operation.operationType]) {
-          supportedFieldsByOperation[operation.operationType]!.push(operation.field);
-        } else {
-          supportedFieldsByOperation[operation.operationType] = [operation.field];
-        }
-      });
+  const filteredOperationsByMetadata = getAvailableOperationsByMetadata(
+    currentIndexPattern
+  ).filter(operation => props.filterOperations(operation.operationMetaData));
+
+  const supportedOperationsByField: Partial<Record<string, OperationType[]>> = {};
+  const supportedFieldsByOperation: Partial<Record<OperationType, string[]>> = {};
+
+  filteredOperationsByMetadata.forEach(({ operations }) => {
+    operations.forEach(operation => {
+      if (supportedOperationsByField[operation.field]) {
+        supportedOperationsByField[operation.field]!.push(operation.operationType);
+      } else {
+        supportedOperationsByField[operation.field] = [operation.operationType];
+      }
+
+      if (supportedFieldsByOperation[operation.operationType]) {
+        supportedFieldsByOperation[operation.operationType]!.push(operation.field);
+      } else {
+        supportedFieldsByOperation[operation.operationType] = [operation.field];
+      }
     });
-    return {
-      operationByField: _.mapValues(supportedOperationsByField, _.uniq),
-      fieldByOperation: _.mapValues(supportedFieldsByOperation, _.uniq),
-    };
-  }, [currentIndexPattern, props.filterOperations]);
+  });
+  return {
+    operationByField: _.mapValues(supportedOperationsByField, _.uniq),
+    fieldByOperation: _.mapValues(supportedFieldsByOperation, _.uniq),
+  };
+};
 
-  const selectedColumn: IndexPatternColumn | null =
-    props.state.layers[layerId].columns[props.columnId] || null;
+export function canHandleDrop(props: DatasourceDimensionDropProps<IndexPatternPrivateState>) {
+  const operationFieldSupportMatrix = getOperationFieldSupportMatrix(props);
+
+  const { dragging } = props.dragDropContext;
+  const layerIndexPatternId = props.state.layers[props.layerId].indexPatternId;
 
   function hasOperationForField(field: IndexPatternField) {
     return Boolean(operationFieldSupportMatrix.operationByField[field.name]);
   }
 
-  function canHandleDrop() {
-    const { dragging } = props.dragDropContext;
-    const layerIndexPatternId = props.state.layers[props.layerId].indexPatternId;
+  return (
+    isDraggedField(dragging) &&
+    layerIndexPatternId === dragging.indexPatternId &&
+    Boolean(hasOperationForField(dragging.field))
+  );
+}
+
+export function onDrop(
+  props: DatasourceDimensionDropHandlerProps<IndexPatternPrivateState>
+): boolean {
+  const operationFieldSupportMatrix = getOperationFieldSupportMatrix(props);
+  const droppedItem = props.droppedItem;
+
+  function hasOperationForField(field: IndexPatternField) {
+    return Boolean(operationFieldSupportMatrix.operationByField[field.name]);
+  }
 
-    return (
-      isDraggedField(dragging) &&
-      layerIndexPatternId === dragging.indexPatternId &&
-      Boolean(hasOperationForField(dragging.field))
-    );
+  if (!isDraggedField(droppedItem) || !hasOperationForField(droppedItem.field)) {
+    // TODO: What do we do if we couldn't find a column?
+    return false;
   }
 
+  const operationsForNewField =
+    operationFieldSupportMatrix.operationByField[droppedItem.field.name];
+
+  const layerId = props.layerId;
+  const selectedColumn: IndexPatternColumn | null =
+    props.state.layers[layerId].columns[props.columnId] || null;
+  const currentIndexPattern =
+    props.state.indexPatterns[props.state.layers[layerId]?.indexPatternId];
+
+  // We need to check if dragging in a new field, was just a field change on the same
+  // index pattern and on the same operations (therefore checking if the new field supports
+  // our previous operation)
+  const hasFieldChanged =
+    selectedColumn &&
+    hasField(selectedColumn) &&
+    selectedColumn.sourceField !== droppedItem.field.name &&
+    operationsForNewField &&
+    operationsForNewField.includes(selectedColumn.operationType);
+
+  // If only the field has changed use the onFieldChange method on the operation to get the
+  // new column, otherwise use the regular buildColumn to get a new column.
+  const newColumn = hasFieldChanged
+    ? changeField(selectedColumn, currentIndexPattern, droppedItem.field)
+    : buildColumn({
+        op: operationsForNewField ? operationsForNewField[0] : undefined,
+        columns: props.state.layers[props.layerId].columns,
+        indexPattern: currentIndexPattern,
+        layerId,
+        suggestedPriority: props.suggestedPriority,
+        field: droppedItem.field,
+        previousColumn: selectedColumn,
+      });
+
+  trackUiEvent('drop_onto_dimension');
+  const hasData = Object.values(props.state.layers).some(({ columns }) => columns.length);
+  trackUiEvent(hasData ? 'drop_non_empty' : 'drop_empty');
+
+  props.setState(
+    changeColumn({
+      state: props.state,
+      layerId,
+      columnId: props.columnId,
+      newColumn,
+      // If the field has changed, the onFieldChange method needs to take care of everything including moving
+      // over params. If we create a new column above we want changeColumn to move over params.
+      keepParams: !hasFieldChanged,
+    })
+  );
+
+  return true;
+}
+
+export const IndexPatternDimensionTriggerComponent = function IndexPatternDimensionTrigger(
+  props: IndexPatternDimensionTriggerProps
+) {
+  const layerId = props.layerId;
+
+  const selectedColumn: IndexPatternColumn | null =
+    props.state.layers[layerId].columns[props.columnId] || null;
+
+  const { columnId, uniqueLabel } = props;
+  if (!selectedColumn) {
+    return null;
+  }
+  return (
+    <EuiLink
+      id={columnId}
+      className="lnsConfigPanel__triggerLink"
+      onClick={() => {
+        props.togglePopover();
+      }}
+      data-test-subj="lns-dimensionTrigger"
+      aria-label={i18n.translate('xpack.lens.configure.editConfig', {
+        defaultMessage: 'Edit configuration',
+      })}
+      title={i18n.translate('xpack.lens.configure.editConfig', {
+        defaultMessage: 'Edit configuration',
+      })}
+    >
+      {uniqueLabel}
+    </EuiLink>
+  );
+};
+
+export const IndexPatternDimensionEditorComponent = function IndexPatternDimensionPanel(
+  props: IndexPatternDimensionEditorProps
+) {
+  const layerId = props.layerId;
+  const currentIndexPattern =
+    props.state.indexPatterns[props.state.layers[layerId]?.indexPatternId];
+  const operationFieldSupportMatrix = getOperationFieldSupportMatrix(props);
+
+  const selectedColumn: IndexPatternColumn | null =
+    props.state.layers[layerId].columns[props.columnId] || null;
+
   return (
-    <ChildDragDropProvider {...props.dragDropContext}>
-      <DragDrop
-        className="lnsIndexPatternDimensionPanel"
-        data-test-subj="indexPattern-dropTarget"
-        droppable={canHandleDrop()}
-        onDrop={droppedItem => {
-          if (!isDraggedField(droppedItem) || !hasOperationForField(droppedItem.field)) {
-            // TODO: What do we do if we couldn't find a column?
-            return;
-          }
-
-          const operationsForNewField =
-            operationFieldSupportMatrix.operationByField[droppedItem.field.name];
-
-          // We need to check if dragging in a new field, was just a field change on the same
-          // index pattern and on the same operations (therefore checking if the new field supports
-          // our previous operation)
-          const hasFieldChanged =
-            selectedColumn &&
-            hasField(selectedColumn) &&
-            selectedColumn.sourceField !== droppedItem.field.name &&
-            operationsForNewField &&
-            operationsForNewField.includes(selectedColumn.operationType);
-
-          // If only the field has changed use the onFieldChange method on the operation to get the
-          // new column, otherwise use the regular buildColumn to get a new column.
-          const newColumn = hasFieldChanged
-            ? changeField(selectedColumn, currentIndexPattern, droppedItem.field)
-            : buildColumn({
-                op: operationsForNewField ? operationsForNewField[0] : undefined,
-                columns: props.state.layers[props.layerId].columns,
-                indexPattern: currentIndexPattern,
-                layerId,
-                suggestedPriority: props.suggestedPriority,
-                field: droppedItem.field,
-                previousColumn: selectedColumn,
-              });
-
-          trackUiEvent('drop_onto_dimension');
-          const hasData = Object.values(props.state.layers).some(({ columns }) => columns.length);
-          trackUiEvent(hasData ? 'drop_non_empty' : 'drop_empty');
-
-          props.setState(
-            changeColumn({
-              state: props.state,
-              layerId,
-              columnId: props.columnId,
-              newColumn,
-              // If the field has changed, the onFieldChange method needs to take care of everything including moving
-              // over params. If we create a new column above we want changeColumn to move over params.
-              keepParams: !hasFieldChanged,
-            })
-          );
-        }}
-      >
-        <PopoverEditor
-          {...props}
-          currentIndexPattern={currentIndexPattern}
-          selectedColumn={selectedColumn}
-          operationFieldSupportMatrix={operationFieldSupportMatrix}
-        />
-        {selectedColumn && (
-          <EuiButtonIcon
-            data-test-subj="indexPattern-dimensionPopover-remove"
-            iconType="cross"
-            iconSize="s"
-            size="s"
-            color="danger"
-            aria-label={i18n.translate('xpack.lens.indexPattern.removeColumnLabel', {
-              defaultMessage: 'Remove configuration',
-            })}
-            title={i18n.translate('xpack.lens.indexPattern.removeColumnLabel', {
-              defaultMessage: 'Remove configuration',
-            })}
-            onClick={() => {
-              trackUiEvent('indexpattern_dimension_removed');
-              props.setState(
-                deleteColumn({
-                  state: props.state,
-                  layerId,
-                  columnId: props.columnId,
-                })
-              );
-              if (props.onRemove) {
-                props.onRemove(props.columnId);
-              }
-            }}
-          />
-        )}
-      </DragDrop>
-    </ChildDragDropProvider>
+    <PopoverEditor
+      {...props}
+      currentIndexPattern={currentIndexPattern}
+      selectedColumn={selectedColumn}
+      operationFieldSupportMatrix={operationFieldSupportMatrix}
+    />
   );
 };
 
-export const IndexPatternDimensionPanel = memo(IndexPatternDimensionPanelComponent);
+export const IndexPatternDimensionTrigger = memo(IndexPatternDimensionTriggerComponent);
+export const IndexPatternDimensionEditor = memo(IndexPatternDimensionEditorComponent);
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx
index 056a8d177dfe81..e26c338b6e2404 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx
@@ -7,22 +7,18 @@
 import _ from 'lodash';
 import React, { useState, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
 import {
-  EuiPopover,
   EuiFlexItem,
   EuiFlexGroup,
   EuiSideNav,
   EuiCallOut,
   EuiFormRow,
   EuiFieldText,
-  EuiLink,
-  EuiButtonEmpty,
   EuiSpacer,
 } from '@elastic/eui';
 import classNames from 'classnames';
 import { IndexPatternColumn, OperationType } from '../indexpattern';
-import { IndexPatternDimensionPanelProps, OperationFieldSupportMatrix } from './dimension_panel';
+import { IndexPatternDimensionEditorProps, OperationFieldSupportMatrix } from './dimension_panel';
 import {
   operationDefinitionMap,
   getOperationDisplay,
@@ -39,7 +35,7 @@ import { FormatSelector } from './format_selector';
 
 const operationPanels = getOperationDisplay();
 
-export interface PopoverEditorProps extends IndexPatternDimensionPanelProps {
+export interface PopoverEditorProps extends IndexPatternDimensionEditorProps {
   selectedColumn?: IndexPatternColumn;
   operationFieldSupportMatrix: OperationFieldSupportMatrix;
   currentIndexPattern: IndexPattern;
@@ -67,11 +63,9 @@ export function PopoverEditor(props: PopoverEditorProps) {
     setState,
     layerId,
     currentIndexPattern,
-    uniqueLabel,
     hideGrouping,
   } = props;
   const { operationByField, fieldByOperation } = operationFieldSupportMatrix;
-  const [isPopoverOpen, setPopoverOpen] = useState(false);
   const [
     incompatibleSelectedOperationType,
     setInvalidOperationType,
@@ -115,14 +109,14 @@ export function PopoverEditor(props: PopoverEditorProps) {
         items: getOperationTypes().map(({ operationType, compatibleWithCurrentField }) => ({
           name: operationPanels[operationType].displayName,
           id: operationType as string,
-          className: classNames('lnsPopoverEditor__operation', {
-            'lnsPopoverEditor__operation--selected': Boolean(
+          className: classNames('lnsIndexPatternDimensionEditor__operation', {
+            'lnsIndexPatternDimensionEditor__operation--selected': Boolean(
               incompatibleSelectedOperationType === operationType ||
                 (!incompatibleSelectedOperationType &&
                   selectedColumn &&
                   selectedColumn.operationType === operationType)
             ),
-            'lnsPopoverEditor__operation--incompatible': !compatibleWithCurrentField,
+            'lnsIndexPatternDimensionEditor__operation--incompatible': !compatibleWithCurrentField,
           }),
           'data-test-subj': `lns-indexPatternDimension${
             compatibleWithCurrentField ? '' : 'Incompatible'
@@ -188,246 +182,193 @@ export function PopoverEditor(props: PopoverEditorProps) {
   }
 
   return (
-    <EuiPopover
-      id={columnId}
-      className="lnsPopoverEditor"
-      anchorClassName={selectedColumn ? 'lnsPopoverEditor__anchor' : 'lnsPopoverEditor__link'}
-      button={
-        selectedColumn ? (
-          <EuiLink
-            className="lnsPopoverEditor__link"
-            onClick={() => {
-              setPopoverOpen(!isPopoverOpen);
+    <div id={columnId} className="lnsIndexPatternDimensionEditor">
+      <EuiFlexGroup gutterSize="s" direction="column">
+        <EuiFlexItem>
+          <FieldSelect
+            currentIndexPattern={currentIndexPattern}
+            existingFields={state.existingFields}
+            showEmptyFields={state.showEmptyFields}
+            fieldMap={fieldMap}
+            operationFieldSupportMatrix={operationFieldSupportMatrix}
+            selectedColumnOperationType={selectedColumn && selectedColumn.operationType}
+            selectedColumnSourceField={
+              selectedColumn && hasField(selectedColumn) ? selectedColumn.sourceField : undefined
+            }
+            incompatibleSelectedOperationType={incompatibleSelectedOperationType}
+            onDeleteColumn={() => {
+              setState(
+                deleteColumn({
+                  state,
+                  layerId,
+                  columnId,
+                })
+              );
             }}
-            data-test-subj="indexPattern-configure-dimension"
-            aria-label={i18n.translate('xpack.lens.configure.editConfig', {
-              defaultMessage: 'Edit configuration',
-            })}
-            title={i18n.translate('xpack.lens.configure.editConfig', {
-              defaultMessage: 'Edit configuration',
-            })}
-          >
-            {uniqueLabel}
-          </EuiLink>
-        ) : (
-          <>
-            <EuiButtonEmpty
-              iconType="plusInCircleFilled"
-              data-test-subj="indexPattern-configure-dimension"
-              aria-label={i18n.translate('xpack.lens.configure.addConfig', {
-                defaultMessage: 'Add a configuration',
-              })}
-              title={i18n.translate('xpack.lens.configure.addConfig', {
-                defaultMessage: 'Add a configuration',
-              })}
-              onClick={() => setPopoverOpen(!isPopoverOpen)}
-              size="xs"
-            >
-              <FormattedMessage
-                id="xpack.lens.configure.emptyConfig"
-                defaultMessage="Drop a field here"
-              />
-            </EuiButtonEmpty>
-          </>
-        )
-      }
-      isOpen={isPopoverOpen}
-      closePopover={() => {
-        setPopoverOpen(false);
-        setInvalidOperationType(null);
-      }}
-      anchorPosition="leftUp"
-      withTitle
-      panelPaddingSize="s"
-    >
-      {isPopoverOpen && (
-        <EuiFlexGroup gutterSize="s" direction="column">
-          <EuiFlexItem>
-            <FieldSelect
-              currentIndexPattern={currentIndexPattern}
-              existingFields={state.existingFields}
-              showEmptyFields={state.showEmptyFields}
-              fieldMap={fieldMap}
-              operationFieldSupportMatrix={operationFieldSupportMatrix}
-              selectedColumnOperationType={selectedColumn && selectedColumn.operationType}
-              selectedColumnSourceField={
-                selectedColumn && hasField(selectedColumn) ? selectedColumn.sourceField : undefined
-              }
-              incompatibleSelectedOperationType={incompatibleSelectedOperationType}
-              onDeleteColumn={() => {
-                setState(
-                  deleteColumn({
-                    state,
-                    layerId,
-                    columnId,
-                  })
-                );
-              }}
-              onChoose={choice => {
-                let column: IndexPatternColumn;
-                if (
-                  !incompatibleSelectedOperationType &&
-                  selectedColumn &&
-                  'field' in choice &&
-                  choice.operationType === selectedColumn.operationType
-                ) {
-                  // If we just changed the field are not in an error state and the operation didn't change,
-                  // we use the operations onFieldChange method to calculate the new column.
-                  column = changeField(selectedColumn, currentIndexPattern, fieldMap[choice.field]);
-                } else {
-                  // Otherwise we'll use the buildColumn method to calculate a new column
-                  const compatibleOperations =
-                    ('field' in choice &&
-                      operationFieldSupportMatrix.operationByField[choice.field]) ||
-                    [];
-                  let operation;
-                  if (compatibleOperations.length > 0) {
-                    operation =
-                      incompatibleSelectedOperationType &&
-                      compatibleOperations.includes(incompatibleSelectedOperationType)
-                        ? incompatibleSelectedOperationType
-                        : compatibleOperations[0];
-                  } else if ('field' in choice) {
-                    operation = choice.operationType;
-                  }
-                  column = buildColumn({
-                    columns: props.state.layers[props.layerId].columns,
-                    field: fieldMap[choice.field],
-                    indexPattern: currentIndexPattern,
-                    layerId: props.layerId,
-                    suggestedPriority: props.suggestedPriority,
-                    op: operation as OperationType,
-                    previousColumn: selectedColumn,
-                  });
+            onChoose={choice => {
+              let column: IndexPatternColumn;
+              if (
+                !incompatibleSelectedOperationType &&
+                selectedColumn &&
+                'field' in choice &&
+                choice.operationType === selectedColumn.operationType
+              ) {
+                // If we just changed the field are not in an error state and the operation didn't change,
+                // we use the operations onFieldChange method to calculate the new column.
+                column = changeField(selectedColumn, currentIndexPattern, fieldMap[choice.field]);
+              } else {
+                // Otherwise we'll use the buildColumn method to calculate a new column
+                const compatibleOperations =
+                  ('field' in choice &&
+                    operationFieldSupportMatrix.operationByField[choice.field]) ||
+                  [];
+                let operation;
+                if (compatibleOperations.length > 0) {
+                  operation =
+                    incompatibleSelectedOperationType &&
+                    compatibleOperations.includes(incompatibleSelectedOperationType)
+                      ? incompatibleSelectedOperationType
+                      : compatibleOperations[0];
+                } else if ('field' in choice) {
+                  operation = choice.operationType;
                 }
+                column = buildColumn({
+                  columns: props.state.layers[props.layerId].columns,
+                  field: fieldMap[choice.field],
+                  indexPattern: currentIndexPattern,
+                  layerId: props.layerId,
+                  suggestedPriority: props.suggestedPriority,
+                  op: operation as OperationType,
+                  previousColumn: selectedColumn,
+                });
+              }
 
-                setState(
-                  changeColumn({
-                    state,
-                    layerId,
-                    columnId,
-                    newColumn: column,
-                    keepParams: false,
-                  })
-                );
-                setInvalidOperationType(null);
-              }}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiFlexGroup gutterSize="s">
-              <EuiFlexItem grow={null} className={classNames('lnsPopoverEditor__left')}>
-                <EuiSideNav items={getSideNavItems()} />
-              </EuiFlexItem>
-              <EuiFlexItem grow={true} className="lnsPopoverEditor__right">
-                {incompatibleSelectedOperationType && selectedColumn && (
-                  <EuiCallOut
-                    data-test-subj="indexPattern-invalid-operation"
-                    title={i18n.translate('xpack.lens.indexPattern.invalidOperationLabel', {
-                      defaultMessage: 'To use this function, select a different field.',
-                    })}
-                    color="warning"
-                    size="s"
-                    iconType="sortUp"
-                  />
-                )}
-                {incompatibleSelectedOperationType && !selectedColumn && (
-                  <EuiCallOut
-                    size="s"
-                    data-test-subj="indexPattern-fieldless-operation"
-                    title={i18n.translate('xpack.lens.indexPattern.fieldlessOperationLabel', {
-                      defaultMessage: 'To use this function, select a field.',
-                    })}
-                    iconType="sortUp"
-                  />
-                )}
-                {!incompatibleSelectedOperationType && ParamEditor && (
-                  <>
-                    <ParamEditor
-                      state={state}
-                      setState={setState}
-                      columnId={columnId}
-                      currentColumn={state.layers[layerId].columns[columnId]}
-                      storage={props.storage}
-                      uiSettings={props.uiSettings}
-                      savedObjectsClient={props.savedObjectsClient}
-                      layerId={layerId}
-                      http={props.http}
-                      dateRange={props.dateRange}
-                      data={props.data}
-                    />
-                    <EuiSpacer size="m" />
-                  </>
-                )}
-                {!incompatibleSelectedOperationType && selectedColumn && (
-                  <EuiFormRow
-                    label={i18n.translate('xpack.lens.indexPattern.columnLabel', {
-                      defaultMessage: 'Label',
-                      description: 'Label of a column of data',
-                    })}
-                    display="rowCompressed"
-                  >
-                    <EuiFieldText
-                      compressed
-                      data-test-subj="indexPattern-label-edit"
-                      value={selectedColumn.label}
-                      onChange={e => {
-                        setState(
-                          changeColumn({
-                            state,
-                            layerId,
-                            columnId,
-                            newColumn: {
-                              ...selectedColumn,
-                              label: e.target.value,
-                            },
-                          })
-                        );
-                      }}
-                    />
-                  </EuiFormRow>
-                )}
-
-                {!hideGrouping && (
-                  <BucketNestingEditor
-                    layer={state.layers[props.layerId]}
-                    columnId={props.columnId}
-                    setColumns={columnOrder => {
-                      setState({
-                        ...state,
-                        layers: {
-                          ...state.layers,
-                          [props.layerId]: {
-                            ...state.layers[props.layerId],
-                            columnOrder,
-                          },
-                        },
-                      });
-                    }}
+              setState(
+                changeColumn({
+                  state,
+                  layerId,
+                  columnId,
+                  newColumn: column,
+                  keepParams: false,
+                })
+              );
+              setInvalidOperationType(null);
+            }}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFlexGroup gutterSize="s">
+            <EuiFlexItem grow={null} className={classNames('lnsIndexPatternDimensionEditor__left')}>
+              <EuiSideNav items={getSideNavItems()} />
+            </EuiFlexItem>
+            <EuiFlexItem grow={true} className="lnsIndexPatternDimensionEditor__right">
+              {incompatibleSelectedOperationType && selectedColumn && (
+                <EuiCallOut
+                  data-test-subj="indexPattern-invalid-operation"
+                  title={i18n.translate('xpack.lens.indexPattern.invalidOperationLabel', {
+                    defaultMessage: 'To use this function, select a different field.',
+                  })}
+                  color="warning"
+                  size="s"
+                  iconType="sortUp"
+                />
+              )}
+              {incompatibleSelectedOperationType && !selectedColumn && (
+                <EuiCallOut
+                  size="s"
+                  data-test-subj="indexPattern-fieldless-operation"
+                  title={i18n.translate('xpack.lens.indexPattern.fieldlessOperationLabel', {
+                    defaultMessage: 'To use this function, select a field.',
+                  })}
+                  iconType="sortUp"
+                />
+              )}
+              {!incompatibleSelectedOperationType && ParamEditor && (
+                <>
+                  <ParamEditor
+                    state={state}
+                    setState={setState}
+                    columnId={columnId}
+                    currentColumn={state.layers[layerId].columns[columnId]}
+                    storage={props.storage}
+                    uiSettings={props.uiSettings}
+                    savedObjectsClient={props.savedObjectsClient}
+                    layerId={layerId}
+                    http={props.http}
+                    dateRange={props.dateRange}
+                    data={props.data}
                   />
-                )}
-
-                {selectedColumn && selectedColumn.dataType === 'number' ? (
-                  <FormatSelector
-                    selectedColumn={selectedColumn}
-                    onChange={newFormat => {
+                  <EuiSpacer size="m" />
+                </>
+              )}
+              {!incompatibleSelectedOperationType && selectedColumn && (
+                <EuiFormRow
+                  label={i18n.translate('xpack.lens.indexPattern.columnLabel', {
+                    defaultMessage: 'Label',
+                    description: 'Label of a column of data',
+                  })}
+                  display="rowCompressed"
+                >
+                  <EuiFieldText
+                    compressed
+                    data-test-subj="indexPattern-label-edit"
+                    value={selectedColumn.label}
+                    onChange={e => {
                       setState(
-                        updateColumnParam({
+                        changeColumn({
                           state,
                           layerId,
-                          currentColumn: selectedColumn,
-                          paramName: 'format',
-                          value: newFormat,
+                          columnId,
+                          newColumn: {
+                            ...selectedColumn,
+                            label: e.target.value,
+                          },
                         })
                       );
                     }}
                   />
-                ) : null}
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      )}
-    </EuiPopover>
+                </EuiFormRow>
+              )}
+
+              {!hideGrouping && (
+                <BucketNestingEditor
+                  layer={state.layers[props.layerId]}
+                  columnId={props.columnId}
+                  setColumns={columnOrder => {
+                    setState({
+                      ...state,
+                      layers: {
+                        ...state.layers,
+                        [props.layerId]: {
+                          ...state.layers[props.layerId],
+                          columnOrder,
+                        },
+                      },
+                    });
+                  }}
+                />
+              )}
+
+              {selectedColumn && selectedColumn.dataType === 'number' ? (
+                <FormatSelector
+                  selectedColumn={selectedColumn}
+                  onChange={newFormat => {
+                    setState(
+                      updateColumnParam({
+                        state,
+                        layerId,
+                        currentColumn: selectedColumn,
+                        paramName: 'format',
+                        value: newFormat,
+                      })
+                    );
+                  }}
+                />
+              ) : null}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
   );
 }
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/indexpattern.test.ts b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/indexpattern.test.ts
index 25121eec30f2a9..76e59a170a9e93 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/indexpattern.test.ts
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/indexpattern.test.ts
@@ -408,7 +408,6 @@ describe('IndexPattern Data Source', () => {
       const initialState = stateFromPersistedState(persistedState);
       publicAPI = indexPatternDatasource.getPublicAPI({
         state: initialState,
-        setState: () => {},
         layerId: 'first',
         dateRange: {
           fromDate: 'now-30d',
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/indexpattern.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/indexpattern.tsx
index 00f52d6a1747f7..9c2a9c9bf4a091 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/indexpattern.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/indexpattern.tsx
@@ -12,7 +12,8 @@ import { CoreStart } from 'src/core/public';
 import { i18n } from '@kbn/i18n';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import {
-  DatasourceDimensionPanelProps,
+  DatasourceDimensionEditorProps,
+  DatasourceDimensionTriggerProps,
   DatasourceDataPanelProps,
   Operation,
   DatasourceLayerPanelProps,
@@ -20,7 +21,12 @@ import {
 } from '../types';
 import { loadInitialState, changeIndexPattern, changeLayerIndexPattern } from './loader';
 import { toExpression } from './to_expression';
-import { IndexPatternDimensionPanel } from './dimension_panel';
+import {
+  IndexPatternDimensionTrigger,
+  IndexPatternDimensionEditor,
+  canHandleDrop,
+  onDrop,
+} from './dimension_panel';
 import { IndexPatternDataPanel } from './datapanel';
 import {
   getDatasourceSuggestionsForField,
@@ -38,6 +44,7 @@ import {
 } from './types';
 import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
 import { Plugin as DataPlugin } from '../../../../../../src/plugins/data/public';
+import { deleteColumn } from './state_helpers';
 import { Datasource, StateSetter } from '..';
 
 export { OperationType, IndexPatternColumn } from './operations';
@@ -80,6 +87,9 @@ export function uniqueLabels(layers: Record<string, IndexPatternLayer>) {
   };
 
   Object.values(layers).forEach(layer => {
+    if (!layer.columns) {
+      return;
+    }
     Object.entries(layer.columns).forEach(([columnId, column]) => {
       columnLabelMap[columnId] = makeUnique(column.label);
     });
@@ -156,6 +166,14 @@ export function getIndexPatternDatasource({
       return Object.keys(state.layers);
     },
 
+    removeColumn({ prevState, layerId, columnId }) {
+      return deleteColumn({
+        state: prevState,
+        layerId,
+        columnId,
+      });
+    },
+
     toExpression,
 
     getMetaData(state: IndexPatternPrivateState) {
@@ -198,15 +216,97 @@ export function getIndexPatternDatasource({
       );
     },
 
-    getPublicAPI({
-      state,
-      setState,
-      layerId,
-      dateRange,
-    }: PublicAPIProps<IndexPatternPrivateState>) {
+    renderDimensionTrigger: (
+      domElement: Element,
+      props: DatasourceDimensionTriggerProps<IndexPatternPrivateState>
+    ) => {
+      const columnLabelMap = uniqueLabels(props.state.layers);
+
+      render(
+        <I18nProvider>
+          <KibanaContextProvider
+            services={{
+              appName: 'lens',
+              storage,
+              uiSettings,
+              data,
+              savedObjects: core.savedObjects,
+              docLinks: core.docLinks,
+            }}
+          >
+            <IndexPatternDimensionTrigger uniqueLabel={columnLabelMap[props.columnId]} {...props} />
+          </KibanaContextProvider>
+        </I18nProvider>,
+        domElement
+      );
+    },
+
+    renderDimensionEditor: (
+      domElement: Element,
+      props: DatasourceDimensionEditorProps<IndexPatternPrivateState>
+    ) => {
+      const columnLabelMap = uniqueLabels(props.state.layers);
+
+      render(
+        <I18nProvider>
+          <KibanaContextProvider
+            services={{
+              appName: 'lens',
+              storage,
+              uiSettings,
+              data,
+              savedObjects: core.savedObjects,
+              docLinks: core.docLinks,
+            }}
+          >
+            <IndexPatternDimensionEditor
+              uiSettings={uiSettings}
+              storage={storage}
+              savedObjectsClient={core.savedObjects.client}
+              http={core.http}
+              data={data}
+              uniqueLabel={columnLabelMap[props.columnId]}
+              {...props}
+            />
+          </KibanaContextProvider>
+        </I18nProvider>,
+        domElement
+      );
+    },
+
+    renderLayerPanel: (
+      domElement: Element,
+      props: DatasourceLayerPanelProps<IndexPatternPrivateState>
+    ) => {
+      render(
+        <LayerPanel
+          state={props.state}
+          onChangeIndexPattern={indexPatternId => {
+            changeLayerIndexPattern({
+              savedObjectsClient,
+              indexPatternId,
+              setState: props.setState,
+              state: props.state,
+              layerId: props.layerId,
+              onError: onIndexPatternLoadError,
+              replaceIfPossible: true,
+            });
+          }}
+          {...props}
+        />,
+        domElement
+      );
+    },
+
+    canHandleDrop,
+    onDrop,
+
+    getPublicAPI({ state, layerId }: PublicAPIProps<IndexPatternPrivateState>) {
       const columnLabelMap = uniqueLabels(state.layers);
 
       return {
+        datasourceId: 'indexpattern',
+
         getTableSpec: () => {
           return state.layers[layerId].columnOrder.map(colId => ({ columnId: colId }));
         },
@@ -218,58 +318,6 @@ export function getIndexPatternDatasource({
           }
           return null;
         },
-        renderDimensionPanel: (domElement: Element, props: DatasourceDimensionPanelProps) => {
-          render(
-            <I18nProvider>
-              <KibanaContextProvider
-                services={{
-                  appName: 'lens',
-                  storage,
-                  uiSettings,
-                  data,
-                  savedObjects: core.savedObjects,
-                  docLinks: core.docLinks,
-                }}
-              >
-                <IndexPatternDimensionPanel
-                  state={state}
-                  setState={setState}
-                  uiSettings={uiSettings}
-                  storage={storage}
-                  savedObjectsClient={core.savedObjects.client}
-                  layerId={props.layerId}
-                  http={core.http}
-                  data={data}
-                  uniqueLabel={columnLabelMap[props.columnId]}
-                  dateRange={dateRange}
-                  {...props}
-                />
-              </KibanaContextProvider>
-            </I18nProvider>,
-            domElement
-          );
-        },
-
-        renderLayerPanel: (domElement: Element, props: DatasourceLayerPanelProps) => {
-          render(
-            <LayerPanel
-              state={state}
-              onChangeIndexPattern={indexPatternId => {
-                changeLayerIndexPattern({
-                  savedObjectsClient,
-                  indexPatternId,
-                  setState,
-                  state,
-                  layerId: props.layerId,
-                  onError: onIndexPatternLoadError,
-                  replaceIfPossible: true,
-                });
-              }}
-              {...props}
-            />,
-            domElement
-          );
-        },
       };
     },
     getDatasourceSuggestionsForField(state, draggedField) {
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/layerpanel.test.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/layerpanel.test.tsx
index af7afb9cf9342a..219a6d935e436d 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/layerpanel.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/layerpanel.test.tsx
@@ -178,6 +178,7 @@ describe('Layer Data Panel', () => {
     defaultProps = {
       layerId: 'first',
       state: initialState,
+      setState: jest.fn(),
       onChangeIndexPattern: jest.fn(async () => {}),
     };
   });
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/layerpanel.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/layerpanel.tsx
index ae346ecc72cbce..eea00d52a77f95 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_datasource/layerpanel.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_datasource/layerpanel.tsx
@@ -11,7 +11,8 @@ import { DatasourceLayerPanelProps } from '../types';
 import { IndexPatternPrivateState } from './types';
 import { ChangeIndexPattern } from './change_indexpattern';
 
-export interface IndexPatternLayerPanelProps extends DatasourceLayerPanelProps {
+export interface IndexPatternLayerPanelProps
+  extends DatasourceLayerPanelProps<IndexPatternPrivateState> {
   state: IndexPatternPrivateState;
   onChangeIndexPattern: (newId: string) => void;
 }
diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization/metric_config_panel.test.tsx b/x-pack/legacy/plugins/lens/public/metric_visualization/metric_config_panel.test.tsx
deleted file mode 100644
index eac35f82a50fa0..00000000000000
--- a/x-pack/legacy/plugins/lens/public/metric_visualization/metric_config_panel.test.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React from 'react';
-import { ReactWrapper } from 'enzyme';
-import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
-import { MetricConfigPanel } from './metric_config_panel';
-import { DatasourceDimensionPanelProps, Operation, DatasourcePublicAPI } from '../types';
-import { State } from './types';
-import { NativeRendererProps } from '../native_renderer';
-import { createMockFramePublicAPI, createMockDatasource } from '../editor_frame_service/mocks';
-
-describe('MetricConfigPanel', () => {
-  const dragDropContext = { dragging: undefined, setDragging: jest.fn() };
-
-  function mockDatasource(): DatasourcePublicAPI {
-    return createMockDatasource().publicAPIMock;
-  }
-
-  function testState(): State {
-    return {
-      accessor: 'foo',
-      layerId: 'bar',
-    };
-  }
-
-  function testSubj(component: ReactWrapper<unknown>, subj: string) {
-    return component
-      .find(`[data-test-subj="${subj}"]`)
-      .first()
-      .props();
-  }
-
-  test('the value dimension panel only accepts singular numeric operations', () => {
-    const state = testState();
-    const component = mount(
-      <MetricConfigPanel
-        layerId="bar"
-        dragDropContext={dragDropContext}
-        setState={jest.fn()}
-        frame={{
-          ...createMockFramePublicAPI(),
-          datasourceLayers: { bar: mockDatasource() },
-        }}
-        state={{ ...state, accessor: 'shazm' }}
-      />
-    );
-
-    const panel = testSubj(component, 'lns_metric_valueDimensionPanel');
-    const nativeProps = (panel as NativeRendererProps<DatasourceDimensionPanelProps>).nativeProps;
-    const { columnId, filterOperations } = nativeProps;
-    const exampleOperation: Operation = {
-      dataType: 'number',
-      isBucketed: false,
-      label: 'bar',
-    };
-    const ops: Operation[] = [
-      { ...exampleOperation, dataType: 'number' },
-      { ...exampleOperation, dataType: 'string' },
-      { ...exampleOperation, dataType: 'boolean' },
-      { ...exampleOperation, dataType: 'date' },
-    ];
-    expect(columnId).toEqual('shazm');
-    expect(ops.filter(filterOperations)).toEqual([{ ...exampleOperation, dataType: 'number' }]);
-  });
-});
diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization/metric_config_panel.tsx b/x-pack/legacy/plugins/lens/public/metric_visualization/metric_config_panel.tsx
deleted file mode 100644
index 16e24f247fb684..00000000000000
--- a/x-pack/legacy/plugins/lens/public/metric_visualization/metric_config_panel.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React from 'react';
-import { i18n } from '@kbn/i18n';
-import { EuiFormRow } from '@elastic/eui';
-import { State } from './types';
-import { VisualizationLayerConfigProps, OperationMetadata } from '../types';
-import { NativeRenderer } from '../native_renderer';
-
-const isMetric = (op: OperationMetadata) => !op.isBucketed && op.dataType === 'number';
-
-export function MetricConfigPanel(props: VisualizationLayerConfigProps<State>) {
-  const { state, frame, layerId } = props;
-  const datasource = frame.datasourceLayers[layerId];
-
-  return (
-    <EuiFormRow
-      className="lnsConfigPanel__axis"
-      label={i18n.translate('xpack.lens.metric.valueLabel', {
-        defaultMessage: 'Value',
-      })}
-    >
-      <NativeRenderer
-        data-test-subj={'lns_metric_valueDimensionPanel'}
-        render={datasource.renderDimensionPanel}
-        nativeProps={{
-          layerId,
-          columnId: state.accessor,
-          dragDropContext: props.dragDropContext,
-          filterOperations: isMetric,
-        }}
-      />
-    </EuiFormRow>
-  );
-}
diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization/metric_expression.tsx b/x-pack/legacy/plugins/lens/public/metric_visualization/metric_expression.tsx
index 66ed963002f590..4d979a766cd2b9 100644
--- a/x-pack/legacy/plugins/lens/public/metric_visualization/metric_expression.tsx
+++ b/x-pack/legacy/plugins/lens/public/metric_visualization/metric_expression.tsx
@@ -91,6 +91,11 @@ export function MetricChart({
   const { title, accessor, mode } = args;
   let value = '-';
   const firstTable = Object.values(data.tables)[0];
+  if (!accessor) {
+    return (
+      <VisualizationContainer reportTitle={title} className="lnsMetricExpression__container" />
+    );
+  }
 
   if (firstTable) {
     const column = firstTable.columns[0];
diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization/metric_visualization.test.ts b/x-pack/legacy/plugins/lens/public/metric_visualization/metric_visualization.test.ts
index 88964b95c2ac7e..276f24433c6708 100644
--- a/x-pack/legacy/plugins/lens/public/metric_visualization/metric_visualization.test.ts
+++ b/x-pack/legacy/plugins/lens/public/metric_visualization/metric_visualization.test.ts
@@ -24,8 +24,8 @@ function mockFrame(): FramePublicAPI {
     ...createMockFramePublicAPI(),
     addNewLayer: () => 'l42',
     datasourceLayers: {
-      l1: createMockDatasource().publicAPIMock,
-      l42: createMockDatasource().publicAPIMock,
+      l1: createMockDatasource('l1').publicAPIMock,
+      l42: createMockDatasource('l42').publicAPIMock,
     },
   };
 }
@@ -36,10 +36,10 @@ describe('metric_visualization', () => {
       (generateId as jest.Mock).mockReturnValueOnce('test-id1');
       const initialState = metricVisualization.initialize(mockFrame());
 
-      expect(initialState.accessor).toBeDefined();
+      expect(initialState.accessor).not.toBeDefined();
       expect(initialState).toMatchInlineSnapshot(`
                 Object {
-                  "accessor": "test-id1",
+                  "accessor": undefined,
                   "layerId": "l42",
                 }
             `);
@@ -60,7 +60,7 @@ describe('metric_visualization', () => {
     it('returns a clean layer', () => {
       (generateId as jest.Mock).mockReturnValueOnce('test-id1');
       expect(metricVisualization.clearLayer(exampleState(), 'l1')).toEqual({
-        accessor: 'test-id1',
+        accessor: undefined,
         layerId: 'l1',
       });
     });
@@ -72,10 +72,47 @@ describe('metric_visualization', () => {
     });
   });
 
+  describe('#setDimension', () => {
+    it('sets the accessor', () => {
+      expect(
+        metricVisualization.setDimension({
+          prevState: {
+            accessor: undefined,
+            layerId: 'l1',
+          },
+          layerId: 'l1',
+          groupId: '',
+          columnId: 'newDimension',
+        })
+      ).toEqual({
+        accessor: 'newDimension',
+        layerId: 'l1',
+      });
+    });
+  });
+
+  describe('#removeDimension', () => {
+    it('removes the accessor', () => {
+      expect(
+        metricVisualization.removeDimension({
+          prevState: {
+            accessor: 'a',
+            layerId: 'l1',
+          },
+          layerId: 'l1',
+          columnId: 'a',
+        })
+      ).toEqual({
+        accessor: undefined,
+        layerId: 'l1',
+      });
+    });
+  });
+
   describe('#toExpression', () => {
     it('should map to a valid AST', () => {
       const datasource: DatasourcePublicAPI = {
-        ...createMockDatasource().publicAPIMock,
+        ...createMockDatasource('l1').publicAPIMock,
         getOperationForColumnId(_: string) {
           return {
             id: 'a',
diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization/metric_visualization.tsx b/x-pack/legacy/plugins/lens/public/metric_visualization/metric_visualization.tsx
index 6714c057878373..44256df5aed6d4 100644
--- a/x-pack/legacy/plugins/lens/public/metric_visualization/metric_visualization.tsx
+++ b/x-pack/legacy/plugins/lens/public/metric_visualization/metric_visualization.tsx
@@ -4,23 +4,22 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { render } from 'react-dom';
-import { I18nProvider } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { Ast } from '@kbn/interpreter/target/common';
 import { getSuggestions } from './metric_suggestions';
-import { MetricConfigPanel } from './metric_config_panel';
-import { Visualization, FramePublicAPI } from '../types';
+import { Visualization, FramePublicAPI, OperationMetadata } from '../types';
 import { State, PersistableState } from './types';
-import { generateId } from '../id_generator';
 import chartMetricSVG from '../assets/chart_metric.svg';
 
 const toExpression = (
   state: State,
   frame: FramePublicAPI,
   mode: 'reduced' | 'full' = 'full'
-): Ast => {
+): Ast | null => {
+  if (!state.accessor) {
+    return null;
+  }
+
   const [datasource] = Object.values(frame.datasourceLayers);
   const operation = datasource && datasource.getOperationForColumnId(state.accessor);
 
@@ -57,7 +56,7 @@ export const metricVisualization: Visualization<State, PersistableState> = {
   clearLayer(state) {
     return {
       ...state,
-      accessor: generateId(),
+      accessor: undefined,
     };
   },
 
@@ -80,22 +79,37 @@ export const metricVisualization: Visualization<State, PersistableState> = {
     return (
       state || {
         layerId: frame.addNewLayer(),
-        accessor: generateId(),
+        accessor: undefined,
       }
     );
   },
 
   getPersistableState: state => state,
 
-  renderLayerConfigPanel: (domElement, props) =>
-    render(
-      <I18nProvider>
-        <MetricConfigPanel {...props} />
-      </I18nProvider>,
-      domElement
-    ),
+  getConfiguration(props) {
+    return {
+      groups: [
+        {
+          groupId: 'metric',
+          groupLabel: i18n.translate('xpack.lens.metric.label', { defaultMessage: 'Metric' }),
+          layerId: props.state.layerId,
+          accessors: props.state.accessor ? [props.state.accessor] : [],
+          supportsMoreColumns: false,
+          filterOperations: (op: OperationMetadata) => !op.isBucketed && op.dataType === 'number',
+        },
+      ],
+    };
+  },
 
   toExpression,
   toPreviewExpression: (state: State, frame: FramePublicAPI) =>
     toExpression(state, frame, 'reduced'),
+
+  setDimension({ prevState, columnId }) {
+    return { ...prevState, accessor: columnId };
+  },
+
+  removeDimension({ prevState }) {
+    return { ...prevState, accessor: undefined };
+  },
 };
diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization/types.ts b/x-pack/legacy/plugins/lens/public/metric_visualization/types.ts
index 6348d80b15e2f3..53fc1039342558 100644
--- a/x-pack/legacy/plugins/lens/public/metric_visualization/types.ts
+++ b/x-pack/legacy/plugins/lens/public/metric_visualization/types.ts
@@ -6,7 +6,7 @@
 
 export interface State {
   layerId: string;
-  accessor: string;
+  accessor?: string;
 }
 
 export interface MetricConfig extends State {
diff --git a/x-pack/legacy/plugins/lens/public/multi_column_editor/index.ts b/x-pack/legacy/plugins/lens/public/multi_column_editor/index.ts
deleted file mode 100644
index 92bad0dc90766f..00000000000000
--- a/x-pack/legacy/plugins/lens/public/multi_column_editor/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-export * from './multi_column_editor';
diff --git a/x-pack/legacy/plugins/lens/public/multi_column_editor/multi_column_editor.test.tsx b/x-pack/legacy/plugins/lens/public/multi_column_editor/multi_column_editor.test.tsx
deleted file mode 100644
index 38f48c9cdaf727..00000000000000
--- a/x-pack/legacy/plugins/lens/public/multi_column_editor/multi_column_editor.test.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React from 'react';
-import { createMockDatasource } from '../editor_frame_service/mocks';
-import { MultiColumnEditor } from './multi_column_editor';
-import { mount } from 'enzyme';
-
-jest.useFakeTimers();
-
-describe('MultiColumnEditor', () => {
-  it('should add a trailing accessor if the accessor list is empty', () => {
-    const onAdd = jest.fn();
-    mount(
-      <MultiColumnEditor
-        accessors={[]}
-        datasource={createMockDatasource().publicAPIMock}
-        dragDropContext={{ dragging: undefined, setDragging: jest.fn() }}
-        filterOperations={() => true}
-        layerId="foo"
-        onAdd={onAdd}
-        onRemove={jest.fn()}
-        testSubj="bar"
-      />
-    );
-
-    expect(onAdd).toHaveBeenCalledTimes(0);
-
-    jest.runAllTimers();
-
-    expect(onAdd).toHaveBeenCalledTimes(1);
-  });
-
-  it('should add a trailing accessor if the last accessor is configured', () => {
-    const onAdd = jest.fn();
-    mount(
-      <MultiColumnEditor
-        accessors={['baz']}
-        datasource={{
-          ...createMockDatasource().publicAPIMock,
-          getOperationForColumnId(id) {
-            if (id !== 'baz') {
-              throw new Error(`Unexpected id: ${id}`);
-            }
-            return {
-              dataType: 'number',
-              id,
-              isBucketed: true,
-              label: 'BaaaZZZ!',
-            };
-          },
-        }}
-        dragDropContext={{ dragging: undefined, setDragging: jest.fn() }}
-        filterOperations={() => true}
-        layerId="foo"
-        onAdd={onAdd}
-        onRemove={jest.fn()}
-        testSubj="bar"
-      />
-    );
-
-    expect(onAdd).toHaveBeenCalledTimes(0);
-
-    jest.runAllTimers();
-
-    expect(onAdd).toHaveBeenCalledTimes(1);
-  });
-});
diff --git a/x-pack/legacy/plugins/lens/public/multi_column_editor/multi_column_editor.tsx b/x-pack/legacy/plugins/lens/public/multi_column_editor/multi_column_editor.tsx
deleted file mode 100644
index 422f1dcf60f3c4..00000000000000
--- a/x-pack/legacy/plugins/lens/public/multi_column_editor/multi_column_editor.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React, { useEffect } from 'react';
-import { NativeRenderer } from '../native_renderer';
-import { DatasourcePublicAPI, OperationMetadata } from '../types';
-import { DragContextState } from '../drag_drop';
-
-interface Props {
-  accessors: string[];
-  datasource: DatasourcePublicAPI;
-  dragDropContext: DragContextState;
-  onRemove: (accessor: string) => void;
-  onAdd: () => void;
-  filterOperations: (op: OperationMetadata) => boolean;
-  suggestedPriority?: 0 | 1 | 2 | undefined;
-  testSubj: string;
-  layerId: string;
-}
-
-export function MultiColumnEditor({
-  accessors,
-  datasource,
-  dragDropContext,
-  onRemove,
-  onAdd,
-  filterOperations,
-  suggestedPriority,
-  testSubj,
-  layerId,
-}: Props) {
-  const lastOperation = datasource.getOperationForColumnId(accessors[accessors.length - 1]);
-
-  useEffect(() => {
-    if (accessors.length === 0 || lastOperation !== null) {
-      setTimeout(onAdd);
-    }
-  }, [lastOperation]);
-
-  return (
-    <>
-      {accessors.map(accessor => (
-        <div key={accessor}>
-          <NativeRenderer
-            data-test-subj={`lnsXY_${testSubj}_${accessor}`}
-            render={datasource.renderDimensionPanel}
-            nativeProps={{
-              columnId: accessor,
-              dragDropContext,
-              filterOperations,
-              suggestedPriority,
-              layerId,
-              onRemove,
-            }}
-          />
-        </div>
-      ))}
-    </>
-  );
-}
diff --git a/x-pack/legacy/plugins/lens/public/plugin.tsx b/x-pack/legacy/plugins/lens/public/plugin.tsx
index 7afe6d7abedc0e..75b969ab028e61 100644
--- a/x-pack/legacy/plugins/lens/public/plugin.tsx
+++ b/x-pack/legacy/plugins/lens/public/plugin.tsx
@@ -114,7 +114,7 @@ export class LensPlugin {
         const savedObjectsClient = coreStart.savedObjects.client;
         addHelpMenuToAppChrome(coreStart.chrome);
 
-        const instance = await this.createEditorFrame!({});
+        const instance = await this.createEditorFrame!();
 
         setReportManager(
           new LensReportManager({
diff --git a/x-pack/legacy/plugins/lens/public/types.ts b/x-pack/legacy/plugins/lens/public/types.ts
index b7983eeb8dbb8b..c897979b06cfb6 100644
--- a/x-pack/legacy/plugins/lens/public/types.ts
+++ b/x-pack/legacy/plugins/lens/public/types.ts
@@ -13,14 +13,10 @@ import { Document } from './persistence';
 import { DateRange } from '../../../../plugins/lens/common';
 import { Query, Filter, SavedQuery } from '../../../../../src/plugins/data/public';
 
-// eslint-disable-next-line
-export interface EditorFrameOptions {}
-
 export type ErrorCallback = (e: { message: string }) => void;
 
 export interface PublicAPIProps<T> {
   state: T;
-  setState: StateSetter<T>;
   layerId: string;
   dateRange: DateRange;
 }
@@ -34,6 +30,7 @@ export interface EditorFrameProps {
   savedQuery?: SavedQuery;
 
   // Frame loader (app or embeddable) is expected to call this when it loads and updates
+  // This should be replaced with a top-down state
   onChange: (newState: {
     filterableIndexPatterns: DatasourceMetaData['filterableIndexPatterns'];
     doc: Document;
@@ -53,7 +50,7 @@ export interface EditorFrameSetup {
 }
 
 export interface EditorFrameStart {
-  createInstance: (options: EditorFrameOptions) => Promise<EditorFrameInstance>;
+  createInstance: () => Promise<EditorFrameInstance>;
 }
 
 // Hints the default nesting to the data source. 0 is the highest priority
@@ -138,8 +135,14 @@ export interface Datasource<T = unknown, P = unknown> {
   removeLayer: (state: T, layerId: string) => T;
   clearLayer: (state: T, layerId: string) => T;
   getLayers: (state: T) => string[];
+  removeColumn: (props: { prevState: T; layerId: string; columnId: string }) => T;
 
   renderDataPanel: (domElement: Element, props: DatasourceDataPanelProps<T>) => void;
+  renderDimensionTrigger: (domElement: Element, props: DatasourceDimensionTriggerProps<T>) => void;
+  renderDimensionEditor: (domElement: Element, props: DatasourceDimensionEditorProps<T>) => void;
+  renderLayerPanel: (domElement: Element, props: DatasourceLayerPanelProps<T>) => void;
+  canHandleDrop: (props: DatasourceDimensionDropProps<T>) => boolean;
+  onDrop: (props: DatasourceDimensionDropHandlerProps<T>) => boolean;
 
   toExpression: (state: T, layerId: string) => Ast | string | null;
 
@@ -155,22 +158,11 @@ export interface Datasource<T = unknown, P = unknown> {
  * This is an API provided to visualizations by the frame, which calls the publicAPI on the datasource
  */
 export interface DatasourcePublicAPI {
-  getTableSpec: () => TableSpec;
+  datasourceId: string;
+  getTableSpec: () => Array<{ columnId: string }>;
   getOperationForColumnId: (columnId: string) => Operation | null;
-
-  // Render can be called many times
-  renderDimensionPanel: (domElement: Element, props: DatasourceDimensionPanelProps) => void;
-  renderLayerPanel: (domElement: Element, props: DatasourceLayerPanelProps) => void;
 }
 
-export interface TableSpecColumn {
-  // Column IDs are the keys for internal state in data sources and visualizations
-  columnId: string;
-}
-
-// TableSpec is managed by visualizations
-export type TableSpec = TableSpecColumn[];
-
 export interface DatasourceDataPanelProps<T = unknown> {
   state: T;
   dragDropContext: DragContextState;
@@ -181,31 +173,61 @@ export interface DatasourceDataPanelProps<T = unknown> {
   filters: Filter[];
 }
 
-// The only way a visualization has to restrict the query building
-export interface DatasourceDimensionPanelProps {
-  layerId: string;
-  columnId: string;
-
-  dragDropContext: DragContextState;
-
-  // Visualizations can restrict operations based on their own rules
+interface SharedDimensionProps {
+  /** Visualizations can restrict operations based on their own rules.
+   * For example, limiting to only bucketed or only numeric operations.
+   */
   filterOperations: (operation: OperationMetadata) => boolean;
 
-  // Visualizations can hint at the role this dimension would play, which
-  // affects the default ordering of the query
+  /** Visualizations can hint at the role this dimension would play, which
+   * affects the default ordering of the query
+   */
   suggestedPriority?: DimensionPriority;
-  onRemove?: (accessor: string) => void;
 
-  // Some dimension editors will allow users to change the operation grouping
-  // from the panel, and this lets the visualization hint that it doesn't want
-  // users to have that level of control
+  /** Some dimension editors will allow users to change the operation grouping
+   * from the panel, and this lets the visualization hint that it doesn't want
+   * users to have that level of control
+   */
   hideGrouping?: boolean;
 }
 
-export interface DatasourceLayerPanelProps {
+export type DatasourceDimensionProps<T> = SharedDimensionProps & {
   layerId: string;
+  columnId: string;
+  onRemove?: (accessor: string) => void;
+  state: T;
+};
+
+// The only way a visualization has to restrict the query building
+export type DatasourceDimensionEditorProps<T = unknown> = DatasourceDimensionProps<T> & {
+  setState: StateSetter<T>;
+  core: Pick<CoreSetup, 'http' | 'notifications' | 'uiSettings'>;
+  dateRange: DateRange;
+};
+
+export type DatasourceDimensionTriggerProps<T> = DatasourceDimensionProps<T> & {
+  dragDropContext: DragContextState;
+  togglePopover: () => void;
+};
+
+export interface DatasourceLayerPanelProps<T> {
+  layerId: string;
+  state: T;
+  setState: StateSetter<T>;
 }
 
+export type DatasourceDimensionDropProps<T> = SharedDimensionProps & {
+  layerId: string;
+  columnId: string;
+  state: T;
+  setState: StateSetter<T>;
+  dragDropContext: DragContextState;
+};
+
+export type DatasourceDimensionDropHandlerProps<T> = DatasourceDimensionDropProps<T> & {
+  droppedItem: unknown;
+};
+
 export type DataType = 'document' | 'string' | 'number' | 'date' | 'boolean' | 'ip';
 
 // An operation represents a column in a table, not any information
@@ -239,12 +261,32 @@ export interface LensMultiTable {
   };
 }
 
-export interface VisualizationLayerConfigProps<T = unknown> {
+export interface VisualizationConfigProps<T = unknown> {
   layerId: string;
-  dragDropContext: DragContextState;
   frame: FramePublicAPI;
   state: T;
+}
+
+export type VisualizationLayerWidgetProps<T = unknown> = VisualizationConfigProps<T> & {
   setState: (newState: T) => void;
+};
+
+type VisualizationDimensionGroupConfig = SharedDimensionProps & {
+  groupLabel: string;
+
+  /** ID is passed back to visualization. For example, `x` */
+  groupId: string;
+  accessors: string[];
+  supportsMoreColumns: boolean;
+  /** If required, a warning will appear if accessors are empty */
+  required?: boolean;
+  dataTestSubj?: string;
+};
+
+interface VisualizationDimensionChangeProps<T> {
+  layerId: string;
+  columnId: string;
+  prevState: T;
 }
 
 /**
@@ -329,16 +371,18 @@ export interface Visualization<T = unknown, P = unknown> {
   visualizationTypes: VisualizationType[];
 
   getLayerIds: (state: T) => string[];
-
   clearLayer: (state: T, layerId: string) => T;
-
   removeLayer?: (state: T, layerId: string) => T;
-
   appendLayer?: (state: T, layerId: string) => T;
 
+  // Layer context menu is used by visualizations for styling the entire layer
+  // For example, the XY visualization uses this to have multiple chart types
   getLayerContextMenuIcon?: (opts: { state: T; layerId: string }) => IconType | undefined;
+  renderLayerContextMenu?: (domElement: Element, props: VisualizationLayerWidgetProps<T>) => void;
 
-  renderLayerContextMenu?: (domElement: Element, props: VisualizationLayerConfigProps<T>) => void;
+  getConfiguration: (
+    props: VisualizationConfigProps<T>
+  ) => { groups: VisualizationDimensionGroupConfig[] };
 
   getDescription: (
     state: T
@@ -354,7 +398,13 @@ export interface Visualization<T = unknown, P = unknown> {
 
   getPersistableState: (state: T) => P;
 
-  renderLayerConfigPanel: (domElement: Element, props: VisualizationLayerConfigProps<T>) => void;
+  // Actions triggered by the frame which tell the datasource that a dimension is being changed
+  setDimension: (
+    props: VisualizationDimensionChangeProps<T> & {
+      groupId: string;
+    }
+  ) => T;
+  removeDimension: (props: VisualizationDimensionChangeProps<T>) => T;
 
   toExpression: (state: T, frame: FramePublicAPI) => Ast | string | null;
 
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization/__snapshots__/xy_visualization.test.ts.snap b/x-pack/legacy/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap
similarity index 96%
rename from x-pack/legacy/plugins/lens/public/xy_visualization/__snapshots__/xy_visualization.test.ts.snap
rename to x-pack/legacy/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap
index 76af8328673add..6b68679bfd4ec0 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization/__snapshots__/xy_visualization.test.ts.snap
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`xy_visualization #toExpression should map to a valid AST 1`] = `
+exports[`#toExpression should map to a valid AST 1`] = `
 Object {
   "chain": Array [
     Object {
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization/to_expression.test.ts b/x-pack/legacy/plugins/lens/public/xy_visualization/to_expression.test.ts
new file mode 100644
index 00000000000000..6bc379ea33bca1
--- /dev/null
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization/to_expression.test.ts
@@ -0,0 +1,133 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Ast } from '@kbn/interpreter/target/common';
+import { Position } from '@elastic/charts';
+import { xyVisualization } from './xy_visualization';
+import { Operation } from '../types';
+import { createMockDatasource, createMockFramePublicAPI } from '../editor_frame_service/mocks';
+
+describe('#toExpression', () => {
+  let mockDatasource: ReturnType<typeof createMockDatasource>;
+  let frame: ReturnType<typeof createMockFramePublicAPI>;
+
+  beforeEach(() => {
+    frame = createMockFramePublicAPI();
+    mockDatasource = createMockDatasource('testDatasource');
+
+    mockDatasource.publicAPIMock.getTableSpec.mockReturnValue([
+      { columnId: 'd' },
+      { columnId: 'a' },
+      { columnId: 'b' },
+      { columnId: 'c' },
+    ]);
+
+    mockDatasource.publicAPIMock.getOperationForColumnId.mockImplementation(col => {
+      return { label: `col_${col}`, dataType: 'number' } as Operation;
+    });
+
+    frame.datasourceLayers = {
+      first: mockDatasource.publicAPIMock,
+    };
+  });
+
+  it('should map to a valid AST', () => {
+    expect(
+      xyVisualization.toExpression(
+        {
+          legend: { position: Position.Bottom, isVisible: true },
+          preferredSeriesType: 'bar',
+          layers: [
+            {
+              layerId: 'first',
+              seriesType: 'area',
+              splitAccessor: 'd',
+              xAccessor: 'a',
+              accessors: ['b', 'c'],
+            },
+          ],
+        },
+        frame
+      )
+    ).toMatchSnapshot();
+  });
+
+  it('should not generate an expression when missing x', () => {
+    expect(
+      xyVisualization.toExpression(
+        {
+          legend: { position: Position.Bottom, isVisible: true },
+          preferredSeriesType: 'bar',
+          layers: [
+            {
+              layerId: 'first',
+              seriesType: 'area',
+              splitAccessor: undefined,
+              xAccessor: undefined,
+              accessors: ['a'],
+            },
+          ],
+        },
+        frame
+      )
+    ).toBeNull();
+  });
+
+  it('should not generate an expression when missing y', () => {
+    expect(
+      xyVisualization.toExpression(
+        {
+          legend: { position: Position.Bottom, isVisible: true },
+          preferredSeriesType: 'bar',
+          layers: [
+            {
+              layerId: 'first',
+              seriesType: 'area',
+              splitAccessor: undefined,
+              xAccessor: 'a',
+              accessors: [],
+            },
+          ],
+        },
+        frame
+      )
+    ).toBeNull();
+  });
+
+  it('should default to labeling all columns with their column label', () => {
+    const expression = xyVisualization.toExpression(
+      {
+        legend: { position: Position.Bottom, isVisible: true },
+        preferredSeriesType: 'bar',
+        layers: [
+          {
+            layerId: 'first',
+            seriesType: 'area',
+            splitAccessor: 'd',
+            xAccessor: 'a',
+            accessors: ['b', 'c'],
+          },
+        ],
+      },
+      frame
+    )! as Ast;
+
+    expect(mockDatasource.publicAPIMock.getOperationForColumnId).toHaveBeenCalledWith('b');
+    expect(mockDatasource.publicAPIMock.getOperationForColumnId).toHaveBeenCalledWith('c');
+    expect(mockDatasource.publicAPIMock.getOperationForColumnId).toHaveBeenCalledWith('d');
+    expect(expression.chain[0].arguments.xTitle).toEqual(['col_a']);
+    expect(expression.chain[0].arguments.yTitle).toEqual(['col_b']);
+    expect(
+      (expression.chain[0].arguments.layers[0] as Ast).chain[0].arguments.columnToLabel
+    ).toEqual([
+      JSON.stringify({
+        b: 'col_b',
+        c: 'col_c',
+        d: 'col_d',
+      }),
+    ]);
+  });
+});
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization/to_expression.ts b/x-pack/legacy/plugins/lens/public/xy_visualization/to_expression.ts
index f0e932d14f281b..9b068b0ca5ef07 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization/to_expression.ts
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization/to_expression.ts
@@ -9,6 +9,10 @@ import { ScaleType } from '@elastic/charts';
 import { State, LayerConfig } from './types';
 import { FramePublicAPI, OperationMetadata } from '../types';
 
+interface ValidLayer extends LayerConfig {
+  xAccessor: NonNullable<LayerConfig['xAccessor']>;
+}
+
 function xyTitles(layer: LayerConfig, frame: FramePublicAPI) {
   const defaults = {
     xTitle: 'x',
@@ -22,8 +26,8 @@ function xyTitles(layer: LayerConfig, frame: FramePublicAPI) {
   if (!datasource) {
     return defaults;
   }
-  const x = datasource.getOperationForColumnId(layer.xAccessor);
-  const y = datasource.getOperationForColumnId(layer.accessors[0]);
+  const x = layer.xAccessor ? datasource.getOperationForColumnId(layer.xAccessor) : null;
+  const y = layer.accessors[0] ? datasource.getOperationForColumnId(layer.accessors[0]) : null;
 
   return {
     xTitle: x ? x.label : defaults.xTitle,
@@ -36,26 +40,6 @@ export const toExpression = (state: State, frame: FramePublicAPI): Ast | null =>
     return null;
   }
 
-  const stateWithValidAccessors = {
-    ...state,
-    layers: state.layers.map(layer => {
-      const datasource = frame.datasourceLayers[layer.layerId];
-
-      const newLayer = { ...layer };
-
-      if (!datasource.getOperationForColumnId(layer.splitAccessor)) {
-        delete newLayer.splitAccessor;
-      }
-
-      return {
-        ...newLayer,
-        accessors: layer.accessors.filter(accessor =>
-          Boolean(datasource.getOperationForColumnId(accessor))
-        ),
-      };
-    }),
-  };
-
   const metadata: Record<string, Record<string, OperationMetadata | null>> = {};
   state.layers.forEach(layer => {
     metadata[layer.layerId] = {};
@@ -68,12 +52,7 @@ export const toExpression = (state: State, frame: FramePublicAPI): Ast | null =>
     });
   });
 
-  return buildExpression(
-    stateWithValidAccessors,
-    metadata,
-    frame,
-    xyTitles(state.layers[0], frame)
-  );
+  return buildExpression(state, metadata, frame, xyTitles(state.layers[0], frame));
 };
 
 export function toPreviewExpression(state: State, frame: FramePublicAPI) {
@@ -122,82 +101,94 @@ export const buildExpression = (
   metadata: Record<string, Record<string, OperationMetadata | null>>,
   frame?: FramePublicAPI,
   { xTitle, yTitle }: { xTitle: string; yTitle: string } = { xTitle: '', yTitle: '' }
-): Ast => ({
-  type: 'expression',
-  chain: [
-    {
-      type: 'function',
-      function: 'lens_xy_chart',
-      arguments: {
-        xTitle: [xTitle],
-        yTitle: [yTitle],
-        legend: [
-          {
-            type: 'expression',
-            chain: [
-              {
-                type: 'function',
-                function: 'lens_xy_legendConfig',
-                arguments: {
-                  isVisible: [state.legend.isVisible],
-                  position: [state.legend.position],
+): Ast | null => {
+  const validLayers = state.layers.filter((layer): layer is ValidLayer =>
+    Boolean(layer.xAccessor && layer.accessors.length)
+  );
+  if (!validLayers.length) {
+    return null;
+  }
+
+  return {
+    type: 'expression',
+    chain: [
+      {
+        type: 'function',
+        function: 'lens_xy_chart',
+        arguments: {
+          xTitle: [xTitle],
+          yTitle: [yTitle],
+          legend: [
+            {
+              type: 'expression',
+              chain: [
+                {
+                  type: 'function',
+                  function: 'lens_xy_legendConfig',
+                  arguments: {
+                    isVisible: [state.legend.isVisible],
+                    position: [state.legend.position],
+                  },
                 },
-              },
-            ],
-          },
-        ],
-        layers: state.layers.map(layer => {
-          const columnToLabel: Record<string, string> = {};
-
-          if (frame) {
-            const datasource = frame.datasourceLayers[layer.layerId];
-            layer.accessors.concat([layer.splitAccessor]).forEach(accessor => {
-              const operation = datasource.getOperationForColumnId(accessor);
-              if (operation && operation.label) {
-                columnToLabel[accessor] = operation.label;
-              }
-            });
-          }
-
-          const xAxisOperation =
-            frame && frame.datasourceLayers[layer.layerId].getOperationForColumnId(layer.xAccessor);
-
-          const isHistogramDimension = Boolean(
-            xAxisOperation &&
-              xAxisOperation.isBucketed &&
-              xAxisOperation.scale &&
-              xAxisOperation.scale !== 'ordinal'
-          );
-
-          return {
-            type: 'expression',
-            chain: [
-              {
-                type: 'function',
-                function: 'lens_xy_layer',
-                arguments: {
-                  layerId: [layer.layerId],
-
-                  hide: [Boolean(layer.hide)],
-
-                  xAccessor: [layer.xAccessor],
-                  yScaleType: [
-                    getScaleType(metadata[layer.layerId][layer.accessors[0]], ScaleType.Ordinal),
-                  ],
-                  xScaleType: [
-                    getScaleType(metadata[layer.layerId][layer.xAccessor], ScaleType.Linear),
-                  ],
-                  isHistogram: [isHistogramDimension],
-                  splitAccessor: [layer.splitAccessor],
-                  seriesType: [layer.seriesType],
-                  accessors: layer.accessors,
-                  columnToLabel: [JSON.stringify(columnToLabel)],
+              ],
+            },
+          ],
+          layers: validLayers.map(layer => {
+            const columnToLabel: Record<string, string> = {};
+
+            if (frame) {
+              const datasource = frame.datasourceLayers[layer.layerId];
+              layer.accessors
+                .concat(layer.splitAccessor ? [layer.splitAccessor] : [])
+                .forEach(accessor => {
+                  const operation = datasource.getOperationForColumnId(accessor);
+                  if (operation && operation.label) {
+                    columnToLabel[accessor] = operation.label;
+                  }
+                });
+            }
+
+            const xAxisOperation =
+              frame &&
+              frame.datasourceLayers[layer.layerId].getOperationForColumnId(layer.xAccessor);
+
+            const isHistogramDimension = Boolean(
+              xAxisOperation &&
+                xAxisOperation.isBucketed &&
+                xAxisOperation.scale &&
+                xAxisOperation.scale !== 'ordinal'
+            );
+
+            return {
+              type: 'expression',
+              chain: [
+                {
+                  type: 'function',
+                  function: 'lens_xy_layer',
+                  arguments: {
+                    layerId: [layer.layerId],
+
+                    hide: [Boolean(layer.hide)],
+
+                    xAccessor: [layer.xAccessor],
+                    yScaleType: [
+                      getScaleType(metadata[layer.layerId][layer.accessors[0]], ScaleType.Ordinal),
+                    ],
+                    xScaleType: [
+                      getScaleType(metadata[layer.layerId][layer.xAccessor], ScaleType.Linear),
+                    ],
+                    isHistogram: [isHistogramDimension],
+                    splitAccessor: layer.splitAccessor ? [layer.splitAccessor] : [],
+                    seriesType: [layer.seriesType],
+                    accessors: layer.accessors,
+                    columnToLabel: [JSON.stringify(columnToLabel)],
+                  },
                 },
-              },
-            ],
-          };
-        }),
+              ],
+            };
+          }),
+        },
       },
-    },
-  ],
-});
+    ],
+  };
+};
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization/types.ts b/x-pack/legacy/plugins/lens/public/xy_visualization/types.ts
index b49e6fa6b4b6fa..f7b4afc76ec4b0 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization/types.ts
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization/types.ts
@@ -191,10 +191,10 @@ export type SeriesType =
 export interface LayerConfig {
   hide?: boolean;
   layerId: string;
-  xAccessor: string;
+  xAccessor?: string;
   accessors: string[];
   seriesType: SeriesType;
-  splitAccessor: string;
+  splitAccessor?: string;
 }
 
 export type LayerArgs = LayerConfig & {
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx b/x-pack/legacy/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx
index 301c4a58a0ffd1..7544ed0f87b7d0 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx
@@ -5,22 +5,15 @@
  */
 
 import React from 'react';
-import { ReactWrapper } from 'enzyme';
 import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
 import { EuiButtonGroupProps } from '@elastic/eui';
-import { XYConfigPanel, LayerContextMenu } from './xy_config_panel';
-import { DatasourceDimensionPanelProps, Operation, FramePublicAPI } from '../types';
+import { LayerContextMenu } from './xy_config_panel';
+import { FramePublicAPI } from '../types';
 import { State } from './types';
 import { Position } from '@elastic/charts';
-import { NativeRendererProps } from '../native_renderer';
-import { generateId } from '../id_generator';
 import { createMockFramePublicAPI, createMockDatasource } from '../editor_frame_service/mocks';
 
-jest.mock('../id_generator');
-
-describe('XYConfigPanel', () => {
-  const dragDropContext = { dragging: undefined, setDragging: jest.fn() };
-
+describe('LayerContextMenu', () => {
   let frame: FramePublicAPI;
 
   function testState(): State {
@@ -39,17 +32,10 @@ describe('XYConfigPanel', () => {
     };
   }
 
-  function testSubj(component: ReactWrapper<unknown>, subj: string) {
-    return component
-      .find(`[data-test-subj="${subj}"]`)
-      .first()
-      .props();
-  }
-
   beforeEach(() => {
     frame = createMockFramePublicAPI();
     frame.datasourceLayers = {
-      first: createMockDatasource().publicAPIMock,
+      first: createMockDatasource('test').publicAPIMock,
     };
   });
 
@@ -64,7 +50,6 @@ describe('XYConfigPanel', () => {
       const component = mount(
         <LayerContextMenu
           layerId={state.layers[0].layerId}
-          dragDropContext={dragDropContext}
           frame={frame}
           setState={jest.fn()}
           state={{ ...state, layers: [{ ...state.layers[0], xAccessor: 'shazm' }] }}
@@ -92,7 +77,6 @@ describe('XYConfigPanel', () => {
       const component = mount(
         <LayerContextMenu
           layerId={state.layers[0].layerId}
-          dragDropContext={dragDropContext}
           frame={frame}
           setState={jest.fn()}
           state={{ ...state, layers: [{ ...state.layers[0], seriesType: 'bar_horizontal' }] }}
@@ -108,136 +92,4 @@ describe('XYConfigPanel', () => {
       expect(options!.filter(({ isDisabled }) => isDisabled).map(({ id }) => id)).toEqual([]);
     });
   });
-
-  test('the x dimension panel accepts only bucketed operations', () => {
-    // TODO: this should eventually also accept raw operation
-    const state = testState();
-    const component = mount(
-      <XYConfigPanel
-        layerId={state.layers[0].layerId}
-        dragDropContext={dragDropContext}
-        frame={frame}
-        setState={jest.fn()}
-        state={{ ...state, layers: [{ ...state.layers[0], xAccessor: 'shazm' }] }}
-      />
-    );
-
-    const panel = testSubj(component, 'lnsXY_xDimensionPanel');
-    const nativeProps = (panel as NativeRendererProps<DatasourceDimensionPanelProps>).nativeProps;
-    const { columnId, filterOperations } = nativeProps;
-    const exampleOperation: Operation = {
-      dataType: 'number',
-      isBucketed: false,
-      label: 'bar',
-    };
-    const bucketedOps: Operation[] = [
-      { ...exampleOperation, isBucketed: true, dataType: 'number' },
-      { ...exampleOperation, isBucketed: true, dataType: 'string' },
-      { ...exampleOperation, isBucketed: true, dataType: 'boolean' },
-      { ...exampleOperation, isBucketed: true, dataType: 'date' },
-    ];
-    const ops: Operation[] = [
-      ...bucketedOps,
-      { ...exampleOperation, dataType: 'number' },
-      { ...exampleOperation, dataType: 'string' },
-      { ...exampleOperation, dataType: 'boolean' },
-      { ...exampleOperation, dataType: 'date' },
-    ];
-    expect(columnId).toEqual('shazm');
-    expect(ops.filter(filterOperations)).toEqual(bucketedOps);
-  });
-
-  test('the y dimension panel accepts numeric operations', () => {
-    const state = testState();
-    const component = mount(
-      <XYConfigPanel
-        layerId={state.layers[0].layerId}
-        dragDropContext={dragDropContext}
-        frame={frame}
-        setState={jest.fn()}
-        state={{ ...state, layers: [{ ...state.layers[0], accessors: ['a', 'b', 'c'] }] }}
-      />
-    );
-
-    const filterOperations = component
-      .find('[data-test-subj="lensXY_yDimensionPanel"]')
-      .first()
-      .prop('filterOperations') as (op: Operation) => boolean;
-
-    const exampleOperation: Operation = {
-      dataType: 'number',
-      isBucketed: false,
-      label: 'bar',
-    };
-    const ops: Operation[] = [
-      { ...exampleOperation, dataType: 'number' },
-      { ...exampleOperation, dataType: 'string' },
-      { ...exampleOperation, dataType: 'boolean' },
-      { ...exampleOperation, dataType: 'date' },
-    ];
-    expect(ops.filter(filterOperations).map(x => x.dataType)).toEqual(['number']);
-  });
-
-  test('allows removal of y dimensions', () => {
-    const setState = jest.fn();
-    const state = testState();
-    const component = mount(
-      <XYConfigPanel
-        layerId={state.layers[0].layerId}
-        dragDropContext={dragDropContext}
-        frame={frame}
-        setState={setState}
-        state={{ ...state, layers: [{ ...state.layers[0], accessors: ['a', 'b', 'c'] }] }}
-      />
-    );
-
-    const onRemove = component
-      .find('[data-test-subj="lensXY_yDimensionPanel"]')
-      .first()
-      .prop('onRemove') as (accessor: string) => {};
-
-    onRemove('b');
-
-    expect(setState).toHaveBeenCalledTimes(1);
-    expect(setState.mock.calls[0][0]).toMatchObject({
-      layers: [
-        {
-          ...state.layers[0],
-          accessors: ['a', 'c'],
-        },
-      ],
-    });
-  });
-
-  test('allows adding a y axis dimension', () => {
-    (generateId as jest.Mock).mockReturnValueOnce('zed');
-    const setState = jest.fn();
-    const state = testState();
-    const component = mount(
-      <XYConfigPanel
-        layerId={state.layers[0].layerId}
-        dragDropContext={dragDropContext}
-        frame={frame}
-        setState={setState}
-        state={{ ...state, layers: [{ ...state.layers[0], accessors: ['a', 'b', 'c'] }] }}
-      />
-    );
-
-    const onAdd = component
-      .find('[data-test-subj="lensXY_yDimensionPanel"]')
-      .first()
-      .prop('onAdd') as () => {};
-
-    onAdd();
-
-    expect(setState).toHaveBeenCalledTimes(1);
-    expect(setState.mock.calls[0][0]).toMatchObject({
-      layers: [
-        {
-          ...state.layers[0],
-          accessors: ['a', 'b', 'c', 'zed'],
-        },
-      ],
-    });
-  });
 });
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization/xy_config_panel.tsx b/x-pack/legacy/plugins/lens/public/xy_visualization/xy_config_panel.tsx
index dbcfa243950015..5e85680cc2b2c7 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization/xy_config_panel.tsx
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization/xy_config_panel.tsx
@@ -9,16 +9,10 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiButtonGroup, EuiFormRow } from '@elastic/eui';
 import { State, SeriesType, visualizationTypes } from './types';
-import { VisualizationLayerConfigProps, OperationMetadata } from '../types';
-import { NativeRenderer } from '../native_renderer';
-import { MultiColumnEditor } from '../multi_column_editor';
-import { generateId } from '../id_generator';
+import { VisualizationLayerWidgetProps } from '../types';
 import { isHorizontalChart, isHorizontalSeries } from './state_helpers';
 import { trackUiEvent } from '../lens_ui_telemetry';
 
-const isNumericMetric = (op: OperationMetadata) => !op.isBucketed && op.dataType === 'number';
-const isBucketed = (op: OperationMetadata) => op.isBucketed;
-
 type UnwrapArray<T> = T extends Array<infer P> ? P : T;
 
 function updateLayer(state: State, layer: UnwrapArray<State['layers']>, index: number): State {
@@ -31,7 +25,7 @@ function updateLayer(state: State, layer: UnwrapArray<State['layers']>, index: n
   };
 }
 
-export function LayerContextMenu(props: VisualizationLayerConfigProps<State>) {
+export function LayerContextMenu(props: VisualizationLayerWidgetProps<State>) {
   const { state, layerId } = props;
   const horizontalOnly = isHorizontalChart(state.layers);
   const index = state.layers.findIndex(l => l.layerId === layerId);
@@ -74,97 +68,3 @@ export function LayerContextMenu(props: VisualizationLayerConfigProps<State>) {
     </EuiFormRow>
   );
 }
-
-export function XYConfigPanel(props: VisualizationLayerConfigProps<State>) {
-  const { state, setState, frame, layerId } = props;
-  const index = props.state.layers.findIndex(l => l.layerId === layerId);
-
-  if (index < 0) {
-    return null;
-  }
-
-  const layer = props.state.layers[index];
-
-  return (
-    <>
-      <EuiFormRow
-        className="lnsConfigPanel__axis"
-        label={i18n.translate('xpack.lens.xyChart.xAxisLabel', {
-          defaultMessage: 'X-axis',
-        })}
-      >
-        <NativeRenderer
-          data-test-subj="lnsXY_xDimensionPanel"
-          render={props.frame.datasourceLayers[layer.layerId].renderDimensionPanel}
-          nativeProps={{
-            columnId: layer.xAccessor,
-            dragDropContext: props.dragDropContext,
-            filterOperations: isBucketed,
-            suggestedPriority: 1,
-            layerId: layer.layerId,
-            hideGrouping: true,
-          }}
-        />
-      </EuiFormRow>
-      <EuiFormRow
-        className="lnsConfigPanel__axis"
-        data-test-subj="lnsXY_yDimensionPanel"
-        label={i18n.translate('xpack.lens.xyChart.yAxisLabel', {
-          defaultMessage: 'Y-axis',
-        })}
-      >
-        <MultiColumnEditor
-          accessors={layer.accessors}
-          datasource={frame.datasourceLayers[layer.layerId]}
-          dragDropContext={props.dragDropContext}
-          onAdd={() =>
-            setState(
-              updateLayer(
-                state,
-                {
-                  ...layer,
-                  accessors: [...layer.accessors, generateId()],
-                },
-                index
-              )
-            )
-          }
-          onRemove={accessor =>
-            setState(
-              updateLayer(
-                state,
-                {
-                  ...layer,
-                  accessors: layer.accessors.filter(col => col !== accessor),
-                },
-                index
-              )
-            )
-          }
-          filterOperations={isNumericMetric}
-          data-test-subj="lensXY_yDimensionPanel"
-          testSubj="lensXY_yDimensionPanel"
-          layerId={layer.layerId}
-        />
-      </EuiFormRow>
-      <EuiFormRow
-        className="lnsConfigPanel__axis"
-        label={i18n.translate('xpack.lens.xyChart.splitSeries', {
-          defaultMessage: 'Break down by',
-        })}
-      >
-        <NativeRenderer
-          data-test-subj="lnsXY_splitDimensionPanel"
-          render={props.frame.datasourceLayers[layer.layerId].renderDimensionPanel}
-          nativeProps={{
-            columnId: layer.splitAccessor,
-            dragDropContext: props.dragDropContext,
-            filterOperations: isBucketed,
-            suggestedPriority: 0,
-            layerId: layer.layerId,
-          }}
-        />
-      </EuiFormRow>
-    </>
-  );
-}
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization/xy_expression.tsx b/x-pack/legacy/plugins/lens/public/xy_visualization/xy_expression.tsx
index 27fd6e70640427..15aaf289eebf91 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization/xy_expression.tsx
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization/xy_expression.tsx
@@ -238,6 +238,8 @@ export function XYChart({ data, args, formatFactory, timeZone, chartTheme }: XYC
           index
         ) => {
           if (
+            !xAccessor ||
+            !accessors.length ||
             !data.tables[layerId] ||
             data.tables[layerId].rows.length === 0 ||
             data.tables[layerId].rows.every(row => typeof row[xAccessor] === 'undefined')
@@ -246,7 +248,7 @@ export function XYChart({ data, args, formatFactory, timeZone, chartTheme }: XYC
           }
 
           const columnToLabelMap = columnToLabel ? JSON.parse(columnToLabel) : {};
-          const splitAccessorLabel = columnToLabelMap[splitAccessor];
+          const splitAccessorLabel = splitAccessor ? columnToLabelMap[splitAccessor] : '';
           const yAccessors = accessors.map(accessor => columnToLabelMap[accessor] || accessor);
           const idForLegend = splitAccessorLabel || yAccessors;
           const sanitized = sanitizeRows({
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization/xy_suggestions.test.ts b/x-pack/legacy/plugins/lens/public/xy_visualization/xy_suggestions.test.ts
index 04ff720309d623..ddbd9d11b5fada 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization/xy_suggestions.test.ts
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization/xy_suggestions.test.ts
@@ -123,7 +123,7 @@ describe('xy_suggestions', () => {
       Array [
         Object {
           "seriesType": "bar_stacked",
-          "splitAccessor": "aaa",
+          "splitAccessor": undefined,
           "x": "date",
           "y": Array [
             "bytes",
@@ -240,7 +240,6 @@ describe('xy_suggestions', () => {
   });
 
   test('only makes a seriesType suggestion for unchanged table without split', () => {
-    (generateId as jest.Mock).mockReturnValueOnce('dummyCol');
     const currentState: XYState = {
       legend: { isVisible: true, position: 'bottom' },
       preferredSeriesType: 'bar',
@@ -249,7 +248,7 @@ describe('xy_suggestions', () => {
           accessors: ['price'],
           layerId: 'first',
           seriesType: 'bar',
-          splitAccessor: 'dummyCol',
+          splitAccessor: undefined,
           xAccessor: 'date',
         },
       ],
@@ -472,17 +471,17 @@ describe('xy_suggestions', () => {
     });
 
     expect(suggestionSubset(suggestion)).toMatchInlineSnapshot(`
-                        Array [
-                          Object {
-                            "seriesType": "bar_stacked",
-                            "splitAccessor": "ddd",
-                            "x": "quantity",
-                            "y": Array [
-                              "price",
-                            ],
-                          },
-                        ]
-                `);
+      Array [
+        Object {
+          "seriesType": "bar_stacked",
+          "splitAccessor": undefined,
+          "x": "quantity",
+          "y": Array [
+            "price",
+          ],
+        },
+      ]
+    `);
   });
 
   test('handles ip', () => {
@@ -509,17 +508,17 @@ describe('xy_suggestions', () => {
     });
 
     expect(suggestionSubset(suggestion)).toMatchInlineSnapshot(`
-            Array [
-              Object {
-                "seriesType": "bar_stacked",
-                "splitAccessor": "ddd",
-                "x": "myip",
-                "y": Array [
-                  "quantity",
-                ],
-              },
-            ]
-        `);
+      Array [
+        Object {
+          "seriesType": "bar_stacked",
+          "splitAccessor": undefined,
+          "x": "myip",
+          "y": Array [
+            "quantity",
+          ],
+        },
+      ]
+    `);
   });
 
   test('handles unbucketed suggestions', () => {
@@ -545,16 +544,16 @@ describe('xy_suggestions', () => {
     });
 
     expect(suggestionSubset(suggestion)).toMatchInlineSnapshot(`
-                  Array [
-                    Object {
-                      "seriesType": "bar_stacked",
-                      "splitAccessor": "eee",
-                      "x": "mybool",
-                      "y": Array [
-                        "num votes",
-                      ],
-                    },
-                  ]
-            `);
+      Array [
+        Object {
+          "seriesType": "bar_stacked",
+          "splitAccessor": undefined,
+          "x": "mybool",
+          "y": Array [
+            "num votes",
+          ],
+        },
+      ]
+    `);
   });
 });
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization/xy_suggestions.ts b/x-pack/legacy/plugins/lens/public/xy_visualization/xy_suggestions.ts
index 33181b7f3a4678..5e9311bb1e9283 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization/xy_suggestions.ts
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization/xy_suggestions.ts
@@ -15,7 +15,6 @@ import {
   TableChangeType,
 } from '../types';
 import { State, SeriesType, XYState } from './types';
-import { generateId } from '../id_generator';
 import { getIconForSeries } from './state_helpers';
 
 const columnSortOrder = {
@@ -356,7 +355,7 @@ function buildSuggestion({
     layerId,
     seriesType,
     xAccessor: xValue.columnId,
-    splitAccessor: splitBy ? splitBy.columnId : generateId(),
+    splitAccessor: splitBy?.columnId,
     accessors: yValues.map(col => col.columnId),
   };
 
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization/xy_visualization.test.ts b/x-pack/legacy/plugins/lens/public/xy_visualization/xy_visualization.test.ts
index a27a8e7754b86c..beccf0dc46eb45 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization/xy_visualization.test.ts
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization/xy_visualization.test.ts
@@ -9,10 +9,6 @@ import { Position } from '@elastic/charts';
 import { Operation } from '../types';
 import { State, SeriesType } from './types';
 import { createMockDatasource, createMockFramePublicAPI } from '../editor_frame_service/mocks';
-import { generateId } from '../id_generator';
-import { Ast } from '@kbn/interpreter/target/common';
-
-jest.mock('../id_generator');
 
 function exampleState(): State {
   return {
@@ -87,31 +83,22 @@ describe('xy_visualization', () => {
 
   describe('#initialize', () => {
     it('loads default state', () => {
-      (generateId as jest.Mock)
-        .mockReturnValueOnce('test-id1')
-        .mockReturnValueOnce('test-id2')
-        .mockReturnValue('test-id3');
       const mockFrame = createMockFramePublicAPI();
       const initialState = xyVisualization.initialize(mockFrame);
 
       expect(initialState.layers).toHaveLength(1);
-      expect(initialState.layers[0].xAccessor).toBeDefined();
-      expect(initialState.layers[0].accessors[0]).toBeDefined();
-      expect(initialState.layers[0].xAccessor).not.toEqual(initialState.layers[0].accessors[0]);
+      expect(initialState.layers[0].xAccessor).not.toBeDefined();
+      expect(initialState.layers[0].accessors).toHaveLength(0);
 
       expect(initialState).toMatchInlineSnapshot(`
         Object {
           "layers": Array [
             Object {
-              "accessors": Array [
-                "test-id1",
-              ],
+              "accessors": Array [],
               "layerId": "",
               "position": "top",
               "seriesType": "bar_stacked",
               "showGridlines": false,
-              "splitAccessor": "test-id2",
-              "xAccessor": "test-id3",
             },
           ],
           "legend": Object {
@@ -167,14 +154,11 @@ describe('xy_visualization', () => {
 
   describe('#clearLayer', () => {
     it('clears the specified layer', () => {
-      (generateId as jest.Mock).mockReturnValue('test_empty_id');
       const layer = xyVisualization.clearLayer(exampleState(), 'first').layers[0];
       expect(layer).toMatchObject({
-        accessors: ['test_empty_id'],
+        accessors: [],
         layerId: 'first',
         seriesType: 'bar',
-        splitAccessor: 'test_empty_id',
-        xAccessor: 'test_empty_id',
       });
     });
   });
@@ -185,13 +169,94 @@ describe('xy_visualization', () => {
     });
   });
 
-  describe('#toExpression', () => {
+  describe('#setDimension', () => {
+    it('sets the x axis', () => {
+      expect(
+        xyVisualization.setDimension({
+          prevState: {
+            ...exampleState(),
+            layers: [
+              {
+                layerId: 'first',
+                seriesType: 'area',
+                xAccessor: undefined,
+                accessors: [],
+              },
+            ],
+          },
+          layerId: 'first',
+          groupId: 'x',
+          columnId: 'newCol',
+        }).layers[0]
+      ).toEqual({
+        layerId: 'first',
+        seriesType: 'area',
+        xAccessor: 'newCol',
+        accessors: [],
+      });
+    });
+
+    it('replaces the x axis', () => {
+      expect(
+        xyVisualization.setDimension({
+          prevState: {
+            ...exampleState(),
+            layers: [
+              {
+                layerId: 'first',
+                seriesType: 'area',
+                xAccessor: 'a',
+                accessors: [],
+              },
+            ],
+          },
+          layerId: 'first',
+          groupId: 'x',
+          columnId: 'newCol',
+        }).layers[0]
+      ).toEqual({
+        layerId: 'first',
+        seriesType: 'area',
+        xAccessor: 'newCol',
+        accessors: [],
+      });
+    });
+  });
+
+  describe('#removeDimension', () => {
+    it('removes the x axis', () => {
+      expect(
+        xyVisualization.removeDimension({
+          prevState: {
+            ...exampleState(),
+            layers: [
+              {
+                layerId: 'first',
+                seriesType: 'area',
+                xAccessor: 'a',
+                accessors: [],
+              },
+            ],
+          },
+          layerId: 'first',
+          columnId: 'a',
+        }).layers[0]
+      ).toEqual({
+        layerId: 'first',
+        seriesType: 'area',
+        xAccessor: undefined,
+        accessors: [],
+      });
+    });
+  });
+
+  describe('#getConfiguration', () => {
     let mockDatasource: ReturnType<typeof createMockDatasource>;
     let frame: ReturnType<typeof createMockFramePublicAPI>;
 
     beforeEach(() => {
       frame = createMockFramePublicAPI();
-      mockDatasource = createMockDatasource();
+      mockDatasource = createMockDatasource('testDatasource');
 
       mockDatasource.publicAPIMock.getTableSpec.mockReturnValue([
         { columnId: 'd' },
@@ -200,36 +265,78 @@ describe('xy_visualization', () => {
         { columnId: 'c' },
       ]);
 
-      mockDatasource.publicAPIMock.getOperationForColumnId.mockImplementation(col => {
-        return { label: `col_${col}`, dataType: 'number' } as Operation;
-      });
-
       frame.datasourceLayers = {
         first: mockDatasource.publicAPIMock,
       };
     });
 
-    it('should map to a valid AST', () => {
-      expect(xyVisualization.toExpression(exampleState(), frame)).toMatchSnapshot();
+    it('should return options for 3 dimensions', () => {
+      const options = xyVisualization.getConfiguration({
+        state: exampleState(),
+        frame,
+        layerId: 'first',
+      }).groups;
+      expect(options).toHaveLength(3);
+      expect(options.map(o => o.groupId)).toEqual(['x', 'y', 'breakdown']);
     });
 
-    it('should default to labeling all columns with their column label', () => {
-      const expression = xyVisualization.toExpression(exampleState(), frame)! as Ast;
+    it('should only accept bucketed operations for x', () => {
+      const options = xyVisualization.getConfiguration({
+        state: exampleState(),
+        frame,
+        layerId: 'first',
+      }).groups;
+      const filterOperations = options.find(o => o.groupId === 'x')!.filterOperations;
 
-      expect(mockDatasource.publicAPIMock.getOperationForColumnId).toHaveBeenCalledWith('b');
-      expect(mockDatasource.publicAPIMock.getOperationForColumnId).toHaveBeenCalledWith('c');
-      expect(mockDatasource.publicAPIMock.getOperationForColumnId).toHaveBeenCalledWith('d');
-      expect(expression.chain[0].arguments.xTitle).toEqual(['col_a']);
-      expect(expression.chain[0].arguments.yTitle).toEqual(['col_b']);
-      expect(
-        (expression.chain[0].arguments.layers[0] as Ast).chain[0].arguments.columnToLabel
-      ).toEqual([
-        JSON.stringify({
-          b: 'col_b',
-          c: 'col_c',
-          d: 'col_d',
-        }),
-      ]);
+      const exampleOperation: Operation = {
+        dataType: 'number',
+        isBucketed: false,
+        label: 'bar',
+      };
+      const bucketedOps: Operation[] = [
+        { ...exampleOperation, isBucketed: true, dataType: 'number' },
+        { ...exampleOperation, isBucketed: true, dataType: 'string' },
+        { ...exampleOperation, isBucketed: true, dataType: 'boolean' },
+        { ...exampleOperation, isBucketed: true, dataType: 'date' },
+      ];
+      const ops: Operation[] = [
+        ...bucketedOps,
+        { ...exampleOperation, dataType: 'number' },
+        { ...exampleOperation, dataType: 'string' },
+        { ...exampleOperation, dataType: 'boolean' },
+        { ...exampleOperation, dataType: 'date' },
+      ];
+      expect(ops.filter(filterOperations)).toEqual(bucketedOps);
+    });
+
+    it('should not allow anything to be added to x', () => {
+      const options = xyVisualization.getConfiguration({
+        state: exampleState(),
+        frame,
+        layerId: 'first',
+      }).groups;
+      expect(options.find(o => o.groupId === 'x')?.supportsMoreColumns).toBe(false);
+    });
+
+    it('should allow number operations on y', () => {
+      const options = xyVisualization.getConfiguration({
+        state: exampleState(),
+        frame,
+        layerId: 'first',
+      }).groups;
+      const filterOperations = options.find(o => o.groupId === 'y')!.filterOperations;
+      const exampleOperation: Operation = {
+        dataType: 'number',
+        isBucketed: false,
+        label: 'bar',
+      };
+      const ops: Operation[] = [
+        { ...exampleOperation, dataType: 'number' },
+        { ...exampleOperation, dataType: 'string' },
+        { ...exampleOperation, dataType: 'boolean' },
+        { ...exampleOperation, dataType: 'date' },
+      ];
+      expect(ops.filter(filterOperations).map(x => x.dataType)).toEqual(['number']);
     });
   });
 });
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization/xy_visualization.tsx b/x-pack/legacy/plugins/lens/public/xy_visualization/xy_visualization.tsx
index 75d6fcc7d160bf..c72fa0fec24d77 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization/xy_visualization.tsx
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization/xy_visualization.tsx
@@ -11,17 +11,18 @@ import { Position } from '@elastic/charts';
 import { I18nProvider } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { getSuggestions } from './xy_suggestions';
-import { XYConfigPanel, LayerContextMenu } from './xy_config_panel';
-import { Visualization } from '../types';
+import { LayerContextMenu } from './xy_config_panel';
+import { Visualization, OperationMetadata } from '../types';
 import { State, PersistableState, SeriesType, visualizationTypes, LayerConfig } from './types';
 import { toExpression, toPreviewExpression } from './to_expression';
-import { generateId } from '../id_generator';
 import chartBarStackedSVG from '../assets/chart_bar_stacked.svg';
 import chartMixedSVG from '../assets/chart_mixed_xy.svg';
 import { isHorizontalChart } from './state_helpers';
 
 const defaultIcon = chartBarStackedSVG;
 const defaultSeriesType = 'bar_stacked';
+const isNumericMetric = (op: OperationMetadata) => !op.isBucketed && op.dataType === 'number';
+const isBucketed = (op: OperationMetadata) => op.isBucketed;
 
 function getDescription(state?: State) {
   if (!state) {
@@ -133,12 +134,10 @@ export const xyVisualization: Visualization<State, PersistableState> = {
         layers: [
           {
             layerId: frame.addNewLayer(),
-            accessors: [generateId()],
+            accessors: [],
             position: Position.Top,
             seriesType: defaultSeriesType,
             showGridlines: false,
-            splitAccessor: generateId(),
-            xAccessor: generateId(),
           },
         ],
       }
@@ -147,13 +146,89 @@ export const xyVisualization: Visualization<State, PersistableState> = {
 
   getPersistableState: state => state,
 
-  renderLayerConfigPanel: (domElement, props) =>
-    render(
-      <I18nProvider>
-        <XYConfigPanel {...props} />
-      </I18nProvider>,
-      domElement
-    ),
+  getConfiguration(props) {
+    const layer = props.state.layers.find(l => l.layerId === props.layerId)!;
+    return {
+      groups: [
+        {
+          groupId: 'x',
+          groupLabel: i18n.translate('xpack.lens.xyChart.xAxisLabel', {
+            defaultMessage: 'X-axis',
+          }),
+          accessors: layer.xAccessor ? [layer.xAccessor] : [],
+          filterOperations: isBucketed,
+          suggestedPriority: 1,
+          supportsMoreColumns: !layer.xAccessor,
+          required: true,
+          dataTestSubj: 'lnsXY_xDimensionPanel',
+        },
+        {
+          groupId: 'y',
+          groupLabel: i18n.translate('xpack.lens.xyChart.yAxisLabel', {
+            defaultMessage: 'Y-axis',
+          }),
+          accessors: layer.accessors,
+          filterOperations: isNumericMetric,
+          supportsMoreColumns: true,
+          required: true,
+          dataTestSubj: 'lnsXY_yDimensionPanel',
+        },
+        {
+          groupId: 'breakdown',
+          groupLabel: i18n.translate('xpack.lens.xyChart.splitSeries', {
+            defaultMessage: 'Break down by',
+          }),
+          accessors: layer.splitAccessor ? [layer.splitAccessor] : [],
+          filterOperations: isBucketed,
+          suggestedPriority: 0,
+          supportsMoreColumns: !layer.splitAccessor,
+          dataTestSubj: 'lnsXY_splitDimensionPanel',
+        },
+      ],
+    };
+  },
+
+  setDimension({ prevState, layerId, columnId, groupId }) {
+    const newLayer = prevState.layers.find(l => l.layerId === layerId);
+    if (!newLayer) {
+      return prevState;
+    }
+
+    if (groupId === 'x') {
+      newLayer.xAccessor = columnId;
+    }
+    if (groupId === 'y') {
+      newLayer.accessors = [...newLayer.accessors.filter(a => a !== columnId), columnId];
+    }
+    if (groupId === 'breakdown') {
+      newLayer.splitAccessor = columnId;
+    }
+
+    return {
+      ...prevState,
+      layers: prevState.layers.map(l => (l.layerId === layerId ? newLayer : l)),
+    };
+  },
+
+  removeDimension({ prevState, layerId, columnId }) {
+    const newLayer = prevState.layers.find(l => l.layerId === layerId);
+    if (!newLayer) {
+      return prevState;
+    }
+
+    if (newLayer.xAccessor === columnId) {
+      delete newLayer.xAccessor;
+    } else if (newLayer.splitAccessor === columnId) {
+      delete newLayer.splitAccessor;
+    } else if (newLayer.accessors.includes(columnId)) {
+      newLayer.accessors = newLayer.accessors.filter(a => a !== columnId);
+    }
+
+    return {
+      ...prevState,
+      layers: prevState.layers.map(l => (l.layerId === layerId ? newLayer : l)),
+    };
+  },
 
   getLayerContextMenuIcon({ state, layerId }) {
     const layer = state.layers.find(l => l.layerId === layerId);
@@ -177,8 +252,6 @@ function newLayerState(seriesType: SeriesType, layerId: string): LayerConfig {
   return {
     layerId,
     seriesType,
-    xAccessor: generateId(),
-    accessors: [generateId()],
-    splitAccessor: generateId(),
+    accessors: [],
   };
 }
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 3763020a0b692c..e52b600d69e711 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -6834,7 +6834,6 @@
     "xpack.lens.indexPatternSuggestion.removeLayerPositionLabel": "レイヤー{layerNumber}のみを表示",
     "xpack.lens.lensSavedObjectLabel": "レンズビジュアライゼーション",
     "xpack.lens.metric.label": "メトリック",
-    "xpack.lens.metric.valueLabel": "値",
     "xpack.lens.sugegstion.refreshSuggestionLabel": "更新",
     "xpack.lens.suggestion.refreshSuggestionTooltip": "選択したビジュアライゼーションに基づいて、候補を更新します。",
     "xpack.lens.suggestions.currentVisLabel": "現在",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 0477470a4b8a1d..635f913be20ae0 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -6834,7 +6834,6 @@
     "xpack.lens.indexPatternSuggestion.removeLayerPositionLabel": "仅显示图层 {layerNumber}",
     "xpack.lens.lensSavedObjectLabel": "Lens 可视化",
     "xpack.lens.metric.label": "指标",
-    "xpack.lens.metric.valueLabel": "值",
     "xpack.lens.sugegstion.refreshSuggestionLabel": "刷新",
     "xpack.lens.suggestion.refreshSuggestionTooltip": "基于选定可视化刷新建议。",
     "xpack.lens.suggestions.currentVisLabel": "当前",
diff --git a/x-pack/test/functional/apps/dashboard_mode/dashboard_empty_screen.js b/x-pack/test/functional/apps/dashboard_mode/dashboard_empty_screen.js
index c90a0ae6d19fc4..19eebb3ba501c0 100644
--- a/x-pack/test/functional/apps/dashboard_mode/dashboard_empty_screen.js
+++ b/x-pack/test/functional/apps/dashboard_mode/dashboard_empty_screen.js
@@ -34,21 +34,21 @@ export default function({ getPageObjects, getService }) {
       await PageObjects.lens.goToTimeRange();
       await PageObjects.lens.configureDimension({
         dimension:
-          '[data-test-subj="lnsXY_xDimensionPanel"] [data-test-subj="indexPattern-configure-dimension"]',
+          '[data-test-subj="lnsXY_xDimensionPanel"] [data-test-subj="lns-empty-dimension"]',
         operation: 'date_histogram',
         field: '@timestamp',
       });
 
       await PageObjects.lens.configureDimension({
         dimension:
-          '[data-test-subj="lnsXY_yDimensionPanel"] [data-test-subj="indexPattern-configure-dimension"]',
+          '[data-test-subj="lnsXY_yDimensionPanel"] [data-test-subj="lns-empty-dimension"]',
         operation: 'avg',
         field: 'bytes',
       });
 
       await PageObjects.lens.configureDimension({
         dimension:
-          '[data-test-subj="lnsXY_splitDimensionPanel"] [data-test-subj="indexPattern-configure-dimension"]',
+          '[data-test-subj="lnsXY_splitDimensionPanel"] [data-test-subj="lns-empty-dimension"]',
         operation: 'terms',
         field: 'ip',
       });
diff --git a/x-pack/test/functional/apps/lens/smokescreen.ts b/x-pack/test/functional/apps/lens/smokescreen.ts
index 3346f2ff77036b..317bb0b27e9729 100644
--- a/x-pack/test/functional/apps/lens/smokescreen.ts
+++ b/x-pack/test/functional/apps/lens/smokescreen.ts
@@ -77,21 +77,21 @@ export default function({ getService, getPageObjects, ...rest }: FtrProviderCont
 
       await PageObjects.lens.configureDimension({
         dimension:
-          '[data-test-subj="lnsXY_xDimensionPanel"] [data-test-subj="indexPattern-configure-dimension"]',
+          '[data-test-subj="lnsXY_xDimensionPanel"] [data-test-subj="lns-empty-dimension"]',
         operation: 'date_histogram',
         field: '@timestamp',
       });
 
       await PageObjects.lens.configureDimension({
         dimension:
-          '[data-test-subj="lnsXY_yDimensionPanel"] [data-test-subj="indexPattern-configure-dimension"]',
+          '[data-test-subj="lnsXY_yDimensionPanel"] [data-test-subj="lns-empty-dimension"]',
         operation: 'avg',
         field: 'bytes',
       });
 
       await PageObjects.lens.configureDimension({
         dimension:
-          '[data-test-subj="lnsXY_splitDimensionPanel"] [data-test-subj="indexPattern-configure-dimension"]',
+          '[data-test-subj="lnsXY_splitDimensionPanel"] [data-test-subj="lns-empty-dimension"]',
         operation: 'terms',
         field: 'ip',
       });