diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss
index 8f09a358dd5e4..5b968abd0c061 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss
@@ -1,4 +1,3 @@
-@import 'chart_switch';
 @import 'config_panel';
 @import 'dimension_popover';
 @import 'layer_panel';
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx
index e53e465c18950..7f4a48fa2fda2 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx
@@ -8,7 +8,6 @@ import React, { useMemo, memo } from 'react';
 import { EuiFlexItem, EuiToolTip, EuiButton, EuiForm } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { Visualization } from '../../../types';
-import { ChartSwitch } from './chart_switch';
 import { LayerPanel } from './layer_panel';
 import { trackUiEvent } from '../../../lens_ui_telemetry';
 import { generateId } from '../../../id_generator';
@@ -20,21 +19,8 @@ export const ConfigPanelWrapper = memo(function ConfigPanelWrapper(props: Config
   const { visualizationState } = props;
 
   return (
-    <>
-      <ChartSwitch
-        data-test-subj="lnsChartSwitcher"
-        visualizationMap={props.visualizationMap}
-        visualizationId={props.activeVisualizationId}
-        visualizationState={props.visualizationState}
-        datasourceMap={props.datasourceMap}
-        datasourceStates={props.datasourceStates}
-        dispatch={props.dispatch}
-        framePublicAPI={props.framePublicAPI}
-      />
-      {activeVisualization && visualizationState && (
-        <LayerPanels {...props} activeVisualization={activeVisualization} />
-      )}
-    </>
+    activeVisualization &&
+    visualizationState && <LayerPanels {...props} activeVisualization={activeVisualization} />
   );
 });
 
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_chart_switch.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss
similarity index 86%
rename from x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_chart_switch.scss
rename to x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss
index d7efab2405f3f..ae4a7861b1d90 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_chart_switch.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.scss
@@ -1,6 +1,4 @@
 .lnsChartSwitch__header {
-  padding: $euiSizeS 0;
-
   > * {
     display: flex;
     align-items: center;
@@ -9,7 +7,8 @@
 
 .lnsChartSwitch__triggerButton {
   @include euiTitle('xs');
-  line-height: $euiSizeXXL;
+  background-color: $euiColorEmptyShade;
+  border-color: $euiColorLightShade;
 }
 
 .lnsChartSwitch__summaryIcon {
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/chart_switch.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx
similarity index 100%
rename from x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/chart_switch.test.tsx
rename to x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/chart_switch.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx
similarity index 98%
rename from x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/chart_switch.tsx
rename to x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx
index e212cb70d1855..4c5a44ecc695e 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/chart_switch.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx
@@ -11,7 +11,7 @@ import {
   EuiPopoverTitle,
   EuiKeyPadMenu,
   EuiKeyPadMenuItem,
-  EuiButtonEmpty,
+  EuiButton,
 } from '@elastic/eui';
 import { flatten } from 'lodash';
 import { i18n } from '@kbn/i18n';
@@ -72,6 +72,8 @@ function VisualizationSummary(props: Props) {
   );
 }
 
+import './chart_switch.scss';
+
 export function ChartSwitch(props: Props) {
   const [flyoutOpen, setFlyoutOpen] = useState<boolean>(false);
 
@@ -198,20 +200,18 @@ export function ChartSwitch(props: Props) {
       ownFocus
       initialFocus=".lnsChartSwitch__popoverPanel"
       panelClassName="lnsChartSwitch__popoverPanel"
-      anchorClassName="eui-textTruncate"
       panelPaddingSize="s"
       button={
-        <EuiButtonEmpty
+        <EuiButton
           className="lnsChartSwitch__triggerButton"
           onClick={() => setFlyoutOpen(!flyoutOpen)}
           data-test-subj="lnsChartSwitchPopover"
-          flush="left"
           iconSide="right"
           iconType="arrowDown"
           color="text"
         >
           <VisualizationSummary {...props} />
-        </EuiButtonEmpty>
+        </EuiButton>
       }
       isOpen={flyoutOpen}
       closePopover={() => setFlyoutOpen(false)}
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/index.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/index.ts
new file mode 100644
index 0000000000000..d23afd4129cbe
--- /dev/null
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/index.ts
@@ -0,0 +1,7 @@
+/*
+ * 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 { WorkspacePanel } from './workspace_panel';
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.test.tsx
similarity index 97%
rename from x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel.test.tsx
rename to x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.test.tsx
index 49d12e9f41440..a9c638df8cad1 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel.test.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.test.tsx
@@ -6,19 +6,19 @@
 
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { ReactExpressionRendererProps } from '../../../../../../src/plugins/expressions/public';
-import { FramePublicAPI, TableSuggestion, Visualization } from '../../types';
+import { ReactExpressionRendererProps } from '../../../../../../../src/plugins/expressions/public';
+import { FramePublicAPI, TableSuggestion, Visualization } from '../../../types';
 import {
   createMockVisualization,
   createMockDatasource,
   createExpressionRendererMock,
   DatasourceMock,
   createMockFramePublicAPI,
-} from '../mocks';
+} from '../../mocks';
 import { InnerWorkspacePanel, WorkspacePanelProps } from './workspace_panel';
 import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
-import { DragDrop, ChildDragDropProvider } from '../../drag_drop';
+import { DragDrop, ChildDragDropProvider } from '../../../drag_drop';
 import { Ast } from '@kbn/interpreter/common';
 import { coreMock } from 'src/core/public/mocks';
 import {
@@ -26,12 +26,12 @@ import {
   esFilters,
   IFieldType,
   IIndexPattern,
-} from '../../../../../../src/plugins/data/public';
-import { TriggerId, UiActionsStart } from '../../../../../../src/plugins/ui_actions/public';
-import { uiActionsPluginMock } from '../../../../../../src/plugins/ui_actions/public/mocks';
-import { TriggerContract } from '../../../../../../src/plugins/ui_actions/public/triggers';
-import { VIS_EVENT_TO_TRIGGER } from '../../../../../../src/plugins/visualizations/public/embeddable';
-import { dataPluginMock } from '../../../../../../src/plugins/data/public/mocks';
+} from '../../../../../../../src/plugins/data/public';
+import { TriggerId, UiActionsStart } from '../../../../../../../src/plugins/ui_actions/public';
+import { uiActionsPluginMock } from '../../../../../../../src/plugins/ui_actions/public/mocks';
+import { TriggerContract } from '../../../../../../../src/plugins/ui_actions/public/triggers';
+import { VIS_EVENT_TO_TRIGGER } from '../../../../../../../src/plugins/visualizations/public/embeddable';
+import { dataPluginMock } from '../../../../../../../src/plugins/data/public/mocks';
 
 describe('workspace_panel', () => {
   let mockVisualization: jest.Mocked<Visualization>;
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
similarity index 91%
rename from x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel.tsx
rename to x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
index 670afe28293a4..beb6952556067 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
@@ -20,23 +20,23 @@ import { CoreStart, CoreSetup } from 'kibana/public';
 import {
   ExpressionRendererEvent,
   ReactExpressionRendererType,
-} from '../../../../../../src/plugins/expressions/public';
-import { Action } from './state_management';
+} from '../../../../../../../src/plugins/expressions/public';
+import { Action } from '../state_management';
 import {
   Datasource,
   Visualization,
   FramePublicAPI,
   isLensBrushEvent,
   isLensFilterEvent,
-} from '../../types';
-import { DragDrop, DragContext } from '../../drag_drop';
-import { getSuggestions, switchToSuggestion } from './suggestion_helpers';
-import { buildExpression } from './expression_helpers';
-import { debouncedComponent } from '../../debounced_component';
-import { trackUiEvent } from '../../lens_ui_telemetry';
-import { UiActionsStart } from '../../../../../../src/plugins/ui_actions/public';
-import { VIS_EVENT_TO_TRIGGER } from '../../../../../../src/plugins/visualizations/public';
-import { DataPublicPluginStart } from '../../../../../../src/plugins/data/public';
+} from '../../../types';
+import { DragDrop, DragContext } from '../../../drag_drop';
+import { getSuggestions, switchToSuggestion } from '../suggestion_helpers';
+import { buildExpression } from '../expression_helpers';
+import { debouncedComponent } from '../../../debounced_component';
+import { trackUiEvent } from '../../../lens_ui_telemetry';
+import { UiActionsStart } from '../../../../../../../src/plugins/ui_actions/public';
+import { VIS_EVENT_TO_TRIGGER } from '../../../../../../../src/plugins/visualizations/public';
+import { DataPublicPluginStart } from '../../../../../../../src/plugins/data/public';
 import { WorkspacePanelWrapper } from './workspace_panel_wrapper';
 
 export interface WorkspacePanelProps {
@@ -300,7 +300,10 @@ export function InnerWorkspacePanel({
       dispatch={dispatch}
       emptyExpression={expression === null}
       visualizationState={visualizationState}
-      activeVisualization={activeVisualization}
+      visualizationId={activeVisualizationId}
+      datasourceStates={datasourceStates}
+      datasourceMap={datasourceMap}
+      visualizationMap={visualizationMap}
     >
       <DragDrop
         data-test-subj="lnsWorkspace"
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel_wrapper.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.test.tsx
similarity index 82%
rename from x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel_wrapper.test.tsx
rename to x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.test.tsx
index 517dff5b5e74c..f7ae7753698bb 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel_wrapper.test.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.test.tsx
@@ -5,8 +5,8 @@
  */
 
 import React from 'react';
-import { Visualization } from '../../types';
-import { createMockVisualization, createMockFramePublicAPI, FrameMock } from '../mocks';
+import { Visualization } from '../../../types';
+import { createMockVisualization, createMockFramePublicAPI, FrameMock } from '../../mocks';
 import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { WorkspacePanelWrapper, WorkspacePanelWrapperProps } from './workspace_panel_wrapper';
@@ -32,7 +32,10 @@ describe('workspace_panel_wrapper', () => {
         dispatch={jest.fn()}
         framePublicAPI={mockFrameAPI}
         visualizationState={{}}
-        activeVisualization={mockVisualization}
+        visualizationId="myVis"
+        visualizationMap={{ myVis: mockVisualization }}
+        datasourceMap={{}}
+        datasourceStates={{}}
         emptyExpression={false}
       >
         <MyChild />
@@ -51,7 +54,10 @@ describe('workspace_panel_wrapper', () => {
         framePublicAPI={mockFrameAPI}
         visualizationState={visState}
         children={<span />}
-        activeVisualization={{ ...mockVisualization, renderToolbar: renderToolbarMock }}
+        visualizationId="myVis"
+        visualizationMap={{ myVis: { ...mockVisualization, renderToolbar: renderToolbarMock } }}
+        datasourceMap={{}}
+        datasourceStates={{}}
         emptyExpression={false}
       />
     );
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
similarity index 69%
rename from x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel_wrapper.tsx
rename to x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
index 17461b9fc274f..60c31e5d090e5 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel_wrapper.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
@@ -14,29 +14,43 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
 } from '@elastic/eui';
-import { FramePublicAPI, Visualization } from '../../types';
-import { NativeRenderer } from '../../native_renderer';
-import { Action } from './state_management';
+import { Datasource, FramePublicAPI, Visualization } from '../../../types';
+import { NativeRenderer } from '../../../native_renderer';
+import { Action } from '../state_management';
+import { ChartSwitch } from './chart_switch';
 
 export interface WorkspacePanelWrapperProps {
   children: React.ReactNode | React.ReactNode[];
   framePublicAPI: FramePublicAPI;
   visualizationState: unknown;
-  activeVisualization: Visualization | null;
   dispatch: (action: Action) => void;
   emptyExpression: boolean;
   title?: string;
+  visualizationMap: Record<string, Visualization>;
+  visualizationId: string | null;
+  datasourceMap: Record<string, Datasource>;
+  datasourceStates: Record<
+    string,
+    {
+      isLoading: boolean;
+      state: unknown;
+    }
+  >;
 }
 
 export function WorkspacePanelWrapper({
   children,
   framePublicAPI,
   visualizationState,
-  activeVisualization,
   dispatch,
   title,
   emptyExpression,
+  visualizationId,
+  visualizationMap,
+  datasourceMap,
+  datasourceStates,
 }: WorkspacePanelWrapperProps) {
+  const activeVisualization = visualizationId ? visualizationMap[visualizationId] : null;
   const setVisualizationState = useCallback(
     (newState: unknown) => {
       if (!activeVisualization) {
@@ -52,7 +66,19 @@ export function WorkspacePanelWrapper({
     [dispatch]
   );
   return (
-    <EuiFlexGroup gutterSize="s" direction="column" alignItems="stretch">
+    <EuiFlexGroup gutterSize="s" direction="column" alignItems="stretch" responsive={false}>
+      <EuiFlexItem grow={false}>
+        <ChartSwitch
+          data-test-subj="lnsChartSwitcher"
+          visualizationMap={visualizationMap}
+          visualizationId={visualizationId}
+          visualizationState={visualizationState}
+          datasourceMap={datasourceMap}
+          datasourceStates={datasourceStates}
+          dispatch={dispatch}
+          framePublicAPI={framePublicAPI}
+        />
+      </EuiFlexItem>
       {activeVisualization && activeVisualization.renderToolbar && (
         <EuiFlexItem grow={false}>
           <NativeRenderer